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 //sortable heading 71 .sort-heading { 72 position: relative; 73 color: $lightblue; 74 &::before { 75 content: '\025be'; 76 position: absolute; 77 right: 0; 78 top: 8px; 79 transform: rotate(180deg); 80 font-size: 1.3em; 81 } 82 &::after { 83 content: '\025be'; 84 position: absolute; 85 right: -1px; 86 bottom: 8px; 87 font-size: 1.3em; 88 } 89 &.sort-up { 90 &::before { 91 color: $darkbg__accent; 92 } 93 } 94 &.sort-down { 95 &::after { 96 color: $darkbg__accent; 97 } 98 } 99 } 100} 101// Inventory items 102.inventory-overview { 103 .inventory__device-col { 104 margin-right: 6px; 105 width: 50%; 106 @include mediaQuery(medium){ 107 width: auto; 108 } 109 } 110 111 .inventory__function-col { 112 @include col-label; 113 color: $severity-medium-lightbg; 114 display: none; 115 } 116 .inventory__device-col, 117 .inventory__function-col { 118 @media (min-width: 1025px){ 119 display: inline-block; 120 @include calcColumn-4(5px); 121 } 122 } 123 124 .inventory__metadata { 125 height: 0; 126 max-height: 0; 127 margin: 0 -1em 0 -1.5em; 128 border-top: 1px solid $medgrey; 129 position: relative; 130 overflow: hidden; 131 @include fastTransition-all; 132 &.active { 133 height: 100%; 134 max-height: 1000px; 135 border-bottom: 1px solid $medgrey; 136 background: $lightgrey; 137 padding-bottom: 1em; 138 @include fastTransition-all; 139 } 140 &:hover { 141 cursor: default; 142 } 143 } 144 145 .inventory__metadata-block { 146 min-width: 100%; 147 padding: .5em 1em .5em 1.5em; 148 @include mediaQuery(small) { 149 @include calcColumn-3; 150 } 151 .content-label { 152 color: $darkgrey; 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: 30%; 179 } 180 .icon__warning { 181 margin-top: -10px; 182 } 183 } 184} 185 186//end inventory details 187 188 189