bfg-common 1.3.96 → 1.3.98

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/assets/scss/common/icons/icons-2.scss +222 -222
  2. package/components/atoms/switch/Switch.vue +107 -107
  3. package/components/atoms/table/dataGrid/DataGrid.vue +1576 -1576
  4. package/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/Table.vue +137 -137
  5. package/components/common/monitor/lib/models/interfaces.ts +23 -23
  6. package/components/common/monitor/overview/Overview.vue +228 -470
  7. package/components/common/pages/Tasks.vue +120 -120
  8. package/components/common/recursionTree/RecursionTree.vue +203 -203
  9. package/components/common/vm/actions/clone/Clone.vue +518 -518
  10. package/components/common/vm/actions/common/customizeHardware/virtualHardware/cpu/CpuModel.vue +220 -220
  11. package/components/common/vm/actions/common/select/storage/lib/config/config.ts +166 -166
  12. package/composables/useAppVersion.ts +21 -21
  13. package/composables/useEnvLanguage.ts +20 -20
  14. package/composables/useLocal.ts +38 -38
  15. package/lib/utils/sendTask.ts +72 -72
  16. package/minify.js +146 -146
  17. package/package.json +2 -2
  18. package/public/spice-console/application/codec.js +257 -257
  19. package/public/spice-console/lib/rasterEngine.js +907 -907
  20. package/public/spice-console/network/spicechannel.js +369 -369
  21. package/store/main/lib/interfaces.ts +9 -9
  22. package/store/tasks/actions.ts +133 -133
  23. package/store/tasks/getters.ts +25 -25
  24. package/store/tasks/lib/models/interfaces.ts +18 -18
  25. package/store/tasks/mutations.ts +58 -58
  26. package/store/tasks/state.ts +16 -16
package/assets/scss/common/icons/icons-2.scss CHANGED
@@ -1,222 +1,222 @@
1
- /* _____BACKGROUND POSITION_____ */
2
- .host-ui-icon-shutdown {
3
- background-position: 0 62.0253164557%;
4
- }
5
- .host-ui-icon-standby {
6
- background-position: 0 73.417721519%;
7
- }
8
- .host-ui-icon-poweron {
9
- background-position: 0 70.8860759494%;
10
- }
11
- .vsphere-icon-folder-add {
12
- background-position: 0 46.835443038%;
13
- }
14
- .vsphere-icon-folder {
15
- background-position: 0 45.5696202532%;
16
- }
17
- .icon-disk {
18
- background-position: 0 6.3291139241%;
19
- }
20
- .icon-drag-handle {
21
- background-position: 0 10.1265822785%;
22
- }
23
- .icon-memory-summary {
24
- background-position: 0 100%;
25
- }
26
- .icon-datastore-24x,
27
- .icon-storage-summary,
28
- .vsphere-icon-datastore {
29
- background-position: 0 0;
30
- }
31
- .vsphere-icon-datastore-warning {
32
- background-position: 0 1.2658227848%;
33
- }
34
- .vsphere-icon-host {
35
- background-position: 0 54.4303797469%;
36
- }
37
- .vsphere-icon-host-disconnected,
38
- .vsphere-icon-host-not-responding,
39
- .vsphere-icon-host-error {
40
- background-position: 0 58.2278%;
41
- }
42
- .vsphere-icon-host-warning {
43
- background-position: 0 63.2911%;
44
- }
45
- .vsphere-icon-host-maintenance {
46
- background-position: 0 60.7594936709%;
47
- }
48
- .icon-events {
49
- background-position: 0 31.6455696203%;
50
- }
51
- .icon-developer-center {
52
- background-position: 0 3.7974683544%;
53
- }
54
- .icon-info-standart {
55
- background-position: 0 79.75%;
56
- }
57
- .vsphere-icon-status-warning {
58
- background-position: 0 36.7088607595%;
59
- }
60
- .vsphere-icon-status-error {
61
- background-position: 0 35.443%;
62
- }
63
- .icon-home {
64
- background-position: 0 53.164556962%;
65
- }
66
- .vx-icon-export {
67
- background-position: 0 40.5063291139%;
68
- }
69
- .vx-icon-import {
70
- background-position: 0 8.88%;
71
- }
72
- .vsphere-icon-dv-switch {
73
- background-position: 0 15.1898734177%;
74
- }
75
- .icon-vSphere-dsFile {
76
- background-position: 0 43.0379746835%;
77
- }
78
- .icon-vSphere-dsIsoImage {
79
- background-position: 0 12.6582278481%;
80
- }
81
- .icon-vSphere-dsVmLog {
82
- background-position: 0 31.6455696203%;
83
- }
84
- .icon-vSphere-dsVmNvram {
85
- background-position: 0 13.9240506329%;
86
- }
87
- .vx-icon-license {
88
- background-position: 0 88.6075949367%;
89
- }
90
- .vx-icon-licenseAssigned {
91
- background-position: 0 92.4050632911%;
92
- }
93
- .vsphere-icon-snapshot-here {
94
- background-position: 0 98.7341772152%;
95
- }
96
-
97
- /* _____BACKGROUND IMAGE_____ */
98
- .icon-vSphere-dsVmNvram,
99
- .icon-vSphere-dsVmLog,
100
- .icon-vSphere-dsIsoImage,
101
- .icon-vSphere-dsFile,
102
- .vsphere-icon-dv-switch,
103
- .vx-icon-export,
104
- .vx-icon-import,
105
- .host-ui-icon-shutdown,
106
- .host-ui-icon-standby,
107
- .host-ui-icon-poweron,
108
- .vsphere-icon-folder-add,
109
- .vsphere-icon-folder,
110
- .icon-disk,
111
- .icon-drag-handle,
112
- .icon-memory-summary,
113
- .icon-storage-summary,
114
- .vsphere-icon-host,
115
- .vsphere-icon-host-disconnected,
116
- .vsphere-icon-host-not-responding,
117
- .vsphere-icon-host-error,
118
- .vsphere-icon-host-warning,
119
- .vsphere-icon-host-maintenance,
120
- .vsphere-icon-datastore,
121
- .vsphere-icon-datastore-warning,
122
- .icon-datastore-24x,
123
- .icon-events,
124
- .icon-developer-center,
125
- .icon-info-standart,
126
- .vsphere-icon-status-warning,
127
- .vsphere-icon-status-error,
128
- .vx-icon-license,
129
- .vx-icon-licenseAssigned,
130
- .icon-home,
131
- .vsphere-icon-snapshot-here {
132
- background-image: url('@/assets/img/icons/icons-sprite-light-2.svg');
133
-
134
- html.dark-theme & {
135
- background-image: url('@/assets/img/icons/icons-sprite-dark-2.svg');
136
- }
137
- }
138
- .active .icon-vSphere-dsVmNvram,
139
- .active .icon-vSphere-dsVmLog,
140
- .active .icon-vSphere-dsIsoImage,
141
- .active .icon-vSphere-dsFile,
142
- .active .vsphere-icon-dv-switch,
143
- .active .vx-icon-export,
144
- .active .vx-icon-import,
145
- .active .host-ui-icon-shutdown,
146
- .active .host-ui-icon-standby,
147
- .active .host-ui-icon-poweron,
148
- .active .vsphere-icon-folder-add,
149
- .active .vsphere-icon-folder,
150
- .active .icon-disk,
151
- .active .icon-drag-handle,
152
- .active .icon-memory-summary,
153
- .active .icon-storage-summary,
154
- .active .vsphere-icon-host,
155
- .active .vsphere-icon-host-disconnected,
156
- .active .vsphere-icon-host-not-responding,
157
- .active .vsphere-icon-host-error,
158
- .active .vsphere-icon-host-warning,
159
- .active .vsphere-icon-host-maintenance,
160
- .active .vsphere-icon-datastore,
161
- .active .vsphere-icon-datastore-warning,
162
- .active .icon-events,
163
- .active .icon-developer-center,
164
- .active .vsphere-icon-status-warning,
165
- .active .vsphere-icon-status-error,
166
- .active .vx-icon-license,
167
- .active .vx-icon-licenseAssigned,
168
- .active .icon-home,
169
- .active .vsphere-icon-snapshot-here {
170
- background-image: url('@/assets/img/icons/icons-sprite-dark-2.svg');
171
-
172
- html.dark-theme & {
173
- background-image: url('@/assets/img/icons/icons-sprite-light-2.svg');
174
- }
175
- }
176
-
177
- /* _____ICONS COMMON STYLES_____ */
178
- .icon-memory-summary,
179
- .icon-storage-summary,
180
- .icon-datastore-24x,
181
- .icon-info-standart {
182
- width: 26px;
183
- min-width: 26px;
184
- height: 26px;
185
- min-height: 26px;
186
- background-size: 100% auto;
187
- }
188
-
189
- .icon-vSphere-dsVmNvram,
190
- .icon-vSphere-dsVmLog,
191
- .icon-vSphere-dsIsoImage,
192
- .icon-vSphere-dsFile,
193
- .vsphere-icon-dv-switch,
194
- .host-ui-icon-shutdown,
195
- .host-ui-icon-standby,
196
- .host-ui-icon-poweron,
197
- .vsphere-icon-folder-add,
198
- .icon-disk,
199
- .icon-drag-handle,
200
- .vsphere-icon-datastore,
201
- .vsphere-icon-datastore-warning,
202
- .vsphere-icon-host,
203
- .vsphere-icon-host-disconnected,
204
- .vsphere-icon-host-not-responding,
205
- .vsphere-icon-host-error,
206
- .vsphere-icon-host-warning,
207
- .vsphere-icon-host-maintenance,
208
- .vsphere-icon-folder,
209
- .icon-events,
210
- .icon-developer-center,
211
- .vsphere-icon-status-warning,
212
- .vsphere-icon-status-error,
213
- .vx-icon-license,
214
- .vx-icon-licenseAssigned,
215
- .icon-home,
216
- .vsphere-icon-snapshot-here {
217
- width: 18px;
218
- min-width: 18px;
219
- height: 18px;
220
- min-height: 18px;
221
- background-size: 100% auto;
222
- }
1
+ /* _____BACKGROUND POSITION_____ */
2
+ .host-ui-icon-shutdown {
3
+ background-position: 0 62.0253164557%;
4
+ }
5
+ .host-ui-icon-standby {
6
+ background-position: 0 73.417721519%;
7
+ }
8
+ .host-ui-icon-poweron {
9
+ background-position: 0 70.8860759494%;
10
+ }
11
+ .vsphere-icon-folder-add {
12
+ background-position: 0 46.835443038%;
13
+ }
14
+ .vsphere-icon-folder {
15
+ background-position: 0 45.5696202532%;
16
+ }
17
+ .icon-disk {
18
+ background-position: 0 6.3291139241%;
19
+ }
20
+ .icon-drag-handle {
21
+ background-position: 0 10.1265822785%;
22
+ }
23
+ .icon-memory-summary {
24
+ background-position: 0 100%;
25
+ }
26
+ .icon-datastore-24x,
27
+ .icon-storage-summary,
28
+ .vsphere-icon-datastore {
29
+ background-position: 0 0;
30
+ }
31
+ .vsphere-icon-datastore-warning {
32
+ background-position: 0 1.2658227848%;
33
+ }
34
+ .vsphere-icon-host {
35
+ background-position: 0 54.4303797469%;
36
+ }
37
+ .vsphere-icon-host-disconnected,
38
+ .vsphere-icon-host-not-responding,
39
+ .vsphere-icon-host-error {
40
+ background-position: 0 58.2278%;
41
+ }
42
+ .vsphere-icon-host-warning {
43
+ background-position: 0 63.2911%;
44
+ }
45
+ .vsphere-icon-host-maintenance {
46
+ background-position: 0 60.7594936709%;
47
+ }
48
+ .icon-events {
49
+ background-position: 0 31.6455696203%;
50
+ }
51
+ .icon-developer-center {
52
+ background-position: 0 3.7974683544%;
53
+ }
54
+ .icon-info-standart {
55
+ background-position: 0 79.75%;
56
+ }
57
+ .vsphere-icon-status-warning {
58
+ background-position: 0 36.7088607595%;
59
+ }
60
+ .vsphere-icon-status-error {
61
+ background-position: 0 35.443%;
62
+ }
63
+ .icon-home {
64
+ background-position: 0 53.164556962%;
65
+ }
66
+ .vx-icon-export {
67
+ background-position: 0 40.5063291139%;
68
+ }
69
+ .vx-icon-import {
70
+ background-position: 0 8.88%;
71
+ }
72
+ .vsphere-icon-dv-switch {
73
+ background-position: 0 15.1898734177%;
74
+ }
75
+ .icon-vSphere-dsFile {
76
+ background-position: 0 43.0379746835%;
77
+ }
78
+ .icon-vSphere-dsIsoImage {
79
+ background-position: 0 12.6582278481%;
80
+ }
81
+ .icon-vSphere-dsVmLog {
82
+ background-position: 0 31.6455696203%;
83
+ }
84
+ .icon-vSphere-dsVmNvram {
85
+ background-position: 0 13.9240506329%;
86
+ }
87
+ .vx-icon-license {
88
+ background-position: 0 88.6075949367%;
89
+ }
90
+ .vx-icon-licenseAssigned {
91
+ background-position: 0 92.4050632911%;
92
+ }
93
+ .vsphere-icon-snapshot-here {
94
+ background-position: 0 98.7341772152%;
95
+ }
96
+
97
+ /* _____BACKGROUND IMAGE_____ */
98
+ .icon-vSphere-dsVmNvram,
99
+ .icon-vSphere-dsVmLog,
100
+ .icon-vSphere-dsIsoImage,
101
+ .icon-vSphere-dsFile,
102
+ .vsphere-icon-dv-switch,
103
+ .vx-icon-export,
104
+ .vx-icon-import,
105
+ .host-ui-icon-shutdown,
106
+ .host-ui-icon-standby,
107
+ .host-ui-icon-poweron,
108
+ .vsphere-icon-folder-add,
109
+ .vsphere-icon-folder,
110
+ .icon-disk,
111
+ .icon-drag-handle,
112
+ .icon-memory-summary,
113
+ .icon-storage-summary,
114
+ .vsphere-icon-host,
115
+ .vsphere-icon-host-disconnected,
116
+ .vsphere-icon-host-not-responding,
117
+ .vsphere-icon-host-error,
118
+ .vsphere-icon-host-warning,
119
+ .vsphere-icon-host-maintenance,
120
+ .vsphere-icon-datastore,
121
+ .vsphere-icon-datastore-warning,
122
+ .icon-datastore-24x,
123
+ .icon-events,
124
+ .icon-developer-center,
125
+ .icon-info-standart,
126
+ .vsphere-icon-status-warning,
127
+ .vsphere-icon-status-error,
128
+ .vx-icon-license,
129
+ .vx-icon-licenseAssigned,
130
+ .icon-home,
131
+ .vsphere-icon-snapshot-here {
132
+ background-image: url('@/assets/img/icons/icons-sprite-light-2.svg');
133
+
134
+ html.dark-theme & {
135
+ background-image: url('@/assets/img/icons/icons-sprite-dark-2.svg');
136
+ }
137
+ }
138
+ .active .icon-vSphere-dsVmNvram,
139
+ .active .icon-vSphere-dsVmLog,
140
+ .active .icon-vSphere-dsIsoImage,
141
+ .active .icon-vSphere-dsFile,
142
+ .active .vsphere-icon-dv-switch,
143
+ .active .vx-icon-export,
144
+ .active .vx-icon-import,
145
+ .active .host-ui-icon-shutdown,
146
+ .active .host-ui-icon-standby,
147
+ .active .host-ui-icon-poweron,
148
+ .active .vsphere-icon-folder-add,
149
+ .active .vsphere-icon-folder,
150
+ .active .icon-disk,
151
+ .active .icon-drag-handle,
152
+ .active .icon-memory-summary,
153
+ .active .icon-storage-summary,
154
+ .active .vsphere-icon-host,
155
+ .active .vsphere-icon-host-disconnected,
156
+ .active .vsphere-icon-host-not-responding,
157
+ .active .vsphere-icon-host-error,
158
+ .active .vsphere-icon-host-warning,
159
+ .active .vsphere-icon-host-maintenance,
160
+ .active .vsphere-icon-datastore,
161
+ .active .vsphere-icon-datastore-warning,
162
+ .active .icon-events,
163
+ .active .icon-developer-center,
164
+ .active .vsphere-icon-status-warning,
165
+ .active .vsphere-icon-status-error,
166
+ .active .vx-icon-license,
167
+ .active .vx-icon-licenseAssigned,
168
+ .active .icon-home,
169
+ .active .vsphere-icon-snapshot-here {
170
+ background-image: url('@/assets/img/icons/icons-sprite-dark-2.svg');
171
+
172
+ html.dark-theme & {
173
+ background-image: url('@/assets/img/icons/icons-sprite-light-2.svg');
174
+ }
175
+ }
176
+
177
+ /* _____ICONS COMMON STYLES_____ */
178
+ .icon-memory-summary,
179
+ .icon-storage-summary,
180
+ .icon-datastore-24x,
181
+ .icon-info-standart {
182
+ width: 26px;
183
+ min-width: 26px;
184
+ height: 26px;
185
+ min-height: 26px;
186
+ background-size: 100% auto;
187
+ }
188
+
189
+ .icon-vSphere-dsVmNvram,
190
+ .icon-vSphere-dsVmLog,
191
+ .icon-vSphere-dsIsoImage,
192
+ .icon-vSphere-dsFile,
193
+ .vsphere-icon-dv-switch,
194
+ .host-ui-icon-shutdown,
195
+ .host-ui-icon-standby,
196
+ .host-ui-icon-poweron,
197
+ .vsphere-icon-folder-add,
198
+ .icon-disk,
199
+ .icon-drag-handle,
200
+ .vsphere-icon-datastore,
201
+ .vsphere-icon-datastore-warning,
202
+ .vsphere-icon-host,
203
+ .vsphere-icon-host-disconnected,
204
+ .vsphere-icon-host-not-responding,
205
+ .vsphere-icon-host-error,
206
+ .vsphere-icon-host-warning,
207
+ .vsphere-icon-host-maintenance,
208
+ .vsphere-icon-folder,
209
+ .icon-events,
210
+ .icon-developer-center,
211
+ .vsphere-icon-status-warning,
212
+ .vsphere-icon-status-error,
213
+ .vx-icon-license,
214
+ .vx-icon-licenseAssigned,
215
+ .icon-home,
216
+ .vsphere-icon-snapshot-here {
217
+ width: 18px;
218
+ min-width: 18px;
219
+ height: 18px;
220
+ min-height: 18px;
221
+ background-size: 100% auto;
222
+ }
package/components/atoms/switch/Switch.vue CHANGED
@@ -1,107 +1,107 @@
1
- <template>
2
- <div class="switch-body">
3
- <input :id="props.testId" v-model="value" type="checkbox" />
4
- <label class="switch-label" :for="props.testId"> </label>
5
- </div>
6
- </template>
7
-
8
- <script setup lang="ts">
9
- const props = withDefaults(
10
- defineProps<{
11
- modelValue: boolean
12
- testId?: string
13
- }>(),
14
- { testId: 'ui-switch' }
15
- )
16
-
17
- const emits = defineEmits<{
18
- (event: 'update:model-value', value: boolean): void
19
- }>()
20
-
21
- const value = computed<boolean>({
22
- get() {
23
- return props.modelValue
24
- },
25
- set(newValue) {
26
- emits('update:model-value', newValue)
27
- },
28
- })
29
- </script>
30
-
31
- <style>
32
- :root {
33
- --label-before-bg-color: #737373;
34
- --label-after-bg-color: #fff;
35
- --label-before-box-shadow: 0 0 0.1rem 0.1rem #69c0e2;
36
- }
37
-
38
- :root.dark-theme {
39
- --label-before-bg-color: #fff;
40
- --label-after-bg-color: #1b2a32;
41
- --label-before-box-shadow: 0 0 0;
42
- }
43
- </style>
44
-
45
- <style scoped lang="scss">
46
- .switch-body {
47
- width: max-content;
48
- position: relative;
49
- height: 1.2rem;
50
-
51
- input[type='checkbox'] {
52
- position: absolute;
53
- top: 0.3rem;
54
- right: 0.3rem;
55
- height: 0.8rem;
56
- width: 0.8rem;
57
- opacity: 0;
58
- }
59
- .switch-label {
60
- display: block;
61
- position: relative;
62
- cursor: pointer;
63
- height: 1.2rem;
64
- }
65
- .switch-label {
66
- &:before {
67
- position: absolute;
68
- display: inline-block;
69
- content: '';
70
- height: 18px;
71
- width: 33px;
72
- border-radius: 0.45rem;
73
- border: 2px solid var(--label-before-bg-color);
74
- background-color: var(--label-before-bg-color);
75
- transition: 0.15s ease-in;
76
- transition-property: border-color, background-color;
77
- }
78
-
79
- &:after {
80
- position: absolute;
81
- display: inline-block;
82
- content: '';
83
- height: 14.5px;
84
- width: 14.5px;
85
- border: 1px solid var(--label-after-bg-color);
86
- border-radius: 50%;
87
- background-color: var(--label-after-bg-color);
88
- bottom: 12.5px;
89
- transition: 0.15s ease-in;
90
- }
91
- }
92
-
93
- & input[type='checkbox']:focus + label:before {
94
- box-shadow: var(--label-before-box-shadow);
95
- }
96
- & input[type='checkbox']:checked + label:before {
97
- border-color: #62a420;
98
- background-color: #62a420;
99
- }
100
- & input[type='checkbox']:checked + label:after {
101
- left: 15px;
102
- }
103
- & input[type='checkbox'] + label:after {
104
- left: 3px;
105
- }
106
- }
107
- </style>
1
+ <template>
2
+ <div class="switch-body">
3
+ <input :id="props.testId" v-model="value" type="checkbox" />
4
+ <label class="switch-label" :for="props.testId"> </label>
5
+ </div>
6
+ </template>
7
+
8
+ <script setup lang="ts">
9
+ const props = withDefaults(
10
+ defineProps<{
11
+ modelValue: boolean
12
+ testId?: string
13
+ }>(),
14
+ { testId: 'ui-switch' }
15
+ )
16
+
17
+ const emits = defineEmits<{
18
+ (event: 'update:model-value', value: boolean): void
19
+ }>()
20
+
21
+ const value = computed<boolean>({
22
+ get() {
23
+ return props.modelValue
24
+ },
25
+ set(newValue) {
26
+ emits('update:model-value', newValue)
27
+ },
28
+ })
29
+ </script>
30
+
31
+ <style>
32
+ :root {
33
+ --label-before-bg-color: #737373;
34
+ --label-after-bg-color: #fff;
35
+ --label-before-box-shadow: 0 0 0.1rem 0.1rem #69c0e2;
36
+ }
37
+
38
+ :root.dark-theme {
39
+ --label-before-bg-color: #fff;
40
+ --label-after-bg-color: #1b2a32;
41
+ --label-before-box-shadow: 0 0 0;
42
+ }
43
+ </style>
44
+
45
+ <style scoped lang="scss">
46
+ .switch-body {
47
+ width: max-content;
48
+ position: relative;
49
+ height: 1.2rem;
50
+
51
+ input[type='checkbox'] {
52
+ position: absolute;
53
+ top: 0.3rem;
54
+ right: 0.3rem;
55
+ height: 0.8rem;
56
+ width: 0.8rem;
57
+ opacity: 0;
58
+ }
59
+ .switch-label {
60
+ display: block;
61
+ position: relative;
62
+ cursor: pointer;
63
+ height: 1.2rem;
64
+ }
65
+ .switch-label {
66
+ &:before {
67
+ position: absolute;
68
+ display: inline-block;
69
+ content: '';
70
+ height: 18px;
71
+ width: 33px;
72
+ border-radius: 0.45rem;
73
+ border: 2px solid var(--label-before-bg-color);
74
+ background-color: var(--label-before-bg-color);
75
+ transition: 0.15s ease-in;
76
+ transition-property: border-color, background-color;
77
+ }
78
+
79
+ &:after {
80
+ position: absolute;
81
+ display: inline-block;
82
+ content: '';
83
+ height: 14.5px;
84
+ width: 14.5px;
85
+ border: 1px solid var(--label-after-bg-color);
86
+ border-radius: 50%;
87
+ background-color: var(--label-after-bg-color);
88
+ bottom: 12.5px;
89
+ transition: 0.15s ease-in;
90
+ }
91
+ }
92
+
93
+ & input[type='checkbox']:focus + label:before {
94
+ box-shadow: var(--label-before-box-shadow);
95
+ }
96
+ & input[type='checkbox']:checked + label:before {
97
+ border-color: #62a420;
98
+ background-color: #62a420;
99
+ }
100
+ & input[type='checkbox']:checked + label:after {
101
+ left: 15px;
102
+ }
103
+ & input[type='checkbox'] + label:after {
104
+ left: 3px;
105
+ }
106
+ }
107
+ </style>