1.sensors {
2  max-width: 1196px;
3}
4
5.sensors__table {
6  display: block;
7  border-collapse: collapse;
8}
9
10.sensors__thead {
11  display: block;
12}
13
14.sensors__thead-row {
15  display: block;
16  background: $darkblue;
17  color: $white;
18  margin-bottom: 1rem;
19
20  @include mediaQuery(medium) {
21    display: flex;
22    margin-bottom: 0;
23  }
24}
25
26.sensors__thead-cell {
27  display: block;
28  padding: 1rem;
29  font-weight: 700;
30
31  &:not(:first-child) {
32    display: none;
33  }
34
35  @include mediaQuery(medium) {
36    flex: 1;
37
38    &:not(:first-child) {
39      display: block;
40      flex-grow: 0;
41      flex-shrink: 0;
42      flex-basis: 0;
43      min-width: 16%;
44    }
45  }
46}
47
48.sensors__tbody {
49  display: block;
50}
51
52.sensors__tbody-row {
53  display: flex;
54  flex-direction: column;
55  border: 1px solid $medgrey;
56  margin-bottom: 1rem;
57
58  @include mediaQuery(medium) {
59    display: flex;
60    flex-direction: row;
61    margin-bottom: 0;
62  }
63}
64
65.sensors__tbody-header {
66  display: block;
67  background: darken($lightgrey, 5%);
68  padding: 0.5rem 1rem;
69  font-weight: 700;
70  .icon.icon__normal {
71    display: none;
72  }
73
74  @include mediaQuery(medium) {
75    flex: 1;
76    align-items: center;
77    background: transparent;
78    font-weight: 400;
79    margin-top: 0.5rem;
80    margin-bottom: 0.5rem;
81  }
82}
83
84.sensors__tbody-cell {
85  display: flex;
86  justify-content: space-between;
87  padding: 0.5rem 1rem;
88  @include fontCourierBold;
89
90  @include mediaQuery(medium) {
91    flex-grow: 0;
92    flex-shrink: 0;
93    flex-basis: 0;
94    align-items: center;
95    min-width: 16%;
96    justify-content: flex-start;
97    margin-top: 0.5rem;
98    margin-bottom: 0.5rem;
99  }
100}
101
102.sensors__tbody-cell__title {
103  font-weight: 300;
104
105  @include mediaQuery(medium) {
106    display: none;
107  }
108}
109
110.sensors__tbody-unit {
111  display: inline-block;
112  color: $darkgrey;
113  margin-left: 0.5em;
114  font-weight: 700;
115  text-transform: uppercase;
116
117  @include mediaQuery(medium) {
118    margin-left: 0;
119  }
120}
121
122.sensors__tbody-degree {
123  display: inline-block;
124  margin-left: -8px;
125}
126
127.sensors__tbody-current {
128  background: darken($thresh-normal, 3%);
129
130  .sensors__tbody-cell__title {
131    font-weight: 700;
132  }
133}
134
135.sensors__tbody-current--critical {
136  background: $thresh-critical;
137  color: $white;
138
139  .sensors__tbody-unit {
140    color: $white;
141  }
142}
143
144.sensors__tbody-current--warn {
145  background: $thresh-warning;
146  color: $black;
147
148  .sensors__tbody-unit {
149    color: $black;
150  }
151}
152