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