@aristobyte-ui/switch 2.9.1 → 2.10.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.
- package/es/components/Switch/Switch.scss +102 -112
- package/lib/components/Switch/Switch.scss +102 -112
- package/package.json +2 -2
|
@@ -1,13 +1,98 @@
|
|
|
1
1
|
@use '@aristobyte-ui/utils/styles' as *;
|
|
2
2
|
|
|
3
3
|
.switch {
|
|
4
|
+
/* stylelint-disable no-descending-specificity */
|
|
4
5
|
align-items: center;
|
|
5
6
|
cursor: pointer;
|
|
6
|
-
display: flex;
|
|
7
|
+
display: inline-flex;
|
|
7
8
|
gap: 10px;
|
|
8
9
|
max-width: max-content;
|
|
9
|
-
user-select: none;
|
|
10
10
|
position: relative;
|
|
11
|
+
user-select: none;
|
|
12
|
+
|
|
13
|
+
&__track {
|
|
14
|
+
background-color: $grey-700;
|
|
15
|
+
border-radius: 999px;
|
|
16
|
+
overflow: hidden;
|
|
17
|
+
position: relative;
|
|
18
|
+
transition: background-color 0.3s ease;
|
|
19
|
+
|
|
20
|
+
&-icon {
|
|
21
|
+
align-items: center;
|
|
22
|
+
display: flex;
|
|
23
|
+
justify-content: center;
|
|
24
|
+
position: absolute;
|
|
25
|
+
top: 50%;
|
|
26
|
+
transition:
|
|
27
|
+
transform 120ms ease-out,
|
|
28
|
+
left 200ms ease-out,
|
|
29
|
+
right 200ms ease-out,
|
|
30
|
+
opacity 100ms ease-out;
|
|
31
|
+
z-index: 0;
|
|
32
|
+
|
|
33
|
+
svg {
|
|
34
|
+
height: 100%;
|
|
35
|
+
width: 100%;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
&__thumb {
|
|
41
|
+
align-items: center;
|
|
42
|
+
background-color: white;
|
|
43
|
+
display: flex;
|
|
44
|
+
justify-content: center;
|
|
45
|
+
position: absolute;
|
|
46
|
+
top: 50%;
|
|
47
|
+
transform: translate(0, -50%);
|
|
48
|
+
transition: all 200ms ease-out;
|
|
49
|
+
z-index: 1;
|
|
50
|
+
|
|
51
|
+
&-icon {
|
|
52
|
+
align-items: center;
|
|
53
|
+
display: flex;
|
|
54
|
+
justify-content: center;
|
|
55
|
+
|
|
56
|
+
svg {
|
|
57
|
+
height: 100%;
|
|
58
|
+
width: 100%;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
&__label {
|
|
64
|
+
color: $white;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
input {
|
|
68
|
+
display: none;
|
|
69
|
+
|
|
70
|
+
+ .switch__track .switch__track-icon {
|
|
71
|
+
&--checked {
|
|
72
|
+
opacity: 0;
|
|
73
|
+
transform: translate(0, -50%) scale(0.55);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
&--unchecked {
|
|
77
|
+
opacity: 1;
|
|
78
|
+
transform: translate(0, -50%) scale(1);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
&:checked {
|
|
83
|
+
+ .switch__track .switch__track-icon {
|
|
84
|
+
&--checked {
|
|
85
|
+
opacity: 1;
|
|
86
|
+
transform: translate(0, -50%) scale(1);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
&--unchecked {
|
|
90
|
+
opacity: 0;
|
|
91
|
+
transform: translate(0, -50%) scale(0.55);
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}
|
|
11
96
|
|
|
12
97
|
&-align-label {
|
|
13
98
|
&--horizontal {
|
|
@@ -51,7 +136,7 @@
|
|
|
51
136
|
|
|
52
137
|
&__label {
|
|
53
138
|
color: $white;
|
|
54
|
-
font-size: 0.
|
|
139
|
+
font-size: 0.75rem; // 12px
|
|
55
140
|
}
|
|
56
141
|
}
|
|
57
142
|
|
|
@@ -121,7 +206,7 @@
|
|
|
121
206
|
|
|
122
207
|
&__label {
|
|
123
208
|
color: $white;
|
|
124
|
-
font-size: 0.
|
|
209
|
+
font-size: 0.875rem; // 14px
|
|
125
210
|
}
|
|
126
211
|
}
|
|
127
212
|
|
|
@@ -191,7 +276,7 @@
|
|
|
191
276
|
|
|
192
277
|
&__label {
|
|
193
278
|
color: $white;
|
|
194
|
-
font-size:
|
|
279
|
+
font-size: 1rem; // 16px
|
|
195
280
|
}
|
|
196
281
|
}
|
|
197
282
|
|
|
@@ -260,7 +345,7 @@
|
|
|
260
345
|
|
|
261
346
|
&__label {
|
|
262
347
|
color: $white;
|
|
263
|
-
font-size:
|
|
348
|
+
font-size: 1.125rem; // 18px
|
|
264
349
|
}
|
|
265
350
|
}
|
|
266
351
|
|
|
@@ -330,7 +415,7 @@
|
|
|
330
415
|
|
|
331
416
|
&__label {
|
|
332
417
|
color: $white;
|
|
333
|
-
font-size: 1.
|
|
418
|
+
font-size: 1.25rem; // 20px
|
|
334
419
|
}
|
|
335
420
|
}
|
|
336
421
|
|
|
@@ -375,112 +460,17 @@
|
|
|
375
460
|
}
|
|
376
461
|
}
|
|
377
462
|
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
&-variant--primary input:checked + &__track {
|
|
383
|
-
background-color: $color-primary;
|
|
384
|
-
}
|
|
385
|
-
|
|
386
|
-
&-variant--secondary input:checked + &__track {
|
|
387
|
-
background-color: $color-secondary;
|
|
388
|
-
}
|
|
389
|
-
|
|
390
|
-
&-variant--success input:checked + &__track {
|
|
391
|
-
background-color: $color-success;
|
|
392
|
-
}
|
|
393
|
-
|
|
394
|
-
&-variant--error input:checked + &__track {
|
|
395
|
-
background-color: $color-error;
|
|
396
|
-
}
|
|
397
|
-
|
|
398
|
-
&-variant--warning input:checked + &__track {
|
|
399
|
-
background-color: $color-warning;
|
|
400
|
-
}
|
|
401
|
-
|
|
402
|
-
input {
|
|
403
|
-
display: none;
|
|
404
|
-
|
|
405
|
-
+ .switch__track .switch__track-icon {
|
|
406
|
-
&--checked {
|
|
407
|
-
opacity: 0;
|
|
408
|
-
transform: translate(0, -50%) scale(0.55);
|
|
409
|
-
}
|
|
410
|
-
|
|
411
|
-
&--unchecked {
|
|
412
|
-
opacity: 1;
|
|
413
|
-
transform: translate(0, -50%) scale(1);
|
|
414
|
-
}
|
|
415
|
-
}
|
|
416
|
-
|
|
417
|
-
&:checked {
|
|
418
|
-
+ .switch__track .switch__track-icon {
|
|
419
|
-
&--checked {
|
|
420
|
-
opacity: 1;
|
|
421
|
-
transform: translate(0, -50%) scale(1);
|
|
422
|
-
}
|
|
423
|
-
|
|
424
|
-
&--unchecked {
|
|
425
|
-
opacity: 0;
|
|
426
|
-
transform: translate(0, -50%) scale(0.55);
|
|
427
|
-
}
|
|
428
|
-
}
|
|
463
|
+
@mixin switch-variant($name, $color) {
|
|
464
|
+
&-variant--#{$name} input:checked + &__track {
|
|
465
|
+
background-color: $color;
|
|
429
466
|
}
|
|
430
467
|
}
|
|
431
468
|
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
&-icon {
|
|
441
|
-
align-items: center;
|
|
442
|
-
display: flex;
|
|
443
|
-
justify-content: center;
|
|
444
|
-
position: absolute;
|
|
445
|
-
top: 50%;
|
|
446
|
-
transition:
|
|
447
|
-
transform 120ms ease-out,
|
|
448
|
-
left 200ms ease-out,
|
|
449
|
-
right 200ms ease-out,
|
|
450
|
-
opacity 100ms ease-out;
|
|
451
|
-
z-index: 0;
|
|
452
|
-
|
|
453
|
-
svg {
|
|
454
|
-
height: 100%;
|
|
455
|
-
width: 100%;
|
|
456
|
-
}
|
|
457
|
-
}
|
|
458
|
-
}
|
|
459
|
-
|
|
460
|
-
&__thumb {
|
|
461
|
-
align-items: center;
|
|
462
|
-
background-color: white;
|
|
463
|
-
display: flex;
|
|
464
|
-
justify-content: center;
|
|
465
|
-
position: absolute;
|
|
466
|
-
top: 50%;
|
|
467
|
-
transform: translate(0, -50%);
|
|
468
|
-
transition: all 200ms ease-out;
|
|
469
|
-
z-index: 1;
|
|
470
|
-
|
|
471
|
-
&-icon {
|
|
472
|
-
align-items: center;
|
|
473
|
-
display: flex;
|
|
474
|
-
justify-content: center;
|
|
475
|
-
|
|
476
|
-
svg {
|
|
477
|
-
height: 100%;
|
|
478
|
-
width: 100%;
|
|
479
|
-
}
|
|
480
|
-
}
|
|
481
|
-
}
|
|
482
|
-
|
|
483
|
-
&__label {
|
|
484
|
-
color: $white;
|
|
485
|
-
}
|
|
469
|
+
@include switch-variant('default', $color-default);
|
|
470
|
+
@include switch-variant('primary', $color-primary);
|
|
471
|
+
@include switch-variant('secondary', $color-secondary);
|
|
472
|
+
@include switch-variant('success', $color-success);
|
|
473
|
+
@include switch-variant('error', $color-error);
|
|
474
|
+
@include switch-variant('warning', $color-warning);
|
|
475
|
+
/* stylelint-enable no-descending-specificity */
|
|
486
476
|
}
|
|
@@ -1,13 +1,98 @@
|
|
|
1
1
|
@use '@aristobyte-ui/utils/styles' as *;
|
|
2
2
|
|
|
3
3
|
.switch {
|
|
4
|
+
/* stylelint-disable no-descending-specificity */
|
|
4
5
|
align-items: center;
|
|
5
6
|
cursor: pointer;
|
|
6
|
-
display: flex;
|
|
7
|
+
display: inline-flex;
|
|
7
8
|
gap: 10px;
|
|
8
9
|
max-width: max-content;
|
|
9
|
-
user-select: none;
|
|
10
10
|
position: relative;
|
|
11
|
+
user-select: none;
|
|
12
|
+
|
|
13
|
+
&__track {
|
|
14
|
+
background-color: $grey-700;
|
|
15
|
+
border-radius: 999px;
|
|
16
|
+
overflow: hidden;
|
|
17
|
+
position: relative;
|
|
18
|
+
transition: background-color 0.3s ease;
|
|
19
|
+
|
|
20
|
+
&-icon {
|
|
21
|
+
align-items: center;
|
|
22
|
+
display: flex;
|
|
23
|
+
justify-content: center;
|
|
24
|
+
position: absolute;
|
|
25
|
+
top: 50%;
|
|
26
|
+
transition:
|
|
27
|
+
transform 120ms ease-out,
|
|
28
|
+
left 200ms ease-out,
|
|
29
|
+
right 200ms ease-out,
|
|
30
|
+
opacity 100ms ease-out;
|
|
31
|
+
z-index: 0;
|
|
32
|
+
|
|
33
|
+
svg {
|
|
34
|
+
height: 100%;
|
|
35
|
+
width: 100%;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
&__thumb {
|
|
41
|
+
align-items: center;
|
|
42
|
+
background-color: white;
|
|
43
|
+
display: flex;
|
|
44
|
+
justify-content: center;
|
|
45
|
+
position: absolute;
|
|
46
|
+
top: 50%;
|
|
47
|
+
transform: translate(0, -50%);
|
|
48
|
+
transition: all 200ms ease-out;
|
|
49
|
+
z-index: 1;
|
|
50
|
+
|
|
51
|
+
&-icon {
|
|
52
|
+
align-items: center;
|
|
53
|
+
display: flex;
|
|
54
|
+
justify-content: center;
|
|
55
|
+
|
|
56
|
+
svg {
|
|
57
|
+
height: 100%;
|
|
58
|
+
width: 100%;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
&__label {
|
|
64
|
+
color: $white;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
input {
|
|
68
|
+
display: none;
|
|
69
|
+
|
|
70
|
+
+ .switch__track .switch__track-icon {
|
|
71
|
+
&--checked {
|
|
72
|
+
opacity: 0;
|
|
73
|
+
transform: translate(0, -50%) scale(0.55);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
&--unchecked {
|
|
77
|
+
opacity: 1;
|
|
78
|
+
transform: translate(0, -50%) scale(1);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
&:checked {
|
|
83
|
+
+ .switch__track .switch__track-icon {
|
|
84
|
+
&--checked {
|
|
85
|
+
opacity: 1;
|
|
86
|
+
transform: translate(0, -50%) scale(1);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
&--unchecked {
|
|
90
|
+
opacity: 0;
|
|
91
|
+
transform: translate(0, -50%) scale(0.55);
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}
|
|
11
96
|
|
|
12
97
|
&-align-label {
|
|
13
98
|
&--horizontal {
|
|
@@ -51,7 +136,7 @@
|
|
|
51
136
|
|
|
52
137
|
&__label {
|
|
53
138
|
color: $white;
|
|
54
|
-
font-size: 0.
|
|
139
|
+
font-size: 0.75rem; // 12px
|
|
55
140
|
}
|
|
56
141
|
}
|
|
57
142
|
|
|
@@ -121,7 +206,7 @@
|
|
|
121
206
|
|
|
122
207
|
&__label {
|
|
123
208
|
color: $white;
|
|
124
|
-
font-size: 0.
|
|
209
|
+
font-size: 0.875rem; // 14px
|
|
125
210
|
}
|
|
126
211
|
}
|
|
127
212
|
|
|
@@ -191,7 +276,7 @@
|
|
|
191
276
|
|
|
192
277
|
&__label {
|
|
193
278
|
color: $white;
|
|
194
|
-
font-size:
|
|
279
|
+
font-size: 1rem; // 16px
|
|
195
280
|
}
|
|
196
281
|
}
|
|
197
282
|
|
|
@@ -260,7 +345,7 @@
|
|
|
260
345
|
|
|
261
346
|
&__label {
|
|
262
347
|
color: $white;
|
|
263
|
-
font-size:
|
|
348
|
+
font-size: 1.125rem; // 18px
|
|
264
349
|
}
|
|
265
350
|
}
|
|
266
351
|
|
|
@@ -330,7 +415,7 @@
|
|
|
330
415
|
|
|
331
416
|
&__label {
|
|
332
417
|
color: $white;
|
|
333
|
-
font-size: 1.
|
|
418
|
+
font-size: 1.25rem; // 20px
|
|
334
419
|
}
|
|
335
420
|
}
|
|
336
421
|
|
|
@@ -375,112 +460,17 @@
|
|
|
375
460
|
}
|
|
376
461
|
}
|
|
377
462
|
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
&-variant--primary input:checked + &__track {
|
|
383
|
-
background-color: $color-primary;
|
|
384
|
-
}
|
|
385
|
-
|
|
386
|
-
&-variant--secondary input:checked + &__track {
|
|
387
|
-
background-color: $color-secondary;
|
|
388
|
-
}
|
|
389
|
-
|
|
390
|
-
&-variant--success input:checked + &__track {
|
|
391
|
-
background-color: $color-success;
|
|
392
|
-
}
|
|
393
|
-
|
|
394
|
-
&-variant--error input:checked + &__track {
|
|
395
|
-
background-color: $color-error;
|
|
396
|
-
}
|
|
397
|
-
|
|
398
|
-
&-variant--warning input:checked + &__track {
|
|
399
|
-
background-color: $color-warning;
|
|
400
|
-
}
|
|
401
|
-
|
|
402
|
-
input {
|
|
403
|
-
display: none;
|
|
404
|
-
|
|
405
|
-
+ .switch__track .switch__track-icon {
|
|
406
|
-
&--checked {
|
|
407
|
-
opacity: 0;
|
|
408
|
-
transform: translate(0, -50%) scale(0.55);
|
|
409
|
-
}
|
|
410
|
-
|
|
411
|
-
&--unchecked {
|
|
412
|
-
opacity: 1;
|
|
413
|
-
transform: translate(0, -50%) scale(1);
|
|
414
|
-
}
|
|
415
|
-
}
|
|
416
|
-
|
|
417
|
-
&:checked {
|
|
418
|
-
+ .switch__track .switch__track-icon {
|
|
419
|
-
&--checked {
|
|
420
|
-
opacity: 1;
|
|
421
|
-
transform: translate(0, -50%) scale(1);
|
|
422
|
-
}
|
|
423
|
-
|
|
424
|
-
&--unchecked {
|
|
425
|
-
opacity: 0;
|
|
426
|
-
transform: translate(0, -50%) scale(0.55);
|
|
427
|
-
}
|
|
428
|
-
}
|
|
463
|
+
@mixin switch-variant($name, $color) {
|
|
464
|
+
&-variant--#{$name} input:checked + &__track {
|
|
465
|
+
background-color: $color;
|
|
429
466
|
}
|
|
430
467
|
}
|
|
431
468
|
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
&-icon {
|
|
441
|
-
align-items: center;
|
|
442
|
-
display: flex;
|
|
443
|
-
justify-content: center;
|
|
444
|
-
position: absolute;
|
|
445
|
-
top: 50%;
|
|
446
|
-
transition:
|
|
447
|
-
transform 120ms ease-out,
|
|
448
|
-
left 200ms ease-out,
|
|
449
|
-
right 200ms ease-out,
|
|
450
|
-
opacity 100ms ease-out;
|
|
451
|
-
z-index: 0;
|
|
452
|
-
|
|
453
|
-
svg {
|
|
454
|
-
height: 100%;
|
|
455
|
-
width: 100%;
|
|
456
|
-
}
|
|
457
|
-
}
|
|
458
|
-
}
|
|
459
|
-
|
|
460
|
-
&__thumb {
|
|
461
|
-
align-items: center;
|
|
462
|
-
background-color: white;
|
|
463
|
-
display: flex;
|
|
464
|
-
justify-content: center;
|
|
465
|
-
position: absolute;
|
|
466
|
-
top: 50%;
|
|
467
|
-
transform: translate(0, -50%);
|
|
468
|
-
transition: all 200ms ease-out;
|
|
469
|
-
z-index: 1;
|
|
470
|
-
|
|
471
|
-
&-icon {
|
|
472
|
-
align-items: center;
|
|
473
|
-
display: flex;
|
|
474
|
-
justify-content: center;
|
|
475
|
-
|
|
476
|
-
svg {
|
|
477
|
-
height: 100%;
|
|
478
|
-
width: 100%;
|
|
479
|
-
}
|
|
480
|
-
}
|
|
481
|
-
}
|
|
482
|
-
|
|
483
|
-
&__label {
|
|
484
|
-
color: $white;
|
|
485
|
-
}
|
|
469
|
+
@include switch-variant('default', $color-default);
|
|
470
|
+
@include switch-variant('primary', $color-primary);
|
|
471
|
+
@include switch-variant('secondary', $color-secondary);
|
|
472
|
+
@include switch-variant('success', $color-success);
|
|
473
|
+
@include switch-variant('error', $color-error);
|
|
474
|
+
@include switch-variant('warning', $color-warning);
|
|
475
|
+
/* stylelint-enable no-descending-specificity */
|
|
486
476
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aristobyte-ui/switch",
|
|
3
3
|
"description": "A fully typed, customizable Switch/toggle component for React with multiple sizes, variants, label alignments, and optional icons. Built to integrate seamlessly with AristoByteUI design tokens and SCSS modules.",
|
|
4
|
-
"version": "2.
|
|
4
|
+
"version": "2.10.0",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"private": false,
|
|
7
7
|
"author": "AristoByte <info@aristobyte.com>",
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"sass": "^1.97.3"
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
|
-
"@aristobyte-ui/utils": "^2.
|
|
51
|
+
"@aristobyte-ui/utils": "^2.10.0"
|
|
52
52
|
},
|
|
53
53
|
"exports": {
|
|
54
54
|
".": {
|