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  padding: 1em 0;
12}
13
14// Inventory Overview
15.inventory-overview {
16  .inventory__group {
17    position: relative;
18    display: block;
19    margin: 0;
20    font-weight: 700;
21    background: $white;
22    padding: 1em 1em 0 1.5em;
23    text-decoration: none;
24    border-left: 1px solid $medgrey;
25    border-right: 1px solid $medgrey;
26    border-bottom: 0;
27    vertical-align: middle;
28    @include fastTransition-all;
29    &:hover {
30      background: $lightblue;
31      color: $black;
32      cursor: pointer;
33    }
34    &.active {
35      background: darken($lightgrey, 3%);
36      &:last-child {
37        border-bottom: 1px solid $medgrey;
38      }
39    }
40    .inv-active {
41      color: darken($active, 20%);
42    }
43    &.inv-disabled {
44      background: $medgrey;
45      .inventory__device-col,
46      .inventory__function-col {
47        color: lighten($darkgrey, 20%);
48      }
49      .accord-trigger {
50        display: none;
51      }
52      &:hover,
53      .accord-trigger:hover {
54        cursor: default;
55      }
56    }
57  }
58
59  // Header row
60  .header__actions-bar {
61    padding: 0 1em 0 1.5em;
62    .inventory__assoc-event {
63      padding-right: 1em;
64      &:hover {
65        cursor: pointer;
66      }
67    }
68  }
69}
70// Inventory items
71.inventory-overview {
72  .inventory__device-col {
73    margin-right: 6px;
74    width: 50%;
75    text-transform: capitalize;
76    @include mediaQuery(medium){
77      width: auto;
78    }
79  }
80
81  .inventory__function-col {
82      @include col-label;
83      color: $severity-medium-lightbg;
84      display: none;
85  }
86  .inventory__device-col,
87  .inventory__function-col {
88    @media (min-width: 1025px){
89      display: inline-block;
90      @include calcColumn-4(5px);
91    }
92  }
93
94  .inventory__metadata {
95    height: 0;
96    max-height: 0;
97    margin: 0 -1em 0 -1.5em;
98    border-top: 1px solid $medgrey;
99    position: relative;
100    overflow: hidden;
101    @include fastTransition-all;
102    &.active {
103      height: 100%;
104      max-height: 1000px;
105      border-bottom: 1px solid $medgrey;
106      background: $lightgrey;
107      padding-bottom: 1em;
108      @include fastTransition-all;
109    }
110    &:hover {
111      cursor: default;
112    }
113  }
114
115  .inventory__metadata-block {
116    min-width: 100%;
117    padding: .5em 1em .5em 1.5em;
118    @include mediaQuery(small) {
119      @include calcColumn-3;
120    }
121    .content-label {
122      color: $darkgrey;
123    }
124  }
125
126  .inventory__metadata-scroll {
127      position: relative;
128      height: 100%;
129      max-height: 200px;
130      overflow-y: scroll;
131      bottom: 0;
132      right:0;
133      width: 100%;
134      padding-top: 1em;
135      padding-left: 1.5em;
136      border-top: 1px solid $medgrey;
137    .inventory__metadata-block {
138      @include calcSplitColumn;
139      margin-bottom: .5em;
140      padding: 0;
141    }
142    @include mediaQuery(medium) {
143      position: absolute;
144      border-left: 1px solid $medgrey;
145      border-top: 0;
146      max-height: 500px;
147      padding: .5em 1em;
148      width: 30%;
149    }
150    .icon__warning {
151      margin-top: -5px;
152      margin-left: .3em;
153    }
154  }
155}
156
157//end inventory details
158
159
160