benivo-ui-library 1.9.60 → 1.9.62
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/checkbox.less +106 -11
- package/index.js +1 -1
- package/package.json +1 -1
- package/radiobutton.less +101 -11
package/checkbox.less
CHANGED
|
@@ -3,11 +3,45 @@
|
|
|
3
3
|
//
|
|
4
4
|
.form-check {
|
|
5
5
|
position: relative;
|
|
6
|
-
padding-left:
|
|
6
|
+
padding-left: 2rem;
|
|
7
7
|
min-height: 1.75rem;
|
|
8
8
|
min-width: 1.75rem;
|
|
9
9
|
font-size: 1rem;
|
|
10
10
|
|
|
11
|
+
&.checkbox-sm {
|
|
12
|
+
min-height: 1.5rem;
|
|
13
|
+
min-width: 1.5rem;
|
|
14
|
+
padding-left: 1.5rem;
|
|
15
|
+
|
|
16
|
+
.checkbox-box {
|
|
17
|
+
top: 0.25rem;
|
|
18
|
+
width: 1rem;
|
|
19
|
+
height: 1rem;
|
|
20
|
+
min-width: 16px;
|
|
21
|
+
.border-radius(.25rem);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
input {
|
|
25
|
+
|
|
26
|
+
&:checked,
|
|
27
|
+
&:indeterminate {
|
|
28
|
+
&+.checkbox-box {
|
|
29
|
+
&:after {
|
|
30
|
+
font-size: 0.45rem;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&:indeterminate {
|
|
36
|
+
&+.checkbox-box {
|
|
37
|
+
&:after {
|
|
38
|
+
width: 0.5rem;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
11
45
|
&.round-checkbox {
|
|
12
46
|
padding-left: 46px;
|
|
13
47
|
|
|
@@ -15,7 +49,7 @@
|
|
|
15
49
|
top: 0;
|
|
16
50
|
height: 20px;
|
|
17
51
|
width: 36px;
|
|
18
|
-
border: solid 1px var(--
|
|
52
|
+
border: solid 1px var(--grey-300);
|
|
19
53
|
.border-radius(100px);
|
|
20
54
|
background-color: var(--bg-100);
|
|
21
55
|
transition: .4s;
|
|
@@ -76,7 +110,7 @@
|
|
|
76
110
|
&:checked {
|
|
77
111
|
&+.checkbox-box {
|
|
78
112
|
background-color: var(--white);
|
|
79
|
-
border-color: var(--
|
|
113
|
+
border-color: var(--grey-300);
|
|
80
114
|
}
|
|
81
115
|
}
|
|
82
116
|
}
|
|
@@ -84,6 +118,14 @@
|
|
|
84
118
|
|
|
85
119
|
input {
|
|
86
120
|
display: none;
|
|
121
|
+
position: absolute;
|
|
122
|
+
top: 0;
|
|
123
|
+
left: 0;
|
|
124
|
+
width: 1px;
|
|
125
|
+
height: 1px;
|
|
126
|
+
margin: 0;
|
|
127
|
+
opacity: 0;
|
|
128
|
+
pointer-events: none;
|
|
87
129
|
|
|
88
130
|
&+.checkbox-box.disabled {
|
|
89
131
|
box-shadow: none;
|
|
@@ -97,8 +139,8 @@
|
|
|
97
139
|
|
|
98
140
|
&:checked {
|
|
99
141
|
&+.checkbox-box {
|
|
100
|
-
background-color: var(--
|
|
101
|
-
border-color: var(--
|
|
142
|
+
background-color: var(--brand-600);
|
|
143
|
+
border-color: var(--brand-600);
|
|
102
144
|
|
|
103
145
|
&:after {
|
|
104
146
|
display: inline-block;
|
|
@@ -129,9 +171,46 @@
|
|
|
129
171
|
}
|
|
130
172
|
}
|
|
131
173
|
|
|
132
|
-
&:
|
|
174
|
+
&:indeterminate {
|
|
175
|
+
&+.checkbox-box {
|
|
176
|
+
background-color: var(--brand-600);
|
|
177
|
+
border-color: var(--brand-600);
|
|
178
|
+
|
|
179
|
+
&:after {
|
|
180
|
+
content: '';
|
|
181
|
+
position: absolute;
|
|
182
|
+
left: 50%;
|
|
183
|
+
top: 50%;
|
|
184
|
+
width: 0.625rem;
|
|
185
|
+
height: 0.125rem;
|
|
186
|
+
border-radius: 999px;
|
|
187
|
+
background-color: var(--white);
|
|
188
|
+
.transform(translate(-50%, -50%));
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
&.disabled {
|
|
192
|
+
box-shadow: none;
|
|
193
|
+
background-color: var(--bg-50);
|
|
194
|
+
border-color: var(--grey-300);
|
|
195
|
+
|
|
196
|
+
&:after {
|
|
197
|
+
background-color: var(--grey-300);
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
&:focus-visible {
|
|
204
|
+
&+.checkbox-box {
|
|
205
|
+
outline: none;
|
|
206
|
+
box-shadow: 0 0 0 4px rgba(152, 162, 179, 0.14);
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
&:checked:focus-visible,
|
|
211
|
+
&:indeterminate:focus-visible {
|
|
133
212
|
&+.checkbox-box {
|
|
134
|
-
|
|
213
|
+
box-shadow: 0 0 0 4px rgba(41, 112, 255, 0.24);
|
|
135
214
|
}
|
|
136
215
|
}
|
|
137
216
|
}
|
|
@@ -143,13 +222,13 @@
|
|
|
143
222
|
height: 1.25rem;
|
|
144
223
|
width: 1.25rem;
|
|
145
224
|
min-width: 20px;
|
|
146
|
-
border: 1px solid var(--
|
|
225
|
+
border: 1px solid var(--grey-300);
|
|
147
226
|
margin-right: .25px;
|
|
148
227
|
color: var(--white);
|
|
149
228
|
display: flex;
|
|
150
229
|
justify-content: center;
|
|
151
230
|
align-items: center;
|
|
152
|
-
.border-radius(.
|
|
231
|
+
.border-radius(.375rem);
|
|
153
232
|
|
|
154
233
|
&:focus-visible {
|
|
155
234
|
outline: none;
|
|
@@ -174,10 +253,25 @@
|
|
|
174
253
|
border-color: var(--error-main);
|
|
175
254
|
}
|
|
176
255
|
}
|
|
256
|
+
|
|
257
|
+
&:disabled {
|
|
258
|
+
&+.checkbox-box {
|
|
259
|
+
background-color: var(--bg-50);
|
|
260
|
+
border-color: var(--grey-300);
|
|
261
|
+
box-shadow: none;
|
|
262
|
+
cursor: not-allowed;
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
&~.form-check-label,
|
|
266
|
+
&~small {
|
|
267
|
+
color: var(--grey-400);
|
|
268
|
+
}
|
|
269
|
+
}
|
|
177
270
|
}
|
|
178
271
|
|
|
179
272
|
small {
|
|
180
273
|
display: block;
|
|
274
|
+
color: var(--grey-600);
|
|
181
275
|
}
|
|
182
276
|
|
|
183
277
|
label {
|
|
@@ -187,7 +281,7 @@
|
|
|
187
281
|
&.right-side {
|
|
188
282
|
text-align: right;
|
|
189
283
|
padding-left: 0;
|
|
190
|
-
padding-right:
|
|
284
|
+
padding-right: 2rem;
|
|
191
285
|
|
|
192
286
|
.checkbox-box {
|
|
193
287
|
left: inherit;
|
|
@@ -197,6 +291,7 @@
|
|
|
197
291
|
|
|
198
292
|
.form-check-label {
|
|
199
293
|
color: var(--grey-700);
|
|
294
|
+
font-weight: @font-weight-medium;
|
|
200
295
|
|
|
201
296
|
&:focus-visible {
|
|
202
297
|
outline: 1px auto Highlight;
|
|
@@ -231,7 +326,7 @@
|
|
|
231
326
|
left: 0;
|
|
232
327
|
right: 0;
|
|
233
328
|
bottom: 0;
|
|
234
|
-
border: solid 1px var(--
|
|
329
|
+
border: solid 1px var(--grey-300);
|
|
235
330
|
.border-radius(18px);
|
|
236
331
|
background-color: var(--bg-100);
|
|
237
332
|
.transition(.4s);
|