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-present {
44      color: darken($present, 20%);
45    }
46    &.inv-disabled {
47      background: $medgrey;
48      .inventory__device-col,
49      .inventory__function-col {
50        color: lighten($darkgrey, 20%);
51      }
52      .accord-trigger {
53        display: none;
54      }
55      &:hover,
56      .accord-trigger:hover {
57        cursor: default;
58      }
59    }
60    .accord-trigger {
61      margin-top: -8px;
62    }
63  }
64
65  // Header row
66  .header__actions-bar {
67    padding: 0 1em 0 1.5em;
68    .inventory__assoc-event {
69      padding-right: 1em;
70      &:hover {
71        cursor: pointer;
72      }
73    }
74  }
75
76  //sortable heading
77  .sort-heading {
78    position: relative;
79    color: $lightblue;
80    &::before {
81      content: '\025be';
82      position: absolute;
83      right: 0;
84      top: 8px;
85      transform: rotate(180deg);
86      font-size: 1.3em;
87    }
88    &::after {
89      content: '\025be';
90      position: absolute;
91      right: -1px;
92      bottom: 8px;
93      font-size: 1.3em;
94    }
95    &.sort-up {
96      &::before {
97        color: $darkbg__accent;
98      }
99    }
100    &.sort-down {
101      &::after {
102        color: $darkbg__accent;
103      }
104    }
105  }
106}
107// Inventory items
108.inventory-overview {
109  .inventory__device-col {
110    margin-right: 6px;
111    width: 50%;
112    @include mediaQuery(medium){
113      width: auto;
114    }
115  }
116
117  .inventory__function-col {
118      @include col-label;
119      color: $severity-medium-lightbg;
120      display: none;
121  }
122  .inventory__device-col,
123  .inventory__function-col {
124    @media (min-width: 1025px){
125      display: inline-block;
126      @include calcColumn-4(5px);
127    }
128  }
129
130  .inventory__metadata {
131    height: 0;
132    max-height: 0;
133    margin: 0 -1em 0 -1.5em;
134    border-top: 1px solid $medgrey;
135    position: relative;
136    overflow: hidden;
137    @include fastTransition-all;
138    &.active {
139      height: 100%;
140      max-height: 1000px;
141      border-bottom: 1px solid $medgrey;
142      background: $lightgrey;
143      padding-bottom: 1em;
144      @include fastTransition-all;
145    }
146  }
147
148  .inventory__metadata-block {
149    min-width: 100%;
150    padding: .5em 1em .5em 1.5em;
151    @include mediaQuery(small) {
152      @include calcColumn-3;
153    }
154  }
155
156  .inventory__metadata-scroll {
157      position: relative;
158      height: 100%;
159      max-height: 200px;
160      overflow-y: scroll;
161      bottom: 0;
162      right:0;
163      width: 100%;
164      padding-top: 1em;
165      padding-left: 1.5em;
166      border-top: 1px solid $medgrey;
167    .inventory__metadata-block {
168      @include calcSplitColumn;
169      margin-bottom: .5em;
170      padding: 0;
171    }
172    @include mediaQuery(medium) {
173      position: absolute;
174      border-left: 1px solid $medgrey;
175      border-top: 0;
176      max-height: 500px;
177      padding: .5em 1em;
178      width: 23%;
179    }
180  }
181}
182
183//end inventory details
184
185
186