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  .icon.icon__normal {
76    display: none;
77  }
78
79  @include mediaQuery(medium) {
80    flex: 1;
81    align-items: center;
82    background: transparent;
83    font-weight: 400;
84    margin-top: 0.5rem;
85    margin-bottom: 0.5rem;
86  }
87}
88
89.sensors__tbody-cell {
90  display: flex;
91  justify-content: space-between;
92  padding: 0.5rem 1rem;
93  @include fontCourierBold;
94
95  @include mediaQuery(medium) {
96    flex-grow: 0;
97    flex-shrink: 0;
98    flex-basis: 0;
99    align-items: center;
100    min-width: 16%;
101    justify-content: flex-start;
102    margin-top: 0.5rem;
103    margin-bottom: 0.5rem;
104  }
105}
106
107.sensors__tbody-cell__title {
108  font-weight: 300;
109
110  @include mediaQuery(medium) {
111    display: none;
112  }
113}
114
115.sensors__tbody-unit {
116  display: inline-block;
117  color: $text-01;
118  margin-left: 0.5em;
119  font-weight: 700;
120  text-transform: uppercase;
121
122  @include mediaQuery(medium) {
123    margin-left: 0;
124  }
125}
126
127.sensors__tbody-degree {
128  display: inline-block;
129  margin-left: -8px;
130}
131
132.sensors__tbody-current {
133  background: darken($thresh-normal, 3%);
134
135  .sensors__tbody-cell__title {
136    font-weight: 700;
137  }
138}
139
140.sensors__tbody-current--critical {
141  background: $thresh-critical;
142  color: $primary-light;
143
144  .sensors__tbody-unit {
145    color: $primary-light;
146  }
147}
148
149.sensors__tbody-current--warn {
150  background: $thresh-warning;
151  color: $primary-dark;
152
153  .sensors__tbody-unit {
154    color: $primary-dark;
155  }
156}
157