@appscode/design-system 1.0.43-alpha.23 → 1.0.43-alpha.27
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/base/utilities/_initial-variables.scss +1 -0
- package/base/utilities/dark-theme.scss +94 -10
- package/components/_ac-terminal.scss +214 -0
- package/components/_left-sidebar-menu.scss +21 -1
- package/package.json +1 -1
- package/plugins/theme.js +4 -0
- package/vue-components/v2/card/PaymentCards.vue +11 -2
- package/vue-components/v2/preloader/Preloader.vue +5 -5
- package/vue-components/v2/table/table-cell/CellValue.vue +10 -1
- package/vue-components/v3/table/table-cell/CellValue.vue +9 -0
|
@@ -4,8 +4,8 @@ $dark-bg-light: var(--dark-bg-light);
|
|
|
4
4
|
.is-dark-theme {
|
|
5
5
|
--ac-bg: var(--dark-bg);
|
|
6
6
|
--ac-white: #21272e;
|
|
7
|
-
--ac-black:
|
|
8
|
-
--ac-text-heading:
|
|
7
|
+
--ac-black: var(--ac-white-text);
|
|
8
|
+
--ac-text-heading: var(--ac-white-text);
|
|
9
9
|
--ac-text: #98a6b4;
|
|
10
10
|
--ac-gray-light: #424242;
|
|
11
11
|
--ac-gray-lightest: #777777;
|
|
@@ -39,6 +39,10 @@ $dark-bg-light: var(--dark-bg-light);
|
|
|
39
39
|
.ac-menu-content {
|
|
40
40
|
background-color: var(--dark-bg-light);
|
|
41
41
|
|
|
42
|
+
ul {
|
|
43
|
+
background-color: var(--dark-bg-light);
|
|
44
|
+
}
|
|
45
|
+
|
|
42
46
|
&::after {
|
|
43
47
|
--ac-white: var(--dark-bg-light);
|
|
44
48
|
}
|
|
@@ -59,14 +63,14 @@ $dark-bg-light: var(--dark-bg-light);
|
|
|
59
63
|
}
|
|
60
64
|
|
|
61
65
|
h6.wizard-title.has-line:after {
|
|
62
|
-
--ac-input-bg-color:
|
|
66
|
+
--ac-input-bg-color: $ac-color-value;
|
|
63
67
|
}
|
|
64
68
|
|
|
65
69
|
.ac-payment-card,
|
|
66
70
|
.ac-single-card,
|
|
67
71
|
.button.ac-button,
|
|
68
72
|
.option-dots {
|
|
69
|
-
--ac-white:
|
|
73
|
+
--ac-white: var(--ac-white-text);
|
|
70
74
|
}
|
|
71
75
|
|
|
72
76
|
.tabs {
|
|
@@ -136,25 +140,105 @@ $dark-bg-light: var(--dark-bg-light);
|
|
|
136
140
|
}
|
|
137
141
|
|
|
138
142
|
// multiselect
|
|
143
|
+
|
|
144
|
+
.multiselect__content-wrapper {
|
|
145
|
+
background: var(--dark-bg-light);
|
|
146
|
+
|
|
147
|
+
.multiselect__option--selected {
|
|
148
|
+
background: var(--dark-bg);
|
|
149
|
+
color: var(--ac-white-text);
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
|
|
139
153
|
.multi-select-wrapper {
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
// }
|
|
154
|
+
background: var(--dark-bg-light);
|
|
155
|
+
|
|
143
156
|
.multiselect__content-wrapper {
|
|
144
157
|
background-color: var(--dark-bg-light);
|
|
145
158
|
background: var(--dark-bg-light);
|
|
146
159
|
|
|
160
|
+
// scroll
|
|
161
|
+
&::-webkit-scrollbar {
|
|
162
|
+
border-radius: 50px;
|
|
163
|
+
width: 3px;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
&::-moz-scrollbar {
|
|
167
|
+
border-radius: 50px;
|
|
168
|
+
width: 3px;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
&::-ms-scrollbar {
|
|
172
|
+
border-radius: 50px;
|
|
173
|
+
width: 3px;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
&::-webkit-scrollbar:hover {
|
|
177
|
+
width: 7px;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
&::-moz-scrollbar:hover {
|
|
181
|
+
width: 7px;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
&::-ms-scrollbar:hover {
|
|
185
|
+
width: 7px;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
&::-webkit-scrollbar-thumb {
|
|
189
|
+
background-color: $dark-bg-light;
|
|
190
|
+
border-radius: 50px;
|
|
191
|
+
height: 2px !important;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
&::-moz-scrollbar-thumb {
|
|
195
|
+
background-color: $dark-bg-light;
|
|
196
|
+
border-radius: 50px;
|
|
197
|
+
height: 2px !important;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
&::-ms-scrollbar-thumb {
|
|
201
|
+
background-color: $dark-bg-light;
|
|
202
|
+
border-radius: 50px;
|
|
203
|
+
height: 2px !important;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
&::-webkit-scrollbar-thumb:hover {
|
|
207
|
+
background-color: $dark-bg-light;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
&::-moz-scrollbar-thumb:hover {
|
|
211
|
+
background-color: $dark-bg-light;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
&::-ms-scrollbar-thumb:hover {
|
|
215
|
+
background-color: $dark-bg-light;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
&:hover::-webkit-scrollbar-corner {
|
|
219
|
+
height: 40px;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
&:hover::-moz-scrollbar-corner {
|
|
223
|
+
height: 40px;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
&:hover::-ms-scrollbar-corner {
|
|
227
|
+
height: 40px;
|
|
228
|
+
}
|
|
229
|
+
// scroll
|
|
230
|
+
|
|
147
231
|
.multiselect__content .multiselect__element .multiselect__option {
|
|
148
|
-
color:
|
|
232
|
+
color: var(--ac-white-text);
|
|
149
233
|
}
|
|
150
234
|
|
|
151
235
|
.multiselect__option--group {
|
|
152
|
-
color:
|
|
236
|
+
color: var(--ac-white-text);
|
|
153
237
|
background-color: var(--dark-bg-light);
|
|
154
238
|
}
|
|
155
239
|
|
|
156
240
|
.multiselect__option--selected {
|
|
157
|
-
color:
|
|
241
|
+
color: var(--ac-white-text);
|
|
158
242
|
background-color: var(--dark-bg-light);
|
|
159
243
|
}
|
|
160
244
|
}
|
|
@@ -0,0 +1,214 @@
|
|
|
1
|
+
.ac-terminal {
|
|
2
|
+
position: fixed;
|
|
3
|
+
width: calc(100% - 270px);
|
|
4
|
+
bottom: 0;
|
|
5
|
+
// background-color: #3a3a3a;
|
|
6
|
+
background-color: $ac-white;
|
|
7
|
+
color: $ac-white;
|
|
8
|
+
font-size: 13px;
|
|
9
|
+
height: 320px;
|
|
10
|
+
z-index: 999;
|
|
11
|
+
transition: 0.3s ease-in-out;
|
|
12
|
+
&.is-collapsed {
|
|
13
|
+
height: 40px !important;
|
|
14
|
+
bottom: 0px;
|
|
15
|
+
.terminal-setting,
|
|
16
|
+
.terminal-body {
|
|
17
|
+
opacity: 0;
|
|
18
|
+
visibility: hidden;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
.resize-handler {
|
|
22
|
+
width: 100%;
|
|
23
|
+
position: absolute;
|
|
24
|
+
background: transparent;
|
|
25
|
+
z-index: 9;
|
|
26
|
+
cursor: row-resize;
|
|
27
|
+
top: -15px;
|
|
28
|
+
&:hover {
|
|
29
|
+
border-bottom: 3px solid $ac-white-light;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
.terminal-header {
|
|
33
|
+
border-top: 1px solid $ac-white-lighter;
|
|
34
|
+
box-shadow: 1px -2px 5px 1px rgba(0, 0, 0, 0.08%);
|
|
35
|
+
.tabs {
|
|
36
|
+
padding: 0 20px 0 20px;
|
|
37
|
+
background-color: $ac-white-lighter;
|
|
38
|
+
overflow: inherit;
|
|
39
|
+
height: 40px;
|
|
40
|
+
ul {
|
|
41
|
+
border-bottom: none;
|
|
42
|
+
padding-left: 0;
|
|
43
|
+
max-width: 1340px;
|
|
44
|
+
overflow-x: auto;
|
|
45
|
+
overflow-y: hidden;
|
|
46
|
+
li {
|
|
47
|
+
a {
|
|
48
|
+
margin-bottom: 0 !important;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
&::-webkit-scrollbar {
|
|
52
|
+
border-radius: 50px;
|
|
53
|
+
height: 3px;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
&::-webkit-scrollbar:hover {
|
|
57
|
+
height: 7px;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
&::-webkit-scrollbar-thumb {
|
|
61
|
+
background-color: $ac-gray-light;
|
|
62
|
+
border-radius: 50px;
|
|
63
|
+
height: 2px !important;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
&::-webkit-scrollbar-thumb:hover {
|
|
67
|
+
background-color: $ac-gray-light;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
&:hover::-webkit-scrollbar-corner {
|
|
71
|
+
height: 40px;
|
|
72
|
+
}
|
|
73
|
+
.is-active {
|
|
74
|
+
box-shadow: none !important;
|
|
75
|
+
margin-right: 0 !important;
|
|
76
|
+
&:after {
|
|
77
|
+
height: 2px;
|
|
78
|
+
}
|
|
79
|
+
a {
|
|
80
|
+
background-color: $ac-white;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
li:not(.is-active) {
|
|
84
|
+
margin-right: -1px;
|
|
85
|
+
border-right: 1px solid $ac-white-lighter;
|
|
86
|
+
}
|
|
87
|
+
li {
|
|
88
|
+
a {
|
|
89
|
+
margin-bottom: 0px;
|
|
90
|
+
font-size: 13px;
|
|
91
|
+
border-radius: 0;
|
|
92
|
+
padding: 5px 10px 5px 20px;
|
|
93
|
+
border: none;
|
|
94
|
+
height: 40px;
|
|
95
|
+
.name-of-tab {
|
|
96
|
+
width: 120px;
|
|
97
|
+
overflow: hidden;
|
|
98
|
+
}
|
|
99
|
+
.terminal-icon {
|
|
100
|
+
img {
|
|
101
|
+
width: 15px;
|
|
102
|
+
margin-right: 10px;
|
|
103
|
+
margin-top: 5px;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.button {
|
|
108
|
+
img {
|
|
109
|
+
width: 10px;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
.options-items {
|
|
116
|
+
top: 15px;
|
|
117
|
+
left: 40px;
|
|
118
|
+
.items-inner {
|
|
119
|
+
border: none;
|
|
120
|
+
li {
|
|
121
|
+
border: none;
|
|
122
|
+
border-right: none !important;
|
|
123
|
+
border-bottom: 1px solid $ac-white-lighter;
|
|
124
|
+
width: 100%;
|
|
125
|
+
&:last-child {
|
|
126
|
+
border-bottom: none;
|
|
127
|
+
}
|
|
128
|
+
a {
|
|
129
|
+
font-size: 13px;
|
|
130
|
+
padding: 10px 20px;
|
|
131
|
+
&:hover {
|
|
132
|
+
color: $ac-primary !important;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.right-control {
|
|
140
|
+
.button {
|
|
141
|
+
.fa {
|
|
142
|
+
font-size: 20px;
|
|
143
|
+
}
|
|
144
|
+
img {
|
|
145
|
+
width: 11px;
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
.terminal-setting {
|
|
152
|
+
background-color: $ac-color-value;
|
|
153
|
+
padding: 5px 20px;
|
|
154
|
+
|
|
155
|
+
.left-content {
|
|
156
|
+
.ac-select-box-wrapper {
|
|
157
|
+
margin-right: 10px;
|
|
158
|
+
.multi-select-wrapper {
|
|
159
|
+
min-width: 210px;
|
|
160
|
+
}
|
|
161
|
+
.multiselect .multiselect__tags .multiselect__input,
|
|
162
|
+
.multiselect .multiselect__tags .multiselect__single {
|
|
163
|
+
background-color: $ac-color-value;
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.right-content {
|
|
169
|
+
.status-message {
|
|
170
|
+
&.is-success {
|
|
171
|
+
color: #27b064;
|
|
172
|
+
}
|
|
173
|
+
&.is-failed {
|
|
174
|
+
color: #ea3d2f;
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
.terminal-body {
|
|
180
|
+
p {
|
|
181
|
+
font-family: Fira Code;
|
|
182
|
+
.code-static {
|
|
183
|
+
color: #0ff05c;
|
|
184
|
+
font-weight: 500;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.code-input {
|
|
188
|
+
color: #acd9ff;
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
.button {
|
|
193
|
+
&.is-transparent {
|
|
194
|
+
&:hover {
|
|
195
|
+
background-color: $ac-white-light;
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
.multiselect.multiselect--active {
|
|
200
|
+
.multiselect__tags {
|
|
201
|
+
border: 1px solid $ac-white !important;
|
|
202
|
+
.multiselect__input {
|
|
203
|
+
color: $ac-white !important;
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
.multiselect .multiselect__tags {
|
|
208
|
+
background-color: $ac-color-text;
|
|
209
|
+
border: 1px solid $ac-color-value;
|
|
210
|
+
span {
|
|
211
|
+
color: $ac-white;
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
}
|
|
@@ -359,11 +359,13 @@
|
|
|
359
359
|
.ac-options.is-right {
|
|
360
360
|
.option-dots {
|
|
361
361
|
transition: 0.3s;
|
|
362
|
+
|
|
362
363
|
i.fa {
|
|
363
364
|
&.fa-angle-left {
|
|
364
365
|
font-size: 18px;
|
|
365
366
|
}
|
|
366
367
|
}
|
|
368
|
+
|
|
367
369
|
&:active {
|
|
368
370
|
i.fa {
|
|
369
371
|
background-color: $ac-white-lighter;
|
|
@@ -374,52 +376,63 @@
|
|
|
374
376
|
border-radius: 50%;
|
|
375
377
|
}
|
|
376
378
|
}
|
|
379
|
+
|
|
377
380
|
&:hover {
|
|
378
|
-
color:
|
|
381
|
+
color: $ac-primary !important;
|
|
379
382
|
transform: scale(1.2);
|
|
380
383
|
}
|
|
381
384
|
}
|
|
382
385
|
}
|
|
386
|
+
|
|
383
387
|
.is-cluster-logo {
|
|
384
388
|
display: flex;
|
|
385
389
|
align-items: center;
|
|
386
390
|
margin-left: -8px;
|
|
387
391
|
padding: 5px;
|
|
388
392
|
}
|
|
393
|
+
|
|
389
394
|
.multiselect {
|
|
390
395
|
height: 50px;
|
|
391
396
|
width: 234px;
|
|
392
397
|
left: 0px;
|
|
393
398
|
top: -5px;
|
|
399
|
+
|
|
394
400
|
.multiselect__select {
|
|
395
401
|
height: 50px;
|
|
396
402
|
top: 4px;
|
|
397
403
|
}
|
|
404
|
+
|
|
398
405
|
.multiselect__tags {
|
|
399
406
|
border: none !important;
|
|
400
407
|
background-color: $ac-bg-light-gray;
|
|
401
408
|
min-height: 54px;
|
|
402
409
|
border-radius: 0;
|
|
410
|
+
|
|
403
411
|
.multiselect__placeholder {
|
|
404
412
|
padding-top: 12px !important;
|
|
405
413
|
font-size: 14px;
|
|
406
414
|
}
|
|
415
|
+
|
|
407
416
|
.multiselect__input {
|
|
408
417
|
background-color: $ac-bg-light-gray !important;
|
|
409
418
|
top: 13px;
|
|
419
|
+
|
|
410
420
|
&::placeholder {
|
|
411
421
|
font-size: 12px;
|
|
412
422
|
font-weight: 500;
|
|
413
423
|
}
|
|
414
424
|
}
|
|
415
425
|
}
|
|
426
|
+
|
|
416
427
|
.multiselect__single {
|
|
417
428
|
background-color: $ac-bg-light-gray !important;
|
|
418
429
|
top: 14px !important;
|
|
430
|
+
|
|
419
431
|
img {
|
|
420
432
|
width: 20px;
|
|
421
433
|
margin-right: 8px;
|
|
422
434
|
}
|
|
435
|
+
|
|
423
436
|
span {
|
|
424
437
|
span {
|
|
425
438
|
overflow: hidden;
|
|
@@ -433,19 +446,25 @@
|
|
|
433
446
|
}
|
|
434
447
|
}
|
|
435
448
|
}
|
|
449
|
+
|
|
436
450
|
.multiselect__content-wrapper {
|
|
451
|
+
border: 1px solid $ac-white-light;
|
|
452
|
+
|
|
437
453
|
.multiselect__content {
|
|
438
454
|
.multiselect__element {
|
|
439
455
|
.multiselect__option {
|
|
440
456
|
display: flex;
|
|
441
457
|
align-items: center;
|
|
442
458
|
font-size: 14px;
|
|
459
|
+
|
|
443
460
|
img {
|
|
444
461
|
width: 25px;
|
|
445
462
|
}
|
|
463
|
+
|
|
446
464
|
p {
|
|
447
465
|
font-weight: 500;
|
|
448
466
|
}
|
|
467
|
+
|
|
449
468
|
.location {
|
|
450
469
|
font-weight: 400;
|
|
451
470
|
opacity: 0.8;
|
|
@@ -455,6 +474,7 @@
|
|
|
455
474
|
}
|
|
456
475
|
}
|
|
457
476
|
}
|
|
477
|
+
|
|
458
478
|
// cluster switcher end
|
|
459
479
|
/****************************************
|
|
460
480
|
Responsive Classes
|
package/package.json
CHANGED
package/plugins/theme.js
CHANGED
|
@@ -136,3 +136,7 @@ export function getFontHSL() {
|
|
|
136
136
|
lightness,
|
|
137
137
|
};
|
|
138
138
|
}
|
|
139
|
+
export const loaderLightThemePrimaryColor = "#f5f7f9";
|
|
140
|
+
export const loaderDarkThemePrimaryColor = "#2e323c";
|
|
141
|
+
export const loaderLightThemeSecondaryColor = "#ecebeb";
|
|
142
|
+
export const loaderDarkThemeSecondaryColor = "#21272e";
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
<content-loader
|
|
6
6
|
:height="235"
|
|
7
7
|
:speed="2"
|
|
8
|
-
:
|
|
9
|
-
:
|
|
8
|
+
:primaryColor="primaryColor"
|
|
9
|
+
:secondaryColor="secondaryColor"
|
|
10
10
|
/>
|
|
11
11
|
</div>
|
|
12
12
|
<!-- loader end -->
|
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
</template>
|
|
21
21
|
<script>
|
|
22
22
|
import { ContentLoader } from "vue-content-loader";
|
|
23
|
+
import {loaderLightThemePrimaryColor, loaderDarkThemePrimaryColor, loaderLightThemeSecondaryColor, loaderDarkThemeSecondaryColor} from "@appscode/design-system/plugins/theme";
|
|
23
24
|
|
|
24
25
|
export default {
|
|
25
26
|
components: {
|
|
@@ -31,5 +32,13 @@ export default {
|
|
|
31
32
|
default: false,
|
|
32
33
|
},
|
|
33
34
|
},
|
|
35
|
+
computed: {
|
|
36
|
+
primaryColor() {
|
|
37
|
+
return document.documentElement.classList.contains("is-dark-theme") ? loaderDarkThemePrimaryColor : loaderLightThemePrimaryColor;
|
|
38
|
+
},
|
|
39
|
+
secondaryColor() {
|
|
40
|
+
return document.documentElement.classList.contains("is-dark-theme") ? loaderDarkThemeSecondaryColor : loaderLightThemeSecondaryColor;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
34
43
|
};
|
|
35
44
|
</script>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div
|
|
3
|
-
class="is-flex is-justify-content-center is-align-items-center is-flex-direction-column"
|
|
3
|
+
class="is-flex is-justify-content-center is-align-items-center is-flex-direction-column ac-preloader"
|
|
4
4
|
style="height: calc(100vh - 200px);"
|
|
5
5
|
>
|
|
6
6
|
<span v-if="showSpinner" class="spinner"></span>
|
|
@@ -15,12 +15,12 @@ export default {
|
|
|
15
15
|
props: {
|
|
16
16
|
showSpinner: {
|
|
17
17
|
type: Boolean,
|
|
18
|
-
default: true
|
|
18
|
+
default: true
|
|
19
19
|
},
|
|
20
20
|
message: {
|
|
21
21
|
type: String,
|
|
22
|
-
default: "Fetching! Please wait for sometime..."
|
|
23
|
-
}
|
|
24
|
-
}
|
|
22
|
+
default: "Fetching! Please wait for sometime..."
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
25
|
};
|
|
26
26
|
</script>
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div v-if="isLoaderActive" ref="cellLoaderDiv" :style="{ maxWidth: '300px' }">
|
|
3
|
-
<content-loader :height="10" :width="computedCellWidth || 300"
|
|
3
|
+
<content-loader :height="10" :width="computedCellWidth || 300" :primaryColor="primaryColor"
|
|
4
|
+
:secondaryColor="secondaryColor" />
|
|
4
5
|
</div>
|
|
5
6
|
<div v-else class="haha" ref="cellDiv">
|
|
6
7
|
<object-cell
|
|
@@ -24,6 +25,8 @@
|
|
|
24
25
|
</template>
|
|
25
26
|
|
|
26
27
|
<script>
|
|
28
|
+
import {loaderLightThemePrimaryColor, loaderDarkThemePrimaryColor, loaderLightThemeSecondaryColor, loaderDarkThemeSecondaryColor} from "@appscode/design-system/plugins/theme";
|
|
29
|
+
|
|
27
30
|
export default {
|
|
28
31
|
props: {
|
|
29
32
|
isLoaderActive: {
|
|
@@ -56,6 +59,12 @@ export default {
|
|
|
56
59
|
maxCharacterLength() {
|
|
57
60
|
return Math.ceil(this.computedCellWidth / 8);
|
|
58
61
|
},
|
|
62
|
+
primaryColor() {
|
|
63
|
+
return document.documentElement.classList.contains("is-dark-theme") ? loaderDarkThemePrimaryColor : loaderLightThemePrimaryColor;
|
|
64
|
+
},
|
|
65
|
+
secondaryColor() {
|
|
66
|
+
return document.documentElement.classList.contains("is-dark-theme") ? loaderDarkThemeSecondaryColor : loaderLightThemeSecondaryColor;
|
|
67
|
+
}
|
|
59
68
|
},
|
|
60
69
|
|
|
61
70
|
data() {
|
|
@@ -4,6 +4,8 @@
|
|
|
4
4
|
:view-box="`0 0 ${computedCellWidth || 300} 10`"
|
|
5
5
|
:speed="2"
|
|
6
6
|
:key="computedCellWidth"
|
|
7
|
+
:primaryColor="primaryColor"
|
|
8
|
+
:secondaryColor="secondaryColor"
|
|
7
9
|
/>
|
|
8
10
|
</div>
|
|
9
11
|
<div v-else class="haha" ref="cellDiv">
|
|
@@ -29,6 +31,7 @@
|
|
|
29
31
|
|
|
30
32
|
<script>
|
|
31
33
|
import { defineComponent, defineAsyncComponent } from "vue";
|
|
34
|
+
import { loaderLightThemePrimaryColor, loaderDarkThemePrimaryColor, loaderLightThemeSecondaryColor, loaderDarkThemeSecondaryColor } from "@appscode/design-system/plugins/theme";
|
|
32
35
|
|
|
33
36
|
export default defineComponent({
|
|
34
37
|
props: {
|
|
@@ -67,6 +70,12 @@ export default defineComponent({
|
|
|
67
70
|
maxCharacterLength() {
|
|
68
71
|
return Math.ceil(this.computedCellWidth / 8);
|
|
69
72
|
},
|
|
73
|
+
primaryColor() {
|
|
74
|
+
return document.documentElement.classList.contains("is-dark-theme") ? loaderDarkThemePrimaryColor : loaderLightThemePrimaryColor;
|
|
75
|
+
},
|
|
76
|
+
secondaryColor() {
|
|
77
|
+
return document.documentElement.classList.contains("is-dark-theme") ? loaderDarkThemeSecondaryColor : loaderLightThemeSecondaryColor;
|
|
78
|
+
}
|
|
70
79
|
},
|
|
71
80
|
|
|
72
81
|
data() {
|