@rolster/react-components 19.1.5 → 19.1.7
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/dist/cjs/assets/{index-Cpoe_CC5.css → index-BUZg9poi.css} +27 -17
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/es/assets/{index-Cpoe_CC5.css → index-BUZg9poi.css} +27 -17
- package/dist/es/index.js +1 -1
- package/dist/es/index.js.map +1 -1
- package/dist/esm/components/atoms/Badge/Badge.css +1 -1
- package/dist/esm/components/atoms/Badge/Badge.css.map +1 -1
- package/dist/esm/components/atoms/ProgressBar/ProgressBar.css +6 -2
- package/dist/esm/components/atoms/ProgressBar/ProgressBar.css.map +1 -1
- package/dist/esm/components/atoms/ProgressBar/ProgressBar.js +1 -1
- package/dist/esm/components/molecules/ButtonToggle/ButtonToggle.css +2 -1
- package/dist/esm/components/organisms/BottomSheet/BottomSheet.css +4 -3
- package/dist/esm/components/organisms/Confirmation/Confirmation.css +4 -2
- package/dist/esm/components/organisms/FormNavigation/FormNavigation.css +2 -2
- package/dist/esm/components/organisms/Modal/Modal.css +4 -3
- package/dist/esm/components/organisms/ModalSheet/ModalSheet.css +4 -3
- package/package.json +9 -8
|
@@ -117,7 +117,7 @@
|
|
|
117
117
|
height: var(--pvt-dimension);
|
|
118
118
|
line-height: var(--pvt-dimension);
|
|
119
119
|
padding: var(--rlc-badge-padding, 0rem var(--rls-sizing-x2));
|
|
120
|
-
box-sizing: border-box;
|
|
120
|
+
box-sizing: var(--rlc-badge-border-sizing, border-box);
|
|
121
121
|
font-size: var(--rlc-badge-font-size, var(--rls-smalltext-font-size));
|
|
122
122
|
font-weight: var(--rlc-badge-font-weight, var(--rls-font-weight-regular));
|
|
123
123
|
text-align: center;
|
|
@@ -989,11 +989,13 @@
|
|
|
989
989
|
.rls-progress-bar {
|
|
990
990
|
--pvt-component-display: block;
|
|
991
991
|
--pvt-component-height: var(--rlc-progress-bar-height, var(--rls-sizing-x2));
|
|
992
|
+
--pvt-component-radius: var(--rlc-progress-bar-radius, 0rem);
|
|
992
993
|
position: relative;
|
|
993
994
|
width: 100%;
|
|
994
995
|
height: var(--pvt-component-height);
|
|
995
996
|
overflow: hidden;
|
|
996
|
-
background: var(--rls-theme-color-
|
|
997
|
+
background: var(--rlc-progress-bar-background, var(--rls-theme-color-100));
|
|
998
|
+
border-radius: var(--pvt-component-radius);
|
|
997
999
|
}
|
|
998
1000
|
.rls-progress-bar--indeterminate {
|
|
999
1001
|
--pvt-component-display: none;
|
|
@@ -1006,6 +1008,7 @@
|
|
|
1006
1008
|
width: 0%;
|
|
1007
1009
|
height: var(--pvt-component-height);
|
|
1008
1010
|
background: var(--rls-theme-gradient-500);
|
|
1011
|
+
border-radius: var(--pvt-component-radius);
|
|
1009
1012
|
}
|
|
1010
1013
|
.rls-progress-bar--indeterminate::after {
|
|
1011
1014
|
animation: progress-bar-indeterminate-after 2000ms infinite;
|
|
@@ -1015,12 +1018,13 @@
|
|
|
1015
1018
|
}
|
|
1016
1019
|
.rls-progress-bar__component {
|
|
1017
1020
|
position: absolute;
|
|
1021
|
+
display: var(--pvt-component-display);
|
|
1018
1022
|
top: 0rem;
|
|
1019
1023
|
width: 0%;
|
|
1020
1024
|
height: var(--pvt-component-height);
|
|
1021
|
-
display: var(--pvt-component-display);
|
|
1022
1025
|
background: var(--rls-theme-gradient-500);
|
|
1023
1026
|
transition: width 320ms 0ms var(--rls-standard-curve);
|
|
1027
|
+
border-radius: var(--pvt-component-radius);
|
|
1024
1028
|
}
|
|
1025
1029
|
@keyframes progress-bar-indeterminate-before {
|
|
1026
1030
|
0% {
|
|
@@ -1420,7 +1424,8 @@
|
|
|
1420
1424
|
transform: var(--rlc-button-toggle-ul-transform);
|
|
1421
1425
|
transform-origin: 0% 0%;
|
|
1422
1426
|
box-shadow: var(--rls-theme-shadow-500);
|
|
1423
|
-
transition:
|
|
1427
|
+
transition:
|
|
1428
|
+
transform 240ms 0ms var(--rls-standard-curve),
|
|
1424
1429
|
opacity 240ms 0ms var(--rls-standard-curve);
|
|
1425
1430
|
}
|
|
1426
1431
|
.rls-button-toggle__list ul li {
|
|
@@ -2297,8 +2302,8 @@
|
|
|
2297
2302
|
border-radius: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem 0rem;
|
|
2298
2303
|
background: var(--rlc-bottom-sheet-background, var(--rls-app-color-050));
|
|
2299
2304
|
transform: var(--pvt-component-transform);
|
|
2300
|
-
transition:
|
|
2301
|
-
|
|
2305
|
+
transition:
|
|
2306
|
+
opacity var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
|
|
2302
2307
|
transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
|
|
2303
2308
|
visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
|
|
2304
2309
|
}
|
|
@@ -2322,7 +2327,8 @@
|
|
|
2322
2327
|
z-index: 1;
|
|
2323
2328
|
background: var(--rls-theme-backdrop-900);
|
|
2324
2329
|
backdrop-filter: blur(2px);
|
|
2325
|
-
transition:
|
|
2330
|
+
transition:
|
|
2331
|
+
opacity 120ms 0ms var(--rls-deceleration-curve),
|
|
2326
2332
|
bottom 120ms 0ms var(--rls-deceleration-curve);
|
|
2327
2333
|
}
|
|
2328
2334
|
@media screen and (max-height: 960px) {
|
|
@@ -2422,7 +2428,8 @@
|
|
|
2422
2428
|
background: var(--rls-app-color-050);
|
|
2423
2429
|
box-shadow: var(--rls-app-shadow-4);
|
|
2424
2430
|
transform: var(--pvt-component-transform);
|
|
2425
|
-
transition:
|
|
2431
|
+
transition:
|
|
2432
|
+
opacity 125ms 0ms var(--rls-deceleration-curve),
|
|
2426
2433
|
transform 125ms 0ms var(--rls-deceleration-curve),
|
|
2427
2434
|
visibility 125ms 0ms var(--rls-deceleration-curve);
|
|
2428
2435
|
}
|
|
@@ -2498,7 +2505,8 @@
|
|
|
2498
2505
|
z-index: var(--rls-z-index-2);
|
|
2499
2506
|
background: var(--rls-theme-backdrop-900);
|
|
2500
2507
|
backdrop-filter: blur(2px);
|
|
2501
|
-
transition:
|
|
2508
|
+
transition:
|
|
2509
|
+
opacity 120ms 0ms var(--rls-deceleration-curve),
|
|
2502
2510
|
bottom 120ms 0ms var(--rls-deceleration-curve);
|
|
2503
2511
|
}
|
|
2504
2512
|
@media screen and (max-width: 480px) {
|
|
@@ -2624,8 +2632,8 @@
|
|
|
2624
2632
|
border-radius: var(--rls-sizing-x4);
|
|
2625
2633
|
background: var(--rlc-modal-background, var(--rls-app-color-050));
|
|
2626
2634
|
transform: var(--pvt-component-transform);
|
|
2627
|
-
transition:
|
|
2628
|
-
|
|
2635
|
+
transition:
|
|
2636
|
+
opacity var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
|
|
2629
2637
|
transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
|
|
2630
2638
|
visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
|
|
2631
2639
|
}
|
|
@@ -2640,7 +2648,8 @@
|
|
|
2640
2648
|
z-index: 1;
|
|
2641
2649
|
background: var(--rls-theme-backdrop-900);
|
|
2642
2650
|
backdrop-filter: blur(2px);
|
|
2643
|
-
transition:
|
|
2651
|
+
transition:
|
|
2652
|
+
opacity 120ms 0ms var(--rls-deceleration-curve),
|
|
2644
2653
|
bottom 120ms 0ms var(--rls-deceleration-curve);
|
|
2645
2654
|
} /*# sourceMappingURL=Modal.css.map */
|
|
2646
2655
|
|
|
@@ -3133,8 +3142,8 @@
|
|
|
3133
3142
|
justify-content: flex-end;
|
|
3134
3143
|
visibility: hidden;
|
|
3135
3144
|
transform: translateX(100%);
|
|
3136
|
-
transition:
|
|
3137
|
-
|
|
3145
|
+
transition:
|
|
3146
|
+
opacity var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
|
|
3138
3147
|
transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
|
|
3139
3148
|
visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
|
|
3140
3149
|
z-index: var(--rls-z-index-16);
|
|
@@ -3354,8 +3363,8 @@
|
|
|
3354
3363
|
border-radius: var(--pvt-component-border-radius);
|
|
3355
3364
|
background: var(--rlc-modal-sheet-background, var(--rls-app-color-050));
|
|
3356
3365
|
transform: var(--pvt-component-transform);
|
|
3357
|
-
transition:
|
|
3358
|
-
|
|
3366
|
+
transition:
|
|
3367
|
+
opacity var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
|
|
3359
3368
|
transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
|
|
3360
3369
|
visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
|
|
3361
3370
|
}
|
|
@@ -3370,7 +3379,8 @@
|
|
|
3370
3379
|
z-index: 1;
|
|
3371
3380
|
background: var(--rls-theme-backdrop-900);
|
|
3372
3381
|
backdrop-filter: blur(2px);
|
|
3373
|
-
transition:
|
|
3382
|
+
transition:
|
|
3383
|
+
opacity 120ms 0ms var(--rls-deceleration-curve),
|
|
3374
3384
|
bottom 120ms 0ms var(--rls-deceleration-curve);
|
|
3375
3385
|
}
|
|
3376
3386
|
@media screen and (max-width: 640px) {
|
package/dist/cjs/index.js
CHANGED
|
@@ -746,7 +746,7 @@ function RlsProgressBar({ indeterminate, percentage, rlsTheme }) {
|
|
|
746
746
|
const className = require$$0.useMemo(() => {
|
|
747
747
|
return renderClassStatus('rls-progress-bar', { indeterminate });
|
|
748
748
|
}, [indeterminate]);
|
|
749
|
-
return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-progress-bar__component", style: { width: `${percentage
|
|
749
|
+
return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-progress-bar__component", style: { width: `${percentage ?? 0}%` } }) }));
|
|
750
750
|
}
|
|
751
751
|
|
|
752
752
|
function RlsProgressCircular({ rlsTheme }) {
|