| @mixin col-label { |
| text-transform: uppercase; |
| font-weight: 700; |
| font-size: .8em; |
| } |
| |
| $title-minWidth: 210px; |
| |
| .inventory__heading { |
| font-weight: 700; |
| padding: 1em 0; |
| } |
| |
| // Inventory Overview |
| .inventory-overview { |
| .inventory__group { |
| position: relative; |
| display: block; |
| margin: 0; |
| font-weight: 700; |
| background: $white; |
| padding: 1em 1em 0 1.5em; |
| text-decoration: none; |
| border-left: 1px solid $medgrey; |
| border-right: 1px solid $medgrey; |
| width: 100%; |
| border-bottom: 0; |
| vertical-align: middle; |
| @include fastTransition-all; |
| &:hover { |
| background: $lightblue; |
| color: $black; |
| cursor: pointer; |
| } |
| &.active { |
| background: darken($lightgrey, 3%); |
| &:last-child { |
| border-bottom: 1px solid $medgrey; |
| } |
| } |
| .inv-active { |
| color: darken($active, 20%); |
| } |
| &.inv-disabled { |
| background: $medgrey; |
| .inventory__device-col, |
| .inventory__function-col { |
| color: lighten($darkgrey, 20%); |
| } |
| .accord-trigger { |
| display: none; |
| } |
| &:hover, |
| .accord-trigger:hover { |
| cursor: default; |
| } |
| } |
| } |
| |
| // Header row |
| .header__actions-bar { |
| padding: 0 1em 0 1.5em; |
| .inventory__assoc-event { |
| padding-right: 1em; |
| &:hover { |
| cursor: pointer; |
| } |
| } |
| } |
| } |
| // Inventory items |
| .inventory-overview { |
| .inventory__device-col { |
| margin-right: 6px; |
| width: 50%; |
| text-transform: capitalize; |
| @include mediaQuery(medium){ |
| width: auto; |
| } |
| } |
| |
| .inventory__function-col { |
| @include col-label; |
| color: $severity-medium-lightbg; |
| display: none; |
| } |
| .inventory__device-col, |
| .inventory__function-col { |
| @media (min-width: 1025px){ |
| display: inline-block; |
| @include calcColumn-4(5px); |
| } |
| } |
| |
| .inventory__metadata { |
| height: 0; |
| max-height: 0; |
| margin: 0 -1em 0 -1.5em; |
| border-top: 1px solid $medgrey; |
| position: relative; |
| overflow: hidden; |
| @include fastTransition-all; |
| &.active { |
| height: 100%; |
| max-height: 1000px; |
| border-bottom: 1px solid $medgrey; |
| background: $lightgrey; |
| padding-bottom: 1em; |
| @include fastTransition-all; |
| } |
| &:hover { |
| cursor: default; |
| } |
| } |
| |
| .inventory__metadata-block { |
| min-width: 100%; |
| padding: .5em 1em .5em 1.5em; |
| @include mediaQuery(small) { |
| @include calcColumn-3; |
| } |
| .content-label { |
| color: $darkgrey; |
| } |
| } |
| |
| .inventory__metadata-scroll { |
| position: relative; |
| height: 100%; |
| max-height: 200px; |
| overflow-y: scroll; |
| bottom: 0; |
| right:0; |
| width: 100%; |
| padding-top: 1em; |
| padding-left: 1.5em; |
| border-top: 1px solid $medgrey; |
| .inventory__metadata-block { |
| @include calcSplitColumn; |
| margin-bottom: .5em; |
| padding: 0; |
| } |
| @include mediaQuery(medium) { |
| position: absolute; |
| border-left: 1px solid $medgrey; |
| border-top: 0; |
| max-height: 500px; |
| padding: .5em 1em; |
| width: 30%; |
| } |
| .icon__warning { |
| margin-top: -5px; |
| margin-left: .3em; |
| } |
| } |
| } |
| |
| //end inventory details |
| |
| |