@rolster/react-components 18.25.3 → 18.25.5

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 (9) hide show
  1. package/dist/cjs/assets/{index-B6PshrCZ.css → index-CTyuJiCr.css} +37 -28
  2. package/dist/es/assets/{index-B6PshrCZ.css → index-CTyuJiCr.css} +37 -28
  3. package/dist/esm/components/organisms/BottomSheet/BottomSheet.css +5 -3
  4. package/dist/esm/components/organisms/BottomSheet/BottomSheet.css.map +1 -1
  5. package/dist/esm/components/organisms/Modal/Modal.css +6 -3
  6. package/dist/esm/components/organisms/Modal/Modal.css.map +1 -1
  7. package/dist/esm/components/organisms/ModalSheet/ModalSheet.css +26 -22
  8. package/dist/esm/components/organisms/ModalSheet/ModalSheet.css.map +1 -1
  9. package/package.json +1 -1
package/dist/cjs/assets/{index-B6PshrCZ.css → index-CTyuJiCr.css} RENAMED
@@ -1992,6 +1992,7 @@
1992
1992
  --pvt-component-max-height: 75%;
1993
1993
  --pvt-component-opacity: 0;
1994
1994
  --pvt-component-visibility: hidden;
1995
+ --pvt-component-transition: 320ms;
1995
1996
  --pvt-backdrop-opacity: 0;
1996
1997
  --pvt-backdrop-bottom: initial;
1997
1998
  position: fixed;
@@ -2027,9 +2028,10 @@
2027
2028
  border-radius: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem 0rem;
2028
2029
  background: var(--rlc-bottom-sheet-background, var(--rls-app-color-050));
2029
2030
  transform: var(--pvt-component-transform);
2030
- transition: opacity 240ms 0ms var(--rls-deceleration-curve),
2031
- transform 240ms 0ms var(--rls-deceleration-curve),
2032
- visibility 240ms 0ms var(--rls-deceleration-curve);
2031
+ transition: opacity var(--pvt-component-transition) 0ms
2032
+ var(--rls-deceleration-curve),
2033
+ transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
2034
+ visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
2033
2035
  }
2034
2036
  .rls-bottom-sheet__component::before {
2035
2037
  display: block;
@@ -2313,6 +2315,7 @@
2313
2315
  --pvt-component-height: 0rem;
2314
2316
  --pvt-component-opacity: 0;
2315
2317
  --pvt-component-visibility: hidden;
2318
+ --pvt-component-transition: 160ms;
2316
2319
  --pvt-backdrop-opacity: 0;
2317
2320
  --pvt-backdrop-bottom: initial;
2318
2321
  position: fixed;
@@ -2340,6 +2343,7 @@
2340
2343
  display: flex;
2341
2344
  max-width: var(--rlc-modal-max-width, calc(100% - var(--rls-sizing-x8)));
2342
2345
  height: var(--pvt-component-height);
2346
+ max-height: calc(100% - var(--rls-sizing-x12));
2343
2347
  flex-direction: column;
2344
2348
  opacity: var(--pvt-component-opacity);
2345
2349
  visibility: var(--pvt-component-visibility);
@@ -2347,9 +2351,10 @@
2347
2351
  border-radius: var(--rls-sizing-x4);
2348
2352
  background: var(--rlc-modal-background, var(--rls-app-color-050));
2349
2353
  transform: var(--pvt-component-transform);
2350
- transition: opacity 160ms 0ms var(--rls-deceleration-curve),
2351
- transform 160ms 0ms var(--rls-deceleration-curve),
2352
- visibility 160ms 0ms var(--rls-deceleration-curve);
2354
+ transition: opacity var(--pvt-component-transition) 0ms
2355
+ var(--rls-deceleration-curve),
2356
+ transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
2357
+ visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
2353
2358
  }
2354
2359
  .rls-modal__backdrop {
2355
2360
  position: absolute;
@@ -2850,17 +2855,17 @@
2850
2855
 
2851
2856
  .rls-modal-sheet {
2852
2857
  --pvt-component-transform: translateY(150px) scale(0.6);
2853
- --pvt-component-transform-visible: translateY(0) scale(1);
2854
2858
  --pvt-component-bottom: initial;
2855
2859
  --pvt-component-max-width: var(
2856
2860
  --rlc-modal-sheet-max-width,
2857
2861
  calc(100% - var(--rls-sizing-x8))
2858
2862
  );
2859
2863
  --pvt-component-height: 0rem;
2860
- --pvt-component-max-height: initial;
2864
+ --pvt-component-max-height: calc(100% - var(--rls-sizing-x12));
2861
2865
  --pvt-component-border-radius: var(--rls-sizing-x4);
2862
2866
  --pvt-component-opacity: 0;
2863
2867
  --pvt-component-visibility: hidden;
2868
+ --pvt-component-transition: 160ms;
2864
2869
  --pvt-backdrop-opacity: 0;
2865
2870
  --pvt-backdrop-bottom: initial;
2866
2871
  position: fixed;
@@ -2878,7 +2883,7 @@
2878
2883
  --pvt-component-visibility: visible;
2879
2884
  --pvt-component-height: auto;
2880
2885
  --pvt-component-opacity: 1;
2881
- --pvt-component-transform: var(--pvt-component-transform-visible);
2886
+ --pvt-component-transform: translateY(0) scale(1);
2882
2887
  --pvt-backdrop-bottom: 0rem;
2883
2888
  --pvt-backdrop-opacity: 1;
2884
2889
  visibility: visible;
@@ -2897,9 +2902,10 @@
2897
2902
  border-radius: var(--pvt-component-border-radius);
2898
2903
  background: var(--rlc-modal-sheet-background, var(--rls-app-color-050));
2899
2904
  transform: var(--pvt-component-transform);
2900
- transition: opacity 125ms 0ms var(--rls-deceleration-curve),
2901
- transform 125ms 0ms var(--rls-deceleration-curve),
2902
- visibility 125ms 0ms var(--rls-deceleration-curve);
2905
+ transition: opacity var(--pvt-component-transition) 0ms
2906
+ var(--rls-deceleration-curve),
2907
+ transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
2908
+ visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
2903
2909
  }
2904
2910
  .rls-modal-sheet__backdrop {
2905
2911
  position: absolute;
@@ -2915,32 +2921,20 @@
2915
2921
  transition: opacity 120ms 0ms var(--rls-deceleration-curve),
2916
2922
  bottom 120ms 0ms var(--rls-deceleration-curve);
2917
2923
  }
2918
- @media screen and (max-width: 640px) and (max-height: 960px) {
2919
- .rls-modal-sheet {
2920
- --pvt-component-max-height: calc(100% - 32rem);
2921
- }
2922
- }
2923
- @media screen and (max-width: 640px) and (max-height: 720px) {
2924
- .rls-modal-sheet {
2925
- --pvt-component-max-height: calc(100% - 24rem);
2926
- }
2927
- }
2928
- @media screen and (max-width: 640px) and (max-height: 560px) {
2929
- .rls-modal-sheet {
2930
- --pvt-component-max-height: calc(100% - 16rem);
2931
- }
2932
- }
2933
2924
  @media screen and (max-width: 640px) {
2934
2925
  .rls-modal-sheet {
2935
2926
  --pvt-component-transform: translateY(100%);
2936
- --pvt-component-transform-visible: translateY(0);
2937
2927
  --pvt-component-bottom: 0px;
2938
2928
  --pvt-component-max-width: 240rem;
2939
2929
  --pvt-component-max-height: 75%;
2940
2930
  --pvt-component-border-radius: var(--rls-sizing-x4) var(--rls-sizing-x4)
2941
2931
  0rem 0rem;
2932
+ --pvt-component-transition: 320ms;
2942
2933
  align-items: initial;
2943
2934
  }
2935
+ .rls-modal-sheet--visible {
2936
+ --pvt-component-transform: translateY(0);
2937
+ }
2944
2938
  .rls-modal-sheet__component::before {
2945
2939
  display: block;
2946
2940
  content: '';
@@ -2950,6 +2944,21 @@
2950
2944
  background: var(--rls-app-color-300);
2951
2945
  margin: var(--rls-sizing-x3) auto;
2952
2946
  }
2947
+ }
2948
+ @media screen and (max-width: 640px) and (max-height: 960px) {
2949
+ .rls-modal-sheet {
2950
+ --pvt-component-max-height: calc(100% - 32rem);
2951
+ }
2952
+ }
2953
+ @media screen and (max-width: 640px) and (max-height: 720px) {
2954
+ .rls-modal-sheet {
2955
+ --pvt-component-max-height: calc(100% - 24rem);
2956
+ }
2957
+ }
2958
+ @media screen and (max-width: 640px) and (max-height: 560px) {
2959
+ .rls-modal-sheet {
2960
+ --pvt-component-max-height: calc(100% - 16rem);
2961
+ }
2953
2962
  } /*# sourceMappingURL=ModalSheet.css.map */
2954
2963
 
2955
2964
  .rls-snackbar {
package/dist/es/assets/{index-B6PshrCZ.css → index-CTyuJiCr.css} RENAMED
@@ -1992,6 +1992,7 @@
1992
1992
  --pvt-component-max-height: 75%;
1993
1993
  --pvt-component-opacity: 0;
1994
1994
  --pvt-component-visibility: hidden;
1995
+ --pvt-component-transition: 320ms;
1995
1996
  --pvt-backdrop-opacity: 0;
1996
1997
  --pvt-backdrop-bottom: initial;
1997
1998
  position: fixed;
@@ -2027,9 +2028,10 @@
2027
2028
  border-radius: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem 0rem;
2028
2029
  background: var(--rlc-bottom-sheet-background, var(--rls-app-color-050));
2029
2030
  transform: var(--pvt-component-transform);
2030
- transition: opacity 240ms 0ms var(--rls-deceleration-curve),
2031
- transform 240ms 0ms var(--rls-deceleration-curve),
2032
- visibility 240ms 0ms var(--rls-deceleration-curve);
2031
+ transition: opacity var(--pvt-component-transition) 0ms
2032
+ var(--rls-deceleration-curve),
2033
+ transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
2034
+ visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
2033
2035
  }
2034
2036
  .rls-bottom-sheet__component::before {
2035
2037
  display: block;
@@ -2313,6 +2315,7 @@
2313
2315
  --pvt-component-height: 0rem;
2314
2316
  --pvt-component-opacity: 0;
2315
2317
  --pvt-component-visibility: hidden;
2318
+ --pvt-component-transition: 160ms;
2316
2319
  --pvt-backdrop-opacity: 0;
2317
2320
  --pvt-backdrop-bottom: initial;
2318
2321
  position: fixed;
@@ -2340,6 +2343,7 @@
2340
2343
  display: flex;
2341
2344
  max-width: var(--rlc-modal-max-width, calc(100% - var(--rls-sizing-x8)));
2342
2345
  height: var(--pvt-component-height);
2346
+ max-height: calc(100% - var(--rls-sizing-x12));
2343
2347
  flex-direction: column;
2344
2348
  opacity: var(--pvt-component-opacity);
2345
2349
  visibility: var(--pvt-component-visibility);
@@ -2347,9 +2351,10 @@
2347
2351
  border-radius: var(--rls-sizing-x4);
2348
2352
  background: var(--rlc-modal-background, var(--rls-app-color-050));
2349
2353
  transform: var(--pvt-component-transform);
2350
- transition: opacity 160ms 0ms var(--rls-deceleration-curve),
2351
- transform 160ms 0ms var(--rls-deceleration-curve),
2352
- visibility 160ms 0ms var(--rls-deceleration-curve);
2354
+ transition: opacity var(--pvt-component-transition) 0ms
2355
+ var(--rls-deceleration-curve),
2356
+ transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
2357
+ visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
2353
2358
  }
2354
2359
  .rls-modal__backdrop {
2355
2360
  position: absolute;
@@ -2850,17 +2855,17 @@
2850
2855
 
2851
2856
  .rls-modal-sheet {
2852
2857
  --pvt-component-transform: translateY(150px) scale(0.6);
2853
- --pvt-component-transform-visible: translateY(0) scale(1);
2854
2858
  --pvt-component-bottom: initial;
2855
2859
  --pvt-component-max-width: var(
2856
2860
  --rlc-modal-sheet-max-width,
2857
2861
  calc(100% - var(--rls-sizing-x8))
2858
2862
  );
2859
2863
  --pvt-component-height: 0rem;
2860
- --pvt-component-max-height: initial;
2864
+ --pvt-component-max-height: calc(100% - var(--rls-sizing-x12));
2861
2865
  --pvt-component-border-radius: var(--rls-sizing-x4);
2862
2866
  --pvt-component-opacity: 0;
2863
2867
  --pvt-component-visibility: hidden;
2868
+ --pvt-component-transition: 160ms;
2864
2869
  --pvt-backdrop-opacity: 0;
2865
2870
  --pvt-backdrop-bottom: initial;
2866
2871
  position: fixed;
@@ -2878,7 +2883,7 @@
2878
2883
  --pvt-component-visibility: visible;
2879
2884
  --pvt-component-height: auto;
2880
2885
  --pvt-component-opacity: 1;
2881
- --pvt-component-transform: var(--pvt-component-transform-visible);
2886
+ --pvt-component-transform: translateY(0) scale(1);
2882
2887
  --pvt-backdrop-bottom: 0rem;
2883
2888
  --pvt-backdrop-opacity: 1;
2884
2889
  visibility: visible;
@@ -2897,9 +2902,10 @@
2897
2902
  border-radius: var(--pvt-component-border-radius);
2898
2903
  background: var(--rlc-modal-sheet-background, var(--rls-app-color-050));
2899
2904
  transform: var(--pvt-component-transform);
2900
- transition: opacity 125ms 0ms var(--rls-deceleration-curve),
2901
- transform 125ms 0ms var(--rls-deceleration-curve),
2902
- visibility 125ms 0ms var(--rls-deceleration-curve);
2905
+ transition: opacity var(--pvt-component-transition) 0ms
2906
+ var(--rls-deceleration-curve),
2907
+ transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
2908
+ visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
2903
2909
  }
2904
2910
  .rls-modal-sheet__backdrop {
2905
2911
  position: absolute;
@@ -2915,32 +2921,20 @@
2915
2921
  transition: opacity 120ms 0ms var(--rls-deceleration-curve),
2916
2922
  bottom 120ms 0ms var(--rls-deceleration-curve);
2917
2923
  }
2918
- @media screen and (max-width: 640px) and (max-height: 960px) {
2919
- .rls-modal-sheet {
2920
- --pvt-component-max-height: calc(100% - 32rem);
2921
- }
2922
- }
2923
- @media screen and (max-width: 640px) and (max-height: 720px) {
2924
- .rls-modal-sheet {
2925
- --pvt-component-max-height: calc(100% - 24rem);
2926
- }
2927
- }
2928
- @media screen and (max-width: 640px) and (max-height: 560px) {
2929
- .rls-modal-sheet {
2930
- --pvt-component-max-height: calc(100% - 16rem);
2931
- }
2932
- }
2933
2924
  @media screen and (max-width: 640px) {
2934
2925
  .rls-modal-sheet {
2935
2926
  --pvt-component-transform: translateY(100%);
2936
- --pvt-component-transform-visible: translateY(0);
2937
2927
  --pvt-component-bottom: 0px;
2938
2928
  --pvt-component-max-width: 240rem;
2939
2929
  --pvt-component-max-height: 75%;
2940
2930
  --pvt-component-border-radius: var(--rls-sizing-x4) var(--rls-sizing-x4)
2941
2931
  0rem 0rem;
2932
+ --pvt-component-transition: 320ms;
2942
2933
  align-items: initial;
2943
2934
  }
2935
+ .rls-modal-sheet--visible {
2936
+ --pvt-component-transform: translateY(0);
2937
+ }
2944
2938
  .rls-modal-sheet__component::before {
2945
2939
  display: block;
2946
2940
  content: '';
@@ -2950,6 +2944,21 @@
2950
2944
  background: var(--rls-app-color-300);
2951
2945
  margin: var(--rls-sizing-x3) auto;
2952
2946
  }
2947
+ }
2948
+ @media screen and (max-width: 640px) and (max-height: 960px) {
2949
+ .rls-modal-sheet {
2950
+ --pvt-component-max-height: calc(100% - 32rem);
2951
+ }
2952
+ }
2953
+ @media screen and (max-width: 640px) and (max-height: 720px) {
2954
+ .rls-modal-sheet {
2955
+ --pvt-component-max-height: calc(100% - 24rem);
2956
+ }
2957
+ }
2958
+ @media screen and (max-width: 640px) and (max-height: 560px) {
2959
+ .rls-modal-sheet {
2960
+ --pvt-component-max-height: calc(100% - 16rem);
2961
+ }
2953
2962
  } /*# sourceMappingURL=ModalSheet.css.map */
2954
2963
 
2955
2964
  .rls-snackbar {
package/dist/esm/components/organisms/BottomSheet/BottomSheet.css CHANGED
@@ -4,6 +4,7 @@
4
4
  --pvt-component-max-height: 75%;
5
5
  --pvt-component-opacity: 0;
6
6
  --pvt-component-visibility: hidden;
7
+ --pvt-component-transition: 320ms;
7
8
  --pvt-backdrop-opacity: 0;
8
9
  --pvt-backdrop-bottom: initial;
9
10
  position: fixed;
@@ -39,9 +40,10 @@
39
40
  border-radius: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem 0rem;
40
41
  background: var(--rlc-bottom-sheet-background, var(--rls-app-color-050));
41
42
  transform: var(--pvt-component-transform);
42
- transition: opacity 240ms 0ms var(--rls-deceleration-curve),
43
- transform 240ms 0ms var(--rls-deceleration-curve),
44
- visibility 240ms 0ms var(--rls-deceleration-curve);
43
+ transition: opacity var(--pvt-component-transition) 0ms
44
+ var(--rls-deceleration-curve),
45
+ transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
46
+ visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
45
47
  }
46
48
  .rls-bottom-sheet__component::before {
47
49
  display: block;
package/dist/esm/components/organisms/BottomSheet/BottomSheet.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../../src/components/organisms/BottomSheet/BottomSheet.scss"],"names":[],"mappings":"AAOA,kBACE,4CACA,6BACA,gCACA,2BACA,mCAEA,0BACA,+BAEA,eACA,aACA,SACA,UACA,WACA,YACA,uBACA,8BACA,kBAEA,2BACE,oCACA,6BACA,2BACA,yCACA,4BACA,0BAEA,mBAGF,6BACE,kBACA,aACA,WACA,WACA,iBACA,2CACA,sBACA,qCACA,2CACA,6BACA,kEACA,wEACA,yCACA,gKAIA,qCACE,cACA,WACA,4BACA,4BACA,mCACA,oCACA,iCAIJ,4BACE,kBACA,cACA,SACA,UACA,WACA,kCACA,oCACA,UACA,yCACA,0BACA,0GAKJ,sCACE,kBACE,gDAIJ,sCACE,kBACE,gDAIJ,sCACE,kBACE","file":"BottomSheet.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../../src/components/organisms/BottomSheet/BottomSheet.scss"],"names":[],"mappings":"AAOA,kBACE,4CACA,6BACA,gCACA,2BACA,mCACA,kCAEA,0BACA,+BAEA,eACA,aACA,SACA,UACA,WACA,YACA,uBACA,8BACA,kBAEA,2BACE,oCACA,6BACA,2BACA,yCACA,4BACA,0BAEA,mBAGF,6BACE,kBACA,aACA,WACA,WACA,iBACA,2CACA,sBACA,qCACA,2CACA,6BACA,kEACA,wEACA,yCACA,8OAOA,qCACE,cACA,WACA,4BACA,4BACA,mCACA,oCACA,iCAIJ,4BACE,kBACA,cACA,SACA,UACA,WACA,kCACA,oCACA,UACA,yCACA,0BACA,0GAKJ,sCACE,kBACE,gDAIJ,sCACE,kBACE,gDAIJ,sCACE,kBACE","file":"BottomSheet.css"}
package/dist/esm/components/organisms/Modal/Modal.css CHANGED
@@ -3,6 +3,7 @@
3
3
  --pvt-component-height: 0rem;
4
4
  --pvt-component-opacity: 0;
5
5
  --pvt-component-visibility: hidden;
6
+ --pvt-component-transition: 160ms;
6
7
  --pvt-backdrop-opacity: 0;
7
8
  --pvt-backdrop-bottom: initial;
8
9
  position: fixed;
@@ -30,6 +31,7 @@
30
31
  display: flex;
31
32
  max-width: var(--rlc-modal-max-width, calc(100% - var(--rls-sizing-x8)));
32
33
  height: var(--pvt-component-height);
34
+ max-height: calc(100% - var(--rls-sizing-x12));
33
35
  flex-direction: column;
34
36
  opacity: var(--pvt-component-opacity);
35
37
  visibility: var(--pvt-component-visibility);
@@ -37,9 +39,10 @@
37
39
  border-radius: var(--rls-sizing-x4);
38
40
  background: var(--rlc-modal-background, var(--rls-app-color-050));
39
41
  transform: var(--pvt-component-transform);
40
- transition: opacity 160ms 0ms var(--rls-deceleration-curve),
41
- transform 160ms 0ms var(--rls-deceleration-curve),
42
- visibility 160ms 0ms var(--rls-deceleration-curve);
42
+ transition: opacity var(--pvt-component-transition) 0ms
43
+ var(--rls-deceleration-curve),
44
+ transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
45
+ visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
43
46
  }
44
47
  .rls-modal__backdrop {
45
48
  position: absolute;
package/dist/esm/components/organisms/Modal/Modal.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../../src/components/organisms/Modal/Modal.scss"],"names":[],"mappings":"AAOA,WACE,wDACA,6BACA,2BACA,mCAEA,0BACA,+BAEA,eACA,aACA,SACA,UACA,WACA,YACA,8BACA,kBACA,mBACA,uBAEA,oBACE,oCACA,6BACA,2BACA,kDACA,4BACA,0BAEA,mBAGF,sBACE,kBACA,aACA,wEACA,mCACA,sBACA,qCACA,2CACA,6BACA,mCACA,iEACA,yCACA,gKAKF,qBACE,kBACA,cACA,SACA,UACA,WACA,kCACA,oCACA,UACA,yCACA,0BACA","file":"Modal.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../../src/components/organisms/Modal/Modal.scss"],"names":[],"mappings":"AAOA,WACE,wDACA,6BACA,2BACA,mCACA,kCAEA,0BACA,+BAEA,eACA,aACA,SACA,UACA,WACA,YACA,8BACA,kBACA,mBACA,uBAEA,oBACE,oCACA,6BACA,2BACA,kDACA,4BACA,0BAEA,mBAGF,sBACE,kBACA,aACA,wEACA,mCACA,8CACA,sBACA,qCACA,2CACA,6BACA,mCACA,iEACA,yCACA,8OAQF,qBACE,kBACA,cACA,SACA,UACA,WACA,kCACA,oCACA,UACA,yCACA,0BACA","file":"Modal.css"}
package/dist/esm/components/organisms/ModalSheet/ModalSheet.css CHANGED
@@ -1,16 +1,16 @@
1
1
  .rls-modal-sheet {
2
2
  --pvt-component-transform: translateY(150px) scale(0.6);
3
- --pvt-component-transform-visible: translateY(0) scale(1);
4
3
  --pvt-component-bottom: initial;
5
4
  --pvt-component-max-width: var(
6
5
  --rlc-modal-sheet-max-width,
7
6
  calc(100% - var(--rls-sizing-x8))
8
7
  );
9
8
  --pvt-component-height: 0rem;
10
- --pvt-component-max-height: initial;
9
+ --pvt-component-max-height: calc(100% - var(--rls-sizing-x12));
11
10
  --pvt-component-border-radius: var(--rls-sizing-x4);
12
11
  --pvt-component-opacity: 0;
13
12
  --pvt-component-visibility: hidden;
13
+ --pvt-component-transition: 160ms;
14
14
  --pvt-backdrop-opacity: 0;
15
15
  --pvt-backdrop-bottom: initial;
16
16
  position: fixed;
@@ -28,7 +28,7 @@
28
28
  --pvt-component-visibility: visible;
29
29
  --pvt-component-height: auto;
30
30
  --pvt-component-opacity: 1;
31
- --pvt-component-transform: var(--pvt-component-transform-visible);
31
+ --pvt-component-transform: translateY(0) scale(1);
32
32
  --pvt-backdrop-bottom: 0rem;
33
33
  --pvt-backdrop-opacity: 1;
34
34
  visibility: visible;
@@ -47,9 +47,10 @@
47
47
  border-radius: var(--pvt-component-border-radius);
48
48
  background: var(--rlc-modal-sheet-background, var(--rls-app-color-050));
49
49
  transform: var(--pvt-component-transform);
50
- transition: opacity 125ms 0ms var(--rls-deceleration-curve),
51
- transform 125ms 0ms var(--rls-deceleration-curve),
52
- visibility 125ms 0ms var(--rls-deceleration-curve);
50
+ transition: opacity var(--pvt-component-transition) 0ms
51
+ var(--rls-deceleration-curve),
52
+ transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
53
+ visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
53
54
  }
54
55
  .rls-modal-sheet__backdrop {
55
56
  position: absolute;
@@ -65,32 +66,20 @@
65
66
  transition: opacity 120ms 0ms var(--rls-deceleration-curve),
66
67
  bottom 120ms 0ms var(--rls-deceleration-curve);
67
68
  }
68
- @media screen and (max-width: 640px) and (max-height: 960px) {
69
- .rls-modal-sheet {
70
- --pvt-component-max-height: calc(100% - 32rem);
71
- }
72
- }
73
- @media screen and (max-width: 640px) and (max-height: 720px) {
74
- .rls-modal-sheet {
75
- --pvt-component-max-height: calc(100% - 24rem);
76
- }
77
- }
78
- @media screen and (max-width: 640px) and (max-height: 560px) {
79
- .rls-modal-sheet {
80
- --pvt-component-max-height: calc(100% - 16rem);
81
- }
82
- }
83
69
  @media screen and (max-width: 640px) {
84
70
  .rls-modal-sheet {
85
71
  --pvt-component-transform: translateY(100%);
86
- --pvt-component-transform-visible: translateY(0);
87
72
  --pvt-component-bottom: 0px;
88
73
  --pvt-component-max-width: 240rem;
89
74
  --pvt-component-max-height: 75%;
90
75
  --pvt-component-border-radius: var(--rls-sizing-x4) var(--rls-sizing-x4)
91
76
  0rem 0rem;
77
+ --pvt-component-transition: 320ms;
92
78
  align-items: initial;
93
79
  }
80
+ .rls-modal-sheet--visible {
81
+ --pvt-component-transform: translateY(0);
82
+ }
94
83
  .rls-modal-sheet__component::before {
95
84
  display: block;
96
85
  content: '';
@@ -100,4 +89,19 @@
100
89
  background: var(--rls-app-color-300);
101
90
  margin: var(--rls-sizing-x3) auto;
102
91
  }
92
+ }
93
+ @media screen and (max-width: 640px) and (max-height: 960px) {
94
+ .rls-modal-sheet {
95
+ --pvt-component-max-height: calc(100% - 32rem);
96
+ }
97
+ }
98
+ @media screen and (max-width: 640px) and (max-height: 720px) {
99
+ .rls-modal-sheet {
100
+ --pvt-component-max-height: calc(100% - 24rem);
101
+ }
102
+ }
103
+ @media screen and (max-width: 640px) and (max-height: 560px) {
104
+ .rls-modal-sheet {
105
+ --pvt-component-max-height: calc(100% - 16rem);
106
+ }
103
107
  } /*# sourceMappingURL=ModalSheet.css.map */
package/dist/esm/components/organisms/ModalSheet/ModalSheet.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../../src/components/organisms/ModalSheet/ModalSheet.scss"],"names":[],"mappings":"AAOA,iBACE,wDACA,0DACA,gCACA,iGAIA,6BACA,oCACA,oDACA,2BACA,mCAEA,0BACA,+BAEA,eACA,aACA,SACA,UACA,WACA,YACA,8BACA,kBACA,mBACA,uBAEA,0BACE,oCACA,6BACA,2BACA,kEACA,4BACA,0BAEA,mBAGF,4BACE,kBACA,aACA,mCACA,yCACA,mCACA,2CACA,sBACA,qCACA,2CACA,6BACA,iDACA,uEACA,yCACA,gKAKF,2BACE,kBACA,cACA,SACA,UACA,WACA,kCACA,oCACA,UACA,yCACA,0BACA,0GAKJ,4DACE,iBACE,gDAIJ,4DACE,iBACE,gDAIJ,4DACE,iBACE,gDAIJ,qCACE,iBACE,4CACA,iDACA,4BACA,kCACA,gCACA,mFAGA,oBAGE,oCACE,cACA,WACA,4BACA,4BACA,mCACA,oCACA","file":"ModalSheet.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../../src/components/organisms/ModalSheet/ModalSheet.scss"],"names":[],"mappings":"AAOA,iBACE,wDACA,gCACA,iGAIA,6BACA,+DACA,oDACA,2BACA,mCACA,kCAEA,0BACA,+BAEA,eACA,aACA,SACA,UACA,WACA,YACA,8BACA,kBACA,mBACA,uBAEA,0BACE,oCACA,6BACA,2BACA,kDACA,4BACA,0BAEA,mBAGF,4BACE,kBACA,aACA,mCACA,yCACA,mCACA,2CACA,sBACA,qCACA,2CACA,6BACA,iDACA,uEACA,yCACA,8OAQF,2BACE,kBACA,cACA,SACA,UACA,WACA,kCACA,oCACA,UACA,yCACA,0BACA,0GAKJ,qCACE,iBACE,4CACA,4BACA,kCACA,gCACA,mFAEA,kCAEA,oBAEA,0BACE,yCAIA,oCACE,cACA,WACA,4BACA,4BACA,mCACA,oCACA,kCAMR,4DACE,iBACE,gDAIJ,4DACE,iBACE,gDAIJ,4DACE,iBACE","file":"ModalSheet.css"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rolster/react-components",
3
- "version": "18.25.3",
3
+ "version": "18.25.5",
4
4
  "type": "module",
5
5
  "description": "Package containing UI components for React Project.",
6
6
  "module": "dist/esm/index.js",