@axa-fr/design-system-apollo-css 1.0.5-alpha.280 → 1.0.5-alpha.285
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/Button/ButtonApollo.css +1 -1
- package/dist/Button/ButtonApollo.css.map +1 -1
- package/dist/Button/ButtonApollo.scss +31 -33
- package/dist/Button/ButtonCommon.css +1 -1
- package/dist/Button/ButtonCommon.css.map +1 -1
- package/dist/Button/ButtonCommon.scss +6 -4
- package/dist/Button/ButtonLF.css +1 -1
- package/dist/Button/ButtonLF.css.map +1 -1
- package/dist/Button/ButtonLF.scss +19 -19
- package/dist/Form/InputText/InputTextApollo.css +1 -0
- package/dist/Form/InputText/InputTextApollo.css.map +1 -0
- package/dist/Form/{TextInput/TextInputApollo.scss → InputText/InputTextApollo.scss} +2 -1
- package/dist/Form/InputText/InputTextCommon.css +1 -0
- package/dist/Form/InputText/InputTextCommon.css.map +1 -0
- package/dist/Form/{TextInput/TextInputCommon.scss → InputText/InputTextCommon.scss} +1 -1
- package/dist/Form/InputText/InputTextLF.css +1 -0
- package/dist/Form/InputText/InputTextLF.css.map +1 -0
- package/dist/Form/{TextInput/TextInputLF.scss → InputText/InputTextLF.scss} +2 -1
- package/dist/Form/ItemLabel/ItemLabelApollo.css +1 -1
- package/dist/Form/ItemLabel/ItemLabelApollo.css.map +1 -1
- package/dist/Form/ItemLabel/ItemLabelApollo.scss +4 -0
- package/dist/apollo.css +1 -1
- package/dist/apollo.css.map +1 -1
- package/dist/apollo.scss +1 -1
- package/dist/look-and-feel.css +1 -1
- package/dist/look-and-feel.css.map +1 -1
- package/dist/look-and-feel.scss +1 -1
- package/package.json +1 -1
- package/dist/Form/TextInput/TextInputApollo.css +0 -1
- package/dist/Form/TextInput/TextInputApollo.css.map +0 -1
- package/dist/Form/TextInput/TextInputCommon.css +0 -1
- package/dist/Form/TextInput/TextInputCommon.css.map +0 -1
- package/dist/Form/TextInput/TextInputLF.css +0 -1
- package/dist/Form/TextInput/TextInputLF.css.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.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-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(
|
|
1
|
+
.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:calc(12/var(--font-size-base)*1rem);justify-content:center;line-height:var(--button-line-height);padding:var(--button-padding);transition-duration:var(--transition-duration,.15s);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{outline-color:#0000}.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(24/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-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: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-business:active{--button-bg-color-default:var(--warning-80)}.af-btn-client--primary-inverse{--button-bg-color-default:var(--white);--button-text-color-default:var(--axa-blue-100)}.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--primary-inverse:active{--button-bg-color-default:var(--neutral-5);--button-text-color-default:var(--axa-blue-80)}.af-btn-client--ghost{--button-bg-color-default:#0000;--button-text-color-default:var(--axa-blue-100);--button-padding:0}.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:active{--button-text-color-default:var(--axa-blue-80)}.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: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: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-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: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--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--tertiary{--button-bg-color-default:var(--axa-blue-8);--button-text-color-default:var(--axa-blue-100)}.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-btn-client--tertiary:active{--button-bg-color-default:var(--axa-blue-80);--button-text-color-default:var(--white)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Button/ButtonCommon.scss","../../src/Button/ButtonApollo.scss","../../src/Button/ButtonApollo.scss%23sass"],"names":[],"mappings":"AAIA,eAKE,kBAAA,CAQA,+CAAA,CAVA,QAAA,CCDF,kCAAA,CDUE,sCAAA,CAXA,YAAA,CAOA,mCAAA,CACA,iCAAA,CACA,eAAA,CAHA,QAAA,CADA,sBAAA,CAKA,qCAAA,CCXF,6BDEE,CAYA,8CAAA,CACA,iFAAA,CAEA,iCAAA,CACA,wBAAA,CAAA,gBCFF,CDIE,6BACE,6CAAA,CACA,kBCFJ,CDKE,2DAEE,mBCJJ,CDMI,mFACE,YCJN,CDQE,mBACE,cAAA,CACA,iBCNJ,CDSE,sBACE,sCAAA,CACA,kBCPJ,CDSI,4FAGE,yBCTN,CDiBE,4DACE,qDCZJ,CCzCA,eACE,6CAAA,CACA,wCAAA,CACA,gCAAA,CACA,yCAAA,CACA,wFAAA,CAEA,wDAAA,CACA,sDD4CF,CC1CE,wBAVF,eAWI,wFAAA,CAEA,wDAAA,CACA,sDD6CF,CACF,CC3CE,qBACE,6CD6CJ,CC1CE,sBACE,4CD4CJ,CCzCE,kDAEE,yCD0CJ,CCvCE,2DAEE,0CAAA,CACA,6CAAA,CACA,uCDwCJ,CCrCE,iCACE,4CAAA,CACA,wCDuCJ,CCrCI,wCACE,2CDuCN,CCpCI,6HAGE,4CDoCN,CChCE,gCACE,sCAAA,CACA,+CDkCJ,CChCI,uCACE,0CAAA,CACA,8CDkCN,CC/BI,0HAGE,2CAAA,CACA,+CD+BN,CC3BE,sBACE,+BAAA,CACA,+CAAA,CACA,kBD6BJ,CC3BI,6BACE,8CD6BN,CC1BI,4FAGE,+CAAA,CACA,+BD0BN,CCvBI,yEAEE,+BDwBN,CCpBE,0BACE,sCAAA,CACA,+CDsBJ,CCpBI,iCACE,4CAAA,CACA,wCAAA,CACA,wCDsBN,CCnBI,wGAGE,6CAAA,CACA,wCAAA,CACA,yCDmBN,CCfE,kCACE,6CAAA,CACA,wCAAA,CACA,kCDiBJ,CCfI,yCACE,0CAAA,CACA,8CAAA,CACA,sCDiBN,CCdI,gIAGE,2CAAA,CACA,+CAAA,CACA,uCDcN,CCVE,yBACE,2CAAA,CACA,+CDYJ,CCVI,gCDYJ,4CAAA,CCVM,wCDYN,CCTI,qGAGE,6CAAA,CACA,wCDSN","file":"ButtonApollo.css","sourcesContent":["/* 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 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","/* 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"]}
|
|
1
|
+
{"version":3,"sources":["../../src/Button/ButtonCommon.scss","../../src/Button/ButtonApollo.scss","../../src/Button/ButtonApollo.scss%23sass"],"names":[],"mappings":"AAEA,eCIA,kBAAA,CDSE,+CAAA,CCXF,QAAA,CDEE,kCAAA,CAQA,sCAAA,CCZF,YAAA,CDQE,mCAAA,CACA,iCAAA,CACA,eAAA,CAHA,uCAAA,CADA,sBAAA,CAKA,qCAAA,CATA,6BAAA,CAYA,mDAAA,CACA,iFAAA,CAEA,iCAAA,CACA,wBAAA,CAAA,gBCDF,CDGE,qBACE,mBCDJ,CDIE,6BACE,6CAAA,CACA,kBCFJ,CDKE,2DAEE,mBCJJ,CDMI,mFACE,YCJN,CDQE,mBACE,cAAA,CACA,iBCNJ,CDSE,sBACE,sCAAA,CACA,kBCPJ,CDSI,4FAGE,yBCTN,CDiBE,4DACE,qDCZJ,CC3CA,eACE,6CAAA,CACA,wCAAA,CACA,gCAAA,CACA,yCAAA,CACA,wFAAA,CAEA,wDAAA,CACA,sDD8CF,CC5CE,wBAVF,eAWI,wDAAA,CACA,sDD+CF,CACF,CC7CE,qBACE,6CD+CJ,CC5CE,sBACE,4CD8CJ,CC3CE,kDAEE,yCD4CJ,CCzCE,2DAEE,0CAAA,CACA,6CAAA,CACA,uCD0CJ,CCvCE,iCACE,4CAAA,CACA,wCDyCJ,CCvCI,6HAGE,4CDuCN,CCpCI,wCACE,2CDsCN,CClCE,gCACE,sCAAA,CACA,+CDoCJ,CClCI,0HAGE,2CAAA,CACA,+CDkCN,CC/BI,uCACE,0CAAA,CACA,8CDiCN,CC7BE,sBACE,+BAAA,CACA,+CAAA,CACA,kBD+BJ,CC7BI,4FAGE,+CAAA,CACA,+BD6BN,CC1BI,6BACE,8CD4BN,CCzBI,yEAEE,+BD0BN,CCtBE,0BACE,sCAAA,CACA,+CDwBJ,CCtBI,wGAGE,6CAAA,CACA,wCAAA,CACA,yCDsBN,CCnBI,iCACE,4CAAA,CACA,wCAAA,CACA,wCDqBN,CCjBE,kCACE,6CAAA,CACA,wCAAA,CACA,kCDmBJ,CCjBI,gIAGE,2CAAA,CACA,+CAAA,CACA,uCDiBN,CCdI,yCACE,0CAAA,CACA,8CAAA,CACA,sCDgBN,CCZE,yBACE,2CAAA,CACA,+CDcJ,CCZI,qGAGE,6CAAA,CACA,wCDYN,CCTI,gCACE,4CAAA,CACA,wCDWN","file":"ButtonApollo.css","sourcesContent":["@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: calc(12 / var(--font-size-base) * 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, 150ms);\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 {\n outline-color: transparent;\n }\n\n &:focus-visible {\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(24 / 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-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 &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--warning-120);\n }\n\n &:active {\n --button-bg-color-default: var(--warning-80);\n }\n }\n\n &--primary-inverse {\n --button-bg-color-default: var(--white);\n --button-text-color-default: var(--axa-blue-100);\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 &:active {\n --button-bg-color-default: var(--neutral-5);\n --button-text-color-default: var(--axa-blue-80);\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 &:hover,\n &:focus,\n &:focus-visible {\n --button-text-color-default: var(--axa-blue-120);\n --button-bg-color-default: transparent;\n }\n\n &:active {\n --button-text-color-default: var(--axa-blue-80);\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 &: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 &: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\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 &: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 &: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\n &--tertiary {\n --button-bg-color-default: var(--axa-blue-8);\n --button-text-color-default: var(--axa-blue-100);\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 &:active {\n --button-bg-color-default: var(--axa-blue-80);\n --button-text-color-default: var(--white);\n }\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(24 / 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-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 &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--warning-120);\n }\n\n &:active {\n --button-bg-color-default: var(--warning-80);\n }\n }\n\n &--primary-inverse {\n --button-bg-color-default: var(--white);\n --button-text-color-default: var(--axa-blue-100);\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 &:active {\n --button-bg-color-default: var(--neutral-5);\n --button-text-color-default: var(--axa-blue-80);\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 &:hover,\n &:focus,\n &:focus-visible {\n --button-text-color-default: var(--axa-blue-120);\n --button-bg-color-default: transparent;\n }\n\n &:active {\n --button-text-color-default: var(--axa-blue-80);\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 &: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 &: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\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 &: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 &: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\n &--tertiary {\n --button-bg-color-default: var(--axa-blue-8);\n --button-text-color-default: var(--axa-blue-100);\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 &:active {\n --button-bg-color-default: var(--axa-blue-80);\n --button-text-color-default: var(--white);\n }\n }\n}\n"]}
|
|
@@ -10,13 +10,11 @@
|
|
|
10
10
|
--button-radius: var(--radius-32);
|
|
11
11
|
--button-shadow-color: var(--axa-blue-100);
|
|
12
12
|
--button-padding: calc(12 / var(--font-size-base) * 1rem)
|
|
13
|
-
calc(
|
|
13
|
+
calc(24 / var(--font-size-base) * 1rem);
|
|
14
14
|
--button-line-height: calc(24 / var(--font-size-base) * 1rem);
|
|
15
15
|
--button-font-size: calc(16 / var(--font-size-base) * 1rem);
|
|
16
16
|
|
|
17
17
|
@media (width > #{breakpoints.$breakpoint-lg}) {
|
|
18
|
-
--button-padding: calc(12 / var(--font-size-base) * 1rem)
|
|
19
|
-
calc(24 / var(--font-size-base) * 1rem);
|
|
20
18
|
--button-line-height: calc(32 / var(--font-size-base) * 1rem);
|
|
21
19
|
--button-font-size: calc(18 / var(--font-size-base) * 1rem);
|
|
22
20
|
}
|
|
@@ -45,32 +43,32 @@
|
|
|
45
43
|
--button-bg-color-default: var(--warning-100);
|
|
46
44
|
--button-text-color-default: var(--white);
|
|
47
45
|
|
|
48
|
-
&:active {
|
|
49
|
-
--button-bg-color-default: var(--warning-80);
|
|
50
|
-
}
|
|
51
|
-
|
|
52
46
|
&:hover,
|
|
53
47
|
&:focus,
|
|
54
48
|
&:focus-visible {
|
|
55
49
|
--button-bg-color-default: var(--warning-120);
|
|
56
50
|
}
|
|
51
|
+
|
|
52
|
+
&:active {
|
|
53
|
+
--button-bg-color-default: var(--warning-80);
|
|
54
|
+
}
|
|
57
55
|
}
|
|
58
56
|
|
|
59
57
|
&--primary-inverse {
|
|
60
58
|
--button-bg-color-default: var(--white);
|
|
61
59
|
--button-text-color-default: var(--axa-blue-100);
|
|
62
60
|
|
|
63
|
-
&:active {
|
|
64
|
-
--button-bg-color-default: var(--neutral-5);
|
|
65
|
-
--button-text-color-default: var(--axa-blue-80);
|
|
66
|
-
}
|
|
67
|
-
|
|
68
61
|
&:hover,
|
|
69
62
|
&:focus,
|
|
70
63
|
&:focus-visible {
|
|
71
64
|
--button-bg-color-default: var(--neutral-14);
|
|
72
65
|
--button-text-color-default: var(--axa-blue-120);
|
|
73
66
|
}
|
|
67
|
+
|
|
68
|
+
&:active {
|
|
69
|
+
--button-bg-color-default: var(--neutral-5);
|
|
70
|
+
--button-text-color-default: var(--axa-blue-80);
|
|
71
|
+
}
|
|
74
72
|
}
|
|
75
73
|
|
|
76
74
|
&--ghost {
|
|
@@ -78,10 +76,6 @@
|
|
|
78
76
|
--button-text-color-default: var(--axa-blue-100);
|
|
79
77
|
--button-padding: 0;
|
|
80
78
|
|
|
81
|
-
&:active {
|
|
82
|
-
--button-text-color-default: var(--axa-blue-80);
|
|
83
|
-
}
|
|
84
|
-
|
|
85
79
|
&:hover,
|
|
86
80
|
&:focus,
|
|
87
81
|
&:focus-visible {
|
|
@@ -89,6 +83,10 @@
|
|
|
89
83
|
--button-bg-color-default: transparent;
|
|
90
84
|
}
|
|
91
85
|
|
|
86
|
+
&:active {
|
|
87
|
+
--button-text-color-default: var(--axa-blue-80);
|
|
88
|
+
}
|
|
89
|
+
|
|
92
90
|
&:disabled,
|
|
93
91
|
&[aria-disabled="true"] {
|
|
94
92
|
--button-bg-color-default: transparent;
|
|
@@ -99,12 +97,6 @@
|
|
|
99
97
|
--button-bg-color-default: var(--white);
|
|
100
98
|
--button-text-color-default: var(--axa-blue-100);
|
|
101
99
|
|
|
102
|
-
&:active {
|
|
103
|
-
--button-bg-color-default: var(--axa-blue-80);
|
|
104
|
-
--button-text-color-default: var(--white);
|
|
105
|
-
--button-shadow-color: var(--axa-blue-80);
|
|
106
|
-
}
|
|
107
|
-
|
|
108
100
|
&:hover,
|
|
109
101
|
&:focus,
|
|
110
102
|
&:focus-visible {
|
|
@@ -112,6 +104,12 @@
|
|
|
112
104
|
--button-text-color-default: var(--white);
|
|
113
105
|
--button-shadow-color: var(--axa-blue-120);
|
|
114
106
|
}
|
|
107
|
+
|
|
108
|
+
&:active {
|
|
109
|
+
--button-bg-color-default: var(--axa-blue-80);
|
|
110
|
+
--button-text-color-default: var(--white);
|
|
111
|
+
--button-shadow-color: var(--axa-blue-80);
|
|
112
|
+
}
|
|
115
113
|
}
|
|
116
114
|
|
|
117
115
|
&--secondary-inverse {
|
|
@@ -119,12 +117,6 @@
|
|
|
119
117
|
--button-text-color-default: var(--white);
|
|
120
118
|
--button-shadow-color: var(--white);
|
|
121
119
|
|
|
122
|
-
&:active {
|
|
123
|
-
--button-bg-color-default: var(--neutral-5);
|
|
124
|
-
--button-text-color-default: var(--axa-blue-80);
|
|
125
|
-
--button-shadow-color: var(--neutral-5);
|
|
126
|
-
}
|
|
127
|
-
|
|
128
120
|
&:hover,
|
|
129
121
|
&:focus,
|
|
130
122
|
&:focus-visible {
|
|
@@ -132,22 +124,28 @@
|
|
|
132
124
|
--button-text-color-default: var(--axa-blue-120);
|
|
133
125
|
--button-shadow-color: var(--neutral-14);
|
|
134
126
|
}
|
|
127
|
+
|
|
128
|
+
&:active {
|
|
129
|
+
--button-bg-color-default: var(--neutral-5);
|
|
130
|
+
--button-text-color-default: var(--axa-blue-80);
|
|
131
|
+
--button-shadow-color: var(--neutral-5);
|
|
132
|
+
}
|
|
135
133
|
}
|
|
136
134
|
|
|
137
135
|
&--tertiary {
|
|
138
136
|
--button-bg-color-default: var(--axa-blue-8);
|
|
139
137
|
--button-text-color-default: var(--axa-blue-100);
|
|
140
138
|
|
|
141
|
-
&:active {
|
|
142
|
-
--button-bg-color-default: var(--axa-blue-80);
|
|
143
|
-
--button-text-color-default: var(--white);
|
|
144
|
-
}
|
|
145
|
-
|
|
146
139
|
&:hover,
|
|
147
140
|
&:focus,
|
|
148
141
|
&:focus-visible {
|
|
149
142
|
--button-bg-color-default: var(--axa-blue-120);
|
|
150
143
|
--button-text-color-default: var(--white);
|
|
151
144
|
}
|
|
145
|
+
|
|
146
|
+
&:active {
|
|
147
|
+
--button-bg-color-default: var(--axa-blue-80);
|
|
148
|
+
--button-text-color-default: var(--white);
|
|
149
|
+
}
|
|
152
150
|
}
|
|
153
151
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.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-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}
|
|
1
|
+
.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:calc(12/var(--font-size-base)*1rem);justify-content:center;line-height:var(--button-line-height);padding:var(--button-padding);transition-duration:var(--transition-duration,.15s);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{outline-color:#0000}.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}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Button/ButtonCommon.scss%23sass","../../src/Button/ButtonCommon.scss"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../src/Button/ButtonCommon.scss%23sass","../../src/Button/ButtonCommon.scss"],"names":[],"mappings":"AAEA,eAKE,kBAAA,CAQA,+CAAA,CAVA,QAAA,CACA,kCAAA,CAQA,sCAAA,CAXA,YAAA,CAOA,mCAAA,CACA,iCAAA,CACA,eAAA,CAHA,uCAAA,CADA,sBAAA,CAKA,qCAAA,CCXF,6BAAA,CDcE,mDAAA,CACA,iFACE,CACF,iCAAA,CACA,wBAAA,CAAA,gBCFF,CDIE,qBACE,mBCFJ,CDKE,6BACE,6CAAA,CACA,kBCHJ,CDME,2DAEE,mBCLJ,CDOI,mFACE,YCLN,CDSE,mBACE,cAAA,CACA,iBCPJ,CDUE,sBACE,sCAAA,CACA,kBCRJ,CDUI,4FAGE,yBCVN,CDkBE,4DACE,qDCbJ","file":"ButtonCommon.css","sourcesContent":["@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: calc(12 / var(--font-size-base) * 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, 150ms);\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 {\n outline-color: transparent;\n }\n\n &:focus-visible {\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.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: calc(12 / var(--font-size-base) * 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, 150ms);\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 {\n outline-color: transparent;\n }\n\n &:focus-visible {\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"]}
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
/* Apollo first and mobile first approch */
|
|
2
|
-
|
|
3
1
|
@use "../common/breakpoints" as breakpoints;
|
|
4
2
|
|
|
5
3
|
.af-btn-client {
|
|
@@ -9,19 +7,23 @@
|
|
|
9
7
|
border-radius: var(--button-radius);
|
|
10
8
|
align-items: center;
|
|
11
9
|
justify-content: center;
|
|
12
|
-
gap: 1rem;
|
|
10
|
+
gap: calc(12 / var(--font-size-base) * 1rem);
|
|
13
11
|
font-family: var(--font-family-base);
|
|
14
12
|
font-size: var(--button-font-size);
|
|
15
13
|
font-weight: 600;
|
|
16
14
|
line-height: var(--button-line-height);
|
|
17
15
|
color: var(--button-text-color-default);
|
|
18
16
|
background-color: var(--button-bg-color-default);
|
|
19
|
-
transition-duration: var(--transition-duration);
|
|
17
|
+
transition-duration: var(--transition-duration, 150ms);
|
|
20
18
|
transition-property:
|
|
21
19
|
width, height, border, color, background-color, outline, box-shadow;
|
|
22
20
|
transition-timing-function: linear;
|
|
23
21
|
user-select: none;
|
|
24
22
|
|
|
23
|
+
&:focus {
|
|
24
|
+
outline-color: transparent;
|
|
25
|
+
}
|
|
26
|
+
|
|
25
27
|
&:focus-visible {
|
|
26
28
|
outline: 2px solid var(--button-outline-color);
|
|
27
29
|
outline-offset: 3px;
|
package/dist/Button/ButtonLF.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.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-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)
|
|
1
|
+
.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:calc(12/var(--font-size-base)*1rem);justify-content:center;line-height:var(--button-line-height);padding:var(--button-padding);transition-duration:var(--transition-duration,.15s);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{outline-color:#0000}.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);--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-font-size:calc(18/var(--font-size-base)*1rem);--button-padding:calc(16/var(--font-size-base)*1rem) calc(24/var(--font-size-base)*1rem)}}.af-btn-client:hover{--button-bg-color-default:var(--color-blue-1)}.af-btn-client:active{--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:hover{--button-bg-color-default:var(--color-btn-business-dark)}.af-btn-client--primary-business:active{--button-bg-color-default:var(--color-btn-business-light)}.af-btn-client--primary-inverse{--button-text-color-default:var(--color-axa);--button-bg-color-default:var(--color-white)}.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--primary-inverse:active{--button-bg-color-default:var(--color-white);--button-text-color-default:var(--color-btn-business-light)}.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: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:active{--button-text-color-default:var(--color-btn-light)}.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: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--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--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{--button-bg-color-default:var(--color-btn-tertiary-bg-lighter);--button-text-color-default:var(--color-axa)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Button/ButtonCommon.scss","../../src/Button/ButtonLF.scss","../../src/Button/ButtonLF.scss%23sass"],"names":[],"mappings":"AAIA,eAKE,kBAAA,CAQA,+CAAA,CCbF,QAAA,CDIE,kCAAA,CAQA,sCAAA,CCdF,YAAA,CDUE,mCAAA,CACA,iCAAA,CACA,eAAA,CAHA,QAAA,CADA,sBAAA,CAKA,qCAAA,CATA,6BAAA,CAYA,8CAAA,CACA,iFACE,CACF,iCAAA,CACA,wBAAA,CAAA,gBCHF,CDKE,6BACE,6CAAA,CACA,kBCHJ,CDME,2DAEE,mBCLJ,CDOI,mFACE,YCLN,CDSE,mBACE,cAAA,CACA,iBCPJ,CDUE,sBACE,sCAAA,CACA,kBCRJ,CDUI,4FAGE,yBCVN,CDcE,0BACE,qDCZJ,CCvCA,eACE,0CAAA,CACA,8CAAA,CACA,+BAAA,CACA,sCAAA,CACA,0FAAA,CAEA,wDAAA,CACA,sDD6CF,CC3CE,wBAVF,eAWI,0DAAA,CACA,sDD8CF,CACF,CC5CE,qBACE,6CD8CJ,CC3CE,sBACE,gDD6CJ,CC1CE,kDAEE,0CD2CJ,CCxCE,2DAEE,+CAAA,CACA,iDAAA,CACA,2CDyCJ,CCtCE,iCACE,mDDwCJ,CCtCI,uCACE,wDDwCN,CCrCI,wCACE,yDDuCN,CCnCE,gCACE,4CAAA,CACA,4CDqCJ,CCnCI,uCACE,4CAAA,CACA,2DDqCN,CClCI,0HAGE,4CAAA,CACA,+CDkCN,CC9BE,sBACE,4CAAA,CACA,+BAAA,CACA,kBDgCJ,CC9BI,wBALF,sBAMI,sDDiCJ,CACF,CC/BI,6BACE,kDDiCN,CC9BI,4FAGE,+CAAA,CACA,+BD8BN,CC3BI,yEAEE,+BD4BN,CCxBE,0BACE,4CAAA,CACA,4CAAA,CACA,sCAAA,CAEA,qDDyBJ,CCvBI,yIAIE,4CAAA,CACA,+CAAA,CAEA,8CDqBN,CClBI,iCACE,6CDoBN,CChBE,kCACE,0CAAA,CACA,8CAAA,CACA,wCAAA,CAEA,qDDiBJ,CCfI,yCACE,+CAAA,CACA,kDAAA,CACA,2CDiBN,CCdI,gIAGE,+CAAA,CACA,+CAAA,CACA,2CDcN,CCVE,yBACE,sDAAA,CDYJ,4CACA,CCVI,+BACE,6DDYN,CCTI,gCACE,8DAAA,CACA,4CDWN","file":"ButtonLF.css","sourcesContent":["/* 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 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 --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 &:hover {\n --button-bg-color-default: var(--color-btn-business-dark);\n }\n\n &:active {\n --button-bg-color-default: var(--color-btn-business-light);\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 &:active {\n --button-bg-color-default: var(--color-btn-tertiary-bg-lighter);\n --button-text-color-default: var(--color-axa);\n }\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 --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 &:hover {\n --button-bg-color-default: var(--color-btn-business-dark);\n }\n\n &:active {\n --button-bg-color-default: var(--color-btn-business-light);\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 &:active {\n --button-bg-color-default: var(--color-btn-tertiary-bg-lighter);\n --button-text-color-default: var(--color-axa);\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/Button/ButtonCommon.scss","../../src/Button/ButtonLF.scss","../../src/Button/ButtonLF.scss%23sass"],"names":[],"mappings":"AAEA,eAKE,kBAAA,CAQA,+CAAA,CAVA,QAAA,CCDF,kCAAA,CDUE,sCAAA,CAXA,YAAA,CAOA,mCAAA,CACA,iCAAA,CACA,eAAA,CAHA,uCAAA,CADA,sBAAA,CAKA,qCAAA,CCXF,6BDEE,CAYA,mDAAA,CACA,iFAAA,CAEA,iCAAA,CACA,wBAAA,CAAA,gBCFF,CDIE,qBACE,mBCFJ,CDKE,6BACE,6CAAA,CACA,kBCHJ,CDME,2DAEE,mBCLJ,CDOI,mFACE,YCLN,CDSE,mBACE,cAAA,CACA,iBCPJ,CDUE,sBACE,sCAAA,CACA,kBCRJ,CDUI,4FAGE,yBCVN,CDcE,0BACE,qDCZJ,CCzCA,eACE,0CAAA,CACA,8CAAA,CACA,+BAAA,CACA,sCAAA,CACA,oDAAA,CACA,wDAAA,CACA,sDD+CF,CC7CE,wBATF,eAUI,sDAAA,CACA,wFDiDF,CACF,CC9CE,qBACE,6CDgDJ,CC7CE,sBACE,gDD+CJ,CC5CE,kDAEE,0CD6CJ,CC1CE,2DAEE,+CAAA,CACA,iDAAA,CACA,2CD2CJ,CCxCE,iCACE,mDD0CJ,CCxCI,uCACE,wDD0CN,CCvCI,wCACE,yDDyCN,CCrCE,gCACE,4CAAA,CACA,4CDuCJ,CCrCI,0HAGE,4CAAA,CACA,+CDqCN,CClCI,uCACE,4CAAA,CACA,2DDoCN,CChCE,sBACE,4CAAA,CACA,+BAAA,CACA,kBDkCJ,CChCI,wBALF,sBAMI,sDDmCJ,CACF,CCjCI,4FAGE,+CAAA,CACA,+BDiCN,CC9BI,6BACE,kDDgCN,CC7BI,yEAEE,+BD8BN,CC1BE,0BACE,4CAAA,CACA,4CAAA,CACA,sCAAA,CAEA,qDD2BJ,CCzBI,yIAIE,4CAAA,CACA,+CAAA,CAEA,8CDuBN,CCpBI,iCACE,6CDsBN,CClBE,kCACE,0CAAA,CACA,8CAAA,CACA,wCAAA,CAEA,qDDmBJ,CCjBI,gIAGE,+CAAA,CACA,+CAAA,CACA,2CDiBN,CCdI,yCACE,+CAAA,CACA,kDAAA,CACA,2CDgBN,CCZE,yBACE,sDAAA,CACA,4CDcJ,CCZI,+BACE,6DDcN,CCXI,gCACE,8DAAA,CACA,4CDaN","file":"ButtonLF.css","sourcesContent":["@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: calc(12 / var(--font-size-base) * 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, 150ms);\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 {\n outline-color: transparent;\n }\n\n &:focus-visible {\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 --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-font-size: calc(18 / var(--font-size-base) * 1rem);\n --button-padding: calc(16 / var(--font-size-base) * 1rem)\n calc(24 / var(--font-size-base) * 1rem);\n }\n\n &:hover {\n --button-bg-color-default: var(--color-blue-1);\n }\n\n &:active {\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 &:hover {\n --button-bg-color-default: var(--color-btn-business-dark);\n }\n\n &:active {\n --button-bg-color-default: var(--color-btn-business-light);\n }\n }\n\n &--primary-inverse {\n --button-text-color-default: var(--color-axa);\n --button-bg-color-default: var(--color-white);\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 &:active {\n --button-bg-color-default: var(--color-white);\n --button-text-color-default: var(--color-btn-business-light);\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 &:hover,\n &:focus,\n &:focus-visible {\n --button-text-color-default: var(--color-blue-1);\n --button-bg-color-default: transparent;\n }\n\n &:active {\n --button-text-color-default: var(--color-btn-light);\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 &: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 &: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\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 &:active {\n --button-bg-color-default: var(--color-btn-tertiary-bg-lighter);\n --button-text-color-default: var(--color-axa);\n }\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 --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-font-size: calc(18 / var(--font-size-base) * 1rem);\n --button-padding: calc(16 / var(--font-size-base) * 1rem)\n calc(24 / var(--font-size-base) * 1rem);\n }\n\n &:hover {\n --button-bg-color-default: var(--color-blue-1);\n }\n\n &:active {\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 &:hover {\n --button-bg-color-default: var(--color-btn-business-dark);\n }\n\n &:active {\n --button-bg-color-default: var(--color-btn-business-light);\n }\n }\n\n &--primary-inverse {\n --button-text-color-default: var(--color-axa);\n --button-bg-color-default: var(--color-white);\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 &:active {\n --button-bg-color-default: var(--color-white);\n --button-text-color-default: var(--color-btn-business-light);\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 &:hover,\n &:focus,\n &:focus-visible {\n --button-text-color-default: var(--color-blue-1);\n --button-bg-color-default: transparent;\n }\n\n &:active {\n --button-text-color-default: var(--color-btn-light);\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 &: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 &: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\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 &:active {\n --button-bg-color-default: var(--color-btn-tertiary-bg-lighter);\n --button-text-color-default: var(--color-axa);\n }\n }\n}\n"]}
|
|
@@ -7,14 +7,14 @@
|
|
|
7
7
|
--button-text-color-default: var(--color-white);
|
|
8
8
|
--button-radius: var(--radius-8);
|
|
9
9
|
--button-shadow-color: var(--color-axa);
|
|
10
|
-
--button-padding: calc(16 / var(--font-size-base) * 1rem)
|
|
11
|
-
|
|
12
|
-
--button-line-height: calc(20 / var(--font-size-base) * 1rem);
|
|
10
|
+
--button-padding: calc(16 / var(--font-size-base) * 1rem);
|
|
11
|
+
--button-line-height: calc(24 / var(--font-size-base) * 1rem);
|
|
13
12
|
--button-font-size: calc(16 / var(--font-size-base) * 1rem);
|
|
14
13
|
|
|
15
14
|
@media (width > #{breakpoints.$breakpoint-lg}) {
|
|
16
|
-
--button-line-height: calc(22.5 / var(--font-size-base) * 1rem);
|
|
17
15
|
--button-font-size: calc(18 / var(--font-size-base) * 1rem);
|
|
16
|
+
--button-padding: calc(16 / var(--font-size-base) * 1rem)
|
|
17
|
+
calc(24 / var(--font-size-base) * 1rem);
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
&:hover {
|
|
@@ -53,17 +53,17 @@
|
|
|
53
53
|
--button-text-color-default: var(--color-axa);
|
|
54
54
|
--button-bg-color-default: var(--color-white);
|
|
55
55
|
|
|
56
|
-
&:active {
|
|
57
|
-
--button-bg-color-default: var(--color-white);
|
|
58
|
-
--button-text-color-default: var(--color-btn-business-light);
|
|
59
|
-
}
|
|
60
|
-
|
|
61
56
|
&:hover,
|
|
62
57
|
&:focus,
|
|
63
58
|
&:focus-visible {
|
|
64
59
|
--button-bg-color-default: var(--color-white);
|
|
65
60
|
--button-text-color-default: var(--color-blue-1);
|
|
66
61
|
}
|
|
62
|
+
|
|
63
|
+
&:active {
|
|
64
|
+
--button-bg-color-default: var(--color-white);
|
|
65
|
+
--button-text-color-default: var(--color-btn-business-light);
|
|
66
|
+
}
|
|
67
67
|
}
|
|
68
68
|
|
|
69
69
|
&--ghost {
|
|
@@ -75,10 +75,6 @@
|
|
|
75
75
|
--button-font-size: calc(16 / var(--font-size-base) * 1rem);
|
|
76
76
|
}
|
|
77
77
|
|
|
78
|
-
&:active {
|
|
79
|
-
--button-text-color-default: var(--color-btn-light);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
78
|
&:hover,
|
|
83
79
|
&:focus,
|
|
84
80
|
&:focus-visible {
|
|
@@ -86,6 +82,10 @@
|
|
|
86
82
|
--button-bg-color-default: transparent;
|
|
87
83
|
}
|
|
88
84
|
|
|
85
|
+
&:active {
|
|
86
|
+
--button-text-color-default: var(--color-btn-light);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
89
|
&:disabled,
|
|
90
90
|
&[aria-disabled="true"] {
|
|
91
91
|
--button-bg-color-default: transparent;
|
|
@@ -121,12 +121,6 @@
|
|
|
121
121
|
|
|
122
122
|
box-shadow: 0 0 0 2px var(--button-shadow-color) inset;
|
|
123
123
|
|
|
124
|
-
&:active {
|
|
125
|
-
--button-bg-color-default: var(--color-gray-200);
|
|
126
|
-
--button-text-color-default: var(--color-btn-light);
|
|
127
|
-
--button-shadow-color: var(--color-gray-200);
|
|
128
|
-
}
|
|
129
|
-
|
|
130
124
|
&:hover,
|
|
131
125
|
&:focus,
|
|
132
126
|
&:focus-visible {
|
|
@@ -134,6 +128,12 @@
|
|
|
134
128
|
--button-text-color-default: var(--color-blue-1);
|
|
135
129
|
--button-shadow-color: var(--color-gray-400);
|
|
136
130
|
}
|
|
131
|
+
|
|
132
|
+
&:active {
|
|
133
|
+
--button-bg-color-default: var(--color-gray-200);
|
|
134
|
+
--button-text-color-default: var(--color-btn-light);
|
|
135
|
+
--button-shadow-color: var(--color-gray-200);
|
|
136
|
+
}
|
|
137
137
|
}
|
|
138
138
|
|
|
139
139
|
&--tertiary {
|
|
@@ -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:has(>input:focus-visible){outline:2px solid var(--input-text-outline-color);outline-offset:3px}.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);--input-text-outline-color:var(--axa-blue-65)}.af-form__input-variant:has(>input:not([value=""])){--input-border-color:var(--axa-blue-100);--input-text-color:var(--axa-blue-100)}.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/InputText/InputTextCommon.scss","../../../src/Form/InputText/InputTextApollo.scss","../../../src/Form/InputText/InputTextApollo.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,kDACE,iDAAA,CACA,kBCJN,CDOI,8BACE,SAAA,CAIA,6BAAA,CAHA,6CAAA,CACA,eAAA,CACA,kBCJN,CDOM,2CAEE,yCAAA,CADA,eCJR,CDQM,gCACE,kCAAA,CACA,iCCNR,CDSM,wBAjBF,8BAkBI,6CCNN,CACF,CDSI,8DACE,oDCPN,CDUI,oHAEE,gBAAA,CACA,kBCTN,CDWM,oIACE,kBCTR,CDcE,uBAIE,+BAAA,CAHA,6CAAA,CACA,eAAA,CACA,kBCXJ,CDcI,wBANF,uBAOI,6CCXJ,CACF,CC3DE,uBACE,sCD8DJ,CC3DE,wBACE,uCAAA,CACA,qCAAA,CACA,6BAAA,CACA,oCAAA,CACA,2CAAA,CACA,6CD6DJ,CC3DI,oDACE,wCAAA,CACA,sCD6DN,CC1DI,8DACE,wCAAA,CACA,gDD4DN,CCzDI,sDACE,yCD2DN,CCxDI,oHAEE,sCAAA,CACA,oCAAA,CACA,iCAAA,CACA,yCDyDN,CCvDM,kKACE,sCDyDR","file":"InputTextApollo.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 &:has(> input:focus-visible) {\n outline: 2px solid var(--input-text-outline-color);\n outline-offset: 3px;\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 \"./InputTextCommon\";\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 --input-text-outline-color: var(--axa-blue-65);\n\n &:has(> input:not([value=\"\"])) {\n --input-border-color: var(--axa-blue-100);\n --input-text-color: var(--axa-blue-100);\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 \"./InputTextCommon\";\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 --input-text-outline-color: var(--axa-blue-65);\n\n &:has(> input:not([value=\"\"])) {\n --input-border-color: var(--axa-blue-100);\n --input-text-color: var(--axa-blue-100);\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"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
@use "../../common/breakpoints" as breakpoints;
|
|
2
2
|
|
|
3
|
-
@use "./
|
|
3
|
+
@use "./InputTextCommon";
|
|
4
4
|
|
|
5
5
|
.af-form {
|
|
6
6
|
&__input-helper {
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
--input-bg-color: var(--white);
|
|
14
14
|
--input-text-color: var(--neutral-80);
|
|
15
15
|
--input-text-icon-color: var(--axa-blue-100);
|
|
16
|
+
--input-text-outline-color: var(--axa-blue-65);
|
|
16
17
|
|
|
17
18
|
&:has(> input:not([value=""])) {
|
|
18
19
|
--input-border-color: var(--axa-blue-100);
|
|
@@ -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:has(>input:focus-visible){outline:2px solid var(--input-text-outline-color);outline-offset:3px}.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/InputText/InputTextCommon.scss%23sass","../../../src/Form/InputText/InputTextCommon.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,kDACE,iDAAA,CACA,kBCJN,CDOI,8BACE,SAAA,CAIA,6BAAA,CAHA,6CAAA,CACA,eAAA,CACA,kBCJN,CDOM,2CAEE,yCAAA,CADA,eCJR,CDQM,gCACE,kCAAA,CACA,iCCNR,CDSM,wBAjBF,8BAkBI,6CCNN,CACF,CDSI,8DACE,oDCPN,CDUI,oHAEE,gBAAA,CACA,kBCTN,CDWM,oIACE,kBCTR,CDcE,uBAIE,+BAAA,CAHA,6CAAA,CACA,eAAA,CACA,kBCXJ,CDcI,wBANF,uBAOI,6CCXJ,CACF","file":"InputTextCommon.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 &:has(> input:focus-visible) {\n outline: 2px solid var(--input-text-outline-color);\n outline-offset: 3px;\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 &:has(> input:focus-visible) {\n outline: 2px solid var(--input-text-outline-color);\n outline-offset: 3px;\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 @@
|
|
|
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:has(>input:focus-visible){outline:2px solid var(--input-text-outline-color);outline-offset:3px}.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);--input-text-outline-color:var(--color-blue-3)}.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/InputText/InputTextCommon.scss","../../../src/Form/InputText/InputTextLF.scss","../../../src/Form/InputText/InputTextLF.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,kDACE,iDAAA,CACA,kBCJN,CDOI,8BACE,SAAA,CAIA,6BAAA,CAHA,6CAAA,CACA,eAAA,CACA,kBCJN,CDOM,2CAEE,yCAAA,CADA,eCJR,CDQM,gCACE,kCAAA,CACA,iCCNR,CDSM,wBAjBF,8BAkBI,6CCNN,CACF,CDSI,8DACE,oDCPN,CDUI,oHAEE,gBAAA,CACA,kBCTN,CDWM,oIACE,kBCTR,CDcE,uBAIE,+BAAA,CAHA,6CAAA,CACA,eAAA,CACA,kBCXJ,CDcI,wBANF,uBAOI,6CCXJ,CACF,CC3DE,uBACE,0CD8DJ,CC3DE,wBACE,0CAAA,CACA,kDAAA,CACA,mCAAA,CACA,wCAAA,CACA,6CAAA,CACA,oDAAA,CACA,8CD6DJ,CC3DI,oDACE,qCD6DN,CC1DI,8DACE,qCAAA,CACA,oDD4DN,CCzDI,sDACE,yCD2DN,CCxDI,oHAEE,0CAAA,CACA,wCAAA,CACA,sCAAA,CACA,6CDyDN,CCvDM,kKACE,0CDyDR","file":"InputTextLF.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 &:has(> input:focus-visible) {\n outline: 2px solid var(--input-text-outline-color);\n outline-offset: 3px;\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 \"./InputTextCommon\";\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 --input-text-outline-color: var(--color-blue-3);\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 \"./InputTextCommon\";\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 --input-text-outline-color: var(--color-blue-3);\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"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
@use "../../common/breakpoints" as breakpoints;
|
|
2
2
|
|
|
3
|
-
@use "./
|
|
3
|
+
@use "./InputTextCommon";
|
|
4
4
|
|
|
5
5
|
.af-form {
|
|
6
6
|
&__input-helper {
|
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
--input-text-color: var(--color-gray-900);
|
|
15
15
|
--input-text-icon-color: var(--color-gray-900);
|
|
16
16
|
--input-text-placeholder-color: var(--color-gray-700);
|
|
17
|
+
--input-text-outline-color: var(--color-blue-3);
|
|
17
18
|
|
|
18
19
|
&:has(> input:not([value=""])) {
|
|
19
20
|
--input-border-color: var(--color-axa);
|
|
@@ -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(4/var(--font-size-base)*1rem);width:100%}.af-item-label:has(>.af-item-label__sidebutton){column-gap:calc(12/var(--font-size-base)*1rem)}.af-item-label:not(:has(>.af-item-label__description),*~.af-item-label__more){grid-template-areas:"label sidebutton"}.af-item-label:not(:has(>.af-item-label__more)):has(*~.af-item-label__description){grid-template-areas:"label sidebutton" "description sidebutton"}.af-item-label:not(:has(>.af-item-label__description)):has(*~.af-item-label__more){grid-template-areas:"label sidebutton" "more more"}.af-item-label__label{color:var(--label-color);font-size:calc(16/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-color:var(--neutral-100);--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(4/var(--font-size-base)*1rem);width:100%}.af-item-label:has(>.af-item-label__sidebutton){column-gap:calc(12/var(--font-size-base)*1rem)}.af-item-label:not(:has(>.af-item-label__description),*~.af-item-label__more){grid-template-areas:"label sidebutton"}.af-item-label:not(:has(>.af-item-label__more)):has(*~.af-item-label__description){grid-template-areas:"label sidebutton" "description sidebutton"}.af-item-label:not(:has(>.af-item-label__description)):has(*~.af-item-label__more){grid-template-areas:"label sidebutton" "more more"}.af-item-label__label{color:var(--label-color);font-size:calc(16/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-color:var(--neutral-100);--label-description-color:var(--neutral-80)}.af-item-label>label>span[aria-hidden]{display:none}
|
|
@@ -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,CAEA,2EACE,CCFJ,8BAAA,CDME,qBAAA,CACA,0CAAA,CCTF,UAKA,CDME,gDACE,8CCJJ,CDOE,8EACE,sCCLJ,CDQE,mFACE,+DCNJ,CDWE,mFACE,kDCTJ,CDcE,sBAKE,wBAAA,CAHA,6CAAA,CACA,eAAA,CAFA,eAAA,CAGA,+CCXJ,CDcI,wBAPF,sBAQI,6CAAA,CACA,+CCXJ,CACF,CDcE,2BACE,oBAAA,CACA,qBCZJ,CDcI,6DACE,cCZN,CDgBE,qBACE,cCdJ,CDiBE,4BAKE,oCAAA,CAHA,6CAAA,CACA,eAAA,CAFA,qBAAA,CAGA,kBCdJ,CDiBI,wBAPF,4BAQI,6CAAA,CACA,+CCdJ,CACF,CCnDA,eACE,gCAAA,CACA,2CDsDF","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(4 / var(--font-size-base) * 1rem);\n\n &:has(> .af-item-label__sidebutton) {\n column-gap: calc(12 / var(--font-size-base) * 1rem);\n }\n\n &:not(:has(> .af-item-label__description), * ~ .af-item-label__more) {\n grid-template-areas: \"label sidebutton\";\n }\n\n &:not(:has(> .af-item-label__more)):has(* ~ .af-item-label__description) {\n grid-template-areas:\n \"label sidebutton\"\n \"description sidebutton\";\n }\n\n &:not(:has(> .af-item-label__description)):has(* ~ .af-item-label__more) {\n grid-template-areas:\n \"label sidebutton\"\n \"more more\";\n }\n\n &__label {\n grid-area: label;\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 600;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n color: var(--label-color);\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-color: var(--neutral-100);\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-color: var(--neutral-100);\n --label-description-color: var(--neutral-80);\n}\n"]}
|
|
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,CACA,0CAAA,CCTF,UAKA,CDME,gDACE,8CCJJ,CDOE,8EACE,sCCLJ,CDQE,mFACE,+DCNJ,CDWE,mFACE,kDCTJ,CDcE,sBAKE,wBAAA,CAHA,6CAAA,CACA,eAAA,CAFA,eAAA,CAGA,+CCXJ,CDcI,wBAPF,sBAQI,6CAAA,CACA,+CCXJ,CACF,CDcE,2BACE,oBAAA,CACA,qBCZJ,CDcI,6DACE,cCZN,CDgBE,qBACE,cCdJ,CDiBE,4BAKE,oCAAA,CAHA,6CAAA,CACA,eAAA,CAFA,qBAAA,CAGA,kBCdJ,CDiBI,wBAPF,4BAQI,6CAAA,CACA,+CCdJ,CACF,CCnDA,eACE,gCAAA,CACA,2CDsDF,CCpDE,uCACE,YDsDJ","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(4 / var(--font-size-base) * 1rem);\n\n &:has(> .af-item-label__sidebutton) {\n column-gap: calc(12 / var(--font-size-base) * 1rem);\n }\n\n &:not(:has(> .af-item-label__description), * ~ .af-item-label__more) {\n grid-template-areas: \"label sidebutton\";\n }\n\n &:not(:has(> .af-item-label__more)):has(* ~ .af-item-label__description) {\n grid-template-areas:\n \"label sidebutton\"\n \"description sidebutton\";\n }\n\n &:not(:has(> .af-item-label__description)):has(* ~ .af-item-label__more) {\n grid-template-areas:\n \"label sidebutton\"\n \"more more\";\n }\n\n &__label {\n grid-area: label;\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 600;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n color: var(--label-color);\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-color: var(--neutral-100);\n --label-description-color: var(--neutral-80);\n\n > label > span[aria-hidden] {\n display: none;\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n@use \"./ItemLabelCommon\";\n\n.af-item-label {\n --label-color: var(--neutral-100);\n --label-description-color: var(--neutral-80);\n\n > label > span[aria-hidden] {\n display: none;\n }\n}\n"]}
|