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: '\25CF';
31      display: inline-block;
32      font-size: 1.8em;
33      color: $darkgrey;
34      margin-right: .1em;
35      vertical-align: middle;
36      transform: translateY(-4px);
37      @include slowTransition-all;
38    }
39  }
40
41  // Power bar indicator
42  .power__indicator-bar {
43    font-weight: bold;
44    padding: 1.4em 3em 0;
45    margin-bottom: 3em;
46    background-size: 200% 100%;
47    background-image: linear-gradient(to right, $lightgrey 50%, $status-ok-light 50%);
48    background-position: 0;
49    transition: background-position 2s ease;
50    overflow: hidden;
51    p {
52      padding: 0;
53      margin: 0;
54    }
55    &.power__state-on {
56      background-position: -100%;
57      .power__state {
58        span:before {
59          color: $status-ok;
60        }
61      }
62    }
63    &.power__state-off {
64      background-position: 0;
65      color: $darkgrey;
66      .power__state {
67        span:before {
68          color: $darkgrey;
69        }
70      }
71    }
72    &.power__state-indet {
73      color: $darkgrey;
74      @include indeterminate-bar;
75      .power__state {
76        span:before {
77          color: $status-warn;
78        }
79      }
80    }
81  }
82
83  // Power button options
84  .power-option {
85    padding: 1.8em 0 1em 0;
86    position: relative;
87    overflow: hidden;
88    min-height: 1px;
89    min-width: 100%;
90    .btn-secondary {
91      margin-bottom: .5em;
92      @include mediaQuery(small) {
93        min-width: 300px;
94      }
95    }
96    @include mediaQuery(small){
97      padding: 1.8em 0 0 1.8em;
98    }
99    p {
100      margin-left: 2em;
101    }
102  }
103
104} //end power-operations