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: 1.8em 1em 1em 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 0;
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-left: 3.7em;
197    .inv-active {
198      color: $active;
199    }
200
201    .inv-inactive {
202      color: $inactive;
203    }
204
205    .inv-present {
206      color: $present;
207    }
208    .inv-not-present {
209      color: $not-present;
210    }
211
212    .inventory__critical-label {
213      color: lighten($thresh-critical, 15%);
214    }
215
216    .inventory__warning-label {
217      color: $thresh-warning;
218    }
219
220    .inventory__medium-label {
221      color: $medium-lightbg;
222    }
223
224    .inventory__low-label {
225      color: lighten($low-lightbg, 20%);
226    }
227  }
228
229  //Export log
230  .btn-export {
231    text-transform: capitalize;
232    color: $black;
233    font-size: .9em;
234    font-weight: 700;
235    position: relative;
236    padding: 0 0 1em 2em;
237    &:hover {
238      text-decoration: underline;
239    }
240  }
241  .btn-export {
242    margin-top: 7px;
243  }
244  .btn-export:before {
245    content: '\21E5';
246    position: absolute;
247    font-size: 1.7em;
248    vertical-align: middle;
249    transform: rotate(90deg);
250    display: inline-block;
251    left: 2px;
252    top: -5px;
253  }
254
255  .accord-row {
256    padding-top: 1.6em;
257    .priority-tag-circ {
258      position: absolute;
259      top: 28px;
260      left: 1.2em;
261    }
262  }
263
264  .accord-trigger {
265    position: absolute;
266    top: 20px;
267    right: 1em;
268  }
269  //Sensor info
270  .inventory__title {
271    font-weight: 700;
272    font-size: 1.1em;
273    min-width: $title-minWidth;
274    max-width: 78%;
275    vertical-align: top;
276  }
277  .inventory__description {
278    font-weight: 400;
279  }
280
281  .inventory__reading {
282    @include fontCourierBold;
283    font-size: 1.2em;
284    color: $black;
285    //max-width: 18%;
286  }
287
288  // Sensor metadata row
289  .inventory__metadata-row {
290    max-height: 0;
291    overflow: hidden;
292    -webkit-transition: 0.5s linear max-height;
293    transition: 0.5s linear max-height;
294    padding: 0;
295    &.active {
296      max-height: 1000px; //max-height used to allow flexible height of content and still allow transition
297      @include fastTransition-all;
298      //@include mediaQuery(small) {
299      //  max-height: 1000px;
300      //}
301      //@include mediaQuery(medium) {
302      //  max-height: 1000px;
303      //}
304    }
305  }
306  .inv-event-log-row {
307    position: relative;
308    z-index: 100;
309    border-top: 2px solid $lightgrey;
310    margin-right: 3.7em;
311    margin-left: 0;
312    padding-top: .8em;
313    word-break: break-word;
314    :first-child,
315    :last-child {
316      font-size: .9em;
317      font-weight: 600;
318      text-transform: uppercase;
319      text-decoration: none;
320      padding-bottom: .7em;
321      padding-top: .7em;
322      @include mediaQuery(small) {
323        padding-bottom: 0;
324        padding-top: 0;
325      }
326    }
327    a:hover {
328      text-decoration: underline;
329    }
330    .column {
331      margin-bottom: 0;
332    }
333  }
334  .event__description {
335    @include mediaQuery(medium) {
336      padding-left: 1.6em;
337    }
338  }
339}
340
341//end inventory details
342
343
344