blob: 42de893c9274379ef6ba638b192b1b9043424864 [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;
26 border-bottom: 0;
Michael Davis994a93b2017-04-18 10:01:04 -050027 vertical-align: middle;
Michael Davis6dc5f182017-06-26 13:07:27 -050028 @include fastTransition-all;
Michael Davis994a93b2017-04-18 10:01:04 -050029 &:hover {
30 background: $lightblue;
31 color: $black;
Michael Davis6dc5f182017-06-26 13:07:27 -050032 cursor: pointer;
Michael Davis994a93b2017-04-18 10:01:04 -050033 }
Michael Davis6dc5f182017-06-26 13:07:27 -050034 &.active {
35 background: darken($lightgrey, 3%);
36 &:last-child {
37 border-bottom: 1px solid $medgrey;
38 }
Michael Davis994a93b2017-04-18 10:01:04 -050039 }
40 .inv-active {
41 color: darken($active, 20%);
42 }
Michael Davis994a93b2017-04-18 10:01:04 -050043 &.inv-disabled {
Michael Davis6dc5f182017-06-26 13:07:27 -050044 background: $medgrey;
45 .inventory__device-col,
46 .inventory__function-col {
Michael Davis994a93b2017-04-18 10:01:04 -050047 color: lighten($darkgrey, 20%);
48 }
Michael Davis6dc5f182017-06-26 13:07:27 -050049 .accord-trigger {
50 display: none;
51 }
52 &:hover,
53 .accord-trigger:hover {
54 cursor: default;
55 }
Michael Davis994a93b2017-04-18 10:01:04 -050056 }
Michael Davis994a93b2017-04-18 10:01:04 -050057 }
58
59 // Header row
60 .header__actions-bar {
Michael Davis6dc5f182017-06-26 13:07:27 -050061 padding: 0 1em 0 1.5em;
62 .inventory__assoc-event {
63 padding-right: 1em;
64 &:hover {
65 cursor: pointer;
66 }
67 }
68 }
Michael Davis994a93b2017-04-18 10:01:04 -050069}
Michael Davis6dc5f182017-06-26 13:07:27 -050070// Inventory items
71.inventory-overview {
Michael Davis994a93b2017-04-18 10:01:04 -050072 .inventory__device-col {
73 margin-right: 6px;
74 width: 50%;
Michael Davis98e3f8a2017-07-27 15:39:45 -050075 text-transform: capitalize;
Michael Davis994a93b2017-04-18 10:01:04 -050076 @include mediaQuery(medium){
77 width: auto;
78 }
79 }
Michael Davis6dc5f182017-06-26 13:07:27 -050080
Michael Davis994a93b2017-04-18 10:01:04 -050081 .inventory__function-col {
Michael Davis6dc5f182017-06-26 13:07:27 -050082 @include col-label;
83 color: $severity-medium-lightbg;
84 display: none;
Michael Davis994a93b2017-04-18 10:01:04 -050085 }
86 .inventory__device-col,
Michael Davis6dc5f182017-06-26 13:07:27 -050087 .inventory__function-col {
Michael Davis994a93b2017-04-18 10:01:04 -050088 @media (min-width: 1025px){
89 display: inline-block;
90 @include calcColumn-4(5px);
91 }
92 }
93
Michael Davis6dc5f182017-06-26 13:07:27 -050094 .inventory__metadata {
95 height: 0;
Michael Davis994a93b2017-04-18 10:01:04 -050096 max-height: 0;
Michael Davis6dc5f182017-06-26 13:07:27 -050097 margin: 0 -1em 0 -1.5em;
98 border-top: 1px solid $medgrey;
99 position: relative;
Michael Davis994a93b2017-04-18 10:01:04 -0500100 overflow: hidden;
Michael Davis6dc5f182017-06-26 13:07:27 -0500101 @include fastTransition-all;
Michael Davis994a93b2017-04-18 10:01:04 -0500102 &.active {
Michael Davis6dc5f182017-06-26 13:07:27 -0500103 height: 100%;
104 max-height: 1000px;
105 border-bottom: 1px solid $medgrey;
106 background: $lightgrey;
107 padding-bottom: 1em;
Michael Davis994a93b2017-04-18 10:01:04 -0500108 @include fastTransition-all;
Michael Davis994a93b2017-04-18 10:01:04 -0500109 }
Michael Daviseed24532017-07-20 15:19:30 -0500110 &:hover {
111 cursor: default;
112 }
Michael Davis994a93b2017-04-18 10:01:04 -0500113 }
Michael Davis6dc5f182017-06-26 13:07:27 -0500114
115 .inventory__metadata-block {
116 min-width: 100%;
117 padding: .5em 1em .5em 1.5em;
118 @include mediaQuery(small) {
119 @include calcColumn-3;
Michael Davis994a93b2017-04-18 10:01:04 -0500120 }
Michael Davisfa278fb2017-07-10 11:28:55 -0500121 .content-label {
Michael Daviseed24532017-07-20 15:19:30 -0500122 color: $darkgrey;
Michael Davisfa278fb2017-07-10 11:28:55 -0500123 }
Michael Davis994a93b2017-04-18 10:01:04 -0500124 }
Michael Davis6dc5f182017-06-26 13:07:27 -0500125
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 }
Michael Davis994a93b2017-04-18 10:01:04 -0500142 @include mediaQuery(medium) {
Michael Davis6dc5f182017-06-26 13:07:27 -0500143 position: absolute;
144 border-left: 1px solid $medgrey;
145 border-top: 0;
146 max-height: 500px;
147 padding: .5em 1em;
Michael Daviseed24532017-07-20 15:19:30 -0500148 width: 30%;
149 }
150 .icon__warning {
Michael Davis2f275a42017-09-08 11:28:08 -0500151 margin-top: -5px;
152 margin-left: .3em;
Michael Davis994a93b2017-04-18 10:01:04 -0500153 }
154 }
155}
156
157//end inventory details
158
159