@cuemath/leap 3.1.26 → 3.1.27-as2
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.
|
@@ -38,7 +38,6 @@ const s = o.div(
|
|
|
38
38
|
width: ${i};
|
|
39
39
|
background-color: ${a.WHITE_1};
|
|
40
40
|
border: 1px solid ${a.BLACK_1};
|
|
41
|
-
transform-origin: center center;
|
|
42
41
|
animation: ${t ? "modalDisappear" : "modalAppear"} 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
|
|
43
42
|
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.20);
|
|
44
43
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal-styled.js","sources":["../../../../src/features/ui/modals/modal-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nconst ModalContainer = styled.div<{ $isClosing?: boolean }>(\n ({ theme: { colors, zIndex }, $isClosing }) => `\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ${colors.BLACK_T_60};\n backdrop-filter: blur(40px);\n display: flex;\n animation: ${$isClosing ? 'backdropFadeOut' : 'backdropFadeIn'} 0.2s ease-out forwards;\n z-index: ${zIndex.MODAL};\n\n @keyframes backdropFadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n \n @keyframes backdropFadeOut {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n`,\n);\n\n/**\n * Base modal container with customizable width and animation state\n */\nconst BaseModal = styled.div<{\n $isClosing?: boolean;\n $width: string;\n}>(\n ({ theme: { colors }, $isClosing, $width }) => `\n position: relative;\n align-self: center;\n margin: 0 auto;\n width: ${$width};\n background-color: ${colors.WHITE_1};\n border: 1px solid ${colors.BLACK_1};\n
|
|
1
|
+
{"version":3,"file":"modal-styled.js","sources":["../../../../src/features/ui/modals/modal-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nconst ModalContainer = styled.div<{ $isClosing?: boolean }>(\n ({ theme: { colors, zIndex }, $isClosing }) => `\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ${colors.BLACK_T_60};\n backdrop-filter: blur(40px);\n display: flex;\n animation: ${$isClosing ? 'backdropFadeOut' : 'backdropFadeIn'} 0.2s ease-out forwards;\n z-index: ${zIndex.MODAL};\n\n @keyframes backdropFadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n \n @keyframes backdropFadeOut {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n`,\n);\n\n/**\n * Base modal container with customizable width and animation state\n */\nconst BaseModal = styled.div<{\n $isClosing?: boolean;\n $width: string;\n}>(\n ({ theme: { colors }, $isClosing, $width }) => `\n position: relative;\n align-self: center;\n margin: 0 auto;\n width: ${$width};\n background-color: ${colors.WHITE_1};\n border: 1px solid ${colors.BLACK_1};\n animation: ${\n $isClosing ? 'modalDisappear' : 'modalAppear'\n } 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;\n box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.20);\n \n /* Responsive behavior for smaller screens */\n @media (max-width: calc(${$width} + 80px)) {\n width: 100%;\n max-width: 100%;\n height: 100%;\n max-height: 100%;\n border: none;\n }\n \n @keyframes modalAppear {\n 0% {\n opacity: 0;\n transform: perspective(1200px) translateZ(-50px) translateY(10px) scale(0.98);\n }\n 100% {\n opacity: 1;\n transform: perspective(1200px) translateZ(0) translateY(0) scale(1);\n }\n }\n \n @keyframes modalDisappear {\n 0% {\n opacity: 1;\n transform: perspective(1200px) translateZ(0) translateY(0) scale(1);\n }\n 100% {\n opacity: 0;\n transform: perspective(1200px) translateZ(-50px) translateY(10px) scale(0.98);\n }\n }\n`,\n);\n\n/**\n * Scrollable content container inside the modal\n */\nconst BaseModalContent = styled.div<{ $modalWidth: string }>(\n ({ $modalWidth }) => `\n max-height: calc(100vh - 142px);\n overflow-y: auto;\n\n @media (max-width: calc(${$modalWidth} + 80px)) {\n max-height: 100vh;\n }\n}`,\n);\n\n/**\n * Container for the close button with responsive positioning\n */\nconst CloseButtonContainer = styled.div<{ $modalWidth: string }>(\n ({ theme: { colors }, $modalWidth }) => `\n position: absolute;\n top: -56px;\n right: -40px;\n color: ${colors.WHITE_1};\n transition: all 0.2s ease;\n \n &:hover {\n transform: scale(1.05);\n }\n\n @media (max-width: calc(${$modalWidth} + 80px)) {\n top: 16px;\n right: 16px;\n color: ${colors.BLACK_1};\n }\n`,\n);\n\nconst spotlightWidth = 720;\nconst spotlightAnimationStartDuration = 800;\nconst spotlightAnimationEndDuration = 500;\n\nconst SpotlightModal = styled.div<{\n $isClosing?: boolean;\n}>(\n ({ $isClosing }) => `\n position: absolute;\n width: ${spotlightWidth}px;\n height: 100%;\n left: 50%;\n margin-left: ${-(spotlightWidth / 2)}px;\n clip-path: polygon(calc(50% - 100px) 0, calc(50% + 100px) 0, 100% 100%, 0 100%);\n background: linear-gradient(\n 180deg,\n rgba(0, 0, 0, 1) 0%,\n rgba(0, 0, 0, 0) 100%\n );\n animation: openSpotlight;\n animation-duration: ${spotlightAnimationStartDuration}ms;\n animation-timing-function: linear;\n animation-fill-mode: forwards;\n opacity: 0;\n ${\n $isClosing\n ? `\n animation: closeSpotlight;\n animation-duration: ${spotlightAnimationEndDuration}ms;\n animation-timing-function: linear;\n animation-fill-mode: forwards;\n opacity: 1;\n `\n : ''\n }\n\n @keyframes openSpotlight {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n @keyframes closeSpotlight {\n from {\n transform: rotateY(0);\n }\n to {\n transform: rotateY(90deg);\n }\n }\n`,\n);\n\nexport { ModalContainer, BaseModal, BaseModalContent, CloseButtonContainer, SpotlightModal };\n"],"names":["ModalContainer","styled","colors","zIndex","$isClosing","BaseModal","$width","BaseModalContent","$modalWidth","CloseButtonContainer","spotlightWidth","spotlightAnimationStartDuration","spotlightAnimationEndDuration","SpotlightModal"],"mappings":";AAEA,MAAMA,IAAiBC,EAAO;AAAA,EAC5B,CAAC,EAAE,OAAO,EAAE,QAAAC,GAAQ,QAAAC,EAAO,GAAG,YAAAC,QAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAM3BF,EAAO,UAAU;AAAA;AAAA;AAAA,eAGxBE,IAAa,oBAAoB,gBAAgB;AAAA,aACnDD,EAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBzB,GAKME,IAAYJ,EAAO;AAAA,EAIvB,CAAC,EAAE,OAAO,EAAE,QAAAC,EAAU,GAAA,YAAAE,GAAY,QAAAE,QAAa;AAAA;AAAA;AAAA;AAAA,WAItCA,CAAM;AAAA,sBACKJ,EAAO,OAAO;AAAA,sBACdA,EAAO,OAAO;AAAA,eAEhCE,IAAa,mBAAmB,aAClC;AAAA;AAAA;AAAA;AAAA,4BAI0BE,CAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BlC,GAKMC,IAAmBN,EAAO;AAAA,EAC9B,CAAC,EAAE,aAAAO,EAAA,MAAkB;AAAA;AAAA;AAAA;AAAA,4BAIKA,CAAW;AAAA;AAAA;AAAA;AAIvC,GAKMC,IAAuBR,EAAO;AAAA,EAClC,CAAC,EAAE,OAAO,EAAE,QAAAC,EAAO,GAAG,aAAAM,EAAkB,MAAA;AAAA;AAAA;AAAA;AAAA,WAI/BN,EAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAOGM,CAAW;AAAA;AAAA;AAAA,aAG1BN,EAAO,OAAO;AAAA;AAAA;AAG3B,GAEMQ,IAAiB,KACjBC,IAAkC,KAClCC,IAAgC,KAEhCC,IAAiBZ,EAAO;AAAA,EAG5B,CAAC,EAAE,YAAAG,EAAA,MAAiB;AAAA;AAAA,WAEXM,CAAc;AAAA;AAAA;AAAA,iBAGR,EAAEA,IAAiB,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQdC,CAA+B;AAAA;AAAA;AAAA;AAAA,IAKnDP,IACI;AAAA;AAAA,4BAEoBQ,CAA6B;AAAA;AAAA;AAAA;AAAA,QAKjD,EACN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBF;"}
|