@axa-fr/design-system-apollo-css 1.0.3-alpha.153 → 1.0.3-alpha.154
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/ItemLabel/ItemLabelApollo.css +1 -1
- package/dist/Form/ItemLabel/ItemLabelApollo.css.map +1 -1
- package/dist/Form/ItemLabel/ItemLabelCommon.css +1 -1
- package/dist/Form/ItemLabel/ItemLabelCommon.css.map +1 -1
- package/dist/Form/ItemLabel/ItemLabelCommon.scss +1 -0
- package/dist/Form/ItemLabel/ItemLabelLF.css +1 -1
- package/dist/Form/ItemLabel/ItemLabelLF.css.map +1 -1
- package/dist/Form/TextInput/TextInputApollo.css +1 -0
- package/dist/Form/TextInput/TextInputApollo.css.map +1 -0
- package/dist/Form/TextInput/TextInputApollo.scss +42 -0
- package/dist/Form/TextInput/TextInputCommon.css +1 -0
- package/dist/Form/TextInput/TextInputCommon.css.map +1 -0
- package/dist/Form/TextInput/TextInputCommon.scss +73 -0
- package/dist/Form/TextInput/TextInputLF.css +1 -0
- package/dist/Form/TextInput/TextInputLF.css.map +1 -0
- package/dist/Form/TextInput/TextInputLF.scss +43 -0
- package/dist/apollo.css +1 -1
- package/dist/apollo.css.map +1 -1
- package/dist/apollo.scss +1 -0
- package/dist/common/tokens.css +1 -1
- package/dist/common/tokens.css.map +1 -1
- package/dist/common/tokens.scss +11 -9
- package/dist/look-and-feel.css +1 -1
- package/dist/look-and-feel.css.map +1 -1
- package/dist/look-and-feel.scss +1 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-item-label{display:grid;grid-template-areas:"label sidebutton" "description sidebutton" "more more";grid-template-columns:1fr auto;place-items:end start;row-gap:calc(2/var(--font-size-base)*1rem)}.af-item-label:has(>.af-item-label__description){row-gap:calc(4/var(--font-size-base)*1rem)}.af-item-label:has(>.af-item-label__sidebutton){column-gap:calc(12/var(--font-size-base)*1rem)}.af-item-label>label{color:var(--color-gray-900);font-size:calc(18/var(--font-size-base)*1rem);font-weight:600;grid-area:label;line-height:calc(20/var(--font-size-base)*1rem)}@media (width > 1023px){.af-item-label>label{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(24/var(--font-size-base)*1rem)}}.af-item-label__sidebutton{grid-area:sidebutton;place-self:center end}.af-item-label__sidebutton:has(+.af-item-label__description){align-self:end}.af-item-label__more{grid-area:more}.af-item-label__description{color:var(--label-description-color);font-size:calc(14/var(--font-size-base)*1rem);font-weight:400;grid-area:description;line-height:1.25em}@media (width > 1023px){.af-item-label__description{font-size:calc(16/var(--font-size-base)*1rem);line-height:calc(20/var(--font-size-base)*1rem)}}.af-item-label{--label-description-color:var(--neutral-80)}
|
|
1
|
+
.af-item-label{display:grid;grid-template-areas:"label sidebutton" "description sidebutton" "more more";grid-template-columns:1fr auto;place-items:end start;row-gap:calc(2/var(--font-size-base)*1rem);width:100%}.af-item-label:has(>.af-item-label__description){row-gap:calc(4/var(--font-size-base)*1rem)}.af-item-label:has(>.af-item-label__sidebutton){column-gap:calc(12/var(--font-size-base)*1rem)}.af-item-label>label{color:var(--color-gray-900);font-size:calc(18/var(--font-size-base)*1rem);font-weight:600;grid-area:label;line-height:calc(20/var(--font-size-base)*1rem)}@media (width > 1023px){.af-item-label>label{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(24/var(--font-size-base)*1rem)}}.af-item-label__sidebutton{grid-area:sidebutton;place-self:center end}.af-item-label__sidebutton:has(+.af-item-label__description){align-self:end}.af-item-label__more{grid-area:more}.af-item-label__description{color:var(--label-description-color);font-size:calc(14/var(--font-size-base)*1rem);font-weight:400;grid-area:description;line-height:1.25em}@media (width > 1023px){.af-item-label__description{font-size:calc(16/var(--font-size-base)*1rem);line-height:calc(20/var(--font-size-base)*1rem)}}.af-item-label{--label-description-color:var(--neutral-80)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Form/ItemLabel/ItemLabelCommon.scss","../../../src/Form/ItemLabel/ItemLabelApollo.scss","../../../src/Form/ItemLabel/ItemLabelApollo.scss%23sass"],"names":[],"mappings":"AAEA,eACE,YAAA,
|
|
1
|
+
{"version":3,"sources":["../../../src/Form/ItemLabel/ItemLabelCommon.scss","../../../src/Form/ItemLabel/ItemLabelApollo.scss","../../../src/Form/ItemLabel/ItemLabelApollo.scss%23sass"],"names":[],"mappings":"AAEA,eACE,YAAA,CAEA,2EACE,CCFJ,8BAAA,CDME,qBAAA,CCJF,0CAAA,CAJA,UAKA,CDME,iDACE,0CCJJ,CDOE,gDACE,8CCLJ,CDQE,qBAKE,2BAAA,CAHA,6CAAA,CACA,eAAA,CAFA,eAAA,CAGA,+CCLJ,CDQI,wBAPF,qBAQI,6CAAA,CACA,+CCLJ,CACF,CDQE,2BACE,oBAAA,CACA,qBCNJ,CDQI,6DACE,cCNN,CDUE,qBACE,cCRJ,CDWE,4BAKE,oCAAA,CAHA,6CAAA,CACA,eAAA,CAFA,qBAAA,CAGA,kBCRJ,CDWI,wBAPF,4BAQI,6CAAA,CACA,+CCRJ,CACF,CC7CA,eACE,2CDgDF","file":"ItemLabelApollo.css","sourcesContent":["@use \"../../common/breakpoints\" as breakpoints;\n\n.af-item-label {\n display: grid;\n width: 100%;\n grid-template-areas:\n \"label sidebutton\"\n \"description sidebutton\"\n \"more more\";\n grid-template-columns: 1fr auto;\n place-items: end start;\n row-gap: calc(2 / var(--font-size-base) * 1rem);\n\n &:has(> .af-item-label__description) {\n row-gap: calc(4 / var(--font-size-base) * 1rem);\n }\n\n &:has(> .af-item-label__sidebutton) {\n column-gap: calc(12 / var(--font-size-base) * 1rem);\n }\n\n > label {\n grid-area: label;\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 600;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n color: var(--color-gray-900);\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n line-height: calc(24 / var(--font-size-base) * 1rem);\n }\n }\n\n &__sidebutton {\n grid-area: sidebutton;\n place-self: center end;\n\n &:has(+ .af-item-label__description) {\n align-self: end;\n }\n }\n\n &__more {\n grid-area: more;\n }\n\n &__description {\n grid-area: description;\n font-size: calc(14 / var(--font-size-base) * 1rem);\n font-weight: 400;\n line-height: 1.25em;\n color: var(--label-description-color);\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n line-height: calc(20 / var(--font-size-base) * 1rem);\n }\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n@use \"./ItemLabelCommon\";\n\n.af-item-label {\n --label-description-color: var(--neutral-80);\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n@use \"./ItemLabelCommon\";\n\n.af-item-label {\n --label-description-color: var(--neutral-80);\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-item-label{display:grid;grid-template-areas:"label sidebutton" "description sidebutton" "more more";grid-template-columns:1fr auto;place-items:end start;row-gap:calc(2/var(--font-size-base)*1rem)}.af-item-label:has(>.af-item-label__description){row-gap:calc(4/var(--font-size-base)*1rem)}.af-item-label:has(>.af-item-label__sidebutton){column-gap:calc(12/var(--font-size-base)*1rem)}.af-item-label>label{color:var(--color-gray-900);font-size:calc(18/var(--font-size-base)*1rem);font-weight:600;grid-area:label;line-height:calc(20/var(--font-size-base)*1rem)}@media (width > 1023px){.af-item-label>label{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(24/var(--font-size-base)*1rem)}}.af-item-label__sidebutton{grid-area:sidebutton;place-self:center end}.af-item-label__sidebutton:has(+.af-item-label__description){align-self:end}.af-item-label__more{grid-area:more}.af-item-label__description{color:var(--label-description-color);font-size:calc(14/var(--font-size-base)*1rem);font-weight:400;grid-area:description;line-height:1.25em}@media (width > 1023px){.af-item-label__description{font-size:calc(16/var(--font-size-base)*1rem);line-height:calc(20/var(--font-size-base)*1rem)}}
|
|
1
|
+
.af-item-label{display:grid;grid-template-areas:"label sidebutton" "description sidebutton" "more more";grid-template-columns:1fr auto;place-items:end start;row-gap:calc(2/var(--font-size-base)*1rem);width:100%}.af-item-label:has(>.af-item-label__description){row-gap:calc(4/var(--font-size-base)*1rem)}.af-item-label:has(>.af-item-label__sidebutton){column-gap:calc(12/var(--font-size-base)*1rem)}.af-item-label>label{color:var(--color-gray-900);font-size:calc(18/var(--font-size-base)*1rem);font-weight:600;grid-area:label;line-height:calc(20/var(--font-size-base)*1rem)}@media (width > 1023px){.af-item-label>label{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(24/var(--font-size-base)*1rem)}}.af-item-label__sidebutton{grid-area:sidebutton;place-self:center end}.af-item-label__sidebutton:has(+.af-item-label__description){align-self:end}.af-item-label__more{grid-area:more}.af-item-label__description{color:var(--label-description-color);font-size:calc(14/var(--font-size-base)*1rem);font-weight:400;grid-area:description;line-height:1.25em}@media (width > 1023px){.af-item-label__description{font-size:calc(16/var(--font-size-base)*1rem);line-height:calc(20/var(--font-size-base)*1rem)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Form/ItemLabel/ItemLabelCommon.scss%23sass","../../../src/Form/ItemLabel/ItemLabelCommon.scss"],"names":[],"mappings":"AAEA,eACE,YAAA,
|
|
1
|
+
{"version":3,"sources":["../../../src/Form/ItemLabel/ItemLabelCommon.scss%23sass","../../../src/Form/ItemLabel/ItemLabelCommon.scss"],"names":[],"mappings":"AAEA,eACE,YAAA,CAEA,2EAAA,CAIA,8BAAA,CACA,qBAAA,CACA,0CAAA,CCTF,UAKA,CDME,iDACE,0CCJJ,CDOE,gDACE,8CCLJ,CDQE,qBAKE,2BAAA,CAHA,6CAAA,CACA,eAAA,CAFA,eAAA,CAGA,+CCLJ,CDQI,wBAPF,qBAQI,6CAAA,CACA,+CCLJ,CACF,CDQE,2BACE,oBAAA,CACA,qBCNJ,CDQI,6DACE,cCNN,CDUE,qBACE,cCRJ,CDWE,4BAKE,oCAAA,CAHA,6CAAA,CACA,eAAA,CAFA,qBAAA,CAGA,kBCRJ,CDWI,wBAPF,4BAQI,6CAAA,CCRJ,+CACA,CACF","file":"ItemLabelCommon.css","sourcesContent":["@use \"../../common/breakpoints\" as breakpoints;\n\n.af-item-label {\n display: grid;\n width: 100%;\n grid-template-areas:\n \"label sidebutton\"\n \"description sidebutton\"\n \"more more\";\n grid-template-columns: 1fr auto;\n place-items: end start;\n row-gap: calc(2 / var(--font-size-base) * 1rem);\n\n &:has(> .af-item-label__description) {\n row-gap: calc(4 / var(--font-size-base) * 1rem);\n }\n\n &:has(> .af-item-label__sidebutton) {\n column-gap: calc(12 / var(--font-size-base) * 1rem);\n }\n\n > label {\n grid-area: label;\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 600;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n color: var(--color-gray-900);\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n line-height: calc(24 / var(--font-size-base) * 1rem);\n }\n }\n\n &__sidebutton {\n grid-area: sidebutton;\n place-self: center end;\n\n &:has(+ .af-item-label__description) {\n align-self: end;\n }\n }\n\n &__more {\n grid-area: more;\n }\n\n &__description {\n grid-area: description;\n font-size: calc(14 / var(--font-size-base) * 1rem);\n font-weight: 400;\n line-height: 1.25em;\n color: var(--label-description-color);\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n line-height: calc(20 / var(--font-size-base) * 1rem);\n }\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n.af-item-label {\n display: grid;\n width: 100%;\n grid-template-areas:\n \"label sidebutton\"\n \"description sidebutton\"\n \"more more\";\n grid-template-columns: 1fr auto;\n place-items: end start;\n row-gap: calc(2 / var(--font-size-base) * 1rem);\n\n &:has(> .af-item-label__description) {\n row-gap: calc(4 / var(--font-size-base) * 1rem);\n }\n\n &:has(> .af-item-label__sidebutton) {\n column-gap: calc(12 / var(--font-size-base) * 1rem);\n }\n\n > label {\n grid-area: label;\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 600;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n color: var(--color-gray-900);\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n line-height: calc(24 / var(--font-size-base) * 1rem);\n }\n }\n\n &__sidebutton {\n grid-area: sidebutton;\n place-self: center end;\n\n &:has(+ .af-item-label__description) {\n align-self: end;\n }\n }\n\n &__more {\n grid-area: more;\n }\n\n &__description {\n grid-area: description;\n font-size: calc(14 / var(--font-size-base) * 1rem);\n font-weight: 400;\n line-height: 1.25em;\n color: var(--label-description-color);\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n line-height: calc(20 / var(--font-size-base) * 1rem);\n }\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-item-label{display:grid;grid-template-areas:"label sidebutton" "description sidebutton" "more more";grid-template-columns:1fr auto;place-items:end start;row-gap:calc(2/var(--font-size-base)*1rem)}.af-item-label:has(>.af-item-label__description){row-gap:calc(4/var(--font-size-base)*1rem)}.af-item-label:has(>.af-item-label__sidebutton){column-gap:calc(12/var(--font-size-base)*1rem)}.af-item-label>label{color:var(--color-gray-900);font-size:calc(18/var(--font-size-base)*1rem);font-weight:600;grid-area:label;line-height:calc(20/var(--font-size-base)*1rem)}@media (width > 1023px){.af-item-label>label{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(24/var(--font-size-base)*1rem)}}.af-item-label__sidebutton{grid-area:sidebutton;place-self:center end}.af-item-label__sidebutton:has(+.af-item-label__description){align-self:end}.af-item-label__more{grid-area:more}.af-item-label__description{color:var(--label-description-color);font-size:calc(14/var(--font-size-base)*1rem);font-weight:400;grid-area:description;line-height:1.25em}@media (width > 1023px){.af-item-label__description{font-size:calc(16/var(--font-size-base)*1rem);line-height:calc(20/var(--font-size-base)*1rem)}}.af-item-label{--label-description-color:var(--color-gray-700)}
|
|
1
|
+
.af-item-label{display:grid;grid-template-areas:"label sidebutton" "description sidebutton" "more more";grid-template-columns:1fr auto;place-items:end start;row-gap:calc(2/var(--font-size-base)*1rem);width:100%}.af-item-label:has(>.af-item-label__description){row-gap:calc(4/var(--font-size-base)*1rem)}.af-item-label:has(>.af-item-label__sidebutton){column-gap:calc(12/var(--font-size-base)*1rem)}.af-item-label>label{color:var(--color-gray-900);font-size:calc(18/var(--font-size-base)*1rem);font-weight:600;grid-area:label;line-height:calc(20/var(--font-size-base)*1rem)}@media (width > 1023px){.af-item-label>label{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(24/var(--font-size-base)*1rem)}}.af-item-label__sidebutton{grid-area:sidebutton;place-self:center end}.af-item-label__sidebutton:has(+.af-item-label__description){align-self:end}.af-item-label__more{grid-area:more}.af-item-label__description{color:var(--label-description-color);font-size:calc(14/var(--font-size-base)*1rem);font-weight:400;grid-area:description;line-height:1.25em}@media (width > 1023px){.af-item-label__description{font-size:calc(16/var(--font-size-base)*1rem);line-height:calc(20/var(--font-size-base)*1rem)}}.af-item-label{--label-description-color:var(--color-gray-700)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Form/ItemLabel/ItemLabelCommon.scss","../../../src/Form/ItemLabel/ItemLabelLF.scss","../../../src/Form/ItemLabel/ItemLabelLF.scss%23sass"],"names":[],"mappings":"AAEA,eACE,YAAA,
|
|
1
|
+
{"version":3,"sources":["../../../src/Form/ItemLabel/ItemLabelCommon.scss","../../../src/Form/ItemLabel/ItemLabelLF.scss","../../../src/Form/ItemLabel/ItemLabelLF.scss%23sass"],"names":[],"mappings":"AAEA,eACE,YAAA,CAEA,2EACE,CCFJ,8BAAA,CDME,qBAAA,CCJF,0CAAA,CAJA,UAKA,CDME,iDACE,0CCJJ,CDOE,gDACE,8CCLJ,CDQE,qBAKE,2BAAA,CAHA,6CAAA,CACA,eAAA,CAFA,eAAA,CAGA,+CCLJ,CDQI,wBAPF,qBAQI,6CAAA,CACA,+CCLJ,CACF,CDQE,2BACE,oBAAA,CACA,qBCNJ,CDQI,6DACE,cCNN,CDUE,qBACE,cCRJ,CDWE,4BAKE,oCAAA,CAHA,6CAAA,CACA,eAAA,CAFA,qBAAA,CAGA,kBCRJ,CDWI,wBAPF,4BAQI,6CAAA,CACA,+CCRJ,CACF,CC7CA,eACE,+CDgDF","file":"ItemLabelLF.css","sourcesContent":["@use \"../../common/breakpoints\" as breakpoints;\n\n.af-item-label {\n display: grid;\n width: 100%;\n grid-template-areas:\n \"label sidebutton\"\n \"description sidebutton\"\n \"more more\";\n grid-template-columns: 1fr auto;\n place-items: end start;\n row-gap: calc(2 / var(--font-size-base) * 1rem);\n\n &:has(> .af-item-label__description) {\n row-gap: calc(4 / var(--font-size-base) * 1rem);\n }\n\n &:has(> .af-item-label__sidebutton) {\n column-gap: calc(12 / var(--font-size-base) * 1rem);\n }\n\n > label {\n grid-area: label;\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 600;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n color: var(--color-gray-900);\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n line-height: calc(24 / var(--font-size-base) * 1rem);\n }\n }\n\n &__sidebutton {\n grid-area: sidebutton;\n place-self: center end;\n\n &:has(+ .af-item-label__description) {\n align-self: end;\n }\n }\n\n &__more {\n grid-area: more;\n }\n\n &__description {\n grid-area: description;\n font-size: calc(14 / var(--font-size-base) * 1rem);\n font-weight: 400;\n line-height: 1.25em;\n color: var(--label-description-color);\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n line-height: calc(20 / var(--font-size-base) * 1rem);\n }\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n@use \"./ItemLabelCommon\";\n\n.af-item-label {\n --label-description-color: var(--color-gray-700);\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n@use \"./ItemLabelCommon\";\n\n.af-item-label {\n --label-description-color: var(--color-gray-700);\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.af-form__input-container{align-items:flex-start;display:flex;flex-direction:column;row-gap:calc(8/var(--font-size-base)*1rem)}.af-form__input-variant{align-items:center;background-color:var(--input-bg-color);border:1px solid var(--input-border-color);border-radius:var(--input-border-radius);color:var(--input-text-color);display:grid;grid-template-columns:auto min-content;padding:calc(16/var(--font-size-base)*1rem);width:100%}.af-form__input-variant:has(>input~*){column-gap:calc(8/var(--font-size-base)*1rem)}.af-form__input-variant>input{all:unset;color:var(--input-text-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:600;line-height:1.25em}.af-form__input-variant>input::placeholder{color:var(--input-text-placeholder-color);font-weight:400}.af-form__input-variant>input~*{color:var(--input-text-icon-color);fill:var(--input-text-icon-color)}@media (width > 1023px){.af-form__input-variant>input{font-size:calc(18/var(--font-size-base)*1rem)}}.af-form__input-variant:has(>input:is(:hover,:focus,:active)){box-shadow:0 0 0 1px var(--input-border-color) inset}.af-form__input-variant:has(>input:disabled),.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active){box-shadow:unset;cursor:not-allowed}.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active)>input~*,.af-form__input-variant:has(>input:disabled)>input~*{cursor:not-allowed}.af-form__input-helper{color:var(--input-helper-color);font-size:calc(14/var(--font-size-base)*1rem);font-weight:400;line-height:1.25em}@media (width > 1023px){.af-form__input-helper{font-size:calc(16/var(--font-size-base)*1rem)}}.af-form__input-helper{--input-helper-color:var(--neutral-80)}.af-form__input-variant{--input-border-color:var(--axa-blue-65);--input-border-radius:var(--radius-8);--input-bg-color:var(--white);--input-text-color:var(--neutral-80);--input-text-icon-color:var(--axa-blue-100)}.af-form__input-variant:has(>input:not([value=""])){--input-border-color:var(--axa-blue-65)}.af-form__input-variant:has(>input:is(:hover,:focus,:active)){--input-border-color:var(--axa-blue-100);--input-text-placeholder-color:var(--neutral-80)}.af-form__input-variant:has(>input[class*="--error"]){--input-border-color:var(--red-alert-100)}.af-form__input-variant:has(>input:disabled),.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active){--input-border-color:var(--neutral-50);--input-text-color:var(--neutral-50);--input-bg-color:var(--neutral-5);--input-text-icon-color:var(--neutral-50)}.af-form__input-variant:has(>input:disabled)+.af-form__input-helper,.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active)+.af-form__input-helper{--input-helper-color:var(--neutral-50)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/Form/TextInput/TextInputCommon.scss","../../../src/Form/TextInput/TextInputApollo.scss","../../../src/Form/TextInput/TextInputApollo.scss%23sass"],"names":[],"mappings":"AAGE,0BAGE,sBAAA,CAFA,YAAA,CCFJ,qBDGI,CCDJ,0CACA,CDKE,wBAOE,kBAAA,CAEA,sCAAA,CALA,0CAAA,CACA,wCAAA,CAGA,6BAAA,CAPA,YAAA,CAKA,sCAAA,CAHA,2CAAA,CADA,UCIJ,CDKI,sCACE,6CCHN,CDMI,8BACE,SAAA,CAIA,6BAAA,CAHA,6CAAA,CACA,eAAA,CACA,kBCHN,CDMM,2CAEE,yCAAA,CADA,eCHR,CDOM,gCACE,kCAAA,CACA,iCCLR,CDQM,wBAjBF,8BAkBI,6CCLN,CACF,CDQI,8DCNJ,oDACA,CDSI,oHAEE,gBAAA,CACA,kBCRN,CDUM,oIACE,kBCRR,CDaE,uBAIE,+BAAA,CAHA,6CAAA,CACA,eAAA,CACA,kBCVJ,CDaI,wBANF,uBAOI,6CCVJ,CACF,CCvDE,uBACE,sCD0DJ,CCvDE,wBACE,uCAAA,CACA,qCAAA,CACA,6BAAA,CACA,oCAAA,CACA,2CDyDJ,CCvDI,oDACE,uCDyDN,CCtDI,8DACE,wCAAA,CACA,gDDwDN,CCrDI,sDACE,yCDuDN,CCpDI,oHAEE,sCAAA,CACA,oCAAA,CACA,iCAAA,CACA,yCDqDN,CCnDM,kKACE,sCDqDR","file":"TextInputApollo.css","sourcesContent":["@use \"../../common/breakpoints\" as breakpoints;\n\n.af-form {\n &__input-container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n row-gap: calc(8 / var(--font-size-base) * 1rem);\n }\n\n &__input-variant {\n display: grid;\n width: 100%;\n padding: calc(16 / var(--font-size-base) * 1rem);\n border: 1px solid var(--input-border-color);\n border-radius: var(--input-border-radius);\n grid-template-columns: auto min-content;\n align-items: center;\n color: var(--input-text-color);\n background-color: var(--input-bg-color);\n\n &:has(> input ~ *) {\n column-gap: calc(8 / var(--font-size-base) * 1rem);\n }\n\n > input {\n all: unset;\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 600;\n line-height: 1.25em;\n color: var(--input-text-color);\n\n &::placeholder {\n font-weight: 400;\n color: var(--input-text-placeholder-color);\n }\n\n & ~ * {\n color: var(--input-text-icon-color);\n fill: var(--input-text-icon-color);\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n }\n\n &:has(> input:is(:hover, :focus, :active)) {\n box-shadow: 0 0 0 1px var(--input-border-color) inset;\n }\n\n &:has(> input:disabled),\n &:has(> input:disabled):is(:hover, :focus, :active) {\n box-shadow: unset;\n cursor: not-allowed;\n\n & > input ~ * {\n cursor: not-allowed;\n }\n }\n }\n\n &__input-helper {\n font-size: calc(14 / var(--font-size-base) * 1rem);\n font-weight: 400;\n line-height: 1.25em;\n color: var(--input-helper-color);\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n@use \"./TextInputCommon\";\n\n.af-form {\n &__input-helper {\n --input-helper-color: var(--neutral-80);\n }\n\n &__input-variant {\n --input-border-color: var(--axa-blue-65);\n --input-border-radius: var(--radius-8);\n --input-bg-color: var(--white);\n --input-text-color: var(--neutral-80);\n --input-text-icon-color: var(--axa-blue-100);\n\n &:has(> input:not([value=\"\"])) {\n --input-border-color: var(--axa-blue-65);\n }\n\n &:has(> input:is(:hover, :focus, :active)) {\n --input-border-color: var(--axa-blue-100);\n --input-text-placeholder-color: var(--neutral-80);\n }\n\n &:has(> input[class*=\"--error\"]) {\n --input-border-color: var(--red-alert-100);\n }\n\n &:has(> input:disabled),\n &:has(> input:disabled):is(:hover, :focus, :active) {\n --input-border-color: var(--neutral-50);\n --input-text-color: var(--neutral-50);\n --input-bg-color: var(--neutral-5);\n --input-text-icon-color: var(--neutral-50);\n\n + .af-form__input-helper {\n --input-helper-color: var(--neutral-50);\n }\n }\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n@use \"./TextInputCommon\";\n\n.af-form {\n &__input-helper {\n --input-helper-color: var(--neutral-80);\n }\n\n &__input-variant {\n --input-border-color: var(--axa-blue-65);\n --input-border-radius: var(--radius-8);\n --input-bg-color: var(--white);\n --input-text-color: var(--neutral-80);\n --input-text-icon-color: var(--axa-blue-100);\n\n &:has(> input:not([value=\"\"])) {\n --input-border-color: var(--axa-blue-65);\n }\n\n &:has(> input:is(:hover, :focus, :active)) {\n --input-border-color: var(--axa-blue-100);\n --input-text-placeholder-color: var(--neutral-80);\n }\n\n &:has(> input[class*=\"--error\"]) {\n --input-border-color: var(--red-alert-100);\n }\n\n &:has(> input:disabled),\n &:has(> input:disabled):is(:hover, :focus, :active) {\n --input-border-color: var(--neutral-50);\n --input-text-color: var(--neutral-50);\n --input-bg-color: var(--neutral-5);\n --input-text-icon-color: var(--neutral-50);\n\n + .af-form__input-helper {\n --input-helper-color: var(--neutral-50);\n }\n }\n }\n}\n"]}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
@use "../../common/breakpoints" as breakpoints;
|
|
2
|
+
|
|
3
|
+
@use "./TextInputCommon";
|
|
4
|
+
|
|
5
|
+
.af-form {
|
|
6
|
+
&__input-helper {
|
|
7
|
+
--input-helper-color: var(--neutral-80);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
&__input-variant {
|
|
11
|
+
--input-border-color: var(--axa-blue-65);
|
|
12
|
+
--input-border-radius: var(--radius-8);
|
|
13
|
+
--input-bg-color: var(--white);
|
|
14
|
+
--input-text-color: var(--neutral-80);
|
|
15
|
+
--input-text-icon-color: var(--axa-blue-100);
|
|
16
|
+
|
|
17
|
+
&:has(> input:not([value=""])) {
|
|
18
|
+
--input-border-color: var(--axa-blue-65);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&:has(> input:is(:hover, :focus, :active)) {
|
|
22
|
+
--input-border-color: var(--axa-blue-100);
|
|
23
|
+
--input-text-placeholder-color: var(--neutral-80);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&:has(> input[class*="--error"]) {
|
|
27
|
+
--input-border-color: var(--red-alert-100);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&:has(> input:disabled),
|
|
31
|
+
&:has(> input:disabled):is(:hover, :focus, :active) {
|
|
32
|
+
--input-border-color: var(--neutral-50);
|
|
33
|
+
--input-text-color: var(--neutral-50);
|
|
34
|
+
--input-bg-color: var(--neutral-5);
|
|
35
|
+
--input-text-icon-color: var(--neutral-50);
|
|
36
|
+
|
|
37
|
+
+ .af-form__input-helper {
|
|
38
|
+
--input-helper-color: var(--neutral-50);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.af-form__input-container{align-items:flex-start;display:flex;flex-direction:column;row-gap:calc(8/var(--font-size-base)*1rem)}.af-form__input-variant{align-items:center;background-color:var(--input-bg-color);border:1px solid var(--input-border-color);border-radius:var(--input-border-radius);color:var(--input-text-color);display:grid;grid-template-columns:auto min-content;padding:calc(16/var(--font-size-base)*1rem);width:100%}.af-form__input-variant:has(>input~*){column-gap:calc(8/var(--font-size-base)*1rem)}.af-form__input-variant>input{all:unset;color:var(--input-text-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:600;line-height:1.25em}.af-form__input-variant>input::placeholder{color:var(--input-text-placeholder-color);font-weight:400}.af-form__input-variant>input~*{color:var(--input-text-icon-color);fill:var(--input-text-icon-color)}@media (width > 1023px){.af-form__input-variant>input{font-size:calc(18/var(--font-size-base)*1rem)}}.af-form__input-variant:has(>input:is(:hover,:focus,:active)){box-shadow:0 0 0 1px var(--input-border-color) inset}.af-form__input-variant:has(>input:disabled),.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active){box-shadow:unset;cursor:not-allowed}.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active)>input~*,.af-form__input-variant:has(>input:disabled)>input~*{cursor:not-allowed}.af-form__input-helper{color:var(--input-helper-color);font-size:calc(14/var(--font-size-base)*1rem);font-weight:400;line-height:1.25em}@media (width > 1023px){.af-form__input-helper{font-size:calc(16/var(--font-size-base)*1rem)}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/Form/TextInput/TextInputCommon.scss%23sass","../../../src/Form/TextInput/TextInputCommon.scss"],"names":[],"mappings":"AAGE,0BAGE,sBAAA,CAFA,YAAA,CCFJ,qBAAA,CDKI,0CCFJ,CDKE,wBAOE,kBAAA,CAEA,sCAAA,CALA,0CAAA,CACA,wCAAA,CAGA,6BAAA,CAPA,YAAA,CAKA,sCAAA,CAHA,2CAAA,CADA,UCIJ,CDKI,sCACE,6CCHN,CDMI,8BACE,SAAA,CAIA,6BAAA,CAHA,6CAAA,CACA,eAAA,CACA,kBCHN,CDMM,2CAEE,yCAAA,CADA,eCHR,CDOM,gCACE,kCAAA,CACA,iCCLR,CDQM,wBAjBF,8BAkBI,6CCLN,CACF,CDQI,8DACE,oDCNN,CDSI,oHAEE,gBAAA,CACA,kBCRN,CDUM,oIACE,kBCRR,CDaE,uBAIE,+BAAA,CAHA,6CAAA,CACA,eAAA,CACA,kBCVJ,CDaI,wBANF,uBAOI,6CCVJ,CACF","file":"TextInputCommon.css","sourcesContent":["@use \"../../common/breakpoints\" as breakpoints;\n\n.af-form {\n &__input-container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n row-gap: calc(8 / var(--font-size-base) * 1rem);\n }\n\n &__input-variant {\n display: grid;\n width: 100%;\n padding: calc(16 / var(--font-size-base) * 1rem);\n border: 1px solid var(--input-border-color);\n border-radius: var(--input-border-radius);\n grid-template-columns: auto min-content;\n align-items: center;\n color: var(--input-text-color);\n background-color: var(--input-bg-color);\n\n &:has(> input ~ *) {\n column-gap: calc(8 / var(--font-size-base) * 1rem);\n }\n\n > input {\n all: unset;\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 600;\n line-height: 1.25em;\n color: var(--input-text-color);\n\n &::placeholder {\n font-weight: 400;\n color: var(--input-text-placeholder-color);\n }\n\n & ~ * {\n color: var(--input-text-icon-color);\n fill: var(--input-text-icon-color);\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n }\n\n &:has(> input:is(:hover, :focus, :active)) {\n box-shadow: 0 0 0 1px var(--input-border-color) inset;\n }\n\n &:has(> input:disabled),\n &:has(> input:disabled):is(:hover, :focus, :active) {\n box-shadow: unset;\n cursor: not-allowed;\n\n & > input ~ * {\n cursor: not-allowed;\n }\n }\n }\n\n &__input-helper {\n font-size: calc(14 / var(--font-size-base) * 1rem);\n font-weight: 400;\n line-height: 1.25em;\n color: var(--input-helper-color);\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n.af-form {\n &__input-container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n row-gap: calc(8 / var(--font-size-base) * 1rem);\n }\n\n &__input-variant {\n display: grid;\n width: 100%;\n padding: calc(16 / var(--font-size-base) * 1rem);\n border: 1px solid var(--input-border-color);\n border-radius: var(--input-border-radius);\n grid-template-columns: auto min-content;\n align-items: center;\n color: var(--input-text-color);\n background-color: var(--input-bg-color);\n\n &:has(> input ~ *) {\n column-gap: calc(8 / var(--font-size-base) * 1rem);\n }\n\n > input {\n all: unset;\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 600;\n line-height: 1.25em;\n color: var(--input-text-color);\n\n &::placeholder {\n font-weight: 400;\n color: var(--input-text-placeholder-color);\n }\n\n & ~ * {\n color: var(--input-text-icon-color);\n fill: var(--input-text-icon-color);\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n }\n\n &:has(> input:is(:hover, :focus, :active)) {\n box-shadow: 0 0 0 1px var(--input-border-color) inset;\n }\n\n &:has(> input:disabled),\n &:has(> input:disabled):is(:hover, :focus, :active) {\n box-shadow: unset;\n cursor: not-allowed;\n\n & > input ~ * {\n cursor: not-allowed;\n }\n }\n }\n\n &__input-helper {\n font-size: calc(14 / var(--font-size-base) * 1rem);\n font-weight: 400;\n line-height: 1.25em;\n color: var(--input-helper-color);\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n }\n}\n"]}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
@use "../../common/breakpoints" as breakpoints;
|
|
2
|
+
|
|
3
|
+
.af-form {
|
|
4
|
+
&__input-container {
|
|
5
|
+
display: flex;
|
|
6
|
+
flex-direction: column;
|
|
7
|
+
align-items: flex-start;
|
|
8
|
+
row-gap: calc(8 / var(--font-size-base) * 1rem);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
&__input-variant {
|
|
12
|
+
display: grid;
|
|
13
|
+
width: 100%;
|
|
14
|
+
padding: calc(16 / var(--font-size-base) * 1rem);
|
|
15
|
+
border: 1px solid var(--input-border-color);
|
|
16
|
+
border-radius: var(--input-border-radius);
|
|
17
|
+
grid-template-columns: auto min-content;
|
|
18
|
+
align-items: center;
|
|
19
|
+
color: var(--input-text-color);
|
|
20
|
+
background-color: var(--input-bg-color);
|
|
21
|
+
|
|
22
|
+
&:has(> input ~ *) {
|
|
23
|
+
column-gap: calc(8 / var(--font-size-base) * 1rem);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
> input {
|
|
27
|
+
all: unset;
|
|
28
|
+
font-size: calc(16 / var(--font-size-base) * 1rem);
|
|
29
|
+
font-weight: 600;
|
|
30
|
+
line-height: 1.25em;
|
|
31
|
+
color: var(--input-text-color);
|
|
32
|
+
|
|
33
|
+
&::placeholder {
|
|
34
|
+
font-weight: 400;
|
|
35
|
+
color: var(--input-text-placeholder-color);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
& ~ * {
|
|
39
|
+
color: var(--input-text-icon-color);
|
|
40
|
+
fill: var(--input-text-icon-color);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@media (width > #{breakpoints.$breakpoint-md}) {
|
|
44
|
+
font-size: calc(18 / var(--font-size-base) * 1rem);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&:has(> input:is(:hover, :focus, :active)) {
|
|
49
|
+
box-shadow: 0 0 0 1px var(--input-border-color) inset;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
&:has(> input:disabled),
|
|
53
|
+
&:has(> input:disabled):is(:hover, :focus, :active) {
|
|
54
|
+
box-shadow: unset;
|
|
55
|
+
cursor: not-allowed;
|
|
56
|
+
|
|
57
|
+
& > input ~ * {
|
|
58
|
+
cursor: not-allowed;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
&__input-helper {
|
|
64
|
+
font-size: calc(14 / var(--font-size-base) * 1rem);
|
|
65
|
+
font-weight: 400;
|
|
66
|
+
line-height: 1.25em;
|
|
67
|
+
color: var(--input-helper-color);
|
|
68
|
+
|
|
69
|
+
@media (width > #{breakpoints.$breakpoint-md}) {
|
|
70
|
+
font-size: calc(16 / var(--font-size-base) * 1rem);
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.af-form__input-container{align-items:flex-start;display:flex;flex-direction:column;row-gap:calc(8/var(--font-size-base)*1rem)}.af-form__input-variant{align-items:center;background-color:var(--input-bg-color);border:1px solid var(--input-border-color);border-radius:var(--input-border-radius);color:var(--input-text-color);display:grid;grid-template-columns:auto min-content;padding:calc(16/var(--font-size-base)*1rem);width:100%}.af-form__input-variant:has(>input~*){column-gap:calc(8/var(--font-size-base)*1rem)}.af-form__input-variant>input{all:unset;color:var(--input-text-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:600;line-height:1.25em}.af-form__input-variant>input::placeholder{color:var(--input-text-placeholder-color);font-weight:400}.af-form__input-variant>input~*{color:var(--input-text-icon-color);fill:var(--input-text-icon-color)}@media (width > 1023px){.af-form__input-variant>input{font-size:calc(18/var(--font-size-base)*1rem)}}.af-form__input-variant:has(>input:is(:hover,:focus,:active)){box-shadow:0 0 0 1px var(--input-border-color) inset}.af-form__input-variant:has(>input:disabled),.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active){box-shadow:unset;cursor:not-allowed}.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active)>input~*,.af-form__input-variant:has(>input:disabled)>input~*{cursor:not-allowed}.af-form__input-helper{color:var(--input-helper-color);font-size:calc(14/var(--font-size-base)*1rem);font-weight:400;line-height:1.25em}@media (width > 1023px){.af-form__input-helper{font-size:calc(16/var(--font-size-base)*1rem)}}.af-form__input-helper{--input-helper-color:var(--color-gray-700)}.af-form__input-variant{--input-border-color:var(--color-gray-700);--input-border-radius:var(--default-border-radius);--input-bg-color:var(--color-white);--input-text-color:var(--color-gray-900);--input-text-icon-color:var(--color-gray-900);--input-text-placeholder-color:var(--color-gray-700)}.af-form__input-variant:has(>input:not([value=""])){--input-border-color:var(--color-axa)}.af-form__input-variant:has(>input:is(:hover,:focus,:active)){--input-border-color:var(--color-axa);--input-text-placeholder-color:var(--color-gray-900)}.af-form__input-variant:has(>input[class*="--error"]){--input-border-color:var(--color-red-700)}.af-form__input-variant:has(>input:disabled),.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active){--input-border-color:var(--color-gray-400);--input-text-color:var(--color-gray-500);--input-bg-color:var(--color-gray-200);--input-text-icon-color:var(--color-gray-500)}.af-form__input-variant:has(>input:disabled)+.af-form__input-helper,.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active)+.af-form__input-helper{--input-helper-color:var(--color-gray-500)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/Form/TextInput/TextInputCommon.scss","../../../src/Form/TextInput/TextInputLF.scss","../../../src/Form/TextInput/TextInputLF.scss%23sass"],"names":[],"mappings":"AAGE,0BAGE,sBAAA,CAFA,YAAA,CCFJ,qBDGI,CCDJ,0CACA,CDKE,wBAOE,kBAAA,CAEA,sCAAA,CALA,0CAAA,CACA,wCAAA,CAGA,6BAAA,CAPA,YAAA,CAKA,sCAAA,CAHA,2CAAA,CADA,UCIJ,CDKI,sCACE,6CCHN,CDMI,8BACE,SAAA,CAIA,6BAAA,CAHA,6CAAA,CACA,eAAA,CACA,kBCHN,CDMM,2CAEE,yCAAA,CADA,eCHR,CDOM,gCACE,kCAAA,CACA,iCCLR,CDQM,wBAjBF,8BAkBI,6CCLN,CACF,CDQI,8DACE,oDCNN,CDSI,oHAEE,gBAAA,CACA,kBCRN,CDUM,oIACE,kBCRR,CDaE,uBAIE,+BAAA,CAHA,6CAAA,CACA,eAAA,CACA,kBCVJ,CDaI,wBANF,uBAOI,6CCVJ,CACF,CCvDE,uBACE,0CD0DJ,CCvDE,wBACE,0CAAA,CACA,kDAAA,CACA,mCAAA,CACA,wCAAA,CACA,6CAAA,CACA,oDDyDJ,CCvDI,oDACE,qCDyDN,CCtDI,8DACE,qCAAA,CACA,oDDwDN,CCrDI,sDACE,yCDuDN,CCpDI,oHAEE,0CAAA,CACA,wCAAA,CACA,sCAAA,CACA,6CDqDN,CCnDM,kKACE,0CDqDR","file":"TextInputLF.css","sourcesContent":["@use \"../../common/breakpoints\" as breakpoints;\n\n.af-form {\n &__input-container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n row-gap: calc(8 / var(--font-size-base) * 1rem);\n }\n\n &__input-variant {\n display: grid;\n width: 100%;\n padding: calc(16 / var(--font-size-base) * 1rem);\n border: 1px solid var(--input-border-color);\n border-radius: var(--input-border-radius);\n grid-template-columns: auto min-content;\n align-items: center;\n color: var(--input-text-color);\n background-color: var(--input-bg-color);\n\n &:has(> input ~ *) {\n column-gap: calc(8 / var(--font-size-base) * 1rem);\n }\n\n > input {\n all: unset;\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 600;\n line-height: 1.25em;\n color: var(--input-text-color);\n\n &::placeholder {\n font-weight: 400;\n color: var(--input-text-placeholder-color);\n }\n\n & ~ * {\n color: var(--input-text-icon-color);\n fill: var(--input-text-icon-color);\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n }\n\n &:has(> input:is(:hover, :focus, :active)) {\n box-shadow: 0 0 0 1px var(--input-border-color) inset;\n }\n\n &:has(> input:disabled),\n &:has(> input:disabled):is(:hover, :focus, :active) {\n box-shadow: unset;\n cursor: not-allowed;\n\n & > input ~ * {\n cursor: not-allowed;\n }\n }\n }\n\n &__input-helper {\n font-size: calc(14 / var(--font-size-base) * 1rem);\n font-weight: 400;\n line-height: 1.25em;\n color: var(--input-helper-color);\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n@use \"./TextInputCommon\";\n\n.af-form {\n &__input-helper {\n --input-helper-color: var(--color-gray-700);\n }\n\n &__input-variant {\n --input-border-color: var(--color-gray-700);\n --input-border-radius: var(--default-border-radius);\n --input-bg-color: var(--color-white);\n --input-text-color: var(--color-gray-900);\n --input-text-icon-color: var(--color-gray-900);\n --input-text-placeholder-color: var(--color-gray-700);\n\n &:has(> input:not([value=\"\"])) {\n --input-border-color: var(--color-axa);\n }\n\n &:has(> input:is(:hover, :focus, :active)) {\n --input-border-color: var(--color-axa);\n --input-text-placeholder-color: var(--color-gray-900);\n }\n\n &:has(> input[class*=\"--error\"]) {\n --input-border-color: var(--color-red-700);\n }\n\n &:has(> input:disabled),\n &:has(> input:disabled):is(:hover, :focus, :active) {\n --input-border-color: var(--color-gray-400);\n --input-text-color: var(--color-gray-500);\n --input-bg-color: var(--color-gray-200);\n --input-text-icon-color: var(--color-gray-500);\n\n + .af-form__input-helper {\n --input-helper-color: var(--color-gray-500);\n }\n }\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n@use \"./TextInputCommon\";\n\n.af-form {\n &__input-helper {\n --input-helper-color: var(--color-gray-700);\n }\n\n &__input-variant {\n --input-border-color: var(--color-gray-700);\n --input-border-radius: var(--default-border-radius);\n --input-bg-color: var(--color-white);\n --input-text-color: var(--color-gray-900);\n --input-text-icon-color: var(--color-gray-900);\n --input-text-placeholder-color: var(--color-gray-700);\n\n &:has(> input:not([value=\"\"])) {\n --input-border-color: var(--color-axa);\n }\n\n &:has(> input:is(:hover, :focus, :active)) {\n --input-border-color: var(--color-axa);\n --input-text-placeholder-color: var(--color-gray-900);\n }\n\n &:has(> input[class*=\"--error\"]) {\n --input-border-color: var(--color-red-700);\n }\n\n &:has(> input:disabled),\n &:has(> input:disabled):is(:hover, :focus, :active) {\n --input-border-color: var(--color-gray-400);\n --input-text-color: var(--color-gray-500);\n --input-bg-color: var(--color-gray-200);\n --input-text-icon-color: var(--color-gray-500);\n\n + .af-form__input-helper {\n --input-helper-color: var(--color-gray-500);\n }\n }\n }\n}\n"]}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
@use "../../common/breakpoints" as breakpoints;
|
|
2
|
+
|
|
3
|
+
@use "./TextInputCommon";
|
|
4
|
+
|
|
5
|
+
.af-form {
|
|
6
|
+
&__input-helper {
|
|
7
|
+
--input-helper-color: var(--color-gray-700);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
&__input-variant {
|
|
11
|
+
--input-border-color: var(--color-gray-700);
|
|
12
|
+
--input-border-radius: var(--default-border-radius);
|
|
13
|
+
--input-bg-color: var(--color-white);
|
|
14
|
+
--input-text-color: var(--color-gray-900);
|
|
15
|
+
--input-text-icon-color: var(--color-gray-900);
|
|
16
|
+
--input-text-placeholder-color: var(--color-gray-700);
|
|
17
|
+
|
|
18
|
+
&:has(> input:not([value=""])) {
|
|
19
|
+
--input-border-color: var(--color-axa);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&:has(> input:is(:hover, :focus, :active)) {
|
|
23
|
+
--input-border-color: var(--color-axa);
|
|
24
|
+
--input-text-placeholder-color: var(--color-gray-900);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&:has(> input[class*="--error"]) {
|
|
28
|
+
--input-border-color: var(--color-red-700);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&:has(> input:disabled),
|
|
32
|
+
&:has(> input:disabled):is(:hover, :focus, :active) {
|
|
33
|
+
--input-border-color: var(--color-gray-400);
|
|
34
|
+
--input-text-color: var(--color-gray-500);
|
|
35
|
+
--input-bg-color: var(--color-gray-200);
|
|
36
|
+
--input-text-icon-color: var(--color-gray-500);
|
|
37
|
+
|
|
38
|
+
+ .af-form__input-helper {
|
|
39
|
+
--input-helper-color: var(--color-gray-500);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
package/dist/apollo.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.grid{--col-gap:calc(8/var(--font-size-base)*1rem);--row-gap:calc(16/var(--font-size-base)*1rem);--margin-inline:calc(16/var(--font-size-base)*1rem);--cols:4;--start:auto;display:grid;gap:var(--row-gap) var(--col-gap);grid-template-columns:repeat(var(--cols),1fr);margin-inline:var(--margin-inline)}@media (width > 667px){.grid{--cols:8;--col-gap:calc(16/var(--font-size-base)*1rem);--margin-inline:calc(60/var(--font-size-base)*1rem)}}@media (width > 1023px){.grid{--col-gap:calc(24/var(--font-size-base)*1rem);--margin-inline:calc(80/var(--font-size-base)*1rem);--cols:12}}@media (width > 1279px){.grid{--margin-inline:calc(120/var(--font-size-base)*1rem)}}@media (width > 1599px){.grid{--margin-inline:auto;max-width:1320px}}.grid .subgrid,.grid :has(>.subgrid),.grid>*{align-content:start;display:grid;grid-column:var(--start)/span var(--cols);row-gap:var(--row-gap)}.grid>*>*{--start:auto}.grid .subgrid,.grid :has(>.subgrid){grid-template-columns:subgrid}.grid .subgrid>*,.grid :has(>.subgrid)>*{grid-column:var(--start)/span var(--cols)}.af-checkbox-select--debuggrid label:has(>[name=debuggrid]){background-color:var(--white);bottom:0;height:auto;left:0;position:fixed;z-index:2}.debug-grid{display:none;height:100%;mix-blend-mode:multiply;opacity:.5;position:fixed;top:0;width:100%}.debug-grid .grid{--name:"small: 0 to 667px";--color-bg-cols:#e9d6f2;height:100%;position:relative}.debug-grid .grid:before{color:color-mix(in hsl,var(--color-bg-cols),#000 20%);content:var(--name);font-size:clamp(.5rem,4vw,3rem);height:100%;left:.5vw;position:absolute;text-align:center;text-orientation:mixed;top:50%;transform:translateY(-50%);transition:color .3s linear .2s;width:100%;writing-mode:vertical-rl}.debug-grid .grid .cols{background-color:var(--color-bg-cols);display:none;grid-column:span 1;height:100%;transition:background-color .3s linear .2s}.debug-grid .grid .cols:nth-child(-n+4){display:block}@media (width > 667px){.debug-grid .grid{--name:"medium: 668px to 1023px";--color-bg-cols:#d6d9f2}.debug-grid .grid .cols:nth-child(-n+8){display:block}}@media (width > 1023px){.debug-grid .grid{--name:"large: 1024px to 1279px";--color-bg-cols:#c1ecec}.debug-grid .grid .cols:nth-child(-n+12){display:block}}@media (width > 1279px){.debug-grid .grid{--name:"extra large: 1280px to 1599px";--color-bg-cols:#c2ecc2}}@media (width > 1599px){.debug-grid .grid{--name:"extra large: 1600px to infinity";--color-bg-cols:#ffd1d3}}body:has([name=debuggrid]:checked) .debug-grid{display:block}.af-btn-client{align-items:center;background-color:var(--button-bg-color-default);border:0;border-radius:var(--button-radius);color:var(--button-text-color-default);display:flex;font-family:var(--font-family-base);font-size:var(--button-font-size);font-weight:600;gap:1rem;justify-content:center;line-height:var(--button-line-height);padding:var(--button-padding);transition-duration:var(--transition-duration);transition-property:width,height,border,color,background-color,outline,box-shadow;transition-timing-function:linear;-webkit-user-select:none;user-select:none}.af-btn-client:focus,.af-btn-client:focus-visible{outline:2px solid var(--button-outline-color);outline-offset:3px}.af-btn-client:disabled,.af-btn-client[aria-disabled=true]{pointer-events:none}.af-btn-client:disabled>[aria-live],.af-btn-client[aria-disabled=true]>[aria-live]{margin:unset}.af-btn-client>svg{aspect-ratio:1;fill:currentcolor}.af-btn-client--ghost{gap:calc(4/var(--font-size-base)*1rem);line-height:1.25em}.af-btn-client--ghost:focus,.af-btn-client--ghost:focus-visible,.af-btn-client--ghost:hover{text-decoration:underline}.af-btn-client--secondary,.af-btn-client--secondary-inverse{box-shadow:0 0 0 2px var(--button-shadow-color) inset}.af-btn-client{--button-bg-color-default:var(--axa-blue-100);--button-text-color-default:var(--white);--button-radius:var(--radius-32);--button-shadow-color:var(--axa-blue-100);--button-padding:calc(12/var(--font-size-base)*1rem) calc(16/var(--font-size-base)*1rem);--button-line-height:calc(24/var(--font-size-base)*1rem);--button-font-size:calc(16/var(--font-size-base)*1rem)}@media (width > 1279px){.af-btn-client{--button-padding:calc(12/var(--font-size-base)*1rem) calc(24/var(--font-size-base)*1rem);--button-line-height:calc(32/var(--font-size-base)*1rem);--button-font-size:calc(18/var(--font-size-base)*1rem)}}.af-btn-client:hover{--button-bg-color-default:var(--axa-blue-120)}.af-btn-client:active{--button-bg-color-default:var(--axa-blue-80)}.af-btn-client:focus,.af-btn-client:focus-visible{--button-outline-color:var(--axa-blue-65)}.af-btn-client:disabled,.af-btn-client[aria-disabled=true]{--button-bg-color-default:var(--neutral-5);--button-text-color-default:var(--neutral-50);--button-shadow-color:var(--neutral-50)}.af-btn-client--primary-business{--button-bg-color-default:var(--warning-100);--button-text-color-default:var(--white)}.af-btn-client--primary-business:active{--button-bg-color-default:var(--warning-80)}.af-btn-client--primary-business:focus,.af-btn-client--primary-business:focus-visible,.af-btn-client--primary-business:hover{--button-bg-color-default:var(--warning-120)}.af-btn-client--primary-inverse{--button-bg-color-default:var(--white);--button-text-color-default:var(--axa-blue-100)}.af-btn-client--primary-inverse:active{--button-bg-color-default:var(--neutral-5);--button-text-color-default:var(--axa-blue-80)}.af-btn-client--primary-inverse:focus,.af-btn-client--primary-inverse:focus-visible,.af-btn-client--primary-inverse:hover{--button-bg-color-default:var(--neutral-14);--button-text-color-default:var(--axa-blue-120)}.af-btn-client--ghost{--button-bg-color-default:#0000;--button-text-color-default:var(--axa-blue-100);--button-padding:0}.af-btn-client--ghost:active{--button-text-color-default:var(--axa-blue-80)}.af-btn-client--ghost:focus,.af-btn-client--ghost:focus-visible,.af-btn-client--ghost:hover{--button-text-color-default:var(--axa-blue-120);--button-bg-color-default:#0000}.af-btn-client--ghost:disabled,.af-btn-client--ghost[aria-disabled=true]{--button-bg-color-default:#0000}.af-btn-client--secondary{--button-bg-color-default:var(--white);--button-text-color-default:var(--axa-blue-100)}.af-btn-client--secondary:active{--button-bg-color-default:var(--axa-blue-80);--button-text-color-default:var(--white);--button-shadow-color:var(--axa-blue-80)}.af-btn-client--secondary:focus,.af-btn-client--secondary:focus-visible,.af-btn-client--secondary:hover{--button-bg-color-default:var(--axa-blue-120);--button-text-color-default:var(--white);--button-shadow-color:var(--axa-blue-120)}.af-btn-client--secondary-inverse{--button-bg-color-default:var(--axa-blue-100);--button-text-color-default:var(--white);--button-shadow-color:var(--white)}.af-btn-client--secondary-inverse:active{--button-bg-color-default:var(--neutral-5);--button-text-color-default:var(--axa-blue-80);--button-shadow-color:var(--neutral-5)}.af-btn-client--secondary-inverse:focus,.af-btn-client--secondary-inverse:focus-visible,.af-btn-client--secondary-inverse:hover{--button-bg-color-default:var(--neutral-14);--button-text-color-default:var(--axa-blue-120);--button-shadow-color:var(--neutral-14)}.af-btn-client--tertiary{--button-bg-color-default:var(--axa-blue-8);--button-text-color-default:var(--axa-blue-100)}.af-btn-client--tertiary:active{--button-bg-color-default:var(--axa-blue-80);--button-text-color-default:var(--white)}.af-btn-client--tertiary:focus,.af-btn-client--tertiary:focus-visible,.af-btn-client--tertiary:hover{--button-bg-color-default:var(--axa-blue-120);--button-text-color-default:var(--white)}.af-spinner{--spinner-size:40;--spinner-border-size:3;align-items:center;animation:spin 2s linear infinite;border:calc(var(--spinner-border-size)*1px) solid var(--spinner-border-color);border-radius:50%;border-top:calc(var(--spinner-border-size)*1px) solid var(--spinner-border-top-color);container-type:inline-size;display:flex;flex-direction:column;height:calc(var(--spinner-size)*1px);justify-content:center;margin:auto;width:calc(var(--spinner-size)*1px)}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.af-spinner{--spinner-border-color:var(--axa-blue-100-20);--spinner-border-top-color:var(--axa-blue-100);border-left:calc(var(--spinner-border-size)*1px) solid var(--spinner-border-top-color);height:calc(var(--spinner-size)*1px - 8px);width:calc(var(--spinner-size)*1px - 8px)}.af-spinner--gray{--spinner-border-color:var(--neutral-50-20);--spinner-border-top-color:var(--neutral-100)}.af-spinner--white{--spinner-border-color:var(--white-20);--spinner-border-top-color:var(--white)}.af-item-message{--item-message-font-size:calc(14/var(--font-size-base)*1rem);align-items:center;display:flex;gap:calc(8/var(--font-size-base)*1rem)}.af-item-message__icon{color:var(--item-message-color);width:var(--item-message-icon-size);fill:currentcolor}.af-item-message__message{color:var(--item-message-color);font-family:var(--font-family-base);font-size:var(--item-message-font-size);line-height:1.25em}@media (width > 1023px){.af-item-message{--item-message-font-size:calc(16/var(--font-size-base)*1rem)}}.af-item-message{--item-message-color:var(--red-alert-100);--item-message-icon-size:calc(20/var(--font-size-base)*1rem)}.af-item-message--success{--item-message-color:var(--green-100)}@media (width > 1023px){.af-item-message{--item-message-icon-size:calc(24/var(--font-size-base)*1rem)}}.af-item-label{display:grid;grid-template-areas:"label sidebutton" "description sidebutton" "more more";grid-template-columns:1fr auto;place-items:end start;row-gap:calc(2/var(--font-size-base)*1rem)}.af-item-label:has(>.af-item-label__description){row-gap:calc(4/var(--font-size-base)*1rem)}.af-item-label:has(>.af-item-label__sidebutton){column-gap:calc(12/var(--font-size-base)*1rem)}.af-item-label>label{color:var(--color-gray-900);font-size:calc(18/var(--font-size-base)*1rem);font-weight:600;grid-area:label;line-height:calc(20/var(--font-size-base)*1rem)}@media (width > 1023px){.af-item-label>label{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(24/var(--font-size-base)*1rem)}}.af-item-label__sidebutton{grid-area:sidebutton;place-self:center end}.af-item-label__sidebutton:has(+.af-item-label__description){align-self:end}.af-item-label__more{grid-area:more}.af-item-label__description{color:var(--label-description-color);font-size:calc(14/var(--font-size-base)*1rem);font-weight:400;grid-area:description;line-height:1.25em}@media (width > 1023px){.af-item-label__description{font-size:calc(16/var(--font-size-base)*1rem);line-height:calc(20/var(--font-size-base)*1rem)}}.af-item-label{--label-description-color:var(--neutral-80)}
|
|
1
|
+
.grid{--col-gap:calc(8/var(--font-size-base)*1rem);--row-gap:calc(16/var(--font-size-base)*1rem);--margin-inline:calc(16/var(--font-size-base)*1rem);--cols:4;--start:auto;display:grid;gap:var(--row-gap) var(--col-gap);grid-template-columns:repeat(var(--cols),1fr);margin-inline:var(--margin-inline)}@media (width > 667px){.grid{--cols:8;--col-gap:calc(16/var(--font-size-base)*1rem);--margin-inline:calc(60/var(--font-size-base)*1rem)}}@media (width > 1023px){.grid{--col-gap:calc(24/var(--font-size-base)*1rem);--margin-inline:calc(80/var(--font-size-base)*1rem);--cols:12}}@media (width > 1279px){.grid{--margin-inline:calc(120/var(--font-size-base)*1rem)}}@media (width > 1599px){.grid{--margin-inline:auto;max-width:1320px}}.grid .subgrid,.grid :has(>.subgrid),.grid>*{align-content:start;display:grid;grid-column:var(--start)/span var(--cols);row-gap:var(--row-gap)}.grid>*>*{--start:auto}.grid .subgrid,.grid :has(>.subgrid){grid-template-columns:subgrid}.grid .subgrid>*,.grid :has(>.subgrid)>*{grid-column:var(--start)/span var(--cols)}.af-checkbox-select--debuggrid label:has(>[name=debuggrid]){background-color:var(--white);bottom:0;height:auto;left:0;position:fixed;z-index:2}.debug-grid{display:none;height:100%;mix-blend-mode:multiply;opacity:.5;position:fixed;top:0;width:100%}.debug-grid .grid{--name:"small: 0 to 667px";--color-bg-cols:#e9d6f2;height:100%;position:relative}.debug-grid .grid:before{color:color-mix(in hsl,var(--color-bg-cols),#000 20%);content:var(--name);font-size:clamp(.5rem,4vw,3rem);height:100%;left:.5vw;position:absolute;text-align:center;text-orientation:mixed;top:50%;transform:translateY(-50%);transition:color .3s linear .2s;width:100%;writing-mode:vertical-rl}.debug-grid .grid .cols{background-color:var(--color-bg-cols);display:none;grid-column:span 1;height:100%;transition:background-color .3s linear .2s}.debug-grid .grid .cols:nth-child(-n+4){display:block}@media (width > 667px){.debug-grid .grid{--name:"medium: 668px to 1023px";--color-bg-cols:#d6d9f2}.debug-grid .grid .cols:nth-child(-n+8){display:block}}@media (width > 1023px){.debug-grid .grid{--name:"large: 1024px to 1279px";--color-bg-cols:#c1ecec}.debug-grid .grid .cols:nth-child(-n+12){display:block}}@media (width > 1279px){.debug-grid .grid{--name:"extra large: 1280px to 1599px";--color-bg-cols:#c2ecc2}}@media (width > 1599px){.debug-grid .grid{--name:"extra large: 1600px to infinity";--color-bg-cols:#ffd1d3}}body:has([name=debuggrid]:checked) .debug-grid{display:block}.af-btn-client{align-items:center;background-color:var(--button-bg-color-default);border:0;border-radius:var(--button-radius);color:var(--button-text-color-default);display:flex;font-family:var(--font-family-base);font-size:var(--button-font-size);font-weight:600;gap:1rem;justify-content:center;line-height:var(--button-line-height);padding:var(--button-padding);transition-duration:var(--transition-duration);transition-property:width,height,border,color,background-color,outline,box-shadow;transition-timing-function:linear;-webkit-user-select:none;user-select:none}.af-btn-client:focus,.af-btn-client:focus-visible{outline:2px solid var(--button-outline-color);outline-offset:3px}.af-btn-client:disabled,.af-btn-client[aria-disabled=true]{pointer-events:none}.af-btn-client:disabled>[aria-live],.af-btn-client[aria-disabled=true]>[aria-live]{margin:unset}.af-btn-client>svg{aspect-ratio:1;fill:currentcolor}.af-btn-client--ghost{gap:calc(4/var(--font-size-base)*1rem);line-height:1.25em}.af-btn-client--ghost:focus,.af-btn-client--ghost:focus-visible,.af-btn-client--ghost:hover{text-decoration:underline}.af-btn-client--secondary,.af-btn-client--secondary-inverse{box-shadow:0 0 0 2px var(--button-shadow-color) inset}.af-btn-client{--button-bg-color-default:var(--axa-blue-100);--button-text-color-default:var(--white);--button-radius:var(--radius-32);--button-shadow-color:var(--axa-blue-100);--button-padding:calc(12/var(--font-size-base)*1rem) calc(16/var(--font-size-base)*1rem);--button-line-height:calc(24/var(--font-size-base)*1rem);--button-font-size:calc(16/var(--font-size-base)*1rem)}@media (width > 1279px){.af-btn-client{--button-padding:calc(12/var(--font-size-base)*1rem) calc(24/var(--font-size-base)*1rem);--button-line-height:calc(32/var(--font-size-base)*1rem);--button-font-size:calc(18/var(--font-size-base)*1rem)}}.af-btn-client:hover{--button-bg-color-default:var(--axa-blue-120)}.af-btn-client:active{--button-bg-color-default:var(--axa-blue-80)}.af-btn-client:focus,.af-btn-client:focus-visible{--button-outline-color:var(--axa-blue-65)}.af-btn-client:disabled,.af-btn-client[aria-disabled=true]{--button-bg-color-default:var(--neutral-5);--button-text-color-default:var(--neutral-50);--button-shadow-color:var(--neutral-50)}.af-btn-client--primary-business{--button-bg-color-default:var(--warning-100);--button-text-color-default:var(--white)}.af-btn-client--primary-business:active{--button-bg-color-default:var(--warning-80)}.af-btn-client--primary-business:focus,.af-btn-client--primary-business:focus-visible,.af-btn-client--primary-business:hover{--button-bg-color-default:var(--warning-120)}.af-btn-client--primary-inverse{--button-bg-color-default:var(--white);--button-text-color-default:var(--axa-blue-100)}.af-btn-client--primary-inverse:active{--button-bg-color-default:var(--neutral-5);--button-text-color-default:var(--axa-blue-80)}.af-btn-client--primary-inverse:focus,.af-btn-client--primary-inverse:focus-visible,.af-btn-client--primary-inverse:hover{--button-bg-color-default:var(--neutral-14);--button-text-color-default:var(--axa-blue-120)}.af-btn-client--ghost{--button-bg-color-default:#0000;--button-text-color-default:var(--axa-blue-100);--button-padding:0}.af-btn-client--ghost:active{--button-text-color-default:var(--axa-blue-80)}.af-btn-client--ghost:focus,.af-btn-client--ghost:focus-visible,.af-btn-client--ghost:hover{--button-text-color-default:var(--axa-blue-120);--button-bg-color-default:#0000}.af-btn-client--ghost:disabled,.af-btn-client--ghost[aria-disabled=true]{--button-bg-color-default:#0000}.af-btn-client--secondary{--button-bg-color-default:var(--white);--button-text-color-default:var(--axa-blue-100)}.af-btn-client--secondary:active{--button-bg-color-default:var(--axa-blue-80);--button-text-color-default:var(--white);--button-shadow-color:var(--axa-blue-80)}.af-btn-client--secondary:focus,.af-btn-client--secondary:focus-visible,.af-btn-client--secondary:hover{--button-bg-color-default:var(--axa-blue-120);--button-text-color-default:var(--white);--button-shadow-color:var(--axa-blue-120)}.af-btn-client--secondary-inverse{--button-bg-color-default:var(--axa-blue-100);--button-text-color-default:var(--white);--button-shadow-color:var(--white)}.af-btn-client--secondary-inverse:active{--button-bg-color-default:var(--neutral-5);--button-text-color-default:var(--axa-blue-80);--button-shadow-color:var(--neutral-5)}.af-btn-client--secondary-inverse:focus,.af-btn-client--secondary-inverse:focus-visible,.af-btn-client--secondary-inverse:hover{--button-bg-color-default:var(--neutral-14);--button-text-color-default:var(--axa-blue-120);--button-shadow-color:var(--neutral-14)}.af-btn-client--tertiary{--button-bg-color-default:var(--axa-blue-8);--button-text-color-default:var(--axa-blue-100)}.af-btn-client--tertiary:active{--button-bg-color-default:var(--axa-blue-80);--button-text-color-default:var(--white)}.af-btn-client--tertiary:focus,.af-btn-client--tertiary:focus-visible,.af-btn-client--tertiary:hover{--button-bg-color-default:var(--axa-blue-120);--button-text-color-default:var(--white)}.af-spinner{--spinner-size:40;--spinner-border-size:3;align-items:center;animation:spin 2s linear infinite;border:calc(var(--spinner-border-size)*1px) solid var(--spinner-border-color);border-radius:50%;border-top:calc(var(--spinner-border-size)*1px) solid var(--spinner-border-top-color);container-type:inline-size;display:flex;flex-direction:column;height:calc(var(--spinner-size)*1px);justify-content:center;margin:auto;width:calc(var(--spinner-size)*1px)}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.af-spinner{--spinner-border-color:var(--axa-blue-100-20);--spinner-border-top-color:var(--axa-blue-100);border-left:calc(var(--spinner-border-size)*1px) solid var(--spinner-border-top-color);height:calc(var(--spinner-size)*1px - 8px);width:calc(var(--spinner-size)*1px - 8px)}.af-spinner--gray{--spinner-border-color:var(--neutral-50-20);--spinner-border-top-color:var(--neutral-100)}.af-spinner--white{--spinner-border-color:var(--white-20);--spinner-border-top-color:var(--white)}.af-item-message{--item-message-font-size:calc(14/var(--font-size-base)*1rem);align-items:center;display:flex;gap:calc(8/var(--font-size-base)*1rem)}.af-item-message__icon{color:var(--item-message-color);width:var(--item-message-icon-size);fill:currentcolor}.af-item-message__message{color:var(--item-message-color);font-family:var(--font-family-base);font-size:var(--item-message-font-size);line-height:1.25em}@media (width > 1023px){.af-item-message{--item-message-font-size:calc(16/var(--font-size-base)*1rem)}}.af-item-message{--item-message-color:var(--red-alert-100);--item-message-icon-size:calc(20/var(--font-size-base)*1rem)}.af-item-message--success{--item-message-color:var(--green-100)}@media (width > 1023px){.af-item-message{--item-message-icon-size:calc(24/var(--font-size-base)*1rem)}}.af-item-label{display:grid;grid-template-areas:"label sidebutton" "description sidebutton" "more more";grid-template-columns:1fr auto;place-items:end start;row-gap:calc(2/var(--font-size-base)*1rem);width:100%}.af-item-label:has(>.af-item-label__description){row-gap:calc(4/var(--font-size-base)*1rem)}.af-item-label:has(>.af-item-label__sidebutton){column-gap:calc(12/var(--font-size-base)*1rem)}.af-item-label>label{color:var(--color-gray-900);font-size:calc(18/var(--font-size-base)*1rem);font-weight:600;grid-area:label;line-height:calc(20/var(--font-size-base)*1rem)}@media (width > 1023px){.af-item-label>label{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(24/var(--font-size-base)*1rem)}}.af-item-label__sidebutton{grid-area:sidebutton;place-self:center end}.af-item-label__sidebutton:has(+.af-item-label__description){align-self:end}.af-item-label__more{grid-area:more}.af-item-label__description{color:var(--label-description-color);font-size:calc(14/var(--font-size-base)*1rem);font-weight:400;grid-area:description;line-height:1.25em}@media (width > 1023px){.af-item-label__description{font-size:calc(16/var(--font-size-base)*1rem);line-height:calc(20/var(--font-size-base)*1rem)}}.af-item-label{--label-description-color:var(--neutral-80)}.af-form__input-container{align-items:flex-start;display:flex;flex-direction:column;row-gap:calc(8/var(--font-size-base)*1rem)}.af-form__input-variant{align-items:center;background-color:var(--input-bg-color);border:1px solid var(--input-border-color);border-radius:var(--input-border-radius);color:var(--input-text-color);display:grid;grid-template-columns:auto min-content;padding:calc(16/var(--font-size-base)*1rem);width:100%}.af-form__input-variant:has(>input~*){column-gap:calc(8/var(--font-size-base)*1rem)}.af-form__input-variant>input{all:unset;color:var(--input-text-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:600;line-height:1.25em}.af-form__input-variant>input::placeholder{color:var(--input-text-placeholder-color);font-weight:400}.af-form__input-variant>input~*{color:var(--input-text-icon-color);fill:var(--input-text-icon-color)}@media (width > 1023px){.af-form__input-variant>input{font-size:calc(18/var(--font-size-base)*1rem)}}.af-form__input-variant:has(>input:is(:hover,:focus,:active)){box-shadow:0 0 0 1px var(--input-border-color) inset}.af-form__input-variant:has(>input:disabled),.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active){box-shadow:unset;cursor:not-allowed}.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active)>input~*,.af-form__input-variant:has(>input:disabled)>input~*{cursor:not-allowed}.af-form__input-helper{color:var(--input-helper-color);font-size:calc(14/var(--font-size-base)*1rem);font-weight:400;line-height:1.25em}@media (width > 1023px){.af-form__input-helper{font-size:calc(16/var(--font-size-base)*1rem)}}.af-form__input-helper{--input-helper-color:var(--neutral-80)}.af-form__input-variant{--input-border-color:var(--axa-blue-65);--input-border-radius:var(--radius-8);--input-bg-color:var(--white);--input-text-color:var(--neutral-80);--input-text-icon-color:var(--axa-blue-100)}.af-form__input-variant:has(>input:not([value=""])){--input-border-color:var(--axa-blue-65)}.af-form__input-variant:has(>input:is(:hover,:focus,:active)){--input-border-color:var(--axa-blue-100);--input-text-placeholder-color:var(--neutral-80)}.af-form__input-variant:has(>input[class*="--error"]){--input-border-color:var(--red-alert-100)}.af-form__input-variant:has(>input:disabled),.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active){--input-border-color:var(--neutral-50);--input-text-color:var(--neutral-50);--input-bg-color:var(--neutral-5);--input-text-icon-color:var(--neutral-50)}.af-form__input-variant:has(>input:disabled)+.af-form__input-helper,.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active)+.af-form__input-helper{--input-helper-color:var(--neutral-50)}
|
package/dist/apollo.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Grid/Grid.scss","../src/apollo.scss","../src/Grid/DebugGrid.scss","../src/Button/ButtonCommon.scss","../src/Button/ButtonApollo.scss","../src/Spinner/SpinnerCommon.scss","../src/Spinner/SpinnerApollo.scss","../src/Form/ItemMessage/ItemMessageCommon.scss","../src/Form/ItemMessage/ItemMessageApollo.scss","../src/Form/ItemLabel/ItemLabelCommon.scss","../src/Form/ItemLabel/ItemLabelApollo.scss"],"names":[],"mappings":"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","file":"apollo.css","sourcesContent":["@use \"../common/breakpoints.scss\" as breakpoints;\n\n/* GRID SYSTEM DESIGN SYSTEM AXA FRANCE (Look & Feel et Apollo) ****************\n\nSee the documentation : https://zeroheight.com/54c5bd254/v/latest/p/48d0d1-grille\n\nIts MOBILE FIRST approach, so the defauts values target the mobile.\n\n@media (width > #{breakpoints.$breakpoint-sm}) { >>>>> more than 667px\n@media (width > #{breakpoints.$breakpoint-md}) { >>>>> more than 1023px\n@media (width > #{breakpoints.$breakpoint-lg}) { >>>>> more than 1279px\n@media (width > #{breakpoints.$breakpoint-xl}) { >>>>> more than 1599px\n\n******************************************************************************* */\n\n.grid {\n --col-gap: calc(8 / var(--font-size-base) * 1rem);\n --row-gap: calc(16 / var(--font-size-base) * 1rem);\n --margin-inline: calc(16 / var(--font-size-base) * 1rem);\n --cols: 4;\n --start: auto;\n\n display: grid;\n margin-inline: var(--margin-inline);\n grid-template-columns: repeat(var(--cols), 1fr);\n gap: var(--row-gap) var(--col-gap);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n --cols: 8;\n --col-gap: calc(16 / var(--font-size-base) * 1rem);\n --margin-inline: calc(60 / var(--font-size-base) * 1rem);\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n --col-gap: calc(24 / var(--font-size-base) * 1rem);\n --margin-inline: calc(80 / var(--font-size-base) * 1rem);\n --cols: 12;\n }\n\n @media (width > #{breakpoints.$breakpoint-lg}) {\n --margin-inline: calc(120 / var(--font-size-base) * 1rem);\n }\n\n @media (width > #{breakpoints.$breakpoint-xl}) {\n --margin-inline: auto;\n\n max-width: 1320px;\n }\n\n > *,\n & .subgrid,\n & :has(> .subgrid) {\n display: grid;\n grid-column: var(--start) / span var(--cols);\n align-content: start;\n row-gap: var(--row-gap);\n }\n\n > * > * {\n --start: auto;\n }\n\n .subgrid,\n & :has(> .subgrid) {\n grid-template-columns: subgrid;\n\n > * {\n grid-column: var(--start) / span var(--cols);\n }\n }\n}\n","@use \"./Grid/Grid\";\n@use \"./Grid/DebugGrid\";\n@use \"./Button/ButtonApollo\";\n@use \"./Spinner/SpinnerApollo\";\n@use \"./Form/ItemMessage/ItemMessageApollo\";\n@use \"./Form/ItemLabel/ItemLabelApollo\";\n","@use \"../common/breakpoints.scss\" as breakpoints;\n\n.af-checkbox-select--debuggrid label:has(> [name=\"debuggrid\"]) {\n position: fixed;\n z-index: 2;\n bottom: 0;\n left: 0;\n height: auto;\n background-color: var(--white);\n}\n\n.debug-grid {\n position: fixed;\n top: 0;\n display: none;\n width: 100%;\n height: 100%;\n opacity: 0.5;\n mix-blend-mode: multiply;\n\n .grid {\n --name: \"small: 0 to 667px\";\n --color-bg-cols: hsl(280.71deg, 51.85%, 89.41%);\n\n position: relative;\n height: 100%;\n\n &::before {\n position: absolute;\n top: 50%;\n left: 0.5vw;\n width: 100%;\n height: 100%;\n font-size: clamp(0.5rem, 4vw, 3rem);\n text-align: center;\n text-orientation: mixed;\n writing-mode: vertical-rl;\n color: color-mix(in hsl, var(--color-bg-cols), rgb(0, 0, 0) 20%);\n transform: translate(0, -50%);\n transition: color 300ms linear 200ms;\n content: var(--name);\n }\n\n .cols {\n display: none;\n height: 100%;\n grid-column: span 1;\n background-color: var(--color-bg-cols);\n transition: background-color 300ms linear 200ms;\n\n &:nth-child(-n + 4) {\n display: block;\n }\n }\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n --name: \"medium: 668px to 1023px\";\n --color-bg-cols: hsl(233.57deg, 51.85%, 89.41%);\n\n .cols:nth-child(-n + 8) {\n display: block;\n }\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n --name: \"large: 1024px to 1279px\";\n --color-bg-cols: hsl(180deg, 53.09%, 84.12%);\n\n .cols:nth-child(-n + 12) {\n display: block;\n }\n }\n\n @media (width > #{breakpoints.$breakpoint-lg}) {\n --name: \"extra large: 1280px to 1599px\";\n --color-bg-cols: hsl(120deg, 52.5%, 84.31%);\n }\n\n @media (width > #{breakpoints.$breakpoint-xl}) {\n --name: \"extra large: 1600px to infinity\";\n --color-bg-cols: hsl(357.39deg, 100%, 90.98%);\n }\n }\n}\n\nbody {\n &:has([name=\"debuggrid\"]:checked) {\n .debug-grid {\n display: block;\n }\n }\n}\n","/* Apollo first and mobile first approch */\n\n@use \"../common/breakpoints\" as breakpoints;\n\n.af-btn-client {\n display: flex;\n padding: var(--button-padding);\n border: 0;\n border-radius: var(--button-radius);\n align-items: center;\n justify-content: center;\n gap: 1rem;\n font-family: var(--font-family-base);\n font-size: var(--button-font-size);\n font-weight: 600;\n line-height: var(--button-line-height);\n color: var(--button-text-color-default);\n background-color: var(--button-bg-color-default);\n transition-duration: var(--transition-duration);\n transition-property:\n width, height, border, color, background-color, outline, box-shadow;\n transition-timing-function: linear;\n user-select: none;\n\n &:focus-visible,\n &:focus {\n outline: 2px solid var(--button-outline-color);\n outline-offset: 3px;\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n pointer-events: none;\n\n & > [aria-live] {\n margin: unset;\n }\n }\n\n & > svg {\n aspect-ratio: 1;\n fill: currentcolor;\n }\n\n &--ghost {\n gap: calc(4 / var(--font-size-base) * 1rem);\n line-height: 1.25em;\n\n &:hover,\n &:focus,\n &:focus-visible {\n text-decoration: underline;\n }\n }\n\n &--secondary {\n box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n }\n\n &--secondary-inverse {\n box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n }\n}\n","/* Apollo first and mobile first approch */\n\n@use \"../common/breakpoints\" as breakpoints;\n\n@use \"./ButtonCommon\";\n\n.af-btn-client {\n --button-bg-color-default: var(--axa-blue-100);\n --button-text-color-default: var(--white);\n --button-radius: var(--radius-32);\n --button-shadow-color: var(--axa-blue-100);\n --button-padding: calc(12 / var(--font-size-base) * 1rem)\n calc(16 / var(--font-size-base) * 1rem);\n --button-line-height: calc(24 / var(--font-size-base) * 1rem);\n --button-font-size: calc(16 / var(--font-size-base) * 1rem);\n\n @media (width > #{breakpoints.$breakpoint-lg}) {\n --button-padding: calc(12 / var(--font-size-base) * 1rem)\n calc(24 / var(--font-size-base) * 1rem);\n --button-line-height: calc(32 / var(--font-size-base) * 1rem);\n --button-font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n\n &:hover {\n --button-bg-color-default: var(--axa-blue-120);\n }\n\n &:active {\n --button-bg-color-default: var(--axa-blue-80);\n }\n\n &:focus-visible,\n &:focus {\n --button-outline-color: var(--axa-blue-65);\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n --button-bg-color-default: var(--neutral-5);\n --button-text-color-default: var(--neutral-50);\n --button-shadow-color: var(--neutral-50);\n }\n\n &--primary-business {\n --button-bg-color-default: var(--warning-100);\n --button-text-color-default: var(--white);\n\n &:active {\n --button-bg-color-default: var(--warning-80);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--warning-120);\n }\n }\n\n &--primary-inverse {\n --button-bg-color-default: var(--white);\n --button-text-color-default: var(--axa-blue-100);\n\n &:active {\n --button-bg-color-default: var(--neutral-5);\n --button-text-color-default: var(--axa-blue-80);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--neutral-14);\n --button-text-color-default: var(--axa-blue-120);\n }\n }\n\n &--ghost {\n --button-bg-color-default: transparent;\n --button-text-color-default: var(--axa-blue-100);\n --button-padding: 0;\n\n &:active {\n --button-text-color-default: var(--axa-blue-80);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-text-color-default: var(--axa-blue-120);\n --button-bg-color-default: transparent;\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n --button-bg-color-default: transparent;\n }\n }\n\n &--secondary {\n --button-bg-color-default: var(--white);\n --button-text-color-default: var(--axa-blue-100);\n\n &:active {\n --button-bg-color-default: var(--axa-blue-80);\n --button-text-color-default: var(--white);\n --button-shadow-color: var(--axa-blue-80);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--axa-blue-120);\n --button-text-color-default: var(--white);\n --button-shadow-color: var(--axa-blue-120);\n }\n }\n\n &--secondary-inverse {\n --button-bg-color-default: var(--axa-blue-100);\n --button-text-color-default: var(--white);\n --button-shadow-color: var(--white);\n\n &:active {\n --button-bg-color-default: var(--neutral-5);\n --button-text-color-default: var(--axa-blue-80);\n --button-shadow-color: var(--neutral-5);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--neutral-14);\n --button-text-color-default: var(--axa-blue-120);\n --button-shadow-color: var(--neutral-14);\n }\n }\n\n &--tertiary {\n --button-bg-color-default: var(--axa-blue-8);\n --button-text-color-default: var(--axa-blue-100);\n\n &:active {\n --button-bg-color-default: var(--axa-blue-80);\n --button-text-color-default: var(--white);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--axa-blue-120);\n --button-text-color-default: var(--white);\n }\n }\n}\n",".af-spinner {\n --spinner-size: 40;\n --spinner-border-size: 3;\n\n display: flex;\n container-type: inline-size;\n width: calc(var(--spinner-size) * 1px);\n height: calc(var(--spinner-size) * 1px);\n margin: auto;\n border: calc(var(--spinner-border-size) * 1px) solid\n var(--spinner-border-color);\n border-top: calc(var(--spinner-border-size) * 1px) solid\n var(--spinner-border-top-color);\n border-radius: 50%;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n animation: spin 2s linear infinite;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n","@use \"./SpinnerCommon\";\n\n.af-spinner {\n --spinner-border-color: var(--axa-blue-100-20);\n --spinner-border-top-color: var(--axa-blue-100);\n\n width: calc(calc(var(--spinner-size) * 1px) - 8px);\n height: calc(calc(var(--spinner-size) * 1px) - 8px);\n border-left: calc(var(--spinner-border-size) * 1px) solid\n var(--spinner-border-top-color);\n\n &--gray {\n --spinner-border-color: var(--neutral-50-20);\n --spinner-border-top-color: var(--neutral-100);\n }\n\n &--white {\n --spinner-border-color: var(--white-20);\n --spinner-border-top-color: var(--white);\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n.af-item-message {\n --item-message-font-size: calc(14 / var(--font-size-base) * 1rem);\n\n display: flex;\n align-items: center;\n gap: calc(8 / var(--font-size-base) * 1rem);\n\n &__icon {\n width: var(--item-message-icon-size);\n color: var(--item-message-color);\n fill: currentcolor;\n }\n\n &__message {\n font-family: var(--font-family-base);\n font-size: var(--item-message-font-size);\n line-height: 1.25em;\n color: var(--item-message-color);\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n --item-message-font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n@use \"./ItemMessageCommon\";\n\n.af-item-message {\n --item-message-color: var(--red-alert-100);\n --item-message-icon-size: calc(20 / var(--font-size-base) * 1rem);\n\n &--success {\n --item-message-color: var(--green-100);\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n --item-message-icon-size: calc(24 / var(--font-size-base) * 1rem);\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n.af-item-label {\n display: grid;\n grid-template-areas:\n \"label sidebutton\"\n \"description sidebutton\"\n \"more more\";\n grid-template-columns: 1fr auto;\n place-items: end start;\n row-gap: calc(2 / var(--font-size-base) * 1rem);\n\n &:has(> .af-item-label__description) {\n row-gap: calc(4 / var(--font-size-base) * 1rem);\n }\n\n &:has(> .af-item-label__sidebutton) {\n column-gap: calc(12 / var(--font-size-base) * 1rem);\n }\n\n > label {\n grid-area: label;\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 600;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n color: var(--color-gray-900);\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n line-height: calc(24 / var(--font-size-base) * 1rem);\n }\n }\n\n &__sidebutton {\n grid-area: sidebutton;\n place-self: center end;\n\n &:has(+ .af-item-label__description) {\n align-self: end;\n }\n }\n\n &__more {\n grid-area: more;\n }\n\n &__description {\n grid-area: description;\n font-size: calc(14 / var(--font-size-base) * 1rem);\n font-weight: 400;\n line-height: 1.25em;\n color: var(--label-description-color);\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n line-height: calc(20 / var(--font-size-base) * 1rem);\n }\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n@use \"./ItemLabelCommon\";\n\n.af-item-label {\n --label-description-color: var(--neutral-80);\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/Grid/Grid.scss","../src/apollo.scss","../src/Grid/DebugGrid.scss","../src/Button/ButtonCommon.scss","../src/Button/ButtonApollo.scss","../src/Spinner/SpinnerCommon.scss","../src/Spinner/SpinnerApollo.scss","../src/Form/ItemMessage/ItemMessageCommon.scss","../src/Form/ItemMessage/ItemMessageApollo.scss","../src/Form/ItemLabel/ItemLabelCommon.scss","../src/Form/ItemLabel/ItemLabelApollo.scss","../src/Form/TextInput/TextInputCommon.scss","../src/Form/TextInput/TextInputApollo.scss"],"names":[],"mappings":"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","file":"apollo.css","sourcesContent":["@use \"../common/breakpoints.scss\" as breakpoints;\n\n/* GRID SYSTEM DESIGN SYSTEM AXA FRANCE (Look & Feel et Apollo) ****************\n\nSee the documentation : https://zeroheight.com/54c5bd254/v/latest/p/48d0d1-grille\n\nIts MOBILE FIRST approach, so the defauts values target the mobile.\n\n@media (width > #{breakpoints.$breakpoint-sm}) { >>>>> more than 667px\n@media (width > #{breakpoints.$breakpoint-md}) { >>>>> more than 1023px\n@media (width > #{breakpoints.$breakpoint-lg}) { >>>>> more than 1279px\n@media (width > #{breakpoints.$breakpoint-xl}) { >>>>> more than 1599px\n\n******************************************************************************* */\n\n.grid {\n --col-gap: calc(8 / var(--font-size-base) * 1rem);\n --row-gap: calc(16 / var(--font-size-base) * 1rem);\n --margin-inline: calc(16 / var(--font-size-base) * 1rem);\n --cols: 4;\n --start: auto;\n\n display: grid;\n margin-inline: var(--margin-inline);\n grid-template-columns: repeat(var(--cols), 1fr);\n gap: var(--row-gap) var(--col-gap);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n --cols: 8;\n --col-gap: calc(16 / var(--font-size-base) * 1rem);\n --margin-inline: calc(60 / var(--font-size-base) * 1rem);\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n --col-gap: calc(24 / var(--font-size-base) * 1rem);\n --margin-inline: calc(80 / var(--font-size-base) * 1rem);\n --cols: 12;\n }\n\n @media (width > #{breakpoints.$breakpoint-lg}) {\n --margin-inline: calc(120 / var(--font-size-base) * 1rem);\n }\n\n @media (width > #{breakpoints.$breakpoint-xl}) {\n --margin-inline: auto;\n\n max-width: 1320px;\n }\n\n > *,\n & .subgrid,\n & :has(> .subgrid) {\n display: grid;\n grid-column: var(--start) / span var(--cols);\n align-content: start;\n row-gap: var(--row-gap);\n }\n\n > * > * {\n --start: auto;\n }\n\n .subgrid,\n & :has(> .subgrid) {\n grid-template-columns: subgrid;\n\n > * {\n grid-column: var(--start) / span var(--cols);\n }\n }\n}\n","@use \"./Grid/Grid\";\n@use \"./Grid/DebugGrid\";\n@use \"./Button/ButtonApollo\";\n@use \"./Spinner/SpinnerApollo\";\n@use \"./Form/ItemMessage/ItemMessageApollo\";\n@use \"./Form/ItemLabel/ItemLabelApollo\";\n@use \"./Form/TextInput/TextInputApollo\";\n","@use \"../common/breakpoints.scss\" as breakpoints;\n\n.af-checkbox-select--debuggrid label:has(> [name=\"debuggrid\"]) {\n position: fixed;\n z-index: 2;\n bottom: 0;\n left: 0;\n height: auto;\n background-color: var(--white);\n}\n\n.debug-grid {\n position: fixed;\n top: 0;\n display: none;\n width: 100%;\n height: 100%;\n opacity: 0.5;\n mix-blend-mode: multiply;\n\n .grid {\n --name: \"small: 0 to 667px\";\n --color-bg-cols: hsl(280.71deg, 51.85%, 89.41%);\n\n position: relative;\n height: 100%;\n\n &::before {\n position: absolute;\n top: 50%;\n left: 0.5vw;\n width: 100%;\n height: 100%;\n font-size: clamp(0.5rem, 4vw, 3rem);\n text-align: center;\n text-orientation: mixed;\n writing-mode: vertical-rl;\n color: color-mix(in hsl, var(--color-bg-cols), rgb(0, 0, 0) 20%);\n transform: translate(0, -50%);\n transition: color 300ms linear 200ms;\n content: var(--name);\n }\n\n .cols {\n display: none;\n height: 100%;\n grid-column: span 1;\n background-color: var(--color-bg-cols);\n transition: background-color 300ms linear 200ms;\n\n &:nth-child(-n + 4) {\n display: block;\n }\n }\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n --name: \"medium: 668px to 1023px\";\n --color-bg-cols: hsl(233.57deg, 51.85%, 89.41%);\n\n .cols:nth-child(-n + 8) {\n display: block;\n }\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n --name: \"large: 1024px to 1279px\";\n --color-bg-cols: hsl(180deg, 53.09%, 84.12%);\n\n .cols:nth-child(-n + 12) {\n display: block;\n }\n }\n\n @media (width > #{breakpoints.$breakpoint-lg}) {\n --name: \"extra large: 1280px to 1599px\";\n --color-bg-cols: hsl(120deg, 52.5%, 84.31%);\n }\n\n @media (width > #{breakpoints.$breakpoint-xl}) {\n --name: \"extra large: 1600px to infinity\";\n --color-bg-cols: hsl(357.39deg, 100%, 90.98%);\n }\n }\n}\n\nbody {\n &:has([name=\"debuggrid\"]:checked) {\n .debug-grid {\n display: block;\n }\n }\n}\n","/* Apollo first and mobile first approch */\n\n@use \"../common/breakpoints\" as breakpoints;\n\n.af-btn-client {\n display: flex;\n padding: var(--button-padding);\n border: 0;\n border-radius: var(--button-radius);\n align-items: center;\n justify-content: center;\n gap: 1rem;\n font-family: var(--font-family-base);\n font-size: var(--button-font-size);\n font-weight: 600;\n line-height: var(--button-line-height);\n color: var(--button-text-color-default);\n background-color: var(--button-bg-color-default);\n transition-duration: var(--transition-duration);\n transition-property:\n width, height, border, color, background-color, outline, box-shadow;\n transition-timing-function: linear;\n user-select: none;\n\n &:focus-visible,\n &:focus {\n outline: 2px solid var(--button-outline-color);\n outline-offset: 3px;\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n pointer-events: none;\n\n & > [aria-live] {\n margin: unset;\n }\n }\n\n & > svg {\n aspect-ratio: 1;\n fill: currentcolor;\n }\n\n &--ghost {\n gap: calc(4 / var(--font-size-base) * 1rem);\n line-height: 1.25em;\n\n &:hover,\n &:focus,\n &:focus-visible {\n text-decoration: underline;\n }\n }\n\n &--secondary {\n box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n }\n\n &--secondary-inverse {\n box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n }\n}\n","/* Apollo first and mobile first approch */\n\n@use \"../common/breakpoints\" as breakpoints;\n\n@use \"./ButtonCommon\";\n\n.af-btn-client {\n --button-bg-color-default: var(--axa-blue-100);\n --button-text-color-default: var(--white);\n --button-radius: var(--radius-32);\n --button-shadow-color: var(--axa-blue-100);\n --button-padding: calc(12 / var(--font-size-base) * 1rem)\n calc(16 / var(--font-size-base) * 1rem);\n --button-line-height: calc(24 / var(--font-size-base) * 1rem);\n --button-font-size: calc(16 / var(--font-size-base) * 1rem);\n\n @media (width > #{breakpoints.$breakpoint-lg}) {\n --button-padding: calc(12 / var(--font-size-base) * 1rem)\n calc(24 / var(--font-size-base) * 1rem);\n --button-line-height: calc(32 / var(--font-size-base) * 1rem);\n --button-font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n\n &:hover {\n --button-bg-color-default: var(--axa-blue-120);\n }\n\n &:active {\n --button-bg-color-default: var(--axa-blue-80);\n }\n\n &:focus-visible,\n &:focus {\n --button-outline-color: var(--axa-blue-65);\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n --button-bg-color-default: var(--neutral-5);\n --button-text-color-default: var(--neutral-50);\n --button-shadow-color: var(--neutral-50);\n }\n\n &--primary-business {\n --button-bg-color-default: var(--warning-100);\n --button-text-color-default: var(--white);\n\n &:active {\n --button-bg-color-default: var(--warning-80);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--warning-120);\n }\n }\n\n &--primary-inverse {\n --button-bg-color-default: var(--white);\n --button-text-color-default: var(--axa-blue-100);\n\n &:active {\n --button-bg-color-default: var(--neutral-5);\n --button-text-color-default: var(--axa-blue-80);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--neutral-14);\n --button-text-color-default: var(--axa-blue-120);\n }\n }\n\n &--ghost {\n --button-bg-color-default: transparent;\n --button-text-color-default: var(--axa-blue-100);\n --button-padding: 0;\n\n &:active {\n --button-text-color-default: var(--axa-blue-80);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-text-color-default: var(--axa-blue-120);\n --button-bg-color-default: transparent;\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n --button-bg-color-default: transparent;\n }\n }\n\n &--secondary {\n --button-bg-color-default: var(--white);\n --button-text-color-default: var(--axa-blue-100);\n\n &:active {\n --button-bg-color-default: var(--axa-blue-80);\n --button-text-color-default: var(--white);\n --button-shadow-color: var(--axa-blue-80);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--axa-blue-120);\n --button-text-color-default: var(--white);\n --button-shadow-color: var(--axa-blue-120);\n }\n }\n\n &--secondary-inverse {\n --button-bg-color-default: var(--axa-blue-100);\n --button-text-color-default: var(--white);\n --button-shadow-color: var(--white);\n\n &:active {\n --button-bg-color-default: var(--neutral-5);\n --button-text-color-default: var(--axa-blue-80);\n --button-shadow-color: var(--neutral-5);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--neutral-14);\n --button-text-color-default: var(--axa-blue-120);\n --button-shadow-color: var(--neutral-14);\n }\n }\n\n &--tertiary {\n --button-bg-color-default: var(--axa-blue-8);\n --button-text-color-default: var(--axa-blue-100);\n\n &:active {\n --button-bg-color-default: var(--axa-blue-80);\n --button-text-color-default: var(--white);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--axa-blue-120);\n --button-text-color-default: var(--white);\n }\n }\n}\n",".af-spinner {\n --spinner-size: 40;\n --spinner-border-size: 3;\n\n display: flex;\n container-type: inline-size;\n width: calc(var(--spinner-size) * 1px);\n height: calc(var(--spinner-size) * 1px);\n margin: auto;\n border: calc(var(--spinner-border-size) * 1px) solid\n var(--spinner-border-color);\n border-top: calc(var(--spinner-border-size) * 1px) solid\n var(--spinner-border-top-color);\n border-radius: 50%;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n animation: spin 2s linear infinite;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n","@use \"./SpinnerCommon\";\n\n.af-spinner {\n --spinner-border-color: var(--axa-blue-100-20);\n --spinner-border-top-color: var(--axa-blue-100);\n\n width: calc(calc(var(--spinner-size) * 1px) - 8px);\n height: calc(calc(var(--spinner-size) * 1px) - 8px);\n border-left: calc(var(--spinner-border-size) * 1px) solid\n var(--spinner-border-top-color);\n\n &--gray {\n --spinner-border-color: var(--neutral-50-20);\n --spinner-border-top-color: var(--neutral-100);\n }\n\n &--white {\n --spinner-border-color: var(--white-20);\n --spinner-border-top-color: var(--white);\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n.af-item-message {\n --item-message-font-size: calc(14 / var(--font-size-base) * 1rem);\n\n display: flex;\n align-items: center;\n gap: calc(8 / var(--font-size-base) * 1rem);\n\n &__icon {\n width: var(--item-message-icon-size);\n color: var(--item-message-color);\n fill: currentcolor;\n }\n\n &__message {\n font-family: var(--font-family-base);\n font-size: var(--item-message-font-size);\n line-height: 1.25em;\n color: var(--item-message-color);\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n --item-message-font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n@use \"./ItemMessageCommon\";\n\n.af-item-message {\n --item-message-color: var(--red-alert-100);\n --item-message-icon-size: calc(20 / var(--font-size-base) * 1rem);\n\n &--success {\n --item-message-color: var(--green-100);\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n --item-message-icon-size: calc(24 / var(--font-size-base) * 1rem);\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n.af-item-label {\n display: grid;\n width: 100%;\n grid-template-areas:\n \"label sidebutton\"\n \"description sidebutton\"\n \"more more\";\n grid-template-columns: 1fr auto;\n place-items: end start;\n row-gap: calc(2 / var(--font-size-base) * 1rem);\n\n &:has(> .af-item-label__description) {\n row-gap: calc(4 / var(--font-size-base) * 1rem);\n }\n\n &:has(> .af-item-label__sidebutton) {\n column-gap: calc(12 / var(--font-size-base) * 1rem);\n }\n\n > label {\n grid-area: label;\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 600;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n color: var(--color-gray-900);\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n line-height: calc(24 / var(--font-size-base) * 1rem);\n }\n }\n\n &__sidebutton {\n grid-area: sidebutton;\n place-self: center end;\n\n &:has(+ .af-item-label__description) {\n align-self: end;\n }\n }\n\n &__more {\n grid-area: more;\n }\n\n &__description {\n grid-area: description;\n font-size: calc(14 / var(--font-size-base) * 1rem);\n font-weight: 400;\n line-height: 1.25em;\n color: var(--label-description-color);\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n line-height: calc(20 / var(--font-size-base) * 1rem);\n }\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n@use \"./ItemLabelCommon\";\n\n.af-item-label {\n --label-description-color: var(--neutral-80);\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n.af-form {\n &__input-container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n row-gap: calc(8 / var(--font-size-base) * 1rem);\n }\n\n &__input-variant {\n display: grid;\n width: 100%;\n padding: calc(16 / var(--font-size-base) * 1rem);\n border: 1px solid var(--input-border-color);\n border-radius: var(--input-border-radius);\n grid-template-columns: auto min-content;\n align-items: center;\n color: var(--input-text-color);\n background-color: var(--input-bg-color);\n\n &:has(> input ~ *) {\n column-gap: calc(8 / var(--font-size-base) * 1rem);\n }\n\n > input {\n all: unset;\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 600;\n line-height: 1.25em;\n color: var(--input-text-color);\n\n &::placeholder {\n font-weight: 400;\n color: var(--input-text-placeholder-color);\n }\n\n & ~ * {\n color: var(--input-text-icon-color);\n fill: var(--input-text-icon-color);\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n }\n\n &:has(> input:is(:hover, :focus, :active)) {\n box-shadow: 0 0 0 1px var(--input-border-color) inset;\n }\n\n &:has(> input:disabled),\n &:has(> input:disabled):is(:hover, :focus, :active) {\n box-shadow: unset;\n cursor: not-allowed;\n\n & > input ~ * {\n cursor: not-allowed;\n }\n }\n }\n\n &__input-helper {\n font-size: calc(14 / var(--font-size-base) * 1rem);\n font-weight: 400;\n line-height: 1.25em;\n color: var(--input-helper-color);\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n@use \"./TextInputCommon\";\n\n.af-form {\n &__input-helper {\n --input-helper-color: var(--neutral-80);\n }\n\n &__input-variant {\n --input-border-color: var(--axa-blue-65);\n --input-border-radius: var(--radius-8);\n --input-bg-color: var(--white);\n --input-text-color: var(--neutral-80);\n --input-text-icon-color: var(--axa-blue-100);\n\n &:has(> input:not([value=\"\"])) {\n --input-border-color: var(--axa-blue-65);\n }\n\n &:has(> input:is(:hover, :focus, :active)) {\n --input-border-color: var(--axa-blue-100);\n --input-text-placeholder-color: var(--neutral-80);\n }\n\n &:has(> input[class*=\"--error\"]) {\n --input-border-color: var(--red-alert-100);\n }\n\n &:has(> input:disabled),\n &:has(> input:disabled):is(:hover, :focus, :active) {\n --input-border-color: var(--neutral-50);\n --input-text-color: var(--neutral-50);\n --input-bg-color: var(--neutral-5);\n --input-text-icon-color: var(--neutral-50);\n\n + .af-form__input-helper {\n --input-helper-color: var(--neutral-50);\n }\n }\n }\n}\n"]}
|
package/dist/apollo.scss
CHANGED
package/dist/common/tokens.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--font-family-sans-serif:"Source Sans Pro",arial,sans-serif;--font-family-serif:georgia,times,"Times New Roman",serif;--font-family-base:var(--font-family-sans-serif);--font-family-publico-bold:"Publico Headline Bold";--font-family-publico:"Publico Headline";--font-size-base:16;--black:#000;--black-20:hsl(from var(--black) h s l/20%);--white:#fff;--white-20:hsl(from var(--white) h s l/20%);--axa-blue-100:#00008f;--axa-blue-100-20:hsl(from var(--axa-blue-100) h s l/20%);--axa-blue-100-40:hsl(from var(--axa-blue-100) h s l/40%);--axa-blue-20:#
|
|
1
|
+
:root{--font-family-sans-serif:"Source Sans Pro",arial,sans-serif;--font-family-serif:georgia,times,"Times New Roman",serif;--font-family-base:var(--font-family-sans-serif);--font-family-publico-bold:"Publico Headline Bold";--font-family-publico:"Publico Headline";--font-size-base:16;--black:#000;--black-20:hsl(from var(--black) h s l/20%);--white:#fff;--white-20:hsl(from var(--white) h s l/20%);--axa-blue-100:#00008f;--axa-blue-100-20:hsl(from var(--axa-blue-100) h s l/20%);--axa-blue-100-40:hsl(from var(--axa-blue-100) h s l/40%);--axa-blue-20:#cdcdea;--axa-blue-4:#f4f4fb;--axa-blue-65:#6060af;--axa-blue-8:#e0e0f0;--axa-blue-80:#3232a4;--axa-blue-120:#000070;--axa-red-100:#ff1925;--axa-red-4:#fff5f5;--axa-red-digital-100:#ff424c;--red-alert-100:#e60000;--red-alert-80:#ff1f1f;--warning-100:#c84d14;--warning-120:#a23e10;--warning-4:#fef9f6;--warning-80:#d57244;--dark:hsl(from var(--black) h s 7%);--neutral-100:hsl(from var(--black) h s 20%);--neutral-80:hsl(from var(--black) h s 36%);--neutral-50:hsl(from var(--black) h s 60%);--neutral-50-20:hsl(from var(--neutral-50) h s l/20%);--neutral-25:hsl(from var(--black) h s 80%);--neutral-14:hsl(from var(--black) h s 90%);--neutral-5:hsl(from var(--black) h s 96%);--green-100:#188138;--aqua-green-12:#f4faf7;--radius-8:8px;--radius-32:32px;--radius-100:100vmax}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/common/tokens.scss%23sass","../../src/common/tokens.scss"],"names":[],"mappings":"AACA,MAME,2DAAA,CACA,yDAAA,CACA,gDAAA,CACA,kDAAA,CACA,wCAAA,CACA,mBAAA,CAUA,YAAA,CACA,2CAAA,CACA,YAAA,CACA,2CAAA,CAIA,sBAAA,CACA,yDAAA,CACA,yDAAA,CACA,qBAAA,CACA,oBAAA,CACA,qBAAA,CACA,oBAAA,CACA,
|
|
1
|
+
{"version":3,"sources":["../../src/common/tokens.scss%23sass","../../src/common/tokens.scss"],"names":[],"mappings":"AACA,MAME,2DAAA,CACA,yDAAA,CACA,gDAAA,CACA,kDAAA,CACA,wCAAA,CACA,mBAAA,CAUA,YAAA,CACA,2CAAA,CACA,YAAA,CACA,2CAAA,CAIA,sBAAA,CACA,yDAAA,CACA,yDAAA,CACA,qBAAA,CACA,oBAAA,CACA,qBAAA,CACA,oBAAA,CACA,qBAAA,CACA,sBAAA,CAIA,qBAAA,CACA,mBAAA,CACA,6BAAA,CACA,uBAAA,CACA,sBAAA,CAIA,qBAAA,CACA,qBAAA,CACA,mBAAA,CACA,oBAAA,CAIA,oCAAA,CACA,4CAAA,CACA,2CAAA,CACA,2CAAA,CACA,qDAAA,CACA,2CAAA,CACA,2CAAA,CACA,0CAAA,CAGA,mBAAA,CACA,uBAAA,CA0BA,cAAA,CACA,gBAAA,CACA,oBCzBF","file":"tokens.css","sourcesContent":["/* stylelint-disable color-function-notation */\n:root {\n /* *************************************************************************/\n\n /* FONTS */\n\n /* *************************************************************************/\n --font-family-sans-serif: \"Source Sans Pro\", arial, sans-serif;\n --font-family-serif: georgia, times, \"Times New Roman\", serif;\n --font-family-base: var(--font-family-sans-serif);\n --font-family-publico-bold: \"Publico Headline Bold\";\n --font-family-publico: \"Publico Headline\";\n --font-size-base: 16;\n\n /* *************************************************************************/\n\n /* COLORS */\n\n /* *************************************************************************/\n\n /* PRIMITIVES **************************************************************/\n\n --black: hsl(0deg, 0%, 0%);\n --black-20: hsl(from var(--black) h s l / 20%);\n --white: hsl(0deg, 0%, 100%);\n --white-20: hsl(from var(--white) h s l / 20%);\n\n /* blue */\n\n --axa-blue-100: hsl(240deg, 100%, 28%);\n --axa-blue-100-20: hsl(from var(--axa-blue-100) h s l / 20%);\n --axa-blue-100-40: hsl(from var(--axa-blue-100) h s l / 40%);\n --axa-blue-20: hsl(240deg, 40%, 86%);\n --axa-blue-4: hsl(240deg, 43%, 97%);\n --axa-blue-65: hsl(240deg, 33%, 53%);\n --axa-blue-8: hsl(240deg, 33%, 91%);\n --axa-blue-80: hsl(240deg, 53%, 42%);\n --axa-blue-120: hsl(240deg, 100%, 22%);\n\n /* red */\n\n --axa-red-100: hsl(357deg, 100%, 55%);\n --axa-red-4: hsl(0deg, 100%, 98%);\n --axa-red-digital-100: hsl(357deg, 100%, 63%);\n --red-alert-100: hsl(0deg, 100%, 45%);\n --red-alert-80: hsl(0deg, 100%, 56%);\n\n /* orange */\n\n --warning-100: hsl(19deg, 82%, 43%);\n --warning-120: hsl(19deg, 82%, 35%);\n --warning-4: hsl(20deg, 80%, 98%);\n --warning-80: hsl(19deg, 63%, 55%);\n\n /* gray */\n\n --dark: hsl(from var(--black) h s 7%);\n --neutral-100: hsl(from var(--black) h s 20%);\n --neutral-80: hsl(from var(--black) h s 36%);\n --neutral-50: hsl(from var(--black) h s 60%);\n --neutral-50-20: hsl(from var(--neutral-50) h s l / 20%);\n --neutral-25: hsl(from var(--black) h s 80%);\n --neutral-14: hsl(from var(--black) h s 90%);\n --neutral-5: hsl(from var(--black) h s 96%);\n\n /* green */\n --green-100: hsl(138deg, 68%, 30%);\n --aqua-green-12: hsl(146deg, 41%, 97%);\n\n /* *************************************************************************/\n\n /* SIZING */\n\n /* *************************************************************************/\n\n /* *************************************************************************/\n\n /* SPACING */\n\n /* *************************************************************************/\n\n /* *************************************************************************/\n\n /* BREAKPOINTS */\n\n /* *************************************************************************/\n\n /* *************************************************************************/\n\n /* BORDERS */\n\n /* *************************************************************************/\n\n --radius-8: 8px;\n --radius-32: 32px;\n --radius-100: 100vmax;\n\n /* *************************************************************************/\n\n /* ANIMATIONS */\n\n /* *************************************************************************/\n}\n","/* stylelint-disable color-function-notation */\n:root {\n /* *************************************************************************/\n\n /* FONTS */\n\n /* *************************************************************************/\n --font-family-sans-serif: \"Source Sans Pro\", arial, sans-serif;\n --font-family-serif: georgia, times, \"Times New Roman\", serif;\n --font-family-base: var(--font-family-sans-serif);\n --font-family-publico-bold: \"Publico Headline Bold\";\n --font-family-publico: \"Publico Headline\";\n --font-size-base: 16;\n\n /* *************************************************************************/\n\n /* COLORS */\n\n /* *************************************************************************/\n\n /* PRIMITIVES **************************************************************/\n\n --black: hsl(0deg, 0%, 0%);\n --black-20: hsl(from var(--black) h s l / 20%);\n --white: hsl(0deg, 0%, 100%);\n --white-20: hsl(from var(--white) h s l / 20%);\n\n /* blue */\n\n --axa-blue-100: hsl(240deg, 100%, 28%);\n --axa-blue-100-20: hsl(from var(--axa-blue-100) h s l / 20%);\n --axa-blue-100-40: hsl(from var(--axa-blue-100) h s l / 40%);\n --axa-blue-20: hsl(240deg, 40%, 86%);\n --axa-blue-4: hsl(240deg, 43%, 97%);\n --axa-blue-65: hsl(240deg, 33%, 53%);\n --axa-blue-8: hsl(240deg, 33%, 91%);\n --axa-blue-80: hsl(240deg, 53%, 42%);\n --axa-blue-120: hsl(240deg, 100%, 22%);\n\n /* red */\n\n --axa-red-100: hsl(357deg, 100%, 55%);\n --axa-red-4: hsl(0deg, 100%, 98%);\n --axa-red-digital-100: hsl(357deg, 100%, 63%);\n --red-alert-100: hsl(0deg, 100%, 45%);\n --red-alert-80: hsl(0deg, 100%, 56%);\n\n /* orange */\n\n --warning-100: hsl(19deg, 82%, 43%);\n --warning-120: hsl(19deg, 82%, 35%);\n --warning-4: hsl(20deg, 80%, 98%);\n --warning-80: hsl(19deg, 63%, 55%);\n\n /* gray */\n\n --dark: hsl(from var(--black) h s 7%);\n --neutral-100: hsl(from var(--black) h s 20%);\n --neutral-80: hsl(from var(--black) h s 36%);\n --neutral-50: hsl(from var(--black) h s 60%);\n --neutral-50-20: hsl(from var(--neutral-50) h s l / 20%);\n --neutral-25: hsl(from var(--black) h s 80%);\n --neutral-14: hsl(from var(--black) h s 90%);\n --neutral-5: hsl(from var(--black) h s 96%);\n\n /* green */\n --green-100: hsl(138deg, 68%, 30%);\n --aqua-green-12: hsl(146deg, 41%, 97%);\n\n /* *************************************************************************/\n\n /* SIZING */\n\n /* *************************************************************************/\n\n /* *************************************************************************/\n\n /* SPACING */\n\n /* *************************************************************************/\n\n /* *************************************************************************/\n\n /* BREAKPOINTS */\n\n /* *************************************************************************/\n\n /* *************************************************************************/\n\n /* BORDERS */\n\n /* *************************************************************************/\n\n --radius-8: 8px;\n --radius-32: 32px;\n --radius-100: 100vmax;\n\n /* *************************************************************************/\n\n /* ANIMATIONS */\n\n /* *************************************************************************/\n}\n"]}
|
package/dist/common/tokens.scss
CHANGED
|
@@ -30,28 +30,30 @@
|
|
|
30
30
|
--axa-blue-100: hsl(240deg, 100%, 28%);
|
|
31
31
|
--axa-blue-100-20: hsl(from var(--axa-blue-100) h s l / 20%);
|
|
32
32
|
--axa-blue-100-40: hsl(from var(--axa-blue-100) h s l / 40%);
|
|
33
|
-
--axa-blue-20: hsl(240deg,
|
|
34
|
-
--axa-blue-4: hsl(240deg,
|
|
33
|
+
--axa-blue-20: hsl(240deg, 40%, 86%);
|
|
34
|
+
--axa-blue-4: hsl(240deg, 43%, 97%);
|
|
35
35
|
--axa-blue-65: hsl(240deg, 33%, 53%);
|
|
36
36
|
--axa-blue-8: hsl(240deg, 33%, 91%);
|
|
37
|
-
--axa-blue-80: hsl(240deg,
|
|
37
|
+
--axa-blue-80: hsl(240deg, 53%, 42%);
|
|
38
38
|
--axa-blue-120: hsl(240deg, 100%, 22%);
|
|
39
39
|
|
|
40
40
|
/* red */
|
|
41
41
|
|
|
42
|
-
--axa-red-100: hsl(357deg, 100%,
|
|
43
|
-
--axa-red-4: hsl(
|
|
42
|
+
--axa-red-100: hsl(357deg, 100%, 55%);
|
|
43
|
+
--axa-red-4: hsl(0deg, 100%, 98%);
|
|
44
44
|
--axa-red-digital-100: hsl(357deg, 100%, 63%);
|
|
45
45
|
--red-alert-100: hsl(0deg, 100%, 45%);
|
|
46
46
|
--red-alert-80: hsl(0deg, 100%, 56%);
|
|
47
47
|
|
|
48
48
|
/* orange */
|
|
49
|
-
|
|
50
|
-
--warning-
|
|
49
|
+
|
|
50
|
+
--warning-100: hsl(19deg, 82%, 43%);
|
|
51
|
+
--warning-120: hsl(19deg, 82%, 35%);
|
|
51
52
|
--warning-4: hsl(20deg, 80%, 98%);
|
|
52
|
-
--warning-80: hsl(
|
|
53
|
+
--warning-80: hsl(19deg, 63%, 55%);
|
|
53
54
|
|
|
54
55
|
/* gray */
|
|
56
|
+
|
|
55
57
|
--dark: hsl(from var(--black) h s 7%);
|
|
56
58
|
--neutral-100: hsl(from var(--black) h s 20%);
|
|
57
59
|
--neutral-80: hsl(from var(--black) h s 36%);
|
|
@@ -63,7 +65,7 @@
|
|
|
63
65
|
|
|
64
66
|
/* green */
|
|
65
67
|
--green-100: hsl(138deg, 68%, 30%);
|
|
66
|
-
--aqua-green-12: hsl(
|
|
68
|
+
--aqua-green-12: hsl(146deg, 41%, 97%);
|
|
67
69
|
|
|
68
70
|
/* *************************************************************************/
|
|
69
71
|
|
package/dist/look-and-feel.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.grid{--col-gap:calc(8/var(--font-size-base)*1rem);--row-gap:calc(16/var(--font-size-base)*1rem);--margin-inline:calc(16/var(--font-size-base)*1rem);--cols:4;--start:auto;display:grid;gap:var(--row-gap) var(--col-gap);grid-template-columns:repeat(var(--cols),1fr);margin-inline:var(--margin-inline)}@media (width > 667px){.grid{--cols:8;--col-gap:calc(16/var(--font-size-base)*1rem);--margin-inline:calc(60/var(--font-size-base)*1rem)}}@media (width > 1023px){.grid{--col-gap:calc(24/var(--font-size-base)*1rem);--margin-inline:calc(80/var(--font-size-base)*1rem);--cols:12}}@media (width > 1279px){.grid{--margin-inline:calc(120/var(--font-size-base)*1rem)}}@media (width > 1599px){.grid{--margin-inline:auto;max-width:1320px}}.grid .subgrid,.grid :has(>.subgrid),.grid>*{align-content:start;display:grid;grid-column:var(--start)/span var(--cols);row-gap:var(--row-gap)}.grid>*>*{--start:auto}.grid .subgrid,.grid :has(>.subgrid){grid-template-columns:subgrid}.grid .subgrid>*,.grid :has(>.subgrid)>*{grid-column:var(--start)/span var(--cols)}.af-checkbox-select--debuggrid label:has(>[name=debuggrid]){background-color:var(--white);bottom:0;height:auto;left:0;position:fixed;z-index:2}.debug-grid{display:none;height:100%;mix-blend-mode:multiply;opacity:.5;position:fixed;top:0;width:100%}.debug-grid .grid{--name:"small: 0 to 667px";--color-bg-cols:#e9d6f2;height:100%;position:relative}.debug-grid .grid:before{color:color-mix(in hsl,var(--color-bg-cols),#000 20%);content:var(--name);font-size:clamp(.5rem,4vw,3rem);height:100%;left:.5vw;position:absolute;text-align:center;text-orientation:mixed;top:50%;transform:translateY(-50%);transition:color .3s linear .2s;width:100%;writing-mode:vertical-rl}.debug-grid .grid .cols{background-color:var(--color-bg-cols);display:none;grid-column:span 1;height:100%;transition:background-color .3s linear .2s}.debug-grid .grid .cols:nth-child(-n+4){display:block}@media (width > 667px){.debug-grid .grid{--name:"medium: 668px to 1023px";--color-bg-cols:#d6d9f2}.debug-grid .grid .cols:nth-child(-n+8){display:block}}@media (width > 1023px){.debug-grid .grid{--name:"large: 1024px to 1279px";--color-bg-cols:#c1ecec}.debug-grid .grid .cols:nth-child(-n+12){display:block}}@media (width > 1279px){.debug-grid .grid{--name:"extra large: 1280px to 1599px";--color-bg-cols:#c2ecc2}}@media (width > 1599px){.debug-grid .grid{--name:"extra large: 1600px to infinity";--color-bg-cols:#ffd1d3}}body:has([name=debuggrid]:checked) .debug-grid{display:block}.af-btn-client{align-items:center;background-color:var(--button-bg-color-default);border:0;border-radius:var(--button-radius);color:var(--button-text-color-default);display:flex;font-family:var(--font-family-base);font-size:var(--button-font-size);font-weight:600;gap:1rem;justify-content:center;line-height:var(--button-line-height);padding:var(--button-padding);transition-duration:var(--transition-duration);transition-property:width,height,border,color,background-color,outline,box-shadow;transition-timing-function:linear;-webkit-user-select:none;user-select:none}.af-btn-client:focus,.af-btn-client:focus-visible{outline:2px solid var(--button-outline-color);outline-offset:3px}.af-btn-client:disabled,.af-btn-client[aria-disabled=true]{pointer-events:none}.af-btn-client:disabled>[aria-live],.af-btn-client[aria-disabled=true]>[aria-live]{margin:unset}.af-btn-client>svg{aspect-ratio:1;fill:currentcolor}.af-btn-client--ghost{gap:calc(4/var(--font-size-base)*1rem);line-height:1.25em}.af-btn-client--ghost:focus,.af-btn-client--ghost:focus-visible,.af-btn-client--ghost:hover{text-decoration:underline}.af-btn-client--secondary{box-shadow:0 0 0 2px var(--button-shadow-color) inset}.af-btn-client{--button-bg-color-default:var(--color-axa);--button-text-color-default:var(--color-white);--button-radius:var(--radius-8);--button-shadow-color:var(--color-axa);--button-padding:calc(16/var(--font-size-base)*1rem) calc(61.5/var(--font-size-base)*1rem);--button-line-height:calc(20/var(--font-size-base)*1rem);--button-font-size:calc(16/var(--font-size-base)*1rem)}@media (width > 1279px){.af-btn-client{--button-line-height:calc(22.5/var(--font-size-base)*1rem);--button-font-size:calc(18/var(--font-size-base)*1rem)}}.af-btn-client:hover{--button-bg-color-default:var(--color-blue-1)}.af-btn-client:active,.af-btn-client:focus,.af-btn-client:focus-visible{--button-bg-color-default:var(--color-btn-light)}.af-btn-client:focus,.af-btn-client:focus-visible{--button-outline-color:var(--color-blue-3)}.af-btn-client:disabled,.af-btn-client[aria-disabled=true]{--button-bg-color-default:var(--color-gray-300);--button-text-color-default:var(--color-gray-500);--button-shadow-color:var(--color-gray-500)}.af-btn-client--primary-business{--button-bg-color-default:var(--color-btn-business)}.af-btn-client--primary-business:active,.af-btn-client--primary-business:focus,.af-btn-client--primary-business:focus-visible{--button-bg-color-default:var(--color-btn-business-light)}.af-btn-client--primary-business:hover{--button-bg-color-default:var(--color-btn-business-dark)}.af-btn-client--primary-inverse{--button-text-color-default:var(--color-axa);--button-bg-color-default:var(--color-white)}.af-btn-client--primary-inverse:active{--button-bg-color-default:var(--color-white);--button-text-color-default:var(--color-btn-business-light)}.af-btn-client--primary-inverse:focus,.af-btn-client--primary-inverse:focus-visible,.af-btn-client--primary-inverse:hover{--button-bg-color-default:var(--color-white);--button-text-color-default:var(--color-blue-1)}.af-btn-client--ghost{--button-text-color-default:var(--color-axa);--button-bg-color-default:#0000;--button-padding:0}@media (width > 1279px){.af-btn-client--ghost{--button-font-size:calc(16/var(--font-size-base)*1rem)}}.af-btn-client--ghost:active{--button-text-color-default:var(--color-btn-light)}.af-btn-client--ghost:focus,.af-btn-client--ghost:focus-visible,.af-btn-client--ghost:hover{--button-text-color-default:var(--color-blue-1);--button-bg-color-default:#0000}.af-btn-client--ghost:disabled,.af-btn-client--ghost[aria-disabled=true]{--button-bg-color-default:#0000}.af-btn-client--secondary{--button-bg-color-default:var(--color-white);--button-text-color-default:var(--color-axa);--button-shadow-color:var(--color-axa);box-shadow:0 0 0 1px var(--button-shadow-color) inset}.af-btn-client--secondary:active,.af-btn-client--secondary:focus,.af-btn-client--secondary:focus-visible,.af-btn-client--secondary:hover{--button-bg-color-default:var(--color-white);--button-text-color-default:var(--color-blue-1);box-shadow:0 0 0 2px var(--color-blue-1) inset}.af-btn-client--secondary:active{--button-bg-color-default:var(--color-blue-2)}.af-btn-client--secondary-inverse{--button-bg-color-default:var(--color-axa);--button-text-color-default:var(--color-white);--button-shadow-color:var(--color-white);box-shadow:0 0 0 2px var(--button-shadow-color) inset}.af-btn-client--secondary-inverse:active{--button-bg-color-default:var(--color-gray-200);--button-text-color-default:var(--color-btn-light);--button-shadow-color:var(--color-gray-200)}.af-btn-client--secondary-inverse:focus,.af-btn-client--secondary-inverse:focus-visible,.af-btn-client--secondary-inverse:hover{--button-bg-color-default:var(--color-gray-400);--button-text-color-default:var(--color-blue-1);--button-shadow-color:var(--color-gray-400)}.af-btn-client--tertiary{--button-bg-color-default:var(--color-btn-tertiary-bg);--button-text-color-default:var(--color-axa)}.af-btn-client--tertiary:hover{--button-bg-color-default:var(--color-btn-tertiary-bg-darker)}.af-btn-client--tertiary:active,.af-btn-client--tertiary:focus,.af-btn-client--tertiary:focus-visible{--button-bg-color-default:var(--color-btn-tertiary-bg-lighter);--button-text-color-default:var(--color-axa)}.af-spinner{--spinner-size:40;--spinner-border-size:3;align-items:center;animation:spin 2s linear infinite;border:calc(var(--spinner-border-size)*1px) solid var(--spinner-border-color);border-radius:50%;border-top:calc(var(--spinner-border-size)*1px) solid var(--spinner-border-top-color);container-type:inline-size;display:flex;flex-direction:column;height:calc(var(--spinner-size)*1px);justify-content:center;margin:auto;width:calc(var(--spinner-size)*1px)}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.af-spinner{--spinner-border-color:color-mix(in srgb,var(--color-axa),#0000 80%);--spinner-border-top-color:var(--color-axa)}.af-spinner--24{--spinner-border-size:2}.af-spinner--40{--spinner-border-size:4}.af-spinner--gray{--spinner-border-color:color-mix(in srgb,var(--color-gray),#0000 80%);--spinner-border-top-color:var(--color-gray)}.af-spinner--white{--spinner-border-color:color-mix(in srgb,var(--color-white),#0000 80%);--spinner-border-top-color:var(--color-white)}.af-item-message{--item-message-font-size:calc(14/var(--font-size-base)*1rem);align-items:center;display:flex;gap:calc(8/var(--font-size-base)*1rem)}.af-item-message__icon{color:var(--item-message-color);width:var(--item-message-icon-size);fill:currentcolor}.af-item-message__message{color:var(--item-message-color);font-family:var(--font-family-base);font-size:var(--item-message-font-size);line-height:1.25em}@media (width > 1023px){.af-item-message{--item-message-font-size:calc(16/var(--font-size-base)*1rem)}}.af-item-message{--item-message-color:var(--color-red-700);--item-message-icon-size:calc(16/var(--font-size-base)*1rem)}.af-item-message--success{--item-message-color:var(--color-green-600)}.af-item-label{display:grid;grid-template-areas:"label sidebutton" "description sidebutton" "more more";grid-template-columns:1fr auto;place-items:end start;row-gap:calc(2/var(--font-size-base)*1rem)}.af-item-label:has(>.af-item-label__description){row-gap:calc(4/var(--font-size-base)*1rem)}.af-item-label:has(>.af-item-label__sidebutton){column-gap:calc(12/var(--font-size-base)*1rem)}.af-item-label>label{color:var(--color-gray-900);font-size:calc(18/var(--font-size-base)*1rem);font-weight:600;grid-area:label;line-height:calc(20/var(--font-size-base)*1rem)}@media (width > 1023px){.af-item-label>label{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(24/var(--font-size-base)*1rem)}}.af-item-label__sidebutton{grid-area:sidebutton;place-self:center end}.af-item-label__sidebutton:has(+.af-item-label__description){align-self:end}.af-item-label__more{grid-area:more}.af-item-label__description{color:var(--label-description-color);font-size:calc(14/var(--font-size-base)*1rem);font-weight:400;grid-area:description;line-height:1.25em}@media (width > 1023px){.af-item-label__description{font-size:calc(16/var(--font-size-base)*1rem);line-height:calc(20/var(--font-size-base)*1rem)}}.af-item-label{--label-description-color:var(--color-gray-700)}
|
|
1
|
+
.grid{--col-gap:calc(8/var(--font-size-base)*1rem);--row-gap:calc(16/var(--font-size-base)*1rem);--margin-inline:calc(16/var(--font-size-base)*1rem);--cols:4;--start:auto;display:grid;gap:var(--row-gap) var(--col-gap);grid-template-columns:repeat(var(--cols),1fr);margin-inline:var(--margin-inline)}@media (width > 667px){.grid{--cols:8;--col-gap:calc(16/var(--font-size-base)*1rem);--margin-inline:calc(60/var(--font-size-base)*1rem)}}@media (width > 1023px){.grid{--col-gap:calc(24/var(--font-size-base)*1rem);--margin-inline:calc(80/var(--font-size-base)*1rem);--cols:12}}@media (width > 1279px){.grid{--margin-inline:calc(120/var(--font-size-base)*1rem)}}@media (width > 1599px){.grid{--margin-inline:auto;max-width:1320px}}.grid .subgrid,.grid :has(>.subgrid),.grid>*{align-content:start;display:grid;grid-column:var(--start)/span var(--cols);row-gap:var(--row-gap)}.grid>*>*{--start:auto}.grid .subgrid,.grid :has(>.subgrid){grid-template-columns:subgrid}.grid .subgrid>*,.grid :has(>.subgrid)>*{grid-column:var(--start)/span var(--cols)}.af-checkbox-select--debuggrid label:has(>[name=debuggrid]){background-color:var(--white);bottom:0;height:auto;left:0;position:fixed;z-index:2}.debug-grid{display:none;height:100%;mix-blend-mode:multiply;opacity:.5;position:fixed;top:0;width:100%}.debug-grid .grid{--name:"small: 0 to 667px";--color-bg-cols:#e9d6f2;height:100%;position:relative}.debug-grid .grid:before{color:color-mix(in hsl,var(--color-bg-cols),#000 20%);content:var(--name);font-size:clamp(.5rem,4vw,3rem);height:100%;left:.5vw;position:absolute;text-align:center;text-orientation:mixed;top:50%;transform:translateY(-50%);transition:color .3s linear .2s;width:100%;writing-mode:vertical-rl}.debug-grid .grid .cols{background-color:var(--color-bg-cols);display:none;grid-column:span 1;height:100%;transition:background-color .3s linear .2s}.debug-grid .grid .cols:nth-child(-n+4){display:block}@media (width > 667px){.debug-grid .grid{--name:"medium: 668px to 1023px";--color-bg-cols:#d6d9f2}.debug-grid .grid .cols:nth-child(-n+8){display:block}}@media (width > 1023px){.debug-grid .grid{--name:"large: 1024px to 1279px";--color-bg-cols:#c1ecec}.debug-grid .grid .cols:nth-child(-n+12){display:block}}@media (width > 1279px){.debug-grid .grid{--name:"extra large: 1280px to 1599px";--color-bg-cols:#c2ecc2}}@media (width > 1599px){.debug-grid .grid{--name:"extra large: 1600px to infinity";--color-bg-cols:#ffd1d3}}body:has([name=debuggrid]:checked) .debug-grid{display:block}.af-btn-client{align-items:center;background-color:var(--button-bg-color-default);border:0;border-radius:var(--button-radius);color:var(--button-text-color-default);display:flex;font-family:var(--font-family-base);font-size:var(--button-font-size);font-weight:600;gap:1rem;justify-content:center;line-height:var(--button-line-height);padding:var(--button-padding);transition-duration:var(--transition-duration);transition-property:width,height,border,color,background-color,outline,box-shadow;transition-timing-function:linear;-webkit-user-select:none;user-select:none}.af-btn-client:focus,.af-btn-client:focus-visible{outline:2px solid var(--button-outline-color);outline-offset:3px}.af-btn-client:disabled,.af-btn-client[aria-disabled=true]{pointer-events:none}.af-btn-client:disabled>[aria-live],.af-btn-client[aria-disabled=true]>[aria-live]{margin:unset}.af-btn-client>svg{aspect-ratio:1;fill:currentcolor}.af-btn-client--ghost{gap:calc(4/var(--font-size-base)*1rem);line-height:1.25em}.af-btn-client--ghost:focus,.af-btn-client--ghost:focus-visible,.af-btn-client--ghost:hover{text-decoration:underline}.af-btn-client--secondary{box-shadow:0 0 0 2px var(--button-shadow-color) inset}.af-btn-client{--button-bg-color-default:var(--color-axa);--button-text-color-default:var(--color-white);--button-radius:var(--radius-8);--button-shadow-color:var(--color-axa);--button-padding:calc(16/var(--font-size-base)*1rem) calc(61.5/var(--font-size-base)*1rem);--button-line-height:calc(20/var(--font-size-base)*1rem);--button-font-size:calc(16/var(--font-size-base)*1rem)}@media (width > 1279px){.af-btn-client{--button-line-height:calc(22.5/var(--font-size-base)*1rem);--button-font-size:calc(18/var(--font-size-base)*1rem)}}.af-btn-client:hover{--button-bg-color-default:var(--color-blue-1)}.af-btn-client:active,.af-btn-client:focus,.af-btn-client:focus-visible{--button-bg-color-default:var(--color-btn-light)}.af-btn-client:focus,.af-btn-client:focus-visible{--button-outline-color:var(--color-blue-3)}.af-btn-client:disabled,.af-btn-client[aria-disabled=true]{--button-bg-color-default:var(--color-gray-300);--button-text-color-default:var(--color-gray-500);--button-shadow-color:var(--color-gray-500)}.af-btn-client--primary-business{--button-bg-color-default:var(--color-btn-business)}.af-btn-client--primary-business:active,.af-btn-client--primary-business:focus,.af-btn-client--primary-business:focus-visible{--button-bg-color-default:var(--color-btn-business-light)}.af-btn-client--primary-business:hover{--button-bg-color-default:var(--color-btn-business-dark)}.af-btn-client--primary-inverse{--button-text-color-default:var(--color-axa);--button-bg-color-default:var(--color-white)}.af-btn-client--primary-inverse:active{--button-bg-color-default:var(--color-white);--button-text-color-default:var(--color-btn-business-light)}.af-btn-client--primary-inverse:focus,.af-btn-client--primary-inverse:focus-visible,.af-btn-client--primary-inverse:hover{--button-bg-color-default:var(--color-white);--button-text-color-default:var(--color-blue-1)}.af-btn-client--ghost{--button-text-color-default:var(--color-axa);--button-bg-color-default:#0000;--button-padding:0}@media (width > 1279px){.af-btn-client--ghost{--button-font-size:calc(16/var(--font-size-base)*1rem)}}.af-btn-client--ghost:active{--button-text-color-default:var(--color-btn-light)}.af-btn-client--ghost:focus,.af-btn-client--ghost:focus-visible,.af-btn-client--ghost:hover{--button-text-color-default:var(--color-blue-1);--button-bg-color-default:#0000}.af-btn-client--ghost:disabled,.af-btn-client--ghost[aria-disabled=true]{--button-bg-color-default:#0000}.af-btn-client--secondary{--button-bg-color-default:var(--color-white);--button-text-color-default:var(--color-axa);--button-shadow-color:var(--color-axa);box-shadow:0 0 0 1px var(--button-shadow-color) inset}.af-btn-client--secondary:active,.af-btn-client--secondary:focus,.af-btn-client--secondary:focus-visible,.af-btn-client--secondary:hover{--button-bg-color-default:var(--color-white);--button-text-color-default:var(--color-blue-1);box-shadow:0 0 0 2px var(--color-blue-1) inset}.af-btn-client--secondary:active{--button-bg-color-default:var(--color-blue-2)}.af-btn-client--secondary-inverse{--button-bg-color-default:var(--color-axa);--button-text-color-default:var(--color-white);--button-shadow-color:var(--color-white);box-shadow:0 0 0 2px var(--button-shadow-color) inset}.af-btn-client--secondary-inverse:active{--button-bg-color-default:var(--color-gray-200);--button-text-color-default:var(--color-btn-light);--button-shadow-color:var(--color-gray-200)}.af-btn-client--secondary-inverse:focus,.af-btn-client--secondary-inverse:focus-visible,.af-btn-client--secondary-inverse:hover{--button-bg-color-default:var(--color-gray-400);--button-text-color-default:var(--color-blue-1);--button-shadow-color:var(--color-gray-400)}.af-btn-client--tertiary{--button-bg-color-default:var(--color-btn-tertiary-bg);--button-text-color-default:var(--color-axa)}.af-btn-client--tertiary:hover{--button-bg-color-default:var(--color-btn-tertiary-bg-darker)}.af-btn-client--tertiary:active,.af-btn-client--tertiary:focus,.af-btn-client--tertiary:focus-visible{--button-bg-color-default:var(--color-btn-tertiary-bg-lighter);--button-text-color-default:var(--color-axa)}.af-spinner{--spinner-size:40;--spinner-border-size:3;align-items:center;animation:spin 2s linear infinite;border:calc(var(--spinner-border-size)*1px) solid var(--spinner-border-color);border-radius:50%;border-top:calc(var(--spinner-border-size)*1px) solid var(--spinner-border-top-color);container-type:inline-size;display:flex;flex-direction:column;height:calc(var(--spinner-size)*1px);justify-content:center;margin:auto;width:calc(var(--spinner-size)*1px)}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.af-spinner{--spinner-border-color:color-mix(in srgb,var(--color-axa),#0000 80%);--spinner-border-top-color:var(--color-axa)}.af-spinner--24{--spinner-border-size:2}.af-spinner--40{--spinner-border-size:4}.af-spinner--gray{--spinner-border-color:color-mix(in srgb,var(--color-gray),#0000 80%);--spinner-border-top-color:var(--color-gray)}.af-spinner--white{--spinner-border-color:color-mix(in srgb,var(--color-white),#0000 80%);--spinner-border-top-color:var(--color-white)}.af-item-message{--item-message-font-size:calc(14/var(--font-size-base)*1rem);align-items:center;display:flex;gap:calc(8/var(--font-size-base)*1rem)}.af-item-message__icon{color:var(--item-message-color);width:var(--item-message-icon-size);fill:currentcolor}.af-item-message__message{color:var(--item-message-color);font-family:var(--font-family-base);font-size:var(--item-message-font-size);line-height:1.25em}@media (width > 1023px){.af-item-message{--item-message-font-size:calc(16/var(--font-size-base)*1rem)}}.af-item-message{--item-message-color:var(--color-red-700);--item-message-icon-size:calc(16/var(--font-size-base)*1rem)}.af-item-message--success{--item-message-color:var(--color-green-600)}.af-item-label{display:grid;grid-template-areas:"label sidebutton" "description sidebutton" "more more";grid-template-columns:1fr auto;place-items:end start;row-gap:calc(2/var(--font-size-base)*1rem);width:100%}.af-item-label:has(>.af-item-label__description){row-gap:calc(4/var(--font-size-base)*1rem)}.af-item-label:has(>.af-item-label__sidebutton){column-gap:calc(12/var(--font-size-base)*1rem)}.af-item-label>label{color:var(--color-gray-900);font-size:calc(18/var(--font-size-base)*1rem);font-weight:600;grid-area:label;line-height:calc(20/var(--font-size-base)*1rem)}@media (width > 1023px){.af-item-label>label{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(24/var(--font-size-base)*1rem)}}.af-item-label__sidebutton{grid-area:sidebutton;place-self:center end}.af-item-label__sidebutton:has(+.af-item-label__description){align-self:end}.af-item-label__more{grid-area:more}.af-item-label__description{color:var(--label-description-color);font-size:calc(14/var(--font-size-base)*1rem);font-weight:400;grid-area:description;line-height:1.25em}@media (width > 1023px){.af-item-label__description{font-size:calc(16/var(--font-size-base)*1rem);line-height:calc(20/var(--font-size-base)*1rem)}}.af-item-label{--label-description-color:var(--color-gray-700)}.af-form__input-container{align-items:flex-start;display:flex;flex-direction:column;row-gap:calc(8/var(--font-size-base)*1rem)}.af-form__input-variant{align-items:center;background-color:var(--input-bg-color);border:1px solid var(--input-border-color);border-radius:var(--input-border-radius);color:var(--input-text-color);display:grid;grid-template-columns:auto min-content;padding:calc(16/var(--font-size-base)*1rem);width:100%}.af-form__input-variant:has(>input~*){column-gap:calc(8/var(--font-size-base)*1rem)}.af-form__input-variant>input{all:unset;color:var(--input-text-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:600;line-height:1.25em}.af-form__input-variant>input::placeholder{color:var(--input-text-placeholder-color);font-weight:400}.af-form__input-variant>input~*{color:var(--input-text-icon-color);fill:var(--input-text-icon-color)}@media (width > 1023px){.af-form__input-variant>input{font-size:calc(18/var(--font-size-base)*1rem)}}.af-form__input-variant:has(>input:is(:hover,:focus,:active)){box-shadow:0 0 0 1px var(--input-border-color) inset}.af-form__input-variant:has(>input:disabled),.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active){box-shadow:unset;cursor:not-allowed}.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active)>input~*,.af-form__input-variant:has(>input:disabled)>input~*{cursor:not-allowed}.af-form__input-helper{color:var(--input-helper-color);font-size:calc(14/var(--font-size-base)*1rem);font-weight:400;line-height:1.25em}@media (width > 1023px){.af-form__input-helper{font-size:calc(16/var(--font-size-base)*1rem)}}.af-form__input-helper{--input-helper-color:var(--color-gray-700)}.af-form__input-variant{--input-border-color:var(--color-gray-700);--input-border-radius:var(--default-border-radius);--input-bg-color:var(--color-white);--input-text-color:var(--color-gray-900);--input-text-icon-color:var(--color-gray-900);--input-text-placeholder-color:var(--color-gray-700)}.af-form__input-variant:has(>input:not([value=""])){--input-border-color:var(--color-axa)}.af-form__input-variant:has(>input:is(:hover,:focus,:active)){--input-border-color:var(--color-axa);--input-text-placeholder-color:var(--color-gray-900)}.af-form__input-variant:has(>input[class*="--error"]){--input-border-color:var(--color-red-700)}.af-form__input-variant:has(>input:disabled),.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active){--input-border-color:var(--color-gray-400);--input-text-color:var(--color-gray-500);--input-bg-color:var(--color-gray-200);--input-text-icon-color:var(--color-gray-500)}.af-form__input-variant:has(>input:disabled)+.af-form__input-helper,.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active)+.af-form__input-helper{--input-helper-color:var(--color-gray-500)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Grid/Grid.scss","../src/look-and-feel.scss","../src/Grid/DebugGrid.scss","../src/Button/ButtonCommon.scss","../src/Button/ButtonLF.scss","../src/Spinner/SpinnerCommon.scss","../src/Spinner/SpinnerLF.scss","../src/Form/ItemMessage/ItemMessageCommon.scss","../src/Form/ItemMessage/ItemMessageLF.scss","../src/Form/ItemLabel/ItemLabelCommon.scss","../src/Form/ItemLabel/ItemLabelLF.scss"],"names":[],"mappings":"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","file":"look-and-feel.css","sourcesContent":["@use \"../common/breakpoints.scss\" as breakpoints;\n\n/* GRID SYSTEM DESIGN SYSTEM AXA FRANCE (Look & Feel et Apollo) ****************\n\nSee the documentation : https://zeroheight.com/54c5bd254/v/latest/p/48d0d1-grille\n\nIts MOBILE FIRST approach, so the defauts values target the mobile.\n\n@media (width > #{breakpoints.$breakpoint-sm}) { >>>>> more than 667px\n@media (width > #{breakpoints.$breakpoint-md}) { >>>>> more than 1023px\n@media (width > #{breakpoints.$breakpoint-lg}) { >>>>> more than 1279px\n@media (width > #{breakpoints.$breakpoint-xl}) { >>>>> more than 1599px\n\n******************************************************************************* */\n\n.grid {\n --col-gap: calc(8 / var(--font-size-base) * 1rem);\n --row-gap: calc(16 / var(--font-size-base) * 1rem);\n --margin-inline: calc(16 / var(--font-size-base) * 1rem);\n --cols: 4;\n --start: auto;\n\n display: grid;\n margin-inline: var(--margin-inline);\n grid-template-columns: repeat(var(--cols), 1fr);\n gap: var(--row-gap) var(--col-gap);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n --cols: 8;\n --col-gap: calc(16 / var(--font-size-base) * 1rem);\n --margin-inline: calc(60 / var(--font-size-base) * 1rem);\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n --col-gap: calc(24 / var(--font-size-base) * 1rem);\n --margin-inline: calc(80 / var(--font-size-base) * 1rem);\n --cols: 12;\n }\n\n @media (width > #{breakpoints.$breakpoint-lg}) {\n --margin-inline: calc(120 / var(--font-size-base) * 1rem);\n }\n\n @media (width > #{breakpoints.$breakpoint-xl}) {\n --margin-inline: auto;\n\n max-width: 1320px;\n }\n\n > *,\n & .subgrid,\n & :has(> .subgrid) {\n display: grid;\n grid-column: var(--start) / span var(--cols);\n align-content: start;\n row-gap: var(--row-gap);\n }\n\n > * > * {\n --start: auto;\n }\n\n .subgrid,\n & :has(> .subgrid) {\n grid-template-columns: subgrid;\n\n > * {\n grid-column: var(--start) / span var(--cols);\n }\n }\n}\n","@use \"./Grid/Grid\";\n@use \"./Grid/DebugGrid\";\n@use \"./Button/ButtonLF\";\n@use \"./Spinner/SpinnerLF\";\n@use \"./Form/ItemMessage/ItemMessageLF\";\n@use \"./Form/ItemLabel/ItemLabelLF\";\n","@use \"../common/breakpoints.scss\" as breakpoints;\n\n.af-checkbox-select--debuggrid label:has(> [name=\"debuggrid\"]) {\n position: fixed;\n z-index: 2;\n bottom: 0;\n left: 0;\n height: auto;\n background-color: var(--white);\n}\n\n.debug-grid {\n position: fixed;\n top: 0;\n display: none;\n width: 100%;\n height: 100%;\n opacity: 0.5;\n mix-blend-mode: multiply;\n\n .grid {\n --name: \"small: 0 to 667px\";\n --color-bg-cols: hsl(280.71deg, 51.85%, 89.41%);\n\n position: relative;\n height: 100%;\n\n &::before {\n position: absolute;\n top: 50%;\n left: 0.5vw;\n width: 100%;\n height: 100%;\n font-size: clamp(0.5rem, 4vw, 3rem);\n text-align: center;\n text-orientation: mixed;\n writing-mode: vertical-rl;\n color: color-mix(in hsl, var(--color-bg-cols), rgb(0, 0, 0) 20%);\n transform: translate(0, -50%);\n transition: color 300ms linear 200ms;\n content: var(--name);\n }\n\n .cols {\n display: none;\n height: 100%;\n grid-column: span 1;\n background-color: var(--color-bg-cols);\n transition: background-color 300ms linear 200ms;\n\n &:nth-child(-n + 4) {\n display: block;\n }\n }\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n --name: \"medium: 668px to 1023px\";\n --color-bg-cols: hsl(233.57deg, 51.85%, 89.41%);\n\n .cols:nth-child(-n + 8) {\n display: block;\n }\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n --name: \"large: 1024px to 1279px\";\n --color-bg-cols: hsl(180deg, 53.09%, 84.12%);\n\n .cols:nth-child(-n + 12) {\n display: block;\n }\n }\n\n @media (width > #{breakpoints.$breakpoint-lg}) {\n --name: \"extra large: 1280px to 1599px\";\n --color-bg-cols: hsl(120deg, 52.5%, 84.31%);\n }\n\n @media (width > #{breakpoints.$breakpoint-xl}) {\n --name: \"extra large: 1600px to infinity\";\n --color-bg-cols: hsl(357.39deg, 100%, 90.98%);\n }\n }\n}\n\nbody {\n &:has([name=\"debuggrid\"]:checked) {\n .debug-grid {\n display: block;\n }\n }\n}\n","/* Apollo first and mobile first approch */\n\n@use \"../common/breakpoints\" as breakpoints;\n\n.af-btn-client {\n display: flex;\n padding: var(--button-padding);\n border: 0;\n border-radius: var(--button-radius);\n align-items: center;\n justify-content: center;\n gap: 1rem;\n font-family: var(--font-family-base);\n font-size: var(--button-font-size);\n font-weight: 600;\n line-height: var(--button-line-height);\n color: var(--button-text-color-default);\n background-color: var(--button-bg-color-default);\n transition-duration: var(--transition-duration);\n transition-property:\n width, height, border, color, background-color, outline, box-shadow;\n transition-timing-function: linear;\n user-select: none;\n\n &:focus-visible,\n &:focus {\n outline: 2px solid var(--button-outline-color);\n outline-offset: 3px;\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n pointer-events: none;\n\n & > [aria-live] {\n margin: unset;\n }\n }\n\n & > svg {\n aspect-ratio: 1;\n fill: currentcolor;\n }\n\n &--ghost {\n gap: calc(4 / var(--font-size-base) * 1rem);\n line-height: 1.25em;\n\n &:hover,\n &:focus,\n &:focus-visible {\n text-decoration: underline;\n }\n }\n\n &--secondary {\n box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n }\n\n &--secondary-inverse {\n box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n }\n}\n","@use \"../common/breakpoints\" as breakpoints;\n\n@use \"./ButtonCommon\";\n\n.af-btn-client {\n --button-bg-color-default: var(--color-axa);\n --button-text-color-default: var(--color-white);\n --button-radius: var(--radius-8);\n --button-shadow-color: var(--color-axa);\n --button-padding: calc(16 / var(--font-size-base) * 1rem)\n calc(61.5 / var(--font-size-base) * 1rem);\n --button-line-height: calc(20 / var(--font-size-base) * 1rem);\n --button-font-size: calc(16 / var(--font-size-base) * 1rem);\n\n @media (width > #{breakpoints.$breakpoint-lg}) {\n --button-line-height: calc(22.5 / var(--font-size-base) * 1rem);\n --button-font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n\n &:hover {\n --button-bg-color-default: var(--color-blue-1);\n }\n\n &:active,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--color-btn-light);\n }\n\n &:focus,\n &:focus-visible {\n --button-outline-color: var(--color-blue-3);\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n --button-bg-color-default: var(--color-gray-300);\n --button-text-color-default: var(--color-gray-500);\n --button-shadow-color: var(--color-gray-500);\n }\n\n &--primary-business {\n --button-bg-color-default: var(--color-btn-business);\n\n &:active,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--color-btn-business-light);\n }\n\n &:hover {\n --button-bg-color-default: var(--color-btn-business-dark);\n }\n }\n\n &--primary-inverse {\n --button-text-color-default: var(--color-axa);\n --button-bg-color-default: var(--color-white);\n\n &:active {\n --button-bg-color-default: var(--color-white);\n --button-text-color-default: var(--color-btn-business-light);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--color-white);\n --button-text-color-default: var(--color-blue-1);\n }\n }\n\n &--ghost {\n --button-text-color-default: var(--color-axa);\n --button-bg-color-default: transparent;\n --button-padding: 0;\n\n @media (width > #{breakpoints.$breakpoint-lg}) {\n --button-font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n\n &:active {\n --button-text-color-default: var(--color-btn-light);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-text-color-default: var(--color-blue-1);\n --button-bg-color-default: transparent;\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n --button-bg-color-default: transparent;\n }\n }\n\n &--secondary {\n --button-bg-color-default: var(--color-white);\n --button-text-color-default: var(--color-axa);\n --button-shadow-color: var(--color-axa);\n\n box-shadow: 0 0 0 1px var(--button-shadow-color) inset;\n\n &:hover,\n &:focus,\n &:focus-visible,\n &:active {\n --button-bg-color-default: var(--color-white);\n --button-text-color-default: var(--color-blue-1);\n\n box-shadow: 0 0 0 2px var(--color-blue-1) inset;\n }\n\n &:active {\n --button-bg-color-default: var(--color-blue-2);\n }\n }\n\n &--secondary-inverse {\n --button-bg-color-default: var(--color-axa);\n --button-text-color-default: var(--color-white);\n --button-shadow-color: var(--color-white);\n\n box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n\n &:active {\n --button-bg-color-default: var(--color-gray-200);\n --button-text-color-default: var(--color-btn-light);\n --button-shadow-color: var(--color-gray-200);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--color-gray-400);\n --button-text-color-default: var(--color-blue-1);\n --button-shadow-color: var(--color-gray-400);\n }\n }\n\n &--tertiary {\n --button-bg-color-default: var(--color-btn-tertiary-bg);\n --button-text-color-default: var(--color-axa);\n\n &:hover {\n --button-bg-color-default: var(--color-btn-tertiary-bg-darker);\n }\n\n &:focus,\n &:focus-visible,\n &:active {\n --button-bg-color-default: var(--color-btn-tertiary-bg-lighter);\n --button-text-color-default: var(--color-axa);\n }\n }\n}\n",".af-spinner {\n --spinner-size: 40;\n --spinner-border-size: 3;\n\n display: flex;\n container-type: inline-size;\n width: calc(var(--spinner-size) * 1px);\n height: calc(var(--spinner-size) * 1px);\n margin: auto;\n border: calc(var(--spinner-border-size) * 1px) solid\n var(--spinner-border-color);\n border-top: calc(var(--spinner-border-size) * 1px) solid\n var(--spinner-border-top-color);\n border-radius: 50%;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n animation: spin 2s linear infinite;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n","@use \"./SpinnerCommon\";\n\n.af-spinner {\n --spinner-border-color: color-mix(in srgb, var(--color-axa), transparent 80%);\n --spinner-border-top-color: var(--color-axa);\n\n &--24 {\n --spinner-border-size: 2;\n }\n\n &--40 {\n --spinner-border-size: 4;\n }\n\n &--gray {\n --spinner-border-color: color-mix(\n in srgb,\n var(--color-gray),\n transparent 80%\n );\n --spinner-border-top-color: var(--color-gray);\n }\n\n &--white {\n --spinner-border-color: color-mix(\n in srgb,\n var(--color-white),\n transparent 80%\n );\n --spinner-border-top-color: var(--color-white);\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n.af-item-message {\n --item-message-font-size: calc(14 / var(--font-size-base) * 1rem);\n\n display: flex;\n align-items: center;\n gap: calc(8 / var(--font-size-base) * 1rem);\n\n &__icon {\n width: var(--item-message-icon-size);\n color: var(--item-message-color);\n fill: currentcolor;\n }\n\n &__message {\n font-family: var(--font-family-base);\n font-size: var(--item-message-font-size);\n line-height: 1.25em;\n color: var(--item-message-color);\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n --item-message-font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n@use \"./ItemMessageCommon\";\n\n.af-item-message {\n --item-message-color: var(--color-red-700);\n --item-message-icon-size: calc(16 / var(--font-size-base) * 1rem);\n\n &--success {\n --item-message-color: var(--color-green-600);\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n.af-item-label {\n display: grid;\n grid-template-areas:\n \"label sidebutton\"\n \"description sidebutton\"\n \"more more\";\n grid-template-columns: 1fr auto;\n place-items: end start;\n row-gap: calc(2 / var(--font-size-base) * 1rem);\n\n &:has(> .af-item-label__description) {\n row-gap: calc(4 / var(--font-size-base) * 1rem);\n }\n\n &:has(> .af-item-label__sidebutton) {\n column-gap: calc(12 / var(--font-size-base) * 1rem);\n }\n\n > label {\n grid-area: label;\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 600;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n color: var(--color-gray-900);\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n line-height: calc(24 / var(--font-size-base) * 1rem);\n }\n }\n\n &__sidebutton {\n grid-area: sidebutton;\n place-self: center end;\n\n &:has(+ .af-item-label__description) {\n align-self: end;\n }\n }\n\n &__more {\n grid-area: more;\n }\n\n &__description {\n grid-area: description;\n font-size: calc(14 / var(--font-size-base) * 1rem);\n font-weight: 400;\n line-height: 1.25em;\n color: var(--label-description-color);\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n line-height: calc(20 / var(--font-size-base) * 1rem);\n }\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n@use \"./ItemLabelCommon\";\n\n.af-item-label {\n --label-description-color: var(--color-gray-700);\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/Grid/Grid.scss","../src/look-and-feel.scss","../src/Grid/DebugGrid.scss","../src/Button/ButtonCommon.scss","../src/Button/ButtonLF.scss","../src/Spinner/SpinnerCommon.scss","../src/Spinner/SpinnerLF.scss","../src/Form/ItemMessage/ItemMessageCommon.scss","../src/Form/ItemMessage/ItemMessageLF.scss","../src/Form/ItemLabel/ItemLabelCommon.scss","../src/Form/ItemLabel/ItemLabelLF.scss","../src/Form/TextInput/TextInputCommon.scss","../src/Form/TextInput/TextInputLF.scss"],"names":[],"mappings":"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","file":"look-and-feel.css","sourcesContent":["@use \"../common/breakpoints.scss\" as breakpoints;\n\n/* GRID SYSTEM DESIGN SYSTEM AXA FRANCE (Look & Feel et Apollo) ****************\n\nSee the documentation : https://zeroheight.com/54c5bd254/v/latest/p/48d0d1-grille\n\nIts MOBILE FIRST approach, so the defauts values target the mobile.\n\n@media (width > #{breakpoints.$breakpoint-sm}) { >>>>> more than 667px\n@media (width > #{breakpoints.$breakpoint-md}) { >>>>> more than 1023px\n@media (width > #{breakpoints.$breakpoint-lg}) { >>>>> more than 1279px\n@media (width > #{breakpoints.$breakpoint-xl}) { >>>>> more than 1599px\n\n******************************************************************************* */\n\n.grid {\n --col-gap: calc(8 / var(--font-size-base) * 1rem);\n --row-gap: calc(16 / var(--font-size-base) * 1rem);\n --margin-inline: calc(16 / var(--font-size-base) * 1rem);\n --cols: 4;\n --start: auto;\n\n display: grid;\n margin-inline: var(--margin-inline);\n grid-template-columns: repeat(var(--cols), 1fr);\n gap: var(--row-gap) var(--col-gap);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n --cols: 8;\n --col-gap: calc(16 / var(--font-size-base) * 1rem);\n --margin-inline: calc(60 / var(--font-size-base) * 1rem);\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n --col-gap: calc(24 / var(--font-size-base) * 1rem);\n --margin-inline: calc(80 / var(--font-size-base) * 1rem);\n --cols: 12;\n }\n\n @media (width > #{breakpoints.$breakpoint-lg}) {\n --margin-inline: calc(120 / var(--font-size-base) * 1rem);\n }\n\n @media (width > #{breakpoints.$breakpoint-xl}) {\n --margin-inline: auto;\n\n max-width: 1320px;\n }\n\n > *,\n & .subgrid,\n & :has(> .subgrid) {\n display: grid;\n grid-column: var(--start) / span var(--cols);\n align-content: start;\n row-gap: var(--row-gap);\n }\n\n > * > * {\n --start: auto;\n }\n\n .subgrid,\n & :has(> .subgrid) {\n grid-template-columns: subgrid;\n\n > * {\n grid-column: var(--start) / span var(--cols);\n }\n }\n}\n","@use \"./Grid/Grid\";\n@use \"./Grid/DebugGrid\";\n@use \"./Button/ButtonLF\";\n@use \"./Spinner/SpinnerLF\";\n@use \"./Form/ItemMessage/ItemMessageLF\";\n@use \"./Form/ItemLabel/ItemLabelLF\";\n@use \"./Form/TextInput/TextInputLF\";\n","@use \"../common/breakpoints.scss\" as breakpoints;\n\n.af-checkbox-select--debuggrid label:has(> [name=\"debuggrid\"]) {\n position: fixed;\n z-index: 2;\n bottom: 0;\n left: 0;\n height: auto;\n background-color: var(--white);\n}\n\n.debug-grid {\n position: fixed;\n top: 0;\n display: none;\n width: 100%;\n height: 100%;\n opacity: 0.5;\n mix-blend-mode: multiply;\n\n .grid {\n --name: \"small: 0 to 667px\";\n --color-bg-cols: hsl(280.71deg, 51.85%, 89.41%);\n\n position: relative;\n height: 100%;\n\n &::before {\n position: absolute;\n top: 50%;\n left: 0.5vw;\n width: 100%;\n height: 100%;\n font-size: clamp(0.5rem, 4vw, 3rem);\n text-align: center;\n text-orientation: mixed;\n writing-mode: vertical-rl;\n color: color-mix(in hsl, var(--color-bg-cols), rgb(0, 0, 0) 20%);\n transform: translate(0, -50%);\n transition: color 300ms linear 200ms;\n content: var(--name);\n }\n\n .cols {\n display: none;\n height: 100%;\n grid-column: span 1;\n background-color: var(--color-bg-cols);\n transition: background-color 300ms linear 200ms;\n\n &:nth-child(-n + 4) {\n display: block;\n }\n }\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n --name: \"medium: 668px to 1023px\";\n --color-bg-cols: hsl(233.57deg, 51.85%, 89.41%);\n\n .cols:nth-child(-n + 8) {\n display: block;\n }\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n --name: \"large: 1024px to 1279px\";\n --color-bg-cols: hsl(180deg, 53.09%, 84.12%);\n\n .cols:nth-child(-n + 12) {\n display: block;\n }\n }\n\n @media (width > #{breakpoints.$breakpoint-lg}) {\n --name: \"extra large: 1280px to 1599px\";\n --color-bg-cols: hsl(120deg, 52.5%, 84.31%);\n }\n\n @media (width > #{breakpoints.$breakpoint-xl}) {\n --name: \"extra large: 1600px to infinity\";\n --color-bg-cols: hsl(357.39deg, 100%, 90.98%);\n }\n }\n}\n\nbody {\n &:has([name=\"debuggrid\"]:checked) {\n .debug-grid {\n display: block;\n }\n }\n}\n","/* Apollo first and mobile first approch */\n\n@use \"../common/breakpoints\" as breakpoints;\n\n.af-btn-client {\n display: flex;\n padding: var(--button-padding);\n border: 0;\n border-radius: var(--button-radius);\n align-items: center;\n justify-content: center;\n gap: 1rem;\n font-family: var(--font-family-base);\n font-size: var(--button-font-size);\n font-weight: 600;\n line-height: var(--button-line-height);\n color: var(--button-text-color-default);\n background-color: var(--button-bg-color-default);\n transition-duration: var(--transition-duration);\n transition-property:\n width, height, border, color, background-color, outline, box-shadow;\n transition-timing-function: linear;\n user-select: none;\n\n &:focus-visible,\n &:focus {\n outline: 2px solid var(--button-outline-color);\n outline-offset: 3px;\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n pointer-events: none;\n\n & > [aria-live] {\n margin: unset;\n }\n }\n\n & > svg {\n aspect-ratio: 1;\n fill: currentcolor;\n }\n\n &--ghost {\n gap: calc(4 / var(--font-size-base) * 1rem);\n line-height: 1.25em;\n\n &:hover,\n &:focus,\n &:focus-visible {\n text-decoration: underline;\n }\n }\n\n &--secondary {\n box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n }\n\n &--secondary-inverse {\n box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n }\n}\n","@use \"../common/breakpoints\" as breakpoints;\n\n@use \"./ButtonCommon\";\n\n.af-btn-client {\n --button-bg-color-default: var(--color-axa);\n --button-text-color-default: var(--color-white);\n --button-radius: var(--radius-8);\n --button-shadow-color: var(--color-axa);\n --button-padding: calc(16 / var(--font-size-base) * 1rem)\n calc(61.5 / var(--font-size-base) * 1rem);\n --button-line-height: calc(20 / var(--font-size-base) * 1rem);\n --button-font-size: calc(16 / var(--font-size-base) * 1rem);\n\n @media (width > #{breakpoints.$breakpoint-lg}) {\n --button-line-height: calc(22.5 / var(--font-size-base) * 1rem);\n --button-font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n\n &:hover {\n --button-bg-color-default: var(--color-blue-1);\n }\n\n &:active,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--color-btn-light);\n }\n\n &:focus,\n &:focus-visible {\n --button-outline-color: var(--color-blue-3);\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n --button-bg-color-default: var(--color-gray-300);\n --button-text-color-default: var(--color-gray-500);\n --button-shadow-color: var(--color-gray-500);\n }\n\n &--primary-business {\n --button-bg-color-default: var(--color-btn-business);\n\n &:active,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--color-btn-business-light);\n }\n\n &:hover {\n --button-bg-color-default: var(--color-btn-business-dark);\n }\n }\n\n &--primary-inverse {\n --button-text-color-default: var(--color-axa);\n --button-bg-color-default: var(--color-white);\n\n &:active {\n --button-bg-color-default: var(--color-white);\n --button-text-color-default: var(--color-btn-business-light);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--color-white);\n --button-text-color-default: var(--color-blue-1);\n }\n }\n\n &--ghost {\n --button-text-color-default: var(--color-axa);\n --button-bg-color-default: transparent;\n --button-padding: 0;\n\n @media (width > #{breakpoints.$breakpoint-lg}) {\n --button-font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n\n &:active {\n --button-text-color-default: var(--color-btn-light);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-text-color-default: var(--color-blue-1);\n --button-bg-color-default: transparent;\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n --button-bg-color-default: transparent;\n }\n }\n\n &--secondary {\n --button-bg-color-default: var(--color-white);\n --button-text-color-default: var(--color-axa);\n --button-shadow-color: var(--color-axa);\n\n box-shadow: 0 0 0 1px var(--button-shadow-color) inset;\n\n &:hover,\n &:focus,\n &:focus-visible,\n &:active {\n --button-bg-color-default: var(--color-white);\n --button-text-color-default: var(--color-blue-1);\n\n box-shadow: 0 0 0 2px var(--color-blue-1) inset;\n }\n\n &:active {\n --button-bg-color-default: var(--color-blue-2);\n }\n }\n\n &--secondary-inverse {\n --button-bg-color-default: var(--color-axa);\n --button-text-color-default: var(--color-white);\n --button-shadow-color: var(--color-white);\n\n box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n\n &:active {\n --button-bg-color-default: var(--color-gray-200);\n --button-text-color-default: var(--color-btn-light);\n --button-shadow-color: var(--color-gray-200);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--color-gray-400);\n --button-text-color-default: var(--color-blue-1);\n --button-shadow-color: var(--color-gray-400);\n }\n }\n\n &--tertiary {\n --button-bg-color-default: var(--color-btn-tertiary-bg);\n --button-text-color-default: var(--color-axa);\n\n &:hover {\n --button-bg-color-default: var(--color-btn-tertiary-bg-darker);\n }\n\n &:focus,\n &:focus-visible,\n &:active {\n --button-bg-color-default: var(--color-btn-tertiary-bg-lighter);\n --button-text-color-default: var(--color-axa);\n }\n }\n}\n",".af-spinner {\n --spinner-size: 40;\n --spinner-border-size: 3;\n\n display: flex;\n container-type: inline-size;\n width: calc(var(--spinner-size) * 1px);\n height: calc(var(--spinner-size) * 1px);\n margin: auto;\n border: calc(var(--spinner-border-size) * 1px) solid\n var(--spinner-border-color);\n border-top: calc(var(--spinner-border-size) * 1px) solid\n var(--spinner-border-top-color);\n border-radius: 50%;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n animation: spin 2s linear infinite;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n","@use \"./SpinnerCommon\";\n\n.af-spinner {\n --spinner-border-color: color-mix(in srgb, var(--color-axa), transparent 80%);\n --spinner-border-top-color: var(--color-axa);\n\n &--24 {\n --spinner-border-size: 2;\n }\n\n &--40 {\n --spinner-border-size: 4;\n }\n\n &--gray {\n --spinner-border-color: color-mix(\n in srgb,\n var(--color-gray),\n transparent 80%\n );\n --spinner-border-top-color: var(--color-gray);\n }\n\n &--white {\n --spinner-border-color: color-mix(\n in srgb,\n var(--color-white),\n transparent 80%\n );\n --spinner-border-top-color: var(--color-white);\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n.af-item-message {\n --item-message-font-size: calc(14 / var(--font-size-base) * 1rem);\n\n display: flex;\n align-items: center;\n gap: calc(8 / var(--font-size-base) * 1rem);\n\n &__icon {\n width: var(--item-message-icon-size);\n color: var(--item-message-color);\n fill: currentcolor;\n }\n\n &__message {\n font-family: var(--font-family-base);\n font-size: var(--item-message-font-size);\n line-height: 1.25em;\n color: var(--item-message-color);\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n --item-message-font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n@use \"./ItemMessageCommon\";\n\n.af-item-message {\n --item-message-color: var(--color-red-700);\n --item-message-icon-size: calc(16 / var(--font-size-base) * 1rem);\n\n &--success {\n --item-message-color: var(--color-green-600);\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n.af-item-label {\n display: grid;\n width: 100%;\n grid-template-areas:\n \"label sidebutton\"\n \"description sidebutton\"\n \"more more\";\n grid-template-columns: 1fr auto;\n place-items: end start;\n row-gap: calc(2 / var(--font-size-base) * 1rem);\n\n &:has(> .af-item-label__description) {\n row-gap: calc(4 / var(--font-size-base) * 1rem);\n }\n\n &:has(> .af-item-label__sidebutton) {\n column-gap: calc(12 / var(--font-size-base) * 1rem);\n }\n\n > label {\n grid-area: label;\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 600;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n color: var(--color-gray-900);\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n line-height: calc(24 / var(--font-size-base) * 1rem);\n }\n }\n\n &__sidebutton {\n grid-area: sidebutton;\n place-self: center end;\n\n &:has(+ .af-item-label__description) {\n align-self: end;\n }\n }\n\n &__more {\n grid-area: more;\n }\n\n &__description {\n grid-area: description;\n font-size: calc(14 / var(--font-size-base) * 1rem);\n font-weight: 400;\n line-height: 1.25em;\n color: var(--label-description-color);\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n line-height: calc(20 / var(--font-size-base) * 1rem);\n }\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n@use \"./ItemLabelCommon\";\n\n.af-item-label {\n --label-description-color: var(--color-gray-700);\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n.af-form {\n &__input-container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n row-gap: calc(8 / var(--font-size-base) * 1rem);\n }\n\n &__input-variant {\n display: grid;\n width: 100%;\n padding: calc(16 / var(--font-size-base) * 1rem);\n border: 1px solid var(--input-border-color);\n border-radius: var(--input-border-radius);\n grid-template-columns: auto min-content;\n align-items: center;\n color: var(--input-text-color);\n background-color: var(--input-bg-color);\n\n &:has(> input ~ *) {\n column-gap: calc(8 / var(--font-size-base) * 1rem);\n }\n\n > input {\n all: unset;\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 600;\n line-height: 1.25em;\n color: var(--input-text-color);\n\n &::placeholder {\n font-weight: 400;\n color: var(--input-text-placeholder-color);\n }\n\n & ~ * {\n color: var(--input-text-icon-color);\n fill: var(--input-text-icon-color);\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n }\n\n &:has(> input:is(:hover, :focus, :active)) {\n box-shadow: 0 0 0 1px var(--input-border-color) inset;\n }\n\n &:has(> input:disabled),\n &:has(> input:disabled):is(:hover, :focus, :active) {\n box-shadow: unset;\n cursor: not-allowed;\n\n & > input ~ * {\n cursor: not-allowed;\n }\n }\n }\n\n &__input-helper {\n font-size: calc(14 / var(--font-size-base) * 1rem);\n font-weight: 400;\n line-height: 1.25em;\n color: var(--input-helper-color);\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n@use \"./TextInputCommon\";\n\n.af-form {\n &__input-helper {\n --input-helper-color: var(--color-gray-700);\n }\n\n &__input-variant {\n --input-border-color: var(--color-gray-700);\n --input-border-radius: var(--default-border-radius);\n --input-bg-color: var(--color-white);\n --input-text-color: var(--color-gray-900);\n --input-text-icon-color: var(--color-gray-900);\n --input-text-placeholder-color: var(--color-gray-700);\n\n &:has(> input:not([value=\"\"])) {\n --input-border-color: var(--color-axa);\n }\n\n &:has(> input:is(:hover, :focus, :active)) {\n --input-border-color: var(--color-axa);\n --input-text-placeholder-color: var(--color-gray-900);\n }\n\n &:has(> input[class*=\"--error\"]) {\n --input-border-color: var(--color-red-700);\n }\n\n &:has(> input:disabled),\n &:has(> input:disabled):is(:hover, :focus, :active) {\n --input-border-color: var(--color-gray-400);\n --input-text-color: var(--color-gray-500);\n --input-bg-color: var(--color-gray-200);\n --input-text-icon-color: var(--color-gray-500);\n\n + .af-form__input-helper {\n --input-helper-color: var(--color-gray-500);\n }\n }\n }\n}\n"]}
|
package/dist/look-and-feel.scss
CHANGED