@axa-fr/design-system-apollo-css 1.0.3-alpha.240 → 1.0.3-alpha.243
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/ButtonCommon.css +1 -1
- package/dist/Button/ButtonCommon.css.map +1 -1
- package/dist/Button/ButtonCommon.scss +1 -2
- package/dist/Button/ButtonLF.css +1 -1
- package/dist/Button/ButtonLF.css.map +1 -1
- package/dist/Tag/TagApollo.css +1 -1
- package/dist/Tag/TagApollo.css.map +1 -1
- package/dist/Tag/TagCommon.css +1 -1
- package/dist/Tag/TagCommon.css.map +1 -1
- package/dist/Tag/TagCommon.scss +1 -0
- package/dist/Tag/TagLF.css +1 -1
- package/dist/Tag/TagLF.css.map +1 -1
- package/dist/TimelineVertical/TimelineVerticalApollo.css +1 -0
- package/dist/TimelineVertical/TimelineVerticalApollo.css.map +1 -0
- package/dist/TimelineVertical/TimelineVerticalApollo.scss +22 -0
- package/dist/TimelineVertical/TimelineVerticalCommon.css +1 -0
- package/dist/TimelineVertical/TimelineVerticalCommon.css.map +1 -0
- package/dist/TimelineVertical/TimelineVerticalCommon.scss +29 -0
- package/dist/TimelineVertical/TimelineVerticalLF.css +1 -0
- package/dist/TimelineVertical/TimelineVerticalLF.css.map +1 -0
- package/dist/TimelineVertical/TimelineVerticalLF.scss +22 -0
- package/dist/Toggle/ToggleApollo.css +1 -1
- package/dist/Toggle/ToggleApollo.css.map +1 -1
- package/dist/Toggle/ToggleCommon.css +1 -1
- package/dist/Toggle/ToggleCommon.css.map +1 -1
- package/dist/Toggle/ToggleCommon.scss +1 -1
- package/dist/Toggle/ToggleLF.css +1 -1
- package/dist/Toggle/ToggleLF.css.map +1 -1
- package/dist/apollo.css +1 -1
- package/dist/apollo.css.map +1 -1
- package/dist/apollo.scss +1 -0
- package/dist/look-and-feel.css +1 -1
- package/dist/look-and-feel.css.map +1 -1
- package/dist/look-and-feel.scss +1 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-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
|
|
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(16/var(--font-size-base)*1rem);--button-line-height:calc(24/var(--font-size-base)*1rem);--button-font-size:calc(16/var(--font-size-base)*1rem)}@media (width > 1279px){.af-btn-client{--button-padding:calc(12/var(--font-size-base)*1rem) calc(24/var(--font-size-base)*1rem);--button-line-height:calc(32/var(--font-size-base)*1rem);--button-font-size:calc(18/var(--font-size-base)*1rem)}}.af-btn-client:hover{--button-bg-color-default:var(--axa-blue-120)}.af-btn-client:active{--button-bg-color-default:var(--axa-blue-80)}.af-btn-client:focus,.af-btn-client:focus-visible{--button-outline-color:var(--axa-blue-65)}.af-btn-client:disabled,.af-btn-client[aria-disabled=true]{--button-bg-color-default:var(--neutral-5);--button-text-color-default:var(--neutral-50);--button-shadow-color:var(--neutral-50)}.af-btn-client--primary-business{--button-bg-color-default:var(--warning-100);--button-text-color-default:var(--white)}.af-btn-client--primary-business:active{--button-bg-color-default:var(--warning-80)}.af-btn-client--primary-business:focus,.af-btn-client--primary-business:focus-visible,.af-btn-client--primary-business:hover{--button-bg-color-default:var(--warning-120)}.af-btn-client--primary-inverse{--button-bg-color-default:var(--white);--button-text-color-default:var(--axa-blue-100)}.af-btn-client--primary-inverse:active{--button-bg-color-default:var(--neutral-5);--button-text-color-default:var(--axa-blue-80)}.af-btn-client--primary-inverse:focus,.af-btn-client--primary-inverse:focus-visible,.af-btn-client--primary-inverse:hover{--button-bg-color-default:var(--neutral-14);--button-text-color-default:var(--axa-blue-120)}.af-btn-client--ghost{--button-bg-color-default:#0000;--button-text-color-default:var(--axa-blue-100);--button-padding:0}.af-btn-client--ghost:active{--button-text-color-default:var(--axa-blue-80)}.af-btn-client--ghost:focus,.af-btn-client--ghost:focus-visible,.af-btn-client--ghost:hover{--button-text-color-default:var(--axa-blue-120);--button-bg-color-default:#0000}.af-btn-client--ghost:disabled,.af-btn-client--ghost[aria-disabled=true]{--button-bg-color-default:#0000}.af-btn-client--secondary{--button-bg-color-default:var(--white);--button-text-color-default:var(--axa-blue-100)}.af-btn-client--secondary:active{--button-bg-color-default:var(--axa-blue-80);--button-text-color-default:var(--white);--button-shadow-color:var(--axa-blue-80)}.af-btn-client--secondary:focus,.af-btn-client--secondary:focus-visible,.af-btn-client--secondary:hover{--button-bg-color-default:var(--axa-blue-120);--button-text-color-default:var(--white);--button-shadow-color:var(--axa-blue-120)}.af-btn-client--secondary-inverse{--button-bg-color-default:var(--axa-blue-100);--button-text-color-default:var(--white);--button-shadow-color:var(--white)}.af-btn-client--secondary-inverse:active{--button-bg-color-default:var(--neutral-5);--button-text-color-default:var(--axa-blue-80);--button-shadow-color:var(--neutral-5)}.af-btn-client--secondary-inverse:focus,.af-btn-client--secondary-inverse:focus-visible,.af-btn-client--secondary-inverse:hover{--button-bg-color-default:var(--neutral-14);--button-text-color-default:var(--axa-blue-120);--button-shadow-color:var(--neutral-14)}.af-btn-client--tertiary{--button-bg-color-default:var(--axa-blue-8);--button-text-color-default:var(--axa-blue-100)}.af-btn-client--tertiary:active{--button-bg-color-default:var(--axa-blue-80);--button-text-color-default:var(--white)}.af-btn-client--tertiary:focus,.af-btn-client--tertiary:focus-visible,.af-btn-client--tertiary:hover{--button-bg-color-default:var(--axa-blue-120);--button-text-color-default:var(--white)}
|
|
@@ -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,kDAEE,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,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 &:focus {\n outline: 2px solid var(--button-outline-color);\n outline-offset: 3px;\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n pointer-events: none;\n\n & > [aria-live] {\n margin: unset;\n }\n }\n\n & > svg {\n aspect-ratio: 1;\n fill: currentcolor;\n }\n\n &--ghost {\n gap: calc(4 / var(--font-size-base) * 1rem);\n line-height: 1.25em;\n\n &:hover,\n &:focus,\n &:focus-visible {\n text-decoration: underline;\n }\n }\n\n &--secondary {\n box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n }\n\n &--secondary-inverse {\n box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n }\n}\n","/* Apollo first and mobile first approch */\n\n@use \"../common/breakpoints\" as breakpoints;\n\n@use \"./ButtonCommon\";\n\n.af-btn-client {\n --button-bg-color-default: var(--axa-blue-100);\n --button-text-color-default: var(--white);\n --button-radius: var(--radius-32);\n --button-shadow-color: var(--axa-blue-100);\n --button-padding: calc(12 / var(--font-size-base) * 1rem)\n calc(16 / var(--font-size-base) * 1rem);\n --button-line-height: calc(24 / var(--font-size-base) * 1rem);\n --button-font-size: calc(16 / var(--font-size-base) * 1rem);\n\n @media (width > #{breakpoints.$breakpoint-lg}) {\n --button-padding: calc(12 / var(--font-size-base) * 1rem)\n calc(24 / var(--font-size-base) * 1rem);\n --button-line-height: calc(32 / var(--font-size-base) * 1rem);\n --button-font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n\n &:hover {\n --button-bg-color-default: var(--axa-blue-120);\n }\n\n &:active {\n --button-bg-color-default: var(--axa-blue-80);\n }\n\n &:focus-visible,\n &:focus {\n --button-outline-color: var(--axa-blue-65);\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n --button-bg-color-default: var(--neutral-5);\n --button-text-color-default: var(--neutral-50);\n --button-shadow-color: var(--neutral-50);\n }\n\n &--primary-business {\n --button-bg-color-default: var(--warning-100);\n --button-text-color-default: var(--white);\n\n &:active {\n --button-bg-color-default: var(--warning-80);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--warning-120);\n }\n }\n\n &--primary-inverse {\n --button-bg-color-default: var(--white);\n --button-text-color-default: var(--axa-blue-100);\n\n &:active {\n --button-bg-color-default: var(--neutral-5);\n --button-text-color-default: var(--axa-blue-80);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--neutral-14);\n --button-text-color-default: var(--axa-blue-120);\n }\n }\n\n &--ghost {\n --button-bg-color-default: transparent;\n --button-text-color-default: var(--axa-blue-100);\n --button-padding: 0;\n\n &:active {\n --button-text-color-default: var(--axa-blue-80);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-text-color-default: var(--axa-blue-120);\n --button-bg-color-default: transparent;\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n --button-bg-color-default: transparent;\n }\n }\n\n &--secondary {\n --button-bg-color-default: var(--white);\n --button-text-color-default: var(--axa-blue-100);\n\n &:active {\n --button-bg-color-default: var(--axa-blue-80);\n --button-text-color-default: var(--white);\n --button-shadow-color: var(--axa-blue-80);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--axa-blue-120);\n --button-text-color-default: var(--white);\n --button-shadow-color: var(--axa-blue-120);\n }\n }\n\n &--secondary-inverse {\n --button-bg-color-default: var(--axa-blue-100);\n --button-text-color-default: var(--white);\n --button-shadow-color: var(--white);\n\n &:active {\n --button-bg-color-default: var(--neutral-5);\n --button-text-color-default: var(--axa-blue-80);\n --button-shadow-color: var(--neutral-5);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--neutral-14);\n --button-text-color-default: var(--axa-blue-120);\n --button-shadow-color: var(--neutral-14);\n }\n }\n\n &--tertiary {\n --button-bg-color-default: var(--axa-blue-8);\n --button-text-color-default: var(--axa-blue-100);\n\n &:active {\n --button-bg-color-default: var(--axa-blue-80);\n --button-text-color-default: var(--white);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--axa-blue-120);\n --button-text-color-default: var(--white);\n }\n }\n}\n","/* 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":"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 +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
|
|
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 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Button/ButtonCommon.scss%23sass","../../src/Button/ButtonCommon.scss"],"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,
|
|
1
|
+
{"version":3,"sources":["../../src/Button/ButtonCommon.scss%23sass","../../src/Button/ButtonCommon.scss"],"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,CDkBE,4DACE,qDCbJ","file":"ButtonCommon.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.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"]}
|
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
|
|
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) calc(61.5/var(--font-size-base)*1rem);--button-line-height:calc(20/var(--font-size-base)*1rem);--button-font-size:calc(16/var(--font-size-base)*1rem)}@media (width > 1279px){.af-btn-client{--button-line-height:calc(22.5/var(--font-size-base)*1rem);--button-font-size:calc(18/var(--font-size-base)*1rem)}}.af-btn-client:hover{--button-bg-color-default:var(--color-blue-1)}.af-btn-client:active{--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:active{--button-bg-color-default:var(--color-white);--button-text-color-default:var(--color-btn-business-light)}.af-btn-client--primary-inverse:focus,.af-btn-client--primary-inverse:focus-visible,.af-btn-client--primary-inverse:hover{--button-bg-color-default:var(--color-white);--button-text-color-default:var(--color-blue-1)}.af-btn-client--ghost{--button-text-color-default:var(--color-axa);--button-bg-color-default:#0000;--button-padding:0}@media (width > 1279px){.af-btn-client--ghost{--button-font-size:calc(16/var(--font-size-base)*1rem)}}.af-btn-client--ghost:active{--button-text-color-default:var(--color-btn-light)}.af-btn-client--ghost:focus,.af-btn-client--ghost:focus-visible,.af-btn-client--ghost:hover{--button-text-color-default:var(--color-blue-1);--button-bg-color-default:#0000}.af-btn-client--ghost:disabled,.af-btn-client--ghost[aria-disabled=true]{--button-bg-color-default:#0000}.af-btn-client--secondary{--button-bg-color-default:var(--color-white);--button-text-color-default:var(--color-axa);--button-shadow-color:var(--color-axa);box-shadow:0 0 0 1px var(--button-shadow-color) inset}.af-btn-client--secondary:active,.af-btn-client--secondary:focus,.af-btn-client--secondary:focus-visible,.af-btn-client--secondary:hover{--button-bg-color-default:var(--color-white);--button-text-color-default:var(--color-blue-1);box-shadow:0 0 0 2px var(--color-blue-1) inset}.af-btn-client--secondary:active{--button-bg-color-default:var(--color-blue-2)}.af-btn-client--secondary-inverse{--button-bg-color-default:var(--color-axa);--button-text-color-default:var(--color-white);--button-shadow-color:var(--color-white);box-shadow:0 0 0 2px var(--button-shadow-color) inset}.af-btn-client--secondary-inverse:active{--button-bg-color-default:var(--color-gray-200);--button-text-color-default:var(--color-btn-light);--button-shadow-color:var(--color-gray-200)}.af-btn-client--secondary-inverse:focus,.af-btn-client--secondary-inverse:focus-visible,.af-btn-client--secondary-inverse:hover{--button-bg-color-default:var(--color-gray-400);--button-text-color-default:var(--color-blue-1);--button-shadow-color:var(--color-gray-400)}.af-btn-client--tertiary{--button-bg-color-default:var(--color-btn-tertiary-bg);--button-text-color-default:var(--color-axa)}.af-btn-client--tertiary:hover{--button-bg-color-default:var(--color-btn-tertiary-bg-darker)}.af-btn-client--tertiary:active{--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,kDAEE,6CAAA,CACA,kBCJJ,CDOE,2DAEE,mBCNJ,CDQI,mFACE,YCNN,CDUE,mBACE,cAAA,CACA,iBCRJ,CDWE,sBACE,sCAAA,CACA,kBCTJ,CDWI,4FAGE,yBCXN,CDeE,0BACE,qDCbJ,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 &:focus {\n outline: 2px solid var(--button-outline-color);\n outline-offset: 3px;\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n pointer-events: none;\n\n & > [aria-live] {\n margin: unset;\n }\n }\n\n & > svg {\n aspect-ratio: 1;\n fill: currentcolor;\n }\n\n &--ghost {\n gap: calc(4 / var(--font-size-base) * 1rem);\n line-height: 1.25em;\n\n &:hover,\n &:focus,\n &:focus-visible {\n text-decoration: underline;\n }\n }\n\n &--secondary {\n box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n }\n\n &--secondary-inverse {\n box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n }\n}\n","@use \"../common/breakpoints\" as breakpoints;\n\n@use \"./ButtonCommon\";\n\n.af-btn-client {\n --button-bg-color-default: var(--color-axa);\n --button-text-color-default: var(--color-white);\n --button-radius: var(--radius-8);\n --button-shadow-color: var(--color-axa);\n --button-padding: calc(16 / var(--font-size-base) * 1rem)\n calc(61.5 / var(--font-size-base) * 1rem);\n --button-line-height: calc(20 / var(--font-size-base) * 1rem);\n --button-font-size: calc(16 / var(--font-size-base) * 1rem);\n\n @media (width > #{breakpoints.$breakpoint-lg}) {\n --button-line-height: calc(22.5 / var(--font-size-base) * 1rem);\n --button-font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n\n &:hover {\n --button-bg-color-default: var(--color-blue-1);\n }\n\n &:active {\n --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":"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"]}
|
package/dist/Tag/TagApollo.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-tag{align-items:center;background-color:var(--tag-bg-color);border:1px solid var(--tag-border-color);border-radius:var(--tag-border-radius);color:var(--tag-text-color);cursor:default;display:inline-flex;gap:calc(10/var(--font-size-base)*1rem);justify-content:center;padding:calc(2/var(--font-size-base)*1rem) calc(8/var(--font-size-base)*1rem)}.af-tag__label{font-size:var(--tag-font-size);font-weight:600;line-height:var(--tag-line-height)}.af-tag{--tag-border-radius:var(--radius-4)}.af-tag__label{--tag-font-size:calc(14/var(--font-size-base)*1rem);--tag-line-height:calc(var(--tag-font-size)*1.25)}.af-tag--info{--tag-bg-color:var(--axa-blue-4);--tag-text-color:var(--axa-blue-100);--tag-border-color:var(--axa-blue-100)}.af-tag--success{--tag-bg-color:var(--green-12);--tag-text-color:var(--green-100);--tag-border-color:var(--green-100)}.af-tag--error{--tag-bg-color:var(--axa-red-4);--tag-text-color:var(--axa-red-100);--tag-border-color:var(--axa-red-100)}.af-tag--neutral{--tag-bg-color:var(--neutral-5);--tag-text-color:var(--neutral-80);--tag-border-color:var(--neutral-80)}.af-tag--warning{--tag-bg-color:var(--axa-red-4);--tag-text-color:var(--warning-100);--tag-border-color:var(--warning-100)}@media (width > 1023px){.af-tag__label{--tag-font-size:calc(16/var(--font-size-base)*1rem)}}
|
|
1
|
+
.af-tag{align-items:center;background-color:var(--tag-bg-color);border:1px solid var(--tag-border-color);border-radius:var(--tag-border-radius);color:var(--tag-text-color);cursor:default;display:inline-flex;gap:calc(10/var(--font-size-base)*1rem);justify-content:center;padding:calc(2/var(--font-size-base)*1rem) calc(8/var(--font-size-base)*1rem);width:fit-content}.af-tag__label{font-size:var(--tag-font-size);font-weight:600;line-height:var(--tag-line-height)}.af-tag{--tag-border-radius:var(--radius-4)}.af-tag__label{--tag-font-size:calc(14/var(--font-size-base)*1rem);--tag-line-height:calc(var(--tag-font-size)*1.25)}.af-tag--info{--tag-bg-color:var(--axa-blue-4);--tag-text-color:var(--axa-blue-100);--tag-border-color:var(--axa-blue-100)}.af-tag--success{--tag-bg-color:var(--green-12);--tag-text-color:var(--green-100);--tag-border-color:var(--green-100)}.af-tag--error{--tag-bg-color:var(--axa-red-4);--tag-text-color:var(--axa-red-100);--tag-border-color:var(--axa-red-100)}.af-tag--neutral{--tag-bg-color:var(--neutral-5);--tag-text-color:var(--neutral-80);--tag-border-color:var(--neutral-80)}.af-tag--warning{--tag-bg-color:var(--axa-red-4);--tag-text-color:var(--warning-100);--tag-border-color:var(--warning-100)}@media (width > 1023px){.af-tag__label{--tag-font-size:calc(16/var(--font-size-base)*1rem)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Tag/TagCommon.scss","../../src/Tag/TagApollo.scss","../../src/Tag/TagApollo.scss%23sass"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"sources":["../../src/Tag/TagCommon.scss","../../src/Tag/TagApollo.scss","../../src/Tag/TagApollo.scss%23sass"],"names":[],"mappings":"AAAA,QAOE,kBAAA,CAIA,oCAAA,CANA,wCAAA,CACA,sCAAA,CAIA,2BAAA,CAEA,cAAA,CCXF,mBDAE,CAQA,uCAAA,CADA,sBAAA,CCLF,6EAAA,CDDE,iBCUF,CDEE,eACE,8BAAA,CACA,eAAA,CACA,kCCAJ,CCdA,QACE,mCDiBF,CCfE,eACE,mDAAA,CACA,iDDiBJ,CCdE,cACE,gCAAA,CACA,oCAAA,CACA,sCDgBJ,CCbE,iBACE,8BAAA,CACA,iCAAA,CACA,mCDeJ,CCZE,eACE,+BAAA,CACA,mCAAA,CACA,qCDcJ,CCXE,iBACE,+BAAA,CACA,kCAAA,CACA,oCDaJ,CCVE,iBACE,+BAAA,CACA,mCAAA,CACA,qCDYJ,CCTE,wBACE,eACE,mDDWJ,CACF","file":"TagApollo.css","sourcesContent":[".af-tag {\n display: inline-flex;\n width: fit-content;\n padding: calc(2 / var(--font-size-base) * 1rem)\n calc(8 / var(--font-size-base) * 1rem);\n border: 1px solid var(--tag-border-color);\n border-radius: var(--tag-border-radius);\n align-items: center;\n justify-content: center;\n gap: calc(10 / var(--font-size-base) * 1rem);\n color: var(--tag-text-color);\n background-color: var(--tag-bg-color);\n cursor: default;\n\n &__label {\n font-size: var(--tag-font-size);\n font-weight: 600;\n line-height: var(--tag-line-height);\n }\n}\n","@use \"../common/breakpoints\" as breakpoints;\n@use \"./TagCommon\";\n\n.af-tag {\n --tag-border-radius: var(--radius-4);\n\n &__label {\n --tag-font-size: calc(14 / var(--font-size-base) * 1rem);\n --tag-line-height: calc(var(--tag-font-size) * 1.25);\n }\n\n &--info {\n --tag-bg-color: var(--axa-blue-4);\n --tag-text-color: var(--axa-blue-100);\n --tag-border-color: var(--axa-blue-100);\n }\n\n &--success {\n --tag-bg-color: var(--green-12);\n --tag-text-color: var(--green-100);\n --tag-border-color: var(--green-100);\n }\n\n &--error {\n --tag-bg-color: var(--axa-red-4);\n --tag-text-color: var(--axa-red-100);\n --tag-border-color: var(--axa-red-100);\n }\n\n &--neutral {\n --tag-bg-color: var(--neutral-5);\n --tag-text-color: var(--neutral-80);\n --tag-border-color: var(--neutral-80);\n }\n\n &--warning {\n --tag-bg-color: var(--axa-red-4);\n --tag-text-color: var(--warning-100);\n --tag-border-color: var(--warning-100);\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n &__label {\n --tag-font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n }\n}\n","@use \"../common/breakpoints\" as breakpoints;\n@use \"./TagCommon\";\n\n.af-tag {\n --tag-border-radius: var(--radius-4);\n\n &__label {\n --tag-font-size: calc(14 / var(--font-size-base) * 1rem);\n --tag-line-height: calc(var(--tag-font-size) * 1.25);\n }\n\n &--info {\n --tag-bg-color: var(--axa-blue-4);\n --tag-text-color: var(--axa-blue-100);\n --tag-border-color: var(--axa-blue-100);\n }\n\n &--success {\n --tag-bg-color: var(--green-12);\n --tag-text-color: var(--green-100);\n --tag-border-color: var(--green-100);\n }\n\n &--error {\n --tag-bg-color: var(--axa-red-4);\n --tag-text-color: var(--axa-red-100);\n --tag-border-color: var(--axa-red-100);\n }\n\n &--neutral {\n --tag-bg-color: var(--neutral-5);\n --tag-text-color: var(--neutral-80);\n --tag-border-color: var(--neutral-80);\n }\n\n &--warning {\n --tag-bg-color: var(--axa-red-4);\n --tag-text-color: var(--warning-100);\n --tag-border-color: var(--warning-100);\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n &__label {\n --tag-font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n }\n}\n"]}
|
package/dist/Tag/TagCommon.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-tag{align-items:center;background-color:var(--tag-bg-color);border:1px solid var(--tag-border-color);border-radius:var(--tag-border-radius);color:var(--tag-text-color);cursor:default;display:inline-flex;gap:calc(10/var(--font-size-base)*1rem);justify-content:center;padding:calc(2/var(--font-size-base)*1rem) calc(8/var(--font-size-base)*1rem)}.af-tag__label{font-size:var(--tag-font-size);font-weight:600;line-height:var(--tag-line-height)}
|
|
1
|
+
.af-tag{align-items:center;background-color:var(--tag-bg-color);border:1px solid var(--tag-border-color);border-radius:var(--tag-border-radius);color:var(--tag-text-color);cursor:default;display:inline-flex;gap:calc(10/var(--font-size-base)*1rem);justify-content:center;padding:calc(2/var(--font-size-base)*1rem) calc(8/var(--font-size-base)*1rem);width:fit-content}.af-tag__label{font-size:var(--tag-font-size);font-weight:600;line-height:var(--tag-line-height)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Tag/TagCommon.scss%23sass","../../src/Tag/TagCommon.scss"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"sources":["../../src/Tag/TagCommon.scss%23sass","../../src/Tag/TagCommon.scss"],"names":[],"mappings":"AAAA,QAOE,kBAAA,CAIA,oCAAA,CANA,wCAAA,CACA,sCAAA,CAIA,2BAAA,CAEA,cAAA,CAXA,mBAAA,CAQA,uCAAA,CADA,sBAAA,CALA,6EAAA,CADA,iBCUF,CDEE,eACE,8BAAA,CACA,eAAA,CACA,kCCAJ","file":"TagCommon.css","sourcesContent":[".af-tag {\n display: inline-flex;\n width: fit-content;\n padding: calc(2 / var(--font-size-base) * 1rem)\n calc(8 / var(--font-size-base) * 1rem);\n border: 1px solid var(--tag-border-color);\n border-radius: var(--tag-border-radius);\n align-items: center;\n justify-content: center;\n gap: calc(10 / var(--font-size-base) * 1rem);\n color: var(--tag-text-color);\n background-color: var(--tag-bg-color);\n cursor: default;\n\n &__label {\n font-size: var(--tag-font-size);\n font-weight: 600;\n line-height: var(--tag-line-height);\n }\n}\n",".af-tag {\n display: inline-flex;\n width: fit-content;\n padding: calc(2 / var(--font-size-base) * 1rem)\n calc(8 / var(--font-size-base) * 1rem);\n border: 1px solid var(--tag-border-color);\n border-radius: var(--tag-border-radius);\n align-items: center;\n justify-content: center;\n gap: calc(10 / var(--font-size-base) * 1rem);\n color: var(--tag-text-color);\n background-color: var(--tag-bg-color);\n cursor: default;\n\n &__label {\n font-size: var(--tag-font-size);\n font-weight: 600;\n line-height: var(--tag-line-height);\n }\n}\n"]}
|
package/dist/Tag/TagCommon.scss
CHANGED
package/dist/Tag/TagLF.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-tag{align-items:center;background-color:var(--tag-bg-color);border:1px solid var(--tag-border-color);border-radius:var(--tag-border-radius);color:var(--tag-text-color);cursor:default;display:inline-flex;gap:calc(10/var(--font-size-base)*1rem);justify-content:center;padding:calc(2/var(--font-size-base)*1rem) calc(8/var(--font-size-base)*1rem)}.af-tag__label{font-size:var(--tag-font-size);font-weight:600;line-height:var(--tag-line-height)}.af-tag{--tag-border-radius:var(--default-border-radius)}.af-tag__label{--tag-font-size:calc(14/var(--font-size-base)*1rem);--tag-line-height:calc(var(--tag-font-size)*1.25)}.af-tag--info{--tag-bg-color:var(--color-white);--tag-text-color:var(--color-blue-800);--tag-border-color:var(--color-blue-800)}.af-tag--success{--tag-bg-color:var(--color-white);--tag-text-color:var(--color-green-600);--tag-border-color:var(--color-green-600)}.af-tag--error{--tag-bg-color:var(--color-white);--tag-text-color:var(--color-red-600);--tag-border-color:var(--color-red-600)}.af-tag--neutral{--tag-bg-color:var(--color-white);--tag-text-color:var(--color-gray-700);--tag-border-color:var(--color-gray-700)}.af-tag--warning{--tag-bg-color:var(--color-white);--tag-text-color:var(--color-orange-700);--tag-border-color:var(--color-orange-700)}@media (width > 1023px){.af-tag__label{--tag-font-size:calc(16/var(--font-size-base)*1rem)}}
|
|
1
|
+
.af-tag{align-items:center;background-color:var(--tag-bg-color);border:1px solid var(--tag-border-color);border-radius:var(--tag-border-radius);color:var(--tag-text-color);cursor:default;display:inline-flex;gap:calc(10/var(--font-size-base)*1rem);justify-content:center;padding:calc(2/var(--font-size-base)*1rem) calc(8/var(--font-size-base)*1rem);width:fit-content}.af-tag__label{font-size:var(--tag-font-size);font-weight:600;line-height:var(--tag-line-height)}.af-tag{--tag-border-radius:var(--default-border-radius)}.af-tag__label{--tag-font-size:calc(14/var(--font-size-base)*1rem);--tag-line-height:calc(var(--tag-font-size)*1.25)}.af-tag--info{--tag-bg-color:var(--color-white);--tag-text-color:var(--color-blue-800);--tag-border-color:var(--color-blue-800)}.af-tag--success{--tag-bg-color:var(--color-white);--tag-text-color:var(--color-green-600);--tag-border-color:var(--color-green-600)}.af-tag--error{--tag-bg-color:var(--color-white);--tag-text-color:var(--color-red-600);--tag-border-color:var(--color-red-600)}.af-tag--neutral{--tag-bg-color:var(--color-white);--tag-text-color:var(--color-gray-700);--tag-border-color:var(--color-gray-700)}.af-tag--warning{--tag-bg-color:var(--color-white);--tag-text-color:var(--color-orange-700);--tag-border-color:var(--color-orange-700)}@media (width > 1023px){.af-tag__label{--tag-font-size:calc(16/var(--font-size-base)*1rem)}}
|
package/dist/Tag/TagLF.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Tag/TagCommon.scss","../../src/Tag/TagLF.scss","../../src/Tag/TagLF.scss%23sass"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"sources":["../../src/Tag/TagCommon.scss","../../src/Tag/TagLF.scss","../../src/Tag/TagLF.scss%23sass"],"names":[],"mappings":"AAAA,QAOE,kBAAA,CAIA,oCAAA,CANA,wCAAA,CACA,sCAAA,CAIA,2BAAA,CAEA,cAAA,CCXF,mBDAE,CAQA,uCAAA,CADA,sBAAA,CCLF,6EAAA,CDDE,iBCUF,CDEE,eACE,8BAAA,CACA,eAAA,CACA,kCCAJ,CCdA,QACE,gDDiBF,CCfE,eACE,mDAAA,CACA,iDDiBJ,CCdE,cACE,iCAAA,CACA,sCAAA,CACA,wCDgBJ,CCbE,iBACE,iCAAA,CACA,uCAAA,CACA,yCDeJ,CCZE,eACE,iCAAA,CACA,qCAAA,CACA,uCDcJ,CCXE,iBACE,iCAAA,CACA,sCAAA,CACA,wCDaJ,CCVE,iBACE,iCAAA,CACA,wCAAA,CACA,0CDYJ,CCTE,wBACE,eACE,mDDWJ,CACF","file":"TagLF.css","sourcesContent":[".af-tag {\n display: inline-flex;\n width: fit-content;\n padding: calc(2 / var(--font-size-base) * 1rem)\n calc(8 / var(--font-size-base) * 1rem);\n border: 1px solid var(--tag-border-color);\n border-radius: var(--tag-border-radius);\n align-items: center;\n justify-content: center;\n gap: calc(10 / var(--font-size-base) * 1rem);\n color: var(--tag-text-color);\n background-color: var(--tag-bg-color);\n cursor: default;\n\n &__label {\n font-size: var(--tag-font-size);\n font-weight: 600;\n line-height: var(--tag-line-height);\n }\n}\n","@use \"../common/breakpoints\" as breakpoints;\n@use \"./TagCommon\";\n\n.af-tag {\n --tag-border-radius: var(--default-border-radius);\n\n &__label {\n --tag-font-size: calc(14 / var(--font-size-base) * 1rem);\n --tag-line-height: calc(var(--tag-font-size) * 1.25);\n }\n\n &--info {\n --tag-bg-color: var(--color-white);\n --tag-text-color: var(--color-blue-800);\n --tag-border-color: var(--color-blue-800);\n }\n\n &--success {\n --tag-bg-color: var(--color-white);\n --tag-text-color: var(--color-green-600);\n --tag-border-color: var(--color-green-600);\n }\n\n &--error {\n --tag-bg-color: var(--color-white);\n --tag-text-color: var(--color-red-600);\n --tag-border-color: var(--color-red-600);\n }\n\n &--neutral {\n --tag-bg-color: var(--color-white);\n --tag-text-color: var(--color-gray-700);\n --tag-border-color: var(--color-gray-700);\n }\n\n &--warning {\n --tag-bg-color: var(--color-white);\n --tag-text-color: var(--color-orange-700);\n --tag-border-color: var(--color-orange-700);\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n &__label {\n --tag-font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n }\n}\n","@use \"../common/breakpoints\" as breakpoints;\n@use \"./TagCommon\";\n\n.af-tag {\n --tag-border-radius: var(--default-border-radius);\n\n &__label {\n --tag-font-size: calc(14 / var(--font-size-base) * 1rem);\n --tag-line-height: calc(var(--tag-font-size) * 1.25);\n }\n\n &--info {\n --tag-bg-color: var(--color-white);\n --tag-text-color: var(--color-blue-800);\n --tag-border-color: var(--color-blue-800);\n }\n\n &--success {\n --tag-bg-color: var(--color-white);\n --tag-text-color: var(--color-green-600);\n --tag-border-color: var(--color-green-600);\n }\n\n &--error {\n --tag-bg-color: var(--color-white);\n --tag-text-color: var(--color-red-600);\n --tag-border-color: var(--color-red-600);\n }\n\n &--neutral {\n --tag-bg-color: var(--color-white);\n --tag-text-color: var(--color-gray-700);\n --tag-border-color: var(--color-gray-700);\n }\n\n &--warning {\n --tag-bg-color: var(--color-white);\n --tag-text-color: var(--color-orange-700);\n --tag-border-color: var(--color-orange-700);\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n &__label {\n --tag-font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n }\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.af-timeline-vertical{background-color:var(--timeline-vertical-bg-color);border:1px solid var(--timeline-vertical-border-color);border-radius:var(--radius-8);display:grid;padding:calc(24/var(--font-size-base)*1rem);row-gap:calc(16/var(--font-size-base)*1rem)}.af-timeline-vertical__header{display:grid;row-gap:inherit}.af-timeline-vertical__title{color:var(--timeline-vertical-title-color);font-size:var(--timeline-vertical-title-font-size);font-weight:600;line-height:125%;margin:0}.af-timeline-vertical__description{color:var(--timeline-vertical-description-color);font-size:var(--timeline-vertical-description-font-size);font-weight:400;line-height:125%;margin:0}.af-timeline-vertical{--timeline-vertical-title-color:var(--neutral-100);--timeline-vertical-title-font-size:calc(16/var(--font-size-base)*1rem);--timeline-vertical-description-color:var(--neutral-80);--timeline-vertical-description-font-size:calc(14/var(--font-size-base)*1rem);--timeline-vertical-bg-color:var(--white);--timeline-vertical-border-color:var(--axa-blue-20)}@media (width > 1023px){.af-timeline-vertical{--timeline-vertical-title-font-size:calc(18/var(--font-size-base)*1rem);--timeline-vertical-description-font-size:calc(16/var(--font-size-base)*1rem)}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/TimelineVertical/TimelineVerticalCommon.scss","../../src/TimelineVertical/TimelineVerticalApollo.scss","../../src/TimelineVertical/TimelineVerticalApollo.scss%23sass"],"names":[],"mappings":"AAAA,sBAME,kDAAA,CCHF,sDAAA,CDCE,6BAAA,CCHF,YAAA,CDCE,2CAAA,CAGA,2CCEF,CDCE,8BACE,YAAA,CACA,eCCJ,CDEE,6BAKE,0CAAA,CAHA,kDAAA,CACA,eAAA,CACA,gBAAA,CAHA,QCIJ,CDGE,mCAKE,gDAAA,CCLJ,wDAAA,CDGI,eAAA,CACA,gBAAA,CAHA,QCGJ,CCtBA,sBACE,kDAAA,CACA,uEAAA,CACA,uDAAA,CACA,6EAAA,CAGA,yCAAA,CACA,mDDyBF,CCvBE,wBAVF,sBAWI,uEAAA,CAGA,6ED4BF,CACF","file":"TimelineVerticalApollo.css","sourcesContent":[".af-timeline-vertical {\n display: grid;\n padding: calc(24 / var(--font-size-base) * 1rem);\n border: 1px solid var(--timeline-vertical-border-color);\n border-radius: var(--radius-8);\n row-gap: calc(16 / var(--font-size-base) * 1rem);\n background-color: var(--timeline-vertical-bg-color);\n\n &__header {\n display: grid;\n row-gap: inherit;\n }\n\n &__title {\n margin: 0;\n font-size: var(--timeline-vertical-title-font-size);\n font-weight: 600;\n line-height: 125%;\n color: var(--timeline-vertical-title-color);\n }\n\n &__description {\n margin: 0;\n font-size: var(--timeline-vertical-description-font-size);\n font-weight: 400;\n line-height: 125%;\n color: var(--timeline-vertical-description-color);\n }\n}\n","@use \"../common/breakpoints\" as breakpoints;\n@use \"./TimelineVerticalCommon\";\n\n.af-timeline-vertical {\n --timeline-vertical-title-color: var(--neutral-100);\n --timeline-vertical-title-font-size: calc(16 / var(--font-size-base) * 1rem);\n --timeline-vertical-description-color: var(--neutral-80);\n --timeline-vertical-description-font-size: calc(\n 14 / var(--font-size-base) * 1rem\n );\n --timeline-vertical-bg-color: var(--white);\n --timeline-vertical-border-color: var(--axa-blue-20);\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n --timeline-vertical-title-font-size: calc(\n 18 / var(--font-size-base) * 1rem\n );\n --timeline-vertical-description-font-size: calc(\n 16 / var(--font-size-base) * 1rem\n );\n }\n}\n","@use \"../common/breakpoints\" as breakpoints;\n@use \"./TimelineVerticalCommon\";\n\n.af-timeline-vertical {\n --timeline-vertical-title-color: var(--neutral-100);\n --timeline-vertical-title-font-size: calc(16 / var(--font-size-base) * 1rem);\n --timeline-vertical-description-color: var(--neutral-80);\n --timeline-vertical-description-font-size: calc(\n 14 / var(--font-size-base) * 1rem\n );\n --timeline-vertical-bg-color: var(--white);\n --timeline-vertical-border-color: var(--axa-blue-20);\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n --timeline-vertical-title-font-size: calc(\n 18 / var(--font-size-base) * 1rem\n );\n --timeline-vertical-description-font-size: calc(\n 16 / var(--font-size-base) * 1rem\n );\n }\n}\n"]}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
@use "../common/breakpoints" as breakpoints;
|
|
2
|
+
@use "./TimelineVerticalCommon";
|
|
3
|
+
|
|
4
|
+
.af-timeline-vertical {
|
|
5
|
+
--timeline-vertical-title-color: var(--neutral-100);
|
|
6
|
+
--timeline-vertical-title-font-size: calc(16 / var(--font-size-base) * 1rem);
|
|
7
|
+
--timeline-vertical-description-color: var(--neutral-80);
|
|
8
|
+
--timeline-vertical-description-font-size: calc(
|
|
9
|
+
14 / var(--font-size-base) * 1rem
|
|
10
|
+
);
|
|
11
|
+
--timeline-vertical-bg-color: var(--white);
|
|
12
|
+
--timeline-vertical-border-color: var(--axa-blue-20);
|
|
13
|
+
|
|
14
|
+
@media (width > #{breakpoints.$breakpoint-md}) {
|
|
15
|
+
--timeline-vertical-title-font-size: calc(
|
|
16
|
+
18 / var(--font-size-base) * 1rem
|
|
17
|
+
);
|
|
18
|
+
--timeline-vertical-description-font-size: calc(
|
|
19
|
+
16 / var(--font-size-base) * 1rem
|
|
20
|
+
);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.af-timeline-vertical{background-color:var(--timeline-vertical-bg-color);border:1px solid var(--timeline-vertical-border-color);border-radius:var(--radius-8);display:grid;padding:calc(24/var(--font-size-base)*1rem);row-gap:calc(16/var(--font-size-base)*1rem)}.af-timeline-vertical__header{display:grid;row-gap:inherit}.af-timeline-vertical__title{color:var(--timeline-vertical-title-color);font-size:var(--timeline-vertical-title-font-size);font-weight:600;line-height:125%;margin:0}.af-timeline-vertical__description{color:var(--timeline-vertical-description-color);font-size:var(--timeline-vertical-description-font-size);font-weight:400;line-height:125%;margin:0}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/TimelineVertical/TimelineVerticalCommon.scss%23sass","../../src/TimelineVertical/TimelineVerticalCommon.scss"],"names":[],"mappings":"AAAA,sBAME,kDAAA,CAHA,sDAAA,CACA,6BAAA,CAHA,YAAA,CACA,2CAAA,CAGA,2CCEF,CDCE,8BACE,YAAA,CACA,eCCJ,CDEE,6BAKE,0CAAA,CAHA,kDAAA,CACA,eAAA,CACA,gBAAA,CAHA,QCIJ,CDGE,mCAKE,gDAAA,CAHA,wDAAA,CACA,eAAA,CACA,gBAAA,CAHA,QCGJ","file":"TimelineVerticalCommon.css","sourcesContent":[".af-timeline-vertical {\n display: grid;\n padding: calc(24 / var(--font-size-base) * 1rem);\n border: 1px solid var(--timeline-vertical-border-color);\n border-radius: var(--radius-8);\n row-gap: calc(16 / var(--font-size-base) * 1rem);\n background-color: var(--timeline-vertical-bg-color);\n\n &__header {\n display: grid;\n row-gap: inherit;\n }\n\n &__title {\n margin: 0;\n font-size: var(--timeline-vertical-title-font-size);\n font-weight: 600;\n line-height: 125%;\n color: var(--timeline-vertical-title-color);\n }\n\n &__description {\n margin: 0;\n font-size: var(--timeline-vertical-description-font-size);\n font-weight: 400;\n line-height: 125%;\n color: var(--timeline-vertical-description-color);\n }\n}\n",".af-timeline-vertical {\n display: grid;\n padding: calc(24 / var(--font-size-base) * 1rem);\n border: 1px solid var(--timeline-vertical-border-color);\n border-radius: var(--radius-8);\n row-gap: calc(16 / var(--font-size-base) * 1rem);\n background-color: var(--timeline-vertical-bg-color);\n\n &__header {\n display: grid;\n row-gap: inherit;\n }\n\n &__title {\n margin: 0;\n font-size: var(--timeline-vertical-title-font-size);\n font-weight: 600;\n line-height: 125%;\n color: var(--timeline-vertical-title-color);\n }\n\n &__description {\n margin: 0;\n font-size: var(--timeline-vertical-description-font-size);\n font-weight: 400;\n line-height: 125%;\n color: var(--timeline-vertical-description-color);\n }\n}\n"]}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
.af-timeline-vertical {
|
|
2
|
+
display: grid;
|
|
3
|
+
padding: calc(24 / var(--font-size-base) * 1rem);
|
|
4
|
+
border: 1px solid var(--timeline-vertical-border-color);
|
|
5
|
+
border-radius: var(--radius-8);
|
|
6
|
+
row-gap: calc(16 / var(--font-size-base) * 1rem);
|
|
7
|
+
background-color: var(--timeline-vertical-bg-color);
|
|
8
|
+
|
|
9
|
+
&__header {
|
|
10
|
+
display: grid;
|
|
11
|
+
row-gap: inherit;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
&__title {
|
|
15
|
+
margin: 0;
|
|
16
|
+
font-size: var(--timeline-vertical-title-font-size);
|
|
17
|
+
font-weight: 600;
|
|
18
|
+
line-height: 125%;
|
|
19
|
+
color: var(--timeline-vertical-title-color);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&__description {
|
|
23
|
+
margin: 0;
|
|
24
|
+
font-size: var(--timeline-vertical-description-font-size);
|
|
25
|
+
font-weight: 400;
|
|
26
|
+
line-height: 125%;
|
|
27
|
+
color: var(--timeline-vertical-description-color);
|
|
28
|
+
}
|
|
29
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.af-timeline-vertical{background-color:var(--timeline-vertical-bg-color);border:1px solid var(--timeline-vertical-border-color);border-radius:var(--radius-8);display:grid;padding:calc(24/var(--font-size-base)*1rem);row-gap:calc(16/var(--font-size-base)*1rem)}.af-timeline-vertical__header{display:grid;row-gap:inherit}.af-timeline-vertical__title{color:var(--timeline-vertical-title-color);font-size:var(--timeline-vertical-title-font-size);font-weight:600;line-height:125%;margin:0}.af-timeline-vertical__description{color:var(--timeline-vertical-description-color);font-size:var(--timeline-vertical-description-font-size);font-weight:400;line-height:125%;margin:0}.af-timeline-vertical{--timeline-vertical-title-color:var(--color-gray-900);--timeline-vertical-title-font-size:calc(16/var(--font-size-base)*1rem);--timeline-vertical-description-color:var(--color-gray-700);--timeline-vertical-description-font-size:calc(16/var(--font-size-base)*1rem);--timeline-vertical-bg-color:var(--color-white);--timeline-vertical-border-color:var(--color-blue-400)}@media (width > 1023px){.af-timeline-vertical{--timeline-vertical-title-font-size:calc(18/var(--font-size-base)*1rem);--timeline-vertical-description-font-size:calc(18/var(--font-size-base)*1rem)}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/TimelineVertical/TimelineVerticalCommon.scss","../../src/TimelineVertical/TimelineVerticalLF.scss","../../src/TimelineVertical/TimelineVerticalLF.scss%23sass"],"names":[],"mappings":"AAAA,sBAME,kDAAA,CCHF,sDAAA,CDCE,6BAAA,CCHF,YAAA,CDCE,2CAAA,CAGA,2CCEF,CDCE,8BACE,YAAA,CACA,eCCJ,CDEE,6BAKE,0CAAA,CAHA,kDAAA,CACA,eAAA,CACA,gBAAA,CAHA,QCIJ,CDGE,mCAKE,gDAAA,CCLJ,wDAAA,CDGI,eAAA,CACA,gBAAA,CAHA,QCGJ,CCtBA,sBACE,qDAAA,CACA,uEAAA,CACA,2DAAA,CACA,6EAAA,CAGA,+CAAA,CACA,sDDyBF,CCvBE,wBAVF,sBAWI,uEAAA,CAGA,6ED4BF,CACF","file":"TimelineVerticalLF.css","sourcesContent":[".af-timeline-vertical {\n display: grid;\n padding: calc(24 / var(--font-size-base) * 1rem);\n border: 1px solid var(--timeline-vertical-border-color);\n border-radius: var(--radius-8);\n row-gap: calc(16 / var(--font-size-base) * 1rem);\n background-color: var(--timeline-vertical-bg-color);\n\n &__header {\n display: grid;\n row-gap: inherit;\n }\n\n &__title {\n margin: 0;\n font-size: var(--timeline-vertical-title-font-size);\n font-weight: 600;\n line-height: 125%;\n color: var(--timeline-vertical-title-color);\n }\n\n &__description {\n margin: 0;\n font-size: var(--timeline-vertical-description-font-size);\n font-weight: 400;\n line-height: 125%;\n color: var(--timeline-vertical-description-color);\n }\n}\n","@use \"../common/breakpoints\" as breakpoints;\n@use \"./TimelineVerticalCommon\";\n\n.af-timeline-vertical {\n --timeline-vertical-title-color: var(--color-gray-900);\n --timeline-vertical-title-font-size: calc(16 / var(--font-size-base) * 1rem);\n --timeline-vertical-description-color: var(--color-gray-700);\n --timeline-vertical-description-font-size: calc(\n 16 / var(--font-size-base) * 1rem\n );\n --timeline-vertical-bg-color: var(--color-white);\n --timeline-vertical-border-color: var(--color-blue-400);\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n --timeline-vertical-title-font-size: calc(\n 18 / var(--font-size-base) * 1rem\n );\n --timeline-vertical-description-font-size: calc(\n 18 / var(--font-size-base) * 1rem\n );\n }\n}\n","@use \"../common/breakpoints\" as breakpoints;\n@use \"./TimelineVerticalCommon\";\n\n.af-timeline-vertical {\n --timeline-vertical-title-color: var(--color-gray-900);\n --timeline-vertical-title-font-size: calc(16 / var(--font-size-base) * 1rem);\n --timeline-vertical-description-color: var(--color-gray-700);\n --timeline-vertical-description-font-size: calc(\n 16 / var(--font-size-base) * 1rem\n );\n --timeline-vertical-bg-color: var(--color-white);\n --timeline-vertical-border-color: var(--color-blue-400);\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n --timeline-vertical-title-font-size: calc(\n 18 / var(--font-size-base) * 1rem\n );\n --timeline-vertical-description-font-size: calc(\n 18 / var(--font-size-base) * 1rem\n );\n }\n}\n"]}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
@use "../common/breakpoints" as breakpoints;
|
|
2
|
+
@use "./TimelineVerticalCommon";
|
|
3
|
+
|
|
4
|
+
.af-timeline-vertical {
|
|
5
|
+
--timeline-vertical-title-color: var(--color-gray-900);
|
|
6
|
+
--timeline-vertical-title-font-size: calc(16 / var(--font-size-base) * 1rem);
|
|
7
|
+
--timeline-vertical-description-color: var(--color-gray-700);
|
|
8
|
+
--timeline-vertical-description-font-size: calc(
|
|
9
|
+
16 / var(--font-size-base) * 1rem
|
|
10
|
+
);
|
|
11
|
+
--timeline-vertical-bg-color: var(--color-white);
|
|
12
|
+
--timeline-vertical-border-color: var(--color-blue-400);
|
|
13
|
+
|
|
14
|
+
@media (width > #{breakpoints.$breakpoint-md}) {
|
|
15
|
+
--timeline-vertical-title-font-size: calc(
|
|
16
|
+
18 / var(--font-size-base) * 1rem
|
|
17
|
+
);
|
|
18
|
+
--timeline-vertical-description-font-size: calc(
|
|
19
|
+
18 / var(--font-size-base) * 1rem
|
|
20
|
+
);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-toggle__root{align-items:center;background-color:var(--toggle-bg-color);border:var(--toggle-border-size) solid var(--toggle-border-color);border-radius:var(--toggle-border-radius);display:flex;height:var(--toggle-height);padding:var(--toggle-padding);position:relative;width:var(--toggle-width)}.af-toggle:has(:focus-
|
|
1
|
+
.af-toggle__root{align-items:center;background-color:var(--toggle-bg-color);border:var(--toggle-border-size) solid var(--toggle-border-color);border-radius:var(--toggle-border-radius);display:flex;height:var(--toggle-height);padding:var(--toggle-padding);position:relative;width:var(--toggle-width)}.af-toggle:has(:focus-visible) .af-toggle__root{outline:2px solid var(--toggle-focus-outline-color);outline-offset:2px}.af-toggle:has(:hover,:active){cursor:pointer}.af-toggle__handle{background-color:var(--toggle-handle-color);border-radius:var(--radius-100);height:var(--toggle-handle-size);transform:translateX(var(--toggle-handle-position)) scale(var(--toggle-handle-scale));transition:.2s;width:var(--toggle-handle-size)}.af-toggle input[type=checkbox]{height:1px;position:absolute;width:1px;clip:rect(0,0,0,0)}.af-toggle{--toggle-bg-color:var(--neutral-50);--toggle-border-color:var(--neutral-50);--toggle-focus-outline-color:var(--axa-blue-100);--toggle-border-size:1px;--toggle-border-radius:var(--radius-100);--toggle-padding:2px;--toggle-width:42px;--toggle-height:24px;--toggle-handle-color:var(--white);--toggle-handle-size:20px;--toggle-handle-scale:1;--toggle-handle-position:0}.af-toggle:has(:checked){--toggle-bg-color:var(--axa-blue-100);--toggle-border-color:var(--axa-blue-100)}.af-toggle:has(:checked) .af-toggle__handle{--toggle-handle-position:calc(var(--toggle-width) - var(--toggle-handle-size) - var(--toggle-padding)*2 - var(--toggle-border-size))}.af-toggle:has(:disabled){--toggle-bg-color:var(--neutral-25);--toggle-border-color:var(--neutral-25)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Toggle/ToggleCommon.scss","../../src/Toggle/ToggleApollo.scss","../../src/Toggle/ToggleApollo.scss%23sass"],"names":[],"mappings":"AACE,iBAQE,kBAAA,CACA,uCAAA,CAHA,iEAAA,CACA,yCAAA,CCNJ,YAAA,CDGI,2BAAA,CACA,6BAAA,CAJA,iBAAA,CAEA,yBCMJ,CDGE,
|
|
1
|
+
{"version":3,"sources":["../../src/Toggle/ToggleCommon.scss","../../src/Toggle/ToggleApollo.scss","../../src/Toggle/ToggleApollo.scss%23sass"],"names":[],"mappings":"AACE,iBAQE,kBAAA,CACA,uCAAA,CAHA,iEAAA,CACA,yCAAA,CCNJ,YAAA,CDGI,2BAAA,CACA,6BAAA,CAJA,iBAAA,CAEA,yBCMJ,CDGE,gDACE,mDAAA,CACA,kBCDJ,CDIE,+BACE,cCFJ,CDKE,mBAIE,2CAAA,CADA,+BAAA,CADA,gCAAA,CAGA,qFAAA,CAEA,cAAA,CANA,+BCEJ,CDOE,gCAGE,UAAA,CAFA,iBAAA,CACA,SAAA,CAEA,kBCLJ,CC7BA,WACE,mCAAA,CACA,uCAAA,CACA,gDAAA,CACA,wBAAA,CACA,wCAAA,CACA,oBAAA,CACA,mBAAA,CACA,oBAAA,CACA,kCAAA,CACA,yBAAA,CACA,uBAAA,CACA,0BDgCF,CC9BE,yBACE,qCAAA,CACA,yCDgCJ,CC9BI,4CACE,oIDoCN,CC5BE,0BACE,mCAAA,CACA,uCD8BJ","file":"ToggleApollo.css","sourcesContent":[".af-toggle {\n &__root {\n position: relative;\n display: flex;\n width: var(--toggle-width);\n height: var(--toggle-height);\n padding: var(--toggle-padding);\n border: var(--toggle-border-size) solid var(--toggle-border-color);\n border-radius: var(--toggle-border-radius);\n align-items: center;\n background-color: var(--toggle-bg-color);\n }\n\n &:has(:focus-visible) &__root {\n outline: 2px solid var(--toggle-focus-outline-color);\n outline-offset: 2px;\n }\n\n &:has(:hover, :active) {\n cursor: pointer;\n }\n\n &__handle {\n width: var(--toggle-handle-size);\n height: var(--toggle-handle-size);\n border-radius: var(--radius-100);\n background-color: var(--toggle-handle-color);\n transform: translateX(var(--toggle-handle-position))\n scale(var(--toggle-handle-scale));\n transition: 200ms;\n }\n\n input[type=\"checkbox\"] {\n position: absolute;\n width: 1px;\n height: 1px;\n clip: rect(0, 0, 0, 0);\n }\n}\n","@use \"./ToggleCommon\";\n\n.af-toggle {\n --toggle-bg-color: var(--neutral-50);\n --toggle-border-color: var(--neutral-50);\n --toggle-focus-outline-color: var(--axa-blue-100);\n --toggle-border-size: 1px;\n --toggle-border-radius: var(--radius-100);\n --toggle-padding: 2px;\n --toggle-width: 42px;\n --toggle-height: 24px;\n --toggle-handle-color: var(--white);\n --toggle-handle-size: 20px;\n --toggle-handle-scale: 1;\n --toggle-handle-position: 0;\n\n &:has(:checked) {\n --toggle-bg-color: var(--axa-blue-100);\n --toggle-border-color: var(--axa-blue-100);\n\n .af-toggle__handle {\n --toggle-handle-position: calc(\n var(--toggle-width) - var(--toggle-handle-size) - calc(\n var(--toggle-padding) * 2\n ) - var(--toggle-border-size)\n );\n }\n }\n\n &:has(:disabled) {\n --toggle-bg-color: var(--neutral-25);\n --toggle-border-color: var(--neutral-25);\n }\n}\n","@use \"./ToggleCommon\";\n\n.af-toggle {\n --toggle-bg-color: var(--neutral-50);\n --toggle-border-color: var(--neutral-50);\n --toggle-focus-outline-color: var(--axa-blue-100);\n --toggle-border-size: 1px;\n --toggle-border-radius: var(--radius-100);\n --toggle-padding: 2px;\n --toggle-width: 42px;\n --toggle-height: 24px;\n --toggle-handle-color: var(--white);\n --toggle-handle-size: 20px;\n --toggle-handle-scale: 1;\n --toggle-handle-position: 0;\n\n &:has(:checked) {\n --toggle-bg-color: var(--axa-blue-100);\n --toggle-border-color: var(--axa-blue-100);\n\n .af-toggle__handle {\n --toggle-handle-position: calc(\n var(--toggle-width) - var(--toggle-handle-size) - calc(\n var(--toggle-padding) * 2\n ) - var(--toggle-border-size)\n );\n }\n }\n\n &:has(:disabled) {\n --toggle-bg-color: var(--neutral-25);\n --toggle-border-color: var(--neutral-25);\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-toggle__root{align-items:center;background-color:var(--toggle-bg-color);border:var(--toggle-border-size) solid var(--toggle-border-color);border-radius:var(--toggle-border-radius);display:flex;height:var(--toggle-height);padding:var(--toggle-padding);position:relative;width:var(--toggle-width)}.af-toggle:has(:focus-
|
|
1
|
+
.af-toggle__root{align-items:center;background-color:var(--toggle-bg-color);border:var(--toggle-border-size) solid var(--toggle-border-color);border-radius:var(--toggle-border-radius);display:flex;height:var(--toggle-height);padding:var(--toggle-padding);position:relative;width:var(--toggle-width)}.af-toggle:has(:focus-visible) .af-toggle__root{outline:2px solid var(--toggle-focus-outline-color);outline-offset:2px}.af-toggle:has(:hover,:active){cursor:pointer}.af-toggle__handle{background-color:var(--toggle-handle-color);border-radius:var(--radius-100);height:var(--toggle-handle-size);transform:translateX(var(--toggle-handle-position)) scale(var(--toggle-handle-scale));transition:.2s;width:var(--toggle-handle-size)}.af-toggle input[type=checkbox]{height:1px;position:absolute;width:1px;clip:rect(0,0,0,0)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Toggle/ToggleCommon.scss%23sass","../../src/Toggle/ToggleCommon.scss"],"names":[],"mappings":"AACE,iBAQE,kBAAA,CACA,uCAAA,CAHA,iEAAA,CACA,yCAAA,CALA,YAAA,CAEA,2BAAA,CACA,6BAAA,CAJA,iBAAA,CAEA,yBCMJ,CDGE,
|
|
1
|
+
{"version":3,"sources":["../../src/Toggle/ToggleCommon.scss%23sass","../../src/Toggle/ToggleCommon.scss"],"names":[],"mappings":"AACE,iBAQE,kBAAA,CACA,uCAAA,CAHA,iEAAA,CACA,yCAAA,CALA,YAAA,CAEA,2BAAA,CACA,6BAAA,CAJA,iBAAA,CAEA,yBCMJ,CDGE,gDACE,mDAAA,CACA,kBCDJ,CDIE,+BACE,cCFJ,CDKE,mBAIE,2CAAA,CADA,+BAAA,CADA,gCAAA,CAGA,qFAAA,CAEA,cAAA,CANA,+BCEJ,CDOE,gCAGE,UAAA,CAFA,iBAAA,CACA,SAAA,CAEA,kBCLJ","file":"ToggleCommon.css","sourcesContent":[".af-toggle {\n &__root {\n position: relative;\n display: flex;\n width: var(--toggle-width);\n height: var(--toggle-height);\n padding: var(--toggle-padding);\n border: var(--toggle-border-size) solid var(--toggle-border-color);\n border-radius: var(--toggle-border-radius);\n align-items: center;\n background-color: var(--toggle-bg-color);\n }\n\n &:has(:focus-visible) &__root {\n outline: 2px solid var(--toggle-focus-outline-color);\n outline-offset: 2px;\n }\n\n &:has(:hover, :active) {\n cursor: pointer;\n }\n\n &__handle {\n width: var(--toggle-handle-size);\n height: var(--toggle-handle-size);\n border-radius: var(--radius-100);\n background-color: var(--toggle-handle-color);\n transform: translateX(var(--toggle-handle-position))\n scale(var(--toggle-handle-scale));\n transition: 200ms;\n }\n\n input[type=\"checkbox\"] {\n position: absolute;\n width: 1px;\n height: 1px;\n clip: rect(0, 0, 0, 0);\n }\n}\n",".af-toggle {\n &__root {\n position: relative;\n display: flex;\n width: var(--toggle-width);\n height: var(--toggle-height);\n padding: var(--toggle-padding);\n border: var(--toggle-border-size) solid var(--toggle-border-color);\n border-radius: var(--toggle-border-radius);\n align-items: center;\n background-color: var(--toggle-bg-color);\n }\n\n &:has(:focus-visible) &__root {\n outline: 2px solid var(--toggle-focus-outline-color);\n outline-offset: 2px;\n }\n\n &:has(:hover, :active) {\n cursor: pointer;\n }\n\n &__handle {\n width: var(--toggle-handle-size);\n height: var(--toggle-handle-size);\n border-radius: var(--radius-100);\n background-color: var(--toggle-handle-color);\n transform: translateX(var(--toggle-handle-position))\n scale(var(--toggle-handle-scale));\n transition: 200ms;\n }\n\n input[type=\"checkbox\"] {\n position: absolute;\n width: 1px;\n height: 1px;\n clip: rect(0, 0, 0, 0);\n }\n}\n"]}
|
package/dist/Toggle/ToggleLF.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-toggle__root{align-items:center;background-color:var(--toggle-bg-color);border:var(--toggle-border-size) solid var(--toggle-border-color);border-radius:var(--toggle-border-radius);display:flex;height:var(--toggle-height);padding:var(--toggle-padding);position:relative;width:var(--toggle-width)}.af-toggle:has(:focus-
|
|
1
|
+
.af-toggle__root{align-items:center;background-color:var(--toggle-bg-color);border:var(--toggle-border-size) solid var(--toggle-border-color);border-radius:var(--toggle-border-radius);display:flex;height:var(--toggle-height);padding:var(--toggle-padding);position:relative;width:var(--toggle-width)}.af-toggle:has(:focus-visible) .af-toggle__root{outline:2px solid var(--toggle-focus-outline-color);outline-offset:2px}.af-toggle:has(:hover,:active){cursor:pointer}.af-toggle__handle{background-color:var(--toggle-handle-color);border-radius:var(--radius-100);height:var(--toggle-handle-size);transform:translateX(var(--toggle-handle-position)) scale(var(--toggle-handle-scale));transition:.2s;width:var(--toggle-handle-size)}.af-toggle input[type=checkbox]{height:1px;position:absolute;width:1px;clip:rect(0,0,0,0)}.af-toggle{--toggle-bg-color:var(--color-blue-200);--toggle-border-color:var(--color-gray-700);--toggle-focus-outline-color:var(--color-blue-800);--toggle-border-radius:var(--radius-32);--toggle-border-size:2px;--toggle-padding:4px;--toggle-width:52px;--toggle-height:32px;--toggle-handle-color:var(--color-gray-700);--toggle-handle-size:16px;--toggle-handle-position:calc(var(--toggle-border-size)*2);--toggle-handle-scale:1}.af-toggle:has(:checked){--toggle-bg-color:var(--color-blue-800);--toggle-border-color:var(--togglecolor-blue-800)}.af-toggle:has(:checked) .af-toggle__handle{--toggle-handle-scale:1.5;--toggle-handle-color:var(--color-white);--toggle-handle-position:calc(var(--toggle-width) - var(--toggle-padding)*2 - var(--toggle-handle-size)*var(--toggle-handle-scale) + var(--toggle-border-size)*2)}.af-toggle:has(:disabled){--toggle-bg-color:var(--color-white);--toggle-border-color:var(--color-gray-400);--toggle-handle-color:var(--color-gray-400)}.af-toggle:has(:disabled:checked){--toggle-bg-color:var(--color-gray-400);--toggle-border-color:var(--color-gray-400)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Toggle/ToggleCommon.scss","../../src/Toggle/ToggleLF.scss","../../src/Toggle/ToggleLF.scss%23sass"],"names":[],"mappings":"AACE,iBAQE,kBAAA,CACA,uCAAA,CAHA,iEAAA,CACA,yCAAA,CCNJ,YAAA,CDGI,2BAAA,CACA,6BAAA,CAJA,iBAAA,CAEA,yBCMJ,CDGE,
|
|
1
|
+
{"version":3,"sources":["../../src/Toggle/ToggleCommon.scss","../../src/Toggle/ToggleLF.scss","../../src/Toggle/ToggleLF.scss%23sass"],"names":[],"mappings":"AACE,iBAQE,kBAAA,CACA,uCAAA,CAHA,iEAAA,CACA,yCAAA,CCNJ,YAAA,CDGI,2BAAA,CACA,6BAAA,CAJA,iBAAA,CAEA,yBCMJ,CDGE,gDACE,mDAAA,CACA,kBCDJ,CDIE,+BACE,cCFJ,CDKE,mBAIE,2CAAA,CADA,+BAAA,CADA,gCAAA,CAGA,qFAAA,CAEA,cAAA,CANA,+BCEJ,CDOE,gCAGE,UAAA,CAFA,iBAAA,CACA,SAAA,CAEA,kBCLJ,CC7BA,WACE,uCAAA,CACA,2CAAA,CACA,kDAAA,CACA,uCAAA,CACA,wBAAA,CACA,oBAAA,CACA,mBAAA,CDgCF,oBAAA,CC9BE,2CAAA,CACA,yBAAA,CACA,0DAAA,CACA,uBDgCF,CC9BE,yBACE,uCAAA,CACA,iDDgCJ,CC9BI,4CACE,yBAAA,CACA,wCAAA,CACA,iKDoCN,CC5BE,0BACE,oCAAA,CACA,2CAAA,CACA,2CD8BJ,CC3BE,kCACE,uCAAA,CACA,2CD6BJ","file":"ToggleLF.css","sourcesContent":[".af-toggle {\n &__root {\n position: relative;\n display: flex;\n width: var(--toggle-width);\n height: var(--toggle-height);\n padding: var(--toggle-padding);\n border: var(--toggle-border-size) solid var(--toggle-border-color);\n border-radius: var(--toggle-border-radius);\n align-items: center;\n background-color: var(--toggle-bg-color);\n }\n\n &:has(:focus-visible) &__root {\n outline: 2px solid var(--toggle-focus-outline-color);\n outline-offset: 2px;\n }\n\n &:has(:hover, :active) {\n cursor: pointer;\n }\n\n &__handle {\n width: var(--toggle-handle-size);\n height: var(--toggle-handle-size);\n border-radius: var(--radius-100);\n background-color: var(--toggle-handle-color);\n transform: translateX(var(--toggle-handle-position))\n scale(var(--toggle-handle-scale));\n transition: 200ms;\n }\n\n input[type=\"checkbox\"] {\n position: absolute;\n width: 1px;\n height: 1px;\n clip: rect(0, 0, 0, 0);\n }\n}\n","@use \"./ToggleCommon\";\n\n.af-toggle {\n --toggle-bg-color: var(--color-blue-200);\n --toggle-border-color: var(--color-gray-700);\n --toggle-focus-outline-color: var(--color-blue-800);\n --toggle-border-radius: var(--radius-32);\n --toggle-border-size: 2px;\n --toggle-padding: 4px;\n --toggle-width: 52px;\n --toggle-height: 32px;\n --toggle-handle-color: var(--color-gray-700);\n --toggle-handle-size: 16px;\n --toggle-handle-position: calc(var(--toggle-border-size) * 2);\n --toggle-handle-scale: 1;\n\n &:has(:checked) {\n --toggle-bg-color: var(--color-blue-800);\n --toggle-border-color: var(--togglecolor-blue-800);\n\n .af-toggle__handle {\n --toggle-handle-scale: 1.5;\n --toggle-handle-color: var(--color-white);\n --toggle-handle-position: calc(\n var(--toggle-width) - (var(--toggle-padding) * 2) -\n (var(--toggle-handle-size) * var(--toggle-handle-scale)) +\n var(--toggle-border-size) * 2\n );\n }\n }\n\n &:has(:disabled) {\n --toggle-bg-color: var(--color-white);\n --toggle-border-color: var(--color-gray-400);\n --toggle-handle-color: var(--color-gray-400);\n }\n\n &:has(:disabled:checked) {\n --toggle-bg-color: var(--color-gray-400);\n --toggle-border-color: var(--color-gray-400);\n }\n}\n","@use \"./ToggleCommon\";\n\n.af-toggle {\n --toggle-bg-color: var(--color-blue-200);\n --toggle-border-color: var(--color-gray-700);\n --toggle-focus-outline-color: var(--color-blue-800);\n --toggle-border-radius: var(--radius-32);\n --toggle-border-size: 2px;\n --toggle-padding: 4px;\n --toggle-width: 52px;\n --toggle-height: 32px;\n --toggle-handle-color: var(--color-gray-700);\n --toggle-handle-size: 16px;\n --toggle-handle-position: calc(var(--toggle-border-size) * 2);\n --toggle-handle-scale: 1;\n\n &:has(:checked) {\n --toggle-bg-color: var(--color-blue-800);\n --toggle-border-color: var(--togglecolor-blue-800);\n\n .af-toggle__handle {\n --toggle-handle-scale: 1.5;\n --toggle-handle-color: var(--color-white);\n --toggle-handle-position: calc(\n var(--toggle-width) - (var(--toggle-padding) * 2) -\n (var(--toggle-handle-size) * var(--toggle-handle-scale)) +\n var(--toggle-border-size) * 2\n );\n }\n }\n\n &:has(:disabled) {\n --toggle-bg-color: var(--color-white);\n --toggle-border-color: var(--color-gray-400);\n --toggle-handle-color: var(--color-gray-400);\n }\n\n &:has(:disabled:checked) {\n --toggle-bg-color: var(--color-gray-400);\n --toggle-border-color: var(--color-gray-400);\n }\n}\n"]}
|