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 .content-label { 155 color:lighten($darkgrey, 10%); 156 } 157 } 158 159 .inventory__metadata-scroll { 160 position: relative; 161 height: 100%; 162 max-height: 200px; 163 overflow-y: scroll; 164 bottom: 0; 165 right:0; 166 width: 100%; 167 padding-top: 1em; 168 padding-left: 1.5em; 169 border-top: 1px solid $medgrey; 170 .inventory__metadata-block { 171 @include calcSplitColumn; 172 margin-bottom: .5em; 173 padding: 0; 174 } 175 @include mediaQuery(medium) { 176 position: absolute; 177 border-left: 1px solid $medgrey; 178 border-top: 0; 179 max-height: 500px; 180 padding: .5em 1em; 181 width: 23%; 182 } 183 } 184} 185 186//end inventory details 187 188 189