1
2// Table Header
3.table-header {
4  width: 100%;
5  color: $black;
6  line-height: 30px;
7  padding: .8em 0 0;
8  margin-bottom: .8em;
9  border-bottom: 1px solid $medgrey;
10  font-size: 1.25em;
11  @include mediaQuery(medium) {
12    margin: 1.8em 0;
13  }
14}
15
16// Table
17.table {
18  width: 100%;
19}
20
21.table__row {
22  display: flex;
23  width: 100%;
24  max-width: calc(100vw - 10px);
25  flex-wrap: wrap;
26  font-weight: 400;
27  position: relative;
28  &.disabled {
29    background-color: $disabled-row;
30    color: $disabled-row-txt;
31  }
32}
33
34.table__row-save {
35  position: absolute;
36  top: 0;
37  left: 0;
38  width: 100%;
39  height:100%;
40  background: $darkbg__primary;
41  z-index:200;
42  color: $white;
43  padding: .8em 1em;
44  text-align: center;
45  font-size: 1.5em;
46  font-weight: bold;
47}
48
49.table__cell {
50  flex: 0 0 100%;
51  line-height: 2.8em;
52  padding: .5em 1em;
53  white-space: nowrap;
54  overflow: hidden;
55  text-overflow: ellipsis;
56  border-bottom: 1px solid $medgrey;
57  @include mediaQuery(small) {
58    flex: 1;
59  }
60  //
61  //@include mediaQuery(large) {
62  //  padding: 15px 30px;
63  //}
64}
65
66.table__cell-label {
67  display: inline-block;
68  font-weight: 700;
69  min-width: 50%;
70  padding-right: 15px;
71
72  @include mediaQuery(small) {
73    display: none;
74  }
75}
76
77// Table Head
78.table__head {
79  .table__row {
80    display: none;
81    font-weight: 700;
82    border-bottom: 1px solid $medgrey;
83    background-color: $darkbg__primary;
84    color: $white;
85
86    @include mediaQuery(small) {
87      display: flex;
88    }
89
90    .table__cell {
91      @include fastTransition-all();
92      position: relative;
93      border: 0;
94      &:last-child {
95        border: 0;
96      }
97    }
98  }
99}
100
101.table__row-uploading {
102  color: $darkgrey;
103  font-weight: 700;
104  @include indeterminate-bar;
105}
106
107//sortable heading
108.sort-heading {
109  position: relative;
110  color: $lightblue;
111  &::after {
112    content: '\025be';
113    position: absolute;
114    right: -20px;
115    top: -1px;
116    font-size: 1.3em;
117  }
118  &::before {
119    content: '\025be';
120    position: absolute;
121    right: -20px;
122    top: -10px;
123    font-size: 1.3em;
124    transform: rotate(180deg);
125  }
126  &.sort-up {
127    &::before {
128      color: $darkbg__accent;
129    }
130  }
131  &.sort-down {
132    &::after {
133      color: $darkbg__accent;
134    }
135  }
136}
137