@bodynarf/react.components 1.14.0 → 1.14.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 (44) hide show
  1. package/changelog.md +1 -1
  2. package/components/accordion/component/index.js +1 -1
  3. package/components/accordion/component/style.css +21 -0
  4. package/components/anchor/component/style.css +12 -0
  5. package/components/button/component/style.css +10 -0
  6. package/components/dropdown/component/style.css +101 -0
  7. package/components/dropdown/components/compact/index.d.ts.map +1 -1
  8. package/components/dropdown/components/compact/index.js +3 -3
  9. package/components/dropdown/components/label/components/empty/index.js +1 -1
  10. package/components/dropdown/components/label/components/withSearch/style.css +21 -0
  11. package/components/dropdown/types.d.ts +6 -6
  12. package/components/dropdown/types.d.ts.map +1 -1
  13. package/components/file/component/styles.css +74 -0
  14. package/components/icon/component/style.css +19 -0
  15. package/components/index.d.ts +0 -2
  16. package/components/index.d.ts.map +1 -1
  17. package/components/index.js +0 -2
  18. package/components/modal/component/style.css +32 -0
  19. package/components/multiselect/component/style.css +20 -0
  20. package/components/multiselect/components/withoutLabel/index.d.ts.map +1 -1
  21. package/components/multiselect/components/withoutLabel/index.js +3 -3
  22. package/components/primitives/checkbox/component/style.css +19 -0
  23. package/components/primitives/color/component/style.css +15 -0
  24. package/components/primitives/date/component/style.css +9 -0
  25. package/components/primitives/internal/hint/style.css +4 -0
  26. package/components/primitives/password/component/style.css +10 -0
  27. package/components/primitives/radioGroup/component/style.css +382 -0
  28. package/components/primitives/radioGroup/component/style.scss +2 -0
  29. package/components/primitives/slider/component/style.css +438 -0
  30. package/components/primitives/slider/component/style.scss +2 -0
  31. package/components/primitives/switch/component/style.css +482 -0
  32. package/components/primitives/switch/component/style.scss +2 -0
  33. package/components/primitives/timePicker/component/style.css +21 -0
  34. package/components/progress/component/style.css +167 -0
  35. package/components/search/component/style.css +18 -0
  36. package/components/stepper/component/style.css +510 -0
  37. package/components/stepper/component/style.scss +2 -0
  38. package/components/table/component/style.css +14 -0
  39. package/components/tabs/component/style.css +6 -0
  40. package/components/tag/component/style.css +19 -0
  41. package/components/timeline/component/style.css +488 -0
  42. package/components/timeline/component/style.scss +2 -0
  43. package/package.json +10 -3
  44. package/tsconfig.tsbuildinfo +1 -1
@@ -0,0 +1,382 @@
1
+ .bbr-radio-group {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: 0.5rem;
5
+ }
6
+ .bbr-radio-group.is-horizontal {
7
+ flex-direction: row;
8
+ flex-wrap: wrap;
9
+ gap: 1rem;
10
+ }
11
+
12
+ .bbr-radio-item {
13
+ display: flex;
14
+ align-items: center;
15
+ }
16
+
17
+ .is-checkradio.bbr-radio[type=radio] {
18
+ outline: 0;
19
+ user-select: none;
20
+ display: inline-block;
21
+ position: absolute;
22
+ opacity: 0;
23
+ }
24
+ .is-checkradio.bbr-radio[type=radio] + label {
25
+ position: relative;
26
+ display: inline-flex;
27
+ align-items: center;
28
+ padding-left: 1.75rem;
29
+ cursor: pointer;
30
+ font-size: 1rem;
31
+ line-height: 1.25;
32
+ min-height: 1.5rem;
33
+ }
34
+ .is-checkradio.bbr-radio[type=radio] + label::before {
35
+ position: absolute;
36
+ left: 0;
37
+ top: 50%;
38
+ transform: translateY(-50%);
39
+ width: 1.25rem;
40
+ height: 1.25rem;
41
+ border: 0.1rem solid hsl(0, 0%, 86%);
42
+ border-radius: 50%;
43
+ background: transparent;
44
+ content: "";
45
+ transition: background 0.15s ease-out, border-color 0.15s ease-out;
46
+ }
47
+ .is-checkradio.bbr-radio[type=radio] + label::after {
48
+ position: absolute;
49
+ left: 0.3125rem;
50
+ top: 50%;
51
+ transform: translateY(-50%) scale(0);
52
+ width: 0.625rem;
53
+ height: 0.625rem;
54
+ border-radius: 50%;
55
+ background: hsl(171, 100%, 41%);
56
+ content: "";
57
+ transition: transform 0.15s ease-out;
58
+ }
59
+ .is-checkradio.bbr-radio[type=radio]:checked + label::after {
60
+ transform: translateY(-50%) scale(1);
61
+ }
62
+ .is-checkradio.bbr-radio[type=radio]:checked + label::before {
63
+ border-color: hsl(171, 100%, 41%);
64
+ }
65
+ .is-checkradio.bbr-radio[type=radio]:focus + label::before {
66
+ border-color: hsl(171, 100%, 41%);
67
+ box-shadow: 0 0 0 0.125em rgba(0, 209.1, 177.735, 0.25);
68
+ }
69
+ .is-checkradio.bbr-radio[type=radio]:hover:not(:disabled) + label::before {
70
+ border-color: hsl(0, 0%, 71%);
71
+ }
72
+ .is-checkradio.bbr-radio[type=radio]:disabled {
73
+ cursor: not-allowed;
74
+ }
75
+ .is-checkradio.bbr-radio[type=radio]:disabled + label {
76
+ opacity: 0.5;
77
+ cursor: not-allowed;
78
+ }
79
+ .is-checkradio.bbr-radio[type=radio].is-circle + label::before {
80
+ border-radius: 50%;
81
+ }
82
+ .is-checkradio.bbr-radio[type=radio].is-circle + label::after {
83
+ border-radius: 50%;
84
+ }
85
+ .is-checkradio.bbr-radio[type=radio].is-block + label {
86
+ padding: 0.5rem 0.75rem 0.5rem 2.25rem;
87
+ background: hsl(0, 0%, 98%);
88
+ border-radius: 4px;
89
+ width: 100%;
90
+ }
91
+ .is-checkradio.bbr-radio[type=radio].is-block + label::before {
92
+ left: 0.5rem;
93
+ }
94
+ .is-checkradio.bbr-radio[type=radio].is-block + label::after {
95
+ left: 0.8125rem;
96
+ }
97
+ .is-checkradio.bbr-radio[type=radio].is-block + label:hover {
98
+ background: hsl(0, 0%, 96%);
99
+ }
100
+ .is-checkradio.bbr-radio[type=radio].is-block:checked + label {
101
+ background: rgba(0, 209.1, 177.735, 0.1);
102
+ }
103
+ .is-checkradio.bbr-radio[type=radio].has-no-border + label::before {
104
+ border: none;
105
+ background: hsl(0, 0%, 86%);
106
+ }
107
+ .is-checkradio.bbr-radio[type=radio].has-no-border:checked + label::before {
108
+ background: rgba(0, 209.1, 177.735, 0.2);
109
+ }
110
+ .is-checkradio.bbr-radio[type=radio].has-background-color + label::before {
111
+ background: hsl(0, 0%, 96%);
112
+ }
113
+ .is-checkradio.bbr-radio[type=radio].has-background-color:checked + label::before {
114
+ background: rgba(0, 209.1, 177.735, 0.15);
115
+ border-color: hsl(171, 100%, 41%);
116
+ }
117
+ .is-checkradio.bbr-radio[type=radio].is-small + label {
118
+ font-size: 0.75rem;
119
+ padding-left: 1.5rem;
120
+ }
121
+ .is-checkradio.bbr-radio[type=radio].is-small + label::before {
122
+ width: 1rem;
123
+ height: 1rem;
124
+ }
125
+ .is-checkradio.bbr-radio[type=radio].is-small + label::after {
126
+ width: 0.5rem;
127
+ height: 0.5rem;
128
+ left: 0.25rem;
129
+ }
130
+ .is-checkradio.bbr-radio[type=radio].is-small.is-block + label {
131
+ padding-left: 2rem;
132
+ }
133
+ .is-checkradio.bbr-radio[type=radio].is-small.is-block + label::before {
134
+ left: 0.5rem;
135
+ }
136
+ .is-checkradio.bbr-radio[type=radio].is-small.is-block + label::after {
137
+ left: 0.75rem;
138
+ }
139
+ .is-checkradio.bbr-radio[type=radio].is-medium + label {
140
+ font-size: 1.25rem;
141
+ padding-left: 2rem;
142
+ }
143
+ .is-checkradio.bbr-radio[type=radio].is-medium + label::before {
144
+ width: 1.5rem;
145
+ height: 1.5rem;
146
+ }
147
+ .is-checkradio.bbr-radio[type=radio].is-medium + label::after {
148
+ width: 0.75rem;
149
+ height: 0.75rem;
150
+ left: 0.375rem;
151
+ }
152
+ .is-checkradio.bbr-radio[type=radio].is-medium.is-block + label {
153
+ padding-left: 2.5rem;
154
+ }
155
+ .is-checkradio.bbr-radio[type=radio].is-medium.is-block + label::before {
156
+ left: 0.5rem;
157
+ }
158
+ .is-checkradio.bbr-radio[type=radio].is-medium.is-block + label::after {
159
+ left: 0.875rem;
160
+ }
161
+ .is-checkradio.bbr-radio[type=radio].is-large + label {
162
+ font-size: 1.5rem;
163
+ padding-left: 2.25rem;
164
+ }
165
+ .is-checkradio.bbr-radio[type=radio].is-large + label::before {
166
+ width: 1.75rem;
167
+ height: 1.75rem;
168
+ }
169
+ .is-checkradio.bbr-radio[type=radio].is-large + label::after {
170
+ width: 0.875rem;
171
+ height: 0.875rem;
172
+ left: 0.4375rem;
173
+ }
174
+ .is-checkradio.bbr-radio[type=radio].is-large.is-block + label {
175
+ padding-left: 2.75rem;
176
+ }
177
+ .is-checkradio.bbr-radio[type=radio].is-large.is-block + label::before {
178
+ left: 0.5rem;
179
+ }
180
+ .is-checkradio.bbr-radio[type=radio].is-large.is-block + label::after {
181
+ left: 0.9375rem;
182
+ }
183
+ .is-checkradio.bbr-radio[type=radio].is-white:checked + label::before {
184
+ border-color: hsl(0, 0%, 100%);
185
+ }
186
+ .is-checkradio.bbr-radio[type=radio].is-white:checked + label::after {
187
+ background: hsl(0, 0%, 100%);
188
+ }
189
+ .is-checkradio.bbr-radio[type=radio].is-white:focus + label::before {
190
+ border-color: hsl(0, 0%, 100%);
191
+ box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
192
+ }
193
+ .is-checkradio.bbr-radio[type=radio].is-white.is-block:checked + label {
194
+ background: rgba(255, 255, 255, 0.1);
195
+ }
196
+ .is-checkradio.bbr-radio[type=radio].is-white.has-background-color:checked + label::before {
197
+ background: rgba(255, 255, 255, 0.15);
198
+ border-color: hsl(0, 0%, 100%);
199
+ }
200
+ .is-checkradio.bbr-radio[type=radio].is-white.has-no-border:checked + label::before {
201
+ background: rgba(255, 255, 255, 0.2);
202
+ }
203
+ .is-checkradio.bbr-radio[type=radio].is-black:checked + label::before {
204
+ border-color: hsl(0, 0%, 4%);
205
+ }
206
+ .is-checkradio.bbr-radio[type=radio].is-black:checked + label::after {
207
+ background: hsl(0, 0%, 4%);
208
+ }
209
+ .is-checkradio.bbr-radio[type=radio].is-black:focus + label::before {
210
+ border-color: hsl(0, 0%, 4%);
211
+ box-shadow: 0 0 0 0.125em rgba(10.2, 10.2, 10.2, 0.25);
212
+ }
213
+ .is-checkradio.bbr-radio[type=radio].is-black.is-block:checked + label {
214
+ background: rgba(10.2, 10.2, 10.2, 0.1);
215
+ }
216
+ .is-checkradio.bbr-radio[type=radio].is-black.has-background-color:checked + label::before {
217
+ background: rgba(10.2, 10.2, 10.2, 0.15);
218
+ border-color: hsl(0, 0%, 4%);
219
+ }
220
+ .is-checkradio.bbr-radio[type=radio].is-black.has-no-border:checked + label::before {
221
+ background: rgba(10.2, 10.2, 10.2, 0.2);
222
+ }
223
+ .is-checkradio.bbr-radio[type=radio].is-light:checked + label::before {
224
+ border-color: hsl(0, 0%, 96%);
225
+ }
226
+ .is-checkradio.bbr-radio[type=radio].is-light:checked + label::after {
227
+ background: hsl(0, 0%, 96%);
228
+ }
229
+ .is-checkradio.bbr-radio[type=radio].is-light:focus + label::before {
230
+ border-color: hsl(0, 0%, 96%);
231
+ box-shadow: 0 0 0 0.125em rgba(244.8, 244.8, 244.8, 0.25);
232
+ }
233
+ .is-checkradio.bbr-radio[type=radio].is-light.is-block:checked + label {
234
+ background: rgba(244.8, 244.8, 244.8, 0.1);
235
+ }
236
+ .is-checkradio.bbr-radio[type=radio].is-light.has-background-color:checked + label::before {
237
+ background: rgba(244.8, 244.8, 244.8, 0.15);
238
+ border-color: hsl(0, 0%, 96%);
239
+ }
240
+ .is-checkradio.bbr-radio[type=radio].is-light.has-no-border:checked + label::before {
241
+ background: rgba(244.8, 244.8, 244.8, 0.2);
242
+ }
243
+ .is-checkradio.bbr-radio[type=radio].is-dark:checked + label::before {
244
+ border-color: hsl(0, 0%, 21%);
245
+ }
246
+ .is-checkradio.bbr-radio[type=radio].is-dark:checked + label::after {
247
+ background: hsl(0, 0%, 21%);
248
+ }
249
+ .is-checkradio.bbr-radio[type=radio].is-dark:focus + label::before {
250
+ border-color: hsl(0, 0%, 21%);
251
+ box-shadow: 0 0 0 0.125em rgba(53.55, 53.55, 53.55, 0.25);
252
+ }
253
+ .is-checkradio.bbr-radio[type=radio].is-dark.is-block:checked + label {
254
+ background: rgba(53.55, 53.55, 53.55, 0.1);
255
+ }
256
+ .is-checkradio.bbr-radio[type=radio].is-dark.has-background-color:checked + label::before {
257
+ background: rgba(53.55, 53.55, 53.55, 0.15);
258
+ border-color: hsl(0, 0%, 21%);
259
+ }
260
+ .is-checkradio.bbr-radio[type=radio].is-dark.has-no-border:checked + label::before {
261
+ background: rgba(53.55, 53.55, 53.55, 0.2);
262
+ }
263
+ .is-checkradio.bbr-radio[type=radio].is-primary:checked + label::before {
264
+ border-color: hsl(171, 100%, 41%);
265
+ }
266
+ .is-checkradio.bbr-radio[type=radio].is-primary:checked + label::after {
267
+ background: hsl(171, 100%, 41%);
268
+ }
269
+ .is-checkradio.bbr-radio[type=radio].is-primary:focus + label::before {
270
+ border-color: hsl(171, 100%, 41%);
271
+ box-shadow: 0 0 0 0.125em rgba(0, 209.1, 177.735, 0.25);
272
+ }
273
+ .is-checkradio.bbr-radio[type=radio].is-primary.is-block:checked + label {
274
+ background: rgba(0, 209.1, 177.735, 0.1);
275
+ }
276
+ .is-checkradio.bbr-radio[type=radio].is-primary.has-background-color:checked + label::before {
277
+ background: rgba(0, 209.1, 177.735, 0.15);
278
+ border-color: hsl(171, 100%, 41%);
279
+ }
280
+ .is-checkradio.bbr-radio[type=radio].is-primary.has-no-border:checked + label::before {
281
+ background: rgba(0, 209.1, 177.735, 0.2);
282
+ }
283
+ .is-checkradio.bbr-radio[type=radio].is-link:checked + label::before {
284
+ border-color: hsl(229, 53%, 53%);
285
+ }
286
+ .is-checkradio.bbr-radio[type=radio].is-link:checked + label::after {
287
+ background: hsl(229, 53%, 53%);
288
+ }
289
+ .is-checkradio.bbr-radio[type=radio].is-link:focus + label::before {
290
+ border-color: hsl(229, 53%, 53%);
291
+ box-shadow: 0 0 0 0.125em rgba(71.6295, 94.92035, 198.6705, 0.25);
292
+ }
293
+ .is-checkradio.bbr-radio[type=radio].is-link.is-block:checked + label {
294
+ background: rgba(71.6295, 94.92035, 198.6705, 0.1);
295
+ }
296
+ .is-checkradio.bbr-radio[type=radio].is-link.has-background-color:checked + label::before {
297
+ background: rgba(71.6295, 94.92035, 198.6705, 0.15);
298
+ border-color: hsl(229, 53%, 53%);
299
+ }
300
+ .is-checkradio.bbr-radio[type=radio].is-link.has-no-border:checked + label::before {
301
+ background: rgba(71.6295, 94.92035, 198.6705, 0.2);
302
+ }
303
+ .is-checkradio.bbr-radio[type=radio].is-info:checked + label::before {
304
+ border-color: hsl(207, 61%, 53%);
305
+ }
306
+ .is-checkradio.bbr-radio[type=radio].is-info:checked + label::after {
307
+ background: hsl(207, 61%, 53%);
308
+ }
309
+ .is-checkradio.bbr-radio[type=radio].is-info:focus + label::before {
310
+ border-color: hsl(207, 61%, 53%);
311
+ box-shadow: 0 0 0 0.125em rgba(62.0415, 142.46085, 208.2585, 0.25);
312
+ }
313
+ .is-checkradio.bbr-radio[type=radio].is-info.is-block:checked + label {
314
+ background: rgba(62.0415, 142.46085, 208.2585, 0.1);
315
+ }
316
+ .is-checkradio.bbr-radio[type=radio].is-info.has-background-color:checked + label::before {
317
+ background: rgba(62.0415, 142.46085, 208.2585, 0.15);
318
+ border-color: hsl(207, 61%, 53%);
319
+ }
320
+ .is-checkradio.bbr-radio[type=radio].is-info.has-no-border:checked + label::before {
321
+ background: rgba(62.0415, 142.46085, 208.2585, 0.2);
322
+ }
323
+ .is-checkradio.bbr-radio[type=radio].is-success:checked + label::before {
324
+ border-color: hsl(153, 53%, 53%);
325
+ }
326
+ .is-checkradio.bbr-radio[type=radio].is-success:checked + label::after {
327
+ background: hsl(153, 53%, 53%);
328
+ }
329
+ .is-checkradio.bbr-radio[type=radio].is-success:focus + label::before {
330
+ border-color: hsl(153, 53%, 53%);
331
+ box-shadow: 0 0 0 0.125em rgba(71.6295, 198.6705, 141.50205, 0.25);
332
+ }
333
+ .is-checkradio.bbr-radio[type=radio].is-success.is-block:checked + label {
334
+ background: rgba(71.6295, 198.6705, 141.50205, 0.1);
335
+ }
336
+ .is-checkradio.bbr-radio[type=radio].is-success.has-background-color:checked + label::before {
337
+ background: rgba(71.6295, 198.6705, 141.50205, 0.15);
338
+ border-color: hsl(153, 53%, 53%);
339
+ }
340
+ .is-checkradio.bbr-radio[type=radio].is-success.has-no-border:checked + label::before {
341
+ background: rgba(71.6295, 198.6705, 141.50205, 0.2);
342
+ }
343
+ .is-checkradio.bbr-radio[type=radio].is-warning:checked + label::before {
344
+ border-color: hsl(44, 100%, 77%);
345
+ }
346
+ .is-checkradio.bbr-radio[type=radio].is-warning:checked + label::after {
347
+ background: hsl(44, 100%, 77%);
348
+ }
349
+ .is-checkradio.bbr-radio[type=radio].is-warning:focus + label::before {
350
+ border-color: hsl(44, 100%, 77%);
351
+ box-shadow: 0 0 0 0.125em rgba(255, 223.72, 137.7, 0.25);
352
+ }
353
+ .is-checkradio.bbr-radio[type=radio].is-warning.is-block:checked + label {
354
+ background: rgba(255, 223.72, 137.7, 0.1);
355
+ }
356
+ .is-checkradio.bbr-radio[type=radio].is-warning.has-background-color:checked + label::before {
357
+ background: rgba(255, 223.72, 137.7, 0.15);
358
+ border-color: hsl(44, 100%, 77%);
359
+ }
360
+ .is-checkradio.bbr-radio[type=radio].is-warning.has-no-border:checked + label::before {
361
+ background: rgba(255, 223.72, 137.7, 0.2);
362
+ }
363
+ .is-checkradio.bbr-radio[type=radio].is-danger:checked + label::before {
364
+ border-color: hsl(348, 86%, 61%);
365
+ }
366
+ .is-checkradio.bbr-radio[type=radio].is-danger:checked + label::after {
367
+ background: hsl(348, 86%, 61%);
368
+ }
369
+ .is-checkradio.bbr-radio[type=radio].is-danger:focus + label::before {
370
+ border-color: hsl(348, 86%, 61%);
371
+ box-shadow: 0 0 0 0.125em rgba(241.077, 70.023, 104.2338, 0.25);
372
+ }
373
+ .is-checkradio.bbr-radio[type=radio].is-danger.is-block:checked + label {
374
+ background: rgba(241.077, 70.023, 104.2338, 0.1);
375
+ }
376
+ .is-checkradio.bbr-radio[type=radio].is-danger.has-background-color:checked + label::before {
377
+ background: rgba(241.077, 70.023, 104.2338, 0.15);
378
+ border-color: hsl(348, 86%, 61%);
379
+ }
380
+ .is-checkradio.bbr-radio[type=radio].is-danger.has-no-border:checked + label::before {
381
+ background: rgba(241.077, 70.023, 104.2338, 0.2);
382
+ }
@@ -1,3 +1,5 @@
1
+ @import "bulma/sass/utilities/derived-variables";
2
+
1
3
  .bbr-radio-group {
2
4
  display: flex;
3
5
  flex-direction: column;