bkui-vue 0.0.1-beta.367 → 0.0.1-beta.368

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 (49) hide show
  1. package/dist/index.cjs.js +45 -45
  2. package/dist/index.esm.js +124 -124
  3. package/dist/index.umd.js +46 -46
  4. package/lib/breadcrumb/breadcrumb.css +1 -1
  5. package/lib/breadcrumb/breadcrumb.variable.css +6 -6
  6. package/lib/card/card.css +1 -1
  7. package/lib/card/card.variable.css +5 -5
  8. package/lib/color-picker/index.js +1 -1
  9. package/lib/container/container.css +1 -1
  10. package/lib/container/container.variable.css +1 -1
  11. package/lib/date-picker/base/date-table.d.ts +1 -7
  12. package/lib/date-picker/base/time-spinner.d.ts +1 -3
  13. package/lib/date-picker/date-picker.less +75 -75
  14. package/lib/date-picker/index.js +1 -1
  15. package/lib/dialog/dialog.less +19 -20
  16. package/lib/dialog/dialog.variable.css +120 -0
  17. package/lib/dialog/index.js +1 -1
  18. package/lib/directives/index.js +1 -1
  19. package/lib/info-box/index.js +1 -1
  20. package/lib/info-box/info-box.less +10 -9
  21. package/lib/info-box/info-box.variable.css +120 -0
  22. package/lib/input/index.js +1 -1
  23. package/lib/input/input.css +1 -1
  24. package/lib/input/input.variable.css +60 -61
  25. package/lib/loading/loading.css +1 -1
  26. package/lib/loading/loading.variable.css +17 -17
  27. package/lib/menu/menu.css +1 -1
  28. package/lib/menu/menu.variable.css +19 -19
  29. package/lib/modal/index.js +1 -1
  30. package/lib/modal/modal.less +4 -3
  31. package/lib/modal/modal.variable.css +120 -0
  32. package/lib/progress/progress.css +1 -1
  33. package/lib/progress/progress.variable.css +5 -5
  34. package/lib/search-select/search-select.css +1 -1
  35. package/lib/search-select/search-select.variable.css +35 -35
  36. package/lib/select/index.js +1 -1
  37. package/lib/select/select.css +1 -2
  38. package/lib/select/select.less +34 -35
  39. package/lib/select/select.variable.css +1 -2
  40. package/lib/styles/mixins/mixins.css +1 -1
  41. package/lib/styles/mixins/mixins.variable.css +1 -1
  42. package/lib/styles/mixins/popper.css +1 -1
  43. package/lib/styles/mixins/popper.less +12 -11
  44. package/lib/styles/mixins/popper.variable.css +121 -1
  45. package/lib/switcher/switcher.css +1 -1
  46. package/lib/switcher/switcher.variable.css +18 -18
  47. package/lib/upload/upload.css +1 -1
  48. package/lib/upload/upload.variable.css +28 -28
  49. package/package.json +1 -1
@@ -42,7 +42,7 @@
42
42
  }
43
43
 
44
44
  .@{bk-prefix}-select {
45
- .bk-select-icon(@fontSize: 20px, @color: #979ba5) {
45
+ .select-icon(@fontSize: 20px, @color: #979ba5) {
46
46
  display: flex;
47
47
  align-items: center;
48
48
  justify-content: center;
@@ -72,7 +72,7 @@
72
72
  .active(@color: @primary-color) {
73
73
  border-color: @primary-color;
74
74
  outline: 0;
75
- box-shadow: 0px 0px 3px 0px @input-shadow-color;
75
+ box-shadow: 0 0 3px 0 @input-shadow-color;
76
76
  }
77
77
 
78
78
  .mr5 {
@@ -91,23 +91,23 @@
91
91
  }
92
92
 
93
93
  &.large {
94
- .bk-select-content-wrapper {
94
+ .@{bk-prefix}-select-content-wrapper {
95
95
  font-size: 14px;
96
96
  }
97
97
  }
98
98
 
99
99
  &.is-focus.normal {
100
- .bk-select-trigger .bk-select-tag.bk-select-tag--default {
100
+ .@{bk-prefix}-select-trigger .@{bk-prefix}-select-tag.@{bk-prefix}-select-tag--default {
101
101
  border-color: @primary-color;
102
102
  box-shadow: 0px 0px 3px 0px #a3c5fd;
103
103
  }
104
104
  }
105
105
 
106
- &.is-focus .bk-input--default {
106
+ &.is-focus .@{bk-prefix}-input--default {
107
107
  border-color: @primary-color;
108
108
  outline: 0;
109
109
  box-shadow: 0px 0px 3px 0px @input-shadow-color;
110
-
110
+
111
111
  &.is-simplicity {
112
112
  border-color: transparent;
113
113
  border-bottom-color: @primary-color;
@@ -119,19 +119,19 @@
119
119
  }
120
120
 
121
121
  &.popover-show {
122
- .bk-select-trigger .angle-up {
122
+ .@{bk-prefix}-select-trigger .angle-up {
123
123
  transform: rotate(0);
124
124
  }
125
125
  }
126
126
 
127
127
  &.is-disabled {
128
- .bk-input--text {
128
+ .@{bk-prefix}-input--text {
129
129
  cursor: not-allowed;
130
130
  background-color: #fafbfd;
131
131
  }
132
132
  }
133
133
 
134
- .bk-input {
134
+ .@{bk-prefix}-input {
135
135
  &.is-focused {
136
136
  .active();
137
137
 
@@ -143,27 +143,27 @@
143
143
  }
144
144
  }
145
145
 
146
- .bk-input--text {
146
+ .@{bk-prefix}-input--text {
147
147
  .ellipsis();
148
148
  padding-right: 24px;
149
149
  cursor: pointer;
150
- background-color: @white-color;
150
+ background-color: @white-color;
151
151
  }
152
152
 
153
- .bk-select-trigger {
153
+ .@{bk-prefix}-select-trigger {
154
154
  position: relative;
155
155
 
156
- .bk-tag-input .bk-tag-input-trigger .clear-icon {
156
+ .@{bk-prefix}-tag-input .@{bk-prefix}-tag-input-trigger .clear-icon {
157
157
  margin-right: 0;
158
158
  }
159
159
 
160
- .bk-select-tag {
160
+ .@{bk-prefix}-select-tag {
161
161
  .input();
162
162
  display: flex;
163
163
  width: auto;
164
164
  align-items: center;
165
165
 
166
- &.collapse-tag .bk-select-tag-wrapper {
166
+ &.collapse-tag .@{bk-prefix}-select-tag-wrapper {
167
167
  height: 30px;
168
168
  }
169
169
 
@@ -196,14 +196,14 @@
196
196
  cursor: not-allowed;
197
197
  }
198
198
 
199
- .bk-tag {
199
+ .@{bk-prefix}-tag {
200
200
  cursor: not-allowed;
201
201
 
202
202
  &:hover {
203
203
  background-color: #f0f1f5;
204
204
  }
205
205
 
206
- .bk-tag-close {
206
+ .@{bk-prefix}-tag-close {
207
207
  cursor: not-allowed;
208
208
  }
209
209
  }
@@ -221,7 +221,7 @@
221
221
  flex-grow: 1;
222
222
  }
223
223
 
224
- .bk-tag {
224
+ .@{bk-prefix}-tag {
225
225
  max-width: 190px;
226
226
  padding: 0 4px;
227
227
  }
@@ -231,7 +231,7 @@
231
231
  right: 4px;
232
232
  transform: rotate(180deg);
233
233
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
234
- .bk-select-icon();
234
+ .select-icon();
235
235
  .fix-icon();
236
236
  }
237
237
 
@@ -239,7 +239,7 @@
239
239
  right: 4px;
240
240
  cursor: pointer;
241
241
  transition: all .1s;
242
- .bk-select-icon(14px, #c4c6cc);
242
+ .select-icon(14px, #c4c6cc);
243
243
  .fix-icon();
244
244
 
245
245
  &:hover {
@@ -256,14 +256,14 @@
256
256
 
257
257
  .@{bk-prefix}-popover {
258
258
  &.@{bk-prefix}-pop2-content {
259
- &.bk-select-popover {
259
+ &.@{bk-prefix}-select-popover {
260
260
  padding: 0;
261
261
  border: 1px solid @disable-color;
262
262
  border-radius: 2px;
263
263
  box-shadow: 0 2px 6px 0 rgba(0,0,0,.10);
264
264
 
265
- .bk-select-content-wrapper {
266
- .bk-select-empty {
265
+ .@{bk-prefix}-select-content-wrapper {
266
+ .@{bk-prefix}-select-empty {
267
267
  .flex-center();
268
268
  height: 56px;
269
269
  color: #63656e;
@@ -284,11 +284,11 @@
284
284
  }
285
285
  }
286
286
 
287
- .bk-select-dropdown {
287
+ .@{bk-prefix}-select-dropdown {
288
288
  overflow: auto;
289
289
  }
290
290
 
291
- .bk-select-extension {
291
+ .@{bk-prefix}-select-extension {
292
292
  display: flex;
293
293
  height: 40px;
294
294
  background-color: #fafbfd;
@@ -297,11 +297,11 @@
297
297
  border-radius: 0 0 2px 2px;
298
298
  }
299
299
 
300
- .bk-select-options {
300
+ .@{bk-prefix}-select-options {
301
301
  padding: 4px 0;
302
302
  }
303
303
 
304
- .bk-select-option {
304
+ .@{bk-prefix}-select-option {
305
305
  position: relative;
306
306
  height: 32px;
307
307
  padding: 0 12px;
@@ -313,7 +313,7 @@
313
313
 
314
314
  .ellipsis();
315
315
 
316
- .bk-select-selected-icon {
316
+ .@{bk-prefix}-select-selected-icon {
317
317
  position: absolute;
318
318
  right: 10px;
319
319
  }
@@ -360,7 +360,7 @@
360
360
  }
361
361
  }
362
362
 
363
- .bk-select-options-loading {
363
+ .@{bk-prefix}-select-options-loading {
364
364
  .flex-center();
365
365
 
366
366
  span {
@@ -368,7 +368,7 @@
368
368
  }
369
369
  }
370
370
 
371
- .bk-option-group {
371
+ .@{bk-prefix}-option-group {
372
372
  &-label {
373
373
  height: 32px;
374
374
  padding: 0 8px;
@@ -382,7 +382,7 @@
382
382
  }
383
383
 
384
384
  &.collapsible {
385
- .bk-select-option {
385
+ .@{bk-prefix}-select-option {
386
386
  padding-left: 40px;
387
387
  }
388
388
  }
@@ -414,15 +414,14 @@
414
414
  }
415
415
  }
416
416
 
417
- .bk-select-option {
417
+ .@{bk-prefix}-select-option {
418
418
  padding-left: 24px;
419
419
  }
420
420
  }
421
421
 
422
- .bk-select-search-wrapper {
422
+ .@{bk-prefix}-select-search-wrapper {
423
423
  display: flex;
424
424
  margin: 4px 8px 0 8px;
425
- margin-top: 4px;
426
425
  border-bottom: 1px solid @input-block-hover-color;
427
426
  align-items: center;
428
427
 
@@ -431,7 +430,7 @@
431
430
  color: @gray-color;
432
431
  }
433
432
 
434
- .bk-select-search-input {
433
+ .@{bk-prefix}-select-search-input {
435
434
  .input();
436
435
  padding: 0 8px;
437
436
  cursor: text;
@@ -181,7 +181,7 @@
181
181
  .bk-select .bk-input.is-focused {
182
182
  border-color: var(--primary-color);
183
183
  outline: 0;
184
- box-shadow: 0px 0px 3px 0px var(--input-shadow-color);
184
+ box-shadow: 0 0 3px 0 var(--input-shadow-color);
185
185
  }
186
186
  .bk-select .bk-input.is-focused.is-simplicity {
187
187
  border-color: transparent;
@@ -484,7 +484,6 @@
484
484
  .bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-search-wrapper {
485
485
  display: flex;
486
486
  margin: 4px 8px 0 8px;
487
- margin-top: 4px;
488
487
  border-bottom: 1px solid var(--input-block-hover-color);
489
488
  align-items: center;
490
489
  }
@@ -38,7 +38,7 @@
38
38
  .bk-popper.light {
39
39
  color: #63656e;
40
40
  background: #fff;
41
- box-shadow: #dcdee5 0px 0px 6px 0px;
41
+ box-shadow: #dcdee5 0 0 6px 0;
42
42
  }
43
43
  .bk-popper .bk-popper-arrow,
44
44
  .bk-popper .bk-popper-arrow::before {
@@ -38,7 +38,7 @@
38
38
  .bk-popper.light {
39
39
  color: #63656e;
40
40
  background: #fff;
41
- box-shadow: #dcdee5 0px 0px 6px 0px;
41
+ box-shadow: #dcdee5 0 0 6px 0;
42
42
  }
43
43
  .bk-popper .bk-popper-arrow,
44
44
  .bk-popper .bk-popper-arrow::before {
@@ -9,7 +9,7 @@
9
9
  .bk-popper.light {
10
10
  color: #63656e;
11
11
  background: #fff;
12
- box-shadow: #dcdee5 0px 0px 6px 0px;
12
+ box-shadow: #dcdee5 0 0 6px 0;
13
13
  }
14
14
  .bk-popper .bk-popper-arrow,
15
15
  .bk-popper .bk-popper-arrow::before {
@@ -1,4 +1,5 @@
1
- .bk-popper {
1
+ @import '../../styles/themes/themes.less';
2
+ .@{bk-prefix}-popper {
2
3
  display: none;
3
4
  padding: 7px 14px;
4
5
  font-size: 12px;
@@ -9,22 +10,22 @@
9
10
  &.light {
10
11
  color: #63656e;
11
12
  background: #fff;
12
- box-shadow: rgb(220, 222, 229) 0px 0px 6px 0px;
13
+ box-shadow: rgb(220, 222, 229) 0 0 6px 0;
13
14
  }
14
15
 
15
- .bk-popper-arrow,
16
- .bk-popper-arrow::before {
16
+ .@{bk-prefix}-popper-arrow,
17
+ .@{bk-prefix}-popper-arrow::before {
17
18
  position: absolute;
18
19
  width: 8px;
19
20
  height: 8px;
20
21
  background: inherit;
21
22
  }
22
23
 
23
- .bk-popper-arrow {
24
+ .@{bk-prefix}-popper-arrow {
24
25
  visibility: hidden;
25
26
  }
26
27
 
27
- .bk-popper-arrow::before {
28
+ .@{bk-prefix}-popper-arrow::before {
28
29
  content: '';
29
30
  visibility: visible;
30
31
  transform: rotate(45deg);
@@ -35,18 +36,18 @@
35
36
  }
36
37
  }
37
38
 
38
- .bk-popper[data-popper-placement^='top'] > .bk-popper-arrow {
39
+ .@{bk-prefix}-popper[data-popper-placement^='top'] > .@{bk-prefix}-popper-arrow {
39
40
  bottom: -4px;
40
41
  }
41
42
 
42
- .bk-popper[data-popper-placement^='bottom'] > .bk-popper-arrow {
43
+ .@{bk-prefix}-popper[data-popper-placement^='bottom'] > .@{bk-prefix}-popper-arrow {
43
44
  top: -4px;
44
45
  }
45
46
 
46
- .bk-popper[data-popper-placement^='left'] > .bk-popper-arrow {
47
+ .@{bk-prefix}-popper[data-popper-placement^='left'] > .@{bk-prefix}-popper-arrow {
47
48
  right: -4px;
48
49
  }
49
50
 
50
- .bk-popper[data-popper-placement^='right'] > .bk-popper-arrow {
51
+ .@{bk-prefix}-popper[data-popper-placement^='right'] > .@{bk-prefix}-popper-arrow {
51
52
  left: -4px;
52
- }
53
+ }
@@ -1,3 +1,123 @@
1
+ :root {
2
+ --bk-prefix: bk;
3
+ --popover-max-height: 216px;
4
+ --primary-color: #3a84ff;
5
+ --success-color: #2dcb56;
6
+ --warning-color: #ff9c01;
7
+ --danger-color: #ea3636;
8
+ --default-color: #63656e;
9
+ --gray-color: #979ba5;
10
+ --light-gray: #c4c6cc;
11
+ --white-color: white;
12
+ --whitesmoke-color: #fafbfd;
13
+ --disable-color: #dcdee5;
14
+ --font-size-base: 12px;
15
+ --font-size-medium: 14px;
16
+ --font-size-large: 16px;
17
+ --line-height-base: 16px;
18
+ --line-height-medium: 16px;
19
+ --line-height-large: 18px;
20
+ --component-size-small: 26px;
21
+ --component-size-base: 32px;
22
+ --component-size-large: 40px;
23
+ --border-width-base: 1px;
24
+ --border-style-base: solid;
25
+ --border-radius-base: 2px;
26
+ --border-style-color: var(--light-gray);
27
+ --input-disabled-bg: #fafbfd;
28
+ --input-disabled-border: var(--disable-color);
29
+ --input-height-base: var(--component-size-base);
30
+ --input-color: var(--default-color);
31
+ --input-bg: white;
32
+ --input-border-color: var(--light-gray);
33
+ --input-broder-radius: 3px;
34
+ --input-shadow-color: #a3c5fd;
35
+ --input-horizontal-padding: 10px;
36
+ --input-block-color: #f5f7fa;
37
+ --input-block-hover-color: #eaebf0;
38
+ --input-icon-size: var(--font-size-medium);
39
+ --input-maxlength-color: #979ba5;
40
+ --button-primary-hover-color: #5594fa;
41
+ --button-danger-hover-color: #ff5656;
42
+ --button-success-hover-color: #45e35f;
43
+ --button-warning-hover-color: #ffb848;
44
+ --button-default-hover-border-color: #979ba5;
45
+ --button-primary-active-color: #2c77f4;
46
+ --button-danger-active-color: #db2626;
47
+ --button-success-active-color: #1ab943;
48
+ --button-warning-active-color: #eb9000;
49
+ --button-selected-bg-color: #e1ecff;
50
+ --button-disabled-selected-bg-color: #f0f1f5;
51
+ --radio-font-color: #63656e;
52
+ --radio-active-color: #5594fa;
53
+ --radio-hover-border-color: #979ba5;
54
+ --radio-disabled-border: #dcdee5;
55
+ --radio-disabled-font-color: #c4c6cc;
56
+ --radio-distable-checked-bg: #fafbfd;
57
+ --radio-button-checked-bg: #e1ecff;
58
+ --fixed-navbar-background: #fff;
59
+ --fixed-navbar-boxshadow-color: rgba(0, 0, 0, 0.1);
60
+ --switch-default-color: #fff;
61
+ --switch-grey-color: #c4c6cc;
62
+ --breadcrumb-black-color: #979ba5;
63
+ --breadcrumb-primary-hover-color: #0082ff;
64
+ --breadcrumb-fn-main-color: #63656e;
65
+ --link-default-hover-color: #979ba5;
66
+ --link-primary-hover-color: #699df4;
67
+ --link-success-hover-color: #45e35f;
68
+ --link-warning-hover-color: #ffb848;
69
+ --link-danger-hover-color: #ff5656;
70
+ --link-default-disabled-color: #dcdee5;
71
+ --link-primary-disabled-color: #a3c5fd;
72
+ --link-success-disabled-color: #94f5a4;
73
+ --link-warning-disabled-color: #ffd695;
74
+ --link-danger-disabled-color: #fd9c9c;
75
+ --message-color: var(--default-color);
76
+ --message-primary-bg-color: #f0f8ff;
77
+ --message-primary-border-color: #e1ecff;
78
+ --message-primary-shadow-color: #e1e8f4;
79
+ --message-warning-bg-color: #fff4e2;
80
+ --message-warning-border-color: #ffe8c3;
81
+ --message-warning-shadow-color: #ede6db;
82
+ --message-success-bg-color: #f2fff4;
83
+ --message-success-border-color: #dcffe2;
84
+ --message-success-shadow-color: #cef0d7;
85
+ --message-danger-bg-color: #ffeded;
86
+ --message-danger-border-color: #ffdddd;
87
+ --message-danger-shadow-color: #f6dada;
88
+ --slider-default-bg: #dcdee5;
89
+ --slider-disable-bar-bg: #979ba5;
90
+ --menu-bg-color: #182132;
91
+ --submenu-bg-color: #151d2c;
92
+ --menu-active-bg-color: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
93
+ --menu-color: #96a2b9;
94
+ --menu-group-color: var(--default-color);
95
+ --menu-width: 260px;
96
+ --menu-collapse-width: 60px;
97
+ --menu-active-color: white;
98
+ --nav-header-bg-color: #182132;
99
+ --nav-bg-color: #182132;
100
+ --date-picker-disabled-bg: #fafbfd;
101
+ --date-picker-dropdown-mb: 4px;
102
+ --date-picker-dropdown-bg: #fff;
103
+ --table-bg-color: var(--white-color);
104
+ --table-border-color: #dcdee5;
105
+ --table-head-bg-color: #fafbfd;
106
+ --table-head-font-color: #313238;
107
+ --table-body-font-color: #575961;
108
+ --table-row-hover-bg-color: #f5f7fa;
109
+ --table-row-active-bg-color: #f0f1f5;
110
+ --cascader-panel-border-color: #dcdee5;
111
+ --cascader-panel-hover: #f5f7fa;
112
+ --cascader-panel-active: #e1ecff;
113
+ --cascader-panel-disabled-bg: #fff;
114
+ --search-select-focus-border-color: var(--primary-color);
115
+ --search-select-focus-color: #3c96ff;
116
+ --search-select-font-color: var(--default-color);
117
+ --search-select-placeholder-color: var(--light-gray);
118
+ --search-select-message-color: var(--danger-color);
119
+ --search-select-menu-border-color: var(--disable-color);
120
+ }
1
121
  .bk-popper {
2
122
  display: none;
3
123
  padding: 7px 14px;
@@ -9,7 +129,7 @@
9
129
  .bk-popper.light {
10
130
  color: #63656e;
11
131
  background: #fff;
12
- box-shadow: #dcdee5 0px 0px 6px 0px;
132
+ box-shadow: #dcdee5 0 0 6px 0;
13
133
  }
14
134
  .bk-popper .bk-popper-arrow,
15
135
  .bk-popper .bk-popper-arrow::before {
@@ -38,7 +38,7 @@
38
38
  .bk-popper.light {
39
39
  color: #63656e;
40
40
  background: #fff;
41
- box-shadow: #dcdee5 0px 0px 6px 0px;
41
+ box-shadow: #dcdee5 0 0 6px 0;
42
42
  }
43
43
  .bk-popper .bk-popper-arrow,
44
44
  .bk-popper .bk-popper-arrow::before {
@@ -158,7 +158,7 @@
158
158
  .bk-popper.light {
159
159
  color: #63656e;
160
160
  background: #fff;
161
- box-shadow: #dcdee5 0px 0px 6px 0px;
161
+ box-shadow: #dcdee5 0 0 6px 0;
162
162
  }
163
163
  .bk-popper .bk-popper-arrow,
164
164
  .bk-popper .bk-popper-arrow::before {
@@ -204,7 +204,7 @@
204
204
  vertical-align: middle;
205
205
  list-style: none;
206
206
  cursor: pointer;
207
- background-color: var(--switch-grey-color);
207
+ background-color: #c4c6cc;
208
208
  border: 1px solid transparent;
209
209
  border-radius: 50px;
210
210
  border-radius: 100px;
@@ -221,7 +221,7 @@
221
221
  width: 16px;
222
222
  height: 16px;
223
223
  cursor: pointer;
224
- background: var(--switch-default-color);
224
+ background: #fff;
225
225
  background-color: #fff;
226
226
  border-radius: 18px;
227
227
  content: ' ';
@@ -260,7 +260,7 @@
260
260
  width: 16px;
261
261
  height: 16px;
262
262
  font-size: 12px;
263
- color: var(--switch-grey-color);
263
+ color: #c4c6cc;
264
264
  cursor: pointer;
265
265
  background: transparent;
266
266
  border-radius: 16px;
@@ -311,16 +311,16 @@
311
311
  cursor: not-allowed;
312
312
  }
313
313
  .bk-switcher.is-checked {
314
- background: var(--success-color);
314
+ background: #2dcb56;
315
315
  }
316
316
  .bk-switcher.is-checked .bk-switcher-loading svg {
317
- color: var(--success-color);
317
+ color: #2dcb56;
318
318
  }
319
319
  .bk-switcher.is-checked:not(.bk-switcher-outline).bk-switcher.is-checked.bk-primary {
320
- background: var(--primary-color);
320
+ background: #3a84ff;
321
321
  }
322
322
  .bk-switcher.is-checked:not(.bk-switcher-outline).bk-switcher.is-checked.bk-primary .bk-switcher-loading svg {
323
- color: var(--primary-color);
323
+ color: #3a84ff;
324
324
  }
325
325
  .bk-switcher.is-checked:after {
326
326
  left: 100%;
@@ -336,38 +336,38 @@
336
336
  margin-left: -17px;
337
337
  }
338
338
  .bk-switcher.bk-switcher-outline {
339
- background: var(--switch-default-color);
340
- border: 1px solid var(--switch-grey-color);
339
+ background: #fff;
340
+ border: 1px solid #c4c6cc;
341
341
  }
342
342
  .bk-switcher.bk-switcher-outline:after {
343
343
  width: 24px;
344
344
  height: 24px;
345
- background-color: var(--switch-grey-color);
345
+ background-color: #c4c6cc;
346
346
  box-shadow: none;
347
347
  }
348
348
  .bk-switcher.bk-switcher-outline .switcher-text {
349
- color: var(--switch-grey-color);
349
+ color: #c4c6cc;
350
350
  }
351
351
  .bk-switcher.bk-switcher-outline.is-checked {
352
- border: 1px solid var(--success-color);
352
+ border: 1px solid #2dcb56;
353
353
  }
354
354
  .bk-switcher.bk-switcher-outline.is-checked:after {
355
- background-color: var(--success-color);
355
+ background-color: #2dcb56;
356
356
  }
357
357
  .bk-switcher.bk-switcher-outline.is-checked .switcher-text {
358
- color: var(--success-color);
358
+ color: #2dcb56;
359
359
  }
360
360
  .bk-switcher.bk-switcher-outline .bk-switcher-loading svg {
361
361
  color: #fff;
362
362
  }
363
363
  .bk-switcher.bk-switcher-outline.bk-switcher.bk-primary.is-checked {
364
- border: 1px solid var(--primary-color);
364
+ border: 1px solid #3a84ff;
365
365
  }
366
366
  .bk-switcher.bk-switcher-outline.bk-switcher.bk-primary.is-checked:after {
367
- background: var(--primary-color);
367
+ background: #3a84ff;
368
368
  }
369
369
  .bk-switcher.bk-switcher-outline.bk-switcher.bk-primary.is-checked .switcher-text {
370
- color: var(--primary-color);
370
+ color: #3a84ff;
371
371
  }
372
372
  .bk-switcher.bk-switcher-square {
373
373
  border-radius: 2px;
@@ -38,7 +38,7 @@
38
38
  .bk-popper.light {
39
39
  color: #63656e;
40
40
  background: #fff;
41
- box-shadow: #dcdee5 0px 0px 6px 0px;
41
+ box-shadow: #dcdee5 0 0 6px 0;
42
42
  }
43
43
  .bk-popper .bk-popper-arrow,
44
44
  .bk-popper .bk-popper-arrow::before {