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