@axa-fr/design-system-apollo-css 1.0.5-alpha.459 → 1.0.5-alpha.463
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/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionApollo.css +1 -1
- package/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionApollo.css.map +1 -1
- package/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionApollo.scss +1 -0
- package/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionCommon.css +1 -1
- package/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionCommon.css.map +1 -1
- package/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionCommon.scss +1 -1
- package/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionLF.css +1 -1
- package/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionLF.css.map +1 -1
- package/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionLF.scss +1 -0
- package/dist/Form/Radio/CardRadioOption/CardRadioOptionApollo.css +1 -1
- package/dist/Form/Radio/CardRadioOption/CardRadioOptionApollo.css.map +1 -1
- package/dist/Form/Radio/CardRadioOption/CardRadioOptionApollo.scss +1 -0
- package/dist/Form/Radio/CardRadioOption/CardRadioOptionCommon.css +1 -1
- package/dist/Form/Radio/CardRadioOption/CardRadioOptionCommon.css.map +1 -1
- package/dist/Form/Radio/CardRadioOption/CardRadioOptionCommon.scss +1 -1
- package/dist/Form/Radio/CardRadioOption/CardRadioOptionLF.css +1 -1
- package/dist/Form/Radio/CardRadioOption/CardRadioOptionLF.css.map +1 -1
- package/dist/Form/Radio/CardRadioOption/CardRadioOptionLF.scss +1 -0
- package/dist/Form/TextArea/TextAreaApollo.css +1 -1
- package/dist/Form/TextArea/TextAreaApollo.css.map +1 -1
- package/dist/Form/TextArea/TextAreaApollo.scss +17 -32
- package/dist/Form/TextArea/TextAreaCommon.css +1 -1
- package/dist/Form/TextArea/TextAreaCommon.css.map +1 -1
- package/dist/Form/TextArea/TextAreaCommon.scss +16 -10
- package/dist/Form/TextArea/TextAreaLF.css +1 -1
- package/dist/Form/TextArea/TextAreaLF.css.map +1 -1
- package/dist/Form/TextArea/TextAreaLF.scss +16 -30
- package/dist/Modal/ModalApollo.css +1 -1
- package/dist/Modal/ModalApollo.css.map +1 -1
- package/dist/Modal/ModalApollo.scss +4 -4
- package/dist/Modal/ModalCommon.css +1 -1
- package/dist/Modal/ModalCommon.css.map +1 -1
- package/dist/Modal/ModalCommon.scss +1 -1
- package/dist/Modal/ModalLF.css +1 -1
- package/dist/Modal/ModalLF.css.map +1 -1
- package/dist/Modal/ModalLF.scss +4 -4
- package/dist/apollo.css +1 -1
- package/dist/apollo.css.map +1 -1
- package/dist/common/reboot.css +1 -1
- package/dist/common/reboot.css.map +1 -1
- package/dist/common/reboot.scss +1 -0
- package/dist/look-and-feel.css +2 -2
- package/dist/look-and-feel.css.map +1 -1
- package/package.json +1 -1
|
@@ -1,43 +1,29 @@
|
|
|
1
1
|
@use "../../common/breakpoints";
|
|
2
2
|
@use "TextAreaCommon";
|
|
3
3
|
|
|
4
|
-
.af-
|
|
5
|
-
--
|
|
6
|
-
--
|
|
7
|
-
--
|
|
8
|
-
--
|
|
9
|
-
--
|
|
10
|
-
--input-textarea-box-shadow-size: 1px;
|
|
4
|
+
.af-form__textarea {
|
|
5
|
+
--textarea-border-radius: var(--default-border-radius);
|
|
6
|
+
--textarea-placeholder-color: var(--color-gray-700);
|
|
7
|
+
--textarea-background-color: var(--color-white);
|
|
8
|
+
--textarea-color: var(--color-gray-900);
|
|
9
|
+
--textarea-box-shadow-color: var(--color-gray-700);
|
|
11
10
|
|
|
12
|
-
&:hover,
|
|
13
|
-
|
|
14
|
-
--input-textarea-box-shadow-size: 2px;
|
|
11
|
+
&:is(:focus-visible, :hover, :active, :focus, :not(:placeholder-shown)) {
|
|
12
|
+
--textarea-box-shadow-color: var(--color-axa);
|
|
15
13
|
}
|
|
16
14
|
|
|
17
|
-
&:
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
--
|
|
15
|
+
&:disabled {
|
|
16
|
+
--textarea-background-color: var(--color-gray-200);
|
|
17
|
+
--textarea-box-shadow-color: var(--color-gray-400);
|
|
18
|
+
--textarea-placeholder-color: var(--color-gray-500);
|
|
19
|
+
--textarea-color: var(--color-gray-700);
|
|
21
20
|
}
|
|
22
21
|
|
|
23
22
|
&[aria-invalid="true"] {
|
|
24
|
-
--
|
|
25
|
-
--input-textarea-box-shadow-size: 2px;
|
|
26
|
-
|
|
27
|
-
&:hover,
|
|
28
|
-
&:focus {
|
|
29
|
-
--input-textarea-box-shadow-size: 3px;
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
&:disabled {
|
|
34
|
-
--input-textarea-background-color: var(--color-gray-200);
|
|
35
|
-
--input-textarea-box-shadow-color: var(--color-gray-400);
|
|
36
|
-
--input-textarea-placeholder-color: var(--color-gray-500);
|
|
37
|
-
--input-textarea-color: var(--color-gray-700);
|
|
23
|
+
--textarea-box-shadow-color: var(--color-red-700);
|
|
38
24
|
|
|
39
|
-
&:hover {
|
|
40
|
-
--
|
|
25
|
+
&:is(:focus-visible, :hover, :active, :focus) {
|
|
26
|
+
--textarea-box-shadow-width: 3px;
|
|
41
27
|
}
|
|
42
28
|
}
|
|
43
29
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-
|
|
1
|
+
.af-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-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-modal[open]{display:flex;flex-direction:column;opacity:1;transform:translateY(0)}@starting-style{.af-modal[open]{opacity:0;transform:translateY(100vh)}}.af-modal[open]::backdrop{opacity:.4}@starting-style{.af-modal[open]::backdrop{opacity:0}}.af-modal__content{display:grid;flex:1 1;grid-template-rows:auto 1fr auto;overflow-y:hidden}.af-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-modal__header-close-btn{grid-area:closebtn;place-self:start end}.af-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-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-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-modal__footer-button{flex:1 1}@media (width > 1023px){.af-modal{border-radius:var(--modal-border-radius);clip-path:rect(0 100% 100% 0 round var(--modal-border-radius));margin:revert;max-width:revert}.af-modal,.af-modal[open]{transform:unset}.af-modal__footer-button{flex-grow:inherit;min-width:180px}}.af-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-modal__body:not(:has(~.af-modal__footer)){--modal-body-padding-bottom:var(--modal-default-padding)}.af-modal :has(.af-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-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-modal :has(.af-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}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Modal/ModalCommon.scss","../../src/Modal/ModalApollo.scss","../../src/Modal/ModalApollo.scss%23sass"],"names":[],"mappings":"AAEA,
|
|
1
|
+
{"version":3,"sources":["../../src/Modal/ModalCommon.scss","../../src/Modal/ModalApollo.scss","../../src/Modal/ModalApollo.scss%23sass"],"names":[],"mappings":"AAEA,UCDA,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,oBAEE,qCAAA,CADA,SAAA,CAEA,gEAAA,CAIA,oDAAA,CACA,sCCZJ,CDeE,gBACE,YAAA,CACA,qBAAA,CACA,SAAA,CACA,uBCbJ,CDeI,gBANF,gBAOI,SAAA,CACA,2BCZJ,CACF,CDcI,0BACE,UCZN,CDcM,gBAHF,0BAII,SCXN,CACF,CDeE,mBACE,YAAA,CAEA,QAAA,CADA,gCAAA,CAEA,iBCbJ,CDgBE,kBAQE,sCAAA,CAJA,+CAAA,CAHA,YAAA,CAMA,2BAAA,CAFA,0CAAA,CACA,8BAAA,CAJA,oCAAA,CACA,oDCTJ,CDgBI,4BACE,kBAAA,CACA,oBCdN,CDiBI,wBAIE,kBAAA,CAHA,YAAA,CAKA,uCAAA,CAJA,qBAAA,CACA,8BAAA,CAEA,kBCdN,CDmBE,gBACE,YAAA,CAGA,qBAAA,CAGA,qCAAA,CAFA,gCAAA,CAGA,gBAAA,CAFA,eAAA,CAJA,mGCZJ,CDqBE,kBAOE,sCAAA,CAHA,iDAAA,CAHA,YAAA,CAKA,2BAAA,CADA,mBAAA,CAHA,mFCfJ,CDsBI,yBACE,QCpBN,CDwBE,wBAvHF,UA0HI,wCAAA,CACA,8DAAA,CAFA,aAAA,CADA,gBCjBF,CDuBE,0BAFA,eClBF,CDwBE,yBAEE,iBAAA,CADA,eCrBJ,CACF,CC9GA,UACE,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,8CACE,wDDiHJ,CC9GE,gDACE,sDAAA,CACA,mEAAA,CACA,qEDgHJ,CC7GE,wBA3BF,UA4BI,sDAAA,CACA,2DAAA,CACA,+DDgHF,CC9GE,gDACE,mEAAA,CACA,8DAAA,CACA,8BDgHJ,CACF","file":"ModalApollo.css","sourcesContent":["@use \"../common/breakpoints\" as breakpoints;\n\n.af-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-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-modal__footer)) {\n --modal-body-padding-bottom: var(--modal-default-padding);\n }\n\n :has(.af-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-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-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-modal__footer)) {\n --modal-body-padding-bottom: var(--modal-default-padding);\n }\n\n :has(.af-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-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"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@use "../common/breakpoints" as breakpoints;
|
|
2
2
|
@use "./ModalCommon";
|
|
3
3
|
|
|
4
|
-
.af-
|
|
4
|
+
.af-modal {
|
|
5
5
|
--modal-bg-color: var(--white);
|
|
6
6
|
--modal-text-color: var(--neutral-100);
|
|
7
7
|
--modal-text-font-size: calc(16 / var(--font-size-base) * 1rem);
|
|
@@ -18,11 +18,11 @@
|
|
|
18
18
|
--modal-footer-horizontal-padding: var(--modal-default-padding);
|
|
19
19
|
--modal-footer-gap: calc(16 / var(--font-size-base) * 1rem);
|
|
20
20
|
|
|
21
|
-
&__body:not(:has(~ .af-
|
|
21
|
+
&__body:not(:has(~ .af-modal__footer)) {
|
|
22
22
|
--modal-body-padding-bottom: var(--modal-default-padding);
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
:has(.af-
|
|
25
|
+
:has(.af-modal__body-vertical-scroll) {
|
|
26
26
|
--modal-footer-border-top: 1px solid var(--axa-blue-20);
|
|
27
27
|
--modal-footer-vertical-padding: calc(12 / var(--font-size-base) * 1rem);
|
|
28
28
|
--modal-footer-horizontal-padding: calc(16 / var(--font-size-base) * 1rem);
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
--modal-default-padding: calc(32 / var(--font-size-base) * 1rem);
|
|
34
34
|
--modal-body-padding-bottom: calc(16 / var(--font-size-base) * 1rem);
|
|
35
35
|
|
|
36
|
-
:has(.af-
|
|
36
|
+
:has(.af-modal__body-vertical-scroll) {
|
|
37
37
|
--modal-footer-vertical-padding: calc(16 / var(--font-size-base) * 1rem);
|
|
38
38
|
--modal-footer-horizontal-padding: var(--modal-default-padding);
|
|
39
39
|
--modal-footer-border-top: none;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-
|
|
1
|
+
.af-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-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-modal[open]{display:flex;flex-direction:column;opacity:1;transform:translateY(0)}@starting-style{.af-modal[open]{opacity:0;transform:translateY(100vh)}}.af-modal[open]::backdrop{opacity:.4}@starting-style{.af-modal[open]::backdrop{opacity:0}}.af-modal__content{display:grid;flex:1 1;grid-template-rows:auto 1fr auto;overflow-y:hidden}.af-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-modal__header-close-btn{grid-area:closebtn;place-self:start end}.af-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-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-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-modal__footer-button{flex:1 1}@media (width > 1023px){.af-modal{border-radius:var(--modal-border-radius);clip-path:rect(0 100% 100% 0 round var(--modal-border-radius));margin:revert;max-width:revert}.af-modal,.af-modal[open]{transform:unset}.af-modal__footer-button{flex-grow:inherit;min-width:180px}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Modal/ModalCommon.scss%23sass","../../src/Modal/ModalCommon.scss"],"names":[],"mappings":"AAEA,
|
|
1
|
+
{"version":3,"sources":["../../src/Modal/ModalCommon.scss%23sass","../../src/Modal/ModalCommon.scss"],"names":[],"mappings":"AAEA,UACE,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,oBAEE,qCAAA,CADA,SAAA,CAEA,gEACE,CAGF,oDAAA,CACA,sCCZJ,CDeE,gBACE,YAAA,CACA,qBAAA,CACA,SAAA,CACA,uBCbJ,CDeI,gBANF,gBAOI,SAAA,CACA,2BCZJ,CACF,CDcI,0BACE,UCZN,CDcM,gBAHF,0BAII,SCXN,CACF,CDeE,mBACE,YAAA,CAEA,QAAA,CADA,gCAAA,CAEA,iBCbJ,CDgBE,kBAQE,sCAAA,CAJA,+CAAA,CAHA,YAAA,CAMA,2BAAA,CAFA,0CAAA,CACA,8BAAA,CAJA,oCAAA,CACA,oDCTJ,CDgBI,4BACE,kBAAA,CACA,oBCdN,CDiBI,wBAIE,kBAAA,CAHA,YAAA,CAKA,uCAAA,CAJA,qBAAA,CACA,8BAAA,CAEA,kBCdN,CDmBE,gBACE,YAAA,CAGA,qBAAA,CAGA,qCAAA,CAFA,gCAAA,CAGA,gBAAA,CAFA,eAAA,CAJA,mGCZJ,CDqBE,kBAOE,sCAAA,CAHA,iDAAA,CAHA,YAAA,CAKA,2BAAA,CADA,mBAAA,CAHA,mFCfJ,CDsBI,yBACE,QCpBN,CDwBE,wBAvHF,UA0HI,wCAAA,CACA,8DAAA,CAFA,aAAA,CADA,gBCjBF,CDuBE,0BAFA,eClBF,CDwBE,yBAEE,iBAAA,CADA,eCrBJ,CACF","file":"ModalCommon.css","sourcesContent":["@use \"../common/breakpoints\" as breakpoints;\n\n.af-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-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"]}
|
package/dist/Modal/ModalLF.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-
|
|
1
|
+
.af-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-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-modal[open]{display:flex;flex-direction:column;opacity:1;transform:translateY(0)}@starting-style{.af-modal[open]{opacity:0;transform:translateY(100vh)}}.af-modal[open]::backdrop{opacity:.4}@starting-style{.af-modal[open]::backdrop{opacity:0}}.af-modal__content{display:grid;flex:1 1;grid-template-rows:auto 1fr auto;overflow-y:hidden}.af-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-modal__header-close-btn{grid-area:closebtn;place-self:start end}.af-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-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-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-modal__footer-button{flex:1 1}@media (width > 1023px){.af-modal{border-radius:var(--modal-border-radius);clip-path:rect(0 100% 100% 0 round var(--modal-border-radius));margin:revert;max-width:revert}.af-modal,.af-modal[open]{transform:unset}.af-modal__footer-button{flex-grow:inherit;min-width:180px}}.af-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-modal__body:not(:has(~.af-modal__footer)){--modal-body-padding-bottom:var(--modal-default-padding)}.af-modal :has(.af-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-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-modal :has(.af-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)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Modal/ModalCommon.scss","../../src/Modal/ModalLF.scss","../../src/Modal/ModalLF.scss%23sass"],"names":[],"mappings":"AAEA,
|
|
1
|
+
{"version":3,"sources":["../../src/Modal/ModalCommon.scss","../../src/Modal/ModalLF.scss","../../src/Modal/ModalLF.scss%23sass"],"names":[],"mappings":"AAEA,UCAA,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,oBAEE,qCAAA,CADA,SAAA,CAEA,gEAAA,CAIA,oDAAA,CACA,sCCXJ,CDcE,gBACE,YAAA,CACA,qBAAA,CACA,SAAA,CACA,uBCZJ,CDcI,gBANF,gBAOI,SAAA,CACA,2BCXJ,CACF,CDaI,0BACE,UCXN,CDaM,gBCXN,0BDYQ,SCVN,CACF,CDcE,mBACE,YAAA,CAEA,QAAA,CADA,gCAAA,CAEA,iBCZJ,CDeE,kBAQE,sCAAA,CAJA,+CAAA,CAHA,YAAA,CAMA,2BAAA,CAFA,0CAAA,CACA,8BAAA,CAJA,oCAAA,CACA,oDCRJ,CDeI,4BACE,kBAAA,CACA,oBCbN,CDgBI,wBAIE,kBAAA,CAHA,YAAA,CAKA,uCAAA,CAJA,qBAAA,CACA,8BAAA,CAEA,kBCbN,CDkBE,gBACE,YAAA,CAGA,qBAAA,CAGA,qCAAA,CAFA,gCAAA,CAGA,gBAAA,CAFA,eAAA,CAJA,mGCXJ,CDoBE,kBAOE,sCAAA,CAHA,iDAAA,CAHA,YAAA,CAKA,2BAAA,CADA,mBAAA,CAHA,mFCdJ,CDqBI,yBACE,QCnBN,CDuBE,wBAvHF,UA0HI,wCAAA,CACA,8DAAA,CAFA,aAAA,CADA,gBChBF,CDsBE,0BAFA,eCjBF,CDuBE,yBAEE,iBAAA,CADA,eCpBJ,CACF,CC9GA,UACE,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,8CACE,wDDiHJ,CC9GE,gDACE,yDAAA,CACA,mEAAA,CACA,qEDgHJ,CC7GE,wBA3BF,UA4BI,2DAAA,CACA,0DAAA,CACA,4DAAA,CACA,8DAAA,CACA,oDAAA,CACA,+DDgHF,CC9GE,gDACE,8BAAA,CACA,mEAAA,CACA,qEDkHJ,CACF","file":"ModalLF.css","sourcesContent":["@use \"../common/breakpoints\" as breakpoints;\n\n.af-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-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-modal__footer)) {\n --modal-body-padding-bottom: var(--modal-default-padding);\n }\n\n :has(.af-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-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-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-modal__footer)) {\n --modal-body-padding-bottom: var(--modal-default-padding);\n }\n\n :has(.af-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-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"]}
|
package/dist/Modal/ModalLF.scss
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
@use "../common/breakpoints" as breakpoints;
|
|
3
3
|
@use "./ModalCommon";
|
|
4
4
|
|
|
5
|
-
.af-
|
|
5
|
+
.af-modal {
|
|
6
6
|
--modal-bg-color: var(--color-white);
|
|
7
7
|
--modal-text-color: var(--color-gray-900);
|
|
8
8
|
--modal-text-font-size: calc(16 / var(--font-size-base) * 1rem);
|
|
@@ -19,11 +19,11 @@
|
|
|
19
19
|
--modal-footer-horizontal-padding: var(--modal-default-padding);
|
|
20
20
|
--modal-footer-gap: var(--modal-default-padding);
|
|
21
21
|
|
|
22
|
-
&__body:not(:has(~ .af-
|
|
22
|
+
&__body:not(:has(~ .af-modal__footer)) {
|
|
23
23
|
--modal-body-padding-bottom: var(--modal-default-padding);
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
:has(.af-
|
|
26
|
+
:has(.af-modal__body-vertical-scroll) {
|
|
27
27
|
--modal-footer-border-top: 1px solid var(--color-blue-400);
|
|
28
28
|
--modal-footer-vertical-padding: calc(12 / var(--font-size-base) * 1rem);
|
|
29
29
|
--modal-footer-horizontal-padding: calc(16 / var(--font-size-base) * 1rem);
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
--modal-body-gap: calc(40 / var(--font-size-base) * 1rem);
|
|
38
38
|
--modal-body-padding-bottom: calc(16 / var(--font-size-base) * 1rem);
|
|
39
39
|
|
|
40
|
-
:has(.af-
|
|
40
|
+
:has(.af-modal__body-vertical-scroll) {
|
|
41
41
|
--modal-footer-border-top: none;
|
|
42
42
|
--modal-footer-vertical-padding: calc(16 / var(--font-size-base) * 1rem);
|
|
43
43
|
--modal-footer-horizontal-padding: calc(
|