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