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  }
15
16  // Power bar indicator
17  .power__indicator-bar {
18    font-weight: bold;
19    width: 100%;
20    padding: 1em 2em 0.7em;
21    margin-bottom: 3em;
22    background-size: 200% 100%;
23    background-image: linear-gradient(to right, darken($background-02, 3%) 50%, $accent-02--02 50%);
24    background-position: 0;
25    transition: background-position 2s ease;
26    overflow: hidden;
27    display: flex;
28    justify-content: space-between;
29    align-items: center;
30    p {
31      padding: 0;
32      margin: 0;
33      font-size: 1.2em;
34    }
35    &.power__state-on {
36      background-position: -100%;
37    }
38    &.power__state-off {
39      background-position: 0;
40      color: $primary-dark;
41    }
42    &.power__state-indet {
43      color: $text-02;
44      @include indeterminate-bar;
45    }
46    &.power__state-error {
47      background-position: 0;
48      color: $primary-dark;
49    }
50  }
51
52  .boot-options,
53  .boot-operations {
54    margin-bottom: 1em;
55  }
56
57  .boot-options {
58    .control-check {
59      padding-top: 4px;
60    }
61    .boot-checkbox {
62      padding-left: 2em;
63      text-transform: none;
64      font-weight: 400;
65      font-size: 16px;
66      color: $primary-dark;
67    }
68  }
69
70  .boot-options-wrapper {
71    padding: 0 2em 2em 0;
72  }
73
74  .operations-wrapper {
75    .reboot__operations,
76    .shutdown__operations {
77      margin-bottom: 1.5em;
78      .control-radio {
79        padding: 0.3em 1em 0 2em;
80        text-transform: none;
81        font-weight: 400;
82        font-size: 16px;
83        color: $primary-dark;
84      }
85    }
86
87    .alert-warning {
88      border: 1px solid $accent-03--01;
89      padding: 1em;
90      margin-bottom: 1em;
91      display: flex;
92      align-items: center;
93      .pending-icon {
94        padding: 0 1em 0 0;
95      }
96      .alert-pending {
97        margin-top: 0.3em;
98        margin-bottom: 0;
99      }
100    }
101  }
102
103  .boot-settings-form {
104    background-color: $base-02--06;
105    padding: 2em;
106    .boot-form-actions {
107      margin-bottom: 4em;
108    }
109    .btn {
110      display: block;
111      float: right;
112      margin: 0.5em 0 0 1em;
113    }
114  }
115
116  .control-radio .control__indicator-on {
117    width: 20px;
118    height: 20px;
119    top: 3px;
120    left: 3px;
121  }
122
123  .control-radio .control__indicator-on:after {
124    top: 3px;
125    left: 3px;
126    width: 10px;
127    height: 10px;
128  }
129} //end power-operations
130