// Power Operations SCSS #power-operations { .h4 { font-weight: bold; } // Power Curernt status wrapper .power__current-status { border-bottom: 1px solid $medgrey; margin: 1.3em 0 1.2em 0; .h4 { padding: 0; margin: 0 0 .5em 0; } } // Power state indicator on/off .power__state { font-weight: 700; margin-top: -.3em; span:before { content: ''; position: absolute; @extend .icon__off; margin-left: -25px; } } // Power bar indicator .power__indicator-bar { font-weight: bold; padding: 1em 2em .7em; margin-bottom: 3em; background-size: 200% 100%; background-image: linear-gradient(to right, darken($lightgrey,3%) 50%, $status-ok-light 50%); background-position: 0; transition: background-position 2s ease; overflow: hidden; display:flex; justify-content: space-between; align-items:center; p { padding: 0; margin: 0; font-size: 1.2em; } &.power__state-on { background-position: -100%; .power__state { span:before { content: ''; @extend .icon__good; } } } &.power__state-off { background-position: 0; color: $black; .power__state { span:before { content: ''; @extend .icon__off; } } } &.power__state-indet { color: $darkgrey; @include indeterminate-bar; .power__state { span:before { color: $status-warn; content: ''; @extend .icon__warning; } } } } // Power button options .power-option { padding: 1.8em 0 1em 0; position: relative; overflow: hidden; min-height: 1px; min-width: 100%; .btn-secondary { margin-bottom: .5em; margin-right: 1em; font-size: .9em; display: block; min-width: 240px; @include mediaQuery(medium) { display: inline-block; } } @include mediaQuery(x-small){ padding: 1.8em 0 1em 0; } } } //end power-operations