benivo-ui-library 1.9.73 → 1.9.75
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/badge.less +186 -0
- package/benivo-ui-lib.less +6 -0
- package/checkbox.less +126 -80
- package/datePicker.less +8 -0
- package/featuredIcon.less +35 -0
- package/fileTypeIcon.less +72 -0
- package/folderIcon.less +8 -0
- package/index.js +1 -1
- package/index.js.LICENSE.txt +1 -1
- package/miIcon.less +8 -0
- package/package.json +1 -1
- package/pageHeaderIcon.less +13 -0
- package/radiobutton.less +67 -39
package/badge.less
ADDED
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Badge
|
|
3
|
+
//
|
|
4
|
+
.bnv-badge {
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
display: inline-flex;
|
|
7
|
+
align-items: center;
|
|
8
|
+
max-width: 100%;
|
|
9
|
+
font-weight: @font-weight-semibold;
|
|
10
|
+
white-space: nowrap;
|
|
11
|
+
vertical-align: middle;
|
|
12
|
+
|
|
13
|
+
.bnv-badge-label {
|
|
14
|
+
overflow: hidden;
|
|
15
|
+
text-overflow: ellipsis;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
// Leading dot — 8px box with a centred 6px circle (matches Figma geometry)
|
|
19
|
+
.bnv-badge-dot {
|
|
20
|
+
display: inline-flex;
|
|
21
|
+
align-items: center;
|
|
22
|
+
justify-content: center;
|
|
23
|
+
flex-shrink: 0;
|
|
24
|
+
width: 8px;
|
|
25
|
+
height: 8px;
|
|
26
|
+
|
|
27
|
+
.bnv-badge-dot-inner {
|
|
28
|
+
width: 6px;
|
|
29
|
+
height: 6px;
|
|
30
|
+
.border-radius(50%);
|
|
31
|
+
background-color: currentColor;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
// Icon slots (leading / trailing icons, flags, avatars)
|
|
36
|
+
.bnv-badge-icon {
|
|
37
|
+
display: inline-flex;
|
|
38
|
+
align-items: center;
|
|
39
|
+
justify-content: center;
|
|
40
|
+
flex-shrink: 0;
|
|
41
|
+
|
|
42
|
+
svg {
|
|
43
|
+
display: block;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
// Dismiss button — sits in its own container that, on hover/focus, fills
|
|
48
|
+
// with a darker tint of the badge's own colour (currentColor is the badge
|
|
49
|
+
// text/accent hue), matching the Figma "_Badge close X" hover state.
|
|
50
|
+
.bnv-badge-dismiss {
|
|
51
|
+
display: inline-flex;
|
|
52
|
+
align-items: center;
|
|
53
|
+
justify-content: center;
|
|
54
|
+
flex-shrink: 0;
|
|
55
|
+
padding: 2px;
|
|
56
|
+
margin: 0;
|
|
57
|
+
border: 0;
|
|
58
|
+
background-color: transparent;
|
|
59
|
+
color: inherit;
|
|
60
|
+
cursor: pointer;
|
|
61
|
+
.border-radius(6px);
|
|
62
|
+
.transition(background-color .15s ease);
|
|
63
|
+
|
|
64
|
+
&:hover {
|
|
65
|
+
background-color: color-mix(in srgb, currentColor 16%, transparent);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
&:focus-visible {
|
|
69
|
+
outline: 2px solid currentColor;
|
|
70
|
+
outline-offset: -1px;
|
|
71
|
+
background-color: color-mix(in srgb, currentColor 16%, transparent);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
svg {
|
|
75
|
+
display: block;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
// Modern badge uses the tighter "Square" close radius (Figma)
|
|
81
|
+
.bnv-badge.bnv-badge-modern .bnv-badge-dismiss {
|
|
82
|
+
.border-radius(3px);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
//
|
|
86
|
+
// Sizes — height comes from font line-height + vertical padding
|
|
87
|
+
//
|
|
88
|
+
.bnv-badge.bnv-badge-sm {
|
|
89
|
+
gap: 4px;
|
|
90
|
+
padding: 2px 8px;
|
|
91
|
+
font-size: 12px;
|
|
92
|
+
line-height: 18px;
|
|
93
|
+
|
|
94
|
+
&.bnv-badge-has-dot,
|
|
95
|
+
&.bnv-badge-has-leading { padding-left: 6px; }
|
|
96
|
+
&.bnv-badge-has-trailing { padding-right: 6px; }
|
|
97
|
+
&.bnv-badge-dismissible { padding-right: 2px; }
|
|
98
|
+
&.bnv-badge-icon-only { padding: 2px; width: 22px; height: 22px; justify-content: center; }
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.bnv-badge.bnv-badge-md {
|
|
102
|
+
gap: 4px;
|
|
103
|
+
padding: 2px 10px;
|
|
104
|
+
font-size: 14px;
|
|
105
|
+
line-height: 20px;
|
|
106
|
+
|
|
107
|
+
&.bnv-badge-has-dot,
|
|
108
|
+
&.bnv-badge-has-leading { padding-left: 8px; }
|
|
109
|
+
&.bnv-badge-has-trailing { padding-right: 8px; }
|
|
110
|
+
&.bnv-badge-dismissible { padding-right: 4px; }
|
|
111
|
+
&.bnv-badge-icon-only { padding: 2px; width: 24px; height: 24px; justify-content: center; }
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.bnv-badge.bnv-badge-lg {
|
|
115
|
+
gap: 6px;
|
|
116
|
+
padding: 4px 12px;
|
|
117
|
+
font-size: 14px;
|
|
118
|
+
line-height: 20px;
|
|
119
|
+
|
|
120
|
+
&.bnv-badge-has-dot,
|
|
121
|
+
&.bnv-badge-has-leading { padding-left: 10px; }
|
|
122
|
+
&.bnv-badge-has-trailing { padding-right: 10px; }
|
|
123
|
+
&.bnv-badge-dismissible { padding-right: 6px; }
|
|
124
|
+
&.bnv-badge-icon-only { padding: 4px; width: 28px; height: 28px; justify-content: center; }
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
// Dot sits tight to the label
|
|
128
|
+
.bnv-badge.bnv-badge-has-dot { gap: 6px; }
|
|
129
|
+
|
|
130
|
+
//
|
|
131
|
+
// Pill variant — soft-filled, fully rounded
|
|
132
|
+
//
|
|
133
|
+
.bnv-badge.bnv-badge-pill {
|
|
134
|
+
.border-radius(9999px);
|
|
135
|
+
|
|
136
|
+
&.bnv-badge-gray { background-color: var(--bg-100); color: var(--text-600); }
|
|
137
|
+
&.bnv-badge-brand { background-color: var(--brand-50); color: var(--brand-700); }
|
|
138
|
+
&.bnv-badge-error { background-color: var(--error-light); color: var(--error-main); }
|
|
139
|
+
&.bnv-badge-warning { background-color: var(--warning-light);color: var(--warning-main); }
|
|
140
|
+
&.bnv-badge-success { background-color: var(--success-light);color: var(--success-main); }
|
|
141
|
+
&.bnv-badge-teal { background-color: var(--teal-50); color: var(--teal-700); }
|
|
142
|
+
&.bnv-badge-violet { background-color: var(--violet-50); color: var(--violet-700); }
|
|
143
|
+
&.bnv-badge-pink { background-color: var(--pink-50); color: var(--pink-700); }
|
|
144
|
+
&.bnv-badge-orange { background-color: var(--orange-50); color: var(--orange-700); }
|
|
145
|
+
&.bnv-badge-yellow { background-color: var(--yellow-50); color: var(--yellow-700); }
|
|
146
|
+
&.bnv-badge-rose { background-color: var(--rose-50); color: var(--rose-700); }
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
//
|
|
150
|
+
// Modern variant — white surface, border + subtle shadow, neutral text.
|
|
151
|
+
// The colour is carried by the dot only (text stays grey).
|
|
152
|
+
//
|
|
153
|
+
.bnv-badge.bnv-badge-modern {
|
|
154
|
+
background-color: var(--white);
|
|
155
|
+
color: var(--text-600);
|
|
156
|
+
border: 1px solid var(--border-200);
|
|
157
|
+
box-shadow: 0 1px 1px rgba(16, 24, 40, 0.05);
|
|
158
|
+
.border-radius(6px);
|
|
159
|
+
|
|
160
|
+
// Dot picks up the semantic colour even though the label is neutral
|
|
161
|
+
&.bnv-badge-gray .bnv-badge-dot-inner { background-color: var(--text-500); }
|
|
162
|
+
&.bnv-badge-brand .bnv-badge-dot-inner { background-color: var(--brand-500); }
|
|
163
|
+
&.bnv-badge-error .bnv-badge-dot-inner { background-color: var(--error-main); }
|
|
164
|
+
&.bnv-badge-warning .bnv-badge-dot-inner { background-color: var(--warning-main); }
|
|
165
|
+
&.bnv-badge-success .bnv-badge-dot-inner { background-color: var(--success-main); }
|
|
166
|
+
&.bnv-badge-teal .bnv-badge-dot-inner { background-color: var(--teal-500); }
|
|
167
|
+
&.bnv-badge-violet .bnv-badge-dot-inner { background-color: var(--violet-500); }
|
|
168
|
+
&.bnv-badge-pink .bnv-badge-dot-inner { background-color: var(--pink-500); }
|
|
169
|
+
&.bnv-badge-orange .bnv-badge-dot-inner { background-color: var(--orange-500); }
|
|
170
|
+
&.bnv-badge-yellow .bnv-badge-dot-inner { background-color: var(--yellow-500); }
|
|
171
|
+
&.bnv-badge-rose .bnv-badge-dot-inner { background-color: var(--rose-500); }
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
// Pill dot colour = the mid tone of each colour (dot inherits currentColor by
|
|
175
|
+
// default for semantic colours; override the accent hues to their 500 tone)
|
|
176
|
+
.bnv-badge.bnv-badge-pill {
|
|
177
|
+
&.bnv-badge-gray .bnv-badge-dot-inner { background-color: var(--text-500); }
|
|
178
|
+
&.bnv-badge-brand .bnv-badge-dot-inner { background-color: var(--brand-500); }
|
|
179
|
+
&.bnv-badge-teal .bnv-badge-dot-inner { background-color: var(--teal-500); }
|
|
180
|
+
&.bnv-badge-violet .bnv-badge-dot-inner { background-color: var(--violet-500); }
|
|
181
|
+
&.bnv-badge-pink .bnv-badge-dot-inner { background-color: var(--pink-500); }
|
|
182
|
+
&.bnv-badge-orange .bnv-badge-dot-inner { background-color: var(--orange-500); }
|
|
183
|
+
&.bnv-badge-yellow .bnv-badge-dot-inner { background-color: var(--yellow-500); }
|
|
184
|
+
&.bnv-badge-rose .bnv-badge-dot-inner { background-color: var(--rose-500); }
|
|
185
|
+
// error / warning / success dots stay on their main tone (= currentColor)
|
|
186
|
+
}
|
package/benivo-ui-lib.less
CHANGED
|
@@ -5,6 +5,12 @@
|
|
|
5
5
|
@import '../components/fantasyButton/fantasyButton.less';
|
|
6
6
|
@import '../components/checkbox/checkbox.less';
|
|
7
7
|
@import '../components/radiobutton/radiobutton.less';
|
|
8
|
+
@import '../icons/featuredIcon/featuredIcon.less';
|
|
9
|
+
@import '../icons/miIcon/miIcon.less';
|
|
10
|
+
@import '../icons/folderIcon/folderIcon.less';
|
|
11
|
+
@import '../icons/fileTypeIcon/fileTypeIcon.less';
|
|
12
|
+
@import '../components/badge/badge.less';
|
|
13
|
+
@import '../icons/pageHeaderIcon/pageHeaderIcon.less';
|
|
8
14
|
@import '../components/select/select.less';
|
|
9
15
|
@import '../components/datePicker/datePicker.less';
|
|
10
16
|
@import '../components/navigation/navigation.less';
|
package/checkbox.less
CHANGED
|
@@ -6,12 +6,15 @@
|
|
|
6
6
|
padding-left: 2rem;
|
|
7
7
|
min-height: 1.75rem;
|
|
8
8
|
min-width: 1.75rem;
|
|
9
|
-
font-size:
|
|
9
|
+
font-size: @font-size; // md text 16px
|
|
10
|
+
line-height: 24px;
|
|
10
11
|
|
|
11
12
|
&.checkbox-sm {
|
|
12
13
|
min-height: 1.5rem;
|
|
13
14
|
min-width: 1.5rem;
|
|
14
15
|
padding-left: 1.5rem;
|
|
16
|
+
font-size: @font-size-sm; // sm text 14px
|
|
17
|
+
line-height: 20px;
|
|
15
18
|
|
|
16
19
|
.checkbox-box {
|
|
17
20
|
top: 0.125rem;
|
|
@@ -23,11 +26,11 @@
|
|
|
23
26
|
|
|
24
27
|
input {
|
|
25
28
|
|
|
26
|
-
&:checked
|
|
27
|
-
&:indeterminate {
|
|
29
|
+
&:checked {
|
|
28
30
|
&+.checkbox-box {
|
|
29
31
|
&:after {
|
|
30
|
-
|
|
32
|
+
width: 9px;
|
|
33
|
+
height: 7px;
|
|
31
34
|
}
|
|
32
35
|
}
|
|
33
36
|
}
|
|
@@ -89,7 +92,8 @@
|
|
|
89
92
|
|
|
90
93
|
.field-invalid-msg {
|
|
91
94
|
color: var(--error-main);
|
|
92
|
-
font-size:
|
|
95
|
+
font-size: @font-size-sm;
|
|
96
|
+
line-height: 20px;
|
|
93
97
|
margin-top: 2px;
|
|
94
98
|
}
|
|
95
99
|
|
|
@@ -130,28 +134,32 @@
|
|
|
130
134
|
&+.checkbox-box.disabled {
|
|
131
135
|
box-shadow: none;
|
|
132
136
|
background-color: var(--bg-50);
|
|
133
|
-
border-color: var(--grey-
|
|
137
|
+
border-color: var(--grey-400);
|
|
134
138
|
|
|
135
139
|
&:after {
|
|
136
|
-
color: var(--grey-
|
|
140
|
+
background-color: var(--grey-400);
|
|
137
141
|
}
|
|
138
142
|
}
|
|
139
143
|
|
|
140
144
|
&:checked {
|
|
141
145
|
&+.checkbox-box {
|
|
142
|
-
background-color: var(--
|
|
143
|
-
border-color: var(--
|
|
146
|
+
background-color: var(--primary);
|
|
147
|
+
border-color: var(--primary);
|
|
144
148
|
|
|
149
|
+
// White tick — self-contained masked SVG (no icon-font dependency).
|
|
145
150
|
&:after {
|
|
146
|
-
|
|
151
|
+
content: '';
|
|
147
152
|
position: absolute;
|
|
148
153
|
left: 50%;
|
|
149
154
|
top: 50%;
|
|
150
155
|
.transform(translate(-50%, -50%));
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
156
|
+
width: 11px;
|
|
157
|
+
height: 9px;
|
|
158
|
+
background-color: var(--white);
|
|
159
|
+
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2011.3333%208.41667'%20fill='none'%3E%3Cpath%20d='M10.3333%201%203.91667%207.41667%201%204.5'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
|
|
160
|
+
-webkit-mask-size: contain;
|
|
161
|
+
mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2011.3333%208.41667'%20fill='none'%3E%3Cpath%20d='M10.3333%201%203.91667%207.41667%201%204.5'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
|
|
162
|
+
mask-size: contain;
|
|
155
163
|
}
|
|
156
164
|
|
|
157
165
|
&:focus-visible {
|
|
@@ -162,10 +170,10 @@
|
|
|
162
170
|
&.disabled {
|
|
163
171
|
box-shadow: none;
|
|
164
172
|
background-color: var(--bg-50);
|
|
165
|
-
border-color: var(--grey-
|
|
173
|
+
border-color: var(--grey-400);
|
|
166
174
|
|
|
167
175
|
&:after {
|
|
168
|
-
color: var(--grey-
|
|
176
|
+
background-color: var(--grey-400);
|
|
169
177
|
}
|
|
170
178
|
}
|
|
171
179
|
}
|
|
@@ -173,8 +181,8 @@
|
|
|
173
181
|
|
|
174
182
|
&:indeterminate {
|
|
175
183
|
&+.checkbox-box {
|
|
176
|
-
background-color: var(--
|
|
177
|
-
border-color: var(--
|
|
184
|
+
background-color: var(--primary);
|
|
185
|
+
border-color: var(--primary);
|
|
178
186
|
|
|
179
187
|
&:after {
|
|
180
188
|
content: '';
|
|
@@ -191,10 +199,10 @@
|
|
|
191
199
|
&.disabled {
|
|
192
200
|
box-shadow: none;
|
|
193
201
|
background-color: var(--bg-50);
|
|
194
|
-
border-color: var(--grey-
|
|
202
|
+
border-color: var(--grey-400);
|
|
195
203
|
|
|
196
204
|
&:after {
|
|
197
|
-
background-color: var(--grey-
|
|
205
|
+
background-color: var(--grey-400);
|
|
198
206
|
}
|
|
199
207
|
}
|
|
200
208
|
}
|
|
@@ -219,10 +227,11 @@
|
|
|
219
227
|
position: absolute;
|
|
220
228
|
left: 0;
|
|
221
229
|
top: 0.125rem;
|
|
230
|
+
box-sizing: border-box;
|
|
222
231
|
height: 1.25rem;
|
|
223
232
|
width: 1.25rem;
|
|
224
233
|
min-width: 20px;
|
|
225
|
-
border: 1px solid var(--grey-
|
|
234
|
+
border: 1px solid var(--grey-400);
|
|
226
235
|
margin-right: .25px;
|
|
227
236
|
color: var(--white);
|
|
228
237
|
display: flex;
|
|
@@ -236,7 +245,7 @@
|
|
|
236
245
|
}
|
|
237
246
|
|
|
238
247
|
&+.form-check-label {
|
|
239
|
-
line-height:
|
|
248
|
+
line-height: inherit;
|
|
240
249
|
}
|
|
241
250
|
}
|
|
242
251
|
|
|
@@ -247,34 +256,35 @@
|
|
|
247
256
|
|
|
248
257
|
// Validation
|
|
249
258
|
input {
|
|
259
|
+
// Error: red control. Label + description keep their colour (per DS).
|
|
250
260
|
&.field-invalid {
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
color: var(--error-main);
|
|
261
|
+
&+.checkbox-box {
|
|
262
|
+
border-color: var(--error-main);
|
|
254
263
|
}
|
|
255
264
|
|
|
256
|
-
|
|
265
|
+
// checked / indeterminate + error → solid red fill (white mark unchanged)
|
|
266
|
+
&:checked+.checkbox-box,
|
|
267
|
+
&:indeterminate+.checkbox-box {
|
|
268
|
+
background-color: var(--error-main);
|
|
257
269
|
border-color: var(--error-main);
|
|
258
270
|
}
|
|
259
271
|
}
|
|
260
272
|
|
|
273
|
+
// Disabled: only the control greys; label + description stay --grey-600 (per DS).
|
|
261
274
|
&:disabled {
|
|
262
275
|
&+.checkbox-box {
|
|
263
276
|
background-color: var(--bg-50);
|
|
264
|
-
border-color: var(--grey-
|
|
277
|
+
border-color: var(--grey-400);
|
|
265
278
|
box-shadow: none;
|
|
266
279
|
cursor: not-allowed;
|
|
267
280
|
}
|
|
268
|
-
|
|
269
|
-
&~.form-check-label,
|
|
270
|
-
&~small {
|
|
271
|
-
color: var(--grey-400);
|
|
272
|
-
}
|
|
273
281
|
}
|
|
274
282
|
}
|
|
275
283
|
|
|
276
284
|
small {
|
|
277
285
|
display: block;
|
|
286
|
+
font-size: inherit;
|
|
287
|
+
line-height: inherit;
|
|
278
288
|
color: var(--grey-600);
|
|
279
289
|
}
|
|
280
290
|
|
|
@@ -294,26 +304,49 @@
|
|
|
294
304
|
}
|
|
295
305
|
|
|
296
306
|
.form-check-label {
|
|
297
|
-
|
|
298
|
-
|
|
307
|
+
line-height: inherit;
|
|
308
|
+
color: var(--grey-600);
|
|
309
|
+
font-weight: @font-weight-semibold;
|
|
299
310
|
|
|
300
311
|
&:focus-visible {
|
|
301
312
|
outline: 1px auto Highlight;
|
|
302
313
|
outline: 1px auto -webkit-focus-ring-color;
|
|
303
314
|
}
|
|
304
315
|
|
|
305
|
-
|
|
306
|
-
|
|
316
|
+
// Tooltip trigger — self-contained help-circle icon (no icon-font dependency).
|
|
317
|
+
.form-check-tooltip {
|
|
318
|
+
display: inline-flex;
|
|
319
|
+
margin-left: 0.25rem;
|
|
320
|
+
vertical-align: middle;
|
|
321
|
+
color: var(--grey-400);
|
|
322
|
+
line-height: 0;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
.form-check-tooltip-icon {
|
|
326
|
+
width: 16px;
|
|
327
|
+
height: 16px;
|
|
328
|
+
display: inline-block;
|
|
307
329
|
vertical-align: middle;
|
|
308
330
|
}
|
|
309
331
|
}
|
|
310
332
|
|
|
333
|
+
// ---- Switch (on/off) — the DS Toggle, rendered via <Checkbox onOff />.
|
|
334
|
+
// Two sizes: md 44x24 (default) and sm 36x20 (checkbox-sm). No border,
|
|
335
|
+
// white knob + shadow, on = --primary (hover --brand-700), off = --bg-100.
|
|
311
336
|
&.on-off {
|
|
312
|
-
padding-left:
|
|
337
|
+
padding-left: 56px; // md: 44 track + 12 gap
|
|
338
|
+
|
|
339
|
+
&.checkbox-sm {
|
|
340
|
+
padding-left: 48px; // sm: 36 track + 12 gap
|
|
341
|
+
}
|
|
313
342
|
|
|
314
343
|
&.right-side {
|
|
315
344
|
padding-left: 0;
|
|
316
|
-
padding-right:
|
|
345
|
+
padding-right: 56px;
|
|
346
|
+
|
|
347
|
+
&.checkbox-sm {
|
|
348
|
+
padding-right: 48px;
|
|
349
|
+
}
|
|
317
350
|
|
|
318
351
|
.on-off-slide {
|
|
319
352
|
left: initial;
|
|
@@ -322,83 +355,90 @@
|
|
|
322
355
|
}
|
|
323
356
|
|
|
324
357
|
.on-off-slide {
|
|
325
|
-
width:
|
|
326
|
-
height:
|
|
358
|
+
width: 44px;
|
|
359
|
+
height: 24px;
|
|
327
360
|
position: absolute;
|
|
328
361
|
cursor: pointer;
|
|
329
362
|
top: 0;
|
|
330
363
|
left: 0;
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
border: solid 1px var(--grey-300);
|
|
334
|
-
.border-radius(18px);
|
|
364
|
+
box-sizing: border-box;
|
|
365
|
+
.border-radius(9999px);
|
|
335
366
|
background-color: var(--bg-100);
|
|
336
|
-
.transition(.
|
|
367
|
+
.transition(.2s);
|
|
337
368
|
|
|
338
369
|
&:focus-visible {
|
|
339
370
|
outline: none;
|
|
340
371
|
box-shadow: 0 0 0 4px rgba(152, 162, 179, 0.20);
|
|
341
372
|
}
|
|
342
373
|
|
|
343
|
-
|
|
344
374
|
&:before {
|
|
345
375
|
position: absolute;
|
|
346
376
|
content: "";
|
|
347
|
-
height:
|
|
348
|
-
width:
|
|
377
|
+
height: 20px;
|
|
378
|
+
width: 20px;
|
|
349
379
|
left: 2px;
|
|
350
|
-
|
|
351
|
-
top: 1px;
|
|
380
|
+
top: 2px;
|
|
352
381
|
.border-radius(50%);
|
|
353
382
|
background-color: var(--white);
|
|
354
383
|
box-shadow: 0 1px 3px 0 rgba(16, 24, 40, 0.10), 0 1px 2px 0 rgba(16, 24, 40, 0.06);
|
|
355
|
-
.transition(.
|
|
356
|
-
}
|
|
357
|
-
|
|
358
|
-
&.disabled {
|
|
359
|
-
.filter(grayscale(100%));
|
|
360
|
-
box-shadow: none;
|
|
361
|
-
|
|
362
|
-
&:before {
|
|
363
|
-
background-color: var(--bg-50);
|
|
364
|
-
}
|
|
384
|
+
.transition(.2s);
|
|
365
385
|
}
|
|
366
386
|
}
|
|
367
387
|
|
|
368
|
-
|
|
369
|
-
|
|
388
|
+
// Small size
|
|
389
|
+
&.checkbox-sm .on-off-slide {
|
|
390
|
+
width: 36px;
|
|
391
|
+
height: 20px;
|
|
370
392
|
|
|
371
393
|
&:before {
|
|
372
|
-
|
|
394
|
+
height: 16px;
|
|
395
|
+
width: 16px;
|
|
373
396
|
}
|
|
374
397
|
}
|
|
375
398
|
|
|
376
399
|
input:checked+.on-off-slide {
|
|
377
400
|
background-color: var(--primary);
|
|
378
|
-
|
|
401
|
+
}
|
|
379
402
|
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
403
|
+
// Focus — ring driven by the input (also matches the pseudo-states addon class).
|
|
404
|
+
input:focus-visible+.on-off-slide {
|
|
405
|
+
outline: none;
|
|
406
|
+
box-shadow: 0 0 0 4px rgba(152, 162, 179, 0.20);
|
|
407
|
+
}
|
|
383
408
|
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
background-color: color-mix(in srgb, white 20%, var(--primary));
|
|
388
|
-
border-color: color-mix(in srgb, white 20%, var(--primary));
|
|
409
|
+
input:checked:focus-visible+.on-off-slide {
|
|
410
|
+
box-shadow: 0 0 0 4px rgba(41, 112, 255, 0.24);
|
|
411
|
+
}
|
|
389
412
|
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
413
|
+
// Disabled / not-allowed — grey track + grey knob (per Figma), knob position keeps on/off.
|
|
414
|
+
input:disabled+.on-off-slide {
|
|
415
|
+
cursor: not-allowed;
|
|
416
|
+
background-color: var(--bg-100);
|
|
417
|
+
|
|
418
|
+
&:before {
|
|
419
|
+
background-color: var(--bg-50);
|
|
393
420
|
}
|
|
394
421
|
}
|
|
395
422
|
|
|
396
|
-
input:
|
|
397
|
-
|
|
423
|
+
input:checked:disabled+.on-off-slide {
|
|
424
|
+
background-color: var(--bg-100);
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
// Hover — off track darkens a shade, on track darkens to brand-700 (per Figma)
|
|
428
|
+
input:not(:checked):hover:not(:disabled)+.on-off-slide {
|
|
429
|
+
background-color: var(--bg-200);
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
input:checked:hover:not(:disabled)+.on-off-slide {
|
|
433
|
+
background-color: var(--brand-700);
|
|
398
434
|
}
|
|
399
435
|
|
|
400
436
|
input:checked+.on-off-slide:before {
|
|
401
|
-
.transform(translateX(
|
|
437
|
+
.transform(translateX(20px)); // md
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
&.checkbox-sm input:checked+.on-off-slide:before {
|
|
441
|
+
.transform(translateX(16px)); // sm
|
|
402
442
|
}
|
|
403
443
|
|
|
404
444
|
input:checked+label:after {
|
|
@@ -419,7 +459,10 @@
|
|
|
419
459
|
.form-check {
|
|
420
460
|
padding-left:~"calc(@{gatter} + 1.75rem)";
|
|
421
461
|
|
|
422
|
-
&.on-off
|
|
462
|
+
&.on-off {
|
|
463
|
+
padding-left:~"calc(@{gatter} + 56px)";
|
|
464
|
+
}
|
|
465
|
+
|
|
423
466
|
&.round-checkbox {
|
|
424
467
|
padding-left:~"calc(@{gatter} + 40px)";
|
|
425
468
|
}
|
|
@@ -433,7 +476,10 @@
|
|
|
433
476
|
padding-left: 0;
|
|
434
477
|
padding-right:~"calc(@{gatter} + 1.75rem)";
|
|
435
478
|
|
|
436
|
-
&.on-off
|
|
479
|
+
&.on-off {
|
|
480
|
+
padding-right:~"calc(@{gatter} + 56px)";
|
|
481
|
+
}
|
|
482
|
+
|
|
437
483
|
&.round-checkbox {
|
|
438
484
|
padding-right:~"calc(@{gatter} + 40px)";
|
|
439
485
|
}
|
package/datePicker.less
CHANGED
|
@@ -207,6 +207,14 @@
|
|
|
207
207
|
overflow: hidden;
|
|
208
208
|
cursor: pointer;
|
|
209
209
|
border: 5px solid transparent;
|
|
210
|
+
padding: 0;
|
|
211
|
+
background: transparent;
|
|
212
|
+
appearance: none;
|
|
213
|
+
|
|
214
|
+
&:focus-visible {
|
|
215
|
+
outline: 2px solid var(--primary-light);
|
|
216
|
+
outline-offset: 2px;
|
|
217
|
+
}
|
|
210
218
|
}
|
|
211
219
|
|
|
212
220
|
.custom-arrow-prev {
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Featured icon — a tinted rounded container with a centred icon
|
|
3
|
+
//
|
|
4
|
+
.bnv-featured-icon {
|
|
5
|
+
display: inline-flex;
|
|
6
|
+
align-items: center;
|
|
7
|
+
justify-content: center;
|
|
8
|
+
flex-shrink: 0;
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
|
|
11
|
+
svg {
|
|
12
|
+
display: block;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
// sizes: container / radius / icon
|
|
16
|
+
&--sm { width: 32px; height: 32px; border-radius: 8px; }
|
|
17
|
+
&--md { width: 40px; height: 40px; border-radius: 10px; }
|
|
18
|
+
&--lg { width: 48px; height: 48px; border-radius: 12px; }
|
|
19
|
+
&--xl { width: 56px; height: 56px; border-radius: 12px; }
|
|
20
|
+
|
|
21
|
+
&--sm svg { width: 16px; height: 16px; }
|
|
22
|
+
&--md svg { width: 20px; height: 20px; }
|
|
23
|
+
&--lg svg { width: 24px; height: 24px; }
|
|
24
|
+
&--xl svg { width: 28px; height: 28px; }
|
|
25
|
+
|
|
26
|
+
// colours: tint background + icon colour (icons use currentColor)
|
|
27
|
+
&--brand { background: var(--brand-50); color: var(--brand-600); }
|
|
28
|
+
&--gray { background: var(--bg-100); color: var(--text-600); }
|
|
29
|
+
&--violet { background: var(--violet-50); color: var(--violet-600); }
|
|
30
|
+
&--teal { background: var(--teal-50); color: var(--teal-600); }
|
|
31
|
+
&--pink { background: var(--pink-50); color: var(--pink-600); }
|
|
32
|
+
&--error { background: var(--error-light); color: var(--error-main); }
|
|
33
|
+
&--warning { background: var(--warning-light); color: var(--warning-main); }
|
|
34
|
+
&--success { background: var(--success-light); color: var(--success-main); }
|
|
35
|
+
}
|