@axa-fr/design-system-apollo-css 1.0.5-alpha.263 → 1.0.5-alpha.265
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Form/Checkbox/CheckboxCard/CheckboxCardApollo.css +1 -1
- package/dist/Form/Checkbox/CheckboxCard/CheckboxCardApollo.css.map +1 -1
- package/dist/Form/Checkbox/CheckboxCard/CheckboxCardApollo.scss +2 -2
- package/dist/Form/Checkbox/CheckboxCard/CheckboxCardCommon.css +1 -1
- package/dist/Form/Checkbox/CheckboxCard/CheckboxCardCommon.css.map +1 -1
- package/dist/Form/Checkbox/CheckboxCard/CheckboxCardCommon.scss +2 -2
- package/dist/Form/Checkbox/CheckboxCard/CheckboxCardLF.css +1 -1
- package/dist/Form/Checkbox/CheckboxCard/CheckboxCardLF.css.map +1 -1
- package/dist/Form/Checkbox/CheckboxCard/CheckboxCardLF.scss +6 -2
- package/dist/TimelineVertical/TimelineVerticalApollo.css +1 -1
- package/dist/TimelineVertical/TimelineVerticalApollo.css.map +1 -1
- package/dist/TimelineVertical/TimelineVerticalApollo.scss +1 -0
- package/dist/TimelineVertical/TimelineVerticalCommon.css +1 -1
- package/dist/TimelineVertical/TimelineVerticalCommon.css.map +1 -1
- package/dist/TimelineVertical/TimelineVerticalCommon.scss +1 -1
- package/dist/TimelineVertical/TimelineVerticalLF.css +1 -1
- package/dist/TimelineVertical/TimelineVerticalLF.css.map +1 -1
- package/dist/TimelineVertical/TimelineVerticalLF.scss +2 -0
- package/dist/apollo.css +1 -1
- package/dist/apollo.css.map +1 -1
- package/dist/look-and-feel.css +1 -1
- package/dist/look-and-feel.css.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-checkbox-card__container{display:flex;flex-direction:column;gap:1rem}.af-checkbox-card__label-container{display:flex;flex-direction:column;row-gap:calc(4/var(--font-size-base)*1rem)}.af-checkbox-card__label{color:var(--checkbox-card-color);font-size:calc(18/var(--font-size-base)*1rem);font-weight:600}.af-checkbox-card__description{color:var(--checkbox-card-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400;line-height:calc(16/var(--font-size-base)*1rem)}@media (width > 667px){.af-checkbox-card__description{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(18/var(--font-size-base)*1rem)}}.af-checkbox-card__content{align-items:center;display:flex;gap:1rem;justify-content:center;width:100%}.af-checkbox-card__content>svg{color:var(--checkbox-card-color);height:calc(28/var(--font-size-base)*1rem);width:calc(28/var(--font-size-base)*1rem);fill:var(--checkbox-card-fill)}.af-checkbox-card__content-description{display:flex;flex-direction:column;gap:calc(4/var(--font-size-base)*1rem);line-height:calc(20/var(--font-size-base)*1rem)}.af-checkbox-card__content-description>span:first-child{color:var(--checkbox-card-color);line-height:calc(24/var(--font-size-base)*1rem)}.af-checkbox-card__content-description>span:not(:first-child){color:var(--checkbox-card-color)}.af-checkbox-card~.af-checkbox-card__error,.af-checkbox-card~.af-checkbox-card__error>svg{border:solid var(--color-red-700)}.af-checkbox-card-group--
|
|
1
|
+
.af-checkbox-card__container{display:flex;flex-direction:column;gap:1rem}.af-checkbox-card__label-container{display:flex;flex-direction:column;row-gap:calc(4/var(--font-size-base)*1rem)}.af-checkbox-card__label{color:var(--checkbox-card-color);font-size:calc(18/var(--font-size-base)*1rem);font-weight:600}.af-checkbox-card__description{color:var(--checkbox-card-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400;line-height:calc(16/var(--font-size-base)*1rem)}@media (width > 667px){.af-checkbox-card__description{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(18/var(--font-size-base)*1rem)}}.af-checkbox-card__content{align-items:center;display:flex;gap:1rem;justify-content:center;width:100%}.af-checkbox-card__content>svg{color:var(--checkbox-card-color);height:calc(28/var(--font-size-base)*1rem);width:calc(28/var(--font-size-base)*1rem);fill:var(--checkbox-card-fill)}.af-checkbox-card__content-description{display:flex;flex-direction:column;gap:calc(4/var(--font-size-base)*1rem);line-height:calc(20/var(--font-size-base)*1rem)}.af-checkbox-card__content-description>span:first-child{color:var(--checkbox-card-color);line-height:calc(24/var(--font-size-base)*1rem)}.af-checkbox-card__content-description>span:not(:first-child){color:var(--checkbox-card-color)}.af-checkbox-card~.af-checkbox-card__error,.af-checkbox-card~.af-checkbox-card__error>svg{border:solid var(--color-red-700)}.af-checkbox-card-group--horizontal{flex-direction:var(--checkbox-card-flex-direction)}.af-checkbox-card-group--horizontal .af-checkbox-card-label{align-items:var(--checkbox-card-align-items);flex-direction:var(--checkbox-card-flex-direction)}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content{flex-direction:var(--checkbox-card-flex-direction)}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description{align-items:var(--checkbox-card-align-item);flex-direction:var(--checkbox-card-flex-direction);text-align:left}.af-checkbox-card-group--vertical{flex-direction:var(--checkbox-card-flex-direction)}.af-checkbox-card-group--vertical .af-checkbox-card-label{align-items:var(--checkbox-card-align-items);flex-direction:var(--checkbox-card-flex-direction);justify-content:var(--checkbox-card-justify-content)}.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content{flex:1 1;flex-direction:var(--checkbox-card-flex-direction);width:100%}.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description{align-items:var(--checkbox-card-align-item);flex-direction:var(--checkbox-card-flex-direction);text-align:center}.af-checkbox-card-group--horizontal,.af-checkbox-card-group--vertical{align-items:stretch;display:flex;font-family:var(--checkbox-card-font-family);font-style:normal;font-weight:400;gap:1rem;line-height:calc(20/var(--font-size-base)*1rem)}.af-checkbox-card-group--horizontal .af-checkbox-card-label[aria-invalid=true],.af-checkbox-card-group--vertical .af-checkbox-card-label[aria-invalid=true]{background-color:var(--checkbox-card-background-color);border:solid var(--checkbox-card-border);box-shadow:0 0 0 1px var(--checkbox-card-shadow-color) inset}.af-checkbox-card-group--horizontal .af-checkbox-card-label,.af-checkbox-card-group--vertical .af-checkbox-card-label{align-self:stretch;border:solid var(--checkbox-card-border);border-radius:var(--checkbox-card-border-radius);cursor:pointer;display:flex;flex:1 1;gap:calc(12/var(--font-size-base)*1rem);padding:1rem}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content,.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content{align-items:center;display:flex;gap:calc(4/var(--font-size-base)*1rem)}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description,.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description{display:flex;font-size:1rem;justify-content:center;line-height:calc(20/var(--font-size-base)*1rem)}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:first-child,.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:first-child{color:var(--checkbox-card-label-text-color);font-size:calc(18/var(--font-size-base)*1rem);font-weight:400}@media (width < 667px){.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:first-child,.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:first-child{font-size:calc(16/var(--font-size-base)*1rem);font-weight:400}}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:not(:first-child),.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:not(:first-child){color:var(--checkbox-card-label-text-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400}@media (width < 667px){.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:not(:first-child),.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:not(:first-child){font-size:calc(14/var(--font-size-base)*1rem);font-weight:400}}.af-checkbox-card-group--horizontal .af-checkbox-card-label:hover,.af-checkbox-card-group--vertical .af-checkbox-card-label:hover{background-color:var(--checkbox-card-background-color);border:solid var(--checkbox-card-border);box-shadow:0 0 0 1px var(--checkbox-card-shadow-color) inset}.af-checkbox-card-group--horizontal .af-checkbox-card-label:has(input:checked),.af-checkbox-card-group--vertical .af-checkbox-card-label:has(input:checked){background-color:var(--checkbox-card-background-color);border:solid var(--checkbox-card-border);box-shadow:0 0 0 1px var(--checkbox-card-shadow-color) inset}.af-checkbox-card__label-container{--font-size-base:calc(16/var(--font-size-base)*1rem)}.af-checkbox-card__label{--checkbox-card-color:var(--color-gray-900)}.af-checkbox-card__description{--checkbox-card-color:var(--color-gray-700)}.af-checkbox-card__content>svg{--checkbox-card-color:var(--color-axa);--checkbox-card-fill:var(--color-axa)}.af-checkbox-card__content-description>span:first-child{--checkbox-card-color:var(--color-gray-900)}.af-checkbox-card__content-description>span:not(:first-child){--checkbox-card-color:var(--color-gray-700)}.af-checkbox-card~.af-checkbox-card__error,.af-checkbox-card~.af-checkbox-card__error>svg{--error-box-color:var(--color-red-700)}.af-checkbox-card-group--horizontal{--checkbox-card-flex-direction:column}.af-checkbox-card-group--horizontal .af-checkbox-card-label{--checkbox-card-flex-direction:row}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content{--checkbox-card-flex-direction:row;--checkbox-card-margin-left:calc(12/var(--font-size-base)*1rem)}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description{--checkbox-card-flex-direction:column;--checkbox-card-align-item:flex-start}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:first-child{--checkbox-card-label-text-color:var(--axa-blue-100)}.af-checkbox-card-group--vertical{--checkbox-card-flex-direction:row}.af-checkbox-card-group--vertical .af-checkbox-card-label{--checkbox-card-flex-direction:column-reverse}.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content{--checkbox-card-flex-direction:column;--checkbox-card-margin-left:calc(2/var(--font-size-base)*1rem)}.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description{--checkbox-card-flex-direction:column;--checkbox-card-align-item:center}.af-checkbox-card-group--horizontal .af-checkbox-card-label[aria-invalid=true],.af-checkbox-card-group--vertical .af-checkbox-card-label[aria-invalid=true]{--checkbox-card-background-color:var(--axa-red-4);--checkbox-card-border:1px var(--red-alert-100);--checkbox-card-shadow-color:var(--red-alert-100)}.af-checkbox-card-group--horizontal .af-checkbox-card-label,.af-checkbox-card-group--vertical .af-checkbox-card-label{--checkbox-card-border:1px var(--axa-blue-65);--checkbox-card-border-radius:calc(8/var(--font-size-base)*1rem);--checkbox-card-align-items:center}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:first-child,.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:first-child{--checkbox-card-label-text-color:var(--axa-blue-100)}.af-checkbox-card-group--horizontal .af-checkbox-card-label:hover,.af-checkbox-card-group--vertical .af-checkbox-card-label:hover{--checkbox-card-border:1px var(--axa-blue-100);--checkbox-card-shadow-color:var(--axa-blue-100);--checkbox-card-background-color:var(--white)}.af-checkbox-card-group--horizontal .af-checkbox-card-label:has(input:checked),.af-checkbox-card-group--vertical .af-checkbox-card-label:has(input:checked){--checkbox-card-border:1px var(--axa-blue-100);--checkbox-card-shadow-color:var(--axa-blue-100);--checkbox-card-background-color:var(--axa-blue-4)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/Form/Checkbox/CheckboxCard/CheckboxCardCommon.scss","../../../../src/Form/Checkbox/CheckboxCard/CheckboxCardApollo.scss","../../../../src/Form/Checkbox/CheckboxCard/CheckboxCardApollo.scss%23sass"],"names":[],"mappings":"AAGE,6BCFF,YAAA,CDII,qBAAA,CCFJ,QACA,CDKE,mCACE,YAAA,CACA,qBAAA,CACA,0CCHJ,CDME,yBAGE,gCAAA,CAFA,6CAAA,CACA,eCHJ,CDOE,+BAIE,gCAAA,CAHA,6CAAA,CACA,eAAA,CACA,+CCJJ,CDOI,uBANF,+BAOI,6CAAA,CACA,+CCJJ,CACF,CDOE,2BAGE,kBAAA,CAFA,YAAA,CAIA,QAAA,CADA,sBAAA,CAFA,UCFJ,CDOI,+BAGE,gCAAA,CADA,0CAAA,CADA,yCAAA,CAGA,8BCLN,CDQI,uCACE,YAAA,CACA,qBAAA,CACA,sCAAA,CACA,+CCNN,CDQM,wDAEE,gCAAA,CADA,+CCLR,CDSM,8DACE,gCCPR,CDeI,0FACE,iCCVN,CDcE,kCACE,kDCZJ,CDcI,0DAEE,4CAAA,CADA,kDCXN,CDcM,oFACE,kDCZR,CDcQ,0HAEE,2CAAA,CADA,kDAAA,CAEA,eCZV,CDkBE,oCACE,kDChBJ,CDkBI,4DAEE,4CAAA,CADA,kDAAA,CAEA,oDChBN,CDkBM,sFAEE,QAAA,CACA,kDAAA,CAFA,UCdR,CDkBQ,4HAEE,2CAAA,CADA,kDAAA,CAEA,iBChBV,CDsBE,sEAGE,mBAAA,CADA,YAAA,CAGA,4CAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,+CCrBJ,CDuBI,4JAEE,sDAAA,CADA,wCAAA,CAEA,4DCrBN,CDwBI,sHAME,kBAAA,CAHA,wCAAA,CACA,gDAAA,CAIA,cAAA,CAPA,YAAA,CAIA,QAAA,CAEA,uCAAA,CALA,YChBN,CDwBM,0KAEE,kBAAA,CADA,YAAA,CAEA,sCCtBR,CDwBQ,sPACE,YAAA,CAEA,cAAA,CADA,sBAAA,CAEA,+CCtBV,CDwBU,wRAGE,2CAAA,CAFA,6CAAA,CACA,eCrBZ,CDwBY,uBALF,wRAMI,6CAAA,CACA,eCrBZ,CACF,CDwBU,oSAGE,2CAAA,CAFA,6CAAA,CACA,eCrBZ,CDwBY,uBALF,oSAMI,6CAAA,CACA,eCrBZ,CACF,CD0BM,kIAEE,sDAAA,CADA,wCAAA,CAEA,4DCxBR,CD4BI,4JAEE,sDAAA,CADA,wCAAA,CAEA,4DC1BN,CC1JE,mCACE,oDD6JJ,CC1JE,yBACE,2CD4JJ,CCzJE,+BACE,2CD2JJ,CCvJI,+BACE,sCAAA,CACA,qCDyJN,CCrJM,wDACE,2CDuJR,CCpJM,8DACE,2CDsJR,CC9II,0FACE,sCDmJN,CC/IE,kCACE,qCDiJJ,CC/II,0DACE,kCDiJN,CC/IM,oFACE,kCAAA,CACA,+DDiJR,CC/IQ,0HACE,qCAAA,CACA,qCDiJV,CC/IU,2IACE,oDDiJZ,CC1IE,oCACE,kCD4IJ,CC1II,4DACE,6CD4IN,CC1IM,sFACE,qCAAA,CACA,8DD4IR,CC1IQ,4HACE,qCAAA,CACA,iCD4IV,CCpII,4JACE,iDAAA,CACA,+CAAA,CACA,iDDsIN,CCnII,sHACE,6CAAA,CACA,gEAAA,CACA,kCDqIN,CCjIU,wRACE,oDDmIZ,CC9HM,kIACE,8CAAA,CACA,gDAAA,CACA,6CDgIR,CC5HI,4JACE,8CAAA,CACA,gDAAA,CACA,kDD8HN","file":"CheckboxCardApollo.css","sourcesContent":["@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-checkbox-card {\n &__container {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n }\n\n &__label-container {\n display: flex;\n flex-direction: column;\n row-gap: calc(4 / var(--font-size-base) * 1rem);\n }\n\n &__label {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 600;\n color: var(--checkbox-card-color);\n }\n\n &__description {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n line-height: calc(16 / var(--font-size-base) * 1rem);\n color: var(--checkbox-card-color);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n line-height: calc(18 / var(--font-size-base) * 1rem);\n }\n }\n\n &__content {\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n\n & > svg {\n width: calc(28 / var(--font-size-base) * 1rem);\n height: calc(28 / var(--font-size-base) * 1rem);\n color: var(--checkbox-card-color);\n fill: var(--checkbox-card-fill);\n }\n\n &-description {\n display: flex;\n flex-direction: column;\n gap: calc(4 / var(--font-size-base) * 1rem);\n line-height: calc(20 / var(--font-size-base) * 1rem);\n\n & > span:first-child {\n line-height: calc(24 / var(--font-size-base) * 1rem);\n color: var(--checkbox-card-color);\n }\n\n & > span:not(:first-child) {\n color: var(--checkbox-card-color);\n }\n }\n }\n\n & ~ &__error {\n border: solid var(--color-red-700);\n\n & > svg {\n border: solid var(--color-red-700);\n }\n }\n\n &-group--vertical {\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-label {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-items);\n\n .af-checkbox-card-content {\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-content-description {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-item);\n text-align: left;\n }\n }\n }\n }\n\n &-group--horizontal {\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-label {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-items);\n justify-content: var(--checkbox-card-justify-content);\n\n .af-checkbox-card-content {\n width: 100%;\n flex: 1;\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-content-description {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-item);\n text-align: center;\n }\n }\n }\n }\n\n &-group--vertical,\n &-group--horizontal {\n display: flex;\n align-items: stretch;\n gap: 1rem;\n font-family: var(--checkbox-card-font-family);\n font-style: normal;\n font-weight: 400;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-label[aria-invalid=\"true\"] {\n border: solid var(--checkbox-card-border);\n background-color: var(--checkbox-card-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;\n }\n\n .af-checkbox-card-label {\n display: flex;\n padding: 1rem;\n border: solid var(--checkbox-card-border);\n border-radius: var(--checkbox-card-border-radius);\n flex: 1;\n align-self: stretch;\n gap: calc(12 / var(--font-size-base) * 1rem);\n cursor: pointer;\n\n .af-checkbox-card-content {\n display: flex;\n align-items: center;\n gap: calc(4 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content-description {\n display: flex;\n justify-content: center;\n font-size: 1rem;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n\n & > span:first-child {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--checkbox-card-label-text-color);\n\n @media (width < #{breakpoints.$breakpoint-sm}) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n }\n }\n\n & > span:not(:first-child) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--checkbox-card-label-text-color);\n\n @media (width < #{breakpoints.$breakpoint-sm}) {\n font-size: calc(14 / var(--font-size-base) * 1rem);\n font-weight: 400;\n }\n }\n }\n }\n\n &:hover {\n border: solid var(--checkbox-card-border);\n background-color: var(--checkbox-card-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;\n }\n }\n\n .af-checkbox-card-label:has(input:checked) {\n border: solid var(--checkbox-card-border);\n background-color: var(--checkbox-card-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;\n }\n }\n}\n","@use \"CheckboxCardCommon\";\n@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-checkbox-card {\n &__label-container {\n --font-size-base: calc(16 / var(--font-size-base) * 1rem);\n }\n\n &__label {\n --checkbox-card-color: var(--color-gray-900);\n }\n\n &__description {\n --checkbox-card-color: var(--color-gray-700);\n }\n\n &__content {\n & > svg {\n --checkbox-card-color: var(--color-axa);\n --checkbox-card-fill: var(--color-axa);\n }\n\n &-description {\n & > span:first-child {\n --checkbox-card-color: var(--color-gray-900);\n }\n\n & > span:not(:first-child) {\n --checkbox-card-color: var(--color-gray-700);\n }\n }\n }\n\n & ~ &__error {\n --error-box-color: var(--color-red-700);\n\n & > svg {\n --error-box-color: var(--color-red-700);\n }\n }\n\n &-group--vertical {\n --checkbox-card-flex-direction: column;\n\n .af-checkbox-card-label {\n --checkbox-card-flex-direction: row;\n\n .af-checkbox-card-content {\n --checkbox-card-flex-direction: row;\n --checkbox-card-margin-left: calc(12 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content-description {\n --checkbox-card-flex-direction: column;\n --checkbox-card-align-item: flex-start;\n\n & > span:first-child {\n --checkbox-card-label-text-color: var(--axa-blue-100);\n }\n }\n }\n }\n }\n\n &-group--horizontal {\n --checkbox-card-flex-direction: row;\n\n .af-checkbox-card-label {\n --checkbox-card-flex-direction: column-reverse;\n\n .af-checkbox-card-content {\n --checkbox-card-flex-direction: column;\n --checkbox-card-margin-left: calc(2 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content-description {\n --checkbox-card-flex-direction: column;\n --checkbox-card-align-item: center;\n }\n }\n }\n }\n\n &-group--vertical,\n &-group--horizontal {\n .af-checkbox-card-label[aria-invalid=\"true\"] {\n --checkbox-card-background-color: var(--axa-red-4);\n --checkbox-card-border: 1px var(--red-alert-100);\n --checkbox-card-shadow-color: var(--red-alert-100);\n }\n\n .af-checkbox-card-label {\n --checkbox-card-border: 1px var(--axa-blue-65);\n --checkbox-card-border-radius: calc(8 / var(--font-size-base) * 1rem);\n --checkbox-card-align-items: center;\n\n .af-checkbox-card-content {\n .af-checkbox-card-content-description {\n & > span:first-child {\n --checkbox-card-label-text-color: var(--axa-blue-100);\n }\n }\n }\n\n &:hover {\n --checkbox-card-border: 1px var(--axa-blue-100);\n --checkbox-card-shadow-color: var(--axa-blue-100);\n --checkbox-card-background-color: var(--white);\n }\n }\n\n .af-checkbox-card-label:has(input:checked) {\n --checkbox-card-border: 1px var(--axa-blue-100);\n --checkbox-card-shadow-color: var(--axa-blue-100);\n --checkbox-card-background-color: var(--axa-blue-4);\n }\n }\n}\n","@use \"CheckboxCardCommon\";\n@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-checkbox-card {\n &__label-container {\n --font-size-base: calc(16 / var(--font-size-base) * 1rem);\n }\n\n &__label {\n --checkbox-card-color: var(--color-gray-900);\n }\n\n &__description {\n --checkbox-card-color: var(--color-gray-700);\n }\n\n &__content {\n & > svg {\n --checkbox-card-color: var(--color-axa);\n --checkbox-card-fill: var(--color-axa);\n }\n\n &-description {\n & > span:first-child {\n --checkbox-card-color: var(--color-gray-900);\n }\n\n & > span:not(:first-child) {\n --checkbox-card-color: var(--color-gray-700);\n }\n }\n }\n\n & ~ &__error {\n --error-box-color: var(--color-red-700);\n\n & > svg {\n --error-box-color: var(--color-red-700);\n }\n }\n\n &-group--vertical {\n --checkbox-card-flex-direction: column;\n\n .af-checkbox-card-label {\n --checkbox-card-flex-direction: row;\n\n .af-checkbox-card-content {\n --checkbox-card-flex-direction: row;\n --checkbox-card-margin-left: calc(12 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content-description {\n --checkbox-card-flex-direction: column;\n --checkbox-card-align-item: flex-start;\n\n & > span:first-child {\n --checkbox-card-label-text-color: var(--axa-blue-100);\n }\n }\n }\n }\n }\n\n &-group--horizontal {\n --checkbox-card-flex-direction: row;\n\n .af-checkbox-card-label {\n --checkbox-card-flex-direction: column-reverse;\n\n .af-checkbox-card-content {\n --checkbox-card-flex-direction: column;\n --checkbox-card-margin-left: calc(2 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content-description {\n --checkbox-card-flex-direction: column;\n --checkbox-card-align-item: center;\n }\n }\n }\n }\n\n &-group--vertical,\n &-group--horizontal {\n .af-checkbox-card-label[aria-invalid=\"true\"] {\n --checkbox-card-background-color: var(--axa-red-4);\n --checkbox-card-border: 1px var(--red-alert-100);\n --checkbox-card-shadow-color: var(--red-alert-100);\n }\n\n .af-checkbox-card-label {\n --checkbox-card-border: 1px var(--axa-blue-65);\n --checkbox-card-border-radius: calc(8 / var(--font-size-base) * 1rem);\n --checkbox-card-align-items: center;\n\n .af-checkbox-card-content {\n .af-checkbox-card-content-description {\n & > span:first-child {\n --checkbox-card-label-text-color: var(--axa-blue-100);\n }\n }\n }\n\n &:hover {\n --checkbox-card-border: 1px var(--axa-blue-100);\n --checkbox-card-shadow-color: var(--axa-blue-100);\n --checkbox-card-background-color: var(--white);\n }\n }\n\n .af-checkbox-card-label:has(input:checked) {\n --checkbox-card-border: 1px var(--axa-blue-100);\n --checkbox-card-shadow-color: var(--axa-blue-100);\n --checkbox-card-background-color: var(--axa-blue-4);\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/Form/Checkbox/CheckboxCard/CheckboxCardCommon.scss","../../../../src/Form/Checkbox/CheckboxCard/CheckboxCardApollo.scss","../../../../src/Form/Checkbox/CheckboxCard/CheckboxCardApollo.scss%23sass"],"names":[],"mappings":"AAGE,6BCFF,YAAA,CDII,qBAAA,CCFJ,QACA,CDKE,mCACE,YAAA,CACA,qBAAA,CACA,0CCHJ,CDME,yBAGE,gCAAA,CAFA,6CAAA,CACA,eCHJ,CDOE,+BAIE,gCAAA,CAHA,6CAAA,CACA,eAAA,CACA,+CCJJ,CDOI,uBANF,+BAOI,6CAAA,CACA,+CCJJ,CACF,CDOE,2BAGE,kBAAA,CAFA,YAAA,CAIA,QAAA,CADA,sBAAA,CAFA,UCFJ,CDOI,+BAGE,gCAAA,CADA,0CAAA,CADA,yCAAA,CAGA,8BCLN,CDQI,uCACE,YAAA,CACA,qBAAA,CACA,sCAAA,CACA,+CCNN,CDQM,wDAEE,gCAAA,CADA,+CCLR,CDSM,8DACE,gCCPR,CDeI,0FACE,iCCVN,CDcE,oCACE,kDCZJ,CDcI,4DAEE,4CAAA,CADA,kDCXN,CDcM,sFACE,kDCZR,CDcQ,4HAEE,2CAAA,CADA,kDAAA,CAEA,eCZV,CDkBE,kCACE,kDChBJ,CDkBI,0DAEE,4CAAA,CADA,kDAAA,CAEA,oDChBN,CDkBM,oFAEE,QAAA,CACA,kDAAA,CAFA,UCdR,CDkBQ,0HAEE,2CAAA,CADA,kDAAA,CAEA,iBChBV,CDsBE,sEAGE,mBAAA,CADA,YAAA,CAGA,4CAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,+CCrBJ,CDuBI,4JAEE,sDAAA,CADA,wCAAA,CAEA,4DCrBN,CDwBI,sHAME,kBAAA,CAHA,wCAAA,CACA,gDAAA,CAIA,cAAA,CAPA,YAAA,CAIA,QAAA,CAEA,uCAAA,CALA,YChBN,CDwBM,0KAEE,kBAAA,CADA,YAAA,CAEA,sCCtBR,CDwBQ,sPACE,YAAA,CAEA,cAAA,CADA,sBAAA,CAEA,+CCtBV,CDwBU,wRAGE,2CAAA,CAFA,6CAAA,CACA,eCrBZ,CDwBY,uBALF,wRAMI,6CAAA,CACA,eCrBZ,CACF,CDwBU,oSAGE,2CAAA,CAFA,6CAAA,CACA,eCrBZ,CDwBY,uBALF,oSAMI,6CAAA,CACA,eCrBZ,CACF,CD0BM,kIAEE,sDAAA,CADA,wCAAA,CAEA,4DCxBR,CD4BI,4JAEE,sDAAA,CADA,wCAAA,CAEA,4DC1BN,CC1JE,mCACE,oDD6JJ,CC1JE,yBACE,2CD4JJ,CCzJE,+BACE,2CD2JJ,CCvJI,+BACE,sCAAA,CACA,qCDyJN,CCrJM,wDACE,2CDuJR,CCpJM,8DACE,2CDsJR,CC9II,0FACE,sCDmJN,CC/IE,oCACE,qCDiJJ,CC/II,4DACE,kCDiJN,CC/IM,sFACE,kCAAA,CACA,+DDiJR,CC/IQ,4HACE,qCAAA,CACA,qCDiJV,CC/IU,6IACE,oDDiJZ,CC1IE,kCACE,kCD4IJ,CC1II,0DACE,6CD4IN,CC1IM,oFACE,qCAAA,CACA,8DD4IR,CC1IQ,0HACE,qCAAA,CACA,iCD4IV,CCpII,4JACE,iDAAA,CACA,+CAAA,CACA,iDDsIN,CCnII,sHACE,6CAAA,CACA,gEAAA,CACA,kCDqIN,CCjIU,wRACE,oDDmIZ,CC9HM,kIACE,8CAAA,CACA,gDAAA,CACA,6CDgIR,CC5HI,4JACE,8CAAA,CACA,gDAAA,CACA,kDD8HN","file":"CheckboxCardApollo.css","sourcesContent":["@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-checkbox-card {\n &__container {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n }\n\n &__label-container {\n display: flex;\n flex-direction: column;\n row-gap: calc(4 / var(--font-size-base) * 1rem);\n }\n\n &__label {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 600;\n color: var(--checkbox-card-color);\n }\n\n &__description {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n line-height: calc(16 / var(--font-size-base) * 1rem);\n color: var(--checkbox-card-color);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n line-height: calc(18 / var(--font-size-base) * 1rem);\n }\n }\n\n &__content {\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n\n & > svg {\n width: calc(28 / var(--font-size-base) * 1rem);\n height: calc(28 / var(--font-size-base) * 1rem);\n color: var(--checkbox-card-color);\n fill: var(--checkbox-card-fill);\n }\n\n &-description {\n display: flex;\n flex-direction: column;\n gap: calc(4 / var(--font-size-base) * 1rem);\n line-height: calc(20 / var(--font-size-base) * 1rem);\n\n & > span:first-child {\n line-height: calc(24 / var(--font-size-base) * 1rem);\n color: var(--checkbox-card-color);\n }\n\n & > span:not(:first-child) {\n color: var(--checkbox-card-color);\n }\n }\n }\n\n & ~ &__error {\n border: solid var(--color-red-700);\n\n & > svg {\n border: solid var(--color-red-700);\n }\n }\n\n &-group--horizontal {\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-label {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-items);\n\n .af-checkbox-card-content {\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-content-description {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-item);\n text-align: left;\n }\n }\n }\n }\n\n &-group--vertical {\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-label {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-items);\n justify-content: var(--checkbox-card-justify-content);\n\n .af-checkbox-card-content {\n width: 100%;\n flex: 1;\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-content-description {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-item);\n text-align: center;\n }\n }\n }\n }\n\n &-group--vertical,\n &-group--horizontal {\n display: flex;\n align-items: stretch;\n gap: 1rem;\n font-family: var(--checkbox-card-font-family);\n font-style: normal;\n font-weight: 400;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-label[aria-invalid=\"true\"] {\n border: solid var(--checkbox-card-border);\n background-color: var(--checkbox-card-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;\n }\n\n .af-checkbox-card-label {\n display: flex;\n padding: 1rem;\n border: solid var(--checkbox-card-border);\n border-radius: var(--checkbox-card-border-radius);\n flex: 1;\n align-self: stretch;\n gap: calc(12 / var(--font-size-base) * 1rem);\n cursor: pointer;\n\n .af-checkbox-card-content {\n display: flex;\n align-items: center;\n gap: calc(4 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content-description {\n display: flex;\n justify-content: center;\n font-size: 1rem;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n\n & > span:first-child {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--checkbox-card-label-text-color);\n\n @media (width < #{breakpoints.$breakpoint-sm}) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n }\n }\n\n & > span:not(:first-child) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--checkbox-card-label-text-color);\n\n @media (width < #{breakpoints.$breakpoint-sm}) {\n font-size: calc(14 / var(--font-size-base) * 1rem);\n font-weight: 400;\n }\n }\n }\n }\n\n &:hover {\n border: solid var(--checkbox-card-border);\n background-color: var(--checkbox-card-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;\n }\n }\n\n .af-checkbox-card-label:has(input:checked) {\n border: solid var(--checkbox-card-border);\n background-color: var(--checkbox-card-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;\n }\n }\n}\n","@use \"CheckboxCardCommon\";\n@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-checkbox-card {\n &__label-container {\n --font-size-base: calc(16 / var(--font-size-base) * 1rem);\n }\n\n &__label {\n --checkbox-card-color: var(--color-gray-900);\n }\n\n &__description {\n --checkbox-card-color: var(--color-gray-700);\n }\n\n &__content {\n & > svg {\n --checkbox-card-color: var(--color-axa);\n --checkbox-card-fill: var(--color-axa);\n }\n\n &-description {\n & > span:first-child {\n --checkbox-card-color: var(--color-gray-900);\n }\n\n & > span:not(:first-child) {\n --checkbox-card-color: var(--color-gray-700);\n }\n }\n }\n\n & ~ &__error {\n --error-box-color: var(--color-red-700);\n\n & > svg {\n --error-box-color: var(--color-red-700);\n }\n }\n\n &-group--horizontal {\n --checkbox-card-flex-direction: column;\n\n .af-checkbox-card-label {\n --checkbox-card-flex-direction: row;\n\n .af-checkbox-card-content {\n --checkbox-card-flex-direction: row;\n --checkbox-card-margin-left: calc(12 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content-description {\n --checkbox-card-flex-direction: column;\n --checkbox-card-align-item: flex-start;\n\n & > span:first-child {\n --checkbox-card-label-text-color: var(--axa-blue-100);\n }\n }\n }\n }\n }\n\n &-group--vertical {\n --checkbox-card-flex-direction: row;\n\n .af-checkbox-card-label {\n --checkbox-card-flex-direction: column-reverse;\n\n .af-checkbox-card-content {\n --checkbox-card-flex-direction: column;\n --checkbox-card-margin-left: calc(2 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content-description {\n --checkbox-card-flex-direction: column;\n --checkbox-card-align-item: center;\n }\n }\n }\n }\n\n &-group--vertical,\n &-group--horizontal {\n .af-checkbox-card-label[aria-invalid=\"true\"] {\n --checkbox-card-background-color: var(--axa-red-4);\n --checkbox-card-border: 1px var(--red-alert-100);\n --checkbox-card-shadow-color: var(--red-alert-100);\n }\n\n .af-checkbox-card-label {\n --checkbox-card-border: 1px var(--axa-blue-65);\n --checkbox-card-border-radius: calc(8 / var(--font-size-base) * 1rem);\n --checkbox-card-align-items: center;\n\n .af-checkbox-card-content {\n .af-checkbox-card-content-description {\n & > span:first-child {\n --checkbox-card-label-text-color: var(--axa-blue-100);\n }\n }\n }\n\n &:hover {\n --checkbox-card-border: 1px var(--axa-blue-100);\n --checkbox-card-shadow-color: var(--axa-blue-100);\n --checkbox-card-background-color: var(--white);\n }\n }\n\n .af-checkbox-card-label:has(input:checked) {\n --checkbox-card-border: 1px var(--axa-blue-100);\n --checkbox-card-shadow-color: var(--axa-blue-100);\n --checkbox-card-background-color: var(--axa-blue-4);\n }\n }\n}\n","@use \"CheckboxCardCommon\";\n@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-checkbox-card {\n &__label-container {\n --font-size-base: calc(16 / var(--font-size-base) * 1rem);\n }\n\n &__label {\n --checkbox-card-color: var(--color-gray-900);\n }\n\n &__description {\n --checkbox-card-color: var(--color-gray-700);\n }\n\n &__content {\n & > svg {\n --checkbox-card-color: var(--color-axa);\n --checkbox-card-fill: var(--color-axa);\n }\n\n &-description {\n & > span:first-child {\n --checkbox-card-color: var(--color-gray-900);\n }\n\n & > span:not(:first-child) {\n --checkbox-card-color: var(--color-gray-700);\n }\n }\n }\n\n & ~ &__error {\n --error-box-color: var(--color-red-700);\n\n & > svg {\n --error-box-color: var(--color-red-700);\n }\n }\n\n &-group--horizontal {\n --checkbox-card-flex-direction: column;\n\n .af-checkbox-card-label {\n --checkbox-card-flex-direction: row;\n\n .af-checkbox-card-content {\n --checkbox-card-flex-direction: row;\n --checkbox-card-margin-left: calc(12 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content-description {\n --checkbox-card-flex-direction: column;\n --checkbox-card-align-item: flex-start;\n\n & > span:first-child {\n --checkbox-card-label-text-color: var(--axa-blue-100);\n }\n }\n }\n }\n }\n\n &-group--vertical {\n --checkbox-card-flex-direction: row;\n\n .af-checkbox-card-label {\n --checkbox-card-flex-direction: column-reverse;\n\n .af-checkbox-card-content {\n --checkbox-card-flex-direction: column;\n --checkbox-card-margin-left: calc(2 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content-description {\n --checkbox-card-flex-direction: column;\n --checkbox-card-align-item: center;\n }\n }\n }\n }\n\n &-group--vertical,\n &-group--horizontal {\n .af-checkbox-card-label[aria-invalid=\"true\"] {\n --checkbox-card-background-color: var(--axa-red-4);\n --checkbox-card-border: 1px var(--red-alert-100);\n --checkbox-card-shadow-color: var(--red-alert-100);\n }\n\n .af-checkbox-card-label {\n --checkbox-card-border: 1px var(--axa-blue-65);\n --checkbox-card-border-radius: calc(8 / var(--font-size-base) * 1rem);\n --checkbox-card-align-items: center;\n\n .af-checkbox-card-content {\n .af-checkbox-card-content-description {\n & > span:first-child {\n --checkbox-card-label-text-color: var(--axa-blue-100);\n }\n }\n }\n\n &:hover {\n --checkbox-card-border: 1px var(--axa-blue-100);\n --checkbox-card-shadow-color: var(--axa-blue-100);\n --checkbox-card-background-color: var(--white);\n }\n }\n\n .af-checkbox-card-label:has(input:checked) {\n --checkbox-card-border: 1px var(--axa-blue-100);\n --checkbox-card-shadow-color: var(--axa-blue-100);\n --checkbox-card-background-color: var(--axa-blue-4);\n }\n }\n}\n"]}
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
&-group--
|
|
42
|
+
&-group--horizontal {
|
|
43
43
|
--checkbox-card-flex-direction: column;
|
|
44
44
|
|
|
45
45
|
.af-checkbox-card-label {
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
}
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
-
&-group--
|
|
64
|
+
&-group--vertical {
|
|
65
65
|
--checkbox-card-flex-direction: row;
|
|
66
66
|
|
|
67
67
|
.af-checkbox-card-label {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-checkbox-card__container{display:flex;flex-direction:column;gap:1rem}.af-checkbox-card__label-container{display:flex;flex-direction:column;row-gap:calc(4/var(--font-size-base)*1rem)}.af-checkbox-card__label{color:var(--checkbox-card-color);font-size:calc(18/var(--font-size-base)*1rem);font-weight:600}.af-checkbox-card__description{color:var(--checkbox-card-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400;line-height:calc(16/var(--font-size-base)*1rem)}@media (width > 667px){.af-checkbox-card__description{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(18/var(--font-size-base)*1rem)}}.af-checkbox-card__content{align-items:center;display:flex;gap:1rem;justify-content:center;width:100%}.af-checkbox-card__content>svg{color:var(--checkbox-card-color);height:calc(28/var(--font-size-base)*1rem);width:calc(28/var(--font-size-base)*1rem);fill:var(--checkbox-card-fill)}.af-checkbox-card__content-description{display:flex;flex-direction:column;gap:calc(4/var(--font-size-base)*1rem);line-height:calc(20/var(--font-size-base)*1rem)}.af-checkbox-card__content-description>span:first-child{color:var(--checkbox-card-color);line-height:calc(24/var(--font-size-base)*1rem)}.af-checkbox-card__content-description>span:not(:first-child){color:var(--checkbox-card-color)}.af-checkbox-card~.af-checkbox-card__error,.af-checkbox-card~.af-checkbox-card__error>svg{border:solid var(--color-red-700)}.af-checkbox-card-group--
|
|
1
|
+
.af-checkbox-card__container{display:flex;flex-direction:column;gap:1rem}.af-checkbox-card__label-container{display:flex;flex-direction:column;row-gap:calc(4/var(--font-size-base)*1rem)}.af-checkbox-card__label{color:var(--checkbox-card-color);font-size:calc(18/var(--font-size-base)*1rem);font-weight:600}.af-checkbox-card__description{color:var(--checkbox-card-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400;line-height:calc(16/var(--font-size-base)*1rem)}@media (width > 667px){.af-checkbox-card__description{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(18/var(--font-size-base)*1rem)}}.af-checkbox-card__content{align-items:center;display:flex;gap:1rem;justify-content:center;width:100%}.af-checkbox-card__content>svg{color:var(--checkbox-card-color);height:calc(28/var(--font-size-base)*1rem);width:calc(28/var(--font-size-base)*1rem);fill:var(--checkbox-card-fill)}.af-checkbox-card__content-description{display:flex;flex-direction:column;gap:calc(4/var(--font-size-base)*1rem);line-height:calc(20/var(--font-size-base)*1rem)}.af-checkbox-card__content-description>span:first-child{color:var(--checkbox-card-color);line-height:calc(24/var(--font-size-base)*1rem)}.af-checkbox-card__content-description>span:not(:first-child){color:var(--checkbox-card-color)}.af-checkbox-card~.af-checkbox-card__error,.af-checkbox-card~.af-checkbox-card__error>svg{border:solid var(--color-red-700)}.af-checkbox-card-group--horizontal{flex-direction:var(--checkbox-card-flex-direction)}.af-checkbox-card-group--horizontal .af-checkbox-card-label{align-items:var(--checkbox-card-align-items);flex-direction:var(--checkbox-card-flex-direction)}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content{flex-direction:var(--checkbox-card-flex-direction)}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description{align-items:var(--checkbox-card-align-item);flex-direction:var(--checkbox-card-flex-direction);text-align:left}.af-checkbox-card-group--vertical{flex-direction:var(--checkbox-card-flex-direction)}.af-checkbox-card-group--vertical .af-checkbox-card-label{align-items:var(--checkbox-card-align-items);flex-direction:var(--checkbox-card-flex-direction);justify-content:var(--checkbox-card-justify-content)}.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content{flex:1 1;flex-direction:var(--checkbox-card-flex-direction);width:100%}.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description{align-items:var(--checkbox-card-align-item);flex-direction:var(--checkbox-card-flex-direction);text-align:center}.af-checkbox-card-group--horizontal,.af-checkbox-card-group--vertical{align-items:stretch;display:flex;font-family:var(--checkbox-card-font-family);font-style:normal;font-weight:400;gap:1rem;line-height:calc(20/var(--font-size-base)*1rem)}.af-checkbox-card-group--horizontal .af-checkbox-card-label[aria-invalid=true],.af-checkbox-card-group--vertical .af-checkbox-card-label[aria-invalid=true]{background-color:var(--checkbox-card-background-color);border:solid var(--checkbox-card-border);box-shadow:0 0 0 1px var(--checkbox-card-shadow-color) inset}.af-checkbox-card-group--horizontal .af-checkbox-card-label,.af-checkbox-card-group--vertical .af-checkbox-card-label{align-self:stretch;border:solid var(--checkbox-card-border);border-radius:var(--checkbox-card-border-radius);cursor:pointer;display:flex;flex:1 1;gap:calc(12/var(--font-size-base)*1rem);padding:1rem}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content,.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content{align-items:center;display:flex;gap:calc(4/var(--font-size-base)*1rem)}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description,.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description{display:flex;font-size:1rem;justify-content:center;line-height:calc(20/var(--font-size-base)*1rem)}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:first-child,.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:first-child{color:var(--checkbox-card-label-text-color);font-size:calc(18/var(--font-size-base)*1rem);font-weight:400}@media (width < 667px){.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:first-child,.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:first-child{font-size:calc(16/var(--font-size-base)*1rem);font-weight:400}}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:not(:first-child),.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:not(:first-child){color:var(--checkbox-card-label-text-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400}@media (width < 667px){.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:not(:first-child),.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:not(:first-child){font-size:calc(14/var(--font-size-base)*1rem);font-weight:400}}.af-checkbox-card-group--horizontal .af-checkbox-card-label:hover,.af-checkbox-card-group--vertical .af-checkbox-card-label:hover{background-color:var(--checkbox-card-background-color);border:solid var(--checkbox-card-border);box-shadow:0 0 0 1px var(--checkbox-card-shadow-color) inset}.af-checkbox-card-group--horizontal .af-checkbox-card-label:has(input:checked),.af-checkbox-card-group--vertical .af-checkbox-card-label:has(input:checked){background-color:var(--checkbox-card-background-color);border:solid var(--checkbox-card-border);box-shadow:0 0 0 1px var(--checkbox-card-shadow-color) inset}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/Form/Checkbox/CheckboxCard/CheckboxCardCommon.scss%23sass","../../../../src/Form/Checkbox/CheckboxCard/CheckboxCardCommon.scss"],"names":[],"mappings":"AAGE,6BACE,YAAA,CCFJ,qBAAA,CDII,QCFJ,CDKE,mCACE,YAAA,CACA,qBAAA,CACA,0CCHJ,CDME,yBAGE,gCAAA,CAFA,6CAAA,CACA,eCHJ,CDOE,+BAIE,gCAAA,CAHA,6CAAA,CACA,eAAA,CACA,+CCJJ,CDOI,uBANF,+BAOI,6CAAA,CACA,+CCJJ,CACF,CDOE,2BAGE,kBAAA,CAFA,YAAA,CAIA,QAAA,CADA,sBAAA,CAFA,UCFJ,CDOI,+BAGE,gCAAA,CADA,0CAAA,CADA,yCAAA,CAGA,8BCLN,CDQI,uCACE,YAAA,CACA,qBAAA,CACA,sCAAA,CACA,+CCNN,CDQM,wDAEE,gCAAA,CADA,+CCLR,CDSM,8DACE,gCCPR,CDeI,0FACE,iCCVN,CDcE,kCACE,kDCZJ,CDcI,0DAEE,4CAAA,CADA,kDCXN,CDcM,oFACE,kDCZR,CDcQ,0HAEE,2CAAA,CADA,kDAAA,CAEA,eCZV,CDkBE,oCACE,kDChBJ,CDkBI,4DAEE,4CAAA,CADA,kDAAA,CAEA,oDChBN,CDkBM,sFAEE,QAAA,CACA,kDAAA,CAFA,UCdR,CDkBQ,4HAEE,2CAAA,CADA,kDAAA,CAEA,iBChBV,CDsBE,sEAGE,mBAAA,CADA,YAAA,CAGA,4CAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,+CCrBJ,CDuBI,4JAEE,sDAAA,CADA,wCAAA,CAEA,4DCrBN,CDwBI,sHAME,kBAAA,CAHA,wCAAA,CACA,gDAAA,CAIA,cAAA,CAPA,YAAA,CAIA,QAAA,CAEA,uCAAA,CALA,YChBN,CDwBM,0KAEE,kBAAA,CADA,YAAA,CAEA,sCCtBR,CDwBQ,sPACE,YAAA,CAEA,cAAA,CADA,sBAAA,CAEA,+CCtBV,CDwBU,wRAGE,2CAAA,CAFA,6CAAA,CACA,eCrBZ,CDwBY,uBALF,wRAMI,6CAAA,CACA,eCrBZ,CACF,CDwBU,oSAGE,2CAAA,CAFA,6CAAA,CACA,eCrBZ,CDwBY,uBALF,oSAMI,6CAAA,CACA,eCrBZ,CACF,CD0BM,kIAEE,sDAAA,CADA,wCAAA,CAEA,4DCxBR,CD4BI,4JAEE,sDAAA,CADA,wCAAA,CAEA,4DC1BN","file":"CheckboxCardCommon.css","sourcesContent":["@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-checkbox-card {\n &__container {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n }\n\n &__label-container {\n display: flex;\n flex-direction: column;\n row-gap: calc(4 / var(--font-size-base) * 1rem);\n }\n\n &__label {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 600;\n color: var(--checkbox-card-color);\n }\n\n &__description {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n line-height: calc(16 / var(--font-size-base) * 1rem);\n color: var(--checkbox-card-color);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n line-height: calc(18 / var(--font-size-base) * 1rem);\n }\n }\n\n &__content {\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n\n & > svg {\n width: calc(28 / var(--font-size-base) * 1rem);\n height: calc(28 / var(--font-size-base) * 1rem);\n color: var(--checkbox-card-color);\n fill: var(--checkbox-card-fill);\n }\n\n &-description {\n display: flex;\n flex-direction: column;\n gap: calc(4 / var(--font-size-base) * 1rem);\n line-height: calc(20 / var(--font-size-base) * 1rem);\n\n & > span:first-child {\n line-height: calc(24 / var(--font-size-base) * 1rem);\n color: var(--checkbox-card-color);\n }\n\n & > span:not(:first-child) {\n color: var(--checkbox-card-color);\n }\n }\n }\n\n & ~ &__error {\n border: solid var(--color-red-700);\n\n & > svg {\n border: solid var(--color-red-700);\n }\n }\n\n &-group--vertical {\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-label {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-items);\n\n .af-checkbox-card-content {\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-content-description {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-item);\n text-align: left;\n }\n }\n }\n }\n\n &-group--horizontal {\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-label {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-items);\n justify-content: var(--checkbox-card-justify-content);\n\n .af-checkbox-card-content {\n width: 100%;\n flex: 1;\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-content-description {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-item);\n text-align: center;\n }\n }\n }\n }\n\n &-group--vertical,\n &-group--horizontal {\n display: flex;\n align-items: stretch;\n gap: 1rem;\n font-family: var(--checkbox-card-font-family);\n font-style: normal;\n font-weight: 400;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-label[aria-invalid=\"true\"] {\n border: solid var(--checkbox-card-border);\n background-color: var(--checkbox-card-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;\n }\n\n .af-checkbox-card-label {\n display: flex;\n padding: 1rem;\n border: solid var(--checkbox-card-border);\n border-radius: var(--checkbox-card-border-radius);\n flex: 1;\n align-self: stretch;\n gap: calc(12 / var(--font-size-base) * 1rem);\n cursor: pointer;\n\n .af-checkbox-card-content {\n display: flex;\n align-items: center;\n gap: calc(4 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content-description {\n display: flex;\n justify-content: center;\n font-size: 1rem;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n\n & > span:first-child {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--checkbox-card-label-text-color);\n\n @media (width < #{breakpoints.$breakpoint-sm}) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n }\n }\n\n & > span:not(:first-child) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--checkbox-card-label-text-color);\n\n @media (width < #{breakpoints.$breakpoint-sm}) {\n font-size: calc(14 / var(--font-size-base) * 1rem);\n font-weight: 400;\n }\n }\n }\n }\n\n &:hover {\n border: solid var(--checkbox-card-border);\n background-color: var(--checkbox-card-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;\n }\n }\n\n .af-checkbox-card-label:has(input:checked) {\n border: solid var(--checkbox-card-border);\n background-color: var(--checkbox-card-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;\n }\n }\n}\n","@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-checkbox-card {\n &__container {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n }\n\n &__label-container {\n display: flex;\n flex-direction: column;\n row-gap: calc(4 / var(--font-size-base) * 1rem);\n }\n\n &__label {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 600;\n color: var(--checkbox-card-color);\n }\n\n &__description {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n line-height: calc(16 / var(--font-size-base) * 1rem);\n color: var(--checkbox-card-color);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n line-height: calc(18 / var(--font-size-base) * 1rem);\n }\n }\n\n &__content {\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n\n & > svg {\n width: calc(28 / var(--font-size-base) * 1rem);\n height: calc(28 / var(--font-size-base) * 1rem);\n color: var(--checkbox-card-color);\n fill: var(--checkbox-card-fill);\n }\n\n &-description {\n display: flex;\n flex-direction: column;\n gap: calc(4 / var(--font-size-base) * 1rem);\n line-height: calc(20 / var(--font-size-base) * 1rem);\n\n & > span:first-child {\n line-height: calc(24 / var(--font-size-base) * 1rem);\n color: var(--checkbox-card-color);\n }\n\n & > span:not(:first-child) {\n color: var(--checkbox-card-color);\n }\n }\n }\n\n & ~ &__error {\n border: solid var(--color-red-700);\n\n & > svg {\n border: solid var(--color-red-700);\n }\n }\n\n &-group--vertical {\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-label {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-items);\n\n .af-checkbox-card-content {\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-content-description {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-item);\n text-align: left;\n }\n }\n }\n }\n\n &-group--horizontal {\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-label {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-items);\n justify-content: var(--checkbox-card-justify-content);\n\n .af-checkbox-card-content {\n width: 100%;\n flex: 1;\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-content-description {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-item);\n text-align: center;\n }\n }\n }\n }\n\n &-group--vertical,\n &-group--horizontal {\n display: flex;\n align-items: stretch;\n gap: 1rem;\n font-family: var(--checkbox-card-font-family);\n font-style: normal;\n font-weight: 400;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-label[aria-invalid=\"true\"] {\n border: solid var(--checkbox-card-border);\n background-color: var(--checkbox-card-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;\n }\n\n .af-checkbox-card-label {\n display: flex;\n padding: 1rem;\n border: solid var(--checkbox-card-border);\n border-radius: var(--checkbox-card-border-radius);\n flex: 1;\n align-self: stretch;\n gap: calc(12 / var(--font-size-base) * 1rem);\n cursor: pointer;\n\n .af-checkbox-card-content {\n display: flex;\n align-items: center;\n gap: calc(4 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content-description {\n display: flex;\n justify-content: center;\n font-size: 1rem;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n\n & > span:first-child {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--checkbox-card-label-text-color);\n\n @media (width < #{breakpoints.$breakpoint-sm}) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n }\n }\n\n & > span:not(:first-child) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--checkbox-card-label-text-color);\n\n @media (width < #{breakpoints.$breakpoint-sm}) {\n font-size: calc(14 / var(--font-size-base) * 1rem);\n font-weight: 400;\n }\n }\n }\n }\n\n &:hover {\n border: solid var(--checkbox-card-border);\n background-color: var(--checkbox-card-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;\n }\n }\n\n .af-checkbox-card-label:has(input:checked) {\n border: solid var(--checkbox-card-border);\n background-color: var(--checkbox-card-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/Form/Checkbox/CheckboxCard/CheckboxCardCommon.scss%23sass","../../../../src/Form/Checkbox/CheckboxCard/CheckboxCardCommon.scss"],"names":[],"mappings":"AAGE,6BACE,YAAA,CCFJ,qBAAA,CDII,QCFJ,CDKE,mCACE,YAAA,CACA,qBAAA,CACA,0CCHJ,CDME,yBAGE,gCAAA,CAFA,6CAAA,CACA,eCHJ,CDOE,+BAIE,gCAAA,CAHA,6CAAA,CACA,eAAA,CACA,+CCJJ,CDOI,uBANF,+BAOI,6CAAA,CACA,+CCJJ,CACF,CDOE,2BAGE,kBAAA,CAFA,YAAA,CAIA,QAAA,CADA,sBAAA,CAFA,UCFJ,CDOI,+BAGE,gCAAA,CADA,0CAAA,CADA,yCAAA,CAGA,8BCLN,CDQI,uCACE,YAAA,CACA,qBAAA,CACA,sCAAA,CACA,+CCNN,CDQM,wDAEE,gCAAA,CADA,+CCLR,CDSM,8DACE,gCCPR,CDeI,0FACE,iCCVN,CDcE,oCACE,kDCZJ,CDcI,4DAEE,4CAAA,CADA,kDCXN,CDcM,sFACE,kDCZR,CDcQ,4HAEE,2CAAA,CADA,kDAAA,CAEA,eCZV,CDkBE,kCACE,kDChBJ,CDkBI,0DAEE,4CAAA,CADA,kDAAA,CAEA,oDChBN,CDkBM,oFAEE,QAAA,CACA,kDAAA,CAFA,UCdR,CDkBQ,0HAEE,2CAAA,CADA,kDAAA,CAEA,iBChBV,CDsBE,sEAGE,mBAAA,CADA,YAAA,CAGA,4CAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,+CCrBJ,CDuBI,4JAEE,sDAAA,CADA,wCAAA,CAEA,4DCrBN,CDwBI,sHAME,kBAAA,CAHA,wCAAA,CACA,gDAAA,CAIA,cAAA,CAPA,YAAA,CAIA,QAAA,CAEA,uCAAA,CALA,YChBN,CDwBM,0KAEE,kBAAA,CADA,YAAA,CAEA,sCCtBR,CDwBQ,sPACE,YAAA,CAEA,cAAA,CADA,sBAAA,CAEA,+CCtBV,CDwBU,wRAGE,2CAAA,CAFA,6CAAA,CACA,eCrBZ,CDwBY,uBALF,wRAMI,6CAAA,CACA,eCrBZ,CACF,CDwBU,oSAGE,2CAAA,CAFA,6CAAA,CACA,eCrBZ,CDwBY,uBALF,oSAMI,6CAAA,CACA,eCrBZ,CACF,CD0BM,kIAEE,sDAAA,CADA,wCAAA,CAEA,4DCxBR,CD4BI,4JAEE,sDAAA,CADA,wCAAA,CAEA,4DC1BN","file":"CheckboxCardCommon.css","sourcesContent":["@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-checkbox-card {\n &__container {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n }\n\n &__label-container {\n display: flex;\n flex-direction: column;\n row-gap: calc(4 / var(--font-size-base) * 1rem);\n }\n\n &__label {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 600;\n color: var(--checkbox-card-color);\n }\n\n &__description {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n line-height: calc(16 / var(--font-size-base) * 1rem);\n color: var(--checkbox-card-color);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n line-height: calc(18 / var(--font-size-base) * 1rem);\n }\n }\n\n &__content {\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n\n & > svg {\n width: calc(28 / var(--font-size-base) * 1rem);\n height: calc(28 / var(--font-size-base) * 1rem);\n color: var(--checkbox-card-color);\n fill: var(--checkbox-card-fill);\n }\n\n &-description {\n display: flex;\n flex-direction: column;\n gap: calc(4 / var(--font-size-base) * 1rem);\n line-height: calc(20 / var(--font-size-base) * 1rem);\n\n & > span:first-child {\n line-height: calc(24 / var(--font-size-base) * 1rem);\n color: var(--checkbox-card-color);\n }\n\n & > span:not(:first-child) {\n color: var(--checkbox-card-color);\n }\n }\n }\n\n & ~ &__error {\n border: solid var(--color-red-700);\n\n & > svg {\n border: solid var(--color-red-700);\n }\n }\n\n &-group--horizontal {\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-label {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-items);\n\n .af-checkbox-card-content {\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-content-description {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-item);\n text-align: left;\n }\n }\n }\n }\n\n &-group--vertical {\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-label {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-items);\n justify-content: var(--checkbox-card-justify-content);\n\n .af-checkbox-card-content {\n width: 100%;\n flex: 1;\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-content-description {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-item);\n text-align: center;\n }\n }\n }\n }\n\n &-group--vertical,\n &-group--horizontal {\n display: flex;\n align-items: stretch;\n gap: 1rem;\n font-family: var(--checkbox-card-font-family);\n font-style: normal;\n font-weight: 400;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-label[aria-invalid=\"true\"] {\n border: solid var(--checkbox-card-border);\n background-color: var(--checkbox-card-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;\n }\n\n .af-checkbox-card-label {\n display: flex;\n padding: 1rem;\n border: solid var(--checkbox-card-border);\n border-radius: var(--checkbox-card-border-radius);\n flex: 1;\n align-self: stretch;\n gap: calc(12 / var(--font-size-base) * 1rem);\n cursor: pointer;\n\n .af-checkbox-card-content {\n display: flex;\n align-items: center;\n gap: calc(4 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content-description {\n display: flex;\n justify-content: center;\n font-size: 1rem;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n\n & > span:first-child {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--checkbox-card-label-text-color);\n\n @media (width < #{breakpoints.$breakpoint-sm}) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n }\n }\n\n & > span:not(:first-child) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--checkbox-card-label-text-color);\n\n @media (width < #{breakpoints.$breakpoint-sm}) {\n font-size: calc(14 / var(--font-size-base) * 1rem);\n font-weight: 400;\n }\n }\n }\n }\n\n &:hover {\n border: solid var(--checkbox-card-border);\n background-color: var(--checkbox-card-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;\n }\n }\n\n .af-checkbox-card-label:has(input:checked) {\n border: solid var(--checkbox-card-border);\n background-color: var(--checkbox-card-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;\n }\n }\n}\n","@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-checkbox-card {\n &__container {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n }\n\n &__label-container {\n display: flex;\n flex-direction: column;\n row-gap: calc(4 / var(--font-size-base) * 1rem);\n }\n\n &__label {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 600;\n color: var(--checkbox-card-color);\n }\n\n &__description {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n line-height: calc(16 / var(--font-size-base) * 1rem);\n color: var(--checkbox-card-color);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n line-height: calc(18 / var(--font-size-base) * 1rem);\n }\n }\n\n &__content {\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n\n & > svg {\n width: calc(28 / var(--font-size-base) * 1rem);\n height: calc(28 / var(--font-size-base) * 1rem);\n color: var(--checkbox-card-color);\n fill: var(--checkbox-card-fill);\n }\n\n &-description {\n display: flex;\n flex-direction: column;\n gap: calc(4 / var(--font-size-base) * 1rem);\n line-height: calc(20 / var(--font-size-base) * 1rem);\n\n & > span:first-child {\n line-height: calc(24 / var(--font-size-base) * 1rem);\n color: var(--checkbox-card-color);\n }\n\n & > span:not(:first-child) {\n color: var(--checkbox-card-color);\n }\n }\n }\n\n & ~ &__error {\n border: solid var(--color-red-700);\n\n & > svg {\n border: solid var(--color-red-700);\n }\n }\n\n &-group--horizontal {\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-label {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-items);\n\n .af-checkbox-card-content {\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-content-description {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-item);\n text-align: left;\n }\n }\n }\n }\n\n &-group--vertical {\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-label {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-items);\n justify-content: var(--checkbox-card-justify-content);\n\n .af-checkbox-card-content {\n width: 100%;\n flex: 1;\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-content-description {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-item);\n text-align: center;\n }\n }\n }\n }\n\n &-group--vertical,\n &-group--horizontal {\n display: flex;\n align-items: stretch;\n gap: 1rem;\n font-family: var(--checkbox-card-font-family);\n font-style: normal;\n font-weight: 400;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-label[aria-invalid=\"true\"] {\n border: solid var(--checkbox-card-border);\n background-color: var(--checkbox-card-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;\n }\n\n .af-checkbox-card-label {\n display: flex;\n padding: 1rem;\n border: solid var(--checkbox-card-border);\n border-radius: var(--checkbox-card-border-radius);\n flex: 1;\n align-self: stretch;\n gap: calc(12 / var(--font-size-base) * 1rem);\n cursor: pointer;\n\n .af-checkbox-card-content {\n display: flex;\n align-items: center;\n gap: calc(4 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content-description {\n display: flex;\n justify-content: center;\n font-size: 1rem;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n\n & > span:first-child {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--checkbox-card-label-text-color);\n\n @media (width < #{breakpoints.$breakpoint-sm}) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n }\n }\n\n & > span:not(:first-child) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--checkbox-card-label-text-color);\n\n @media (width < #{breakpoints.$breakpoint-sm}) {\n font-size: calc(14 / var(--font-size-base) * 1rem);\n font-weight: 400;\n }\n }\n }\n }\n\n &:hover {\n border: solid var(--checkbox-card-border);\n background-color: var(--checkbox-card-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;\n }\n }\n\n .af-checkbox-card-label:has(input:checked) {\n border: solid var(--checkbox-card-border);\n background-color: var(--checkbox-card-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;\n }\n }\n}\n"]}
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
72
|
|
|
73
|
-
&-group--
|
|
73
|
+
&-group--horizontal {
|
|
74
74
|
flex-direction: var(--checkbox-card-flex-direction);
|
|
75
75
|
|
|
76
76
|
.af-checkbox-card-label {
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
}
|
|
90
90
|
}
|
|
91
91
|
|
|
92
|
-
&-group--
|
|
92
|
+
&-group--vertical {
|
|
93
93
|
flex-direction: var(--checkbox-card-flex-direction);
|
|
94
94
|
|
|
95
95
|
.af-checkbox-card-label {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-checkbox-card__container{display:flex;flex-direction:column;gap:1rem}.af-checkbox-card__label-container{display:flex;flex-direction:column;row-gap:calc(4/var(--font-size-base)*1rem)}.af-checkbox-card__label{color:var(--checkbox-card-color);font-size:calc(18/var(--font-size-base)*1rem);font-weight:600}.af-checkbox-card__description{color:var(--checkbox-card-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400;line-height:calc(16/var(--font-size-base)*1rem)}@media (width > 667px){.af-checkbox-card__description{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(18/var(--font-size-base)*1rem)}}.af-checkbox-card__content{align-items:center;display:flex;gap:1rem;justify-content:center;width:100%}.af-checkbox-card__content>svg{color:var(--checkbox-card-color);height:calc(28/var(--font-size-base)*1rem);width:calc(28/var(--font-size-base)*1rem);fill:var(--checkbox-card-fill)}.af-checkbox-card__content-description{display:flex;flex-direction:column;gap:calc(4/var(--font-size-base)*1rem);line-height:calc(20/var(--font-size-base)*1rem)}.af-checkbox-card__content-description>span:first-child{color:var(--checkbox-card-color);line-height:calc(24/var(--font-size-base)*1rem)}.af-checkbox-card__content-description>span:not(:first-child){color:var(--checkbox-card-color)}.af-checkbox-card~.af-checkbox-card__error,.af-checkbox-card~.af-checkbox-card__error>svg{border:solid var(--color-red-700)}.af-checkbox-card-group--
|
|
1
|
+
.af-checkbox-card__container{display:flex;flex-direction:column;gap:1rem}.af-checkbox-card__label-container{display:flex;flex-direction:column;row-gap:calc(4/var(--font-size-base)*1rem)}.af-checkbox-card__label{color:var(--checkbox-card-color);font-size:calc(18/var(--font-size-base)*1rem);font-weight:600}.af-checkbox-card__description{color:var(--checkbox-card-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400;line-height:calc(16/var(--font-size-base)*1rem)}@media (width > 667px){.af-checkbox-card__description{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(18/var(--font-size-base)*1rem)}}.af-checkbox-card__content{align-items:center;display:flex;gap:1rem;justify-content:center;width:100%}.af-checkbox-card__content>svg{color:var(--checkbox-card-color);height:calc(28/var(--font-size-base)*1rem);width:calc(28/var(--font-size-base)*1rem);fill:var(--checkbox-card-fill)}.af-checkbox-card__content-description{display:flex;flex-direction:column;gap:calc(4/var(--font-size-base)*1rem);line-height:calc(20/var(--font-size-base)*1rem)}.af-checkbox-card__content-description>span:first-child{color:var(--checkbox-card-color);line-height:calc(24/var(--font-size-base)*1rem)}.af-checkbox-card__content-description>span:not(:first-child){color:var(--checkbox-card-color)}.af-checkbox-card~.af-checkbox-card__error,.af-checkbox-card~.af-checkbox-card__error>svg{border:solid var(--color-red-700)}.af-checkbox-card-group--horizontal{flex-direction:var(--checkbox-card-flex-direction)}.af-checkbox-card-group--horizontal .af-checkbox-card-label{align-items:var(--checkbox-card-align-items);flex-direction:var(--checkbox-card-flex-direction)}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content{flex-direction:var(--checkbox-card-flex-direction)}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description{align-items:var(--checkbox-card-align-item);flex-direction:var(--checkbox-card-flex-direction);text-align:left}.af-checkbox-card-group--vertical{flex-direction:var(--checkbox-card-flex-direction)}.af-checkbox-card-group--vertical .af-checkbox-card-label{align-items:var(--checkbox-card-align-items);flex-direction:var(--checkbox-card-flex-direction);justify-content:var(--checkbox-card-justify-content)}.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content{flex:1 1;flex-direction:var(--checkbox-card-flex-direction);width:100%}.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description{align-items:var(--checkbox-card-align-item);flex-direction:var(--checkbox-card-flex-direction);text-align:center}.af-checkbox-card-group--horizontal,.af-checkbox-card-group--vertical{align-items:stretch;display:flex;font-family:var(--checkbox-card-font-family);font-style:normal;font-weight:400;gap:1rem;line-height:calc(20/var(--font-size-base)*1rem)}.af-checkbox-card-group--horizontal .af-checkbox-card-label[aria-invalid=true],.af-checkbox-card-group--vertical .af-checkbox-card-label[aria-invalid=true]{background-color:var(--checkbox-card-background-color);border:solid var(--checkbox-card-border);box-shadow:0 0 0 1px var(--checkbox-card-shadow-color) inset}.af-checkbox-card-group--horizontal .af-checkbox-card-label,.af-checkbox-card-group--vertical .af-checkbox-card-label{align-self:stretch;border:solid var(--checkbox-card-border);border-radius:var(--checkbox-card-border-radius);cursor:pointer;display:flex;flex:1 1;gap:calc(12/var(--font-size-base)*1rem);padding:1rem}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content,.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content{align-items:center;display:flex;gap:calc(4/var(--font-size-base)*1rem)}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description,.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description{display:flex;font-size:1rem;justify-content:center;line-height:calc(20/var(--font-size-base)*1rem)}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:first-child,.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:first-child{color:var(--checkbox-card-label-text-color);font-size:calc(18/var(--font-size-base)*1rem);font-weight:400}@media (width < 667px){.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:first-child,.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:first-child{font-size:calc(16/var(--font-size-base)*1rem);font-weight:400}}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:not(:first-child),.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:not(:first-child){color:var(--checkbox-card-label-text-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400}@media (width < 667px){.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:not(:first-child),.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:not(:first-child){font-size:calc(14/var(--font-size-base)*1rem);font-weight:400}}.af-checkbox-card-group--horizontal .af-checkbox-card-label:hover,.af-checkbox-card-group--vertical .af-checkbox-card-label:hover{background-color:var(--checkbox-card-background-color);border:solid var(--checkbox-card-border);box-shadow:0 0 0 1px var(--checkbox-card-shadow-color) inset}.af-checkbox-card-group--horizontal .af-checkbox-card-label:has(input:checked),.af-checkbox-card-group--vertical .af-checkbox-card-label:has(input:checked){background-color:var(--checkbox-card-background-color);border:solid var(--checkbox-card-border);box-shadow:0 0 0 1px var(--checkbox-card-shadow-color) inset}.af-checkbox-card__label-container{--font-size-base:calc(16/var(--font-size-base)*1rem)}.af-checkbox-card__label{--checkbox-card-color:var(--color-gray-900)}.af-checkbox-card__description{--checkbox-card-color:var(--color-gray-700)}.af-checkbox-card__content>svg{--checkbox-card-color:var(--color-axa);--checkbox-card-fill:var(--color-axa)}.af-checkbox-card__content-description>span:first-child{--checkbox-card-color:var(--color-gray-900)}.af-checkbox-card__content-description>span:not(:first-child){--checkbox-card-color:var(--color-gray-700)}.af-checkbox-card~.af-checkbox-card__error{--error-box-color:var(--color-red-700)}.af-checkbox-card~.af-checkbox-card__error>svg{--error-box-color:var(--color-red-700);--error-box-fill:var(--color-red-700)}.af-checkbox-card-group--horizontal{--checkbox-card-flex-direction:column}.af-checkbox-card-group--horizontal .af-checkbox-card-label{--checkbox-card-flex-direction:row;--checkbox-card-align-items:center}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content{--checkbox-card-flex-direction:row;--checkbox-card-margin-left:calc(12/var(--font-size-base)*1rem)}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description{--checkbox-card-flex-direction:column;--checkbox-card-align-item:flex-start}.af-checkbox-card-group--vertical{--checkbox-card-flex-direction:row}.af-checkbox-card-group--vertical .af-checkbox-card-label{--checkbox-card-flex-direction:row;--checkbox-card-align-items:flex-start;--checkbox-card-justify-content:flex-start}.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox{position:absolute}.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content{--checkbox-card-flex-direction:column;--checkbox-card-margin-left:calc(2/var(--font-size-base)*1rem)}.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description{--checkbox-card-flex-direction:column;--checkbox-card-align-item:center}.af-checkbox-card-group--horizontal .af-checkbox-card-label[aria-invalid=true],.af-checkbox-card-group--vertical .af-checkbox-card-label[aria-invalid=true]{--checkbox-card-background-color:var(--color-white);--checkbox-card-border:2px var(--color-red-700);--checkbox-card-shadow-color:var(--color-red-700)}.af-checkbox-card-group--horizontal .af-checkbox-card-label,.af-checkbox-card-group--vertical .af-checkbox-card-label{--checkbox-card-border:2px var(--color-gray-700);--checkbox-card-border-radius:calc(6/var(--font-size-base)*1rem)}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:first-child,.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:first-child{--checkbox-card-label-text-color:var(--color-black)}.af-checkbox-card-group--horizontal .af-checkbox-card-label:hover,.af-checkbox-card-group--vertical .af-checkbox-card-label:hover{--checkbox-card-border:2px var(--color-axa);--checkbox-card-shadow-color:var(--color-axa);--checkbox-card-background-color:var(--color-white)}.af-checkbox-card-group--horizontal .af-checkbox-card-label:has(input:checked),.af-checkbox-card-group--vertical .af-checkbox-card-label:has(input:checked){--checkbox-card-border:2px var(--color-axa);--checkbox-card-shadow-color:var(--color-axa);--checkbox-card-background-color:var(--color-blue-2)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/Form/Checkbox/CheckboxCard/CheckboxCardCommon.scss","../../../../src/Form/Checkbox/CheckboxCard/CheckboxCardLF.scss","../../../../src/Form/Checkbox/CheckboxCard/CheckboxCardLF.scss%23sass"],"names":[],"mappings":"AAGE,6BACE,YAAA,CCFJ,qBAAA,CDII,QCFJ,CDKE,mCACE,YAAA,CACA,qBAAA,CACA,0CCHJ,CDME,yBAGE,gCAAA,CAFA,6CAAA,CACA,eCHJ,CDOE,+BAIE,gCAAA,CAHA,6CAAA,CACA,eAAA,CACA,+CCJJ,CDOI,uBANF,+BAOI,6CAAA,CACA,+CCJJ,CACF,CDOE,2BAGE,kBAAA,CAFA,YAAA,CAIA,QAAA,CADA,sBAAA,CAFA,UCFJ,CDOI,+BAGE,gCAAA,CADA,0CAAA,CADA,yCAAA,CAGA,8BCLN,CDQI,uCACE,YAAA,CACA,qBAAA,CACA,sCAAA,CACA,+CCNN,CDQM,wDAEE,gCAAA,CADA,+CCLR,CDSM,8DACE,gCCPR,CDeI,0FACE,iCCVN,CDcE,kCACE,kDCZJ,CDcI,0DAEE,4CAAA,CADA,kDCXN,CDcM,oFACE,kDCZR,CDcQ,0HAEE,2CAAA,CADA,kDAAA,CAEA,eCZV,CDkBE,oCACE,kDChBJ,CDkBI,4DAEE,4CAAA,CADA,kDAAA,CAEA,oDChBN,CDkBM,sFAEE,QAAA,CACA,kDAAA,CAFA,UCdR,CDkBQ,4HAEE,2CAAA,CADA,kDAAA,CAEA,iBChBV,CDsBE,sEAGE,mBAAA,CADA,YAAA,CAGA,4CAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,+CCrBJ,CDuBI,4JAEE,sDAAA,CADA,wCAAA,CAEA,4DCrBN,CDwBI,sHAME,kBAAA,CAHA,wCAAA,CACA,gDAAA,CAIA,cAAA,CAPA,YAAA,CAIA,QAAA,CCrBN,uCAAA,CDkBM,YChBN,CDwBM,0KAEE,kBAAA,CADA,YAAA,CAEA,sCCtBR,CDwBQ,sPACE,YAAA,CAEA,cAAA,CADA,sBAAA,CAEA,+CCtBV,CDwBU,wRAGE,2CAAA,CAFA,6CAAA,CACA,eCrBZ,CDwBY,uBALF,wRAMI,6CAAA,CACA,eCrBZ,CACF,CDwBU,oSAGE,2CAAA,CAFA,6CAAA,CACA,eCrBZ,CDwBY,uBALF,oSAMI,6CAAA,CACA,eCrBZ,CACF,CD0BM,kIAEE,sDAAA,CADA,wCAAA,CAEA,4DCxBR,CD4BI,4JAEE,sDAAA,CADA,wCAAA,CAEA,4DC1BN,CC3JE,mCACE,oDD8JJ,CC3JE,yBACE,2CD6JJ,CC1JE,+BACE,2CD4JJ,CCxJI,+BACE,sCAAA,CACA,qCD0JN,CCtJM,wDACE,2CDwJR,CCrJM,8DACE,2CDuJR,CClJE,2CACE,sCDoJJ,CClJI,+CACE,sCAAA,CACA,qCDoJN,CChJE,kCACE,qCDkJJ,CChJI,0DACE,kCAAA,CACA,kCDkJN,CChJM,oFACE,kCAAA,CACA,+DDkJR,CChJQ,0HACE,qCAAA,CACA,qCDkJV,CC5IE,oCACE,kCD8IJ,CC5II,4DACE,kCAAA,CACA,sCAAA,CACA,0CD8IN,CC5IM,sFACE,qCAAA,CACA,8DD8IR,CC5IQ,4HACE,qCAAA,CACA,iCD8IV,CCtII,4JACE,mDAAA,CACA,+CAAA,CACA,iDDwIN,CCrII,sHACE,gDAAA,CACA,gEDuIN,CCnIU,wRACE,mDDqIZ,CChIM,kIACE,2CAAA,CACA,6CAAA,CACA,mDDkIR,CC9HI,4JACE,2CAAA,CACA,6CAAA,CACA,oDDgIN","file":"CheckboxCardLF.css","sourcesContent":["@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-checkbox-card {\n &__container {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n }\n\n &__label-container {\n display: flex;\n flex-direction: column;\n row-gap: calc(4 / var(--font-size-base) * 1rem);\n }\n\n &__label {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 600;\n color: var(--checkbox-card-color);\n }\n\n &__description {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n line-height: calc(16 / var(--font-size-base) * 1rem);\n color: var(--checkbox-card-color);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n line-height: calc(18 / var(--font-size-base) * 1rem);\n }\n }\n\n &__content {\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n\n & > svg {\n width: calc(28 / var(--font-size-base) * 1rem);\n height: calc(28 / var(--font-size-base) * 1rem);\n color: var(--checkbox-card-color);\n fill: var(--checkbox-card-fill);\n }\n\n &-description {\n display: flex;\n flex-direction: column;\n gap: calc(4 / var(--font-size-base) * 1rem);\n line-height: calc(20 / var(--font-size-base) * 1rem);\n\n & > span:first-child {\n line-height: calc(24 / var(--font-size-base) * 1rem);\n color: var(--checkbox-card-color);\n }\n\n & > span:not(:first-child) {\n color: var(--checkbox-card-color);\n }\n }\n }\n\n & ~ &__error {\n border: solid var(--color-red-700);\n\n & > svg {\n border: solid var(--color-red-700);\n }\n }\n\n &-group--vertical {\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-label {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-items);\n\n .af-checkbox-card-content {\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-content-description {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-item);\n text-align: left;\n }\n }\n }\n }\n\n &-group--horizontal {\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-label {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-items);\n justify-content: var(--checkbox-card-justify-content);\n\n .af-checkbox-card-content {\n width: 100%;\n flex: 1;\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-content-description {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-item);\n text-align: center;\n }\n }\n }\n }\n\n &-group--vertical,\n &-group--horizontal {\n display: flex;\n align-items: stretch;\n gap: 1rem;\n font-family: var(--checkbox-card-font-family);\n font-style: normal;\n font-weight: 400;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-label[aria-invalid=\"true\"] {\n border: solid var(--checkbox-card-border);\n background-color: var(--checkbox-card-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;\n }\n\n .af-checkbox-card-label {\n display: flex;\n padding: 1rem;\n border: solid var(--checkbox-card-border);\n border-radius: var(--checkbox-card-border-radius);\n flex: 1;\n align-self: stretch;\n gap: calc(12 / var(--font-size-base) * 1rem);\n cursor: pointer;\n\n .af-checkbox-card-content {\n display: flex;\n align-items: center;\n gap: calc(4 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content-description {\n display: flex;\n justify-content: center;\n font-size: 1rem;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n\n & > span:first-child {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--checkbox-card-label-text-color);\n\n @media (width < #{breakpoints.$breakpoint-sm}) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n }\n }\n\n & > span:not(:first-child) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--checkbox-card-label-text-color);\n\n @media (width < #{breakpoints.$breakpoint-sm}) {\n font-size: calc(14 / var(--font-size-base) * 1rem);\n font-weight: 400;\n }\n }\n }\n }\n\n &:hover {\n border: solid var(--checkbox-card-border);\n background-color: var(--checkbox-card-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;\n }\n }\n\n .af-checkbox-card-label:has(input:checked) {\n border: solid var(--checkbox-card-border);\n background-color: var(--checkbox-card-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;\n }\n }\n}\n","@use \"CheckboxCardCommon\";\n\n.af-checkbox-card {\n &__label-container {\n --font-size-base: calc(16 / var(--font-size-base) * 1rem);\n }\n\n &__label {\n --checkbox-card-color: var(--color-gray-900);\n }\n\n &__description {\n --checkbox-card-color: var(--color-gray-700);\n }\n\n &__content {\n & > svg {\n --checkbox-card-color: var(--color-axa);\n --checkbox-card-fill: var(--color-axa);\n }\n\n &-description {\n & > span:first-child {\n --checkbox-card-color: var(--color-gray-900);\n }\n\n & > span:not(:first-child) {\n --checkbox-card-color: var(--color-gray-700);\n }\n }\n }\n\n & ~ &__error {\n --error-box-color: var(--color-red-700);\n\n & > svg {\n --error-box-color: var(--color-red-700);\n --error-box-fill: var(--color-red-700);\n }\n }\n\n &-group--vertical {\n --checkbox-card-flex-direction: column;\n\n .af-checkbox-card-label {\n --checkbox-card-flex-direction: row;\n --checkbox-card-align-items: center;\n\n .af-checkbox-card-content {\n --checkbox-card-flex-direction: row;\n --checkbox-card-margin-left: calc(12 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content-description {\n --checkbox-card-flex-direction: column;\n --checkbox-card-align-item: flex-start;\n }\n }\n }\n }\n\n &-group--horizontal {\n --checkbox-card-flex-direction: row;\n\n .af-checkbox-card-label {\n --checkbox-card-flex-direction: row;\n --checkbox-card-align-items: flex-start;\n --checkbox-card-justify-content: flex-start;\n\n .af-checkbox-card-content {\n --checkbox-card-flex-direction: column;\n --checkbox-card-margin-left: calc(2 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content-description {\n --checkbox-card-flex-direction: column;\n --checkbox-card-align-item: center;\n }\n }\n }\n }\n\n &-group--vertical,\n &-group--horizontal {\n .af-checkbox-card-label[aria-invalid=\"true\"] {\n --checkbox-card-background-color: var(--color-white);\n --checkbox-card-border: 2px var(--color-red-700);\n --checkbox-card-shadow-color: var(--color-red-700);\n }\n\n .af-checkbox-card-label {\n --checkbox-card-border: 2px var(--color-gray-700);\n --checkbox-card-border-radius: calc(6 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content {\n .af-checkbox-card-content-description {\n & > span:first-child {\n --checkbox-card-label-text-color: var(--color-black);\n }\n }\n }\n\n &:hover {\n --checkbox-card-border: 2px var(--color-axa);\n --checkbox-card-shadow-color: var(--color-axa);\n --checkbox-card-background-color: var(--color-white);\n }\n }\n\n .af-checkbox-card-label:has(input:checked) {\n --checkbox-card-border: 2px var(--color-axa);\n --checkbox-card-shadow-color: var(--color-axa);\n --checkbox-card-background-color: var(--color-blue-2);\n }\n }\n}\n","@use \"CheckboxCardCommon\";\n\n.af-checkbox-card {\n &__label-container {\n --font-size-base: calc(16 / var(--font-size-base) * 1rem);\n }\n\n &__label {\n --checkbox-card-color: var(--color-gray-900);\n }\n\n &__description {\n --checkbox-card-color: var(--color-gray-700);\n }\n\n &__content {\n & > svg {\n --checkbox-card-color: var(--color-axa);\n --checkbox-card-fill: var(--color-axa);\n }\n\n &-description {\n & > span:first-child {\n --checkbox-card-color: var(--color-gray-900);\n }\n\n & > span:not(:first-child) {\n --checkbox-card-color: var(--color-gray-700);\n }\n }\n }\n\n & ~ &__error {\n --error-box-color: var(--color-red-700);\n\n & > svg {\n --error-box-color: var(--color-red-700);\n --error-box-fill: var(--color-red-700);\n }\n }\n\n &-group--vertical {\n --checkbox-card-flex-direction: column;\n\n .af-checkbox-card-label {\n --checkbox-card-flex-direction: row;\n --checkbox-card-align-items: center;\n\n .af-checkbox-card-content {\n --checkbox-card-flex-direction: row;\n --checkbox-card-margin-left: calc(12 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content-description {\n --checkbox-card-flex-direction: column;\n --checkbox-card-align-item: flex-start;\n }\n }\n }\n }\n\n &-group--horizontal {\n --checkbox-card-flex-direction: row;\n\n .af-checkbox-card-label {\n --checkbox-card-flex-direction: row;\n --checkbox-card-align-items: flex-start;\n --checkbox-card-justify-content: flex-start;\n\n .af-checkbox-card-content {\n --checkbox-card-flex-direction: column;\n --checkbox-card-margin-left: calc(2 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content-description {\n --checkbox-card-flex-direction: column;\n --checkbox-card-align-item: center;\n }\n }\n }\n }\n\n &-group--vertical,\n &-group--horizontal {\n .af-checkbox-card-label[aria-invalid=\"true\"] {\n --checkbox-card-background-color: var(--color-white);\n --checkbox-card-border: 2px var(--color-red-700);\n --checkbox-card-shadow-color: var(--color-red-700);\n }\n\n .af-checkbox-card-label {\n --checkbox-card-border: 2px var(--color-gray-700);\n --checkbox-card-border-radius: calc(6 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content {\n .af-checkbox-card-content-description {\n & > span:first-child {\n --checkbox-card-label-text-color: var(--color-black);\n }\n }\n }\n\n &:hover {\n --checkbox-card-border: 2px var(--color-axa);\n --checkbox-card-shadow-color: var(--color-axa);\n --checkbox-card-background-color: var(--color-white);\n }\n }\n\n .af-checkbox-card-label:has(input:checked) {\n --checkbox-card-border: 2px var(--color-axa);\n --checkbox-card-shadow-color: var(--color-axa);\n --checkbox-card-background-color: var(--color-blue-2);\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/Form/Checkbox/CheckboxCard/CheckboxCardCommon.scss","../../../../src/Form/Checkbox/CheckboxCard/CheckboxCardLF.scss","../../../../src/Form/Checkbox/CheckboxCard/CheckboxCardLF.scss%23sass"],"names":[],"mappings":"AAGE,6BACE,YAAA,CCFJ,qBAAA,CDII,QCFJ,CDKE,mCACE,YAAA,CACA,qBAAA,CACA,0CCHJ,CDME,yBAGE,gCAAA,CAFA,6CAAA,CACA,eCHJ,CDOE,+BAIE,gCAAA,CAHA,6CAAA,CACA,eAAA,CACA,+CCJJ,CDOI,uBANF,+BAOI,6CAAA,CACA,+CCJJ,CACF,CDOE,2BAGE,kBAAA,CAFA,YAAA,CAIA,QAAA,CADA,sBAAA,CAFA,UCFJ,CDOI,+BAGE,gCAAA,CADA,0CAAA,CADA,yCAAA,CAGA,8BCLN,CDQI,uCACE,YAAA,CACA,qBAAA,CACA,sCAAA,CACA,+CCNN,CDQM,wDAEE,gCAAA,CADA,+CCLR,CDSM,8DACE,gCCPR,CDeI,0FACE,iCCVN,CDcE,oCACE,kDCZJ,CDcI,4DAEE,4CAAA,CADA,kDCXN,CDcM,sFACE,kDCZR,CDcQ,4HAEE,2CAAA,CADA,kDAAA,CAEA,eCZV,CDkBE,kCACE,kDChBJ,CDkBI,0DAEE,4CAAA,CADA,kDAAA,CAEA,oDChBN,CDkBM,oFAEE,QAAA,CACA,kDAAA,CAFA,UCdR,CDkBQ,0HAEE,2CAAA,CADA,kDAAA,CAEA,iBChBV,CDsBE,sEAGE,mBAAA,CADA,YAAA,CAGA,4CAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,+CCrBJ,CDuBI,4JAEE,sDAAA,CADA,wCAAA,CAEA,4DCrBN,CDwBI,sHAME,kBAAA,CAHA,wCAAA,CACA,gDAAA,CAIA,cAAA,CAPA,YAAA,CAIA,QAAA,CAEA,uCAAA,CALA,YChBN,CDwBM,0KAEE,kBAAA,CCxBR,YAAA,CDyBQ,sCCtBR,CDwBQ,sPACE,YAAA,CAEA,cAAA,CADA,sBAAA,CAEA,+CCtBV,CDwBU,wRAGE,2CAAA,CAFA,6CAAA,CACA,eCrBZ,CDwBY,uBALF,wRAMI,6CAAA,CACA,eCrBZ,CACF,CDwBU,oSAGE,2CAAA,CAFA,6CAAA,CACA,eCrBZ,CDwBY,uBALF,oSAMI,6CAAA,CACA,eCrBZ,CACF,CD0BM,kIAEE,sDAAA,CADA,wCAAA,CAEA,4DCxBR,CD4BI,4JAEE,sDAAA,CADA,wCAAA,CAEA,4DC1BN,CC3JE,mCACE,oDD8JJ,CC3JE,yBACE,2CD6JJ,CC1JE,+BACE,2CD4JJ,CCxJI,+BACE,sCAAA,CACA,qCD0JN,CCtJM,wDACE,2CDwJR,CCrJM,8DACE,2CDuJR,CClJE,2CACE,sCDoJJ,CClJI,+CACE,sCAAA,CACA,qCDoJN,CChJE,oCACE,qCDkJJ,CChJI,4DACE,kCAAA,CACA,kCDkJN,CChJM,sFACE,kCAAA,CACA,+DDkJR,CChJQ,4HACE,qCAAA,CACA,qCDkJV,CC5IE,kCACE,kCD8IJ,CC5II,0DACE,kCAAA,CACA,sCAAA,CACA,0CD8IN,CC5IM,uEACE,iBD8IR,CC3IM,oFACE,qCAAA,CACA,8DD6IR,CC3IQ,0HACE,qCAAA,CACA,iCD6IV,CCrII,4JACE,mDAAA,CACA,+CAAA,CACA,iDDuIN,CCpII,sHACE,gDAAA,CACA,gEDsIN,CClIU,wRACE,mDDoIZ,CC/HM,kIACE,2CAAA,CACA,6CAAA,CACA,mDDiIR,CC7HI,4JACE,2CAAA,CACA,6CAAA,CACA,oDD+HN","file":"CheckboxCardLF.css","sourcesContent":["@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-checkbox-card {\n &__container {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n }\n\n &__label-container {\n display: flex;\n flex-direction: column;\n row-gap: calc(4 / var(--font-size-base) * 1rem);\n }\n\n &__label {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 600;\n color: var(--checkbox-card-color);\n }\n\n &__description {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n line-height: calc(16 / var(--font-size-base) * 1rem);\n color: var(--checkbox-card-color);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n line-height: calc(18 / var(--font-size-base) * 1rem);\n }\n }\n\n &__content {\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n\n & > svg {\n width: calc(28 / var(--font-size-base) * 1rem);\n height: calc(28 / var(--font-size-base) * 1rem);\n color: var(--checkbox-card-color);\n fill: var(--checkbox-card-fill);\n }\n\n &-description {\n display: flex;\n flex-direction: column;\n gap: calc(4 / var(--font-size-base) * 1rem);\n line-height: calc(20 / var(--font-size-base) * 1rem);\n\n & > span:first-child {\n line-height: calc(24 / var(--font-size-base) * 1rem);\n color: var(--checkbox-card-color);\n }\n\n & > span:not(:first-child) {\n color: var(--checkbox-card-color);\n }\n }\n }\n\n & ~ &__error {\n border: solid var(--color-red-700);\n\n & > svg {\n border: solid var(--color-red-700);\n }\n }\n\n &-group--horizontal {\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-label {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-items);\n\n .af-checkbox-card-content {\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-content-description {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-item);\n text-align: left;\n }\n }\n }\n }\n\n &-group--vertical {\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-label {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-items);\n justify-content: var(--checkbox-card-justify-content);\n\n .af-checkbox-card-content {\n width: 100%;\n flex: 1;\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-content-description {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-item);\n text-align: center;\n }\n }\n }\n }\n\n &-group--vertical,\n &-group--horizontal {\n display: flex;\n align-items: stretch;\n gap: 1rem;\n font-family: var(--checkbox-card-font-family);\n font-style: normal;\n font-weight: 400;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-label[aria-invalid=\"true\"] {\n border: solid var(--checkbox-card-border);\n background-color: var(--checkbox-card-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;\n }\n\n .af-checkbox-card-label {\n display: flex;\n padding: 1rem;\n border: solid var(--checkbox-card-border);\n border-radius: var(--checkbox-card-border-radius);\n flex: 1;\n align-self: stretch;\n gap: calc(12 / var(--font-size-base) * 1rem);\n cursor: pointer;\n\n .af-checkbox-card-content {\n display: flex;\n align-items: center;\n gap: calc(4 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content-description {\n display: flex;\n justify-content: center;\n font-size: 1rem;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n\n & > span:first-child {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--checkbox-card-label-text-color);\n\n @media (width < #{breakpoints.$breakpoint-sm}) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n }\n }\n\n & > span:not(:first-child) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--checkbox-card-label-text-color);\n\n @media (width < #{breakpoints.$breakpoint-sm}) {\n font-size: calc(14 / var(--font-size-base) * 1rem);\n font-weight: 400;\n }\n }\n }\n }\n\n &:hover {\n border: solid var(--checkbox-card-border);\n background-color: var(--checkbox-card-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;\n }\n }\n\n .af-checkbox-card-label:has(input:checked) {\n border: solid var(--checkbox-card-border);\n background-color: var(--checkbox-card-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;\n }\n }\n}\n","@use \"CheckboxCardCommon\";\n\n.af-checkbox-card {\n &__label-container {\n --font-size-base: calc(16 / var(--font-size-base) * 1rem);\n }\n\n &__label {\n --checkbox-card-color: var(--color-gray-900);\n }\n\n &__description {\n --checkbox-card-color: var(--color-gray-700);\n }\n\n &__content {\n & > svg {\n --checkbox-card-color: var(--color-axa);\n --checkbox-card-fill: var(--color-axa);\n }\n\n &-description {\n & > span:first-child {\n --checkbox-card-color: var(--color-gray-900);\n }\n\n & > span:not(:first-child) {\n --checkbox-card-color: var(--color-gray-700);\n }\n }\n }\n\n & ~ &__error {\n --error-box-color: var(--color-red-700);\n\n & > svg {\n --error-box-color: var(--color-red-700);\n --error-box-fill: var(--color-red-700);\n }\n }\n\n &-group--horizontal {\n --checkbox-card-flex-direction: column;\n\n .af-checkbox-card-label {\n --checkbox-card-flex-direction: row;\n --checkbox-card-align-items: center;\n\n .af-checkbox-card-content {\n --checkbox-card-flex-direction: row;\n --checkbox-card-margin-left: calc(12 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content-description {\n --checkbox-card-flex-direction: column;\n --checkbox-card-align-item: flex-start;\n }\n }\n }\n }\n\n &-group--vertical {\n --checkbox-card-flex-direction: row;\n\n .af-checkbox-card-label {\n --checkbox-card-flex-direction: row;\n --checkbox-card-align-items: flex-start;\n --checkbox-card-justify-content: flex-start;\n\n .af-checkbox {\n position: absolute;\n }\n\n .af-checkbox-card-content {\n --checkbox-card-flex-direction: column;\n --checkbox-card-margin-left: calc(2 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content-description {\n --checkbox-card-flex-direction: column;\n --checkbox-card-align-item: center;\n }\n }\n }\n }\n\n &-group--vertical,\n &-group--horizontal {\n .af-checkbox-card-label[aria-invalid=\"true\"] {\n --checkbox-card-background-color: var(--color-white);\n --checkbox-card-border: 2px var(--color-red-700);\n --checkbox-card-shadow-color: var(--color-red-700);\n }\n\n .af-checkbox-card-label {\n --checkbox-card-border: 2px var(--color-gray-700);\n --checkbox-card-border-radius: calc(6 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content {\n .af-checkbox-card-content-description {\n & > span:first-child {\n --checkbox-card-label-text-color: var(--color-black);\n }\n }\n }\n\n &:hover {\n --checkbox-card-border: 2px var(--color-axa);\n --checkbox-card-shadow-color: var(--color-axa);\n --checkbox-card-background-color: var(--color-white);\n }\n }\n\n .af-checkbox-card-label:has(input:checked) {\n --checkbox-card-border: 2px var(--color-axa);\n --checkbox-card-shadow-color: var(--color-axa);\n --checkbox-card-background-color: var(--color-blue-2);\n }\n }\n}\n","@use \"CheckboxCardCommon\";\n\n.af-checkbox-card {\n &__label-container {\n --font-size-base: calc(16 / var(--font-size-base) * 1rem);\n }\n\n &__label {\n --checkbox-card-color: var(--color-gray-900);\n }\n\n &__description {\n --checkbox-card-color: var(--color-gray-700);\n }\n\n &__content {\n & > svg {\n --checkbox-card-color: var(--color-axa);\n --checkbox-card-fill: var(--color-axa);\n }\n\n &-description {\n & > span:first-child {\n --checkbox-card-color: var(--color-gray-900);\n }\n\n & > span:not(:first-child) {\n --checkbox-card-color: var(--color-gray-700);\n }\n }\n }\n\n & ~ &__error {\n --error-box-color: var(--color-red-700);\n\n & > svg {\n --error-box-color: var(--color-red-700);\n --error-box-fill: var(--color-red-700);\n }\n }\n\n &-group--horizontal {\n --checkbox-card-flex-direction: column;\n\n .af-checkbox-card-label {\n --checkbox-card-flex-direction: row;\n --checkbox-card-align-items: center;\n\n .af-checkbox-card-content {\n --checkbox-card-flex-direction: row;\n --checkbox-card-margin-left: calc(12 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content-description {\n --checkbox-card-flex-direction: column;\n --checkbox-card-align-item: flex-start;\n }\n }\n }\n }\n\n &-group--vertical {\n --checkbox-card-flex-direction: row;\n\n .af-checkbox-card-label {\n --checkbox-card-flex-direction: row;\n --checkbox-card-align-items: flex-start;\n --checkbox-card-justify-content: flex-start;\n\n .af-checkbox {\n position: absolute;\n }\n\n .af-checkbox-card-content {\n --checkbox-card-flex-direction: column;\n --checkbox-card-margin-left: calc(2 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content-description {\n --checkbox-card-flex-direction: column;\n --checkbox-card-align-item: center;\n }\n }\n }\n }\n\n &-group--vertical,\n &-group--horizontal {\n .af-checkbox-card-label[aria-invalid=\"true\"] {\n --checkbox-card-background-color: var(--color-white);\n --checkbox-card-border: 2px var(--color-red-700);\n --checkbox-card-shadow-color: var(--color-red-700);\n }\n\n .af-checkbox-card-label {\n --checkbox-card-border: 2px var(--color-gray-700);\n --checkbox-card-border-radius: calc(6 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content {\n .af-checkbox-card-content-description {\n & > span:first-child {\n --checkbox-card-label-text-color: var(--color-black);\n }\n }\n }\n\n &:hover {\n --checkbox-card-border: 2px var(--color-axa);\n --checkbox-card-shadow-color: var(--color-axa);\n --checkbox-card-background-color: var(--color-white);\n }\n }\n\n .af-checkbox-card-label:has(input:checked) {\n --checkbox-card-border: 2px var(--color-axa);\n --checkbox-card-shadow-color: var(--color-axa);\n --checkbox-card-background-color: var(--color-blue-2);\n }\n }\n}\n"]}
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
&-group--
|
|
42
|
+
&-group--horizontal {
|
|
43
43
|
--checkbox-card-flex-direction: column;
|
|
44
44
|
|
|
45
45
|
.af-checkbox-card-label {
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
}
|
|
59
59
|
}
|
|
60
60
|
|
|
61
|
-
&-group--
|
|
61
|
+
&-group--vertical {
|
|
62
62
|
--checkbox-card-flex-direction: row;
|
|
63
63
|
|
|
64
64
|
.af-checkbox-card-label {
|
|
@@ -66,6 +66,10 @@
|
|
|
66
66
|
--checkbox-card-align-items: flex-start;
|
|
67
67
|
--checkbox-card-justify-content: flex-start;
|
|
68
68
|
|
|
69
|
+
.af-checkbox {
|
|
70
|
+
position: absolute;
|
|
71
|
+
}
|
|
72
|
+
|
|
69
73
|
.af-checkbox-card-content {
|
|
70
74
|
--checkbox-card-flex-direction: column;
|
|
71
75
|
--checkbox-card-margin-left: calc(2 / var(--font-size-base) * 1rem);
|
|
@@ -1 +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:
|
|
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:var(--timeline-vertical-padding);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-padding:calc(24/var(--font-size-base)*1rem);--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)}}
|
|
@@ -1 +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,
|
|
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,wCAAA,CAGA,2CCEF,CDCE,8BACE,YAAA,CACA,eCCJ,CDEE,6BAKE,0CAAA,CAHA,kDAAA,CACA,eAAA,CACA,gBAAA,CAHA,QCIJ,CDGE,mCAKE,gDAAA,CAHA,wDAAA,CCDJ,eAAA,CDGI,gBAAA,CAHA,QCGJ,CCtBA,sBACE,+DAAA,CACA,kDAAA,CACA,uEAAA,CACA,uDAAA,CACA,6EAAA,CAGA,yCAAA,CACA,mDDyBF,CCvBE,wBAXF,sBAYI,uEAAA,CAGA,6ED4BF,CACF","file":"TimelineVerticalApollo.css","sourcesContent":[".af-timeline-vertical {\n display: grid;\n padding: var(--timeline-vertical-padding);\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-padding: calc(24 / var(--font-size-base) * 1rem);\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-padding: calc(24 / var(--font-size-base) * 1rem);\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"]}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
@use "./TimelineVerticalCommon";
|
|
3
3
|
|
|
4
4
|
.af-timeline-vertical {
|
|
5
|
+
--timeline-vertical-padding: calc(24 / var(--font-size-base) * 1rem);
|
|
5
6
|
--timeline-vertical-title-color: var(--neutral-100);
|
|
6
7
|
--timeline-vertical-title-font-size: calc(16 / var(--font-size-base) * 1rem);
|
|
7
8
|
--timeline-vertical-description-color: var(--neutral-80);
|
|
@@ -1 +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:
|
|
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:var(--timeline-vertical-padding);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}
|
|
@@ -1 +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,
|
|
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,wCAAA,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: var(--timeline-vertical-padding);\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: var(--timeline-vertical-padding);\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"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
.af-timeline-vertical {
|
|
2
2
|
display: grid;
|
|
3
|
-
padding:
|
|
3
|
+
padding: var(--timeline-vertical-padding);
|
|
4
4
|
border: 1px solid var(--timeline-vertical-border-color);
|
|
5
5
|
border-radius: var(--radius-8);
|
|
6
6
|
row-gap: calc(16 / var(--font-size-base) * 1rem);
|
|
@@ -1 +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:
|
|
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:var(--timeline-vertical-padding);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-padding:calc(16/var(--font-size-base)*1rem);--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-padding:calc(24/var(--font-size-base)*1rem);--timeline-vertical-title-font-size:calc(18/var(--font-size-base)*1rem);--timeline-vertical-description-font-size:calc(18/var(--font-size-base)*1rem)}}
|
|
@@ -1 +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,
|
|
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,wCAAA,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,CCDJ,gBAAA,CDDI,QCGJ,CCtBA,sBACE,+DAAA,CACA,qDAAA,CACA,uEAAA,CACA,2DAAA,CACA,6EAAA,CAGA,+CAAA,CACA,sDDyBF,CCvBE,wBAXF,sBAYI,+DAAA,CACA,uEAAA,CAGA,6ED4BF,CACF","file":"TimelineVerticalLF.css","sourcesContent":[".af-timeline-vertical {\n display: grid;\n padding: var(--timeline-vertical-padding);\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-padding: calc(16 / var(--font-size-base) * 1rem);\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-padding: calc(24 / var(--font-size-base) * 1rem);\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-padding: calc(16 / var(--font-size-base) * 1rem);\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-padding: calc(24 / var(--font-size-base) * 1rem);\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"]}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
@use "./TimelineVerticalCommon";
|
|
3
3
|
|
|
4
4
|
.af-timeline-vertical {
|
|
5
|
+
--timeline-vertical-padding: calc(16 / var(--font-size-base) * 1rem);
|
|
5
6
|
--timeline-vertical-title-color: var(--color-gray-900);
|
|
6
7
|
--timeline-vertical-title-font-size: calc(16 / var(--font-size-base) * 1rem);
|
|
7
8
|
--timeline-vertical-description-color: var(--color-gray-700);
|
|
@@ -12,6 +13,7 @@
|
|
|
12
13
|
--timeline-vertical-border-color: var(--color-blue-400);
|
|
13
14
|
|
|
14
15
|
@media (width > #{breakpoints.$breakpoint-md}) {
|
|
16
|
+
--timeline-vertical-padding: calc(24 / var(--font-size-base) * 1rem);
|
|
15
17
|
--timeline-vertical-title-font-size: calc(
|
|
16
18
|
18 / var(--font-size-base) * 1rem
|
|
17
19
|
);
|