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