@vialiq/flux-ui 0.12.0 → 0.13.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/components/_index.scss +1 -0
- package/components/_switch.scss +126 -0
- package/package.json +1 -1
package/components/_index.scss
CHANGED
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
@use '../styles/variables' as tokens;
|
|
2
|
+
|
|
3
|
+
@layer components {
|
|
4
|
+
// ── Wrapper ──────────────────────────────────────────────────────────────────
|
|
5
|
+
// Uses flex-start so the track top-aligns with the first line when the label
|
|
6
|
+
// wraps across multiple lines. The track itself is nudged down by half the
|
|
7
|
+
// difference between one line-height and its own height so it optically sits
|
|
8
|
+
// on the cap-height of the first text line.
|
|
9
|
+
|
|
10
|
+
.switch-wrapper {
|
|
11
|
+
display: inline-flex;
|
|
12
|
+
align-items: flex-start;
|
|
13
|
+
gap: var(--vi-switch-label-gap, 8px);
|
|
14
|
+
cursor: pointer;
|
|
15
|
+
font-family: #{tokens.$font-family-base};
|
|
16
|
+
font-size: var(--vi-switch-label-font-size, #{tokens.$font-size-base});
|
|
17
|
+
line-height: #{tokens.$line-height-normal};
|
|
18
|
+
color: var(--vi-switch-label-color, #{tokens.$text-primary});
|
|
19
|
+
user-select: none;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
// ── Label text ────────────────────────────────────────────────────────────────
|
|
23
|
+
// flex: 1 lets it grow past the fixed-width track; min-width: 0 is required on
|
|
24
|
+
// a flex child so that word-break / overflow-wrap actually take effect.
|
|
25
|
+
|
|
26
|
+
.switch-label {
|
|
27
|
+
flex: 1 1 auto;
|
|
28
|
+
min-width: 0;
|
|
29
|
+
word-break: break-word;
|
|
30
|
+
overflow-wrap: break-word;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
// ── Hidden native input ────────────────────────────────────────────────────────
|
|
34
|
+
// Visually hidden but still a full keyboard / AT participant.
|
|
35
|
+
|
|
36
|
+
.switch-input {
|
|
37
|
+
position: absolute !important;
|
|
38
|
+
clip-path: inset(50%) !important;
|
|
39
|
+
overflow: hidden !important;
|
|
40
|
+
width: 1px !important;
|
|
41
|
+
height: 1px !important;
|
|
42
|
+
margin: -1px !important;
|
|
43
|
+
padding: 0 !important;
|
|
44
|
+
border: 0 !important;
|
|
45
|
+
white-space: nowrap !important;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
// ── Track ─────────────────────────────────────────────────────────────────────
|
|
49
|
+
// margin-top offsets the track downward so its visual centre aligns with the
|
|
50
|
+
// cap-height of the first text line.
|
|
51
|
+
|
|
52
|
+
.switch-track {
|
|
53
|
+
box-sizing: border-box;
|
|
54
|
+
position: relative;
|
|
55
|
+
width: var(--vi-switch-track-width, 44px);
|
|
56
|
+
height: var(--vi-switch-track-height, 24px);
|
|
57
|
+
background-color: var(--vi-switch-track-color-off, #{tokens.$border-03});
|
|
58
|
+
border-radius: var(--vi-border-radius-full, 9999px);
|
|
59
|
+
transition: background-color var(--vi-switch-transition-duration, 150ms) ease;
|
|
60
|
+
flex-shrink: 0;
|
|
61
|
+
// Align track centre with first-line cap-height
|
|
62
|
+
margin-top: calc(
|
|
63
|
+
(1em * #{tokens.$line-height-normal} - var(--vi-switch-track-height, 24px)) / 2
|
|
64
|
+
);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
// ── Thumb ─────────────────────────────────────────────────────────────────────
|
|
68
|
+
|
|
69
|
+
.switch-thumb {
|
|
70
|
+
position: absolute;
|
|
71
|
+
top: 50%;
|
|
72
|
+
left: var(--vi-switch-thumb-offset, 2px);
|
|
73
|
+
transform: translateY(-50%);
|
|
74
|
+
width: var(--vi-switch-thumb-size, 18px);
|
|
75
|
+
height: var(--vi-switch-thumb-size, 18px);
|
|
76
|
+
background-color: var(--vi-switch-thumb-color, #{tokens.$text-primary-inverse});
|
|
77
|
+
border-radius: 50%;
|
|
78
|
+
box-shadow: var(--vi-switch-thumb-shadow, 0 1px 3px rgba(0, 0, 0, 0.2));
|
|
79
|
+
transition: left var(--vi-switch-transition-duration, 150ms) ease;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
// ── Checked state ─────────────────────────────────────────────────────────────
|
|
83
|
+
|
|
84
|
+
.switch-input:checked ~ .switch-track {
|
|
85
|
+
background-color: var(--vi-switch-track-color-on, #{tokens.$color-primary});
|
|
86
|
+
|
|
87
|
+
.switch-thumb {
|
|
88
|
+
left: calc(
|
|
89
|
+
100% - var(--vi-switch-thumb-size, 18px) - var(--vi-switch-thumb-offset, 2px)
|
|
90
|
+
);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
// ── Focus ring ────────────────────────────────────────────────────────────────
|
|
95
|
+
|
|
96
|
+
.switch-input:focus-visible ~ .switch-track {
|
|
97
|
+
outline: #{tokens.$border-width-base} solid
|
|
98
|
+
var(--vi-switch-focus-ring-color, #{tokens.$focus});
|
|
99
|
+
outline-offset: 2px;
|
|
100
|
+
box-shadow: 0 0 0 3px var(--vi-switch-focus-ring-glow, #{tokens.$color-blue-200});
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
// ── Disabled state ────────────────────────────────────────────────────────────
|
|
104
|
+
|
|
105
|
+
.switch-wrapper--disabled {
|
|
106
|
+
cursor: not-allowed;
|
|
107
|
+
opacity: var(--vi-switch-disabled-opacity, 0.5);
|
|
108
|
+
|
|
109
|
+
.switch-track {
|
|
110
|
+
background-color: #{tokens.$border-03};
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.switch-input:checked ~ .switch-track {
|
|
114
|
+
background-color: #{tokens.$text-disabled};
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
// ── Reduced motion ────────────────────────────────────────────────────────────
|
|
119
|
+
|
|
120
|
+
@media (prefers-reduced-motion: reduce) {
|
|
121
|
+
.switch-track,
|
|
122
|
+
.switch-thumb {
|
|
123
|
+
transition: none;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
}
|