@cuemath/leap 3.1.27-as1 → 3.1.27-as3
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,12 +1,12 @@
|
|
|
1
|
-
import
|
|
2
|
-
const
|
|
3
|
-
({ theme: { colors:
|
|
1
|
+
import a from "styled-components";
|
|
2
|
+
const l = a.div(
|
|
3
|
+
({ theme: { colors: o, zIndex: t }, $isClosing: i }) => `
|
|
4
4
|
position: fixed;
|
|
5
5
|
top: 0;
|
|
6
6
|
left: 0;
|
|
7
7
|
right: 0;
|
|
8
8
|
bottom: 0;
|
|
9
|
-
background-color: ${
|
|
9
|
+
background-color: ${o.BLACK_T_60};
|
|
10
10
|
backdrop-filter: blur(40px);
|
|
11
11
|
display: flex;
|
|
12
12
|
animation: ${i ? "backdropFadeOut" : "backdropFadeIn"} 0.2s ease-out forwards;
|
|
@@ -30,14 +30,14 @@ const s = o.div(
|
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
`
|
|
33
|
-
),
|
|
34
|
-
({ theme: { colors:
|
|
33
|
+
), s = a.div(
|
|
34
|
+
({ theme: { colors: o }, $isClosing: t, $width: i }) => `
|
|
35
35
|
position: relative;
|
|
36
36
|
align-self: center;
|
|
37
37
|
margin: 0 auto;
|
|
38
38
|
width: ${i};
|
|
39
|
-
background-color: ${
|
|
40
|
-
border: 1px solid ${
|
|
39
|
+
background-color: ${o.WHITE_1};
|
|
40
|
+
border: 1px solid ${o.BLACK_1};
|
|
41
41
|
animation: ${t ? "modalDisappear" : "modalAppear"} 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
|
|
42
42
|
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.20);
|
|
43
43
|
|
|
@@ -53,40 +53,44 @@ const s = o.div(
|
|
|
53
53
|
@keyframes modalAppear {
|
|
54
54
|
0% {
|
|
55
55
|
opacity: 0;
|
|
56
|
-
|
|
56
|
+
filter: blur(8px) brightness(0.95);
|
|
57
|
+
margin-top: 20px;
|
|
57
58
|
}
|
|
58
59
|
100% {
|
|
59
60
|
opacity: 1;
|
|
60
|
-
|
|
61
|
+
filter: blur(0) brightness(1);
|
|
62
|
+
margin-top: 0;
|
|
61
63
|
}
|
|
62
64
|
}
|
|
63
65
|
|
|
64
66
|
@keyframes modalDisappear {
|
|
65
67
|
0% {
|
|
66
68
|
opacity: 1;
|
|
67
|
-
|
|
69
|
+
filter: blur(0) brightness(1);
|
|
70
|
+
margin-top: 0;
|
|
68
71
|
}
|
|
69
72
|
100% {
|
|
70
73
|
opacity: 0;
|
|
71
|
-
|
|
74
|
+
filter: blur(8px) brightness(0.95);
|
|
75
|
+
margin-top: 20px;
|
|
72
76
|
}
|
|
73
77
|
}
|
|
74
78
|
`
|
|
75
|
-
), m =
|
|
76
|
-
({ $modalWidth:
|
|
79
|
+
), m = a.div(
|
|
80
|
+
({ $modalWidth: o }) => `
|
|
77
81
|
max-height: calc(100vh - 142px);
|
|
78
82
|
overflow-y: auto;
|
|
79
83
|
|
|
80
|
-
@media (max-width: calc(${
|
|
84
|
+
@media (max-width: calc(${o} + 80px)) {
|
|
81
85
|
max-height: 100vh;
|
|
82
86
|
}
|
|
83
87
|
}`
|
|
84
|
-
),
|
|
85
|
-
({ theme: { colors:
|
|
88
|
+
), d = a.div(
|
|
89
|
+
({ theme: { colors: o }, $modalWidth: t }) => `
|
|
86
90
|
position: absolute;
|
|
87
91
|
top: -56px;
|
|
88
92
|
right: -40px;
|
|
89
|
-
color: ${
|
|
93
|
+
color: ${o.WHITE_1};
|
|
90
94
|
transition: all 0.2s ease;
|
|
91
95
|
|
|
92
96
|
&:hover {
|
|
@@ -96,11 +100,11 @@ const s = o.div(
|
|
|
96
100
|
@media (max-width: calc(${t} + 80px)) {
|
|
97
101
|
top: 16px;
|
|
98
102
|
right: 16px;
|
|
99
|
-
color: ${
|
|
103
|
+
color: ${o.BLACK_1};
|
|
100
104
|
}
|
|
101
105
|
`
|
|
102
|
-
), e = 720, r = 800, n = 500,
|
|
103
|
-
({ $isClosing:
|
|
106
|
+
), e = 720, r = 800, n = 500, c = a.div(
|
|
107
|
+
({ $isClosing: o }) => `
|
|
104
108
|
position: absolute;
|
|
105
109
|
width: ${e}px;
|
|
106
110
|
height: 100%;
|
|
@@ -117,7 +121,7 @@ const s = o.div(
|
|
|
117
121
|
animation-timing-function: linear;
|
|
118
122
|
animation-fill-mode: forwards;
|
|
119
123
|
opacity: 0;
|
|
120
|
-
${
|
|
124
|
+
${o ? `
|
|
121
125
|
animation: closeSpotlight;
|
|
122
126
|
animation-duration: ${n}ms;
|
|
123
127
|
animation-timing-function: linear;
|
|
@@ -145,10 +149,10 @@ const s = o.div(
|
|
|
145
149
|
`
|
|
146
150
|
);
|
|
147
151
|
export {
|
|
148
|
-
|
|
152
|
+
s as BaseModal,
|
|
149
153
|
m as BaseModalContent,
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
154
|
+
d as CloseButtonContainer,
|
|
155
|
+
l as ModalContainer,
|
|
156
|
+
c as SpotlightModal
|
|
153
157
|
};
|
|
154
158
|
//# sourceMappingURL=modal-styled.js.map
|
|
@@ -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 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 margin-top:
|
|
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 filter: blur(8px) brightness(0.95);\n margin-top: 20px;\n }\n 100% {\n opacity: 1;\n filter: blur(0) brightness(1);\n margin-top: 0;\n }\n }\n \n @keyframes modalDisappear {\n 0% {\n opacity: 1;\n filter: blur(0) brightness(1);\n margin-top: 0;\n }\n 100% {\n opacity: 0;\n filter: blur(8px) brightness(0.95);\n margin-top: 20px;\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;AAAA;AAAA;AAAA;AAAA;AAkClC,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;"}
|