1
2@mixin state-label {
3  text-transform: uppercase;
4  font-weight: 700;
5  font-size: .8em;
6}
7
8$title-minWidth: 210px;
9
10.sensor__heading {
11  font-weight: 700;
12  &.middle,
13  &.right {
14    display: none;
15    @media (min-width: 950px) {
16      display: inline-block;
17    }
18  }
19}
20
21.sensor__critical-label {
22  color: $thresh-critical;
23  @include state-label;
24}
25.sensor__warning-label {
26  color: $thresh-warning;
27  @include state-label;
28}
29
30#sensors-overview {
31  .sensor__group {
32    position: relative;
33    display: block;
34    margin: .5em 0;
35    background: $white;
36    padding: 1.5em 6em 1.5em 3.7em;
37    text-decoration: none;
38    border: 1px solid $lightgrey;
39    font-weight: 700;
40    &:hover {
41      background: $lightblue;
42      color: $black;
43    }
44    @include mediaQuery(x-large) {
45      //max-width: 60%;
46    }
47  }
48  .priority-tag-circ {
49    position: absolute;
50    top: 50%;
51    left: 1.2em;
52    transform: translateY(-50%);
53  }
54  .header__actions-bar {
55    padding-left: 3.5em;
56    padding-right: 7.3em;
57  }
58}
59
60// Sensors
61
62#sensors, #sensors-overview {
63  .accord-row {
64    padding-left: 3.7em;
65    padding-right: 1em;
66  }
67  .content__search {
68    max-width: 100%;
69    @media(min-width: 1300px) {
70      max-width: 50%;
71    }
72  }
73  .toggle-filter {
74    display: inline-block;
75    margin-right: 0;
76  }
77}
78
79#back-link {
80  margin: 1em 0 0;
81  a {
82    text-decoration: none;
83    position: relative;
84    display: inline-block;
85    padding-left: 1.2em;
86    font-weight: 700;
87    &:before {
88      content: '\221F';
89      position: absolute;
90      top: 50%;
91      left: 0;
92      transform: translateY(-53%) rotate(45deg);
93      display: inline-block;
94      margin-right: 6px;
95      font-size: 1.1em;
96      font-weight: bold;
97      text-shadow: 0 0 1px black;
98    }
99    &:hover {
100      text-decoration: underline;
101    }
102  }
103}
104
105#sensor__details {
106  display: block;
107  margin-top: .6em;
108  position: relative;
109  overflow: hidden;
110
111  .header__actions-bar {
112    position: relative;
113    padding: 1em 35px 0 3.7em;
114
115    .priority-tag-circ {
116      position: absolute;
117      left: 1.2em;
118      top: 50%;
119      transform: translateY(-50%);
120      &.high-priority {
121        background-color: rgba($critical-darkbg, .3);
122      }
123    }
124    .sensor__category {
125      margin: 0;
126      color: $white;
127      min-width: $title-minWidth;
128    }
129  }
130  .header-row {
131    background: $darkpurple;
132  }
133
134  //Export log
135  .btn-export {
136    text-transform: capitalize;
137    color: $black;
138    font-size: .9em;
139    font-weight: 700;
140    position: relative;
141    padding: 0 0 1em 2em;
142    &:hover {
143      text-decoration: underline;
144    }
145  }
146  .btn-export {
147    margin-top: 7px;
148  }
149  .btn-export:before {
150    content: '\21E5';
151    position: absolute;
152    font-size: 1.7em;
153    vertical-align: middle;
154    transform: rotate(90deg);
155    display: inline-block;
156    left: 2px;
157    top: -5px;
158  }
159
160  .sensor__info {
161    padding-top: 10px;
162    &:hover {
163      cursor: pointer;
164    }
165  }
166
167  .accord-row {
168    // accordion row
169    .priority-tag-circ {
170      position: absolute;
171      top: 28px;
172      left: 1.2em;
173    }
174
175  }
176
177  //Sensor info
178  .sensor__title {
179    font-weight: 700;
180    font-size: 1.1em;
181    min-width: $title-minWidth;
182    max-width: 78%;
183    vertical-align: top;
184  }
185  .sensors__description {
186    font-weight: 400;
187  }
188
189  .sensor__reading {
190    @include fontCourierBold;
191    font-size: 1.2em;
192    color: $black;
193    max-width: 18%;
194  }
195
196  // Sensor metadata row
197  .sensors__metadata-row {
198    max-height: 0;
199    overflow: hidden;
200    -webkit-transition: 0.5s linear max-height;
201    transition: 0.5s linear max-height;
202    padding: 0;
203    @include  fastTransition-all;
204    @include mediaQuery(large) {
205      margin-left: 200px;
206    }
207    &.active {
208      max-height: 1000px; //max-height used to allow flexible height of content and still allow transition
209      @include mediaQuery(small) {
210        max-height: 1000px;
211      }
212      @include mediaQuery(medium) {
213        max-height: 1000px;
214      }
215    }
216  }
217
218  //Sensor Related Items
219  .sensors__related {
220    width: 100%;
221  }
222  .sensors__related-label {
223    font-weight: 700;
224    margin-right: 1.2em;
225    padding-top: .3em;
226  }
227
228  .sensors__related-item {
229    margin-right: 1em;
230    padding-top: .3em;
231    display: inline-block;
232    float: left;
233    clear: both;
234  }
235
236  .sensors__icon {
237    width: 20px;
238    height: 20px;
239    font-weight: normal;
240    margin-right: .5em;
241    margin-top: -3px;
242    display: inline-block;
243  }
244
245}
246
247//end sensor details
248
249
250