benivo-ui-library 1.9.59 → 1.9.60
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 +12 -106
- package/datePicker.less +36 -0
- package/index.js +1 -1
- package/package.json +1 -1
- package/radiobutton.less +11 -101
package/checkbox.less
CHANGED
|
@@ -3,45 +3,11 @@
|
|
|
3
3
|
//
|
|
4
4
|
.form-check {
|
|
5
5
|
position: relative;
|
|
6
|
-
padding-left:
|
|
6
|
+
padding-left: 1.75rem;
|
|
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
|
-
|
|
45
11
|
&.round-checkbox {
|
|
46
12
|
padding-left: 46px;
|
|
47
13
|
|
|
@@ -49,7 +15,7 @@
|
|
|
49
15
|
top: 0;
|
|
50
16
|
height: 20px;
|
|
51
17
|
width: 36px;
|
|
52
|
-
border: solid 1px var(--
|
|
18
|
+
border: solid 1px var(--border-100);
|
|
53
19
|
.border-radius(100px);
|
|
54
20
|
background-color: var(--bg-100);
|
|
55
21
|
transition: .4s;
|
|
@@ -110,21 +76,14 @@
|
|
|
110
76
|
&:checked {
|
|
111
77
|
&+.checkbox-box {
|
|
112
78
|
background-color: var(--white);
|
|
113
|
-
border-color: var(--
|
|
79
|
+
border-color: var(--border-200);
|
|
114
80
|
}
|
|
115
81
|
}
|
|
116
82
|
}
|
|
117
83
|
}
|
|
118
84
|
|
|
119
85
|
input {
|
|
120
|
-
|
|
121
|
-
top: 0;
|
|
122
|
-
left: 0;
|
|
123
|
-
width: 1px;
|
|
124
|
-
height: 1px;
|
|
125
|
-
margin: 0;
|
|
126
|
-
opacity: 0;
|
|
127
|
-
pointer-events: none;
|
|
86
|
+
display: none;
|
|
128
87
|
|
|
129
88
|
&+.checkbox-box.disabled {
|
|
130
89
|
box-shadow: none;
|
|
@@ -138,8 +97,8 @@
|
|
|
138
97
|
|
|
139
98
|
&:checked {
|
|
140
99
|
&+.checkbox-box {
|
|
141
|
-
background-color: var(--
|
|
142
|
-
border-color: var(--
|
|
100
|
+
background-color: var(--primary);
|
|
101
|
+
border-color: var(--primary);
|
|
143
102
|
|
|
144
103
|
&:after {
|
|
145
104
|
display: inline-block;
|
|
@@ -170,46 +129,9 @@
|
|
|
170
129
|
}
|
|
171
130
|
}
|
|
172
131
|
|
|
173
|
-
&:
|
|
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 {
|
|
132
|
+
&:hover:not(:checked):not(:disabled) {
|
|
211
133
|
&+.checkbox-box {
|
|
212
|
-
|
|
134
|
+
border-color: var(--primary);
|
|
213
135
|
}
|
|
214
136
|
}
|
|
215
137
|
}
|
|
@@ -221,13 +143,13 @@
|
|
|
221
143
|
height: 1.25rem;
|
|
222
144
|
width: 1.25rem;
|
|
223
145
|
min-width: 20px;
|
|
224
|
-
border: 1px solid var(--
|
|
146
|
+
border: 1px solid var(--border-200);
|
|
225
147
|
margin-right: .25px;
|
|
226
148
|
color: var(--white);
|
|
227
149
|
display: flex;
|
|
228
150
|
justify-content: center;
|
|
229
151
|
align-items: center;
|
|
230
|
-
.border-radius(.
|
|
152
|
+
.border-radius(.25rem);
|
|
231
153
|
|
|
232
154
|
&:focus-visible {
|
|
233
155
|
outline: none;
|
|
@@ -252,25 +174,10 @@
|
|
|
252
174
|
border-color: var(--error-main);
|
|
253
175
|
}
|
|
254
176
|
}
|
|
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
|
-
}
|
|
269
177
|
}
|
|
270
178
|
|
|
271
179
|
small {
|
|
272
180
|
display: block;
|
|
273
|
-
color: var(--grey-600);
|
|
274
181
|
}
|
|
275
182
|
|
|
276
183
|
label {
|
|
@@ -280,7 +187,7 @@
|
|
|
280
187
|
&.right-side {
|
|
281
188
|
text-align: right;
|
|
282
189
|
padding-left: 0;
|
|
283
|
-
padding-right:
|
|
190
|
+
padding-right: 1.75rem;
|
|
284
191
|
|
|
285
192
|
.checkbox-box {
|
|
286
193
|
left: inherit;
|
|
@@ -290,7 +197,6 @@
|
|
|
290
197
|
|
|
291
198
|
.form-check-label {
|
|
292
199
|
color: var(--grey-700);
|
|
293
|
-
font-weight: @font-weight-medium;
|
|
294
200
|
|
|
295
201
|
&:focus-visible {
|
|
296
202
|
outline: 1px auto Highlight;
|
|
@@ -325,7 +231,7 @@
|
|
|
325
231
|
left: 0;
|
|
326
232
|
right: 0;
|
|
327
233
|
bottom: 0;
|
|
328
|
-
border: solid 1px var(--
|
|
234
|
+
border: solid 1px var(--border-100);
|
|
329
235
|
.border-radius(18px);
|
|
330
236
|
background-color: var(--bg-100);
|
|
331
237
|
.transition(.4s);
|
package/datePicker.less
CHANGED
|
@@ -268,6 +268,42 @@
|
|
|
268
268
|
}
|
|
269
269
|
}
|
|
270
270
|
}
|
|
271
|
+
|
|
272
|
+
.bn-datepicker__footer {
|
|
273
|
+
border-top: @calendarWeekDaysBorder;
|
|
274
|
+
display: flex;
|
|
275
|
+
justify-content: space-between;
|
|
276
|
+
align-items: center;
|
|
277
|
+
padding: 10px 14px;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
.bn-datepicker__footer-btn {
|
|
281
|
+
border: 1px solid var(--border-200);
|
|
282
|
+
border-radius: 8px;
|
|
283
|
+
background: var(--white);
|
|
284
|
+
color: var(--text-600);
|
|
285
|
+
font-size: 14px;
|
|
286
|
+
line-height: 20px;
|
|
287
|
+
padding: 6px 12px;
|
|
288
|
+
cursor: pointer;
|
|
289
|
+
|
|
290
|
+
&:hover {
|
|
291
|
+
border-color: var(--primary);
|
|
292
|
+
color: var(--primary);
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
&.bn-datepicker__footer-btn--clear {
|
|
296
|
+
border-color: transparent;
|
|
297
|
+
padding-left: 0;
|
|
298
|
+
color: var(--error-main);
|
|
299
|
+
|
|
300
|
+
&:hover {
|
|
301
|
+
border-color: transparent;
|
|
302
|
+
color: var(--error-main);
|
|
303
|
+
text-decoration: underline;
|
|
304
|
+
}
|
|
305
|
+
}
|
|
306
|
+
}
|
|
271
307
|
}
|
|
272
308
|
|
|
273
309
|
input.native-date-picker {
|