1@mixin state-label {
2  text-transform: uppercase;
3  font-weight: 700;
4  font-size: .8em;
5}
6
7$title-minWidth: 210px;
8
9.header__actions-bar {
10  padding-left: 1.5em;
11  font-weight: 700;
12  .sensor__reading {
13    margin-right: .3em;
14  }
15  .sensor__heading-current {
16    padding-right: 1em;
17  }
18}
19
20.sensor__heading-current {
21  margin: 0;
22  @include mediaQuery(medium) {
23    margin-left: 10px;
24    margin-right: 10px;
25  }
26}
27
28.sensor__label {
29  float: left;
30  font-weight: 300;
31  @include mediaQuery(medium) {
32    display: none;
33  }
34}
35
36.sensor__title {
37  min-width: 30%;
38  margin-bottom: 0;
39}
40
41.sensor__reading {
42  width: 100%;
43  text-align: right;
44  margin-bottom: 0;
45  display: none;
46  @include mediaQuery(medium) {
47    display: inline-block;
48    width: auto;
49    min-width: calc(70% * (1 / 5) - 18px);
50  }
51}
52
53.sensor__readings-row {
54  position: relative;
55  display: block;
56  margin: 0;
57  background: $white;
58  text-decoration: none;
59  border: 1px solid $medgrey;
60  background: lighten($lightgrey,1%);
61  margin-top: 1em;
62  @include mediaQuery(medium) {
63    padding: .3em 1em .3em 1.5em;
64    margin-top: 0;
65    border-top: 0;
66    background: transparent;
67  }
68  .sensor__title {
69    font-weight: 700;
70    background: darken($lightgrey, 5%);
71    min-width: 100%;
72    padding: .8em;
73    @include mediaQuery(medium) {
74      min-width: 30%;
75      background: transparent;
76      padding: .5em .5em .5em 0;
77    }
78    .icon__normal {
79      width: 0;
80    }
81  }
82  .content-label {
83    font-size: 1em;
84    margin-left: .8em;
85    color: $darkgrey;
86  }
87  .sensor__reading {
88    @include fontCourierBold;
89    display: block;
90    padding: .3em .8em;
91    @include mediaQuery(medium) {
92      display: inline-block;
93      padding: 0;
94    }
95  }
96  .sensor__current {
97    background: darken($thresh-normal, 3%);
98    margin: 0;
99    @include mediaQuery(medium) {
100      background: $thresh-normal;
101      padding: .7em .3em;
102      margin-left: 10px;
103      min-width: 109px;
104    }
105    @include mediaQuery(large) {
106      background: $thresh-normal;
107      padding: .7em;
108      margin-left: .3em;
109      margin-right: .3em;
110      min-width: 150px;
111    }
112    .sensor__label {
113      font-weight: 700;
114      @include mediaQuery(medium) {
115        font-weight:300;
116      }
117    }
118  }
119  .sensor__critical {
120    background: $thresh-critical;
121    color: $white;
122    .content-label {
123      color: $white;
124    }
125  }
126  .sensor__warn {
127    background: $thresh-warning;
128    color: $black;
129    .content-label {
130      color: $black;
131    }
132  }
133
134}
135
136// Sensors
137
138#sensors, #sensors-overview {
139
140  .content__search {
141    max-width: 100%;
142    @media(min-width: 1300px) {
143      max-width: 70%;
144    }
145  }
146  .toggle-filter {
147    margin-right: 0;
148  }
149}
150
151//end sensor details