@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 +1 @@
|
|
|
1
|
-
.af-card-checkbox-option{--checkbox-option-border-width:1px;--checkbox-option-background-color:var(--white);align-items:center;background-color:var(--checkbox-option-background-color);border-radius:
|
|
1
|
+
.af-card-checkbox-option{--checkbox-option-border-width:1px;--checkbox-option-background-color:var(--white);align-items:center;background-color:var(--checkbox-option-background-color);border-radius:var(--checkbox-option-border-radius);cursor:pointer;display:flex;flex-direction:column;gap:var(--checkbox-option-gap);justify-content:space-between;outline:var(--checkbox-option-border-width) solid var(--checkbox-option-border-color);outline-offset:calc(var(--checkbox-option-border-width)*-1);padding:1rem;position:relative;text-align:center}.af-card-checkbox-option:focus-visible,.af-card-checkbox-option:focus-within,.af-card-checkbox-option:hover{--checkbox-option-border-width:2px;--checkbox-option-border-color:var(--axa-blue-100)}.af-card-checkbox-option__label{color:var(--checkbox-option-color-title);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400;margin:0}@media (width > 667px){.af-card-checkbox-option__label{font-size:calc(18/var(--font-size-base)*1rem)}}.af-card-checkbox-option:has(input:checked){--checkbox-option-border-width:2px}.af-card-checkbox-option:has(input:checked):focus-visible,.af-card-checkbox-option:has(input:checked):focus-within,.af-card-checkbox-option:has(input:checked):hover{--checkbox-option-border-width:3px}.af-card-checkbox-option:has(input:checked) .af-card-checkbox-option__label{font-weight:600}.af-card-checkbox-option__content{align-items:center;display:flex;flex-direction:column;flex-grow:1;gap:var(--checkbox-option-gap);justify-content:space-between;text-align:center}.af-card-checkbox-option__description,.af-card-checkbox-option__subtitle{color:var(--checkbox-option-color-subtitle);font-size:calc(14/var(--font-size-base)*1rem);font-weight:400;margin:0}@media (width > 667px){.af-card-checkbox-option__description,.af-card-checkbox-option__subtitle{font-size:1rem}}.af-card-checkbox-option--horizontal{flex-direction:row}.af-card-checkbox-option--horizontal .af-card-checkbox-option__content{align-items:flex-start}.af-card-checkbox-option--horizontal .af-checkbox{order:-1}.af-card-checkbox-option .af-icon{--icon-size:var(--icon-size-medium)}@media (width > 667px){.af-card-checkbox-option .af-icon{--icon-size:var(--icon-size-large)}}.af-card-checkbox-option{--checkbox-option-border-color:var(--axa-blue-65);--checkbox-option-color-title:var(--axa-blue-100);--checkbox-option-color-subtitle:var(--neutral-80);--checkbox-option-gap:calc(8/var(--font-size-base)*1rem);--checkbox-option-border-radius:var(--radius-8)}.af-card-checkbox-option:hover{--checkbox-option-border-color:var(--axa-blue-100)}.af-card-checkbox-option--horizontal{--checkbox-option-gap:calc(8/var(--font-size-base)*1rem)}.af-card-checkbox-option--horizontal .af-card-checkbox-option__content{--checkbox-option-gap:calc(4/var(--font-size-base)*1rem)}.af-card-checkbox-option--horizontal .af-checkbox{margin-right:calc(8/var(--font-size-base)*1rem)}.af-card-checkbox-option:not(.af-card-checkbox-option--horizontal) .af-checkbox{margin-top:calc(8/var(--font-size-base)*1rem)}.af-card-checkbox-option:has(input:checked){--checkbox-option-background-color:var(--axa-blue-4);--checkbox-option-border-color:var(--axa-blue-100)}.af-card-checkbox-option:has(input[aria-invalid=true]):not(:has(input:checked)){--checkbox-option-border-color:var(--red-alert-100);--checkbox-option-background-color:var(--axa-red-4);--checkbox-option-color-title:var(--neutral-80)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionCommon.scss","../../../../src/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionApollo.scss","../../../../src/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionApollo.scss%23sass"],"names":[],"mappings":"AAEA,yBACE,kCAAA,CCDF,+CAAA,CDSE,kBAAA,CAIA,wDAAA,CANA,
|
|
1
|
+
{"version":3,"sources":["../../../../src/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionCommon.scss","../../../../src/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionApollo.scss","../../../../src/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionApollo.scss%23sass"],"names":[],"mappings":"AAEA,yBACE,kCAAA,CCDF,+CAAA,CDSE,kBAAA,CAIA,wDAAA,CANA,kDAAA,CAUA,cAAA,CAZA,YAAA,CAGA,qBAAA,CAGA,8BAAA,CADA,6BAAA,CAIA,qFAAA,CAEA,2DAAA,CAVA,YAAA,CAFA,iBAAA,CAQA,iBCEF,CDKE,4GAGE,kCAAA,CACA,kDCLJ,CDQE,gCAIE,wCAAA,CAFA,6CAAA,CACA,eAAA,CAFA,QCHJ,CDQI,uBANF,gCCCA,6CACA,CACF,CDQE,4CACE,kCCNJ,CDQI,qKAGE,kCCRN,CDWI,4ECTJ,eACA,CDaE,kCAIE,kBAAA,CAHA,YAAA,CACA,qBAAA,CACA,WAAA,CAGA,8BAAA,CADA,6BAAA,CAEA,iBCXJ,CDcE,yEAKE,2CAAA,CAFA,6CAAA,CACA,eAAA,CAFA,QCVJ,CDeI,uBAPF,yEAQI,cCZJ,CACF,CDeE,qCACE,kBCbJ,CDeI,uEACE,sBCbN,CDgBI,kDACE,QCdN,CDkBE,kCACE,mCChBJ,CDkBI,uBAHF,kCAII,kCCfJ,CACF,CC3EA,yBACE,iDAAA,CACA,iDAAA,CACA,kDAAA,CACA,wDAAA,CACA,+CD8EF,CC5EE,+BACE,kDD8EJ,CC3EE,qCACE,wDD6EJ,CC3EI,uEACE,wDD6EN,CC1EI,kDACE,+CD4EN,CCxEE,gFACE,6CD0EJ,CCvEE,4CACE,oDAAA,CACA,kDDyEJ,CCtEE,gFACE,mDAAA,CACA,mDAAA,CACA,+CDwEJ","file":"CardCheckboxOptionApollo.css","sourcesContent":["@use \"../../../common/breakpoints\";\n\n.af-card-checkbox-option {\n --checkbox-option-border-width: 1px;\n --checkbox-option-background-color: var(--white);\n\n position: relative;\n display: flex;\n padding: 1rem;\n border-radius: var(--checkbox-option-border-radius);\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n gap: var(--checkbox-option-gap);\n text-align: center;\n background-color: var(--checkbox-option-background-color);\n outline: var(--checkbox-option-border-width) solid\n var(--checkbox-option-border-color);\n outline-offset: calc(-1 * var(--checkbox-option-border-width));\n cursor: pointer;\n\n &:hover,\n &:focus-visible,\n &:focus-within {\n --checkbox-option-border-width: 2px;\n --checkbox-option-border-color: var(--axa-blue-100);\n }\n\n &__label {\n margin: 0;\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--checkbox-option-color-title);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n }\n\n &:has(input:checked) {\n --checkbox-option-border-width: 2px;\n\n &:hover,\n &:focus-visible,\n &:focus-within {\n --checkbox-option-border-width: 3px;\n }\n\n & .af-card-checkbox-option__label {\n font-weight: 600;\n }\n }\n\n &__content {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n align-items: center;\n justify-content: space-between;\n gap: var(--checkbox-option-gap);\n text-align: center;\n }\n\n &__description,\n &__subtitle {\n margin: 0;\n font-size: calc(14 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--checkbox-option-color-subtitle);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n font-size: 1rem;\n }\n }\n\n &--horizontal {\n flex-direction: row;\n\n & .af-card-checkbox-option__content {\n align-items: flex-start;\n }\n\n & .af-checkbox {\n order: -1;\n }\n }\n\n & .af-icon {\n --icon-size: var(--icon-size-medium);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n --icon-size: var(--icon-size-large);\n }\n }\n}\n","@use \"CardCheckboxOptionCommon\";\n\n.af-card-checkbox-option {\n --checkbox-option-border-color: var(--axa-blue-65);\n --checkbox-option-color-title: var(--axa-blue-100);\n --checkbox-option-color-subtitle: var(--neutral-80);\n --checkbox-option-gap: calc(8 / var(--font-size-base) * 1rem);\n --checkbox-option-border-radius: var(--radius-8);\n\n &:hover {\n --checkbox-option-border-color: var(--axa-blue-100);\n }\n\n &--horizontal {\n --checkbox-option-gap: calc(8 / var(--font-size-base) * 1rem);\n\n & .af-card-checkbox-option__content {\n --checkbox-option-gap: calc(4 / var(--font-size-base) * 1rem);\n }\n\n & .af-checkbox {\n margin-right: calc(8 / var(--font-size-base) * 1rem);\n }\n }\n\n &:not(&--horizontal) .af-checkbox {\n margin-top: calc(8 / var(--font-size-base) * 1rem);\n }\n\n &:has(input:checked) {\n --checkbox-option-background-color: var(--axa-blue-4);\n --checkbox-option-border-color: var(--axa-blue-100);\n }\n\n &:has(input[aria-invalid=\"true\"]):not(:has(input:checked)) {\n --checkbox-option-border-color: var(--red-alert-100);\n --checkbox-option-background-color: var(--axa-red-4);\n --checkbox-option-color-title: var(--neutral-80);\n }\n}\n","@use \"CardCheckboxOptionCommon\";\n\n.af-card-checkbox-option {\n --checkbox-option-border-color: var(--axa-blue-65);\n --checkbox-option-color-title: var(--axa-blue-100);\n --checkbox-option-color-subtitle: var(--neutral-80);\n --checkbox-option-gap: calc(8 / var(--font-size-base) * 1rem);\n --checkbox-option-border-radius: var(--radius-8);\n\n &:hover {\n --checkbox-option-border-color: var(--axa-blue-100);\n }\n\n &--horizontal {\n --checkbox-option-gap: calc(8 / var(--font-size-base) * 1rem);\n\n & .af-card-checkbox-option__content {\n --checkbox-option-gap: calc(4 / var(--font-size-base) * 1rem);\n }\n\n & .af-checkbox {\n margin-right: calc(8 / var(--font-size-base) * 1rem);\n }\n }\n\n &:not(&--horizontal) .af-checkbox {\n margin-top: calc(8 / var(--font-size-base) * 1rem);\n }\n\n &:has(input:checked) {\n --checkbox-option-background-color: var(--axa-blue-4);\n --checkbox-option-border-color: var(--axa-blue-100);\n }\n\n &:has(input[aria-invalid=\"true\"]):not(:has(input:checked)) {\n --checkbox-option-border-color: var(--red-alert-100);\n --checkbox-option-background-color: var(--axa-red-4);\n --checkbox-option-color-title: var(--neutral-80);\n }\n}\n"]}
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
--checkbox-option-color-title: var(--axa-blue-100);
|
|
6
6
|
--checkbox-option-color-subtitle: var(--neutral-80);
|
|
7
7
|
--checkbox-option-gap: calc(8 / var(--font-size-base) * 1rem);
|
|
8
|
+
--checkbox-option-border-radius: var(--radius-8);
|
|
8
9
|
|
|
9
10
|
&:hover {
|
|
10
11
|
--checkbox-option-border-color: var(--axa-blue-100);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-card-checkbox-option{--checkbox-option-border-width:1px;--checkbox-option-background-color:var(--white);align-items:center;background-color:var(--checkbox-option-background-color);border-radius:
|
|
1
|
+
.af-card-checkbox-option{--checkbox-option-border-width:1px;--checkbox-option-background-color:var(--white);align-items:center;background-color:var(--checkbox-option-background-color);border-radius:var(--checkbox-option-border-radius);cursor:pointer;display:flex;flex-direction:column;gap:var(--checkbox-option-gap);justify-content:space-between;outline:var(--checkbox-option-border-width) solid var(--checkbox-option-border-color);outline-offset:calc(var(--checkbox-option-border-width)*-1);padding:1rem;position:relative;text-align:center}.af-card-checkbox-option:focus-visible,.af-card-checkbox-option:focus-within,.af-card-checkbox-option:hover{--checkbox-option-border-width:2px;--checkbox-option-border-color:var(--axa-blue-100)}.af-card-checkbox-option__label{color:var(--checkbox-option-color-title);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400;margin:0}@media (width > 667px){.af-card-checkbox-option__label{font-size:calc(18/var(--font-size-base)*1rem)}}.af-card-checkbox-option:has(input:checked){--checkbox-option-border-width:2px}.af-card-checkbox-option:has(input:checked):focus-visible,.af-card-checkbox-option:has(input:checked):focus-within,.af-card-checkbox-option:has(input:checked):hover{--checkbox-option-border-width:3px}.af-card-checkbox-option:has(input:checked) .af-card-checkbox-option__label{font-weight:600}.af-card-checkbox-option__content{align-items:center;display:flex;flex-direction:column;flex-grow:1;gap:var(--checkbox-option-gap);justify-content:space-between;text-align:center}.af-card-checkbox-option__description,.af-card-checkbox-option__subtitle{color:var(--checkbox-option-color-subtitle);font-size:calc(14/var(--font-size-base)*1rem);font-weight:400;margin:0}@media (width > 667px){.af-card-checkbox-option__description,.af-card-checkbox-option__subtitle{font-size:1rem}}.af-card-checkbox-option--horizontal{flex-direction:row}.af-card-checkbox-option--horizontal .af-card-checkbox-option__content{align-items:flex-start}.af-card-checkbox-option--horizontal .af-checkbox{order:-1}.af-card-checkbox-option .af-icon{--icon-size:var(--icon-size-medium)}@media (width > 667px){.af-card-checkbox-option .af-icon{--icon-size:var(--icon-size-large)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionCommon.scss%23sass","../../../../src/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionCommon.scss"],"names":[],"mappings":"AAEA,yBACE,kCAAA,CCDF,+CAAA,CDSE,kBAAA,CAIA,wDAAA,CANA,
|
|
1
|
+
{"version":3,"sources":["../../../../src/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionCommon.scss%23sass","../../../../src/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionCommon.scss"],"names":[],"mappings":"AAEA,yBACE,kCAAA,CCDF,+CAAA,CDSE,kBAAA,CAIA,wDAAA,CANA,kDAAA,CAUA,cAAA,CAZA,YAAA,CAGA,qBAAA,CAGA,8BAAA,CADA,6BAAA,CAIA,qFAAA,CAEA,2DAAA,CAVA,YAAA,CAFA,iBAAA,CAQA,iBCEF,CDKE,4GAGE,kCAAA,CACA,kDCLJ,CDQE,gCAIE,wCAAA,CAFA,6CAAA,CACA,eAAA,CAFA,QCHJ,CDQI,uBANF,gCAOI,6CCLJ,CACF,CDQE,4CACE,kCCNJ,CDQI,qKAGE,kCCRN,CDWI,4EACE,eCTN,CDaE,kCAIE,kBAAA,CAHA,YAAA,CACA,qBAAA,CACA,WAAA,CAGA,8BAAA,CADA,6BAAA,CAEA,iBCXJ,CDcE,yEAKE,2CAAA,CAFA,6CAAA,CACA,eAAA,CAFA,QCVJ,CDeI,uBAPF,yEAQI,cCZJ,CACF,CDeE,qCACE,kBCbJ,CDeI,uEACE,sBCbN,CDgBI,kDACE,QCdN,CDkBE,kCACE,mCChBJ,CDkBI,uBAHF,kCCZA,kCACA,CACF","file":"CardCheckboxOptionCommon.css","sourcesContent":["@use \"../../../common/breakpoints\";\n\n.af-card-checkbox-option {\n --checkbox-option-border-width: 1px;\n --checkbox-option-background-color: var(--white);\n\n position: relative;\n display: flex;\n padding: 1rem;\n border-radius: var(--checkbox-option-border-radius);\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n gap: var(--checkbox-option-gap);\n text-align: center;\n background-color: var(--checkbox-option-background-color);\n outline: var(--checkbox-option-border-width) solid\n var(--checkbox-option-border-color);\n outline-offset: calc(-1 * var(--checkbox-option-border-width));\n cursor: pointer;\n\n &:hover,\n &:focus-visible,\n &:focus-within {\n --checkbox-option-border-width: 2px;\n --checkbox-option-border-color: var(--axa-blue-100);\n }\n\n &__label {\n margin: 0;\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--checkbox-option-color-title);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n }\n\n &:has(input:checked) {\n --checkbox-option-border-width: 2px;\n\n &:hover,\n &:focus-visible,\n &:focus-within {\n --checkbox-option-border-width: 3px;\n }\n\n & .af-card-checkbox-option__label {\n font-weight: 600;\n }\n }\n\n &__content {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n align-items: center;\n justify-content: space-between;\n gap: var(--checkbox-option-gap);\n text-align: center;\n }\n\n &__description,\n &__subtitle {\n margin: 0;\n font-size: calc(14 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--checkbox-option-color-subtitle);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n font-size: 1rem;\n }\n }\n\n &--horizontal {\n flex-direction: row;\n\n & .af-card-checkbox-option__content {\n align-items: flex-start;\n }\n\n & .af-checkbox {\n order: -1;\n }\n }\n\n & .af-icon {\n --icon-size: var(--icon-size-medium);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n --icon-size: var(--icon-size-large);\n }\n }\n}\n","@use \"../../../common/breakpoints\";\n\n.af-card-checkbox-option {\n --checkbox-option-border-width: 1px;\n --checkbox-option-background-color: var(--white);\n\n position: relative;\n display: flex;\n padding: 1rem;\n border-radius: var(--checkbox-option-border-radius);\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n gap: var(--checkbox-option-gap);\n text-align: center;\n background-color: var(--checkbox-option-background-color);\n outline: var(--checkbox-option-border-width) solid\n var(--checkbox-option-border-color);\n outline-offset: calc(-1 * var(--checkbox-option-border-width));\n cursor: pointer;\n\n &:hover,\n &:focus-visible,\n &:focus-within {\n --checkbox-option-border-width: 2px;\n --checkbox-option-border-color: var(--axa-blue-100);\n }\n\n &__label {\n margin: 0;\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--checkbox-option-color-title);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n }\n\n &:has(input:checked) {\n --checkbox-option-border-width: 2px;\n\n &:hover,\n &:focus-visible,\n &:focus-within {\n --checkbox-option-border-width: 3px;\n }\n\n & .af-card-checkbox-option__label {\n font-weight: 600;\n }\n }\n\n &__content {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n align-items: center;\n justify-content: space-between;\n gap: var(--checkbox-option-gap);\n text-align: center;\n }\n\n &__description,\n &__subtitle {\n margin: 0;\n font-size: calc(14 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--checkbox-option-color-subtitle);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n font-size: 1rem;\n }\n }\n\n &--horizontal {\n flex-direction: row;\n\n & .af-card-checkbox-option__content {\n align-items: flex-start;\n }\n\n & .af-checkbox {\n order: -1;\n }\n }\n\n & .af-icon {\n --icon-size: var(--icon-size-medium);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n --icon-size: var(--icon-size-large);\n }\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-card-checkbox-option{--checkbox-option-border-width:1px;--checkbox-option-background-color:var(--white);align-items:center;background-color:var(--checkbox-option-background-color);border-radius:
|
|
1
|
+
.af-card-checkbox-option{--checkbox-option-border-width:1px;--checkbox-option-background-color:var(--white);align-items:center;background-color:var(--checkbox-option-background-color);border-radius:var(--checkbox-option-border-radius);cursor:pointer;display:flex;flex-direction:column;gap:var(--checkbox-option-gap);justify-content:space-between;outline:var(--checkbox-option-border-width) solid var(--checkbox-option-border-color);outline-offset:calc(var(--checkbox-option-border-width)*-1);padding:1rem;position:relative;text-align:center}.af-card-checkbox-option:focus-visible,.af-card-checkbox-option:focus-within,.af-card-checkbox-option:hover{--checkbox-option-border-width:2px;--checkbox-option-border-color:var(--axa-blue-100)}.af-card-checkbox-option__label{color:var(--checkbox-option-color-title);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400;margin:0}@media (width > 667px){.af-card-checkbox-option__label{font-size:calc(18/var(--font-size-base)*1rem)}}.af-card-checkbox-option:has(input:checked){--checkbox-option-border-width:2px}.af-card-checkbox-option:has(input:checked):focus-visible,.af-card-checkbox-option:has(input:checked):focus-within,.af-card-checkbox-option:has(input:checked):hover{--checkbox-option-border-width:3px}.af-card-checkbox-option:has(input:checked) .af-card-checkbox-option__label{font-weight:600}.af-card-checkbox-option__content{align-items:center;display:flex;flex-direction:column;flex-grow:1;gap:var(--checkbox-option-gap);justify-content:space-between;text-align:center}.af-card-checkbox-option__description,.af-card-checkbox-option__subtitle{color:var(--checkbox-option-color-subtitle);font-size:calc(14/var(--font-size-base)*1rem);font-weight:400;margin:0}@media (width > 667px){.af-card-checkbox-option__description,.af-card-checkbox-option__subtitle{font-size:1rem}}.af-card-checkbox-option--horizontal{flex-direction:row}.af-card-checkbox-option--horizontal .af-card-checkbox-option__content{align-items:flex-start}.af-card-checkbox-option--horizontal .af-checkbox{order:-1}.af-card-checkbox-option .af-icon{--icon-size:var(--icon-size-medium)}@media (width > 667px){.af-card-checkbox-option .af-icon{--icon-size:var(--icon-size-large)}}.af-card-checkbox-option{--checkbox-option-border-color:var(--color-gray-700);--checkbox-option-color-title:var(--color-gray-900);--checkbox-option-color-subtitle:var(--color-gray-700);--checkbox-option-gap:calc(8/var(--font-size-base)*1rem);--checkbox-option-border-radius:var(--radius-4)}.af-card-checkbox-option:hover{--checkbox-option-border-color:var(--color-axa)}.af-card-checkbox-option:not(.af-card-checkbox-option--horizontal) .af-checkbox{left:calc(12/var(--font-size-base)*1rem);position:absolute;top:calc(12/var(--font-size-base)*1rem)}@media (width > 667px){.af-card-checkbox-option:not(.af-card-checkbox-option--horizontal) .af-checkbox{left:calc(16/var(--font-size-base)*1rem);top:calc(16/var(--font-size-base)*1rem)}}.af-card-checkbox-option .af-card-checkbox-option__content{--checkbox-option-gap:calc(4/var(--font-size-base)*1rem)}.af-card-checkbox-option--horizontal{column-gap:calc(12/var(--font-size-base)*1rem)}.af-card-checkbox-option:has(input:checked){--checkbox-option-background-color:var(--color-blue-2);--checkbox-option-border-color:var(--color-axa)}.af-card-checkbox-option:has(input[aria-invalid=true]):not(:has(input:checked)){--checkbox-option-border-color:var(--color-red-700)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionCommon.scss","../../../../src/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionLF.scss","../../../../src/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionLF.scss%23sass"],"names":[],"mappings":"AAEA,yBCDA,kCDEE,CACA,+CAAA,CAOA,kBAAA,CAIA,wDAAA,CANA,
|
|
1
|
+
{"version":3,"sources":["../../../../src/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionCommon.scss","../../../../src/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionLF.scss","../../../../src/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionLF.scss%23sass"],"names":[],"mappings":"AAEA,yBCDA,kCDEE,CACA,+CAAA,CAOA,kBAAA,CAIA,wDAAA,CANA,kDAAA,CAUA,cAAA,CAZA,YAAA,CAGA,qBAAA,CAGA,8BAAA,CADA,6BAAA,CAIA,qFAAA,CAEA,2DAAA,CAVA,YAAA,CCLF,iBAAA,CDWE,iBCEF,CDKE,4GAGE,kCAAA,CACA,kDCLJ,CDQE,gCAIE,wCAAA,CAFA,6CAAA,CACA,eAAA,CAFA,QCHJ,CDQI,uBANF,gCCCA,6CACA,CACF,CDQE,4CACE,kCCNJ,CDQI,qKAGE,kCCRN,CDWI,4EACE,eCTN,CDaE,kCAIE,kBAAA,CAHA,YAAA,CACA,qBAAA,CACA,WAAA,CAGA,8BAAA,CADA,6BAAA,CAEA,iBCXJ,CDcE,yEAKE,2CAAA,CAFA,6CAAA,CACA,eAAA,CAFA,QCVJ,CDeI,uBAPF,yEAQI,cCZJ,CACF,CDeE,qCACE,kBCbJ,CDeI,uEACE,sBCbN,CDgBI,kDACE,QCdN,CDkBE,kCACE,mCChBJ,CDkBI,uBAHF,kCAII,kCCfJ,CACF,CC1EA,yBACE,oDAAA,CACA,mDAAA,CACA,sDAAA,CACA,wDAAA,CACA,+CD6EF,CC3EE,+BACE,+CD6EJ,CC1EE,gFAGE,wCAAA,CAFA,iBAAA,CACA,uCD6EJ,CC1EI,uBALF,gFAOI,wCAAA,CADA,uCD8EJ,CACF,CC1EE,2DACE,wDD4EJ,CCzEE,qCACE,8CD2EJ,CCxEE,4CACE,sDAAA,CACA,+CD0EJ,CCvEE,gFACE,mDDyEJ","file":"CardCheckboxOptionLF.css","sourcesContent":["@use \"../../../common/breakpoints\";\n\n.af-card-checkbox-option {\n --checkbox-option-border-width: 1px;\n --checkbox-option-background-color: var(--white);\n\n position: relative;\n display: flex;\n padding: 1rem;\n border-radius: var(--checkbox-option-border-radius);\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n gap: var(--checkbox-option-gap);\n text-align: center;\n background-color: var(--checkbox-option-background-color);\n outline: var(--checkbox-option-border-width) solid\n var(--checkbox-option-border-color);\n outline-offset: calc(-1 * var(--checkbox-option-border-width));\n cursor: pointer;\n\n &:hover,\n &:focus-visible,\n &:focus-within {\n --checkbox-option-border-width: 2px;\n --checkbox-option-border-color: var(--axa-blue-100);\n }\n\n &__label {\n margin: 0;\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--checkbox-option-color-title);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n }\n\n &:has(input:checked) {\n --checkbox-option-border-width: 2px;\n\n &:hover,\n &:focus-visible,\n &:focus-within {\n --checkbox-option-border-width: 3px;\n }\n\n & .af-card-checkbox-option__label {\n font-weight: 600;\n }\n }\n\n &__content {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n align-items: center;\n justify-content: space-between;\n gap: var(--checkbox-option-gap);\n text-align: center;\n }\n\n &__description,\n &__subtitle {\n margin: 0;\n font-size: calc(14 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--checkbox-option-color-subtitle);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n font-size: 1rem;\n }\n }\n\n &--horizontal {\n flex-direction: row;\n\n & .af-card-checkbox-option__content {\n align-items: flex-start;\n }\n\n & .af-checkbox {\n order: -1;\n }\n }\n\n & .af-icon {\n --icon-size: var(--icon-size-medium);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n --icon-size: var(--icon-size-large);\n }\n }\n}\n","@use \"CardCheckboxOptionCommon\";\n@use \"../../../common/breakpoints\";\n\n.af-card-checkbox-option {\n --checkbox-option-border-color: var(--color-gray-700);\n --checkbox-option-color-title: var(--color-gray-900);\n --checkbox-option-color-subtitle: var(--color-gray-700);\n --checkbox-option-gap: calc(8 / var(--font-size-base) * 1rem);\n --checkbox-option-border-radius: var(--radius-4);\n\n &:hover {\n --checkbox-option-border-color: var(--color-axa);\n }\n\n &:not(&--horizontal) .af-checkbox {\n position: absolute;\n top: calc(12 / var(--font-size-base) * 1rem);\n left: calc(12 / var(--font-size-base) * 1rem);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n top: calc(16 / var(--font-size-base) * 1rem);\n left: calc(16 / var(--font-size-base) * 1rem);\n }\n }\n\n & .af-card-checkbox-option__content {\n --checkbox-option-gap: calc(4 / var(--font-size-base) * 1rem);\n }\n\n &--horizontal {\n column-gap: calc(12 / var(--font-size-base) * 1rem);\n }\n\n &:has(input:checked) {\n --checkbox-option-background-color: var(--color-blue-2);\n --checkbox-option-border-color: var(--color-axa);\n }\n\n &:has(input[aria-invalid=\"true\"]):not(:has(input:checked)) {\n --checkbox-option-border-color: var(--color-red-700);\n }\n}\n","@use \"CardCheckboxOptionCommon\";\n@use \"../../../common/breakpoints\";\n\n.af-card-checkbox-option {\n --checkbox-option-border-color: var(--color-gray-700);\n --checkbox-option-color-title: var(--color-gray-900);\n --checkbox-option-color-subtitle: var(--color-gray-700);\n --checkbox-option-gap: calc(8 / var(--font-size-base) * 1rem);\n --checkbox-option-border-radius: var(--radius-4);\n\n &:hover {\n --checkbox-option-border-color: var(--color-axa);\n }\n\n &:not(&--horizontal) .af-checkbox {\n position: absolute;\n top: calc(12 / var(--font-size-base) * 1rem);\n left: calc(12 / var(--font-size-base) * 1rem);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n top: calc(16 / var(--font-size-base) * 1rem);\n left: calc(16 / var(--font-size-base) * 1rem);\n }\n }\n\n & .af-card-checkbox-option__content {\n --checkbox-option-gap: calc(4 / var(--font-size-base) * 1rem);\n }\n\n &--horizontal {\n column-gap: calc(12 / var(--font-size-base) * 1rem);\n }\n\n &:has(input:checked) {\n --checkbox-option-background-color: var(--color-blue-2);\n --checkbox-option-border-color: var(--color-axa);\n }\n\n &:has(input[aria-invalid=\"true\"]):not(:has(input:checked)) {\n --checkbox-option-border-color: var(--color-red-700);\n }\n}\n"]}
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
--checkbox-option-color-title: var(--color-gray-900);
|
|
7
7
|
--checkbox-option-color-subtitle: var(--color-gray-700);
|
|
8
8
|
--checkbox-option-gap: calc(8 / var(--font-size-base) * 1rem);
|
|
9
|
+
--checkbox-option-border-radius: var(--radius-4);
|
|
9
10
|
|
|
10
11
|
&:hover {
|
|
11
12
|
--checkbox-option-border-color: var(--color-axa);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-card-radio-option{--radio-option-border-width:1px;--radio-option-background-color:var(--white);align-items:center;background-color:var(--radio-option-background-color);border-radius:
|
|
1
|
+
.af-card-radio-option{--radio-option-border-width:1px;--radio-option-background-color:var(--white);align-items:center;background-color:var(--radio-option-background-color);border-radius:var(--radio-option-border-radius);cursor:pointer;display:flex;flex-direction:column;gap:var(--radio-option-gap);justify-content:space-between;outline:var(--radio-option-border-width) solid var(--radio-option-border-color);outline-offset:calc(var(--radio-option-border-width)*-1);padding:1rem;position:relative;text-align:center}.af-card-radio-option:focus-visible,.af-card-radio-option:focus-within,.af-card-radio-option:hover{--radio-option-border-width:2px;--radio-option-border-color:var(--axa-blue-100)}.af-card-radio-option__label{color:var(--radio-option-color-title);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400;margin:0}@media (width > 667px){.af-card-radio-option__label{font-size:calc(18/var(--font-size-base)*1rem)}}.af-card-radio-option:has(input:checked){--radio-option-border-width:2px}.af-card-radio-option:has(input:checked):focus-visible,.af-card-radio-option:has(input:checked):focus-within,.af-card-radio-option:has(input:checked):hover{--radio-option-border-width:3px}.af-card-radio-option:has(input:checked) .af-card-radio-option__label{font-weight:600}.af-card-radio-option__content{align-items:center;display:flex;flex-direction:column;flex-grow:1;gap:var(--radio-option-gap);justify-content:space-between;text-align:center}.af-card-radio-option__description,.af-card-radio-option__subtitle{color:var(--radio-option-color-subtitle);font-size:calc(14/var(--font-size-base)*1rem);font-weight:400;margin:0}@media (width > 667px){.af-card-radio-option__description,.af-card-radio-option__subtitle{font-size:1rem}}.af-card-radio-option--horizontal{flex-direction:row}.af-card-radio-option--horizontal .af-card-radio-option__content{align-items:flex-start}.af-card-radio-option--horizontal .af-radio{order:-1}.af-card-radio-option .af-icon{--icon-size:var(--icon-size-medium)}@media (width > 667px){.af-card-radio-option .af-icon{--icon-size:var(--icon-size-large)}}.af-card-radio-option{--radio-option-border-color:var(--axa-blue-65);--radio-option-color-title:var(--axa-blue-100);--radio-option-color-subtitle:var(--neutral-80);--radio-option-gap:calc(8/var(--font-size-base)*1rem);--radio-option-border-radius:var(--radius-8)}.af-card-radio-option:hover{--radio-option-border-color:var(--axa-blue-100)}.af-card-radio-option--horizontal{--radio-option-gap:calc(8/var(--font-size-base)*1rem)}.af-card-radio-option--horizontal .af-card-radio-option__content{--radio-option-gap:calc(4/var(--font-size-base)*1rem)}.af-card-radio-option--horizontal .af-radio{margin-right:calc(8/var(--font-size-base)*1rem)}.af-card-radio-option:not(.af-card-radio-option--horizontal) .af-radio{margin-top:calc(8/var(--font-size-base)*1rem)}.af-card-radio-option--invalid:not(:has(input:checked)){--radio-option-border-color:var(--red-alert-100);--radio-option-background-color:var(--axa-red-4);--radio-option-color-title:var(--neutral-80)}.af-card-radio-option:has(input:checked){--radio-option-background-color:var(--axa-blue-4);--radio-option-border-color:var(--axa-blue-100)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/Form/Radio/CardRadioOption/CardRadioOptionCommon.scss","../../../../src/Form/Radio/CardRadioOption/CardRadioOptionApollo.scss","../../../../src/Form/Radio/CardRadioOption/CardRadioOptionApollo.scss%23sass"],"names":[],"mappings":"AAEA,sBACE,+BAAA,CCDF,4CAAA,CDSE,kBAAA,CAIA,qDAAA,CANA,
|
|
1
|
+
{"version":3,"sources":["../../../../src/Form/Radio/CardRadioOption/CardRadioOptionCommon.scss","../../../../src/Form/Radio/CardRadioOption/CardRadioOptionApollo.scss","../../../../src/Form/Radio/CardRadioOption/CardRadioOptionApollo.scss%23sass"],"names":[],"mappings":"AAEA,sBACE,+BAAA,CCDF,4CAAA,CDSE,kBAAA,CAIA,qDAAA,CANA,+CAAA,CAUA,cAAA,CAZA,YAAA,CAGA,qBAAA,CAGA,2BAAA,CADA,6BAAA,CAIA,+EAAA,CAEA,wDAAA,CAVA,YAAA,CAFA,iBAAA,CAQA,iBCEF,CDKE,mGAGE,+BAAA,CACA,+CCLJ,CDQE,6BAIE,qCAAA,CAFA,6CAAA,CACA,eAAA,CAFA,QCHJ,CDQI,uBANF,6BCCA,6CACA,CACF,CDQE,yCACE,+BCNJ,CDQI,4JAGE,+BCRN,CDWI,sECTJ,eACA,CDaE,+BAIE,kBAAA,CAHA,YAAA,CACA,qBAAA,CACA,WAAA,CAGA,2BAAA,CADA,6BAAA,CAEA,iBCXJ,CDcE,mEAKE,wCAAA,CAFA,6CAAA,CACA,eAAA,CAFA,QCVJ,CDeI,uBAPF,mEAQI,cCZJ,CACF,CDeE,kCACE,kBCbJ,CDeI,iEACE,sBCbN,CDgBI,4CACE,QCdN,CDkBE,+BACE,mCChBJ,CDkBI,uBAHF,+BAII,kCCfJ,CACF,CC3EA,sBACE,8CAAA,CACA,8CAAA,CACA,+CAAA,CACA,qDAAA,CACA,4CD8EF,CC5EE,4BACE,+CD8EJ,CC3EE,kCACE,qDD6EJ,CC3EI,iEACE,qDD6EN,CC1EI,4CACE,+CD4EN,CCxEE,uEACE,6CD0EJ,CCvEE,wDACE,gDAAA,CACA,gDAAA,CACA,4CDyEJ,CCtEE,yCACE,iDAAA,CACA,+CDwEJ","file":"CardRadioOptionApollo.css","sourcesContent":["@use \"../../../common/breakpoints\";\n\n.af-card-radio-option {\n --radio-option-border-width: 1px;\n --radio-option-background-color: var(--white);\n\n position: relative;\n display: flex;\n padding: 1rem;\n border-radius: var(--radio-option-border-radius);\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n gap: var(--radio-option-gap);\n text-align: center;\n background-color: var(--radio-option-background-color);\n outline: var(--radio-option-border-width) solid\n var(--radio-option-border-color);\n outline-offset: calc(-1 * var(--radio-option-border-width));\n cursor: pointer;\n\n &:hover,\n &:focus-visible,\n &:focus-within {\n --radio-option-border-width: 2px;\n --radio-option-border-color: var(--axa-blue-100);\n }\n\n &__label {\n margin: 0;\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--radio-option-color-title);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n }\n\n &:has(input:checked) {\n --radio-option-border-width: 2px;\n\n &:hover,\n &:focus-visible,\n &:focus-within {\n --radio-option-border-width: 3px;\n }\n\n & .af-card-radio-option__label {\n font-weight: 600;\n }\n }\n\n &__content {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n align-items: center;\n justify-content: space-between;\n gap: var(--radio-option-gap);\n text-align: center;\n }\n\n &__description,\n &__subtitle {\n margin: 0;\n font-size: calc(14 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--radio-option-color-subtitle);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n font-size: 1rem;\n }\n }\n\n &--horizontal {\n flex-direction: row;\n\n & .af-card-radio-option__content {\n align-items: flex-start;\n }\n\n & .af-radio {\n order: -1;\n }\n }\n\n & .af-icon {\n --icon-size: var(--icon-size-medium);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n --icon-size: var(--icon-size-large);\n }\n }\n}\n","@use \"CardRadioOptionCommon\";\n\n.af-card-radio-option {\n --radio-option-border-color: var(--axa-blue-65);\n --radio-option-color-title: var(--axa-blue-100);\n --radio-option-color-subtitle: var(--neutral-80);\n --radio-option-gap: calc(8 / var(--font-size-base) * 1rem);\n --radio-option-border-radius: var(--radius-8);\n\n &:hover {\n --radio-option-border-color: var(--axa-blue-100);\n }\n\n &--horizontal {\n --radio-option-gap: calc(8 / var(--font-size-base) * 1rem);\n\n & .af-card-radio-option__content {\n --radio-option-gap: calc(4 / var(--font-size-base) * 1rem);\n }\n\n & .af-radio {\n margin-right: calc(8 / var(--font-size-base) * 1rem);\n }\n }\n\n &:not(&--horizontal) .af-radio {\n margin-top: calc(8 / var(--font-size-base) * 1rem);\n }\n\n &--invalid:not(:has(input:checked)) {\n --radio-option-border-color: var(--red-alert-100);\n --radio-option-background-color: var(--axa-red-4);\n --radio-option-color-title: var(--neutral-80);\n }\n\n &:has(input:checked) {\n --radio-option-background-color: var(--axa-blue-4);\n --radio-option-border-color: var(--axa-blue-100);\n }\n}\n","@use \"CardRadioOptionCommon\";\n\n.af-card-radio-option {\n --radio-option-border-color: var(--axa-blue-65);\n --radio-option-color-title: var(--axa-blue-100);\n --radio-option-color-subtitle: var(--neutral-80);\n --radio-option-gap: calc(8 / var(--font-size-base) * 1rem);\n --radio-option-border-radius: var(--radius-8);\n\n &:hover {\n --radio-option-border-color: var(--axa-blue-100);\n }\n\n &--horizontal {\n --radio-option-gap: calc(8 / var(--font-size-base) * 1rem);\n\n & .af-card-radio-option__content {\n --radio-option-gap: calc(4 / var(--font-size-base) * 1rem);\n }\n\n & .af-radio {\n margin-right: calc(8 / var(--font-size-base) * 1rem);\n }\n }\n\n &:not(&--horizontal) .af-radio {\n margin-top: calc(8 / var(--font-size-base) * 1rem);\n }\n\n &--invalid:not(:has(input:checked)) {\n --radio-option-border-color: var(--red-alert-100);\n --radio-option-background-color: var(--axa-red-4);\n --radio-option-color-title: var(--neutral-80);\n }\n\n &:has(input:checked) {\n --radio-option-background-color: var(--axa-blue-4);\n --radio-option-border-color: var(--axa-blue-100);\n }\n}\n"]}
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
--radio-option-color-title: var(--axa-blue-100);
|
|
6
6
|
--radio-option-color-subtitle: var(--neutral-80);
|
|
7
7
|
--radio-option-gap: calc(8 / var(--font-size-base) * 1rem);
|
|
8
|
+
--radio-option-border-radius: var(--radius-8);
|
|
8
9
|
|
|
9
10
|
&:hover {
|
|
10
11
|
--radio-option-border-color: var(--axa-blue-100);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-card-radio-option{--radio-option-border-width:1px;--radio-option-background-color:var(--white);align-items:center;background-color:var(--radio-option-background-color);border-radius:
|
|
1
|
+
.af-card-radio-option{--radio-option-border-width:1px;--radio-option-background-color:var(--white);align-items:center;background-color:var(--radio-option-background-color);border-radius:var(--radio-option-border-radius);cursor:pointer;display:flex;flex-direction:column;gap:var(--radio-option-gap);justify-content:space-between;outline:var(--radio-option-border-width) solid var(--radio-option-border-color);outline-offset:calc(var(--radio-option-border-width)*-1);padding:1rem;position:relative;text-align:center}.af-card-radio-option:focus-visible,.af-card-radio-option:focus-within,.af-card-radio-option:hover{--radio-option-border-width:2px;--radio-option-border-color:var(--axa-blue-100)}.af-card-radio-option__label{color:var(--radio-option-color-title);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400;margin:0}@media (width > 667px){.af-card-radio-option__label{font-size:calc(18/var(--font-size-base)*1rem)}}.af-card-radio-option:has(input:checked){--radio-option-border-width:2px}.af-card-radio-option:has(input:checked):focus-visible,.af-card-radio-option:has(input:checked):focus-within,.af-card-radio-option:has(input:checked):hover{--radio-option-border-width:3px}.af-card-radio-option:has(input:checked) .af-card-radio-option__label{font-weight:600}.af-card-radio-option__content{align-items:center;display:flex;flex-direction:column;flex-grow:1;gap:var(--radio-option-gap);justify-content:space-between;text-align:center}.af-card-radio-option__description,.af-card-radio-option__subtitle{color:var(--radio-option-color-subtitle);font-size:calc(14/var(--font-size-base)*1rem);font-weight:400;margin:0}@media (width > 667px){.af-card-radio-option__description,.af-card-radio-option__subtitle{font-size:1rem}}.af-card-radio-option--horizontal{flex-direction:row}.af-card-radio-option--horizontal .af-card-radio-option__content{align-items:flex-start}.af-card-radio-option--horizontal .af-radio{order:-1}.af-card-radio-option .af-icon{--icon-size:var(--icon-size-medium)}@media (width > 667px){.af-card-radio-option .af-icon{--icon-size:var(--icon-size-large)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/Form/Radio/CardRadioOption/CardRadioOptionCommon.scss%23sass","../../../../src/Form/Radio/CardRadioOption/CardRadioOptionCommon.scss"],"names":[],"mappings":"AAEA,sBACE,+BAAA,CCDF,4CAAA,CDSE,kBAAA,CAIA,qDAAA,CANA,
|
|
1
|
+
{"version":3,"sources":["../../../../src/Form/Radio/CardRadioOption/CardRadioOptionCommon.scss%23sass","../../../../src/Form/Radio/CardRadioOption/CardRadioOptionCommon.scss"],"names":[],"mappings":"AAEA,sBACE,+BAAA,CCDF,4CAAA,CDSE,kBAAA,CAIA,qDAAA,CANA,+CAAA,CAUA,cAAA,CAZA,YAAA,CAGA,qBAAA,CAGA,2BAAA,CADA,6BAAA,CAIA,+EAAA,CAEA,wDAAA,CAVA,YAAA,CAFA,iBAAA,CAQA,iBCEF,CDKE,mGAGE,+BAAA,CACA,+CCLJ,CDQE,6BAIE,qCAAA,CAFA,6CAAA,CACA,eAAA,CAFA,QCHJ,CDQI,uBANF,6BAOI,6CCLJ,CACF,CDQE,yCACE,+BCNJ,CDQI,4JAGE,+BCRN,CDWI,sEACE,eCTN,CDaE,+BAIE,kBAAA,CAHA,YAAA,CACA,qBAAA,CACA,WAAA,CAGA,2BAAA,CADA,6BAAA,CAEA,iBCXJ,CDcE,mEAKE,wCAAA,CAFA,6CAAA,CACA,eAAA,CAFA,QCVJ,CDeI,uBAPF,mEAQI,cCZJ,CACF,CDeE,kCACE,kBCbJ,CDeI,iEACE,sBCbN,CDgBI,4CACE,QCdN,CDkBE,+BACE,mCChBJ,CDkBI,uBAHF,+BCZA,kCACA,CACF","file":"CardRadioOptionCommon.css","sourcesContent":["@use \"../../../common/breakpoints\";\n\n.af-card-radio-option {\n --radio-option-border-width: 1px;\n --radio-option-background-color: var(--white);\n\n position: relative;\n display: flex;\n padding: 1rem;\n border-radius: var(--radio-option-border-radius);\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n gap: var(--radio-option-gap);\n text-align: center;\n background-color: var(--radio-option-background-color);\n outline: var(--radio-option-border-width) solid\n var(--radio-option-border-color);\n outline-offset: calc(-1 * var(--radio-option-border-width));\n cursor: pointer;\n\n &:hover,\n &:focus-visible,\n &:focus-within {\n --radio-option-border-width: 2px;\n --radio-option-border-color: var(--axa-blue-100);\n }\n\n &__label {\n margin: 0;\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--radio-option-color-title);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n }\n\n &:has(input:checked) {\n --radio-option-border-width: 2px;\n\n &:hover,\n &:focus-visible,\n &:focus-within {\n --radio-option-border-width: 3px;\n }\n\n & .af-card-radio-option__label {\n font-weight: 600;\n }\n }\n\n &__content {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n align-items: center;\n justify-content: space-between;\n gap: var(--radio-option-gap);\n text-align: center;\n }\n\n &__description,\n &__subtitle {\n margin: 0;\n font-size: calc(14 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--radio-option-color-subtitle);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n font-size: 1rem;\n }\n }\n\n &--horizontal {\n flex-direction: row;\n\n & .af-card-radio-option__content {\n align-items: flex-start;\n }\n\n & .af-radio {\n order: -1;\n }\n }\n\n & .af-icon {\n --icon-size: var(--icon-size-medium);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n --icon-size: var(--icon-size-large);\n }\n }\n}\n","@use \"../../../common/breakpoints\";\n\n.af-card-radio-option {\n --radio-option-border-width: 1px;\n --radio-option-background-color: var(--white);\n\n position: relative;\n display: flex;\n padding: 1rem;\n border-radius: var(--radio-option-border-radius);\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n gap: var(--radio-option-gap);\n text-align: center;\n background-color: var(--radio-option-background-color);\n outline: var(--radio-option-border-width) solid\n var(--radio-option-border-color);\n outline-offset: calc(-1 * var(--radio-option-border-width));\n cursor: pointer;\n\n &:hover,\n &:focus-visible,\n &:focus-within {\n --radio-option-border-width: 2px;\n --radio-option-border-color: var(--axa-blue-100);\n }\n\n &__label {\n margin: 0;\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--radio-option-color-title);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n }\n\n &:has(input:checked) {\n --radio-option-border-width: 2px;\n\n &:hover,\n &:focus-visible,\n &:focus-within {\n --radio-option-border-width: 3px;\n }\n\n & .af-card-radio-option__label {\n font-weight: 600;\n }\n }\n\n &__content {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n align-items: center;\n justify-content: space-between;\n gap: var(--radio-option-gap);\n text-align: center;\n }\n\n &__description,\n &__subtitle {\n margin: 0;\n font-size: calc(14 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--radio-option-color-subtitle);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n font-size: 1rem;\n }\n }\n\n &--horizontal {\n flex-direction: row;\n\n & .af-card-radio-option__content {\n align-items: flex-start;\n }\n\n & .af-radio {\n order: -1;\n }\n }\n\n & .af-icon {\n --icon-size: var(--icon-size-medium);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n --icon-size: var(--icon-size-large);\n }\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-card-radio-option{--radio-option-border-width:1px;--radio-option-background-color:var(--white);align-items:center;background-color:var(--radio-option-background-color);border-radius:
|
|
1
|
+
.af-card-radio-option{--radio-option-border-width:1px;--radio-option-background-color:var(--white);align-items:center;background-color:var(--radio-option-background-color);border-radius:var(--radio-option-border-radius);cursor:pointer;display:flex;flex-direction:column;gap:var(--radio-option-gap);justify-content:space-between;outline:var(--radio-option-border-width) solid var(--radio-option-border-color);outline-offset:calc(var(--radio-option-border-width)*-1);padding:1rem;position:relative;text-align:center}.af-card-radio-option:focus-visible,.af-card-radio-option:focus-within,.af-card-radio-option:hover{--radio-option-border-width:2px;--radio-option-border-color:var(--axa-blue-100)}.af-card-radio-option__label{color:var(--radio-option-color-title);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400;margin:0}@media (width > 667px){.af-card-radio-option__label{font-size:calc(18/var(--font-size-base)*1rem)}}.af-card-radio-option:has(input:checked){--radio-option-border-width:2px}.af-card-radio-option:has(input:checked):focus-visible,.af-card-radio-option:has(input:checked):focus-within,.af-card-radio-option:has(input:checked):hover{--radio-option-border-width:3px}.af-card-radio-option:has(input:checked) .af-card-radio-option__label{font-weight:600}.af-card-radio-option__content{align-items:center;display:flex;flex-direction:column;flex-grow:1;gap:var(--radio-option-gap);justify-content:space-between;text-align:center}.af-card-radio-option__description,.af-card-radio-option__subtitle{color:var(--radio-option-color-subtitle);font-size:calc(14/var(--font-size-base)*1rem);font-weight:400;margin:0}@media (width > 667px){.af-card-radio-option__description,.af-card-radio-option__subtitle{font-size:1rem}}.af-card-radio-option--horizontal{flex-direction:row}.af-card-radio-option--horizontal .af-card-radio-option__content{align-items:flex-start}.af-card-radio-option--horizontal .af-radio{order:-1}.af-card-radio-option .af-icon{--icon-size:var(--icon-size-medium)}@media (width > 667px){.af-card-radio-option .af-icon{--icon-size:var(--icon-size-large)}}.af-card-radio-option{--radio-option-border-color:var(--color-gray-700);--radio-option-color-title:var(--color-gray-900);--radio-option-color-subtitle:var(--color-gray-700);--radio-option-gap:calc(8/var(--font-size-base)*1rem);--radio-option-border-radius:var(--radius-4)}.af-card-radio-option:hover{--radio-option-border-color:var(--color-axa)}.af-card-radio-option:not(.af-card-radio-option--horizontal) .af-radio{left:calc(12/var(--font-size-base)*1rem);position:absolute;top:calc(12/var(--font-size-base)*1rem)}@media (width > 667px){.af-card-radio-option:not(.af-card-radio-option--horizontal) .af-radio{left:calc(16/var(--font-size-base)*1rem);top:calc(16/var(--font-size-base)*1rem)}}.af-card-radio-option .af-card-radio-option__content{--radio-option-gap:calc(4/var(--font-size-base)*1rem)}.af-card-radio-option--horizontal{column-gap:calc(12/var(--font-size-base)*1rem)}.af-card-radio-option--invalid:not(:has(input:checked)){--radio-option-border-color:var(--color-red-700)}.af-card-radio-option:has(input:checked){--radio-option-background-color:var(--color-blue-2);--radio-option-border-color:var(--color-axa)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/Form/Radio/CardRadioOption/CardRadioOptionCommon.scss","../../../../src/Form/Radio/CardRadioOption/CardRadioOptionLF.scss","../../../../src/Form/Radio/CardRadioOption/CardRadioOptionLF.scss%23sass"],"names":[],"mappings":"AAEA,sBCDA,+BDEE,CACA,4CAAA,CAOA,kBAAA,CAIA,qDAAA,CANA,
|
|
1
|
+
{"version":3,"sources":["../../../../src/Form/Radio/CardRadioOption/CardRadioOptionCommon.scss","../../../../src/Form/Radio/CardRadioOption/CardRadioOptionLF.scss","../../../../src/Form/Radio/CardRadioOption/CardRadioOptionLF.scss%23sass"],"names":[],"mappings":"AAEA,sBCDA,+BDEE,CACA,4CAAA,CAOA,kBAAA,CAIA,qDAAA,CANA,+CAAA,CAUA,cAAA,CAZA,YAAA,CAGA,qBAAA,CAGA,2BAAA,CADA,6BAAA,CAIA,+EAAA,CAEA,wDAAA,CAVA,YAAA,CCLF,iBAAA,CDWE,iBCEF,CDKE,mGAGE,+BAAA,CACA,+CCLJ,CDQE,6BAIE,qCAAA,CAFA,6CAAA,CACA,eAAA,CAFA,QCHJ,CDQI,uBANF,6BCCA,6CACA,CACF,CDQE,yCACE,+BCNJ,CDQI,4JAGE,+BCRN,CDWI,sEACE,eCTN,CDaE,+BAIE,kBAAA,CAHA,YAAA,CACA,qBAAA,CACA,WAAA,CAGA,2BAAA,CADA,6BAAA,CAEA,iBCXJ,CDcE,mEAKE,wCAAA,CAFA,6CAAA,CACA,eAAA,CAFA,QCVJ,CDeI,uBAPF,mEAQI,cCZJ,CACF,CDeE,kCACE,kBCbJ,CDeI,iEACE,sBCbN,CDgBI,4CACE,QCdN,CDkBE,+BACE,mCChBJ,CDkBI,uBAHF,+BAII,kCCfJ,CACF,CC1EA,sBACE,iDAAA,CACA,gDAAA,CACA,mDAAA,CACA,qDAAA,CACA,4CD6EF,CC3EE,4BACE,4CD6EJ,CC1EE,uEAGE,wCAAA,CAFA,iBAAA,CACA,uCD6EJ,CC1EI,uBALF,uEAOI,wCAAA,CADA,uCD8EJ,CACF,CC1EE,qDACE,qDD4EJ,CCzEE,kCACE,8CD2EJ,CCxEE,wDACE,gDD0EJ,CCvEE,yCACE,mDAAA,CACA,4CDyEJ","file":"CardRadioOptionLF.css","sourcesContent":["@use \"../../../common/breakpoints\";\n\n.af-card-radio-option {\n --radio-option-border-width: 1px;\n --radio-option-background-color: var(--white);\n\n position: relative;\n display: flex;\n padding: 1rem;\n border-radius: var(--radio-option-border-radius);\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n gap: var(--radio-option-gap);\n text-align: center;\n background-color: var(--radio-option-background-color);\n outline: var(--radio-option-border-width) solid\n var(--radio-option-border-color);\n outline-offset: calc(-1 * var(--radio-option-border-width));\n cursor: pointer;\n\n &:hover,\n &:focus-visible,\n &:focus-within {\n --radio-option-border-width: 2px;\n --radio-option-border-color: var(--axa-blue-100);\n }\n\n &__label {\n margin: 0;\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--radio-option-color-title);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n }\n\n &:has(input:checked) {\n --radio-option-border-width: 2px;\n\n &:hover,\n &:focus-visible,\n &:focus-within {\n --radio-option-border-width: 3px;\n }\n\n & .af-card-radio-option__label {\n font-weight: 600;\n }\n }\n\n &__content {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n align-items: center;\n justify-content: space-between;\n gap: var(--radio-option-gap);\n text-align: center;\n }\n\n &__description,\n &__subtitle {\n margin: 0;\n font-size: calc(14 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--radio-option-color-subtitle);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n font-size: 1rem;\n }\n }\n\n &--horizontal {\n flex-direction: row;\n\n & .af-card-radio-option__content {\n align-items: flex-start;\n }\n\n & .af-radio {\n order: -1;\n }\n }\n\n & .af-icon {\n --icon-size: var(--icon-size-medium);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n --icon-size: var(--icon-size-large);\n }\n }\n}\n","@use \"CardRadioOptionCommon\";\n@use \"../../../common/breakpoints\";\n\n.af-card-radio-option {\n --radio-option-border-color: var(--color-gray-700);\n --radio-option-color-title: var(--color-gray-900);\n --radio-option-color-subtitle: var(--color-gray-700);\n --radio-option-gap: calc(8 / var(--font-size-base) * 1rem);\n --radio-option-border-radius: var(--radius-4);\n\n &:hover {\n --radio-option-border-color: var(--color-axa);\n }\n\n &:not(&--horizontal) .af-radio {\n position: absolute;\n top: calc(12 / var(--font-size-base) * 1rem);\n left: calc(12 / var(--font-size-base) * 1rem);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n top: calc(16 / var(--font-size-base) * 1rem);\n left: calc(16 / var(--font-size-base) * 1rem);\n }\n }\n\n & .af-card-radio-option__content {\n --radio-option-gap: calc(4 / var(--font-size-base) * 1rem);\n }\n\n &--horizontal {\n column-gap: calc(12 / var(--font-size-base) * 1rem);\n }\n\n &--invalid:not(:has(input:checked)) {\n --radio-option-border-color: var(--color-red-700);\n }\n\n &:has(input:checked) {\n --radio-option-background-color: var(--color-blue-2);\n --radio-option-border-color: var(--color-axa);\n }\n}\n","@use \"CardRadioOptionCommon\";\n@use \"../../../common/breakpoints\";\n\n.af-card-radio-option {\n --radio-option-border-color: var(--color-gray-700);\n --radio-option-color-title: var(--color-gray-900);\n --radio-option-color-subtitle: var(--color-gray-700);\n --radio-option-gap: calc(8 / var(--font-size-base) * 1rem);\n --radio-option-border-radius: var(--radius-4);\n\n &:hover {\n --radio-option-border-color: var(--color-axa);\n }\n\n &:not(&--horizontal) .af-radio {\n position: absolute;\n top: calc(12 / var(--font-size-base) * 1rem);\n left: calc(12 / var(--font-size-base) * 1rem);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n top: calc(16 / var(--font-size-base) * 1rem);\n left: calc(16 / var(--font-size-base) * 1rem);\n }\n }\n\n & .af-card-radio-option__content {\n --radio-option-gap: calc(4 / var(--font-size-base) * 1rem);\n }\n\n &--horizontal {\n column-gap: calc(12 / var(--font-size-base) * 1rem);\n }\n\n &--invalid:not(:has(input:checked)) {\n --radio-option-border-color: var(--color-red-700);\n }\n\n &:has(input:checked) {\n --radio-option-background-color: var(--color-blue-2);\n --radio-option-border-color: var(--color-axa);\n }\n}\n"]}
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
--radio-option-color-title: var(--color-gray-900);
|
|
7
7
|
--radio-option-color-subtitle: var(--color-gray-700);
|
|
8
8
|
--radio-option-gap: calc(8 / var(--font-size-base) * 1rem);
|
|
9
|
+
--radio-option-border-radius: var(--radius-4);
|
|
9
10
|
|
|
10
11
|
&:hover {
|
|
11
12
|
--radio-option-border-color: var(--color-axa);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-
|
|
1
|
+
.af-form__textarea{--textarea-box-shadow-width:1px;background-color:var(--textarea-background-color);border:none;border-radius:var(--textarea-border-radius);box-shadow:0 0 0 var(--textarea-box-shadow-width) var(--textarea-box-shadow-color) inset;color:var(--textarea-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:600;line-height:125%;outline:none;padding:calc(16/var(--font-size-base)*1rem);width:100%}.af-form__textarea:is(:focus-visible,:hover,:active,:focus,[aria-invalid=true]):not(:disabled){--textarea-box-shadow-width:2px}@media (width > 1023px){.af-form__textarea{font-size:calc(18/var(--font-size-base)*1rem)}}.af-form__textarea::placeholder{color:var(--textarea-placeholder-color);font-weight:400}.af-form__textarea{--textarea-border-radius:var(--radius-8);--textarea-placeholder-color:var(--neutral-80);--textarea-background-color:var(--white);--textarea-color:var(--axa-blue-100);--textarea-box-shadow-color:var(--axa-blue-65)}.af-form__textarea:is(:focus-visible,:hover,:active,:focus,:not(:placeholder-shown)){--textarea-box-shadow-color:var(--axa-blue-100)}.af-form__textarea:disabled{--textarea-background-color:var(--neutral-5);--textarea-box-shadow-color:var(--neutral-50);--textarea-placeholder-color:var(--neutral-50);--textarea-color:var(--neutral-80)}.af-form__textarea[aria-invalid=true]{--textarea-box-shadow-color:var(--red-alert-100)}.af-form__textarea[aria-invalid=true]:is(:focus-visible,:hover,:active,:focus){--textarea-box-shadow-width:3px}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Form/TextArea/TextAreaCommon.scss","../../../src/Form/TextArea/TextAreaApollo.scss","../../../src/Form/TextArea/TextAreaApollo.scss%23sass"],"names":[],"mappings":"AAEA,
|
|
1
|
+
{"version":3,"sources":["../../../src/Form/TextArea/TextAreaCommon.scss","../../../src/Form/TextArea/TextAreaApollo.scss","../../../src/Form/TextArea/TextAreaApollo.scss%23sass"],"names":[],"mappings":"AAEA,mBCDA,+BDEE,CAUA,iDAAA,CANA,WAAA,CACA,2CAAA,CAMA,wFAAA,CAFA,2BAAA,CAHA,6CAAA,CACA,eAAA,CACA,gBAAA,CAKA,YAAA,CCbF,2CAAA,CDEE,UCQF,CDKE,+FAGE,+BCLJ,CDQE,wBAtBF,mBCiBE,6CACA,CACF,CDOE,gCAEE,uCAAA,CADA,eCJJ,CCtBA,mBDyBA,wCAAA,CCvBE,8CAAA,CACA,wCAAA,CACA,oCAAA,CACA,8CDyBF,CCvBE,qFACE,+CDyBJ,CCtBE,4BACE,4CAAA,CACA,6CAAA,CACA,8CAAA,CACA,kCDwBJ,CCrBE,sCACE,gDDuBJ,CCrBI,+EACE,+BDuBN","file":"TextAreaApollo.css","sourcesContent":["@use \"../../common/breakpoints\";\n\n.af-form__textarea {\n --textarea-box-shadow-width: 1px;\n\n width: 100%;\n padding: calc(16 / var(--font-size-base) * 1rem);\n border: none;\n border-radius: var(--textarea-border-radius);\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 600;\n line-height: 125%;\n color: var(--textarea-color);\n background-color: var(--textarea-background-color);\n box-shadow: 0 0 0 var(--textarea-box-shadow-width)\n var(--textarea-box-shadow-color) inset;\n outline: none;\n\n &:is(:focus-visible, :hover, :active, :focus, [aria-invalid=\"true\"]):not(\n :disabled\n ) {\n --textarea-box-shadow-width: 2px;\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n\n &::placeholder {\n font-weight: 400;\n color: var(--textarea-placeholder-color);\n }\n}\n","@use \"../../common/breakpoints\";\n@use \"TextAreaCommon\";\n\n.af-form__textarea {\n --textarea-border-radius: var(--radius-8);\n --textarea-placeholder-color: var(--neutral-80);\n --textarea-background-color: var(--white);\n --textarea-color: var(--axa-blue-100);\n --textarea-box-shadow-color: var(--axa-blue-65);\n\n &:is(:focus-visible, :hover, :active, :focus, :not(:placeholder-shown)) {\n --textarea-box-shadow-color: var(--axa-blue-100);\n }\n\n &:disabled {\n --textarea-background-color: var(--neutral-5);\n --textarea-box-shadow-color: var(--neutral-50);\n --textarea-placeholder-color: var(--neutral-50);\n --textarea-color: var(--neutral-80);\n }\n\n &[aria-invalid=\"true\"] {\n --textarea-box-shadow-color: var(--red-alert-100);\n\n &:is(:focus-visible, :hover, :active, :focus) {\n --textarea-box-shadow-width: 3px;\n }\n }\n}\n","@use \"../../common/breakpoints\";\n@use \"TextAreaCommon\";\n\n.af-form__textarea {\n --textarea-border-radius: var(--radius-8);\n --textarea-placeholder-color: var(--neutral-80);\n --textarea-background-color: var(--white);\n --textarea-color: var(--axa-blue-100);\n --textarea-box-shadow-color: var(--axa-blue-65);\n\n &:is(:focus-visible, :hover, :active, :focus, :not(:placeholder-shown)) {\n --textarea-box-shadow-color: var(--axa-blue-100);\n }\n\n &:disabled {\n --textarea-background-color: var(--neutral-5);\n --textarea-box-shadow-color: var(--neutral-50);\n --textarea-placeholder-color: var(--neutral-50);\n --textarea-color: var(--neutral-80);\n }\n\n &[aria-invalid=\"true\"] {\n --textarea-box-shadow-color: var(--red-alert-100);\n\n &:is(:focus-visible, :hover, :active, :focus) {\n --textarea-box-shadow-width: 3px;\n }\n }\n}\n"]}
|
|
@@ -1,44 +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(--radius-8);
|
|
6
|
+
--textarea-placeholder-color: var(--neutral-80);
|
|
7
|
+
--textarea-background-color: var(--white);
|
|
8
|
+
--textarea-color: var(--axa-blue-100);
|
|
9
|
+
--textarea-box-shadow-color: var(--axa-blue-65);
|
|
11
10
|
|
|
12
|
-
&:hover,
|
|
13
|
-
|
|
14
|
-
&:not(:placeholder-shown) {
|
|
15
|
-
--input-textarea-box-shadow-color: var(--axa-blue-100);
|
|
16
|
-
--input-textarea-box-shadow-size: 2px;
|
|
11
|
+
&:is(:focus-visible, :hover, :active, :focus, :not(:placeholder-shown)) {
|
|
12
|
+
--textarea-box-shadow-color: var(--axa-blue-100);
|
|
17
13
|
}
|
|
18
14
|
|
|
19
|
-
|
|
20
|
-
--
|
|
21
|
-
--
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
&:focus {
|
|
25
|
-
--input-textarea-box-shadow-size: 3px;
|
|
26
|
-
}
|
|
15
|
+
&:disabled {
|
|
16
|
+
--textarea-background-color: var(--neutral-5);
|
|
17
|
+
--textarea-box-shadow-color: var(--neutral-50);
|
|
18
|
+
--textarea-placeholder-color: var(--neutral-50);
|
|
19
|
+
--textarea-color: var(--neutral-80);
|
|
27
20
|
}
|
|
28
21
|
|
|
29
|
-
|
|
30
|
-
--
|
|
31
|
-
--input-textarea-box-shadow-color: var(--neutral-50);
|
|
32
|
-
--input-textarea-placeholder-color: var(--neutral-50);
|
|
33
|
-
--input-textarea-color: var(--neutral-80);
|
|
34
|
-
--input-textarea-box-shadow-size: 1px;
|
|
22
|
+
&[aria-invalid="true"] {
|
|
23
|
+
--textarea-box-shadow-color: var(--red-alert-100);
|
|
35
24
|
|
|
36
|
-
&:hover {
|
|
37
|
-
--
|
|
25
|
+
&:is(:focus-visible, :hover, :active, :focus) {
|
|
26
|
+
--textarea-box-shadow-width: 3px;
|
|
38
27
|
}
|
|
39
28
|
}
|
|
40
|
-
|
|
41
|
-
&:not(:placeholder-shown):hover {
|
|
42
|
-
--input-textarea-box-shadow-size: 3px;
|
|
43
|
-
}
|
|
44
29
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-
|
|
1
|
+
.af-form__textarea{--textarea-box-shadow-width:1px;background-color:var(--textarea-background-color);border:none;border-radius:var(--textarea-border-radius);box-shadow:0 0 0 var(--textarea-box-shadow-width) var(--textarea-box-shadow-color) inset;color:var(--textarea-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:600;line-height:125%;outline:none;padding:calc(16/var(--font-size-base)*1rem);width:100%}.af-form__textarea:is(:focus-visible,:hover,:active,:focus,[aria-invalid=true]):not(:disabled){--textarea-box-shadow-width:2px}@media (width > 1023px){.af-form__textarea{font-size:calc(18/var(--font-size-base)*1rem)}}.af-form__textarea::placeholder{color:var(--textarea-placeholder-color);font-weight:400}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Form/TextArea/TextAreaCommon.scss%23sass","../../../src/Form/TextArea/TextAreaCommon.scss"],"names":[],"mappings":"AAEA,
|
|
1
|
+
{"version":3,"sources":["../../../src/Form/TextArea/TextAreaCommon.scss%23sass","../../../src/Form/TextArea/TextAreaCommon.scss"],"names":[],"mappings":"AAEA,mBACE,+BAAA,CAUA,iDAAA,CANA,WAAA,CACA,2CAAA,CAMA,wFAAA,CAFA,2BAAA,CAHA,6CAAA,CACA,eAAA,CACA,gBAAA,CAKA,YAAA,CAVA,2CAAA,CCJF,UAWA,CDKE,+FAGE,+BCLJ,CDQE,wBAtBF,mBAuBI,6CCLF,CACF,CDOE,gCAEE,uCAAA,CADA,eCJJ","file":"TextAreaCommon.css","sourcesContent":["@use \"../../common/breakpoints\";\n\n.af-form__textarea {\n --textarea-box-shadow-width: 1px;\n\n width: 100%;\n padding: calc(16 / var(--font-size-base) * 1rem);\n border: none;\n border-radius: var(--textarea-border-radius);\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 600;\n line-height: 125%;\n color: var(--textarea-color);\n background-color: var(--textarea-background-color);\n box-shadow: 0 0 0 var(--textarea-box-shadow-width)\n var(--textarea-box-shadow-color) inset;\n outline: none;\n\n &:is(:focus-visible, :hover, :active, :focus, [aria-invalid=\"true\"]):not(\n :disabled\n ) {\n --textarea-box-shadow-width: 2px;\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n\n &::placeholder {\n font-weight: 400;\n color: var(--textarea-placeholder-color);\n }\n}\n","@use \"../../common/breakpoints\";\n\n.af-form__textarea {\n --textarea-box-shadow-width: 1px;\n\n width: 100%;\n padding: calc(16 / var(--font-size-base) * 1rem);\n border: none;\n border-radius: var(--textarea-border-radius);\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 600;\n line-height: 125%;\n color: var(--textarea-color);\n background-color: var(--textarea-background-color);\n box-shadow: 0 0 0 var(--textarea-box-shadow-width)\n var(--textarea-box-shadow-color) inset;\n outline: none;\n\n &:is(:focus-visible, :hover, :active, :focus, [aria-invalid=\"true\"]):not(\n :disabled\n ) {\n --textarea-box-shadow-width: 2px;\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n\n &::placeholder {\n font-weight: 400;\n color: var(--textarea-placeholder-color);\n }\n}\n"]}
|
|
@@ -1,27 +1,33 @@
|
|
|
1
1
|
@use "../../common/breakpoints";
|
|
2
2
|
|
|
3
|
-
.af-
|
|
3
|
+
.af-form__textarea {
|
|
4
|
+
--textarea-box-shadow-width: 1px;
|
|
5
|
+
|
|
4
6
|
width: 100%;
|
|
5
|
-
min-height: calc(56 / var(--font-size-base) * 1rem);
|
|
6
7
|
padding: calc(16 / var(--font-size-base) * 1rem);
|
|
7
8
|
border: none;
|
|
8
|
-
border-radius: var(--
|
|
9
|
-
font: var(--font-
|
|
10
|
-
font-size: var(--input-textarea-font-size);
|
|
9
|
+
border-radius: var(--textarea-border-radius);
|
|
10
|
+
font-size: calc(16 / var(--font-size-base) * 1rem);
|
|
11
11
|
font-weight: 600;
|
|
12
12
|
line-height: 125%;
|
|
13
|
-
color: var(--
|
|
14
|
-
background-color: var(--
|
|
15
|
-
box-shadow: 0 0 0 var(--
|
|
16
|
-
var(--
|
|
13
|
+
color: var(--textarea-color);
|
|
14
|
+
background-color: var(--textarea-background-color);
|
|
15
|
+
box-shadow: 0 0 0 var(--textarea-box-shadow-width)
|
|
16
|
+
var(--textarea-box-shadow-color) inset;
|
|
17
17
|
outline: none;
|
|
18
18
|
|
|
19
|
+
&:is(:focus-visible, :hover, :active, :focus, [aria-invalid="true"]):not(
|
|
20
|
+
:disabled
|
|
21
|
+
) {
|
|
22
|
+
--textarea-box-shadow-width: 2px;
|
|
23
|
+
}
|
|
24
|
+
|
|
19
25
|
@media (width > #{breakpoints.$breakpoint-md}) {
|
|
20
26
|
font-size: calc(18 / var(--font-size-base) * 1rem);
|
|
21
27
|
}
|
|
22
28
|
|
|
23
29
|
&::placeholder {
|
|
24
30
|
font-weight: 400;
|
|
25
|
-
color: var(--
|
|
31
|
+
color: var(--textarea-placeholder-color);
|
|
26
32
|
}
|
|
27
33
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-
|
|
1
|
+
.af-form__textarea{--textarea-box-shadow-width:1px;background-color:var(--textarea-background-color);border:none;border-radius:var(--textarea-border-radius);box-shadow:0 0 0 var(--textarea-box-shadow-width) var(--textarea-box-shadow-color) inset;color:var(--textarea-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:600;line-height:125%;outline:none;padding:calc(16/var(--font-size-base)*1rem);width:100%}.af-form__textarea:is(:focus-visible,:hover,:active,:focus,[aria-invalid=true]):not(:disabled){--textarea-box-shadow-width:2px}@media (width > 1023px){.af-form__textarea{font-size:calc(18/var(--font-size-base)*1rem)}}.af-form__textarea::placeholder{color:var(--textarea-placeholder-color);font-weight:400}.af-form__textarea{--textarea-border-radius:var(--default-border-radius);--textarea-placeholder-color:var(--color-gray-700);--textarea-background-color:var(--color-white);--textarea-color:var(--color-gray-900);--textarea-box-shadow-color:var(--color-gray-700)}.af-form__textarea:is(:focus-visible,:hover,:active,:focus,:not(:placeholder-shown)){--textarea-box-shadow-color:var(--color-axa)}.af-form__textarea:disabled{--textarea-background-color:var(--color-gray-200);--textarea-box-shadow-color:var(--color-gray-400);--textarea-placeholder-color:var(--color-gray-500);--textarea-color:var(--color-gray-700)}.af-form__textarea[aria-invalid=true]{--textarea-box-shadow-color:var(--color-red-700)}.af-form__textarea[aria-invalid=true]:is(:focus-visible,:hover,:active,:focus){--textarea-box-shadow-width:3px}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Form/TextArea/TextAreaCommon.scss","../../../src/Form/TextArea/TextAreaLF.scss","../../../src/Form/TextArea/TextAreaLF.scss%23sass"],"names":[],"mappings":"AAEA,
|
|
1
|
+
{"version":3,"sources":["../../../src/Form/TextArea/TextAreaCommon.scss","../../../src/Form/TextArea/TextAreaLF.scss","../../../src/Form/TextArea/TextAreaLF.scss%23sass"],"names":[],"mappings":"AAEA,mBCDA,+BDEE,CAUA,iDAAA,CANA,WAAA,CACA,2CAAA,CAMA,wFAAA,CAFA,2BAAA,CAHA,6CAAA,CACA,eAAA,CACA,gBAAA,CAKA,YAAA,CCbF,2CAAA,CDEE,UCQF,CDKE,+FAGE,+BCLJ,CDQE,wBAtBF,mBCiBE,6CACA,CACF,CDOE,gCAEE,uCAAA,CADA,eCJJ,CCtBA,mBDyBA,qDAAA,CCvBE,kDAAA,CACA,8CAAA,CACA,sCAAA,CACA,iDDyBF,CCvBE,qFACE,4CDyBJ,CCtBE,4BACE,iDAAA,CACA,iDAAA,CACA,kDAAA,CACA,sCDwBJ,CCrBE,sCACE,gDDuBJ,CCrBI,+EACE,+BDuBN","file":"TextAreaLF.css","sourcesContent":["@use \"../../common/breakpoints\";\n\n.af-form__textarea {\n --textarea-box-shadow-width: 1px;\n\n width: 100%;\n padding: calc(16 / var(--font-size-base) * 1rem);\n border: none;\n border-radius: var(--textarea-border-radius);\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 600;\n line-height: 125%;\n color: var(--textarea-color);\n background-color: var(--textarea-background-color);\n box-shadow: 0 0 0 var(--textarea-box-shadow-width)\n var(--textarea-box-shadow-color) inset;\n outline: none;\n\n &:is(:focus-visible, :hover, :active, :focus, [aria-invalid=\"true\"]):not(\n :disabled\n ) {\n --textarea-box-shadow-width: 2px;\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n\n &::placeholder {\n font-weight: 400;\n color: var(--textarea-placeholder-color);\n }\n}\n","@use \"../../common/breakpoints\";\n@use \"TextAreaCommon\";\n\n.af-form__textarea {\n --textarea-border-radius: var(--default-border-radius);\n --textarea-placeholder-color: var(--color-gray-700);\n --textarea-background-color: var(--color-white);\n --textarea-color: var(--color-gray-900);\n --textarea-box-shadow-color: var(--color-gray-700);\n\n &:is(:focus-visible, :hover, :active, :focus, :not(:placeholder-shown)) {\n --textarea-box-shadow-color: var(--color-axa);\n }\n\n &:disabled {\n --textarea-background-color: var(--color-gray-200);\n --textarea-box-shadow-color: var(--color-gray-400);\n --textarea-placeholder-color: var(--color-gray-500);\n --textarea-color: var(--color-gray-700);\n }\n\n &[aria-invalid=\"true\"] {\n --textarea-box-shadow-color: var(--color-red-700);\n\n &:is(:focus-visible, :hover, :active, :focus) {\n --textarea-box-shadow-width: 3px;\n }\n }\n}\n","@use \"../../common/breakpoints\";\n@use \"TextAreaCommon\";\n\n.af-form__textarea {\n --textarea-border-radius: var(--default-border-radius);\n --textarea-placeholder-color: var(--color-gray-700);\n --textarea-background-color: var(--color-white);\n --textarea-color: var(--color-gray-900);\n --textarea-box-shadow-color: var(--color-gray-700);\n\n &:is(:focus-visible, :hover, :active, :focus, :not(:placeholder-shown)) {\n --textarea-box-shadow-color: var(--color-axa);\n }\n\n &:disabled {\n --textarea-background-color: var(--color-gray-200);\n --textarea-box-shadow-color: var(--color-gray-400);\n --textarea-placeholder-color: var(--color-gray-500);\n --textarea-color: var(--color-gray-700);\n }\n\n &[aria-invalid=\"true\"] {\n --textarea-box-shadow-color: var(--color-red-700);\n\n &:is(:focus-visible, :hover, :active, :focus) {\n --textarea-box-shadow-width: 3px;\n }\n }\n}\n"]}
|