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