1// Power Operations SCSS
2
3.power-operations {
4  // Power Current status wrapper
5  .power__current-status {
6    border-bottom: 1px solid $border-color-01;
7    margin: 1.3em 0 1.2em 0;
8  }
9
10  // Power state indicator on/off
11  .power__state {
12    font-weight: 700;
13    margin-top: -0.3em;
14    span:before {
15      content: "";
16      position: absolute;
17      @extend .icon__off;
18      margin-left: -25px;
19    }
20  }
21
22  // Power bar indicator
23  .power__indicator-bar {
24    font-weight: bold;
25    width: 100%;
26    padding: 1em 2em 0.7em;
27    margin-bottom: 3em;
28    background-size: 200% 100%;
29    background-image: linear-gradient(to right, darken($background-02, 3%) 50%, $accent-02--02 50%);
30    background-position: 0;
31    transition: background-position 2s ease;
32    overflow: hidden;
33    display: flex;
34    justify-content: space-between;
35    align-items: center;
36    p {
37      padding: 0;
38      margin: 0;
39      font-size: 1.2em;
40    }
41    &.power__state-on {
42      background-position: -100%;
43      .power__state {
44        span:before {
45          content: "";
46          @extend .icon__good;
47        }
48      }
49    }
50    &.power__state-off {
51      background-position: 0;
52      color: $primary-dark;
53      .power__state {
54        span:before {
55          content: "";
56          @extend .icon__off;
57        }
58      }
59    }
60    &.power__state-indet {
61      color: $text-02;
62      @include indeterminate-bar;
63      .power__state {
64        span:before {
65          color: $status-warn;
66          content: "";
67          @extend .icon__warning;
68        }
69      }
70    }
71    &.power__state-error {
72      background-position: 0;
73      color: $primary-dark;
74      .power__state {
75        span:before {
76          content: "";
77          @extend .icon__critical;
78        }
79      }
80    }
81  }
82
83  .boot-options,
84  .boot-operations {
85    margin-bottom: 1em;
86  }
87
88  .boot-options {
89    .control-check {
90      padding-top: 4px;
91    }
92    .boot-checkbox {
93      padding-left: 2em;
94      text-transform: none;
95      font-weight: 400;
96      font-size: 16px;
97      color: $primary-dark;
98    }
99  }
100
101  .boot-options-wrapper {
102    padding: 0 2em 2em 0;
103  }
104
105  .operations-wrapper {
106    .reboot__operations,
107    .shutdown__operations {
108      margin-bottom: 1.5em;
109      .control-radio {
110        padding: 0.3em 1em 0 2em;
111        text-transform: none;
112        font-weight: 400;
113        font-size: 16px;
114        color: $primary-dark;
115      }
116    }
117
118    .alert-warning {
119      border: 1px solid $accent-03--01;
120      padding: 1em;
121      margin-bottom: 1em;
122      display: flex;
123      align-items: center;
124      .pending-icon {
125        padding: 0 1em 0 0;
126      }
127      .alert-pending {
128        margin-top: 0.3em;
129        margin-bottom: 0;
130      }
131    }
132  }
133
134  .boot-settings-form {
135    background-color: $base-02--06;
136    padding: 2em;
137    .boot-form-actions {
138      margin-bottom: 4em;
139    }
140    .btn {
141      display: block;
142      float: right;
143      margin: 0.5em 0 0 1em;
144    }
145  }
146
147  .control-radio .control__indicator-on {
148    width: 20px;
149    height: 20px;
150    top: 3px;
151    left: 3px;
152  }
153
154  .control-radio .control__indicator-on:after {
155    top: 3px;
156    left: 3px;
157    width: 10px;
158    height: 10px;
159  }
160
161  .icon__warning {
162    width: 24px;
163  }
164} //end power-operations
165