blob: cf6f2b4e3dc472d738ca537c3c6e8ecebaa1ceb2 [file] [log] [blame]
Michael Davis994a93b2017-04-18 10:01:04 -05001@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;
Michael Davis6dc5f182017-06-26 13:07:27 -050011 padding: 1em 0;
Michael Davis994a93b2017-04-18 10:01:04 -050012}
13
Michael Davis994a93b2017-04-18 10:01:04 -050014// Inventory Overview
Michael Davis6dc5f182017-06-26 13:07:27 -050015.inventory-overview {
Michael Davis994a93b2017-04-18 10:01:04 -050016 .inventory__group {
17 position: relative;
18 display: block;
Michael Davis6dc5f182017-06-26 13:07:27 -050019 margin: 0;
Michael Davis994a93b2017-04-18 10:01:04 -050020 font-weight: 700;
21 background: $white;
Michael Davis6dc5f182017-06-26 13:07:27 -050022 padding: 1em 1em 0 1.5em;
Michael Davis994a93b2017-04-18 10:01:04 -050023 text-decoration: none;
Michael Davis6dc5f182017-06-26 13:07:27 -050024 border-left: 1px solid $medgrey;
25 border-right: 1px solid $medgrey;
Gunnar Mills84e114a2018-11-14 13:44:41 -060026 width: 100%;
Michael Davis6dc5f182017-06-26 13:07:27 -050027 border-bottom: 0;
Michael Davis994a93b2017-04-18 10:01:04 -050028 vertical-align: middle;
Michael Davis6dc5f182017-06-26 13:07:27 -050029 @include fastTransition-all;
Michael Davis994a93b2017-04-18 10:01:04 -050030 &:hover {
31 background: $lightblue;
32 color: $black;
Michael Davis6dc5f182017-06-26 13:07:27 -050033 cursor: pointer;
Michael Davis994a93b2017-04-18 10:01:04 -050034 }
Michael Davis6dc5f182017-06-26 13:07:27 -050035 &.active {
36 background: darken($lightgrey, 3%);
37 &:last-child {
38 border-bottom: 1px solid $medgrey;
39 }
Michael Davis994a93b2017-04-18 10:01:04 -050040 }
41 .inv-active {
42 color: darken($active, 20%);
43 }
Michael Davis994a93b2017-04-18 10:01:04 -050044 &.inv-disabled {
Michael Davis6dc5f182017-06-26 13:07:27 -050045 background: $medgrey;
46 .inventory__device-col,
47 .inventory__function-col {
Michael Davis994a93b2017-04-18 10:01:04 -050048 color: lighten($darkgrey, 20%);
49 }
Michael Davis6dc5f182017-06-26 13:07:27 -050050 .accord-trigger {
51 display: none;
52 }
53 &:hover,
54 .accord-trigger:hover {
55 cursor: default;
56 }
Michael Davis994a93b2017-04-18 10:01:04 -050057 }
Michael Davis994a93b2017-04-18 10:01:04 -050058 }
59
60 // Header row
61 .header__actions-bar {
Michael Davis6dc5f182017-06-26 13:07:27 -050062 padding: 0 1em 0 1.5em;
63 .inventory__assoc-event {
64 padding-right: 1em;
65 &:hover {
66 cursor: pointer;
67 }
68 }
69 }
Michael Davis994a93b2017-04-18 10:01:04 -050070}
Michael Davis6dc5f182017-06-26 13:07:27 -050071// Inventory items
72.inventory-overview {
Michael Davis994a93b2017-04-18 10:01:04 -050073 .inventory__device-col {
74 margin-right: 6px;
75 width: 50%;
Michael Davis98e3f8a2017-07-27 15:39:45 -050076 text-transform: capitalize;
Michael Davis994a93b2017-04-18 10:01:04 -050077 @include mediaQuery(medium){
78 width: auto;
79 }
80 }
Michael Davis6dc5f182017-06-26 13:07:27 -050081
Michael Davis994a93b2017-04-18 10:01:04 -050082 .inventory__function-col {
Michael Davis6dc5f182017-06-26 13:07:27 -050083 @include col-label;
84 color: $severity-medium-lightbg;
85 display: none;
Michael Davis994a93b2017-04-18 10:01:04 -050086 }
87 .inventory__device-col,
Michael Davis6dc5f182017-06-26 13:07:27 -050088 .inventory__function-col {
Michael Davis994a93b2017-04-18 10:01:04 -050089 @media (min-width: 1025px){
90 display: inline-block;
91 @include calcColumn-4(5px);
92 }
93 }
94
Michael Davis6dc5f182017-06-26 13:07:27 -050095 .inventory__metadata {
96 height: 0;
Michael Davis994a93b2017-04-18 10:01:04 -050097 max-height: 0;
Michael Davis6dc5f182017-06-26 13:07:27 -050098 margin: 0 -1em 0 -1.5em;
99 border-top: 1px solid $medgrey;
100 position: relative;
Michael Davis994a93b2017-04-18 10:01:04 -0500101 overflow: hidden;
Michael Davis6dc5f182017-06-26 13:07:27 -0500102 @include fastTransition-all;
Michael Davis994a93b2017-04-18 10:01:04 -0500103 &.active {
Michael Davis6dc5f182017-06-26 13:07:27 -0500104 height: 100%;
105 max-height: 1000px;
106 border-bottom: 1px solid $medgrey;
107 background: $lightgrey;
108 padding-bottom: 1em;
Michael Davis994a93b2017-04-18 10:01:04 -0500109 @include fastTransition-all;
Michael Davis994a93b2017-04-18 10:01:04 -0500110 }
Michael Daviseed24532017-07-20 15:19:30 -0500111 &:hover {
112 cursor: default;
113 }
Michael Davis994a93b2017-04-18 10:01:04 -0500114 }
Michael Davis6dc5f182017-06-26 13:07:27 -0500115
116 .inventory__metadata-block {
117 min-width: 100%;
118 padding: .5em 1em .5em 1.5em;
119 @include mediaQuery(small) {
120 @include calcColumn-3;
Michael Davis994a93b2017-04-18 10:01:04 -0500121 }
Michael Davisfa278fb2017-07-10 11:28:55 -0500122 .content-label {
Michael Daviseed24532017-07-20 15:19:30 -0500123 color: $darkgrey;
Michael Davisfa278fb2017-07-10 11:28:55 -0500124 }
Michael Davis994a93b2017-04-18 10:01:04 -0500125 }
Michael Davis6dc5f182017-06-26 13:07:27 -0500126
127 .inventory__metadata-scroll {
128 position: relative;
129 height: 100%;
130 max-height: 200px;
131 overflow-y: scroll;
132 bottom: 0;
133 right:0;
134 width: 100%;
135 padding-top: 1em;
136 padding-left: 1.5em;
137 border-top: 1px solid $medgrey;
138 .inventory__metadata-block {
139 @include calcSplitColumn;
140 margin-bottom: .5em;
141 padding: 0;
142 }
Michael Davis994a93b2017-04-18 10:01:04 -0500143 @include mediaQuery(medium) {
Michael Davis6dc5f182017-06-26 13:07:27 -0500144 position: absolute;
145 border-left: 1px solid $medgrey;
146 border-top: 0;
147 max-height: 500px;
148 padding: .5em 1em;
Michael Daviseed24532017-07-20 15:19:30 -0500149 width: 30%;
150 }
151 .icon__warning {
Michael Davis2f275a42017-09-08 11:28:08 -0500152 margin-top: -5px;
153 margin-left: .3em;
Michael Davis994a93b2017-04-18 10:01:04 -0500154 }
155 }
156}
157
158//end inventory details
159
160