@axa-fr/design-system-apollo-css 1.0.5-alpha.280 → 1.0.5-alpha.281
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/apollo.css +1 -1
- package/dist/apollo.css.map +1 -1
- package/dist/look-and-feel.css +1 -1
- package/dist/look-and-feel.css.map +1 -1
- package/package.json +1 -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 {
|