1// Power Operations SCSS
2
3#power-operations {
4
5  .h4 {
6    font-weight: bold;
7  }
8
9  // Power op time stamp
10  .power__status-log {
11    color: $darkgrey;
12    font-weight:500;
13  }
14
15  // Power Curernt status wrapper
16  .power__current-status {
17    border-bottom: 1px solid $medgrey;
18    margin: 1.3em 0 1.2em 0;
19    .h4 {
20      padding: 0;
21      margin: 0 0 .5em 0;
22    }
23  }
24
25  // Power state indicator on/off
26  .power__state {
27    font-weight: 700;
28    margin-top: -.3em;
29    span:before {
30      content: '';
31      position: absolute;
32      margin-left: -25px;
33      @extend .icon__off;
34    }
35  }
36
37  // Power bar indicator
38  .power__indicator-bar {
39    font-weight: bold;
40    padding: 1em 2em .7em;
41    margin-bottom: 3em;
42    background-size: 200% 100%;
43    background-image: linear-gradient(to right, darken($lightgrey,3%) 50%, $status-ok-light 50%);
44    background-position: 0;
45    transition: background-position 2s ease;
46    overflow: hidden;
47    display:flex;
48    justify-content: space-between;
49    align-items:center;
50    p {
51      padding: 0;
52      margin: 0;
53      font-size: 1.2em;
54    }
55    &.power__state-on {
56      background-position: -100%;
57      .power__state {
58        span:before {
59          content: '';
60         @extend .icon__good;
61        }
62      }
63    }
64    &.power__state-off {
65      background-position: 0;
66      color: $black;
67      .power__state {
68        span:before {
69          content: '';
70          @extend .icon__off;
71        }
72      }
73    }
74    &.power__state-indet {
75      color: $darkgrey;
76      @include indeterminate-bar;
77      .power__state {
78        span:before {
79          color: $status-warn;
80        }
81      }
82    }
83  }
84
85  // Power button options
86  .power-option {
87    padding: 1.8em 0 1em 0;
88    position: relative;
89    overflow: hidden;
90    min-height: 1px;
91    min-width: 100%;
92    .btn-secondary {
93      margin-bottom: .5em;
94      margin-right: 1em;
95      font-size: .9em;
96      display: block;
97      min-width: 240px;
98      @include mediaQuery(medium) {
99        display: inline-block;
100      }
101    }
102    @include mediaQuery(x-small){
103      padding: 1.8em 0 1em 0;
104    }
105  }
106
107} //end power-operations