benivo-ui-library 1.9.57 → 1.9.59
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 -12
- 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,14 +110,21 @@
|
|
|
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
|
}
|
|
83
117
|
}
|
|
84
118
|
|
|
85
119
|
input {
|
|
86
|
-
|
|
120
|
+
position: absolute;
|
|
121
|
+
top: 0;
|
|
122
|
+
left: 0;
|
|
123
|
+
width: 1px;
|
|
124
|
+
height: 1px;
|
|
125
|
+
margin: 0;
|
|
126
|
+
opacity: 0;
|
|
127
|
+
pointer-events: none;
|
|
87
128
|
|
|
88
129
|
&+.checkbox-box.disabled {
|
|
89
130
|
box-shadow: none;
|
|
@@ -97,8 +138,8 @@
|
|
|
97
138
|
|
|
98
139
|
&:checked {
|
|
99
140
|
&+.checkbox-box {
|
|
100
|
-
background-color: var(--
|
|
101
|
-
border-color: var(--
|
|
141
|
+
background-color: var(--brand-600);
|
|
142
|
+
border-color: var(--brand-600);
|
|
102
143
|
|
|
103
144
|
&:after {
|
|
104
145
|
display: inline-block;
|
|
@@ -129,9 +170,46 @@
|
|
|
129
170
|
}
|
|
130
171
|
}
|
|
131
172
|
|
|
132
|
-
&:
|
|
173
|
+
&:indeterminate {
|
|
174
|
+
&+.checkbox-box {
|
|
175
|
+
background-color: var(--brand-600);
|
|
176
|
+
border-color: var(--brand-600);
|
|
177
|
+
|
|
178
|
+
&:after {
|
|
179
|
+
content: '';
|
|
180
|
+
position: absolute;
|
|
181
|
+
left: 50%;
|
|
182
|
+
top: 50%;
|
|
183
|
+
width: 0.625rem;
|
|
184
|
+
height: 0.125rem;
|
|
185
|
+
border-radius: 999px;
|
|
186
|
+
background-color: var(--white);
|
|
187
|
+
.transform(translate(-50%, -50%));
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
&.disabled {
|
|
191
|
+
box-shadow: none;
|
|
192
|
+
background-color: var(--bg-50);
|
|
193
|
+
border-color: var(--grey-300);
|
|
194
|
+
|
|
195
|
+
&:after {
|
|
196
|
+
background-color: var(--grey-300);
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
&:focus-visible {
|
|
203
|
+
&+.checkbox-box {
|
|
204
|
+
outline: none;
|
|
205
|
+
box-shadow: 0 0 0 4px rgba(152, 162, 179, 0.14);
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
&:checked:focus-visible,
|
|
210
|
+
&:indeterminate:focus-visible {
|
|
133
211
|
&+.checkbox-box {
|
|
134
|
-
|
|
212
|
+
box-shadow: 0 0 0 4px rgba(41, 112, 255, 0.24);
|
|
135
213
|
}
|
|
136
214
|
}
|
|
137
215
|
}
|
|
@@ -143,13 +221,13 @@
|
|
|
143
221
|
height: 1.25rem;
|
|
144
222
|
width: 1.25rem;
|
|
145
223
|
min-width: 20px;
|
|
146
|
-
border: 1px solid var(--
|
|
224
|
+
border: 1px solid var(--grey-300);
|
|
147
225
|
margin-right: .25px;
|
|
148
226
|
color: var(--white);
|
|
149
227
|
display: flex;
|
|
150
228
|
justify-content: center;
|
|
151
229
|
align-items: center;
|
|
152
|
-
.border-radius(.
|
|
230
|
+
.border-radius(.375rem);
|
|
153
231
|
|
|
154
232
|
&:focus-visible {
|
|
155
233
|
outline: none;
|
|
@@ -174,10 +252,25 @@
|
|
|
174
252
|
border-color: var(--error-main);
|
|
175
253
|
}
|
|
176
254
|
}
|
|
255
|
+
|
|
256
|
+
&:disabled {
|
|
257
|
+
&+.checkbox-box {
|
|
258
|
+
background-color: var(--bg-50);
|
|
259
|
+
border-color: var(--grey-300);
|
|
260
|
+
box-shadow: none;
|
|
261
|
+
cursor: not-allowed;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
&~.form-check-label,
|
|
265
|
+
&~small {
|
|
266
|
+
color: var(--grey-400);
|
|
267
|
+
}
|
|
268
|
+
}
|
|
177
269
|
}
|
|
178
270
|
|
|
179
271
|
small {
|
|
180
272
|
display: block;
|
|
273
|
+
color: var(--grey-600);
|
|
181
274
|
}
|
|
182
275
|
|
|
183
276
|
label {
|
|
@@ -187,7 +280,7 @@
|
|
|
187
280
|
&.right-side {
|
|
188
281
|
text-align: right;
|
|
189
282
|
padding-left: 0;
|
|
190
|
-
padding-right:
|
|
283
|
+
padding-right: 2rem;
|
|
191
284
|
|
|
192
285
|
.checkbox-box {
|
|
193
286
|
left: inherit;
|
|
@@ -197,6 +290,7 @@
|
|
|
197
290
|
|
|
198
291
|
.form-check-label {
|
|
199
292
|
color: var(--grey-700);
|
|
293
|
+
font-weight: @font-weight-medium;
|
|
200
294
|
|
|
201
295
|
&:focus-visible {
|
|
202
296
|
outline: 1px auto Highlight;
|
|
@@ -231,7 +325,7 @@
|
|
|
231
325
|
left: 0;
|
|
232
326
|
right: 0;
|
|
233
327
|
bottom: 0;
|
|
234
|
-
border: solid 1px var(--
|
|
328
|
+
border: solid 1px var(--grey-300);
|
|
235
329
|
.border-radius(18px);
|
|
236
330
|
background-color: var(--bg-100);
|
|
237
331
|
.transition(.4s);
|