benivo-ui-library 1.8.99 → 1.9.1

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.
Files changed (3) hide show
  1. package/checkbox.less +121 -81
  2. package/index.js +1 -1
  3. package/package.json +1 -1
package/checkbox.less CHANGED
@@ -3,29 +3,27 @@
3
3
  //
4
4
  .form-check {
5
5
  position: relative;
6
- font-size: 1rem;
7
6
  padding-left: 1.75rem;
8
- margin-bottom: @spacer;
9
- min-height: 1.5rem;
10
- min-width: 1rem;
7
+ min-height: 1.75rem;
8
+ min-width: 1.75rem;
9
+ font-size: 1rem;
11
10
 
12
11
  &.round-checkbox {
13
12
  padding-left: 46px;
14
13
 
15
- label {
16
- &:before {
17
- height: 20px;
18
- width: 36px;
19
- .border-radius(100px);
20
- background-color: var(--bg-50);
21
- border: 1px solid var(--border-200);
22
- top: 0;
23
- transition: .4s;
24
- }
14
+ .checkbox-box {
15
+ top: 0;
16
+ height: 20px;
17
+ width: 36px;
18
+ border: solid 1px var(--border-100);
19
+ .border-radius(100px);
20
+ background-color: var(--bg-100);
21
+ transition: .4s;
25
22
 
26
23
  &:after {
27
24
  position: absolute;
28
- top: 2px;
25
+ top: 1px;
26
+ bottom: 1px;
29
27
  left: 3px;
30
28
  content: '';
31
29
  height: 16px;
@@ -34,42 +32,35 @@
34
32
  background-color: var(--white);
35
33
  transition: .4s;
36
34
  }
37
- }
38
-
39
- label:hover {
40
35
 
41
- &:after {
42
- top: 2px;
43
- left: 3px;
36
+ &:hover {
37
+ &:after {
38
+ top: 1px;
39
+ left: 3px;
40
+ }
44
41
  }
45
42
  }
46
43
 
47
44
  input {
48
45
  &:checked {
49
- &+label:after {
46
+ &+.checkbox-box:after {
50
47
  content: '';
51
- top: 2px;
48
+ top: 1px;
52
49
  left: 18px;
53
50
  }
54
51
  }
55
52
  }
56
53
  }
57
54
 
58
- &.disabled {
59
- pointer-events: none;
60
-
61
- input {
62
- &:checked {
63
- &+label:before {
64
- background-color: var(--text-300);
65
- border-color: var(--text-300);
66
- }
55
+ .field-invalid-msg {
56
+ color: var(--error-main);
57
+ font-size: 12px;
58
+ margin-top: 2px;
59
+ }
67
60
 
68
- &+label:after {
69
- color: var(--white);
70
- }
71
- }
72
- }
61
+ .not-allowed,
62
+ .disabled {
63
+ pointer-events: none;
73
64
  }
74
65
 
75
66
  &.checkbox-loading-state {
@@ -77,7 +68,7 @@
77
68
 
78
69
  input {
79
70
  &:checked {
80
- &+label:before {
71
+ &+.checkbox-box {
81
72
  background-color: var(--white);
82
73
  border-color: var(--border-200);
83
74
  }
@@ -88,38 +79,62 @@
88
79
  input {
89
80
  display: none;
90
81
 
82
+ &+.checkbox-box.disabled {
83
+ box-shadow: none;
84
+ background-color: var(--bg-50);
85
+ border-color: var(--grey-300);
86
+
87
+ &:after {
88
+ color: var(--white);
89
+ }
90
+ }
91
+
91
92
  &:checked {
92
- &+label:before {
93
+ &+.checkbox-box {
93
94
  background-color: var(--primary);
94
95
  border-color: var(--primary);
95
- }
96
96
 
97
- &+label:after {
98
- display: inline-block;
99
- position: absolute;
100
- left: 0.25rem;
101
- top: 0.4rem;
102
- content: '\e91a';
103
- font-family: 'icomoon';
104
- font-size: 0.5rem;
105
- color: var(--white);
97
+ &:after {
98
+ display: inline-block;
99
+ position: absolute;
100
+ left: 0.25rem;
101
+ top: 0.4rem;
102
+ content: '\e91a';
103
+ font-family: 'icomoon';
104
+ font-size: 0.5rem;
105
+ color: var(--white);
106
+ }
107
+
108
+ &:focus-visible {
109
+ outline: none;
110
+ box-shadow: 0 0 0 4px rgba(41, 112, 255, 0.24);
111
+ }
112
+
113
+ &.disabled {
114
+ box-shadow: none;
115
+ background-color: var(--bg-50);
116
+ border-color: var(--grey-300);
117
+
118
+ &:after {
119
+ color: var(--white);
120
+ }
121
+ }
106
122
  }
107
123
  }
108
124
 
109
125
  &:hover:not(:checked):not(:disabled) {
110
- &+label:before {
126
+ &+.checkbox-box {
111
127
  border-color: var(--primary);
112
128
  }
113
129
  }
114
130
  }
115
131
 
116
- label:before {
117
- content: "";
132
+ .checkbox-box {
118
133
  position: absolute;
119
134
  left: 0;
120
135
  top: 0.25rem;
121
- height: 1rem;
122
- width: 1rem;
136
+ height: 1.25rem;
137
+ width: 1.25rem;
123
138
  border: 1px solid var(--border-200);
124
139
  margin-right: .25px;
125
140
  color: var(--white);
@@ -127,6 +142,11 @@
127
142
  justify-content: center;
128
143
  align-items: center;
129
144
  .border-radius(.25rem);
145
+
146
+ &:focus-visible {
147
+ outline: none;
148
+ box-shadow: 0 0 0 4px rgba(152, 162, 179, 0.14);
149
+ }
130
150
  }
131
151
 
132
152
  label[data-focus-click]:focus-visible:before {
@@ -137,13 +157,14 @@
137
157
  // Validation
138
158
  input {
139
159
  &.field-invalid {
140
- &+label:before {
141
- border-color: var(--error-main);
142
- }
143
160
 
144
- &+label {
161
+ &~label {
145
162
  color: var(--error-main);
146
163
  }
164
+
165
+ &+.checkbox-box {
166
+ border-color: var(--error-main);
167
+ }
147
168
  }
148
169
  }
149
170
 
@@ -160,14 +181,14 @@
160
181
  padding-left: 0;
161
182
  padding-right: 1.75rem;
162
183
 
163
- label:before {
184
+ .checkbox-box {
164
185
  left: inherit;
165
186
  right: 0;
166
187
  }
167
188
 
168
189
  input {
169
190
  &:checked {
170
- &+label:after {
191
+ &+.checkbox-box:after {
171
192
  left: inherit;
172
193
  right: 0.25rem;
173
194
  }
@@ -176,6 +197,8 @@
176
197
  }
177
198
 
178
199
  .form-check-label {
200
+ color: var(--grey-700);
201
+
179
202
  &:focus-visible {
180
203
  outline: 1px auto Highlight;
181
204
  outline: 1px auto -webkit-focus-ring-color;
@@ -209,11 +232,17 @@
209
232
  left: 0;
210
233
  right: 0;
211
234
  bottom: 0;
235
+ border: solid 1px var(--border-100);
212
236
  .border-radius(18px);
213
- background-color: var(--grey-300);
214
- border: solid 1px var(--grey-300);
237
+ background-color: var(--bg-100);
215
238
  .transition(.4s);
216
239
 
240
+ &:focus-visible {
241
+ outline: none;
242
+ box-shadow: 0 0 0 4px rgba(152, 162, 179, 0.20);
243
+ }
244
+
245
+
217
246
  &:before {
218
247
  position: absolute;
219
248
  content: "";
@@ -224,11 +253,17 @@
224
253
  top: 1px;
225
254
  .border-radius(50%);
226
255
  background-color: var(--white);
256
+ box-shadow: 0 1px 3px 0 rgba(16, 24, 40, 0.10), 0 1px 2px 0 rgba(16, 24, 40, 0.06);
227
257
  .transition(.4s);
228
258
  }
229
259
 
230
260
  &.disabled {
231
261
  .filter(grayscale(100%));
262
+ box-shadow: none;
263
+
264
+ &:before {
265
+ background-color: var(--bg-50);
266
+ }
232
267
  }
233
268
  }
234
269
 
@@ -244,7 +279,13 @@
244
279
  background-color: var(--primary);
245
280
  border-color: var(--primary);
246
281
 
247
- &.not-allowed {
282
+ &:focus-visible {
283
+ box-shadow: 0 0 0 4px rgba(41, 112, 255, 0.24);
284
+ }
285
+
286
+ &.not-allowed,
287
+ &.disabled {
288
+ box-shadow: none;
248
289
  background-color: color-mix(in srgb, white 20%, var(--primary));
249
290
  border-color: color-mix(in srgb, white 20%, var(--primary));
250
291
 
@@ -269,6 +310,10 @@
269
310
  label:before {
270
311
  content: none;
271
312
  }
313
+
314
+ .checkbox-box {
315
+ display: none;
316
+ }
272
317
  }
273
318
  }
274
319
 
@@ -276,34 +321,29 @@
276
321
  .form-check {
277
322
  padding-left:~"calc(@{gatter} + 1.75rem)";
278
323
 
279
- label:before {
280
- left: @gatter;
324
+ &.on-off,
325
+ &.round-checkbox {
326
+ padding-left:~"calc(@{gatter} + 40px)";
281
327
  }
282
328
 
283
- input {
284
- &:checked {
285
- &+label:after {
286
- left:~"calc(@{gatter} + .25rem)";
287
- }
288
- }
329
+ .checkbox-box,
330
+ .on-off-slide {
331
+ left: @gatter;
289
332
  }
290
333
 
291
334
  &.right-side {
292
335
  padding-left: 0;
293
336
  padding-right:~"calc(@{gatter} + 1.75rem)";
294
337
 
295
- label:before {
296
- left: initial;
297
- right: @gatter;
338
+ &.on-off,
339
+ &.round-checkbox {
340
+ padding-right:~"calc(@{gatter} + 40px)";
298
341
  }
299
342
 
300
- input {
301
- &:checked {
302
- &+label:after {
303
- left: initial;
304
- right:~"calc(@{gatter} + .25rem)";
305
- }
306
- }
343
+ .checkbox-box,
344
+ .on-off-slide {
345
+ left: initial;
346
+ right: @gatter;
307
347
  }
308
348
  }
309
349
  }