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  .icon {
66    margin: -8px 0 -8px -8px;
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  }
79  .content-label {
80    font-size: 1em;
81    margin-left: .8em;
82    color: lighten($darkgrey, 10%);
83  }
84  .sensor__reading {
85    @include fontCourierBold;
86    display: block;
87    padding: .3em .8em;
88    @include mediaQuery(medium) {
89      display: inline-block;
90      padding: 0;
91    }
92  }
93  .sensor__current {
94    background: darken($thresh-normal, 3%);
95    margin: 0;
96    @include mediaQuery(medium) {
97      background: $thresh-normal;
98      padding: .7em 1em;
99      margin-left: 10px;
100      margin-right: 10px;
101    }
102    .sensor__label {
103      font-weight: 700;
104      @include mediaQuery(medium) {
105        font-weight:300;
106      }
107    }
108  }
109  .sensor__critical {
110    background: $thresh-critical;
111    color: $white;
112    .content-label {
113      color: $white;
114    }
115  }
116  .sensor__warn {
117    background: $thresh-warning;
118    color: $black;
119    .content-label {
120      color: $black;
121    }
122  }
123
124}
125
126// Sensors
127
128#sensors, #sensors-overview {
129
130  .content__search {
131    max-width: 100%;
132    @media(min-width: 1300px) {
133      max-width: 70%;
134    }
135  }
136  .toggle-filter {
137    margin-right: 0;
138  }
139}
140
141//end sensor details