@globalbrain/sefirot 2.48.0 → 3.0.0

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 (34) hide show
  1. package/lib/components/SActionList.vue +23 -0
  2. package/lib/components/SActionListItem.vue +64 -0
  3. package/lib/components/SAvatar.vue +1 -1
  4. package/lib/components/SButton.vue +378 -392
  5. package/lib/components/SCard.vue +5 -5
  6. package/lib/components/SCardHeader.vue +1 -1
  7. package/lib/components/SCardHeaderTitle.vue +4 -4
  8. package/lib/components/SContent.vue +2 -2
  9. package/lib/components/SDescItem.vue +1 -1
  10. package/lib/components/SDescLink.vue +2 -2
  11. package/lib/components/SDescText.vue +2 -2
  12. package/lib/components/SDropdown.vue +1 -1
  13. package/lib/components/SDropdownSectionFilter.vue +8 -9
  14. package/lib/components/SDropdownSectionMenu.vue +1 -1
  15. package/lib/components/SHeadLead.vue +2 -2
  16. package/lib/components/SHeadTitle.vue +4 -4
  17. package/lib/components/SInputBase.vue +5 -5
  18. package/lib/components/SInputCheckbox.vue +5 -5
  19. package/lib/components/SInputRadio.vue +4 -4
  20. package/lib/components/SInputSegments.vue +132 -0
  21. package/lib/components/SInputSegmentsOption.vue +150 -0
  22. package/lib/components/SSheet.vue +1 -1
  23. package/lib/components/SState.vue +7 -7
  24. package/lib/components/STableCell.vue +1 -1
  25. package/lib/components/STableCellAvatars.vue +1 -1
  26. package/lib/components/STableColumn.vue +1 -1
  27. package/lib/components/STableHeader.vue +1 -1
  28. package/lib/components/STableHeaderActionItem.vue +1 -1
  29. package/lib/composables/Table.ts +6 -5
  30. package/lib/styles/base.css +1 -1
  31. package/lib/styles/bootstrap.css +1 -0
  32. package/lib/styles/variables-deprecated.css +336 -0
  33. package/lib/styles/variables.css +581 -577
  34. package/package.json +1 -1
package/lib/components/SButton.vue CHANGED
@@ -12,8 +12,9 @@ export type Size = 'mini' | 'small' | 'medium' | 'large' | 'jumbo'
12
12
  export type Type = 'fill' | 'outline' | 'text'
13
13
 
14
14
  export type Mode =
15
- | 'neutral'
15
+ | 'default'
16
16
  | 'mute'
17
+ | 'neutral'
17
18
  | 'white'
18
19
  | 'black'
19
20
  | 'info'
@@ -54,7 +55,7 @@ const emit = defineEmits<{
54
55
  const classes = computed(() => [
55
56
  props.size ?? 'medium',
56
57
  props.type ?? 'fill',
57
- props.mode ?? 'neutral',
58
+ props.mode ?? 'default',
58
59
  { 'has-label': props.label },
59
60
  { 'has-icon': props.icon },
60
61
  { loading: props.loading },
@@ -128,11 +129,62 @@ function handleClick(): void {
128
129
  align-items: center;
129
130
  letter-spacing: 0;
130
131
  text-align: center;
131
- border: 1px solid transparent;
132
+ border: 1px solid var(--button-border-color);
132
133
  border-radius: 6px;
134
+ color: var(--button-text-color);
135
+ background-color: var(--button-bg-color);
133
136
  overflow: hidden;
134
137
  white-space: nowrap;
135
138
  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
139
+
140
+ &:hover {
141
+ border-color: var(--button-hover-border-color);
142
+ color: var(--button-hover-text-color);
143
+ background-color: var(--button-hover-bg-color);
144
+ }
145
+
146
+ &:active {
147
+ border-color: var(--button-active-border-color);
148
+ color: var(--button-active-text-color);
149
+ background-color: var(--button-active-bg-color);
150
+ }
151
+ }
152
+
153
+ .content {
154
+ display: flex;
155
+ justify-content: center;
156
+ align-items: center;
157
+ height: 100%;
158
+ transition: opacity 0.25s, transform 0.25s;
159
+ }
160
+
161
+ .icon,
162
+ .label {
163
+ color: var(--button-content-color);
164
+ }
165
+
166
+ .loader {
167
+ position: absolute;
168
+ top: 50%;
169
+ left: 50%;
170
+ z-index: 10;
171
+ width: 32px;
172
+ height: 32px;
173
+ color: var(--c-text-1);
174
+ transform: translate(-50%, -50%);
175
+ transition: opacity 0.25s, transform 0.25s;
176
+ }
177
+
178
+ .loader.fade-enter-from,
179
+ .loader.fade-leave-to {
180
+ opacity: 0;
181
+ transform: translate(-50%, -50%) scale(1.5);
182
+ }
183
+
184
+ .loader-icon {
185
+ width: 32px;
186
+ height: 32px;
187
+ color: var(--button-loader-color);
136
188
  }
137
189
 
138
190
  .SButton.mini {
@@ -195,514 +247,483 @@ function handleClick(): void {
195
247
  .icon-svg { width: 20px; height: 20px; }
196
248
  }
197
249
 
198
- .SButton.fill {
199
- font-weight: 500;
250
+ .SButton.disabled {
251
+ border-color: var(--button-disabled-border-color);
252
+ color: var(--button-disabled-text-color);
253
+ background-color: var(--button-disabled-bg-color);
254
+ cursor: not-allowed;
200
255
 
201
- &.neutral {
202
- border-color: var(--button-fill-neutral-border-color);
203
- color: var(--button-fill-neutral-text-color);
204
- background-color: var(--button-fill-neutral-bg-color);
256
+ &:hover,
257
+ &:active {
258
+ border-color: var(--button-disabled-border-color);
259
+ color: var(--button-disabled-text-color);
260
+ background-color: var(--button-disabled-bg-color);
261
+ }
262
+ }
205
263
 
206
- &:hover { background-color: var(--button-fill-neutral-hover-bg-color); }
207
- &:active { background-color: var(--button-fill-neutral-active-bg-color); }
264
+ .SButton.disabled .icon,
265
+ .SButton.disabled .label {
266
+ color: var(--button-disabled-content-color);
267
+ }
208
268
 
209
- & .loader-icon { color: var(--button-fill-neutral-loader-color); }
269
+ .SButton.fill {
270
+ font-weight: 500;
271
+
272
+ &.default {
273
+ --button-border-color: var(--button-fill-default-border-color);
274
+ --button-text-color: var(--button-fill-default-text-color);
275
+ --button-bg-color: var(--button-fill-default-bg-color);
276
+ --button-hover-border-color: var(--button-fill-default-hover-border-color);
277
+ --button-hover-text-color: var(--button-fill-default-hover-text-color);
278
+ --button-hover-bg-color: var(--button-fill-default-hover-bg-color);
279
+ --button-active-border-color: var(--button-fill-default-active-border-color);
280
+ --button-active-text-color: var(--button-fill-default-active-text-color);
281
+ --button-active-bg-color: var(--button-fill-default-active-bg-color);
282
+ --button-loader-color: var(--button-fill-default-loader-color);
283
+ --button-disabled-border-color: var(--button-fill-default-disabled-border-color);
284
+ --button-disabled-text-color: var(--button-fill-default-disabled-text-color);
285
+ --button-disabled-bg-color: var(--button-fill-default-disabled-bg-color);
210
286
  }
211
287
 
212
288
  &.mute {
213
- border-color: var(--button-fill-mute-border-color);
214
- color: var(--button-fill-mute-text-color);
215
- background-color: var(--button-fill-mute-bg-color);
216
-
217
- &:hover { background-color: var(--button-fill-mute-hover-bg-color); }
218
- &:active { background-color: var(--button-fill-mute-active-bg-color); }
289
+ --button-border-color: var(--button-fill-mute-border-color);
290
+ --button-text-color: var(--button-fill-mute-text-color);
291
+ --button-bg-color: var(--button-fill-mute-bg-color);
292
+ --button-hover-border-color: var(--button-fill-mute-hover-border-color);
293
+ --button-hover-text-color: var(--button-fill-mute-hover-text-color);
294
+ --button-hover-bg-color: var(--button-fill-mute-hover-bg-color);
295
+ --button-active-border-color: var(--button-fill-mute-active-border-color);
296
+ --button-active-text-color: var(--button-fill-mute-active-text-color);
297
+ --button-active-bg-color: var(--button-fill-mute-active-bg-color);
298
+ --button-loader-color: var(--button-fill-mute-loader-color);
299
+ --button-disabled-border-color: var(--button-fill-mute-disabled-border-color);
300
+ --button-disabled-text-color: var(--button-fill-mute-disabled-text-color);
301
+ --button-disabled-bg-color: var(--button-fill-mute-disabled-bg-color);
302
+ }
219
303
 
220
- & .loader-icon { color: var(--button-fill-mute-loader-color); }
304
+ &.neutral {
305
+ --button-border-color: var(--button-fill-neutral-border-color);
306
+ --button-text-color: var(--button-fill-neutral-text-color);
307
+ --button-bg-color: var(--button-fill-neutral-bg-color);
308
+ --button-hover-border-color: var(--button-fill-neutral-hover-border-color);
309
+ --button-hover-text-color: var(--button-fill-neutral-hover-text-color);
310
+ --button-hover-bg-color: var(--button-fill-neutral-hover-bg-color);
311
+ --button-active-border-color: var(--button-fill-neutral-active-border-color);
312
+ --button-active-text-color: var(--button-fill-neutral-active-text-color);
313
+ --button-active-bg-color: var(--button-fill-neutral-active-bg-color);
314
+ --button-loader-color: var(--button-fill-neutral-loader-color);
315
+ --button-disabled-border-color: var(--button-fill-neutral-disabled-border-color);
316
+ --button-disabled-text-color: var(--button-fill-neutral-disabled-text-color);
317
+ --button-disabled-bg-color: var(--button-fill-neutral-disabled-bg-color);
221
318
  }
222
319
 
223
320
  &.white {
224
- border-color: var(--button-fill-white-border-color);
225
- color: var(--button-fill-white-text-color);
226
- background-color: var(--button-fill-white-bg-color);
227
-
228
- &:hover { background-color: var(--button-fill-white-hover-bg-color); }
229
- &:active { background-color: var(--button-fill-white-active-bg-color); }
230
-
231
- & .loader-icon { color: var(--button-fill-white-loader-color); }
321
+ --button-border-color: var(--button-fill-white-border-color);
322
+ --button-text-color: var(--button-fill-white-text-color);
323
+ --button-bg-color: var(--button-fill-white-bg-color);
324
+ --button-hover-border-color: var(--button-fill-white-hover-border-color);
325
+ --button-hover-text-color: var(--button-fill-white-hover-text-color);
326
+ --button-hover-bg-color: var(--button-fill-white-hover-bg-color);
327
+ --button-active-border-color: var(--button-fill-white-active-border-color);
328
+ --button-active-text-color: var(--button-fill-white-active-text-color);
329
+ --button-active-bg-color: var(--button-fill-white-active-bg-color);
330
+ --button-loader-color: var(--button-fill-white-loader-color);
331
+ --button-disabled-border-color: var(--button-fill-white-disabled-border-color);
332
+ --button-disabled-text-color: var(--button-fill-white-disabled-text-color);
333
+ --button-disabled-bg-color: var(--button-fill-white-disabled-bg-color);
232
334
  }
233
335
 
234
336
  &.black {
235
- border-color: var(--button-fill-black-border-color);
236
- color: var(--button-fill-black-text-color);
237
- background-color: var(--button-fill-black-bg-color);
238
-
239
- &:hover { background-color: var(--button-fill-black-hover-bg-color); }
240
- &:active { background-color: var(--button-fill-black-active-bg-color); }
241
-
242
- & .loader-icon { color: var(--button-fill-black-loader-color); }
337
+ --button-border-color: var(--button-fill-black-border-color);
338
+ --button-text-color: var(--button-fill-black-text-color);
339
+ --button-bg-color: var(--button-fill-black-bg-color);
340
+ --button-hover-border-color: var(--button-fill-black-hover-border-color);
341
+ --button-hover-text-color: var(--button-fill-black-hover-text-color);
342
+ --button-hover-bg-color: var(--button-fill-black-hover-bg-color);
343
+ --button-active-border-color: var(--button-fill-black-active-border-color);
344
+ --button-active-text-color: var(--button-fill-black-active-text-color);
345
+ --button-active-bg-color: var(--button-fill-black-active-bg-color);
346
+ --button-loader-color: var(--button-fill-black-loader-color);
347
+ --button-disabled-border-color: var(--button-fill-black-disabled-border-color);
348
+ --button-disabled-text-color: var(--button-fill-black-disabled-text-color);
349
+ --button-disabled-bg-color: var(--button-fill-black-disabled-bg-color);
243
350
  }
244
351
 
245
352
  &.info {
246
- border-color: var(--button-fill-info-border-color);
247
- color: var(--button-fill-info-text-color);
248
- background-color: var(--button-fill-info-bg-color);
249
-
250
- &:hover { background-color: var(--button-fill-info-hover-bg-color); }
251
- &:active { background-color: var(--button-fill-info-active-bg-color); }
252
-
253
- & .loader-icon { color: var(--button-fill-info-loader-color); }
353
+ --button-border-color: var(--button-fill-info-border-color);
354
+ --button-text-color: var(--button-fill-info-text-color);
355
+ --button-bg-color: var(--button-fill-info-bg-color);
356
+ --button-hover-border-color: var(--button-fill-info-hover-border-color);
357
+ --button-hover-text-color: var(--button-fill-info-hover-text-color);
358
+ --button-hover-bg-color: var(--button-fill-info-hover-bg-color);
359
+ --button-active-border-color: var(--button-fill-info-active-border-color);
360
+ --button-active-text-color: var(--button-fill-info-active-text-color);
361
+ --button-active-bg-color: var(--button-fill-info-active-bg-color);
362
+ --button-loader-color: var(--button-fill-info-loader-color);
363
+ --button-disabled-border-color: var(--button-fill-info-disabled-border-color);
364
+ --button-disabled-text-color: var(--button-fill-info-disabled-text-color);
365
+ --button-disabled-bg-color: var(--button-fill-info-disabled-bg-color);
254
366
  }
255
367
 
256
368
  &.success {
257
- border-color: var(--button-fill-success-border-color);
258
- color: var(--button-fill-success-text-color);
259
- background-color: var(--button-fill-success-bg-color);
260
-
261
- &:hover { background-color: var(--button-fill-success-hover-bg-color); }
262
- &:active { background-color: var(--button-fill-success-active-bg-color); }
263
-
264
- & .loader-icon { color: var(--button-fill-success-loader-color); }
369
+ --button-border-color: var(--button-fill-success-border-color);
370
+ --button-text-color: var(--button-fill-success-text-color);
371
+ --button-bg-color: var(--button-fill-success-bg-color);
372
+ --button-hover-border-color: var(--button-fill-success-hover-border-color);
373
+ --button-hover-text-color: var(--button-fill-success-hover-text-color);
374
+ --button-hover-bg-color: var(--button-fill-success-hover-bg-color);
375
+ --button-active-border-color: var(--button-fill-success-active-border-color);
376
+ --button-active-text-color: var(--button-fill-success-active-text-color);
377
+ --button-active-bg-color: var(--button-fill-success-active-bg-color);
378
+ --button-loader-color: var(--button-fill-success-loader-color);
379
+ --button-disabled-border-color: var(--button-fill-success-disabled-border-color);
380
+ --button-disabled-text-color: var(--button-fill-success-disabled-text-color);
381
+ --button-disabled-bg-color: var(--button-fill-success-disabled-bg-color);
265
382
  }
266
383
 
267
384
  &.warning {
268
- border-color: var(--button-fill-warning-border-color);
269
- color: var(--button-fill-warning-text-color);
270
- background-color: var(--button-fill-warning-bg-color);
271
-
272
- &:hover { background-color: var(--button-fill-warning-hover-bg-color); }
273
- &:active { background-color: var(--button-fill-warning-active-bg-color); }
274
-
275
- & .loader-icon { color: var(--button-fill-warning-loader-color); }
385
+ --button-border-color: var(--button-fill-warning-border-color);
386
+ --button-text-color: var(--button-fill-warning-text-color);
387
+ --button-bg-color: var(--button-fill-warning-bg-color);
388
+ --button-hover-border-color: var(--button-fill-warning-hover-border-color);
389
+ --button-hover-text-color: var(--button-fill-warning-hover-text-color);
390
+ --button-hover-bg-color: var(--button-fill-warning-hover-bg-color);
391
+ --button-active-border-color: var(--button-fill-warning-active-border-color);
392
+ --button-active-text-color: var(--button-fill-warning-active-text-color);
393
+ --button-active-bg-color: var(--button-fill-warning-active-bg-color);
394
+ --button-loader-color: var(--button-fill-warning-loader-color);
395
+ --button-disabled-border-color: var(--button-fill-warning-disabled-border-color);
396
+ --button-disabled-text-color: var(--button-fill-warning-disabled-text-color);
397
+ --button-disabled-bg-color: var(--button-fill-warning-disabled-bg-color);
276
398
  }
277
399
 
278
400
  &.danger {
279
- border-color: var(--button-fill-danger-border-color);
280
- color: var(--button-fill-danger-text-color);
281
- background-color: var(--button-fill-danger-bg-color);
282
-
283
- &:hover { background-color: var(--button-fill-danger-hover-bg-color); }
284
- &:active { background-color: var(--button-fill-danger-active-bg-color); }
285
-
286
- & .loader-icon { color: var(--button-fill-danger-loader-color); }
401
+ --button-border-color: var(--button-fill-danger-border-color);
402
+ --button-text-color: var(--button-fill-danger-text-color);
403
+ --button-bg-color: var(--button-fill-danger-bg-color);
404
+ --button-hover-border-color: var(--button-fill-danger-hover-border-color);
405
+ --button-hover-text-color: var(--button-fill-danger-hover-text-color);
406
+ --button-hover-bg-color: var(--button-fill-danger-hover-bg-color);
407
+ --button-active-border-color: var(--button-fill-danger-active-border-color);
408
+ --button-active-text-color: var(--button-fill-danger-active-text-color);
409
+ --button-active-bg-color: var(--button-fill-danger-active-bg-color);
410
+ --button-loader-color: var(--button-fill-danger-loader-color);
411
+ --button-disabled-border-color: var(--button-fill-danger-disabled-border-color);
412
+ --button-disabled-text-color: var(--button-fill-danger-disabled-text-color);
413
+ --button-disabled-bg-color: var(--button-fill-danger-disabled-bg-color);
287
414
  }
288
415
  }
289
416
 
290
417
  .SButton.fill .icon,
291
418
  .SButton.fill .label {
292
- &.neutral { color: var(--button-fill-neutral-content-color);}
293
- &.mute { color: var(--button-fill-mute-content-color); }
294
- &.white { color: var(--button-fill-white-content-color); }
295
- &.black { color: var(--button-fill-black-content-color); }
296
- &.info { color: var(--button-fill-info-content-color); }
297
- &.success { color: var(--button-fill-success-content-color); }
298
- &.warning { color: var(--button-fill-warning-content-color); }
299
- &.danger { color: var(--button-fill-danger-content-color); }
300
- }
419
+ &.default {
420
+ --button-content-color: var(--button-fill-default-content-color);
421
+ --button-disabled-content-color: var(--button-fill-default-disabled-content-color);
422
+ }
301
423
 
302
- .SButton.fill.disabled {
303
- &.neutral {
304
- border-color: var(--button-fill-neutral-disabled-border-color);
305
- color: var(--button-fill-neutral-disabled-text-color);
306
- background-color: var(--button-fill-neutral-disabled-bg-color);
424
+ &.mute {
425
+ --button-content-color: var(--button-fill-mute-content-color);
426
+ --button-disabled-content-color: var(--button-fill-mute-disabled-content-color);
427
+ }
307
428
 
308
- &:hover { background-color: var(--button-fill-neutral-disabled-bg-color); }
309
- &:active { background-color: var(--button-fill-neutral-disabled-bg-color); }
429
+ &.neutral {
430
+ --button-content-color: var(--button-fill-neutral-content-color);
431
+ --button-disabled-content-color: var(--button-fill-neutral-disabled-content-color);
310
432
  }
311
433
 
312
434
  &.white {
313
- border-color: var(--button-fill-white-disabled-border-color);
314
- color: var(--button-fill-white-disabled-text-color);
315
- background-color: var(--button-fill-white-disabled-bg-color);
316
-
317
- &:hover { background-color: var(--button-fill-white-disabled-bg-color); }
318
- &:active { background-color: var(--button-fill-white-disabled-bg-color); }
435
+ --button-content-color: var(--button-fill-white-content-color);
436
+ --button-disabled-content-color: var(--button-fill-white-disabled-content-color);
319
437
  }
320
438
 
321
439
  &.black {
322
- border-color: var(--button-fill-black-disabled-border-color);
323
- color: var(--button-fill-black-disabled-text-color);
324
- background-color: var(--button-fill-black-disabled-bg-color);
325
-
326
- &:hover { background-color: var(--button-fill-black-disabled-bg-color); }
327
- &:active { background-color: var(--button-fill-black-disabled-bg-color); }
328
- }
329
-
330
- &.mute {
331
- border-color: var(--button-fill-mute-disabled-border-color);
332
- color: var(--button-fill-mute-disabled-text-color);
333
- background-color: var(--button-fill-mute-disabled-bg-color);
334
-
335
- &:hover { background-color: var(--button-fill-mute-disabled-bg-color); }
336
- &:active { background-color: var(--button-fill-mute-disabled-bg-color); }
440
+ --button-content-color: var(--button-fill-black-content-color);
441
+ --button-disabled-content-color: var(--button-fill-black-disabled-content-color);
337
442
  }
338
443
 
339
444
  &.info {
340
- border-color: var(--button-fill-info-disabled-border-color);
341
- color: var(--button-fill-info-disabled-text-color);
342
- background-color: var(--button-fill-info-disabled-bg-color);
343
-
344
- &:hover { background-color: var(--button-fill-info-disabled-bg-color); }
345
- &:active { background-color: var(--button-fill-info-disabled-bg-color); }
445
+ --button-content-color: var(--button-fill-info-content-color);
446
+ --button-disabled-content-color: var(--button-fill-info-disabled-content-color);
346
447
  }
347
448
 
348
449
  &.success {
349
- border-color: var(--button-fill-success-disabled-border-color);
350
- color: var(--button-fill-success-disabled-text-color);
351
- background-color: var(--button-fill-success-disabled-bg-color);
352
-
353
- &:hover { background-color: var(--button-fill-success-disabled-bg-color); }
354
- &:active { background-color: var(--button-fill-success-disabled-bg-color); }
450
+ --button-content-color: var(--button-fill-success-content-color);
451
+ --button-disabled-content-color: var(--button-fill-success-disabled-content-color);
355
452
  }
356
453
 
357
454
  &.warning {
358
- border-color: var(--button-fill-warning-disabled-border-color);
359
- color: var(--button-fill-warning-disabled-text-color);
360
- background-color: var(--button-fill-warning-disabled-bg-color);
361
-
362
- &:hover { background-color: var(--button-fill-warning-disabled-bg-color); }
363
- &:active { background-color: var(--button-fill-warning-disabled-bg-color); }
455
+ --button-content-color: var(--button-fill-warning-content-color);
456
+ --button-disabled-content-color: var(--button-fill-warning-disabled-content-color);
364
457
  }
365
458
 
366
459
  &.danger {
367
- border-color: var(--button-fill-danger-disabled-border-color);
368
- color: var(--button-fill-danger-disabled-text-color);
369
- background-color: var(--button-fill-danger-disabled-bg-color);
370
-
371
- &:hover { background-color: var(--button-fill-danger-disabled-bg-color); }
372
- &:active { background-color: var(--button-fill-danger-disabled-bg-color); }
460
+ --button-content-color: var(--button-fill-danger-content-color);
461
+ --button-disabled-content-color: var(--button-fill-danger-disabled-content-color);
373
462
  }
374
463
  }
375
464
 
376
- .SButton.fill.disabled .icon,
377
- .SButton.fill.disabled .label {
378
- &.neutral { color: var(--button-fill-neutral-disabled-content-color); }
379
- &.white { color: var(--button-fill-white-disabled-content-color); }
380
- &.black { color: var(--button-fill-black-disabled-content-color); }
381
- &.mute { color: var(--button-fill-mute-disabled-content-color); }
382
- &.info { color: var(--button-fill-info-disabled-content-color); }
383
- &.success { color: var(--button-fill-success-disabled-content-color); }
384
- &.warning { color: var(--button-fill-warning-disabled-content-color); }
385
- &.danger { color: var(--button-fill-danger-disabled-content-color); }
386
- }
387
-
388
465
  .SButton.outline {
389
466
  font-weight: 500;
390
467
 
391
- &.neutral {
392
- border-color: var(--button-outline-neutral-border-color);
393
- color: var(--button-outline-neutral-text-color);
394
-
395
- &:hover { background-color: var(--button-outline-neutral-hover-bg-color); }
396
- &:active { background-color: var(--button-outline-neutral-active-bg-color); }
468
+ --button-loader-color: var(--c-neutral-1);
469
+ --button-hover-border-color: var(--button-border-color);
470
+ --button-hover-text-color: var(--button-text-color);
471
+ --button-active-border-color: var(--button-border-color);
472
+ --button-active-text-color: var(--button-text-color);
397
473
 
398
- & .loader-icon { color: var(--button-outline-neutral-loader-color); }
474
+ &.default {
475
+ --button-border-color: var(--button-outline-default-border-color);
476
+ --button-text-color: var(--button-outline-default-text-color);
477
+ --button-hover-bg-color: var(--button-outline-default-hover-bg-color);
478
+ --button-active-bg-color: var(--button-outline-default-active-bg-color);
479
+ --button-disabled-border-color: var(--button-outline-default-disabled-border-color);
480
+ --button-disabled-text-color: var(--button-outline-default-disabled-text-color);
399
481
  }
400
482
 
401
- &.white {
402
- border-color: var(--button-outline-white-border-color);
403
- color: var(--button-outline-white-text-color);
404
-
405
- &:hover { background-color: var(--button-outline-white-hover-bg-color); }
406
- &:active { background-color: var(--button-outline-white-active-bg-color); }
407
-
408
- & .loader-icon { color: var(--button-outline-white-loader-color); }
483
+ &.mute {
484
+ --button-border-color: var(--button-outline-mute-border-color);
485
+ --button-text-color: var(--button-outline-mute-text-color);
486
+ --button-hover-bg-color: var(--button-outline-mute-hover-bg-color);
487
+ --button-active-bg-color: var(--button-outline-mute-active-bg-color);
488
+ --button-disabled-border-color: var(--button-outline-mute-disabled-border-color);
489
+ --button-disabled-text-color: var(--button-outline-mute-disabled-text-color);
409
490
  }
410
491
 
411
- &.black {
412
- border-color: var(--button-outline-black-border-color);
413
- color: var(--button-outline-black-text-color);
414
-
415
- &:hover { background-color: var(--button-outline-black-hover-bg-color); }
416
- &:active { background-color: var(--button-outline-black-active-bg-color); }
417
-
418
- & .loader-icon { color: var(--button-outline-black-loader-color); }
492
+ &.neutral {
493
+ --button-border-color: var(--button-outline-neutral-border-color);
494
+ --button-text-color: var(--button-outline-neutral-text-color);
495
+ --button-hover-bg-color: var(--button-outline-neutral-hover-bg-color);
496
+ --button-active-bg-color: var(--button-outline-neutral-active-bg-color);
497
+ --button-disabled-border-color: var(--button-outline-neutral-disabled-border-color);
498
+ --button-disabled-text-color: var(--button-outline-neutral-disabled-text-color);
419
499
  }
420
500
 
421
- &.mute {
422
- border-color: var(--button-outline-mute-border-color);
423
- color: var(--button-outline-mute-text-color);
424
-
425
- &:hover { background-color: var(--button-outline-mute-hover-bg-color); }
426
- &:active { background-color: var(--button-outline-mute-active-bg-color); }
501
+ &.white {
502
+ --button-border-color: var(--button-outline-white-border-color);
503
+ --button-text-color: var(--button-outline-white-text-color);
504
+ --button-hover-bg-color: var(--button-outline-white-hover-bg-color);
505
+ --button-active-bg-color: var(--button-outline-white-active-bg-color);
506
+ --button-disabled-border-color: var(--button-outline-white-disabled-border-color);
507
+ --button-disabled-text-color: var(--button-outline-white-disabled-text-color);
508
+ }
427
509
 
428
- & .loader-icon { color: var(--button-outline-mute-loader-color); }
510
+ &.black {
511
+ --button-border-color: var(--button-outline-black-border-color);
512
+ --button-text-color: var(--button-outline-black-text-color);
513
+ --button-hover-bg-color: var(--button-outline-black-hover-bg-color);
514
+ --button-active-bg-color: var(--button-outline-black-active-bg-color);
515
+ --button-disabled-border-color: var(--button-outline-black-disabled-border-color);
516
+ --button-disabled-text-color: var(--button-outline-black-disabled-text-color);
429
517
  }
430
518
 
431
519
  &.info {
432
- border-color: var(--button-outline-info-border-color);
433
- color: var(--button-outline-info-text-color);
434
-
435
- &:hover { background-color: var(--button-outline-info-hover-bg-color); }
436
- &:active { background-color: var(--button-outline-info-active-bg-color); }
437
-
438
- & .loader-icon { color: var(--button-outline-info-loader-color); }
520
+ --button-border-color: var(--button-outline-info-border-color);
521
+ --button-text-color: var(--button-outline-info-text-color);
522
+ --button-hover-bg-color: var(--button-outline-info-hover-bg-color);
523
+ --button-active-bg-color: var(--button-outline-info-active-bg-color);
524
+ --button-disabled-border-color: var(--button-outline-info-disabled-border-color);
525
+ --button-disabled-text-color: var(--button-outline-info-disabled-text-color);
439
526
  }
440
527
 
441
528
  &.success {
442
- border-color: var(--button-outline-success-border-color);
443
- color: var(--button-outline-success-text-color);
444
-
445
- &:hover { background-color: var(--button-outline-success-hover-bg-color); }
446
- &:active { background-color: var(--button-outline-success-active-bg-color); }
447
-
448
- & .loader-icon { color: var(--button-outline-success-loader-color); }
529
+ --button-border-color: var(--button-outline-success-border-color);
530
+ --button-text-color: var(--button-outline-success-text-color);
531
+ --button-hover-bg-color: var(--button-outline-success-hover-bg-color);
532
+ --button-active-bg-color: var(--button-outline-success-active-bg-color);
533
+ --button-disabled-border-color: var(--button-outline-success-disabled-border-color);
534
+ --button-disabled-text-color: var(--button-outline-success-disabled-text-color);
449
535
  }
450
536
 
451
537
  &.warning {
452
- border-color: var(--button-outline-warning-border-color);
453
- color: var(--button-outline-warning-text-color);
454
-
455
- &:hover { background-color: var(--button-outline-warning-hover-bg-color); }
456
- &:active { background-color: var(--button-outline-warning-active-bg-color); }
457
-
458
- & .loader-icon { color: var(--button-outline-warning-loader-color); }
538
+ --button-border-color: var(--button-outline-warning-border-color);
539
+ --button-text-color: var(--button-outline-warning-text-color);
540
+ --button-hover-bg-color: var(--button-outline-warning-hover-bg-color);
541
+ --button-active-bg-color: var(--button-outline-warning-active-bg-color);
542
+ --button-disabled-border-color: var(--button-outline-warning-disabled-border-color);
543
+ --button-disabled-text-color: var(--button-outline-warning-disabled-text-color);
459
544
  }
460
545
 
461
546
  &.danger {
462
- border-color: var(--button-outline-danger-border-color);
463
- color: var(--button-outline-danger-text-color);
464
-
465
- &:hover { background-color: var(--button-outline-danger-hover-bg-color); }
466
- &:active { background-color: var(--button-outline-danger-active-bg-color); }
467
-
468
- & .loader-icon { color: var(--button-outline-danger-loader-color); }
547
+ --button-border-color: var(--button-outline-danger-border-color);
548
+ --button-text-color: var(--button-outline-danger-text-color);
549
+ --button-hover-bg-color: var(--button-outline-danger-hover-bg-color);
550
+ --button-active-bg-color: var(--button-outline-danger-active-bg-color);
551
+ --button-disabled-border-color: var(--button-outline-danger-disabled-border-color);
552
+ --button-disabled-text-color: var(--button-outline-danger-disabled-text-color);
469
553
  }
470
554
  }
471
555
 
472
556
  .SButton.outline .icon,
473
557
  .SButton.outline .label {
474
- &.neutral { color: var(--button-outline-neutral-content-color); }
475
- &.white { color: var(--button-outline-white-content-color); }
476
- &.black { color: var(--button-outline-black-content-color); }
477
- &.mute { color: var(--button-outline-mute-content-color); }
478
- &.info { color: var(--button-outline-info-content-color); }
479
- &.success { color: var(--button-outline-success-content-color); }
480
- &.warning { color: var(--button-outline-warning-content-color); }
481
- &.danger { color: var(--button-outline-danger-content-color); }
482
- }
558
+ &.default {
559
+ --button-content-color: var(--button-outline-default-content-color);
560
+ --button-disabled-content-color: var(--button-outline-default-disabled-content-color);
561
+ }
483
562
 
484
- .SButton.outline.disabled {
485
- &.neutral {
486
- border-color: var(--button-outline-neutral-disabled-border-color);
487
- color: var(--button-outline-neutral-disabled-text-color);
563
+ &.mute {
564
+ --button-content-color: var(--button-outline-mute-content-color);
565
+ --button-disabled-content-color: var(--button-outline-mute-disabled-content-color);
566
+ }
488
567
 
489
- &:hover { background-color: transparent; }
490
- &:active { background-color: transparent; }
568
+ &.neutral {
569
+ --button-content-color: var(--button-outline-neutral-content-color);
570
+ --button-disabled-content-color: var(--button-outline-neutral-disabled-content-color);
491
571
  }
492
572
 
493
573
  &.white {
494
- border-color: var(--button-outline-white-disabled-border-color);
495
- color: var(--button-outline-white-disabled-text-color);
496
-
497
- &:hover { background-color: transparent; }
498
- &:active { background-color: transparent; }
574
+ --button-content-color: var(--button-outline-white-content-color);
575
+ --button-disabled-content-color: var(--button-outline-white-disabled-content-color);
499
576
  }
500
577
 
501
578
  &.black {
502
- border-color: var(--button-outline-black-disabled-border-color);
503
- color: var(--button-outline-black-disabled-text-color);
504
-
505
- &:hover { background-color: transparent; }
506
- &:active { background-color: transparent; }
507
- }
508
-
509
- &.mute {
510
- border-color: var(--button-outline-mute-disabled-border-color);
511
- color: var(--button-outline-mute-disabled-text-color);
512
-
513
- &:hover { background-color: transparent; }
514
- &:active { background-color: transparent; }
579
+ --button-content-color: var(--button-outline-black-content-color);
580
+ --button-disabled-content-color: var(--button-outline-black-disabled-content-color);
515
581
  }
516
582
 
517
583
  &.info {
518
- border-color: var(--button-outline-info-disabled-border-color);
519
- color: var(--button-outline-info-disabled-text-color);
520
-
521
- &:hover { background-color: transparent; }
522
- &:active { background-color: transparent; }
584
+ --button-content-color: var(--button-outline-info-content-color);
585
+ --button-disabled-content-color: var(--button-outline-info-disabled-content-color);
523
586
  }
524
587
 
525
588
  &.success {
526
- border-color: var(--button-outline-success-disabled-border-color);
527
- color: var(--button-outline-success-disabled-text-color);
528
-
529
- &:hover { background-color: transparent; }
530
- &:active { background-color: transparent; }
589
+ --button-content-color: var(--button-outline-success-content-color);
590
+ --button-disabled-content-color: var(--button-outline-success-disabled-content-color);
531
591
  }
532
592
 
533
593
  &.warning {
534
- border-color: var(--button-outline-warning-disabled-border-color);
535
- color: var(--button-outline-warning-disabled-text-color);
536
-
537
- &:hover { background-color: transparent; }
538
- &:active { background-color: transparent; }
594
+ --button-content-color: var(--button-outline-warning-content-color);
595
+ --button-disabled-content-color: var(--button-outline-warning-disabled-content-color);
539
596
  }
540
597
 
541
598
  &.danger {
542
- border-color: var(--button-outline-danger-disabled-border-color);
543
- color: var(--button-outline-danger-disabled-text-color);
544
-
545
- &:hover { background-color: transparent; }
546
- &:active { background-color: transparent; }
599
+ --button-content-color: var(--button-outline-danger-content-color);
600
+ --button-disabled-content-color: var(--button-outline-danger-disabled-content-color);
547
601
  }
548
602
  }
549
603
 
550
- .SButton.outline.disabled .icon,
551
- .SButton.outline.disabled .label {
552
- &.neutral { color: var(--button-outline-neutral-disabled-content-color); }
553
- &.white { color: var(--button-outline-white-disabled-content-color); }
554
- &.black { color: var(--button-outline-black-disabled-content-color); }
555
- &.mute { color: var(--button-outline-mute-disabled-content-color); }
556
- &.info { color: var(--button-outline-info-disabled-content-color); }
557
- &.success { color: var(--button-outline-success-disabled-content-color); }
558
- &.warning { color: var(--button-outline-warning-disabled-content-color); }
559
- &.danger { color: var(--button-outline-danger-disabled-content-color); }
560
- }
561
-
562
604
  .SButton.text {
563
605
  font-weight: 500;
564
606
 
565
- & .loader-icon { color: var(--c-neutral); }
607
+ --button-border-color: transparent;
608
+ --button-loader-color: var(--c-neutral-1);
609
+ --button-hover-border-color: var(--button-border-color);
610
+ --button-hover-text-color: var(--button-text-color);
611
+ --button-active-border-color: var(--button-border-color);
612
+ --button-active-text-color: var(--button-text-color);
613
+ --button-disabled-border-color: var(--button-border-color);
566
614
 
567
- &.neutral {
568
- color: var(--button-text-neutral-text-color);
569
-
570
- &:hover { background-color: var(--button-text-neutral-hover-bg-color); }
571
- &:active { background-color: var(--button-text-neutral-active-bg-color); }
615
+ &.default {
616
+ --button-text-color: var(--button-text-default-text-color);
617
+ --button-hover-bg-color: var(--button-text-default-hover-bg-color);
618
+ --button-active-bg-color: var(--button-text-default-active-bg-color);
619
+ --button-disabled-text-color: var(--button-text-default-disabled-text-color);
572
620
  }
573
621
 
574
- &.white {
575
- color: var(--button-text-white-text-color);
576
-
577
- &:hover { background-color: var(--button-text-white-hover-bg-color); }
578
- &:active { background-color: var(--button-text-white-active-bg-color); }
622
+ &.mute {
623
+ --button-text-color: var(--button-text-mute-text-color);
624
+ --button-hover-bg-color: var(--button-text-mute-hover-bg-color);
625
+ --button-active-bg-color: var(--button-text-mute-active-bg-color);
626
+ --button-disabled-text-color: var(--button-text-mute-disabled-text-color);
579
627
  }
580
628
 
581
- &.black {
582
- color: var(--button-text-black-text-color);
583
-
584
- &:hover { background-color: var(--button-text-black-hover-bg-color); }
585
- &:active { background-color: var(--button-text-black-active-bg-color); }
629
+ &.neutral {
630
+ --button-text-color: var(--button-text-neutral-text-color);
631
+ --button-hover-bg-color: var(--button-text-neutral-hover-bg-color);
632
+ --button-active-bg-color: var(--button-text-neutral-active-bg-color);
633
+ --button-disabled-text-color: var(--button-text-neutral-disabled-text-color);
586
634
  }
587
635
 
588
- &.mute {
589
- color: var(--button-text-mute-text-color);
636
+ &.white {
637
+ --button-text-color: var(--button-text-white-text-color);
638
+ --button-hover-bg-color: var(--button-text-white-hover-bg-color);
639
+ --button-active-bg-color: var(--button-text-white-active-bg-color);
640
+ --button-disabled-text-color: var(--button-text-white-disabled-text-color);
641
+ }
590
642
 
591
- &:hover { background-color: var(--button-text-mute-hover-bg-color); }
592
- &:active { background-color: var(--button-text-mute-active-bg-color); }
643
+ &.black {
644
+ --button-text-color: var(--button-text-black-text-color);
645
+ --button-hover-bg-color: var(--button-text-black-hover-bg-color);
646
+ --button-active-bg-color: var(--button-text-black-active-bg-color);
647
+ --button-disabled-text-color: var(--button-text-black-disabled-text-color);
593
648
  }
594
649
 
595
650
  &.info {
596
- color: var(--button-text-info-text-color);
597
-
598
- &:hover { background-color: var(--button-text-info-hover-bg-color); }
599
- &:active { background-color: var(--button-text-info-active-bg-color); }
651
+ --button-text-color: var(--button-text-info-text-color);
652
+ --button-hover-bg-color: var(--button-text-info-hover-bg-color);
653
+ --button-active-bg-color: var(--button-text-info-active-bg-color);
654
+ --button-disabled-text-color: var(--button-text-info-disabled-text-color);
600
655
  }
601
656
 
602
657
  &.success {
603
- color: var(--button-text-success-text-color);
604
-
605
- &:hover { background-color: var(--button-text-success-hover-bg-color); }
606
- &:active { background-color: var(--button-text-success-active-bg-color); }
658
+ --button-text-color: var(--button-text-success-text-color);
659
+ --button-hover-bg-color: var(--button-text-success-hover-bg-color);
660
+ --button-active-bg-color: var(--button-text-success-active-bg-color);
661
+ --button-disabled-text-color: var(--button-text-success-disabled-text-color);
607
662
  }
608
663
 
609
664
  &.warning {
610
- color: var(--button-text-warning-text-color);
611
-
612
- &:hover { background-color: var(--button-text-warning-hover-bg-color); }
613
- &:active { background-color: var(--button-text-warning-active-bg-color); }
665
+ --button-text-color: var(--button-text-warning-text-color);
666
+ --button-hover-bg-color: var(--button-text-warning-hover-bg-color);
667
+ --button-active-bg-color: var(--button-text-warning-active-bg-color);
668
+ --button-disabled-text-color: var(--button-text-warning-disabled-text-color);
614
669
  }
615
670
 
616
671
  &.danger {
617
- color: var(--button-text-danger-text-color);
618
-
619
- &:hover { background-color: var(--button-text-danger-hover-bg-color); }
620
- &:active { background-color: var(--button-text-danger-active-bg-color); }
672
+ --button-text-color: var(--button-text-danger-text-color);
673
+ --button-hover-bg-color: var(--button-text-danger-hover-bg-color);
674
+ --button-active-bg-color: var(--button-text-danger-active-bg-color);
675
+ --button-disabled-text-color: var(--button-text-danger-disabled-text-color);
621
676
  }
622
677
  }
623
678
 
624
679
  .SButton.text .icon,
625
680
  .SButton.text .label {
626
- &.neutral { color: var(--button-text-neutral-content-color); }
627
- &.white { color: var(--button-text-white-content-color); }
628
- &.black { color: var(--button-text-black-content-color); }
629
- &.mute { color: var(--button-text-mute-content-color); }
630
- &.info { color: var(--button-text-info-content-color); }
631
- &.success { color: var(--button-text-success-content-color); }
632
- &.warning { color: var(--button-text-warning-content-color); }
633
- &.danger { color: var(--button-text-danger-content-color); }
634
- }
681
+ &.default {
682
+ --button-content-color: var(--button-text-default-content-color);
683
+ --button-disabled-content-color: var(--button-text-default-disabled-content-color);
684
+ }
635
685
 
636
- .SButton.text.disabled {
637
- &.neutral {
638
- color: var(--button-text-neutral-disabled-text-color);
686
+ &.mute {
687
+ --button-content-color: var(--button-text-mute-content-color);
688
+ --button-disabled-content-color: var(--button-text-mute-disabled-content-color);
689
+ }
639
690
 
640
- &:hover { background-color: transparent; }
641
- &:active { background-color: transparent; }
691
+ &.neutral {
692
+ --button-content-color: var(--button-text-neutral-content-color);
693
+ --button-disabled-content-color: var(--button-text-neutral-disabled-content-color);
642
694
  }
643
695
 
644
696
  &.white {
645
- color: var(--button-text-white-disabled-text-color);
646
-
647
- &:hover { background-color: transparent; }
648
- &:active { background-color: transparent; }
697
+ --button-content-color: var(--button-text-white-content-color);
698
+ --button-disabled-content-color: var(--button-text-white-disabled-content-color);
649
699
  }
650
700
 
651
701
  &.black {
652
- color: var(--button-text-black-disabled-text-color);
653
-
654
- &:hover { background-color: transparent; }
655
- &:active { background-color: transparent; }
656
- }
657
-
658
- &.mute {
659
- color: var(--button-text-mute-disabled-text-color);
660
-
661
- &:hover { background-color: transparent; }
662
- &:active { background-color: transparent; }
702
+ --button-content-color: var(--button-text-black-content-color);
703
+ --button-disabled-content-color: var(--button-text-black-disabled-content-color);
663
704
  }
664
705
 
665
706
  &.info {
666
- color: var(--button-text-info-disabled-text-color);
667
-
668
- &:hover { background-color: transparent; }
669
- &:active { background-color: transparent; }
707
+ --button-content-color: var(--button-text-info-content-color);
708
+ --button-disabled-content-color: var(--button-text-info-disabled-content-color);
670
709
  }
671
710
 
672
711
  &.success {
673
- color: var(--button-text-success-disabled-text-color);
674
-
675
- &:hover { background-color: transparent; }
676
- &:active { background-color: transparent; }
712
+ --button-content-color: var(--button-text-success-content-color);
713
+ --button-disabled-content-color: var(--button-text-success-disabled-content-color);
677
714
  }
678
715
 
679
716
  &.warning {
680
- color: var(--button-text-warning-disabled-text-color);
681
-
682
- &:hover { background-color: transparent; }
683
- &:active { background-color: transparent; }
717
+ --button-content-color: var(--button-text-warning-content-color);
718
+ --button-disabled-content-color: var(--button-text-warning-disabled-content-color);
684
719
  }
685
720
 
686
721
  &.danger {
687
- color: var(--button-text-danger-disabled-text-color);
688
-
689
- &:hover { background-color: transparent; }
690
- &:active { background-color: transparent; }
722
+ --button-content-color: var(--button-text-danger-content-color);
723
+ --button-disabled-content-color: var(--button-text-danger-disabled-content-color);
691
724
  }
692
725
  }
693
726
 
694
- .SButton.text.disabled .icon,
695
- .SButton.text.disabled .label {
696
- &.neutral { color: var(--button-text-neutral-disabled-content-color); }
697
- &.white { color: var(--button-text-white-disabled-content-color); }
698
- &.black { color: var(--button-text-black-disabled-content-color); }
699
- &.mute { color: var(--button-text-mute-disabled-content-color); }
700
- &.info { color: var(--button-text-info-disabled-content-color); }
701
- &.success { color: var(--button-text-success-disabled-content-color); }
702
- &.warning { color: var(--button-text-warning-disabled-content-color); }
703
- &.danger { color: var(--button-text-danger-disabled-content-color); }
704
- }
705
-
706
727
  .SButton.block {
707
728
  display: flex;
708
729
  justify-content: center;
@@ -712,42 +733,7 @@ function handleClick(): void {
712
733
  .SButton.loading {
713
734
  .content {
714
735
  opacity: 0;
715
- transform: scale(.9);
736
+ transform: scale(0.9);
716
737
  }
717
738
  }
718
-
719
- .SButton.disabled {
720
- cursor: not-allowed;
721
- }
722
-
723
- .content {
724
- display: flex;
725
- justify-content: center;
726
- align-items: center;
727
- height: 100%;
728
- transition: opacity 0.25s, transform 0.25s;
729
- }
730
-
731
- .loader {
732
- position: absolute;
733
- top: 50%;
734
- left: 50%;
735
- z-index: 10;
736
- width: 32px;
737
- height: 32px;
738
- color: var(--c-text-1);
739
- transform: translate(-50%, -50%);
740
- transition: opacity 0.25s, transform 0.25s;
741
- }
742
-
743
- .loader.fade-enter-from,
744
- .loader.fade-leave-to {
745
- opacity: 0;
746
- transform: translate(-50%, -50%) scale(1.5);
747
- }
748
-
749
- .loader-icon {
750
- width: 32px;
751
- height: 32px;
752
- }
753
739
  </style>