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