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 $lightbg__grey;
18    margin: 2.625em 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: 3.750em;
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    border-top: 1px solid $lightgrey;
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      @include mediaQuery(small) {
94        min-width: 300px;
95      }
96    }
97    @include mediaQuery(small){
98      padding: 1.8em 0 1em 1.8em;
99    }
100  }
101
102} //end power-operations