widenarrow-ui 1.0.21 → 1.0.22
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/lib/index.css +1 -1
- package/lib/index.esm.css +1 -1
- package/lib/index.esm.js +30 -26
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +30 -26
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/SwitchButton/SwitchButton.module.scss +20 -2
- package/src/components/SwitchButton/SwitchButton.tsx +10 -3
package/package.json
CHANGED
|
@@ -16,7 +16,6 @@
|
|
|
16
16
|
|
|
17
17
|
&_isDisabled {
|
|
18
18
|
pointer-events: none;
|
|
19
|
-
opacity: $disabled-opacity;
|
|
20
19
|
}
|
|
21
20
|
|
|
22
21
|
&_withInlineLabel {
|
|
@@ -95,9 +94,17 @@
|
|
|
95
94
|
height: 100%;
|
|
96
95
|
border-radius: 20px;
|
|
97
96
|
|
|
97
|
+
&_isDisabled {
|
|
98
|
+
background: $grey-disabled;
|
|
99
|
+
}
|
|
100
|
+
|
|
98
101
|
&_isActive {
|
|
99
102
|
background: $blue;
|
|
100
103
|
}
|
|
104
|
+
|
|
105
|
+
&_isActiveAndDisabled {
|
|
106
|
+
background: $blue-disabled;
|
|
107
|
+
}
|
|
101
108
|
}
|
|
102
109
|
|
|
103
110
|
.circle {
|
|
@@ -105,7 +112,6 @@
|
|
|
105
112
|
left: 2px;
|
|
106
113
|
position: absolute;
|
|
107
114
|
transition: transform 200ms ease;
|
|
108
|
-
background: $grey-4;
|
|
109
115
|
transform: translateX(0px);
|
|
110
116
|
display: block;
|
|
111
117
|
height: 16px;
|
|
@@ -125,9 +131,17 @@
|
|
|
125
131
|
border-radius: 50%;
|
|
126
132
|
}
|
|
127
133
|
|
|
134
|
+
&_isDisabled {
|
|
135
|
+
background: $grey-1;
|
|
136
|
+
}
|
|
137
|
+
|
|
128
138
|
&_isActive {
|
|
129
139
|
transform: translateX(28px);
|
|
130
140
|
}
|
|
141
|
+
|
|
142
|
+
&_isActiveAndDisabled {
|
|
143
|
+
background: $white;
|
|
144
|
+
}
|
|
131
145
|
}
|
|
132
146
|
|
|
133
147
|
.label {
|
|
@@ -143,4 +157,8 @@
|
|
|
143
157
|
&_alignCenter {
|
|
144
158
|
text-align: center;
|
|
145
159
|
}
|
|
160
|
+
|
|
161
|
+
&_isDisabled {
|
|
162
|
+
color: $text-disabled;
|
|
163
|
+
}
|
|
146
164
|
}
|
|
@@ -26,7 +26,10 @@ const SwitchButton: FC<SwitchButtonProps> = ({
|
|
|
26
26
|
})}
|
|
27
27
|
>
|
|
28
28
|
{label ? (
|
|
29
|
-
<label
|
|
29
|
+
<label
|
|
30
|
+
className={s('label', { label_alignCenter: alignCenter, label_inlineLabel: inlineLabel, label_isDisabled: disabled })}
|
|
31
|
+
htmlFor={name}
|
|
32
|
+
>
|
|
30
33
|
{label}
|
|
31
34
|
</label>
|
|
32
35
|
) : null}
|
|
@@ -46,13 +49,17 @@ const SwitchButton: FC<SwitchButtonProps> = ({
|
|
|
46
49
|
/>
|
|
47
50
|
<span
|
|
48
51
|
className={s('line', {
|
|
49
|
-
line_isActive: checked
|
|
52
|
+
line_isActive: checked,
|
|
53
|
+
line_isDisabled: disabled,
|
|
54
|
+
line_isActiveAndDisabled: checked && disabled
|
|
50
55
|
})}
|
|
51
56
|
/>
|
|
52
57
|
<span
|
|
53
58
|
className={s('circle', {
|
|
54
59
|
circle_isNotActive: !checked,
|
|
55
|
-
circle_isActive: checked
|
|
60
|
+
circle_isActive: checked,
|
|
61
|
+
circle_isDisabled: disabled,
|
|
62
|
+
circle_isActiveAndDisabled: checked && disabled
|
|
56
63
|
})}
|
|
57
64
|
/>
|
|
58
65
|
</div>
|