1@mixin col-label {
2  text-transform: uppercase;
3  font-weight: 700;
4  font-size: .8em;
5}
6
7$title-minWidth: 210px;
8
9.inventory__heading {
10  font-weight: 700;
11}
12
13.inv-active {
14  color: $active;
15}
16
17.inv-inactive {
18  color: $inactive;
19}
20
21.inv-present {
22  color: $present;
23}
24.inv-not-present {
25  color: $not-present;
26}
27
28.inventory__critical-label {
29  color: $thresh-critical;
30}
31
32.inventory__warning-label {
33  color: $thresh-warning;
34}
35
36.inventory__medium-label {
37  color: $medium-lightbg;
38}
39
40.inventory__low-label {
41  color: $low-lightbg;
42}
43
44.col-3 {
45  @include calcColumn-3;
46}
47.col-4 {
48  min-width: 100%;
49  @include mediaQuery(medium) {
50    @include calcColumn-4(15px);
51  }
52}
53// Inventory Overview
54
55#inventory-overview {
56  .inventory__group {
57    position: relative;
58    display: block;
59    margin: .5em 0;
60    font-weight: 700;
61    background: $white;
62    padding: 1em 1em 0 3.7em;
63    text-decoration: none;
64    border: 1px solid $lightgrey;
65    vertical-align: middle;
66    &:hover {
67      background: $lightblue;
68      color: $black;
69    }
70    @include mediaQuery(x-large) {
71      //max-width: 60%;
72    }
73    .inv-active {
74      color: darken($active, 20%);
75    }
76    .inv-present {
77      color: darken($present, 20%);
78    }
79    &.inv-disabled {
80      background: lighten($lightgrey, 5%);
81      .inventory__device-col {
82        color: lighten($darkgrey, 20%);
83      }
84    }
85  }
86  .priority-tag-circ {
87    position: absolute;
88    top: 50%;
89    left: 1.2em;
90    transform: translateY(-50%);
91  }
92
93  // Header row
94  .header__actions-bar {
95    padding-left: 3.5em;
96    padding-right: 1em;
97  }
98}
99
100// Inventory single items
101
102#inventory, #inventory-overview {
103  .inventory__device-col {
104    margin-right: 6px;
105    width: 50%;
106    @include mediaQuery(medium){
107      width: auto;
108    }
109  }
110  .inventory__function-col {
111    @include col-label;
112    display: none;
113  }
114  .inventory__present-col {
115    @include col-label;
116    display: none;
117  }
118  .inventory__state-col {
119    @include col-label;
120  }
121  .inventory__device-col,
122  .inventory__function-col,
123  .inventory__present-col,
124  .inventory__state-col {
125    @media (min-width: 1025px){
126      display: inline-block;
127      @include calcColumn-4(5px);
128    }
129  }
130
131  .content__search {
132    max-width: 100%;
133    @media(min-width: 1300px) {
134      max-width: 50%;
135    }
136  }
137  .toggle-filter {
138    display: inline-block;
139    margin-right: 0;
140  }
141}
142
143.back-link {
144  margin: 1em 0 1em;
145  a {
146    text-decoration: none;
147    position: relative;
148    display: inline-block;
149    padding-left: 1.2em;
150    font-weight: 700;
151    &:before {
152      content: '\221F';
153      position: absolute;
154      top: 50%;
155      left: 0;
156      transform: translateY(-53%) rotate(45deg);
157      display: inline-block;
158      margin-right: 6px;
159      font-size: 1.1em;
160      font-weight: bold;
161      text-shadow: 0 0 1px black;
162    }
163    &:hover {
164      text-decoration: underline;
165    }
166  }
167}
168
169#inventory__details {
170  display: block;
171  margin-top: .6em;
172  position: relative;
173  overflow: hidden;
174
175  .header__actions-bar {
176    position: relative;
177
178    .priority-tag-circ {
179      position: absolute;
180      left: 1.2em;
181      top: 50%;
182      transform: translateY(-50%);
183      &.high-priority {
184        background-color: rgba($critical-darkbg, .3);
185      }
186    }
187    .inventory__category {
188      margin: 0;
189      color: $white;
190      min-width: $title-minWidth;
191    }
192  }
193  .accord-row {padding-left: 3.7em;}
194  .header-row {
195    background: $darkpurple;
196    padding-top: 1.5em;
197    padding-bottom: 0;
198    .inv-active {
199      color: $active;
200    }
201
202    .inv-inactive {
203      color: $inactive;
204    }
205
206    .inv-present {
207      color: $present;
208    }
209    .inv-not-present {
210      color: $not-present;
211    }
212
213    .inventory__critical-label {
214      color: lighten($thresh-critical, 15%);
215    }
216
217    .inventory__warning-label {
218      color: $thresh-warning;
219    }
220
221    .inventory__medium-label {
222      color: $medium-lightbg;
223    }
224
225    .inventory__low-label {
226      color: lighten($low-lightbg, 20%);
227    }
228  }
229
230  //Export log
231  .btn-export {
232    text-transform: capitalize;
233    color: $black;
234    font-size: .9em;
235    font-weight: 700;
236    position: relative;
237    padding: 0 0 1em 2em;
238    &:hover {
239      text-decoration: underline;
240    }
241  }
242  .btn-export {
243    margin-top: 7px;
244  }
245  .btn-export:before {
246    content: '\21E5';
247    position: absolute;
248    font-size: 1.7em;
249    vertical-align: middle;
250    transform: rotate(90deg);
251    display: inline-block;
252    left: 2px;
253    top: -5px;
254  }
255
256  .accord-row {
257    padding-top: 1.6em;
258    .priority-tag-circ {
259      position: absolute;
260      top: 28px;
261      left: 1.2em;
262    }
263  }
264
265  .accord-trigger {
266    position: absolute;
267    top: 20px;
268    right: 1em;
269  }
270  //Sensor info
271  .inventory__title {
272    font-weight: 700;
273    font-size: 1.1em;
274    min-width: $title-minWidth;
275    max-width: 78%;
276    vertical-align: top;
277  }
278  .inventory__description {
279    font-weight: 400;
280  }
281
282  .inventory__reading {
283    @include fontCourierBold;
284    font-size: 1.2em;
285    color: $black;
286    //max-width: 18%;
287  }
288
289  // Sensor metadata row
290  .inventory__metadata-row {
291    max-height: 0;
292    overflow: hidden;
293    -webkit-transition: 0.5s linear max-height;
294    transition: 0.5s linear max-height;
295    padding: 0;
296    .content-label {
297      margin-top: 1em;
298    }
299    &.active {
300      max-height: 1000px; //max-height used to allow flexible height of content and still allow transition
301      @include fastTransition-all;
302    }
303  }
304  .inv-event-log-row {
305    border-top: 2px solid $lightgrey;
306    margin-right: 3.7em;
307    margin-left: 0;
308    padding-top: .8em;
309    word-break: break-word;
310    :first-child,
311    :last-child {
312      font-size: .9em;
313      font-weight: 600;
314      text-transform: uppercase;
315      text-decoration: none;
316      padding-bottom: .7em;
317      padding-top: .7em;
318      @include mediaQuery(small) {
319        padding-bottom: 0;
320        padding-top: 0;
321      }
322    }
323    a:hover {
324      text-decoration: underline;
325    }
326    .column {
327      margin-bottom: 0;
328    }
329  }
330  .event__description {
331    @include mediaQuery(medium) {
332      padding-left: 1.6em;
333    }
334  }
335}
336
337//end inventory details
338
339
340