@rolster/react-components 18.25.2 → 18.25.4

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.
@@ -1,9 +1,9 @@
1
1
  import { RlsComponent } from '../../definitions';
2
2
  import './BottomSheet.css';
3
- interface BottonSheetProps extends RlsComponent {
3
+ interface BottomSheetProps extends RlsComponent {
4
4
  className?: string;
5
5
  onAutoClose?: () => void;
6
6
  visible?: boolean;
7
7
  }
8
- export declare function RlsBottonSheet({ children, className, onAutoClose, visible, rlsTheme }: BottonSheetProps): import("react").ReactPortal;
8
+ export declare function RlsBottomSheet({ children, className, onAutoClose, visible, rlsTheme }: BottomSheetProps): import("react").ReactPortal;
9
9
  export {};
@@ -3,7 +3,7 @@ import { useCallback, useMemo } from 'react';
3
3
  import ReactDOM from 'react-dom';
4
4
  import { renderClassStatus } from '../../../helpers/css';
5
5
  import './BottomSheet.css';
6
- export function RlsBottonSheet({ children, className, onAutoClose, visible, rlsTheme }) {
6
+ export function RlsBottomSheet({ children, className, onAutoClose, visible, rlsTheme }) {
7
7
  const classNameSheet = useMemo(() => {
8
8
  return renderClassStatus('rls-bottom-sheet', { visible }, className);
9
9
  }, [className, visible]);
@@ -30,6 +30,7 @@
30
30
  display: flex;
31
31
  max-width: var(--rlc-modal-max-width, calc(100% - var(--rls-sizing-x8)));
32
32
  height: var(--pvt-component-height);
33
+ max-height: calc(100% - var(--rls-sizing-x12));
33
34
  flex-direction: column;
34
35
  opacity: var(--pvt-component-opacity);
35
36
  visibility: var(--pvt-component-visibility);
@@ -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,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,8CACA,sBACA,qCACA,2CACA,6BACA,mCACA,iEACA,yCACA,gKAKF,qBACE,kBACA,cACA,SACA,UACA,WACA,kCACA,oCACA,UACA,yCACA,0BACA","file":"Modal.css"}
@@ -1,13 +1,12 @@
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;
@@ -28,7 +27,7 @@
28
27
  --pvt-component-visibility: visible;
29
28
  --pvt-component-height: auto;
30
29
  --pvt-component-opacity: 1;
31
- --pvt-component-transform: var(--pvt-component-transform-visible);
30
+ --pvt-component-transform: translateY(0) scale(1);
32
31
  --pvt-backdrop-bottom: 0rem;
33
32
  --pvt-backdrop-opacity: 1;
34
33
  visibility: visible;
@@ -65,25 +64,9 @@
65
64
  transition: opacity 120ms 0ms var(--rls-deceleration-curve),
66
65
  bottom 120ms 0ms var(--rls-deceleration-curve);
67
66
  }
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
67
  @media screen and (max-width: 640px) {
84
68
  .rls-modal-sheet {
85
69
  --pvt-component-transform: translateY(100%);
86
- --pvt-component-transform-visible: translateY(0);
87
70
  --pvt-component-bottom: 0px;
88
71
  --pvt-component-max-width: 240rem;
89
72
  --pvt-component-max-height: 75%;
@@ -91,6 +74,9 @@
91
74
  0rem 0rem;
92
75
  align-items: initial;
93
76
  }
77
+ .rls-modal-sheet--visible {
78
+ --pvt-component-transform: translateY(0);
79
+ }
94
80
  .rls-modal-sheet__component::before {
95
81
  display: block;
96
82
  content: '';
@@ -100,4 +86,19 @@
100
86
  background: var(--rls-app-color-300);
101
87
  margin: var(--rls-sizing-x3) auto;
102
88
  }
89
+ }
90
+ @media screen and (max-width: 640px) and (max-height: 960px) {
91
+ .rls-modal-sheet {
92
+ --pvt-component-max-height: calc(100% - 32rem);
93
+ }
94
+ }
95
+ @media screen and (max-width: 640px) and (max-height: 720px) {
96
+ .rls-modal-sheet {
97
+ --pvt-component-max-height: calc(100% - 24rem);
98
+ }
99
+ }
100
+ @media screen and (max-width: 640px) and (max-height: 560px) {
101
+ .rls-modal-sheet {
102
+ --pvt-component-max-height: calc(100% - 16rem);
103
+ }
103
104
  } /*# sourceMappingURL=ModalSheet.css.map */
@@ -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,mCAEA,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,gKAKF,2BACE,kBACA,cACA,SACA,UACA,WACA,kCACA,oCACA,UACA,yCACA,0BACA,0GAKJ,qCACE,iBACE,4CACA,4BACA,kCACA,gCACA,mFAGA,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.2",
3
+ "version": "18.25.4",
4
4
  "type": "module",
5
5
  "description": "Package containing UI components for React Project.",
6
6
  "module": "dist/esm/index.js",