bfg-common 1.3.393 → 1.3.394
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.
- package/assets/img/icons/icons-sprite-dark-1.svg +1 -360
- package/assets/img/icons/icons-sprite-dark-2.svg +1 -296
- package/assets/img/icons/icons-sprite-dark-3.svg +1 -221
- package/assets/img/icons/icons-sprite-dark-4.svg +1 -247
- package/assets/img/icons/icons-sprite-light-1.svg +1 -360
- package/assets/img/icons/icons-sprite-light-2.svg +1 -296
- package/assets/img/icons/icons-sprite-light-3.svg +1 -221
- package/assets/img/icons/icons-sprite-light-4.svg +1 -247
- package/assets/localization/local_be.json +5 -1
- package/assets/localization/local_en.json +5 -1
- package/assets/localization/local_hy.json +5 -1
- package/assets/localization/local_kk.json +5 -1
- package/assets/localization/local_ru.json +5 -1
- package/assets/localization/local_zh.json +5 -1
- package/assets/scss/common/icons/icons.scss +0 -1
- package/components/atoms/loader/Loader.vue +30 -30
- package/components/atoms/loader/PreLoader.vue +38 -38
- package/components/atoms/switch/Switch.vue +111 -111
- package/components/atoms/table/compact/Compact.vue +526 -526
- package/components/common/adapterManager/ui/table/Header.vue +93 -93
- package/components/common/adapterManager/ui/table/Table.vue +162 -162
- package/components/common/context/Context.vue +99 -99
- package/components/common/lib/config/states.ts +126 -126
- package/components/common/resource/progressBlock/ProgressBlock.vue +142 -142
- package/components/common/split/horizontal/Horizontal.vue +70 -307
- package/components/common/split/horizontal/HorizontalOld.vue +307 -0
- package/components/common/vm/actions/add/Add.vue +602 -602
- package/components/common/vm/actions/clone/Clone.vue +518 -518
- package/components/common/vm/actions/common/customizeHardware/CustomizeHardware.vue +273 -273
- package/components/common/vm/actions/common/customizeHardware/virtualHardware/VirtualHardware.vue +697 -697
- package/components/common/vm/actions/common/customizeHardware/virtualHardware/cdDvdDrive/CdDvdDrive.vue +256 -256
- package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/NewHardDisk.vue +458 -458
- package/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/NewNetwork.vue +304 -304
- package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/NewPciDevice.vue +167 -167
- package/components/common/vm/actions/common/customizeHardware/virtualHardware/newUsbController/NewUsbController.vue +82 -82
- package/components/common/vm/actions/common/customizeHardware/virtualHardware/other/Other.vue +32 -32
- package/components/common/vm/actions/common/customizeHardware/virtualHardware/videoCard/VideoCard.vue +182 -182
- package/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/BootOptions.vue +114 -114
- package/components/common/vm/actions/common/customizeHardware/vmoptions/generalOptions/GeneralOptions.vue +188 -188
- package/components/common/vm/actions/common/customizeHardware/vmoptions/tools/Tools.vue +72 -72
- package/components/common/vm/actions/common/select/computeResource/ComputeResource.vue +164 -164
- package/components/common/vm/actions/common/select/name/Name.vue +235 -235
- package/components/common/vm/actions/common/select/storage/Storage.vue +198 -198
- package/components/common/vm/actions/editSettings/EditSettings.vue +316 -316
- package/components/common/weekSelect/lib/config/options.ts +10 -10
- package/components/common/wizards/datastore/add/Add.vue +436 -436
- package/components/common/wizards/datastore/add/lib/config/stepItems.ts +191 -191
- package/components/common/wizards/datastore/add/lib/models/interfaces.ts +38 -38
- package/components/common/wizards/datastore/add/lib/utils.ts +70 -70
- package/components/common/wizards/datastore/add/local/createName/CreateName.vue +160 -160
- package/components/common/wizards/datastore/add/nfs/Nfs.vue +112 -112
- package/components/common/wizards/datastore/add/nfs/accessibility/Accessibility.vue +104 -104
- package/components/common/wizards/datastore/add/nfs/accessibility/tablesView/lib/config/compatibleTable.ts +62 -62
- package/components/common/wizards/datastore/add/nfs/accessibility/tablesView/lib/config/hostsTableItems.ts +53 -53
- package/components/common/wizards/datastore/add/readyComplete/ReadyComplete.vue +86 -86
- package/components/common/wizards/datastore/add/readyComplete/lib/config/propertiesDetails.ts +184 -184
- package/components/common/wizards/datastore/add/sharedStorm/deviceSelection/DeviceSelection.vue +459 -459
- package/components/common/wizards/datastore/add/types/Types.vue +80 -80
- package/components/common/wizards/datastore/add/types/lib/config/typeOptions.ts +49 -49
- package/composables/useAppVersion.ts +21 -21
- package/composables/useEnvLanguage.ts +20 -20
- package/lib/utils/sendTask.ts +72 -72
- package/minify.js +146 -146
- package/package.json +1 -1
- package/plugins/spice-console/spice.console.ts +147 -147
- package/public/spice-console/application/codec.js +263 -263
- package/public/spice-console/lib/rasterEngine.js +907 -907
- package/public/spice-console/network/spicechannel.js +375 -375
- package/store/main/lib/interfaces.ts +9 -9
- package/store/tasks/actions.ts +133 -133
- package/store/tasks/getters.ts +25 -25
- package/store/tasks/lib/models/interfaces.ts +18 -18
- package/store/tasks/mutations.ts +58 -58
- package/store/tasks/state.ts +16 -16
- package/assets/img/icons/icons-sprite-dark-1-old.svg +0 -1
- package/assets/img/icons/icons-sprite-dark-2-old.svg +0 -1
- package/assets/img/icons/icons-sprite-dark-3-old.svg +0 -1
- package/assets/img/icons/icons-sprite-dark-4-old.svg +0 -1
- package/assets/img/icons/icons-sprite-dark-7.svg +0 -8
- package/assets/img/icons/icons-sprite-light-1-old.svg +0 -1
- package/assets/img/icons/icons-sprite-light-2-old.svg +0 -1
- package/assets/img/icons/icons-sprite-light-3-old.svg +0 -1
- package/assets/img/icons/icons-sprite-light-4-old.svg +0 -1
- package/assets/img/icons/icons-sprite-light-7.svg +0 -8
- package/assets/scss/common/icons/icons-7.scss +0 -29
|
@@ -2361,5 +2361,9 @@
|
|
|
2361
2361
|
"authBgTextSphere": "Лёгка кантраляваць віртуалізацыю вузлы $*і$ кіраваць імі",
|
|
2362
2362
|
"alert": "Трывога",
|
|
2363
2363
|
"noTargetToScanIsSelected": "Мэта для сканавання не абраная.",
|
|
2364
|
-
"protectNewVolumes": "Абарона новых тамоў"
|
|
2364
|
+
"protectNewVolumes": "Абарона новых тамоў",
|
|
2365
|
+
"hostsCount": "Хасты ({0})",
|
|
2366
|
+
"vmsCount": "Віртуальныя машыны ({0})",
|
|
2367
|
+
"datastoresCount": "Сховішчы даных ({0})",
|
|
2368
|
+
"networksCount": "Сеткі ({0})"
|
|
2365
2369
|
}
|
|
@@ -2365,5 +2365,9 @@
|
|
|
2365
2365
|
"authBgTextSphere": "Monitor $*and$ control virtualization hosts $*with$ ease",
|
|
2366
2366
|
"alert": "Alert",
|
|
2367
2367
|
"noTargetToScanIsSelected": "No target to scan is selected.",
|
|
2368
|
-
"protectNewVolumes": "Protect new volumes"
|
|
2368
|
+
"protectNewVolumes": "Protect new volumes",
|
|
2369
|
+
"hostsCount": "Hosts ({0})",
|
|
2370
|
+
"vmsCount": "VMs ({0})",
|
|
2371
|
+
"datastoresCount": "Datastores ({0})",
|
|
2372
|
+
"networksCount": "Networks ({0})"
|
|
2369
2373
|
}
|
|
@@ -2365,5 +2365,9 @@
|
|
|
2365
2365
|
"authBgTextSphere": "Հեշտությամբ վերահսկեք $*և$ Կառավարեք վիրտուալացման հանգույցները",
|
|
2366
2366
|
"alert": "Անհանգստություն",
|
|
2367
2367
|
"noTargetToScanIsSelected": "Սկանավորման թիրախը ընտրված չէ:",
|
|
2368
|
-
"protectNewVolumes": "Նոր ծավալների պաշտպանություն"
|
|
2368
|
+
"protectNewVolumes": "Նոր ծավալների պաշտպանություն",
|
|
2369
|
+
"hostsCount": "Հոսթեր ({0})",
|
|
2370
|
+
"vmsCount": "VM-ներ ({0})",
|
|
2371
|
+
"datastoresCount": "Տվյալների պահեստներ ({0})",
|
|
2372
|
+
"networksCount": "Ցանցեր ({0})"
|
|
2369
2373
|
}
|
|
@@ -2364,5 +2364,9 @@
|
|
|
2364
2364
|
"authBgTextSphere": "Виртуализация $*хосттарын$ оңай бақылаңыз $*және$ басқарыңыз",
|
|
2365
2365
|
"alert": "Ескерту",
|
|
2366
2366
|
"noTargetToScanIsSelected": "Сканерлеуге арналған мақсат таңдалмаған.",
|
|
2367
|
-
"protectNewVolumes": "Жаңа томдарды қорғау"
|
|
2367
|
+
"protectNewVolumes": "Жаңа томдарды қорғау",
|
|
2368
|
+
"hostsCount": "Хосттар ({0})",
|
|
2369
|
+
"vmsCount": "VM ({0})",
|
|
2370
|
+
"datastoresCount": "Деректер қоймалары ({0})",
|
|
2371
|
+
"networksCount": "Желілер ({0})"
|
|
2368
2372
|
}
|
|
@@ -2370,5 +2370,9 @@
|
|
|
2370
2370
|
"authBgTextSphere": "Легко контролируйте узлы виртуализации $*и$ управляйте ими",
|
|
2371
2371
|
"alert": "Тревога",
|
|
2372
2372
|
"noTargetToScanIsSelected": "Цель для сканирования не выбрана.",
|
|
2373
|
-
"protectNewVolumes": "Защитить новые тома"
|
|
2373
|
+
"protectNewVolumes": "Защитить новые тома",
|
|
2374
|
+
"hostsCount": "Хосты ({0})",
|
|
2375
|
+
"vmsCount": "Виртуальные машины ({0})",
|
|
2376
|
+
"datastoresCount": "Хранилища данных ({0})",
|
|
2377
|
+
"networksCount": "Сети ({0})"
|
|
2374
2378
|
}
|
|
@@ -2364,5 +2364,9 @@
|
|
|
2364
2364
|
"authBgTextSphere": "轻松 $*监$ 控和控制虚拟 $*化$ 主机",
|
|
2365
2365
|
"alert": "警报",
|
|
2366
2366
|
"noTargetToScanIsSelected": "未选择要扫描的目标。",
|
|
2367
|
-
"protectNewVolumes": "保护新卷"
|
|
2367
|
+
"protectNewVolumes": "保护新卷",
|
|
2368
|
+
"hostsCount": "主机 ({0})",
|
|
2369
|
+
"vmsCount": "虚拟机 ({0})",
|
|
2370
|
+
"datastoresCount": "数据存储 ({0})",
|
|
2371
|
+
"networksCount": "网络 ({0})"
|
|
2368
2372
|
}
|
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="loader"><div :data-id="props.testId" class="spinner"></div></div>
|
|
3
|
-
</template>
|
|
4
|
-
|
|
5
|
-
<script setup lang="ts">
|
|
6
|
-
const props = defineProps<{
|
|
7
|
-
testId: string
|
|
8
|
-
}>()
|
|
9
|
-
</script>
|
|
10
|
-
|
|
11
|
-
<style scoped lang="scss">
|
|
12
|
-
@import '~/assets/scss/common/mixins';
|
|
13
|
-
.loader {
|
|
14
|
-
position: absolute;
|
|
15
|
-
@include flex($just: center, $align: center);
|
|
16
|
-
top: 0;
|
|
17
|
-
left: 0;
|
|
18
|
-
right: 0;
|
|
19
|
-
bottom: 0;
|
|
20
|
-
background-color: var(--table-spinner-bg-color);
|
|
21
|
-
z-index: 590;
|
|
22
|
-
|
|
23
|
-
.spinner {
|
|
24
|
-
width: 40px;
|
|
25
|
-
height: 40px;
|
|
26
|
-
min-width: 40px;
|
|
27
|
-
min-height: 40px;
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<div class="loader"><div :data-id="props.testId" class="spinner"></div></div>
|
|
3
|
+
</template>
|
|
4
|
+
|
|
5
|
+
<script setup lang="ts">
|
|
6
|
+
const props = defineProps<{
|
|
7
|
+
testId: string
|
|
8
|
+
}>()
|
|
9
|
+
</script>
|
|
10
|
+
|
|
11
|
+
<style scoped lang="scss">
|
|
12
|
+
@import '~/assets/scss/common/mixins';
|
|
13
|
+
.loader {
|
|
14
|
+
position: absolute;
|
|
15
|
+
@include flex($just: center, $align: center);
|
|
16
|
+
top: 0;
|
|
17
|
+
left: 0;
|
|
18
|
+
right: 0;
|
|
19
|
+
bottom: 0;
|
|
20
|
+
background-color: var(--table-spinner-bg-color);
|
|
21
|
+
z-index: 590;
|
|
22
|
+
|
|
23
|
+
.spinner {
|
|
24
|
+
width: 40px;
|
|
25
|
+
height: 40px;
|
|
26
|
+
min-width: 40px;
|
|
27
|
+
min-height: 40px;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
</style>
|
|
@@ -1,38 +1,38 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div id="loading-container" :hidden="!props.show">
|
|
3
|
-
<div :data-id="props.testId" class="spinner spinner-inverse">
|
|
4
|
-
{{ localization.loading }}...
|
|
5
|
-
</div>
|
|
6
|
-
</div>
|
|
7
|
-
</template>
|
|
8
|
-
|
|
9
|
-
<script setup lang="ts">
|
|
10
|
-
import { UI_I_Localization } from '~/lib/models/interfaces'
|
|
11
|
-
|
|
12
|
-
const props = defineProps<{
|
|
13
|
-
show: boolean
|
|
14
|
-
testId: string
|
|
15
|
-
}>()
|
|
16
|
-
|
|
17
|
-
const localization = computed<UI_I_Localization>(() => useLocal())
|
|
18
|
-
</script>
|
|
19
|
-
|
|
20
|
-
<style scoped lang="scss">
|
|
21
|
-
#loading-container {
|
|
22
|
-
position: fixed;
|
|
23
|
-
top: 0;
|
|
24
|
-
left: 0;
|
|
25
|
-
right: 0;
|
|
26
|
-
bottom: 0;
|
|
27
|
-
display: flex;
|
|
28
|
-
align-items: center;
|
|
29
|
-
justify-content: center;
|
|
30
|
-
background-color: #fff;
|
|
31
|
-
z-index: 99999;
|
|
32
|
-
|
|
33
|
-
.spinner {
|
|
34
|
-
opacity: 0.5;
|
|
35
|
-
white-space: nowrap;
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<div id="loading-container" :hidden="!props.show">
|
|
3
|
+
<div :data-id="props.testId" class="spinner spinner-inverse">
|
|
4
|
+
{{ localization.loading }}...
|
|
5
|
+
</div>
|
|
6
|
+
</div>
|
|
7
|
+
</template>
|
|
8
|
+
|
|
9
|
+
<script setup lang="ts">
|
|
10
|
+
import { UI_I_Localization } from '~/lib/models/interfaces'
|
|
11
|
+
|
|
12
|
+
const props = defineProps<{
|
|
13
|
+
show: boolean
|
|
14
|
+
testId: string
|
|
15
|
+
}>()
|
|
16
|
+
|
|
17
|
+
const localization = computed<UI_I_Localization>(() => useLocal())
|
|
18
|
+
</script>
|
|
19
|
+
|
|
20
|
+
<style scoped lang="scss">
|
|
21
|
+
#loading-container {
|
|
22
|
+
position: fixed;
|
|
23
|
+
top: 0;
|
|
24
|
+
left: 0;
|
|
25
|
+
right: 0;
|
|
26
|
+
bottom: 0;
|
|
27
|
+
display: flex;
|
|
28
|
+
align-items: center;
|
|
29
|
+
justify-content: center;
|
|
30
|
+
background-color: #fff;
|
|
31
|
+
z-index: 99999;
|
|
32
|
+
|
|
33
|
+
.spinner {
|
|
34
|
+
opacity: 0.5;
|
|
35
|
+
white-space: nowrap;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
</style>
|
|
@@ -1,111 +1,111 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="flex-align-center">
|
|
3
|
-
<div class="switch-body">
|
|
4
|
-
<input :id="props.testId" v-model="value" type="checkbox" />
|
|
5
|
-
<label class="switch-label" :for="props.testId"></label>
|
|
6
|
-
</div>
|
|
7
|
-
<label :for="props.testId"><slot></slot></label>
|
|
8
|
-
</div>
|
|
9
|
-
</template>
|
|
10
|
-
|
|
11
|
-
<script setup lang="ts">
|
|
12
|
-
const props = withDefaults(
|
|
13
|
-
defineProps<{
|
|
14
|
-
modelValue: boolean
|
|
15
|
-
testId?: string
|
|
16
|
-
}>(),
|
|
17
|
-
{ testId: 'ui-switch' }
|
|
18
|
-
)
|
|
19
|
-
|
|
20
|
-
const emits = defineEmits<{
|
|
21
|
-
(event: 'update:model-value', value: boolean): void
|
|
22
|
-
}>()
|
|
23
|
-
|
|
24
|
-
const value = computed<boolean>({
|
|
25
|
-
get() {
|
|
26
|
-
return props.modelValue
|
|
27
|
-
},
|
|
28
|
-
set(newValue) {
|
|
29
|
-
emits('update:model-value', newValue)
|
|
30
|
-
},
|
|
31
|
-
})
|
|
32
|
-
</script>
|
|
33
|
-
|
|
34
|
-
<style>
|
|
35
|
-
:root {
|
|
36
|
-
--label-before-bg-color: #737373;
|
|
37
|
-
--label-after-bg-color: #fff;
|
|
38
|
-
--label-before-box-shadow: 0 0 0.1rem 0.1rem #69c0e2;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
:root.dark-theme {
|
|
42
|
-
--label-before-bg-color: #fff;
|
|
43
|
-
--label-after-bg-color: #1b2a32;
|
|
44
|
-
--label-before-box-shadow: 0 0 0;
|
|
45
|
-
}
|
|
46
|
-
</style>
|
|
47
|
-
|
|
48
|
-
<style scoped lang="scss">
|
|
49
|
-
.switch-body {
|
|
50
|
-
width: 33px;
|
|
51
|
-
height: 18px;
|
|
52
|
-
position: relative;
|
|
53
|
-
margin-right: 4px;
|
|
54
|
-
|
|
55
|
-
input[type='checkbox'] {
|
|
56
|
-
position: absolute;
|
|
57
|
-
top: 0.3rem;
|
|
58
|
-
right: 0.3rem;
|
|
59
|
-
height: 0.8rem;
|
|
60
|
-
width: 0.8rem;
|
|
61
|
-
opacity: 0;
|
|
62
|
-
}
|
|
63
|
-
.switch-label {
|
|
64
|
-
display: block;
|
|
65
|
-
position: relative;
|
|
66
|
-
cursor: pointer;
|
|
67
|
-
height: 1.2rem;
|
|
68
|
-
}
|
|
69
|
-
.switch-label {
|
|
70
|
-
&:before {
|
|
71
|
-
position: absolute;
|
|
72
|
-
display: inline-block;
|
|
73
|
-
content: '';
|
|
74
|
-
height: 18px;
|
|
75
|
-
width: 33px;
|
|
76
|
-
border-radius: 0.45rem;
|
|
77
|
-
border: 2px solid var(--label-before-bg-color);
|
|
78
|
-
background-color: var(--label-before-bg-color);
|
|
79
|
-
transition: 0.15s ease-in;
|
|
80
|
-
transition-property: border-color, background-color;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
&:after {
|
|
84
|
-
position: absolute;
|
|
85
|
-
display: inline-block;
|
|
86
|
-
content: '';
|
|
87
|
-
height: 14.5px;
|
|
88
|
-
width: 14.5px;
|
|
89
|
-
border: 1px solid var(--label-after-bg-color);
|
|
90
|
-
border-radius: 50%;
|
|
91
|
-
background-color: var(--label-after-bg-color);
|
|
92
|
-
bottom: 12.5px;
|
|
93
|
-
transition: 0.15s ease-in;
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
& input[type='checkbox']:focus + label:before {
|
|
98
|
-
box-shadow: var(--label-before-box-shadow);
|
|
99
|
-
}
|
|
100
|
-
& input[type='checkbox']:checked + label:before {
|
|
101
|
-
border-color: #62a420;
|
|
102
|
-
background-color: #62a420;
|
|
103
|
-
}
|
|
104
|
-
& input[type='checkbox']:checked + label:after {
|
|
105
|
-
left: 15px;
|
|
106
|
-
}
|
|
107
|
-
& input[type='checkbox'] + label:after {
|
|
108
|
-
left: 3px;
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<div class="flex-align-center">
|
|
3
|
+
<div class="switch-body">
|
|
4
|
+
<input :id="props.testId" v-model="value" type="checkbox" />
|
|
5
|
+
<label class="switch-label" :for="props.testId"></label>
|
|
6
|
+
</div>
|
|
7
|
+
<label :for="props.testId"><slot></slot></label>
|
|
8
|
+
</div>
|
|
9
|
+
</template>
|
|
10
|
+
|
|
11
|
+
<script setup lang="ts">
|
|
12
|
+
const props = withDefaults(
|
|
13
|
+
defineProps<{
|
|
14
|
+
modelValue: boolean
|
|
15
|
+
testId?: string
|
|
16
|
+
}>(),
|
|
17
|
+
{ testId: 'ui-switch' }
|
|
18
|
+
)
|
|
19
|
+
|
|
20
|
+
const emits = defineEmits<{
|
|
21
|
+
(event: 'update:model-value', value: boolean): void
|
|
22
|
+
}>()
|
|
23
|
+
|
|
24
|
+
const value = computed<boolean>({
|
|
25
|
+
get() {
|
|
26
|
+
return props.modelValue
|
|
27
|
+
},
|
|
28
|
+
set(newValue) {
|
|
29
|
+
emits('update:model-value', newValue)
|
|
30
|
+
},
|
|
31
|
+
})
|
|
32
|
+
</script>
|
|
33
|
+
|
|
34
|
+
<style>
|
|
35
|
+
:root {
|
|
36
|
+
--label-before-bg-color: #737373;
|
|
37
|
+
--label-after-bg-color: #fff;
|
|
38
|
+
--label-before-box-shadow: 0 0 0.1rem 0.1rem #69c0e2;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
:root.dark-theme {
|
|
42
|
+
--label-before-bg-color: #fff;
|
|
43
|
+
--label-after-bg-color: #1b2a32;
|
|
44
|
+
--label-before-box-shadow: 0 0 0;
|
|
45
|
+
}
|
|
46
|
+
</style>
|
|
47
|
+
|
|
48
|
+
<style scoped lang="scss">
|
|
49
|
+
.switch-body {
|
|
50
|
+
width: 33px;
|
|
51
|
+
height: 18px;
|
|
52
|
+
position: relative;
|
|
53
|
+
margin-right: 4px;
|
|
54
|
+
|
|
55
|
+
input[type='checkbox'] {
|
|
56
|
+
position: absolute;
|
|
57
|
+
top: 0.3rem;
|
|
58
|
+
right: 0.3rem;
|
|
59
|
+
height: 0.8rem;
|
|
60
|
+
width: 0.8rem;
|
|
61
|
+
opacity: 0;
|
|
62
|
+
}
|
|
63
|
+
.switch-label {
|
|
64
|
+
display: block;
|
|
65
|
+
position: relative;
|
|
66
|
+
cursor: pointer;
|
|
67
|
+
height: 1.2rem;
|
|
68
|
+
}
|
|
69
|
+
.switch-label {
|
|
70
|
+
&:before {
|
|
71
|
+
position: absolute;
|
|
72
|
+
display: inline-block;
|
|
73
|
+
content: '';
|
|
74
|
+
height: 18px;
|
|
75
|
+
width: 33px;
|
|
76
|
+
border-radius: 0.45rem;
|
|
77
|
+
border: 2px solid var(--label-before-bg-color);
|
|
78
|
+
background-color: var(--label-before-bg-color);
|
|
79
|
+
transition: 0.15s ease-in;
|
|
80
|
+
transition-property: border-color, background-color;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
&:after {
|
|
84
|
+
position: absolute;
|
|
85
|
+
display: inline-block;
|
|
86
|
+
content: '';
|
|
87
|
+
height: 14.5px;
|
|
88
|
+
width: 14.5px;
|
|
89
|
+
border: 1px solid var(--label-after-bg-color);
|
|
90
|
+
border-radius: 50%;
|
|
91
|
+
background-color: var(--label-after-bg-color);
|
|
92
|
+
bottom: 12.5px;
|
|
93
|
+
transition: 0.15s ease-in;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
& input[type='checkbox']:focus + label:before {
|
|
98
|
+
box-shadow: var(--label-before-box-shadow);
|
|
99
|
+
}
|
|
100
|
+
& input[type='checkbox']:checked + label:before {
|
|
101
|
+
border-color: #62a420;
|
|
102
|
+
background-color: #62a420;
|
|
103
|
+
}
|
|
104
|
+
& input[type='checkbox']:checked + label:after {
|
|
105
|
+
left: 15px;
|
|
106
|
+
}
|
|
107
|
+
& input[type='checkbox'] + label:after {
|
|
108
|
+
left: 3px;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
</style>
|