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