@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
package/components/primitives/switch/component/style.css ADDED
@@ -0,0 +1,482 @@
1
+ .switch[type=checkbox].bbr-switch {
2
+ outline: 0;
3
+ user-select: none;
4
+ display: inline-block;
5
+ position: absolute;
6
+ opacity: 0;
7
+ }
8
+ .switch[type=checkbox].bbr-switch:focus + label::before {
9
+ outline: 1px dotted hsl(0, 0%, 71%);
10
+ }
11
+ .switch[type=checkbox].bbr-switch[disabled] {
12
+ cursor: not-allowed;
13
+ }
14
+ .switch[type=checkbox].bbr-switch[disabled] + label {
15
+ opacity: 0.5;
16
+ }
17
+ .switch[type=checkbox].bbr-switch[disabled] + label::before {
18
+ opacity: 0.5;
19
+ }
20
+ .switch[type=checkbox].bbr-switch[disabled] + label::after {
21
+ opacity: 0.5;
22
+ }
23
+ .switch[type=checkbox].bbr-switch[disabled] + label:hover {
24
+ cursor: not-allowed;
25
+ }
26
+ .switch[type=checkbox].bbr-switch:checked + label::before {
27
+ background: hsl(171, 100%, 41%);
28
+ }
29
+ .switch[type=checkbox].bbr-switch + label {
30
+ position: relative;
31
+ display: initial;
32
+ font-size: 1rem;
33
+ line-height: initial;
34
+ padding-left: 3.5rem;
35
+ padding-top: 0.2rem;
36
+ cursor: pointer;
37
+ }
38
+ .switch[type=checkbox].bbr-switch + label::before {
39
+ position: absolute;
40
+ display: block;
41
+ top: 0;
42
+ left: 0;
43
+ width: 3rem;
44
+ height: 1.5rem;
45
+ border: 0.1rem solid transparent;
46
+ border-radius: 4px;
47
+ background: hsl(0, 0%, 71%);
48
+ content: "";
49
+ }
50
+ .switch[type=checkbox].bbr-switch + label::after {
51
+ display: block;
52
+ position: absolute;
53
+ top: 0.25rem;
54
+ left: 0.25rem;
55
+ width: 1rem;
56
+ height: 1rem;
57
+ transform: translate3d(0, 0, 0);
58
+ border-radius: 4px;
59
+ background: hsl(0, 0%, 100%);
60
+ transition: all 0.25s ease-out;
61
+ content: "";
62
+ }
63
+ .switch[type=checkbox].bbr-switch + label.is-empty {
64
+ padding-left: 3rem;
65
+ margin: 0 !important;
66
+ }
67
+ .switch[type=checkbox].bbr-switch.is-rtl + label {
68
+ padding-left: 0;
69
+ padding-right: 3.5rem;
70
+ }
71
+ .switch[type=checkbox].bbr-switch.is-rtl + label::before {
72
+ left: auto;
73
+ right: 0;
74
+ }
75
+ .switch[type=checkbox].bbr-switch.is-rtl + label::after {
76
+ left: auto;
77
+ right: 1.625rem;
78
+ }
79
+ .switch[type=checkbox].bbr-switch:checked + label::after {
80
+ left: 1.625rem;
81
+ }
82
+ .switch[type=checkbox].bbr-switch.is-rtl:checked + label::after {
83
+ left: auto;
84
+ right: 0.25rem;
85
+ }
86
+ .switch[type=checkbox].bbr-switch.is-outlined + label::before {
87
+ background-color: transparent;
88
+ border-color: hsl(0, 0%, 71%);
89
+ }
90
+ .switch[type=checkbox].bbr-switch.is-outlined + label::after {
91
+ background: hsl(0, 0%, 71%);
92
+ }
93
+ .switch[type=checkbox].bbr-switch.is-outlined:checked + label::before {
94
+ background-color: transparent;
95
+ border-color: hsl(171, 100%, 41%);
96
+ }
97
+ .switch[type=checkbox].bbr-switch.is-outlined:checked + label::after {
98
+ background: hsl(171, 100%, 41%);
99
+ }
100
+ .switch[type=checkbox].bbr-switch.is-thin + label::before {
101
+ top: 0.375rem;
102
+ height: 0.75rem;
103
+ }
104
+ .switch[type=checkbox].bbr-switch.is-rounded + label::before {
105
+ border-radius: 0.75rem;
106
+ }
107
+ .switch[type=checkbox].bbr-switch.is-rounded + label::after {
108
+ border-radius: 50%;
109
+ }
110
+ .switch[type=checkbox].bbr-switch.is-small + label {
111
+ position: relative;
112
+ display: initial;
113
+ font-size: 0.75rem;
114
+ line-height: initial;
115
+ padding-left: 2.75rem;
116
+ padding-top: 0.2rem;
117
+ cursor: pointer;
118
+ }
119
+ .switch[type=checkbox].bbr-switch.is-small + label::before {
120
+ position: absolute;
121
+ display: block;
122
+ top: 0;
123
+ left: 0;
124
+ width: 2.25rem;
125
+ height: 1.125rem;
126
+ border: 0.1rem solid transparent;
127
+ border-radius: 4px;
128
+ background: hsl(0, 0%, 71%);
129
+ content: "";
130
+ }
131
+ .switch[type=checkbox].bbr-switch.is-small + label::after {
132
+ display: block;
133
+ position: absolute;
134
+ top: 0.25rem;
135
+ left: 0.25rem;
136
+ width: 0.625rem;
137
+ height: 0.625rem;
138
+ transform: translate3d(0, 0, 0);
139
+ border-radius: 4px;
140
+ background: hsl(0, 0%, 100%);
141
+ transition: all 0.25s ease-out;
142
+ content: "";
143
+ }
144
+ .switch[type=checkbox].bbr-switch.is-small + label.is-empty {
145
+ padding-left: 2.25rem;
146
+ margin: 0 !important;
147
+ }
148
+ .switch[type=checkbox].bbr-switch.is-small.is-rtl + label {
149
+ padding-left: 0;
150
+ padding-right: 2.75rem;
151
+ }
152
+ .switch[type=checkbox].bbr-switch.is-small.is-rtl + label::before {
153
+ left: auto;
154
+ right: 0;
155
+ }
156
+ .switch[type=checkbox].bbr-switch.is-small.is-rtl + label::after {
157
+ left: auto;
158
+ right: 1.25rem;
159
+ }
160
+ .switch[type=checkbox].bbr-switch.is-small:checked + label::after {
161
+ left: 1.25rem;
162
+ }
163
+ .switch[type=checkbox].bbr-switch.is-small.is-rtl:checked + label::after {
164
+ left: auto;
165
+ right: 0.25rem;
166
+ }
167
+ .switch[type=checkbox].bbr-switch.is-small.is-outlined + label::before {
168
+ background-color: transparent;
169
+ border-color: hsl(0, 0%, 71%);
170
+ }
171
+ .switch[type=checkbox].bbr-switch.is-small.is-outlined + label::after {
172
+ background: hsl(0, 0%, 71%);
173
+ }
174
+ .switch[type=checkbox].bbr-switch.is-small.is-outlined:checked + label::before {
175
+ background-color: transparent;
176
+ border-color: hsl(171, 100%, 41%);
177
+ }
178
+ .switch[type=checkbox].bbr-switch.is-small.is-outlined:checked + label::after {
179
+ background: hsl(171, 100%, 41%);
180
+ }
181
+ .switch[type=checkbox].bbr-switch.is-small.is-thin + label::before {
182
+ top: 0.28125rem;
183
+ height: 0.5625rem;
184
+ }
185
+ .switch[type=checkbox].bbr-switch.is-small.is-rounded + label::before {
186
+ border-radius: 0.5625rem;
187
+ }
188
+ .switch[type=checkbox].bbr-switch.is-small.is-rounded + label::after {
189
+ border-radius: 50%;
190
+ }
191
+ .switch[type=checkbox].bbr-switch.is-medium + label {
192
+ position: relative;
193
+ display: initial;
194
+ font-size: 1.25rem;
195
+ line-height: initial;
196
+ padding-left: 4.25rem;
197
+ padding-top: 0.2rem;
198
+ cursor: pointer;
199
+ }
200
+ .switch[type=checkbox].bbr-switch.is-medium + label::before {
201
+ position: absolute;
202
+ display: block;
203
+ top: 0;
204
+ left: 0;
205
+ width: 3.75rem;
206
+ height: 1.875rem;
207
+ border: 0.1rem solid transparent;
208
+ border-radius: 4px;
209
+ background: hsl(0, 0%, 71%);
210
+ content: "";
211
+ }
212
+ .switch[type=checkbox].bbr-switch.is-medium + label::after {
213
+ display: block;
214
+ position: absolute;
215
+ top: 0.25rem;
216
+ left: 0.25rem;
217
+ width: 1.375rem;
218
+ height: 1.375rem;
219
+ transform: translate3d(0, 0, 0);
220
+ border-radius: 4px;
221
+ background: hsl(0, 0%, 100%);
222
+ transition: all 0.25s ease-out;
223
+ content: "";
224
+ }
225
+ .switch[type=checkbox].bbr-switch.is-medium + label.is-empty {
226
+ padding-left: 3.75rem;
227
+ margin: 0 !important;
228
+ }
229
+ .switch[type=checkbox].bbr-switch.is-medium.is-rtl + label {
230
+ padding-left: 0;
231
+ padding-right: 4.25rem;
232
+ }
233
+ .switch[type=checkbox].bbr-switch.is-medium.is-rtl + label::before {
234
+ left: auto;
235
+ right: 0;
236
+ }
237
+ .switch[type=checkbox].bbr-switch.is-medium.is-rtl + label::after {
238
+ left: auto;
239
+ right: 2rem;
240
+ }
241
+ .switch[type=checkbox].bbr-switch.is-medium:checked + label::after {
242
+ left: 2rem;
243
+ }
244
+ .switch[type=checkbox].bbr-switch.is-medium.is-rtl:checked + label::after {
245
+ left: auto;
246
+ right: 0.25rem;
247
+ }
248
+ .switch[type=checkbox].bbr-switch.is-medium.is-outlined + label::before {
249
+ background-color: transparent;
250
+ border-color: hsl(0, 0%, 71%);
251
+ }
252
+ .switch[type=checkbox].bbr-switch.is-medium.is-outlined + label::after {
253
+ background: hsl(0, 0%, 71%);
254
+ }
255
+ .switch[type=checkbox].bbr-switch.is-medium.is-outlined:checked + label::before {
256
+ background-color: transparent;
257
+ border-color: hsl(171, 100%, 41%);
258
+ }
259
+ .switch[type=checkbox].bbr-switch.is-medium.is-outlined:checked + label::after {
260
+ background: hsl(171, 100%, 41%);
261
+ }
262
+ .switch[type=checkbox].bbr-switch.is-medium.is-thin + label::before {
263
+ top: 0.46875rem;
264
+ height: 0.9375rem;
265
+ }
266
+ .switch[type=checkbox].bbr-switch.is-medium.is-rounded + label::before {
267
+ border-radius: 0.9375rem;
268
+ }
269
+ .switch[type=checkbox].bbr-switch.is-medium.is-rounded + label::after {
270
+ border-radius: 50%;
271
+ }
272
+ .switch[type=checkbox].bbr-switch.is-large + label {
273
+ position: relative;
274
+ display: initial;
275
+ font-size: 1.5rem;
276
+ line-height: initial;
277
+ padding-left: 5rem;
278
+ padding-top: 0.2rem;
279
+ cursor: pointer;
280
+ }
281
+ .switch[type=checkbox].bbr-switch.is-large + label::before {
282
+ position: absolute;
283
+ display: block;
284
+ top: 0;
285
+ left: 0;
286
+ width: 4.5rem;
287
+ height: 2.25rem;
288
+ border: 0.1rem solid transparent;
289
+ border-radius: 4px;
290
+ background: hsl(0, 0%, 71%);
291
+ content: "";
292
+ }
293
+ .switch[type=checkbox].bbr-switch.is-large + label::after {
294
+ display: block;
295
+ position: absolute;
296
+ top: 0.25rem;
297
+ left: 0.25rem;
298
+ width: 1.75rem;
299
+ height: 1.75rem;
300
+ transform: translate3d(0, 0, 0);
301
+ border-radius: 4px;
302
+ background: hsl(0, 0%, 100%);
303
+ transition: all 0.25s ease-out;
304
+ content: "";
305
+ }
306
+ .switch[type=checkbox].bbr-switch.is-large + label.is-empty {
307
+ padding-left: 4.5rem;
308
+ margin: 0 !important;
309
+ }
310
+ .switch[type=checkbox].bbr-switch.is-large.is-rtl + label {
311
+ padding-left: 0;
312
+ padding-right: 5rem;
313
+ }
314
+ .switch[type=checkbox].bbr-switch.is-large.is-rtl + label::before {
315
+ left: auto;
316
+ right: 0;
317
+ }
318
+ .switch[type=checkbox].bbr-switch.is-large.is-rtl + label::after {
319
+ left: auto;
320
+ right: 2.375rem;
321
+ }
322
+ .switch[type=checkbox].bbr-switch.is-large:checked + label::after {
323
+ left: 2.375rem;
324
+ }
325
+ .switch[type=checkbox].bbr-switch.is-large.is-rtl:checked + label::after {
326
+ left: auto;
327
+ right: 0.25rem;
328
+ }
329
+ .switch[type=checkbox].bbr-switch.is-large.is-outlined + label::before {
330
+ background-color: transparent;
331
+ border-color: hsl(0, 0%, 71%);
332
+ }
333
+ .switch[type=checkbox].bbr-switch.is-large.is-outlined + label::after {
334
+ background: hsl(0, 0%, 71%);
335
+ }
336
+ .switch[type=checkbox].bbr-switch.is-large.is-outlined:checked + label::before {
337
+ background-color: transparent;
338
+ border-color: hsl(171, 100%, 41%);
339
+ }
340
+ .switch[type=checkbox].bbr-switch.is-large.is-outlined:checked + label::after {
341
+ background: hsl(171, 100%, 41%);
342
+ }
343
+ .switch[type=checkbox].bbr-switch.is-large.is-thin + label::before {
344
+ top: 0.5625rem;
345
+ height: 1.125rem;
346
+ }
347
+ .switch[type=checkbox].bbr-switch.is-large.is-rounded + label::before {
348
+ border-radius: 1.125rem;
349
+ }
350
+ .switch[type=checkbox].bbr-switch.is-large.is-rounded + label::after {
351
+ border-radius: 50%;
352
+ }
353
+ .switch[type=checkbox].bbr-switch.is-white:checked + label::before {
354
+ background: hsl(0, 0%, 100%);
355
+ }
356
+ .switch[type=checkbox].bbr-switch.is-white.is-outlined:checked + label::before {
357
+ background-color: transparent;
358
+ border-color: hsl(0, 0%, 100%) !important;
359
+ }
360
+ .switch[type=checkbox].bbr-switch.is-white.is-outlined:checked + label::after {
361
+ background: hsl(0, 0%, 100%);
362
+ }
363
+ .switch[type=checkbox].bbr-switch.is-white.is-thin.is-outlined:checked + label::after {
364
+ box-shadow: none;
365
+ }
366
+ .switch[type=checkbox].bbr-switch.is-black:checked + label::before {
367
+ background: hsl(0, 0%, 4%);
368
+ }
369
+ .switch[type=checkbox].bbr-switch.is-black.is-outlined:checked + label::before {
370
+ background-color: transparent;
371
+ border-color: hsl(0, 0%, 4%) !important;
372
+ }
373
+ .switch[type=checkbox].bbr-switch.is-black.is-outlined:checked + label::after {
374
+ background: hsl(0, 0%, 4%);
375
+ }
376
+ .switch[type=checkbox].bbr-switch.is-black.is-thin.is-outlined:checked + label::after {
377
+ box-shadow: none;
378
+ }
379
+ .switch[type=checkbox].bbr-switch.is-light:checked + label::before {
380
+ background: hsl(0, 0%, 96%);
381
+ }
382
+ .switch[type=checkbox].bbr-switch.is-light.is-outlined:checked + label::before {
383
+ background-color: transparent;
384
+ border-color: hsl(0, 0%, 96%) !important;
385
+ }
386
+ .switch[type=checkbox].bbr-switch.is-light.is-outlined:checked + label::after {
387
+ background: hsl(0, 0%, 96%);
388
+ }
389
+ .switch[type=checkbox].bbr-switch.is-light.is-thin.is-outlined:checked + label::after {
390
+ box-shadow: none;
391
+ }
392
+ .switch[type=checkbox].bbr-switch.is-dark:checked + label::before {
393
+ background: hsl(0, 0%, 21%);
394
+ }
395
+ .switch[type=checkbox].bbr-switch.is-dark.is-outlined:checked + label::before {
396
+ background-color: transparent;
397
+ border-color: hsl(0, 0%, 21%) !important;
398
+ }
399
+ .switch[type=checkbox].bbr-switch.is-dark.is-outlined:checked + label::after {
400
+ background: hsl(0, 0%, 21%);
401
+ }
402
+ .switch[type=checkbox].bbr-switch.is-dark.is-thin.is-outlined:checked + label::after {
403
+ box-shadow: none;
404
+ }
405
+ .switch[type=checkbox].bbr-switch.is-primary:checked + label::before {
406
+ background: hsl(171, 100%, 41%);
407
+ }
408
+ .switch[type=checkbox].bbr-switch.is-primary.is-outlined:checked + label::before {
409
+ background-color: transparent;
410
+ border-color: hsl(171, 100%, 41%) !important;
411
+ }
412
+ .switch[type=checkbox].bbr-switch.is-primary.is-outlined:checked + label::after {
413
+ background: hsl(171, 100%, 41%);
414
+ }
415
+ .switch[type=checkbox].bbr-switch.is-primary.is-thin.is-outlined:checked + label::after {
416
+ box-shadow: none;
417
+ }
418
+ .switch[type=checkbox].bbr-switch.is-link:checked + label::before {
419
+ background: hsl(229, 53%, 53%);
420
+ }
421
+ .switch[type=checkbox].bbr-switch.is-link.is-outlined:checked + label::before {
422
+ background-color: transparent;
423
+ border-color: hsl(229, 53%, 53%) !important;
424
+ }
425
+ .switch[type=checkbox].bbr-switch.is-link.is-outlined:checked + label::after {
426
+ background: hsl(229, 53%, 53%);
427
+ }
428
+ .switch[type=checkbox].bbr-switch.is-link.is-thin.is-outlined:checked + label::after {
429
+ box-shadow: none;
430
+ }
431
+ .switch[type=checkbox].bbr-switch.is-info:checked + label::before {
432
+ background: hsl(207, 61%, 53%);
433
+ }
434
+ .switch[type=checkbox].bbr-switch.is-info.is-outlined:checked + label::before {
435
+ background-color: transparent;
436
+ border-color: hsl(207, 61%, 53%) !important;
437
+ }
438
+ .switch[type=checkbox].bbr-switch.is-info.is-outlined:checked + label::after {
439
+ background: hsl(207, 61%, 53%);
440
+ }
441
+ .switch[type=checkbox].bbr-switch.is-info.is-thin.is-outlined:checked + label::after {
442
+ box-shadow: none;
443
+ }
444
+ .switch[type=checkbox].bbr-switch.is-success:checked + label::before {
445
+ background: hsl(153, 53%, 53%);
446
+ }
447
+ .switch[type=checkbox].bbr-switch.is-success.is-outlined:checked + label::before {
448
+ background-color: transparent;
449
+ border-color: hsl(153, 53%, 53%) !important;
450
+ }
451
+ .switch[type=checkbox].bbr-switch.is-success.is-outlined:checked + label::after {
452
+ background: hsl(153, 53%, 53%);
453
+ }
454
+ .switch[type=checkbox].bbr-switch.is-success.is-thin.is-outlined:checked + label::after {
455
+ box-shadow: none;
456
+ }
457
+ .switch[type=checkbox].bbr-switch.is-warning:checked + label::before {
458
+ background: hsl(44, 100%, 77%);
459
+ }
460
+ .switch[type=checkbox].bbr-switch.is-warning.is-outlined:checked + label::before {
461
+ background-color: transparent;
462
+ border-color: hsl(44, 100%, 77%) !important;
463
+ }
464
+ .switch[type=checkbox].bbr-switch.is-warning.is-outlined:checked + label::after {
465
+ background: hsl(44, 100%, 77%);
466
+ }
467
+ .switch[type=checkbox].bbr-switch.is-warning.is-thin.is-outlined:checked + label::after {
468
+ box-shadow: none;
469
+ }
470
+ .switch[type=checkbox].bbr-switch.is-danger:checked + label::before {
471
+ background: hsl(348, 86%, 61%);
472
+ }
473
+ .switch[type=checkbox].bbr-switch.is-danger.is-outlined:checked + label::before {
474
+ background-color: transparent;
475
+ border-color: hsl(348, 86%, 61%) !important;
476
+ }
477
+ .switch[type=checkbox].bbr-switch.is-danger.is-outlined:checked + label::after {
478
+ background: hsl(348, 86%, 61%);
479
+ }
480
+ .switch[type=checkbox].bbr-switch.is-danger.is-thin.is-outlined:checked + label::after {
481
+ box-shadow: none;
482
+ }
package/components/primitives/switch/component/style.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @import "bulma/sass/utilities/derived-variables";
2
+
1
3
  $switch-background: $grey-light !default;
2
4
  $switch-border: 0.1rem solid transparent !default;
3
5
  $switch-background-active: $primary !default;
package/components/primitives/timePicker/component/style.css ADDED
@@ -0,0 +1,21 @@
1
+ .control.is-loading input[type=time]::-webkit-calendar-picker-indicator {
2
+ display: none;
3
+ }
4
+
5
+ .control input[type=time] {
6
+ padding-right: 2.5rem;
7
+ }
8
+ .control input[type=time]::-webkit-calendar-picker-indicator {
9
+ position: absolute;
10
+ right: 0.75rem;
11
+ cursor: pointer;
12
+ }
13
+ .control input[type=time].is-small {
14
+ padding-right: 2rem;
15
+ }
16
+ .control input[type=time].is-medium {
17
+ padding-right: 3rem;
18
+ }
19
+ .control input[type=time].is-large {
20
+ padding-right: 3.5rem;
21
+ }
package/components/progress/component/style.css ADDED
@@ -0,0 +1,167 @@
1
+ .bbr-progress {
2
+ width: 100%;
3
+ appearance: none;
4
+ height: 1rem;
5
+ border: none;
6
+ border-radius: 4px;
7
+ background-color: #f5f5f5;
8
+ overflow: hidden;
9
+ }
10
+ .bbr-progress.bbr-progress--animated {
11
+ position: relative;
12
+ background-color: #f5f5f5;
13
+ }
14
+ .bbr-progress.bbr-progress--animated .bbr-progress-fill {
15
+ height: 100%;
16
+ background-color: #485fc7;
17
+ border-radius: 4px;
18
+ transition: width 0.25s;
19
+ animation: bbr-progress-animated 1s linear infinite;
20
+ background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
21
+ background-size: 1rem 1rem;
22
+ }
23
+ .bbr-progress.bbr-progress--animated.is-primary .bbr-progress-fill {
24
+ background-color: #485fc7;
25
+ }
26
+ .bbr-progress.bbr-progress--animated.is-link .bbr-progress-fill {
27
+ background-color: #485fc7;
28
+ }
29
+ .bbr-progress.bbr-progress--animated.is-info .bbr-progress-fill {
30
+ background-color: #3e8ed0;
31
+ }
32
+ .bbr-progress.bbr-progress--animated.is-success .bbr-progress-fill {
33
+ background-color: #48c78e;
34
+ }
35
+ .bbr-progress.bbr-progress--animated.is-warning .bbr-progress-fill {
36
+ background-color: #ffe08a;
37
+ }
38
+ .bbr-progress.bbr-progress--animated.is-danger .bbr-progress-fill {
39
+ background-color: #f14668;
40
+ }
41
+ .bbr-progress::-webkit-progress-bar {
42
+ background-color: #f5f5f5;
43
+ border-radius: 4px;
44
+ }
45
+ .bbr-progress::-webkit-progress-value {
46
+ background-color: #485fc7;
47
+ border-radius: 4px;
48
+ transition: width 0.25s;
49
+ }
50
+ .bbr-progress::-moz-progress-bar {
51
+ background-color: #485fc7;
52
+ border-radius: 4px;
53
+ }
54
+ .bbr-progress-value {
55
+ margin-top: 0.25rem;
56
+ font-size: 0.75rem;
57
+ color: #4a4a4a;
58
+ text-align: center;
59
+ }
60
+ .bbr-progress.is-small {
61
+ height: 0.75rem;
62
+ }
63
+ .bbr-progress.is-normal {
64
+ height: 1rem;
65
+ }
66
+ .bbr-progress.is-medium {
67
+ height: 1.25rem;
68
+ }
69
+ .bbr-progress.is-large {
70
+ height: 1.5rem;
71
+ }
72
+ .bbr-progress.is-primary::-webkit-progress-value {
73
+ background-color: #485fc7;
74
+ }
75
+ .bbr-progress.is-primary::-moz-progress-bar {
76
+ background-color: #485fc7;
77
+ }
78
+ .bbr-progress.is-link::-webkit-progress-value {
79
+ background-color: #485fc7;
80
+ }
81
+ .bbr-progress.is-link::-moz-progress-bar {
82
+ background-color: #485fc7;
83
+ }
84
+ .bbr-progress.is-info::-webkit-progress-value {
85
+ background-color: #3e8ed0;
86
+ }
87
+ .bbr-progress.is-info::-moz-progress-bar {
88
+ background-color: #3e8ed0;
89
+ }
90
+ .bbr-progress.is-success::-webkit-progress-value {
91
+ background-color: #48c78e;
92
+ }
93
+ .bbr-progress.is-success::-moz-progress-bar {
94
+ background-color: #48c78e;
95
+ }
96
+ .bbr-progress.is-warning::-webkit-progress-value {
97
+ background-color: #ffe08a;
98
+ }
99
+ .bbr-progress.is-warning::-moz-progress-bar {
100
+ background-color: #ffe08a;
101
+ }
102
+ .bbr-progress.is-danger::-webkit-progress-value {
103
+ background-color: #f14668;
104
+ }
105
+ .bbr-progress.is-danger::-moz-progress-bar {
106
+ background-color: #f14668;
107
+ }
108
+ .bbr-progress--animated::-webkit-progress-value {
109
+ animation: bbr-progress-animated 2s linear infinite;
110
+ background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
111
+ background-size: 1rem 1rem;
112
+ }
113
+ .bbr-progress--animated::-moz-progress-bar {
114
+ animation: bbr-progress-animated 2s linear infinite;
115
+ background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
116
+ background-size: 1rem 1rem;
117
+ }
118
+ .bbr-progress--indeterminate {
119
+ position: relative;
120
+ background-color: #f5f5f5;
121
+ }
122
+ .bbr-progress--indeterminate::after {
123
+ content: "";
124
+ position: absolute;
125
+ top: 0;
126
+ left: 0;
127
+ bottom: 0;
128
+ width: 50%;
129
+ background-color: #485fc7;
130
+ border-radius: 4px;
131
+ animation: bbr-progress-indeterminate 1.5s ease-in-out infinite;
132
+ }
133
+ .bbr-progress--indeterminate.is-primary::after {
134
+ background-color: #485fc7;
135
+ }
136
+ .bbr-progress--indeterminate.is-link::after {
137
+ background-color: #485fc7;
138
+ }
139
+ .bbr-progress--indeterminate.is-info::after {
140
+ background-color: #3e8ed0;
141
+ }
142
+ .bbr-progress--indeterminate.is-success::after {
143
+ background-color: #48c78e;
144
+ }
145
+ .bbr-progress--indeterminate.is-warning::after {
146
+ background-color: #ffe08a;
147
+ }
148
+ .bbr-progress--indeterminate.is-danger::after {
149
+ background-color: #f14668;
150
+ }
151
+
152
+ @keyframes bbr-progress-animated {
153
+ 0% {
154
+ background-position: 0 0;
155
+ }
156
+ 100% {
157
+ background-position: 1rem 0;
158
+ }
159
+ }
160
+ @keyframes bbr-progress-indeterminate {
161
+ 0% {
162
+ left: -50%;
163
+ }
164
+ 100% {
165
+ left: 100%;
166
+ }
167
+ }
package/components/search/component/style.css ADDED
@@ -0,0 +1,18 @@
1
+ .bbr-search input[type=search] {
2
+ transition: 0.15s ease-out;
3
+ transition-property: border-color, color, background-color;
4
+ }
5
+ .bbr-search input[type=search]::placeholder {
6
+ user-select: none;
7
+ }
8
+ .bbr-search input[type=search]::-webkit-input-placeholder {
9
+ transition: 0.15s ease-out color;
10
+ }
11
+ .bbr-search input[type=search]::-webkit-search-cancel-button {
12
+ cursor: pointer;
13
+ font-size: 1.25rem;
14
+ }
15
+ .bbr-search.is-loading::after {
16
+ right: 1rem;
17
+ top: 0.725rem;
18
+ }