@axa-fr/design-system-apollo-css 1.0.5-alpha.330 → 1.0.5-alpha.331
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.
- package/dist/Modal/ModalApollo.css +1 -0
- package/dist/Modal/ModalApollo.css.map +1 -0
- package/dist/Modal/ModalApollo.scss +42 -0
- package/dist/Modal/ModalCommon.css +1 -0
- package/dist/Modal/ModalCommon.css.map +1 -0
- package/dist/Modal/ModalCommon.scss +138 -0
- package/dist/Modal/ModalLF.css +1 -0
- package/dist/Modal/ModalLF.css.map +1 -0
- package/dist/Modal/ModalLF.scss +48 -0
- package/dist/apollo.css +1 -1
- package/dist/apollo.css.map +1 -1
- package/dist/apollo.scss +1 -0
- package/dist/common/tokens.css +1 -1
- package/dist/common/tokens.css.map +1 -1
- package/dist/common/tokens.scss +1 -0
- package/dist/look-and-feel.css +1 -1
- package/dist/look-and-feel.css.map +1 -1
- package/dist/look-and-feel.scss +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.af-apollo-modal{--modal-transition-duration:0.2s;--modal-max-height:calc(100% - 5rem);--modal-footer-border-top:none;background-color:var(--modal-bg-color);border:none;border-radius:var(--modal-border-radius);border-bottom-left-radius:0;border-bottom-right-radius:0;clip-path:rect(0 100% 100% 0 round var(--modal-border-radius) var(--modal-border-radius) 0 0);color:var(--modal-text-color);margin:0;margin-block-start:auto;max-height:var(--modal-max-height);max-width:100vw;opacity:0;padding:0;transform:translateY(100vh);transition:opacity,transform,overlay allow-discrete,display allow-discrete;transition-duration:var(--modal-transition-duration);transition-timing-function:ease-out;width:100%}.af-apollo-modal::backdrop{background:var(--modal-overlay-color);opacity:0;transition:display allow-discrete,overlay allow-discrete,opacity;transition-duration:var(--modal-transition-duration);transition-timing-function:ease-in-out}.af-apollo-modal[open]{display:flex;flex-direction:column;opacity:1;transform:translateY(0)}@starting-style{.af-apollo-modal[open]{opacity:0;transform:translateY(100vh)}}.af-apollo-modal[open]::backdrop{opacity:.4}@starting-style{.af-apollo-modal[open]::backdrop{opacity:0}}.af-apollo-modal__content{display:grid;flex:1 1;grid-template-rows:auto 1fr auto;overflow-y:hidden}.af-apollo-modal__header{background-color:var(--modal-bg-color);border-bottom:var(--modal-header-border-bottom);display:grid;gap:var(--modal-header-gap);grid-template-areas:"headertitle closebtn";grid-template-columns:1fr auto;padding:var(--modal-default-padding);padding-block-end:var(--modal-header-bottom-padding)}.af-apollo-modal__header-close-btn{grid-area:closebtn;place-self:start end}.af-apollo-modal__header-title{align-items:center;display:grid;gap:calc(16/var(--font-size-base)*1rem);grid-area:headertitle;grid-template-columns:auto 1fr;justify-self:start}.af-apollo-modal__body{display:flex;flex-direction:column;font-size:var(--modal-text-font-size);gap:var(--modal-default-padding);line-height:125%;overflow-y:auto;padding:var(--modal-default-padding) var(--modal-body-padding-top) var(--modal-body-padding-bottom)}.af-apollo-modal__footer{background-color:var(--modal-bg-color);border-block-start:var(--modal-footer-border-top);display:flex;gap:var(--modal-footer-gap);justify-content:end;padding:var(--modal-footer-vertical-padding) var(--modal-footer-horizontal-padding)}.af-apollo-modal__footer-button{flex:1 1}@media (width > 1023px){.af-apollo-modal{border-radius:var(--modal-border-radius);clip-path:rect(0 100% 100% 0 round var(--modal-border-radius));margin:revert;max-width:revert;transform:unset}.af-apollo-modal[open]{transform:unset}.af-apollo-modal__footer-button{flex-grow:inherit;min-width:180px}}.af-apollo-modal{--modal-bg-color:var(--white);--modal-text-color:var(--neutral-100);--modal-text-font-size:calc(16/var(--font-size-base)*1rem);--modal-overlay-color:var(--axa-blue-100-40);--modal-border-radius:var(--radius-16);--modal-default-padding:calc(24/var(--font-size-base)*1rem);--modal-header-gap:calc(16/var(--font-size-base)*1rem);--modal-header-bottom-padding:calc(24/var(--font-size-base)*1rem);--modal-header-border-bottom:none;--modal-body-padding-top:var(--modal-default-padding);--modal-body-padding-bottom:var(--modal-default-padding);--modal-body-gap:var(--modal-default-padding);--modal-footer-vertical-padding:var(--modal-default-padding);--modal-footer-horizontal-padding:var(--modal-default-padding);--modal-footer-gap:calc(16/var(--font-size-base)*1rem)}.af-apollo-modal__body:not(:has(~.af-apollo-modal__footer)){--modal-body-padding-bottom:var(--modal-default-padding)}.af-apollo-modal :has(.af-apollo-modal__body-vertical-scroll){--modal-footer-border-top:1px solid var(--axa-blue-20);--modal-footer-vertical-padding:calc(12/var(--font-size-base)*1rem);--modal-footer-horizontal-padding:calc(16/var(--font-size-base)*1rem)}@media (width > 1023px){.af-apollo-modal{--modal-header-gap:calc(24/var(--font-size-base)*1rem);--modal-default-padding:calc(32/var(--font-size-base)*1rem);--modal-body-padding-bottom:calc(16/var(--font-size-base)*1rem)}.af-apollo-modal :has(.af-apollo-modal__body-vertical-scroll){--modal-footer-vertical-padding:calc(16/var(--font-size-base)*1rem);--modal-footer-horizontal-padding:var(--modal-default-padding);--modal-footer-border-top:none}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Modal/ModalCommon.scss","../../src/Modal/ModalApollo.scss","../../src/Modal/ModalApollo.scss%23sass"],"names":[],"mappings":"AAEA,iBCDA,gCDEE,CACA,oCAAA,CCDF,8BAAA,CDgBE,sCAAA,CANA,WAAA,CACA,wCAAA,CAEA,2BAAA,CADA,4BAAA,CAKA,6FAAA,CAFA,6BAAA,CARA,QAAA,CACA,uBAAA,CAFA,kCAAA,CADA,eAAA,CASA,SAAA,CALA,SAAA,CAYA,2BAAA,CACA,0EACE,CAIF,oDAAA,CACA,mCAAA,CAxBA,UCeF,CDWE,2BAEE,qCAAA,CADA,SAAA,CAEA,gEAAA,CAIA,oDAAA,CACA,sCCZJ,CDeE,uBACE,YAAA,CACA,qBAAA,CACA,SAAA,CACA,uBCbJ,CDeI,gBANF,uBAOI,SAAA,CACA,2BCZJ,CACF,CDcI,iCACE,UCZN,CDcM,gBAHF,iCAII,SCXN,CACF,CDeE,0BACE,YAAA,CAEA,QAAA,CADA,gCAAA,CAEA,iBCbJ,CDgBE,yBAQE,sCAAA,CAJA,+CAAA,CAHA,YAAA,CAMA,2BAAA,CAFA,0CAAA,CACA,8BAAA,CAJA,oCAAA,CACA,oDCTJ,CDgBI,mCACE,kBAAA,CACA,oBCdN,CDiBI,+BAIE,kBAAA,CAHA,YAAA,CAKA,uCAAA,CAJA,qBAAA,CACA,8BAAA,CAEA,kBCdN,CDmBE,uBACE,YAAA,CAGA,qBAAA,CAGA,qCAAA,CAFA,gCAAA,CAGA,gBAAA,CAFA,eAAA,CAJA,mGCZJ,CDqBE,yBAOE,sCAAA,CAHA,iDAAA,CAHA,YAAA,CAKA,2BAAA,CADA,mBAAA,CAHA,mFCfJ,CDsBI,gCACE,QCpBN,CDwBE,wBAvHF,iBA0HI,wCAAA,CACA,8DAAA,CAFA,aAAA,CADA,gBAAA,CAIA,eCrBF,CDuBE,uBACE,eCrBJ,CDwBE,gCAEE,iBAAA,CADA,eCrBJ,CACF,CC9GA,iBACE,6BAAA,CACA,qCAAA,CACA,0DAAA,CACA,4CAAA,CACA,sCAAA,CACA,2DAAA,CACA,sDAAA,CACA,iEAAA,CACA,iCAAA,CACA,qDAAA,CACA,wDAAA,CACA,6CAAA,CACA,4DAAA,CACA,8DAAA,CACA,sDDiHF,CC/GE,4DACE,wDDiHJ,CC9GE,8DACE,sDAAA,CACA,mEAAA,CACA,qEDgHJ,CC7GE,wBA3BF,iBA4BI,sDAAA,CACA,2DAAA,CACA,+DDgHF,CC9GE,8DACE,mEAAA,CACA,8DAAA,CACA,8BDgHJ,CACF","file":"ModalApollo.css","sourcesContent":["@use \"../common/breakpoints\" as breakpoints;\n\n.af-apollo-modal {\n --modal-transition-duration: 0.2s;\n --modal-max-height: calc(100% - 5rem);\n --modal-footer-border-top: none;\n\n width: 100%;\n max-width: 100vw;\n max-height: var(--modal-max-height);\n margin: 0;\n margin-block-start: auto;\n padding: 0;\n border: none;\n border-radius: var(--modal-border-radius);\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n opacity: 0;\n color: var(--modal-text-color);\n background-color: var(--modal-bg-color);\n clip-path: rect(\n 0 100% 100% 0 round var(--modal-border-radius) var(--modal-border-radius) 0\n 0\n );\n transform: translateY(100vh);\n transition:\n opacity,\n transform,\n overlay allow-discrete,\n display allow-discrete;\n transition-duration: var(--modal-transition-duration);\n transition-timing-function: ease-out;\n\n &::backdrop {\n opacity: 0;\n background: var(--modal-overlay-color);\n transition:\n display allow-discrete,\n overlay allow-discrete,\n opacity;\n transition-duration: var(--modal-transition-duration);\n transition-timing-function: ease-in-out;\n }\n\n &[open] {\n display: flex;\n flex-direction: column;\n opacity: 1;\n transform: translateY(0);\n\n @starting-style {\n opacity: 0;\n transform: translateY(100vh);\n }\n\n &::backdrop {\n opacity: 0.4;\n\n @starting-style {\n opacity: 0;\n }\n }\n }\n\n &__content {\n display: grid;\n grid-template-rows: auto 1fr auto;\n flex: 1;\n overflow-y: hidden;\n }\n\n &__header {\n display: grid;\n padding: var(--modal-default-padding);\n padding-block-end: var(--modal-header-bottom-padding);\n border-bottom: var(--modal-header-border-bottom);\n grid-template-areas: \"headertitle closebtn\";\n grid-template-columns: 1fr auto;\n gap: var(--modal-header-gap);\n background-color: var(--modal-bg-color);\n\n &-close-btn {\n grid-area: closebtn;\n place-self: start end;\n }\n\n &-title {\n display: grid;\n grid-area: headertitle;\n grid-template-columns: auto 1fr;\n align-items: center;\n justify-self: start;\n gap: calc(16 / var(--font-size-base) * 1rem);\n }\n }\n\n &__body {\n display: flex;\n padding: var(--modal-default-padding) var(--modal-body-padding-top)\n var(--modal-body-padding-bottom);\n flex-direction: column;\n gap: var(--modal-default-padding);\n overflow-y: auto;\n font-size: var(--modal-text-font-size);\n line-height: 125%;\n }\n\n &__footer {\n display: flex;\n padding: var(--modal-footer-vertical-padding)\n var(--modal-footer-horizontal-padding);\n border-block-start: var(--modal-footer-border-top);\n justify-content: end;\n gap: var(--modal-footer-gap);\n background-color: var(--modal-bg-color);\n\n &-button {\n flex: 1;\n }\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n max-width: revert;\n margin: revert;\n border-radius: var(--modal-border-radius);\n clip-path: rect(0 100% 100% 0 round var(--modal-border-radius));\n transform: unset;\n\n &[open] {\n transform: unset;\n }\n\n &__footer-button {\n min-width: 180px;\n flex-grow: inherit;\n }\n }\n}\n","@use \"../common/breakpoints\" as breakpoints;\n@use \"./ModalCommon\";\n\n.af-apollo-modal {\n --modal-bg-color: var(--white);\n --modal-text-color: var(--neutral-100);\n --modal-text-font-size: calc(16 / var(--font-size-base) * 1rem);\n --modal-overlay-color: var(--axa-blue-100-40);\n --modal-border-radius: var(--radius-16);\n --modal-default-padding: calc(24 / var(--font-size-base) * 1rem);\n --modal-header-gap: calc(16 / var(--font-size-base) * 1rem);\n --modal-header-bottom-padding: calc(24 / var(--font-size-base) * 1rem);\n --modal-header-border-bottom: none;\n --modal-body-padding-top: var(--modal-default-padding);\n --modal-body-padding-bottom: var(--modal-default-padding);\n --modal-body-gap: var(--modal-default-padding);\n --modal-footer-vertical-padding: var(--modal-default-padding);\n --modal-footer-horizontal-padding: var(--modal-default-padding);\n --modal-footer-gap: calc(16 / var(--font-size-base) * 1rem);\n\n &__body:not(:has(~ .af-apollo-modal__footer)) {\n --modal-body-padding-bottom: var(--modal-default-padding);\n }\n\n :has(.af-apollo-modal__body-vertical-scroll) {\n --modal-footer-border-top: 1px solid var(--axa-blue-20);\n --modal-footer-vertical-padding: calc(12 / var(--font-size-base) * 1rem);\n --modal-footer-horizontal-padding: calc(16 / var(--font-size-base) * 1rem);\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n --modal-header-gap: calc(24 / var(--font-size-base) * 1rem);\n --modal-default-padding: calc(32 / var(--font-size-base) * 1rem);\n --modal-body-padding-bottom: calc(16 / var(--font-size-base) * 1rem);\n\n :has(.af-apollo-modal__body-vertical-scroll) {\n --modal-footer-vertical-padding: calc(16 / var(--font-size-base) * 1rem);\n --modal-footer-horizontal-padding: var(--modal-default-padding);\n --modal-footer-border-top: none;\n }\n }\n}\n","@use \"../common/breakpoints\" as breakpoints;\n@use \"./ModalCommon\";\n\n.af-apollo-modal {\n --modal-bg-color: var(--white);\n --modal-text-color: var(--neutral-100);\n --modal-text-font-size: calc(16 / var(--font-size-base) * 1rem);\n --modal-overlay-color: var(--axa-blue-100-40);\n --modal-border-radius: var(--radius-16);\n --modal-default-padding: calc(24 / var(--font-size-base) * 1rem);\n --modal-header-gap: calc(16 / var(--font-size-base) * 1rem);\n --modal-header-bottom-padding: calc(24 / var(--font-size-base) * 1rem);\n --modal-header-border-bottom: none;\n --modal-body-padding-top: var(--modal-default-padding);\n --modal-body-padding-bottom: var(--modal-default-padding);\n --modal-body-gap: var(--modal-default-padding);\n --modal-footer-vertical-padding: var(--modal-default-padding);\n --modal-footer-horizontal-padding: var(--modal-default-padding);\n --modal-footer-gap: calc(16 / var(--font-size-base) * 1rem);\n\n &__body:not(:has(~ .af-apollo-modal__footer)) {\n --modal-body-padding-bottom: var(--modal-default-padding);\n }\n\n :has(.af-apollo-modal__body-vertical-scroll) {\n --modal-footer-border-top: 1px solid var(--axa-blue-20);\n --modal-footer-vertical-padding: calc(12 / var(--font-size-base) * 1rem);\n --modal-footer-horizontal-padding: calc(16 / var(--font-size-base) * 1rem);\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n --modal-header-gap: calc(24 / var(--font-size-base) * 1rem);\n --modal-default-padding: calc(32 / var(--font-size-base) * 1rem);\n --modal-body-padding-bottom: calc(16 / var(--font-size-base) * 1rem);\n\n :has(.af-apollo-modal__body-vertical-scroll) {\n --modal-footer-vertical-padding: calc(16 / var(--font-size-base) * 1rem);\n --modal-footer-horizontal-padding: var(--modal-default-padding);\n --modal-footer-border-top: none;\n }\n }\n}\n"]}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
@use "../common/breakpoints" as breakpoints;
|
|
2
|
+
@use "./ModalCommon";
|
|
3
|
+
|
|
4
|
+
.af-apollo-modal {
|
|
5
|
+
--modal-bg-color: var(--white);
|
|
6
|
+
--modal-text-color: var(--neutral-100);
|
|
7
|
+
--modal-text-font-size: calc(16 / var(--font-size-base) * 1rem);
|
|
8
|
+
--modal-overlay-color: var(--axa-blue-100-40);
|
|
9
|
+
--modal-border-radius: var(--radius-16);
|
|
10
|
+
--modal-default-padding: calc(24 / var(--font-size-base) * 1rem);
|
|
11
|
+
--modal-header-gap: calc(16 / var(--font-size-base) * 1rem);
|
|
12
|
+
--modal-header-bottom-padding: calc(24 / var(--font-size-base) * 1rem);
|
|
13
|
+
--modal-header-border-bottom: none;
|
|
14
|
+
--modal-body-padding-top: var(--modal-default-padding);
|
|
15
|
+
--modal-body-padding-bottom: var(--modal-default-padding);
|
|
16
|
+
--modal-body-gap: var(--modal-default-padding);
|
|
17
|
+
--modal-footer-vertical-padding: var(--modal-default-padding);
|
|
18
|
+
--modal-footer-horizontal-padding: var(--modal-default-padding);
|
|
19
|
+
--modal-footer-gap: calc(16 / var(--font-size-base) * 1rem);
|
|
20
|
+
|
|
21
|
+
&__body:not(:has(~ .af-apollo-modal__footer)) {
|
|
22
|
+
--modal-body-padding-bottom: var(--modal-default-padding);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
:has(.af-apollo-modal__body-vertical-scroll) {
|
|
26
|
+
--modal-footer-border-top: 1px solid var(--axa-blue-20);
|
|
27
|
+
--modal-footer-vertical-padding: calc(12 / var(--font-size-base) * 1rem);
|
|
28
|
+
--modal-footer-horizontal-padding: calc(16 / var(--font-size-base) * 1rem);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
@media (width > #{breakpoints.$breakpoint-md}) {
|
|
32
|
+
--modal-header-gap: calc(24 / var(--font-size-base) * 1rem);
|
|
33
|
+
--modal-default-padding: calc(32 / var(--font-size-base) * 1rem);
|
|
34
|
+
--modal-body-padding-bottom: calc(16 / var(--font-size-base) * 1rem);
|
|
35
|
+
|
|
36
|
+
:has(.af-apollo-modal__body-vertical-scroll) {
|
|
37
|
+
--modal-footer-vertical-padding: calc(16 / var(--font-size-base) * 1rem);
|
|
38
|
+
--modal-footer-horizontal-padding: var(--modal-default-padding);
|
|
39
|
+
--modal-footer-border-top: none;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.af-apollo-modal{--modal-transition-duration:0.2s;--modal-max-height:calc(100% - 5rem);--modal-footer-border-top:none;background-color:var(--modal-bg-color);border:none;border-radius:var(--modal-border-radius);border-bottom-left-radius:0;border-bottom-right-radius:0;clip-path:rect(0 100% 100% 0 round var(--modal-border-radius) var(--modal-border-radius) 0 0);color:var(--modal-text-color);margin:0;margin-block-start:auto;max-height:var(--modal-max-height);max-width:100vw;opacity:0;padding:0;transform:translateY(100vh);transition:opacity,transform,overlay allow-discrete,display allow-discrete;transition-duration:var(--modal-transition-duration);transition-timing-function:ease-out;width:100%}.af-apollo-modal::backdrop{background:var(--modal-overlay-color);opacity:0;transition:display allow-discrete,overlay allow-discrete,opacity;transition-duration:var(--modal-transition-duration);transition-timing-function:ease-in-out}.af-apollo-modal[open]{display:flex;flex-direction:column;opacity:1;transform:translateY(0)}@starting-style{.af-apollo-modal[open]{opacity:0;transform:translateY(100vh)}}.af-apollo-modal[open]::backdrop{opacity:.4}@starting-style{.af-apollo-modal[open]::backdrop{opacity:0}}.af-apollo-modal__content{display:grid;flex:1 1;grid-template-rows:auto 1fr auto;overflow-y:hidden}.af-apollo-modal__header{background-color:var(--modal-bg-color);border-bottom:var(--modal-header-border-bottom);display:grid;gap:var(--modal-header-gap);grid-template-areas:"headertitle closebtn";grid-template-columns:1fr auto;padding:var(--modal-default-padding);padding-block-end:var(--modal-header-bottom-padding)}.af-apollo-modal__header-close-btn{grid-area:closebtn;place-self:start end}.af-apollo-modal__header-title{align-items:center;display:grid;gap:calc(16/var(--font-size-base)*1rem);grid-area:headertitle;grid-template-columns:auto 1fr;justify-self:start}.af-apollo-modal__body{display:flex;flex-direction:column;font-size:var(--modal-text-font-size);gap:var(--modal-default-padding);line-height:125%;overflow-y:auto;padding:var(--modal-default-padding) var(--modal-body-padding-top) var(--modal-body-padding-bottom)}.af-apollo-modal__footer{background-color:var(--modal-bg-color);border-block-start:var(--modal-footer-border-top);display:flex;gap:var(--modal-footer-gap);justify-content:end;padding:var(--modal-footer-vertical-padding) var(--modal-footer-horizontal-padding)}.af-apollo-modal__footer-button{flex:1 1}@media (width > 1023px){.af-apollo-modal{border-radius:var(--modal-border-radius);clip-path:rect(0 100% 100% 0 round var(--modal-border-radius));margin:revert;max-width:revert;transform:unset}.af-apollo-modal[open]{transform:unset}.af-apollo-modal__footer-button{flex-grow:inherit;min-width:180px}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Modal/ModalCommon.scss%23sass","../../src/Modal/ModalCommon.scss"],"names":[],"mappings":"AAEA,iBACE,gCAAA,CCDF,oCAAA,CDGE,8BAAA,CAcA,sCAAA,CANA,WAAA,CACA,wCAAA,CAEA,2BAAA,CADA,4BAAA,CAKA,6FAAA,CAFA,6BAAA,CARA,QAAA,CACA,uBAAA,CAFA,kCAAA,CADA,eAAA,CASA,SAAA,CALA,SAAA,CAYA,2BAAA,CACA,0EACE,CAIF,oDAAA,CACA,mCAAA,CAxBA,UCeF,CDWE,2BAEE,qCAAA,CADA,SAAA,CAEA,gEACE,CAGF,oDAAA,CACA,sCCZJ,CDeE,uBACE,YAAA,CACA,qBAAA,CACA,SAAA,CACA,uBCbJ,CDeI,gBANF,uBAOI,SAAA,CACA,2BCZJ,CACF,CDcI,iCACE,UCZN,CDcM,gBAHF,iCAII,SCXN,CACF,CDeE,0BACE,YAAA,CAEA,QAAA,CADA,gCAAA,CAEA,iBCbJ,CDgBE,yBAQE,sCAAA,CAJA,+CAAA,CAHA,YAAA,CAMA,2BAAA,CAFA,0CAAA,CACA,8BAAA,CAJA,oCAAA,CACA,oDCTJ,CDgBI,mCACE,kBAAA,CACA,oBCdN,CDiBI,+BAIE,kBAAA,CAHA,YAAA,CAKA,uCAAA,CAJA,qBAAA,CACA,8BAAA,CAEA,kBCdN,CDmBE,uBACE,YAAA,CAGA,qBAAA,CAGA,qCAAA,CAFA,gCAAA,CAGA,gBAAA,CAFA,eAAA,CAJA,mGCZJ,CDqBE,yBAOE,sCAAA,CAHA,iDAAA,CAHA,YAAA,CAKA,2BAAA,CADA,mBAAA,CAHA,mFCfJ,CDsBI,gCACE,QCpBN,CDwBE,wBAvHF,iBA0HI,wCAAA,CACA,8DAAA,CAFA,aAAA,CADA,gBAAA,CAIA,eCrBF,CDuBE,uBCrBF,eACA,CDwBE,gCAEE,iBAAA,CADA,eCrBJ,CACF","file":"ModalCommon.css","sourcesContent":["@use \"../common/breakpoints\" as breakpoints;\n\n.af-apollo-modal {\n --modal-transition-duration: 0.2s;\n --modal-max-height: calc(100% - 5rem);\n --modal-footer-border-top: none;\n\n width: 100%;\n max-width: 100vw;\n max-height: var(--modal-max-height);\n margin: 0;\n margin-block-start: auto;\n padding: 0;\n border: none;\n border-radius: var(--modal-border-radius);\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n opacity: 0;\n color: var(--modal-text-color);\n background-color: var(--modal-bg-color);\n clip-path: rect(\n 0 100% 100% 0 round var(--modal-border-radius) var(--modal-border-radius) 0\n 0\n );\n transform: translateY(100vh);\n transition:\n opacity,\n transform,\n overlay allow-discrete,\n display allow-discrete;\n transition-duration: var(--modal-transition-duration);\n transition-timing-function: ease-out;\n\n &::backdrop {\n opacity: 0;\n background: var(--modal-overlay-color);\n transition:\n display allow-discrete,\n overlay allow-discrete,\n opacity;\n transition-duration: var(--modal-transition-duration);\n transition-timing-function: ease-in-out;\n }\n\n &[open] {\n display: flex;\n flex-direction: column;\n opacity: 1;\n transform: translateY(0);\n\n @starting-style {\n opacity: 0;\n transform: translateY(100vh);\n }\n\n &::backdrop {\n opacity: 0.4;\n\n @starting-style {\n opacity: 0;\n }\n }\n }\n\n &__content {\n display: grid;\n grid-template-rows: auto 1fr auto;\n flex: 1;\n overflow-y: hidden;\n }\n\n &__header {\n display: grid;\n padding: var(--modal-default-padding);\n padding-block-end: var(--modal-header-bottom-padding);\n border-bottom: var(--modal-header-border-bottom);\n grid-template-areas: \"headertitle closebtn\";\n grid-template-columns: 1fr auto;\n gap: var(--modal-header-gap);\n background-color: var(--modal-bg-color);\n\n &-close-btn {\n grid-area: closebtn;\n place-self: start end;\n }\n\n &-title {\n display: grid;\n grid-area: headertitle;\n grid-template-columns: auto 1fr;\n align-items: center;\n justify-self: start;\n gap: calc(16 / var(--font-size-base) * 1rem);\n }\n }\n\n &__body {\n display: flex;\n padding: var(--modal-default-padding) var(--modal-body-padding-top)\n var(--modal-body-padding-bottom);\n flex-direction: column;\n gap: var(--modal-default-padding);\n overflow-y: auto;\n font-size: var(--modal-text-font-size);\n line-height: 125%;\n }\n\n &__footer {\n display: flex;\n padding: var(--modal-footer-vertical-padding)\n var(--modal-footer-horizontal-padding);\n border-block-start: var(--modal-footer-border-top);\n justify-content: end;\n gap: var(--modal-footer-gap);\n background-color: var(--modal-bg-color);\n\n &-button {\n flex: 1;\n }\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n max-width: revert;\n margin: revert;\n border-radius: var(--modal-border-radius);\n clip-path: rect(0 100% 100% 0 round var(--modal-border-radius));\n transform: unset;\n\n &[open] {\n transform: unset;\n }\n\n &__footer-button {\n min-width: 180px;\n flex-grow: inherit;\n }\n }\n}\n","@use \"../common/breakpoints\" as breakpoints;\n\n.af-apollo-modal {\n --modal-transition-duration: 0.2s;\n --modal-max-height: calc(100% - 5rem);\n --modal-footer-border-top: none;\n\n width: 100%;\n max-width: 100vw;\n max-height: var(--modal-max-height);\n margin: 0;\n margin-block-start: auto;\n padding: 0;\n border: none;\n border-radius: var(--modal-border-radius);\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n opacity: 0;\n color: var(--modal-text-color);\n background-color: var(--modal-bg-color);\n clip-path: rect(\n 0 100% 100% 0 round var(--modal-border-radius) var(--modal-border-radius) 0\n 0\n );\n transform: translateY(100vh);\n transition:\n opacity,\n transform,\n overlay allow-discrete,\n display allow-discrete;\n transition-duration: var(--modal-transition-duration);\n transition-timing-function: ease-out;\n\n &::backdrop {\n opacity: 0;\n background: var(--modal-overlay-color);\n transition:\n display allow-discrete,\n overlay allow-discrete,\n opacity;\n transition-duration: var(--modal-transition-duration);\n transition-timing-function: ease-in-out;\n }\n\n &[open] {\n display: flex;\n flex-direction: column;\n opacity: 1;\n transform: translateY(0);\n\n @starting-style {\n opacity: 0;\n transform: translateY(100vh);\n }\n\n &::backdrop {\n opacity: 0.4;\n\n @starting-style {\n opacity: 0;\n }\n }\n }\n\n &__content {\n display: grid;\n grid-template-rows: auto 1fr auto;\n flex: 1;\n overflow-y: hidden;\n }\n\n &__header {\n display: grid;\n padding: var(--modal-default-padding);\n padding-block-end: var(--modal-header-bottom-padding);\n border-bottom: var(--modal-header-border-bottom);\n grid-template-areas: \"headertitle closebtn\";\n grid-template-columns: 1fr auto;\n gap: var(--modal-header-gap);\n background-color: var(--modal-bg-color);\n\n &-close-btn {\n grid-area: closebtn;\n place-self: start end;\n }\n\n &-title {\n display: grid;\n grid-area: headertitle;\n grid-template-columns: auto 1fr;\n align-items: center;\n justify-self: start;\n gap: calc(16 / var(--font-size-base) * 1rem);\n }\n }\n\n &__body {\n display: flex;\n padding: var(--modal-default-padding) var(--modal-body-padding-top)\n var(--modal-body-padding-bottom);\n flex-direction: column;\n gap: var(--modal-default-padding);\n overflow-y: auto;\n font-size: var(--modal-text-font-size);\n line-height: 125%;\n }\n\n &__footer {\n display: flex;\n padding: var(--modal-footer-vertical-padding)\n var(--modal-footer-horizontal-padding);\n border-block-start: var(--modal-footer-border-top);\n justify-content: end;\n gap: var(--modal-footer-gap);\n background-color: var(--modal-bg-color);\n\n &-button {\n flex: 1;\n }\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n max-width: revert;\n margin: revert;\n border-radius: var(--modal-border-radius);\n clip-path: rect(0 100% 100% 0 round var(--modal-border-radius));\n transform: unset;\n\n &[open] {\n transform: unset;\n }\n\n &__footer-button {\n min-width: 180px;\n flex-grow: inherit;\n }\n }\n}\n"]}
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
@use "../common/breakpoints" as breakpoints;
|
|
2
|
+
|
|
3
|
+
.af-apollo-modal {
|
|
4
|
+
--modal-transition-duration: 0.2s;
|
|
5
|
+
--modal-max-height: calc(100% - 5rem);
|
|
6
|
+
--modal-footer-border-top: none;
|
|
7
|
+
|
|
8
|
+
width: 100%;
|
|
9
|
+
max-width: 100vw;
|
|
10
|
+
max-height: var(--modal-max-height);
|
|
11
|
+
margin: 0;
|
|
12
|
+
margin-block-start: auto;
|
|
13
|
+
padding: 0;
|
|
14
|
+
border: none;
|
|
15
|
+
border-radius: var(--modal-border-radius);
|
|
16
|
+
border-bottom-right-radius: 0;
|
|
17
|
+
border-bottom-left-radius: 0;
|
|
18
|
+
opacity: 0;
|
|
19
|
+
color: var(--modal-text-color);
|
|
20
|
+
background-color: var(--modal-bg-color);
|
|
21
|
+
clip-path: rect(
|
|
22
|
+
0 100% 100% 0 round var(--modal-border-radius) var(--modal-border-radius) 0
|
|
23
|
+
0
|
|
24
|
+
);
|
|
25
|
+
transform: translateY(100vh);
|
|
26
|
+
transition:
|
|
27
|
+
opacity,
|
|
28
|
+
transform,
|
|
29
|
+
overlay allow-discrete,
|
|
30
|
+
display allow-discrete;
|
|
31
|
+
transition-duration: var(--modal-transition-duration);
|
|
32
|
+
transition-timing-function: ease-out;
|
|
33
|
+
|
|
34
|
+
&::backdrop {
|
|
35
|
+
opacity: 0;
|
|
36
|
+
background: var(--modal-overlay-color);
|
|
37
|
+
transition:
|
|
38
|
+
display allow-discrete,
|
|
39
|
+
overlay allow-discrete,
|
|
40
|
+
opacity;
|
|
41
|
+
transition-duration: var(--modal-transition-duration);
|
|
42
|
+
transition-timing-function: ease-in-out;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&[open] {
|
|
46
|
+
display: flex;
|
|
47
|
+
flex-direction: column;
|
|
48
|
+
opacity: 1;
|
|
49
|
+
transform: translateY(0);
|
|
50
|
+
|
|
51
|
+
@starting-style {
|
|
52
|
+
opacity: 0;
|
|
53
|
+
transform: translateY(100vh);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
&::backdrop {
|
|
57
|
+
opacity: 0.4;
|
|
58
|
+
|
|
59
|
+
@starting-style {
|
|
60
|
+
opacity: 0;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
&__content {
|
|
66
|
+
display: grid;
|
|
67
|
+
grid-template-rows: auto 1fr auto;
|
|
68
|
+
flex: 1;
|
|
69
|
+
overflow-y: hidden;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
&__header {
|
|
73
|
+
display: grid;
|
|
74
|
+
padding: var(--modal-default-padding);
|
|
75
|
+
padding-block-end: var(--modal-header-bottom-padding);
|
|
76
|
+
border-bottom: var(--modal-header-border-bottom);
|
|
77
|
+
grid-template-areas: "headertitle closebtn";
|
|
78
|
+
grid-template-columns: 1fr auto;
|
|
79
|
+
gap: var(--modal-header-gap);
|
|
80
|
+
background-color: var(--modal-bg-color);
|
|
81
|
+
|
|
82
|
+
&-close-btn {
|
|
83
|
+
grid-area: closebtn;
|
|
84
|
+
place-self: start end;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
&-title {
|
|
88
|
+
display: grid;
|
|
89
|
+
grid-area: headertitle;
|
|
90
|
+
grid-template-columns: auto 1fr;
|
|
91
|
+
align-items: center;
|
|
92
|
+
justify-self: start;
|
|
93
|
+
gap: calc(16 / var(--font-size-base) * 1rem);
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
&__body {
|
|
98
|
+
display: flex;
|
|
99
|
+
padding: var(--modal-default-padding) var(--modal-body-padding-top)
|
|
100
|
+
var(--modal-body-padding-bottom);
|
|
101
|
+
flex-direction: column;
|
|
102
|
+
gap: var(--modal-default-padding);
|
|
103
|
+
overflow-y: auto;
|
|
104
|
+
font-size: var(--modal-text-font-size);
|
|
105
|
+
line-height: 125%;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
&__footer {
|
|
109
|
+
display: flex;
|
|
110
|
+
padding: var(--modal-footer-vertical-padding)
|
|
111
|
+
var(--modal-footer-horizontal-padding);
|
|
112
|
+
border-block-start: var(--modal-footer-border-top);
|
|
113
|
+
justify-content: end;
|
|
114
|
+
gap: var(--modal-footer-gap);
|
|
115
|
+
background-color: var(--modal-bg-color);
|
|
116
|
+
|
|
117
|
+
&-button {
|
|
118
|
+
flex: 1;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
@media (width > #{breakpoints.$breakpoint-md}) {
|
|
123
|
+
max-width: revert;
|
|
124
|
+
margin: revert;
|
|
125
|
+
border-radius: var(--modal-border-radius);
|
|
126
|
+
clip-path: rect(0 100% 100% 0 round var(--modal-border-radius));
|
|
127
|
+
transform: unset;
|
|
128
|
+
|
|
129
|
+
&[open] {
|
|
130
|
+
transform: unset;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
&__footer-button {
|
|
134
|
+
min-width: 180px;
|
|
135
|
+
flex-grow: inherit;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.af-apollo-modal{--modal-transition-duration:0.2s;--modal-max-height:calc(100% - 5rem);--modal-footer-border-top:none;background-color:var(--modal-bg-color);border:none;border-radius:var(--modal-border-radius);border-bottom-left-radius:0;border-bottom-right-radius:0;clip-path:rect(0 100% 100% 0 round var(--modal-border-radius) var(--modal-border-radius) 0 0);color:var(--modal-text-color);margin:0;margin-block-start:auto;max-height:var(--modal-max-height);max-width:100vw;opacity:0;padding:0;transform:translateY(100vh);transition:opacity,transform,overlay allow-discrete,display allow-discrete;transition-duration:var(--modal-transition-duration);transition-timing-function:ease-out;width:100%}.af-apollo-modal::backdrop{background:var(--modal-overlay-color);opacity:0;transition:display allow-discrete,overlay allow-discrete,opacity;transition-duration:var(--modal-transition-duration);transition-timing-function:ease-in-out}.af-apollo-modal[open]{display:flex;flex-direction:column;opacity:1;transform:translateY(0)}@starting-style{.af-apollo-modal[open]{opacity:0;transform:translateY(100vh)}}.af-apollo-modal[open]::backdrop{opacity:.4}@starting-style{.af-apollo-modal[open]::backdrop{opacity:0}}.af-apollo-modal__content{display:grid;flex:1 1;grid-template-rows:auto 1fr auto;overflow-y:hidden}.af-apollo-modal__header{background-color:var(--modal-bg-color);border-bottom:var(--modal-header-border-bottom);display:grid;gap:var(--modal-header-gap);grid-template-areas:"headertitle closebtn";grid-template-columns:1fr auto;padding:var(--modal-default-padding);padding-block-end:var(--modal-header-bottom-padding)}.af-apollo-modal__header-close-btn{grid-area:closebtn;place-self:start end}.af-apollo-modal__header-title{align-items:center;display:grid;gap:calc(16/var(--font-size-base)*1rem);grid-area:headertitle;grid-template-columns:auto 1fr;justify-self:start}.af-apollo-modal__body{display:flex;flex-direction:column;font-size:var(--modal-text-font-size);gap:var(--modal-default-padding);line-height:125%;overflow-y:auto;padding:var(--modal-default-padding) var(--modal-body-padding-top) var(--modal-body-padding-bottom)}.af-apollo-modal__footer{background-color:var(--modal-bg-color);border-block-start:var(--modal-footer-border-top);display:flex;gap:var(--modal-footer-gap);justify-content:end;padding:var(--modal-footer-vertical-padding) var(--modal-footer-horizontal-padding)}.af-apollo-modal__footer-button{flex:1 1}@media (width > 1023px){.af-apollo-modal{border-radius:var(--modal-border-radius);clip-path:rect(0 100% 100% 0 round var(--modal-border-radius));margin:revert;max-width:revert;transform:unset}.af-apollo-modal[open]{transform:unset}.af-apollo-modal__footer-button{flex-grow:inherit;min-width:180px}}.af-apollo-modal{--modal-bg-color:var(--color-white);--modal-text-color:var(--color-gray-900);--modal-text-font-size:calc(16/var(--font-size-base)*1rem);--modal-overlay-color:hsl(from var(--color-gray-900) h s l/48%);--modal-border-radius:var(--radius-8);--modal-default-padding:calc(16/var(--font-size-base)*1rem);--modal-header-gap:calc(24/var(--font-size-base)*1rem);--modal-header-bottom-padding:var(--modal-default-padding);--modal-header-border-bottom:1px solid var(--color-blue-400);--modal-body-padding-top:calc(24/var(--font-size-base)*1rem);--modal-body-padding-bottom:var(--modal-default-padding);--modal-body-gap:calc(32/var(--font-size-base)*1rem);--modal-footer-vertical-padding:var(--modal-default-padding);--modal-footer-horizontal-padding:var(--modal-default-padding);--modal-footer-gap:var(--modal-default-padding)}.af-apollo-modal__body:not(:has(~.af-apollo-modal__footer)){--modal-body-padding-bottom:var(--modal-default-padding)}.af-apollo-modal :has(.af-apollo-modal__body-vertical-scroll){--modal-footer-border-top:1px solid var(--color-blue-400);--modal-footer-vertical-padding:calc(12/var(--font-size-base)*1rem);--modal-footer-horizontal-padding:calc(16/var(--font-size-base)*1rem)}@media (width > 1023px){.af-apollo-modal{--modal-default-padding:calc(24/var(--font-size-base)*1rem);--modal-text-font-size:calc(18/var(--font-size-base)*1rem);--modal-footer-vertical-padding:var(--modal-default-padding);--modal-footer-horizontal-padding:var(--modal-default-padding);--modal-body-gap:calc(40/var(--font-size-base)*1rem);--modal-body-padding-bottom:calc(16/var(--font-size-base)*1rem)}.af-apollo-modal :has(.af-apollo-modal__body-vertical-scroll){--modal-footer-border-top:none;--modal-footer-vertical-padding:calc(16/var(--font-size-base)*1rem);--modal-footer-horizontal-padding:calc(16/var(--font-size-base)*1rem)}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Modal/ModalCommon.scss","../../src/Modal/ModalLF.scss","../../src/Modal/ModalLF.scss%23sass"],"names":[],"mappings":"AAEA,iBCAA,gCDCE,CACA,oCAAA,CCAF,8BAAA,CDeE,sCAAA,CANA,WAAA,CACA,wCAAA,CAEA,2BAAA,CADA,4BAAA,CAKA,6FAAA,CAFA,6BAAA,CARA,QAAA,CACA,uBAAA,CAFA,kCAAA,CADA,eAAA,CASA,SAAA,CALA,SAAA,CAYA,2BAAA,CACA,0EACE,CAIF,oDAAA,CACA,mCAAA,CAxBA,UCgBF,CDUE,2BAEE,qCAAA,CADA,SAAA,CAEA,gEAAA,CAIA,oDAAA,CACA,sCCXJ,CDcE,uBACE,YAAA,CACA,qBAAA,CACA,SAAA,CACA,uBCZJ,CDcI,gBANF,uBAOI,SAAA,CACA,2BCXJ,CACF,CDaI,iCACE,UCXN,CDaM,gBCXN,iCDYQ,SCVN,CACF,CDcE,0BACE,YAAA,CAEA,QAAA,CADA,gCAAA,CAEA,iBCZJ,CDeE,yBAQE,sCAAA,CAJA,+CAAA,CAHA,YAAA,CAMA,2BAAA,CAFA,0CAAA,CACA,8BAAA,CAJA,oCAAA,CACA,oDCRJ,CDeI,mCACE,kBAAA,CACA,oBCbN,CDgBI,+BAIE,kBAAA,CAHA,YAAA,CAKA,uCAAA,CAJA,qBAAA,CACA,8BAAA,CAEA,kBCbN,CDkBE,uBACE,YAAA,CAGA,qBAAA,CAGA,qCAAA,CAFA,gCAAA,CAGA,gBAAA,CAFA,eAAA,CAJA,mGCXJ,CDoBE,yBAOE,sCAAA,CAHA,iDAAA,CAHA,YAAA,CAKA,2BAAA,CADA,mBAAA,CAHA,mFCdJ,CDqBI,gCACE,QCnBN,CDuBE,wBAvHF,iBA0HI,wCAAA,CACA,8DAAA,CAFA,aAAA,CADA,gBAAA,CAIA,eCpBF,CDsBE,uBACE,eCpBJ,CDuBE,gCAEE,iBAAA,CADA,eCpBJ,CACF,CC9GA,iBACE,mCAAA,CACA,wCAAA,CACA,0DAAA,CACA,+DAAA,CACA,qCAAA,CACA,2DAAA,CACA,sDAAA,CACA,0DAAA,CACA,4DAAA,CACA,4DAAA,CACA,wDAAA,CACA,oDAAA,CACA,4DAAA,CACA,8DAAA,CACA,+CDiHF,CC/GE,4DACE,wDDiHJ,CC9GE,8DACE,yDAAA,CACA,mEAAA,CACA,qEDgHJ,CC7GE,wBA3BF,iBA4BI,2DAAA,CACA,0DAAA,CACA,4DAAA,CACA,8DAAA,CACA,oDAAA,CACA,+DDgHF,CC9GE,8DACE,8BAAA,CACA,mEAAA,CACA,qEDkHJ,CACF","file":"ModalLF.css","sourcesContent":["@use \"../common/breakpoints\" as breakpoints;\n\n.af-apollo-modal {\n --modal-transition-duration: 0.2s;\n --modal-max-height: calc(100% - 5rem);\n --modal-footer-border-top: none;\n\n width: 100%;\n max-width: 100vw;\n max-height: var(--modal-max-height);\n margin: 0;\n margin-block-start: auto;\n padding: 0;\n border: none;\n border-radius: var(--modal-border-radius);\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n opacity: 0;\n color: var(--modal-text-color);\n background-color: var(--modal-bg-color);\n clip-path: rect(\n 0 100% 100% 0 round var(--modal-border-radius) var(--modal-border-radius) 0\n 0\n );\n transform: translateY(100vh);\n transition:\n opacity,\n transform,\n overlay allow-discrete,\n display allow-discrete;\n transition-duration: var(--modal-transition-duration);\n transition-timing-function: ease-out;\n\n &::backdrop {\n opacity: 0;\n background: var(--modal-overlay-color);\n transition:\n display allow-discrete,\n overlay allow-discrete,\n opacity;\n transition-duration: var(--modal-transition-duration);\n transition-timing-function: ease-in-out;\n }\n\n &[open] {\n display: flex;\n flex-direction: column;\n opacity: 1;\n transform: translateY(0);\n\n @starting-style {\n opacity: 0;\n transform: translateY(100vh);\n }\n\n &::backdrop {\n opacity: 0.4;\n\n @starting-style {\n opacity: 0;\n }\n }\n }\n\n &__content {\n display: grid;\n grid-template-rows: auto 1fr auto;\n flex: 1;\n overflow-y: hidden;\n }\n\n &__header {\n display: grid;\n padding: var(--modal-default-padding);\n padding-block-end: var(--modal-header-bottom-padding);\n border-bottom: var(--modal-header-border-bottom);\n grid-template-areas: \"headertitle closebtn\";\n grid-template-columns: 1fr auto;\n gap: var(--modal-header-gap);\n background-color: var(--modal-bg-color);\n\n &-close-btn {\n grid-area: closebtn;\n place-self: start end;\n }\n\n &-title {\n display: grid;\n grid-area: headertitle;\n grid-template-columns: auto 1fr;\n align-items: center;\n justify-self: start;\n gap: calc(16 / var(--font-size-base) * 1rem);\n }\n }\n\n &__body {\n display: flex;\n padding: var(--modal-default-padding) var(--modal-body-padding-top)\n var(--modal-body-padding-bottom);\n flex-direction: column;\n gap: var(--modal-default-padding);\n overflow-y: auto;\n font-size: var(--modal-text-font-size);\n line-height: 125%;\n }\n\n &__footer {\n display: flex;\n padding: var(--modal-footer-vertical-padding)\n var(--modal-footer-horizontal-padding);\n border-block-start: var(--modal-footer-border-top);\n justify-content: end;\n gap: var(--modal-footer-gap);\n background-color: var(--modal-bg-color);\n\n &-button {\n flex: 1;\n }\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n max-width: revert;\n margin: revert;\n border-radius: var(--modal-border-radius);\n clip-path: rect(0 100% 100% 0 round var(--modal-border-radius));\n transform: unset;\n\n &[open] {\n transform: unset;\n }\n\n &__footer-button {\n min-width: 180px;\n flex-grow: inherit;\n }\n }\n}\n","/* stylelint-disable color-function-notation */\n@use \"../common/breakpoints\" as breakpoints;\n@use \"./ModalCommon\";\n\n.af-apollo-modal {\n --modal-bg-color: var(--color-white);\n --modal-text-color: var(--color-gray-900);\n --modal-text-font-size: calc(16 / var(--font-size-base) * 1rem);\n --modal-overlay-color: hsl(from var(--color-gray-900) h s l / 48%);\n --modal-border-radius: var(--radius-8);\n --modal-default-padding: calc(16 / var(--font-size-base) * 1rem);\n --modal-header-gap: calc(24 / var(--font-size-base) * 1rem);\n --modal-header-bottom-padding: var(--modal-default-padding);\n --modal-header-border-bottom: 1px solid var(--color-blue-400);\n --modal-body-padding-top: calc(24 / var(--font-size-base) * 1rem);\n --modal-body-padding-bottom: var(--modal-default-padding);\n --modal-body-gap: calc(32 / var(--font-size-base) * 1rem);\n --modal-footer-vertical-padding: var(--modal-default-padding);\n --modal-footer-horizontal-padding: var(--modal-default-padding);\n --modal-footer-gap: var(--modal-default-padding);\n\n &__body:not(:has(~ .af-apollo-modal__footer)) {\n --modal-body-padding-bottom: var(--modal-default-padding);\n }\n\n :has(.af-apollo-modal__body-vertical-scroll) {\n --modal-footer-border-top: 1px solid var(--color-blue-400);\n --modal-footer-vertical-padding: calc(12 / var(--font-size-base) * 1rem);\n --modal-footer-horizontal-padding: calc(16 / var(--font-size-base) * 1rem);\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n --modal-default-padding: calc(24 / var(--font-size-base) * 1rem);\n --modal-text-font-size: calc(18 / var(--font-size-base) * 1rem);\n --modal-footer-vertical-padding: var(--modal-default-padding);\n --modal-footer-horizontal-padding: var(--modal-default-padding);\n --modal-body-gap: calc(40 / var(--font-size-base) * 1rem);\n --modal-body-padding-bottom: calc(16 / var(--font-size-base) * 1rem);\n\n :has(.af-apollo-modal__body-vertical-scroll) {\n --modal-footer-border-top: none;\n --modal-footer-vertical-padding: calc(16 / var(--font-size-base) * 1rem);\n --modal-footer-horizontal-padding: calc(\n 16 / var(--font-size-base) * 1rem\n );\n }\n }\n}\n","/* stylelint-disable color-function-notation */\n@use \"../common/breakpoints\" as breakpoints;\n@use \"./ModalCommon\";\n\n.af-apollo-modal {\n --modal-bg-color: var(--color-white);\n --modal-text-color: var(--color-gray-900);\n --modal-text-font-size: calc(16 / var(--font-size-base) * 1rem);\n --modal-overlay-color: hsl(from var(--color-gray-900) h s l / 48%);\n --modal-border-radius: var(--radius-8);\n --modal-default-padding: calc(16 / var(--font-size-base) * 1rem);\n --modal-header-gap: calc(24 / var(--font-size-base) * 1rem);\n --modal-header-bottom-padding: var(--modal-default-padding);\n --modal-header-border-bottom: 1px solid var(--color-blue-400);\n --modal-body-padding-top: calc(24 / var(--font-size-base) * 1rem);\n --modal-body-padding-bottom: var(--modal-default-padding);\n --modal-body-gap: calc(32 / var(--font-size-base) * 1rem);\n --modal-footer-vertical-padding: var(--modal-default-padding);\n --modal-footer-horizontal-padding: var(--modal-default-padding);\n --modal-footer-gap: var(--modal-default-padding);\n\n &__body:not(:has(~ .af-apollo-modal__footer)) {\n --modal-body-padding-bottom: var(--modal-default-padding);\n }\n\n :has(.af-apollo-modal__body-vertical-scroll) {\n --modal-footer-border-top: 1px solid var(--color-blue-400);\n --modal-footer-vertical-padding: calc(12 / var(--font-size-base) * 1rem);\n --modal-footer-horizontal-padding: calc(16 / var(--font-size-base) * 1rem);\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n --modal-default-padding: calc(24 / var(--font-size-base) * 1rem);\n --modal-text-font-size: calc(18 / var(--font-size-base) * 1rem);\n --modal-footer-vertical-padding: var(--modal-default-padding);\n --modal-footer-horizontal-padding: var(--modal-default-padding);\n --modal-body-gap: calc(40 / var(--font-size-base) * 1rem);\n --modal-body-padding-bottom: calc(16 / var(--font-size-base) * 1rem);\n\n :has(.af-apollo-modal__body-vertical-scroll) {\n --modal-footer-border-top: none;\n --modal-footer-vertical-padding: calc(16 / var(--font-size-base) * 1rem);\n --modal-footer-horizontal-padding: calc(\n 16 / var(--font-size-base) * 1rem\n );\n }\n }\n}\n"]}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
/* stylelint-disable color-function-notation */
|
|
2
|
+
@use "../common/breakpoints" as breakpoints;
|
|
3
|
+
@use "./ModalCommon";
|
|
4
|
+
|
|
5
|
+
.af-apollo-modal {
|
|
6
|
+
--modal-bg-color: var(--color-white);
|
|
7
|
+
--modal-text-color: var(--color-gray-900);
|
|
8
|
+
--modal-text-font-size: calc(16 / var(--font-size-base) * 1rem);
|
|
9
|
+
--modal-overlay-color: hsl(from var(--color-gray-900) h s l / 48%);
|
|
10
|
+
--modal-border-radius: var(--radius-8);
|
|
11
|
+
--modal-default-padding: calc(16 / var(--font-size-base) * 1rem);
|
|
12
|
+
--modal-header-gap: calc(24 / var(--font-size-base) * 1rem);
|
|
13
|
+
--modal-header-bottom-padding: var(--modal-default-padding);
|
|
14
|
+
--modal-header-border-bottom: 1px solid var(--color-blue-400);
|
|
15
|
+
--modal-body-padding-top: calc(24 / var(--font-size-base) * 1rem);
|
|
16
|
+
--modal-body-padding-bottom: var(--modal-default-padding);
|
|
17
|
+
--modal-body-gap: calc(32 / var(--font-size-base) * 1rem);
|
|
18
|
+
--modal-footer-vertical-padding: var(--modal-default-padding);
|
|
19
|
+
--modal-footer-horizontal-padding: var(--modal-default-padding);
|
|
20
|
+
--modal-footer-gap: var(--modal-default-padding);
|
|
21
|
+
|
|
22
|
+
&__body:not(:has(~ .af-apollo-modal__footer)) {
|
|
23
|
+
--modal-body-padding-bottom: var(--modal-default-padding);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
:has(.af-apollo-modal__body-vertical-scroll) {
|
|
27
|
+
--modal-footer-border-top: 1px solid var(--color-blue-400);
|
|
28
|
+
--modal-footer-vertical-padding: calc(12 / var(--font-size-base) * 1rem);
|
|
29
|
+
--modal-footer-horizontal-padding: calc(16 / var(--font-size-base) * 1rem);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@media (width > #{breakpoints.$breakpoint-md}) {
|
|
33
|
+
--modal-default-padding: calc(24 / var(--font-size-base) * 1rem);
|
|
34
|
+
--modal-text-font-size: calc(18 / var(--font-size-base) * 1rem);
|
|
35
|
+
--modal-footer-vertical-padding: var(--modal-default-padding);
|
|
36
|
+
--modal-footer-horizontal-padding: var(--modal-default-padding);
|
|
37
|
+
--modal-body-gap: calc(40 / var(--font-size-base) * 1rem);
|
|
38
|
+
--modal-body-padding-bottom: calc(16 / var(--font-size-base) * 1rem);
|
|
39
|
+
|
|
40
|
+
:has(.af-apollo-modal__body-vertical-scroll) {
|
|
41
|
+
--modal-footer-border-top: none;
|
|
42
|
+
--modal-footer-vertical-padding: calc(16 / var(--font-size-base) * 1rem);
|
|
43
|
+
--modal-footer-horizontal-padding: calc(
|
|
44
|
+
16 / var(--font-size-base) * 1rem
|
|
45
|
+
);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|