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          content: '';
60         @extend .icon__good;
61        }
62      }
63    }
64    &.power__state-off {
65      background-position: 0;
66      color: $darkgrey;
67      .power__state {
68        span:before {
69          color: $darkgrey;
70        }
71      }
72    }
73    &.power__state-indet {
74      color: $darkgrey;
75      @include indeterminate-bar;
76      .power__state {
77        span:before {
78          color: $status-warn;
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