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 text-transform: capitalize; 107 @include mediaQuery(medium){ 108 width: auto; 109 } 110 } 111 112 .inventory__function-col { 113 @include col-label; 114 color: $severity-medium-lightbg; 115 display: none; 116 } 117 .inventory__device-col, 118 .inventory__function-col { 119 @media (min-width: 1025px){ 120 display: inline-block; 121 @include calcColumn-4(5px); 122 } 123 } 124 125 .inventory__metadata { 126 height: 0; 127 max-height: 0; 128 margin: 0 -1em 0 -1.5em; 129 border-top: 1px solid $medgrey; 130 position: relative; 131 overflow: hidden; 132 @include fastTransition-all; 133 &.active { 134 height: 100%; 135 max-height: 1000px; 136 border-bottom: 1px solid $medgrey; 137 background: $lightgrey; 138 padding-bottom: 1em; 139 @include fastTransition-all; 140 } 141 &:hover { 142 cursor: default; 143 } 144 } 145 146 .inventory__metadata-block { 147 min-width: 100%; 148 padding: .5em 1em .5em 1.5em; 149 @include mediaQuery(small) { 150 @include calcColumn-3; 151 } 152 .content-label { 153 color: $darkgrey; 154 } 155 } 156 157 .inventory__metadata-scroll { 158 position: relative; 159 height: 100%; 160 max-height: 200px; 161 overflow-y: scroll; 162 bottom: 0; 163 right:0; 164 width: 100%; 165 padding-top: 1em; 166 padding-left: 1.5em; 167 border-top: 1px solid $medgrey; 168 .inventory__metadata-block { 169 @include calcSplitColumn; 170 margin-bottom: .5em; 171 padding: 0; 172 } 173 @include mediaQuery(medium) { 174 position: absolute; 175 border-left: 1px solid $medgrey; 176 border-top: 0; 177 max-height: 500px; 178 padding: .5em 1em; 179 width: 30%; 180 } 181 .icon__warning { 182 margin-top: -10px; 183 } 184 } 185 } 186 187 //end inventory details 188 189 190