@axa-fr/design-system-apollo-css 1.0.5-alpha.411 → 1.0.5-alpha.415
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/CardCheckbox/CardCheckboxApollo.css +1 -1
- package/dist/Form/Checkbox/CardCheckbox/CardCheckboxApollo.css.map +1 -1
- package/dist/Form/Checkbox/CardCheckbox/CardCheckboxApollo.scss +1 -98
- package/dist/Form/Checkbox/CardCheckbox/CardCheckboxCommon.css +1 -1
- package/dist/Form/Checkbox/CardCheckbox/CardCheckboxCommon.css.map +1 -1
- package/dist/Form/Checkbox/CardCheckbox/CardCheckboxCommon.scss +23 -156
- package/dist/Form/Checkbox/CardCheckbox/CardCheckboxLF.css +1 -1
- package/dist/Form/Checkbox/CardCheckbox/CardCheckboxLF.css.map +1 -1
- package/dist/Form/Checkbox/CardCheckbox/CardCheckboxLF.scss +1 -86
- package/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionApollo.css +1 -0
- package/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionApollo.css.map +1 -0
- package/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionApollo.scss +39 -0
- package/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionCommon.css +1 -0
- package/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionCommon.css.map +1 -0
- package/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionCommon.scss +87 -0
- package/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionLF.css +1 -0
- package/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionLF.css.map +1 -0
- package/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionLF.scss +41 -0
- package/dist/Grid/DebugGrid.css +1 -1
- package/dist/Grid/DebugGrid.css.map +1 -1
- package/dist/Grid/DebugGrid.scss +1 -1
- package/dist/apollo.css +1 -1
- package/dist/apollo.css.map +1 -1
- package/dist/apollo.scss +1 -0
- package/dist/look-and-feel.css +2 -2
- package/dist/look-and-feel.css.map +1 -1
- package/dist/look-and-feel.scss +1 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-card-
|
|
1
|
+
.af-card-checkbox{display:flex;flex-direction:column;gap:calc(8/var(--font-size-base)*1rem)}.af-card-checkbox__legend{display:contents}.af-card-checkbox__legend>p{margin:0}.af-card-checkbox__label{color:var(--card-checkbox-color);display:inline-flex;font-size:calc(18/var(--font-size-base)*1rem);font-weight:600;gap:calc(4/var(--font-size-base)*1rem)}.af-card-checkbox__description{color:var(--card-checkbox-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-card-checkbox__description{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(18/var(--font-size-base)*1rem)}}.af-card-checkbox__options{display:flex;gap:1rem}.af-card-checkbox__options>*{flex-basis:0;flex-grow:1}.af-card-checkbox__options--vertical{flex-direction:row}.af-card-checkbox__options--horizontal{flex-direction:column}.af-card-checkbox__label{--card-checkbox-color:var(--neutral-100)}.af-card-checkbox__description{--card-checkbox-color:var(--neutral-80)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxCommon.scss","../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxApollo.scss","../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxApollo.scss%23sass"],"names":[],"mappings":"AAGE,6BCFF,YAAA,CDII,qBAAA,CCFJ,QACA,CDKE,0BAME,gCAAA,CALA,YAAA,CAGA,6CAAA,CACA,eAAA,CAHA,mDAAA,CACA,0CCAJ,CDKI,4BACE,QCHN,CDOE,+BAIE,gCAAA,CAHA,6CAAA,CACA,eAAA,CACA,+CCJJ,CDOI,uBANF,+BAOI,6CAAA,CACA,+CCJJ,CACF,CDOE,2BACE,YAAA,CACA,qBAAA,CACA,0CCLJ,CDQE,wBAIE,mBAAA,CAHA,YAAA,CAKA,4CAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,+CAAA,CACA,eAAA,CARA,QAAA,CACA,SCCJ,CDQI,oCACE,kDCNN,CDQM,4DAEE,4CAAA,CADA,kDAAA,CAEA,uCCNR,CDQQ,sFACE,kDCNV,CDQU,4HAEE,2CAAA,CADA,kDAAA,CAEA,eCNZ,CDYI,kCACE,kDCVN,CDYM,oCACE,YAAA,CACA,WCVR,CDaM,0DAGE,4CAAA,CAGA,sDAAA,CAJA,kDAAA,CAGA,uCAAA,CAJA,WAAA,CAGA,oDCTR,CDaQ,oFAEE,QAAA,CACA,kDAAA,CAFA,UCTV,CDaU,0HAEE,2CAAA,CADA,kDAAA,CAEA,iBCXZ,CDiBI,gDACE,gCAAA,CAQA,kBAAA,CAJA,gFAAA,CAEA,gDAAA,CAYA,cAAA,CAhBA,YAAA,CAKA,QAAA,CAEA,mFAAA,CAEA,gGAAA,CARA,YCTN,CD0BM,0EAEE,kBAAA,CADA,YAAA,CAEA,sCCxBR,CD0BQ,gHACE,YAAA,CCtBV,cAAA,CDwBU,oFAAA,CADA,sBAAA,CAMA,+CC3BV,CD6BU,iIAGE,2CAAA,CAFA,6CAAA,CACA,eC1BZ,CD6BY,uBALF,iIAMI,6CAAA,CACA,eC1BZ,CACF,CD6BU,uIAGE,2CAAA,CAFA,6CAAA,CACA,eC1BZ,CD6BY,uBALF,uIAMI,6CAAA,CACA,eC1BZ,CACF,CD+BM,6TAKE,iCCjCR,CDqCQ,wTAGE,iCCrCV,CD0CQ,0HACE,eCxCV,CCxIE,mCACE,oDD2IJ,CCxIE,0BACE,wCD0IJ,CCxII,wCACE,YD0IN,CCtIE,+BACE,uCDwIJ,CCpII,oCACE,qCDsIN,CCpIM,4DACE,kCDsIR,CCpIQ,sFACE,kCAAA,CACA,+DDsIV,CCpIU,4HACE,qCAAA,CACA,qCDsIZ,CCpIY,6IACE,oDDsId,CC/HI,kCACE,kCDiIN,CC/HM,0DACE,6CDiIR,CC/HQ,oFACE,qCAAA,CACA,8DDiIV,CC/HU,0HACE,qCAAA,CACA,iCAAA,CACA,yCDiIZ,CC3HI,gDACE,+CAAA,CACA,gEAAA,CACA,kCAAA,CACA,+DAAA,CACA,6CD6HN,CC1HQ,iIACE,oDD4HV,CCzHQ,uIACE,kDD2HV,CCvHM,sDACE,gDAAA,CACA,6CDyHR,CCvHQ,6GACE,oDDyHV,CCrHM,mEACE,gDAAA,CACA,kDDuHR,CCrHQ,0HACE,oDDuHV,CCnHM,4FACE,iDAAA,CACA,iDDqHR,CCnHQ,mJACE,kDDqHV","file":"CardCheckboxApollo.css","sourcesContent":["@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-checkbox {\n &__container {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n }\n\n &__legend {\n display: grid;\n margin-block-end: calc(4 / var(--font-size-base) * 1rem);\n row-gap: calc(4 / var(--font-size-base) * 1rem);\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 600;\n color: var(--card-checkbox-color);\n\n & > p {\n margin: 0;\n }\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(--card-checkbox-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 &__choices {\n display: flex;\n flex-direction: column;\n row-gap: calc(8 / var(--font-size-base) * 1rem);\n }\n\n &-group {\n display: flex;\n margin: 0;\n padding: 0;\n align-items: stretch;\n gap: 1rem;\n font-family: var(--card-checkbox-font-family);\n font-style: normal;\n font-weight: 400;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n list-style: none;\n\n &--horizontal {\n flex-direction: var(--card-checkbox-flex-direction);\n\n .af-card-checkbox-label {\n flex-direction: var(--card-checkbox-flex-direction);\n align-items: var(--card-checkbox-align-items);\n gap: calc(16 / var(--font-size-base) * 1rem);\n\n .af-card-checkbox-content {\n flex-direction: var(--card-checkbox-flex-direction);\n\n .af-card-checkbox-content-description {\n flex-direction: var(--card-checkbox-flex-direction);\n align-items: var(--card-checkbox-align-item);\n text-align: left;\n }\n }\n }\n }\n\n &--vertical {\n flex-direction: var(--card-checkbox-flex-direction);\n\n > * {\n flex-basis: 0;\n flex-grow: 1;\n }\n\n .af-card-checkbox-label {\n height: 100%;\n flex-direction: var(--card-checkbox-flex-direction);\n align-items: var(--card-checkbox-align-items);\n justify-content: var(--card-checkbox-justify-content);\n gap: calc(12 / var(--font-size-base) * 1rem);\n background-color: var(--card-checkbox-background-color);\n\n .af-card-checkbox-content {\n width: 100%;\n flex: 1;\n flex-direction: var(--card-checkbox-flex-direction);\n\n .af-card-checkbox-content-description {\n flex-direction: var(--card-checkbox-flex-direction);\n align-items: var(--card-checkbox-align-item);\n text-align: center;\n }\n }\n }\n }\n\n .af-card-checkbox-label {\n --card-checkbox-border-width: 1px;\n\n display: flex;\n padding: 1rem;\n border: var(--card-checkbox-border-width) solid\n var(--card-checkbox-border-color);\n border-radius: var(--card-checkbox-border-radius);\n flex: 1;\n align-self: stretch;\n outline: var(--card-checkbox-outline-width) solid\n var(--card-checkbox-outline-color);\n outline-offset: calc(\n -1 *\n calc(\n var(--card-checkbox-border-width) +\n var(--card-checkbox-outline-width)\n )\n );\n cursor: pointer;\n\n .af-card-checkbox-content {\n display: flex;\n align-items: center;\n gap: calc(8 / var(--font-size-base) * 1rem);\n\n .af-card-checkbox-content-description {\n display: flex;\n justify-content: center;\n gap: calc(\n var(--card-checkbox-content-description-gap, 4) /\n var(--font-size-base) * 1rem\n );\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(--card-checkbox-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(--card-checkbox-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 &:focus-visible,\n &:focus-within,\n &:has([aria-invalid=\"true\"]),\n &:has(input:checked) {\n --card-checkbox-outline-width: 1px;\n }\n\n &:not(:has(:checked)):has([aria-invalid=\"true\"]) {\n &:hover,\n &:focus-visible,\n &:focus-within {\n --card-checkbox-outline-width: 2px;\n }\n }\n\n &:has(input:checked) {\n .af-card-checkbox-content-description > span:first-child {\n font-weight: 600;\n }\n }\n }\n }\n}\n","@use \"CardCheckboxCommon\";\n@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-checkbox {\n &__label-container {\n --font-size-base: calc(16 / var(--font-size-base) * 1rem);\n }\n\n &__legend {\n --card-checkbox-color: var(--neutral-100);\n\n [aria-hidden] {\n display: none;\n }\n }\n\n &__description {\n --card-checkbox-color: var(--neutral-80);\n }\n\n &-group {\n &--horizontal {\n --card-checkbox-flex-direction: column;\n\n .af-card-checkbox-label {\n --card-checkbox-flex-direction: row;\n\n .af-card-checkbox-content {\n --card-checkbox-flex-direction: row;\n --card-checkbox-margin-left: calc(12 / var(--font-size-base) * 1rem);\n\n .af-card-checkbox-content-description {\n --card-checkbox-flex-direction: column;\n --card-checkbox-align-item: flex-start;\n\n & > span:first-child {\n --card-checkbox-label-text-color: var(--axa-blue-100);\n }\n }\n }\n }\n }\n\n &--vertical {\n --card-checkbox-flex-direction: row;\n\n .af-card-checkbox-label {\n --card-checkbox-flex-direction: column-reverse;\n\n .af-card-checkbox-content {\n --card-checkbox-flex-direction: column;\n --card-checkbox-margin-left: calc(2 / var(--font-size-base) * 1rem);\n\n .af-card-checkbox-content-description {\n --card-checkbox-flex-direction: column;\n --card-checkbox-align-item: center;\n --card-checkbox-content-description-gap: 8;\n }\n }\n }\n }\n\n .af-card-checkbox-label {\n --card-checkbox-border-color: var(--axa-blue-65);\n --card-checkbox-border-radius: calc(8 / var(--font-size-base) * 1rem);\n --card-checkbox-align-items: center;\n --card-checkbox-outline-color: var(--card-checkbox-border-color);\n --card-checkbox-background-color: var(--white);\n\n .af-card-checkbox-content .af-card-checkbox-content-description > span {\n &:first-child {\n --card-checkbox-label-text-color: var(--axa-blue-100);\n }\n\n &:not(:first-child) {\n --card-checkbox-label-text-color: var(--neutral-80);\n }\n }\n\n &:hover {\n --card-checkbox-border-color: var(--axa-blue-100);\n --card-checkbox-background-color: var(--white);\n\n .af-card-checkbox-content-description > span:first-child {\n --card-checkbox-label-text-color: var(--axa-blue-100);\n }\n }\n\n &:has(input:checked) {\n --card-checkbox-border-color: var(--axa-blue-100);\n --card-checkbox-background-color: var(--axa-blue-4);\n\n .af-card-checkbox-content-description > span:first-child {\n --card-checkbox-label-text-color: var(--axa-blue-100);\n }\n }\n\n &[aria-invalid=\"true\"]:not(:has(input:checked)) {\n --card-checkbox-background-color: var(--axa-red-4);\n --card-checkbox-border-color: var(--red-alert-100);\n\n .af-card-checkbox-content-description > span:first-child {\n --card-checkbox-label-text-color: var(--neutral-80);\n }\n }\n }\n }\n}\n","@use \"CardCheckboxCommon\";\n@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-checkbox {\n &__label-container {\n --font-size-base: calc(16 / var(--font-size-base) * 1rem);\n }\n\n &__legend {\n --card-checkbox-color: var(--neutral-100);\n\n [aria-hidden] {\n display: none;\n }\n }\n\n &__description {\n --card-checkbox-color: var(--neutral-80);\n }\n\n &-group {\n &--horizontal {\n --card-checkbox-flex-direction: column;\n\n .af-card-checkbox-label {\n --card-checkbox-flex-direction: row;\n\n .af-card-checkbox-content {\n --card-checkbox-flex-direction: row;\n --card-checkbox-margin-left: calc(12 / var(--font-size-base) * 1rem);\n\n .af-card-checkbox-content-description {\n --card-checkbox-flex-direction: column;\n --card-checkbox-align-item: flex-start;\n\n & > span:first-child {\n --card-checkbox-label-text-color: var(--axa-blue-100);\n }\n }\n }\n }\n }\n\n &--vertical {\n --card-checkbox-flex-direction: row;\n\n .af-card-checkbox-label {\n --card-checkbox-flex-direction: column-reverse;\n\n .af-card-checkbox-content {\n --card-checkbox-flex-direction: column;\n --card-checkbox-margin-left: calc(2 / var(--font-size-base) * 1rem);\n\n .af-card-checkbox-content-description {\n --card-checkbox-flex-direction: column;\n --card-checkbox-align-item: center;\n --card-checkbox-content-description-gap: 8;\n }\n }\n }\n }\n\n .af-card-checkbox-label {\n --card-checkbox-border-color: var(--axa-blue-65);\n --card-checkbox-border-radius: calc(8 / var(--font-size-base) * 1rem);\n --card-checkbox-align-items: center;\n --card-checkbox-outline-color: var(--card-checkbox-border-color);\n --card-checkbox-background-color: var(--white);\n\n .af-card-checkbox-content .af-card-checkbox-content-description > span {\n &:first-child {\n --card-checkbox-label-text-color: var(--axa-blue-100);\n }\n\n &:not(:first-child) {\n --card-checkbox-label-text-color: var(--neutral-80);\n }\n }\n\n &:hover {\n --card-checkbox-border-color: var(--axa-blue-100);\n --card-checkbox-background-color: var(--white);\n\n .af-card-checkbox-content-description > span:first-child {\n --card-checkbox-label-text-color: var(--axa-blue-100);\n }\n }\n\n &:has(input:checked) {\n --card-checkbox-border-color: var(--axa-blue-100);\n --card-checkbox-background-color: var(--axa-blue-4);\n\n .af-card-checkbox-content-description > span:first-child {\n --card-checkbox-label-text-color: var(--axa-blue-100);\n }\n }\n\n &[aria-invalid=\"true\"]:not(:has(input:checked)) {\n --card-checkbox-background-color: var(--axa-red-4);\n --card-checkbox-border-color: var(--red-alert-100);\n\n .af-card-checkbox-content-description > span:first-child {\n --card-checkbox-label-text-color: var(--neutral-80);\n }\n }\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxCommon.scss","../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxApollo.scss","../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxApollo.scss%23sass"],"names":[],"mappings":"AAEA,kBACE,YAAA,CCDF,qBAAA,CDGE,sCCDF,CDGE,0BACE,gBCDJ,CDGI,4BACE,QCDN,CDKE,yBAKE,gCAAA,CAJA,mBAAA,CAEA,6CAAA,CACA,eAAA,CAFA,sCCAJ,CDME,+BAIE,gCAAA,CAHA,6CAAA,CACA,eAAA,CACA,+CCHJ,CDMI,uBANF,+BAOI,6CAAA,CACA,+CCHJ,CACF,CDME,2BACE,YAAA,CACA,QCJJ,CDMI,6BACE,YAAA,CACA,WCJN,CDQE,qCACE,kBCNJ,CDSE,uCACE,qBCPJ,CCxCE,yBACE,wCD2CJ,CCxCE,+BACE,uCD0CJ","file":"CardCheckboxApollo.css","sourcesContent":["@use \"../../../common/breakpoints\";\n\n.af-card-checkbox {\n display: flex;\n flex-direction: column;\n gap: calc(8 / var(--font-size-base) * 1rem);\n\n &__legend {\n display: contents;\n\n & > p {\n margin: 0;\n }\n }\n\n &__label {\n display: inline-flex;\n gap: calc(4 / var(--font-size-base) * 1rem);\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 600;\n color: var(--card-checkbox-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(--card-checkbox-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 &__options {\n display: flex;\n gap: 1rem;\n\n > * {\n flex-basis: 0;\n flex-grow: 1;\n }\n }\n\n &__options--vertical {\n flex-direction: row;\n }\n\n &__options--horizontal {\n flex-direction: column;\n }\n}\n","@use \"CardCheckboxCommon\";\n\n.af-card-checkbox {\n &__label {\n --card-checkbox-color: var(--neutral-100);\n }\n\n &__description {\n --card-checkbox-color: var(--neutral-80);\n }\n}\n","@use \"CardCheckboxCommon\";\n\n.af-card-checkbox {\n &__label {\n --card-checkbox-color: var(--neutral-100);\n }\n\n &__description {\n --card-checkbox-color: var(--neutral-80);\n }\n}\n"]}
|
|
@@ -1,108 +1,11 @@
|
|
|
1
1
|
@use "CardCheckboxCommon";
|
|
2
|
-
@use "../../../common/breakpoints" as breakpoints;
|
|
3
2
|
|
|
4
3
|
.af-card-checkbox {
|
|
5
|
-
&__label
|
|
6
|
-
--font-size-base: calc(16 / var(--font-size-base) * 1rem);
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
&__legend {
|
|
4
|
+
&__label {
|
|
10
5
|
--card-checkbox-color: var(--neutral-100);
|
|
11
|
-
|
|
12
|
-
[aria-hidden] {
|
|
13
|
-
display: none;
|
|
14
|
-
}
|
|
15
6
|
}
|
|
16
7
|
|
|
17
8
|
&__description {
|
|
18
9
|
--card-checkbox-color: var(--neutral-80);
|
|
19
10
|
}
|
|
20
|
-
|
|
21
|
-
&-group {
|
|
22
|
-
&--horizontal {
|
|
23
|
-
--card-checkbox-flex-direction: column;
|
|
24
|
-
|
|
25
|
-
.af-card-checkbox-label {
|
|
26
|
-
--card-checkbox-flex-direction: row;
|
|
27
|
-
|
|
28
|
-
.af-card-checkbox-content {
|
|
29
|
-
--card-checkbox-flex-direction: row;
|
|
30
|
-
--card-checkbox-margin-left: calc(12 / var(--font-size-base) * 1rem);
|
|
31
|
-
|
|
32
|
-
.af-card-checkbox-content-description {
|
|
33
|
-
--card-checkbox-flex-direction: column;
|
|
34
|
-
--card-checkbox-align-item: flex-start;
|
|
35
|
-
|
|
36
|
-
& > span:first-child {
|
|
37
|
-
--card-checkbox-label-text-color: var(--axa-blue-100);
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
&--vertical {
|
|
45
|
-
--card-checkbox-flex-direction: row;
|
|
46
|
-
|
|
47
|
-
.af-card-checkbox-label {
|
|
48
|
-
--card-checkbox-flex-direction: column-reverse;
|
|
49
|
-
|
|
50
|
-
.af-card-checkbox-content {
|
|
51
|
-
--card-checkbox-flex-direction: column;
|
|
52
|
-
--card-checkbox-margin-left: calc(2 / var(--font-size-base) * 1rem);
|
|
53
|
-
|
|
54
|
-
.af-card-checkbox-content-description {
|
|
55
|
-
--card-checkbox-flex-direction: column;
|
|
56
|
-
--card-checkbox-align-item: center;
|
|
57
|
-
--card-checkbox-content-description-gap: 8;
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.af-card-checkbox-label {
|
|
64
|
-
--card-checkbox-border-color: var(--axa-blue-65);
|
|
65
|
-
--card-checkbox-border-radius: calc(8 / var(--font-size-base) * 1rem);
|
|
66
|
-
--card-checkbox-align-items: center;
|
|
67
|
-
--card-checkbox-outline-color: var(--card-checkbox-border-color);
|
|
68
|
-
--card-checkbox-background-color: var(--white);
|
|
69
|
-
|
|
70
|
-
.af-card-checkbox-content .af-card-checkbox-content-description > span {
|
|
71
|
-
&:first-child {
|
|
72
|
-
--card-checkbox-label-text-color: var(--axa-blue-100);
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
&:not(:first-child) {
|
|
76
|
-
--card-checkbox-label-text-color: var(--neutral-80);
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
&:hover {
|
|
81
|
-
--card-checkbox-border-color: var(--axa-blue-100);
|
|
82
|
-
--card-checkbox-background-color: var(--white);
|
|
83
|
-
|
|
84
|
-
.af-card-checkbox-content-description > span:first-child {
|
|
85
|
-
--card-checkbox-label-text-color: var(--axa-blue-100);
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
&:has(input:checked) {
|
|
90
|
-
--card-checkbox-border-color: var(--axa-blue-100);
|
|
91
|
-
--card-checkbox-background-color: var(--axa-blue-4);
|
|
92
|
-
|
|
93
|
-
.af-card-checkbox-content-description > span:first-child {
|
|
94
|
-
--card-checkbox-label-text-color: var(--axa-blue-100);
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
&[aria-invalid="true"]:not(:has(input:checked)) {
|
|
99
|
-
--card-checkbox-background-color: var(--axa-red-4);
|
|
100
|
-
--card-checkbox-border-color: var(--red-alert-100);
|
|
101
|
-
|
|
102
|
-
.af-card-checkbox-content-description > span:first-child {
|
|
103
|
-
--card-checkbox-label-text-color: var(--neutral-80);
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
11
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-card-
|
|
1
|
+
.af-card-checkbox{display:flex;flex-direction:column;gap:calc(8/var(--font-size-base)*1rem)}.af-card-checkbox__legend{display:contents}.af-card-checkbox__legend>p{margin:0}.af-card-checkbox__label{color:var(--card-checkbox-color);display:inline-flex;font-size:calc(18/var(--font-size-base)*1rem);font-weight:600;gap:calc(4/var(--font-size-base)*1rem)}.af-card-checkbox__description{color:var(--card-checkbox-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-card-checkbox__description{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(18/var(--font-size-base)*1rem)}}.af-card-checkbox__options{display:flex;gap:1rem}.af-card-checkbox__options>*{flex-basis:0;flex-grow:1}.af-card-checkbox__options--vertical{flex-direction:row}.af-card-checkbox__options--horizontal{flex-direction:column}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxCommon.scss%23sass","../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxCommon.scss"],"names":[],"mappings":"AAGE,6BACE,YAAA,CCFJ,qBAAA,CDII,QCFJ,CDKE,0BAME,gCAAA,CALA,YAAA,CAGA,6CAAA,CACA,eAAA,CAHA,mDAAA,CACA,0CCAJ,CDKI,4BACE,QCHN,CDOE,+BAIE,gCAAA,CAHA,6CAAA,CACA,eAAA,CACA,+CCJJ,CDOI,uBANF,+BAOI,6CAAA,CACA,+CCJJ,CACF,CDOE,2BACE,YAAA,CACA,qBAAA,CACA,0CCLJ,CDQE,wBAIE,mBAAA,CAHA,YAAA,CAKA,4CAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,+CAAA,CACA,eAAA,CARA,QAAA,CACA,SCCJ,CDQI,oCACE,kDCNN,CDQM,4DAEE,4CAAA,CADA,kDAAA,CAEA,uCCNR,CDQQ,sFACE,kDCNV,CDQU,4HAEE,2CAAA,CADA,kDAAA,CAEA,eCNZ,CDYI,kCACE,kDCVN,CDYM,oCACE,YAAA,CACA,WCVR,CDaM,0DAGE,4CAAA,CAGA,sDAAA,CAJA,kDAAA,CAGA,uCAAA,CAJA,WAAA,CAGA,oDCTR,CDaQ,oFAEE,QAAA,CACA,kDAAA,CAFA,UCTV,CDaU,0HAEE,2CAAA,CADA,kDAAA,CAEA,iBCXZ,CDiBI,gDACE,gCAAA,CAQA,kBAAA,CAJA,gFAAA,CAEA,gDAAA,CAYA,cAAA,CAhBA,YAAA,CAKA,QAAA,CAEA,mFAAA,CAEA,gGAAA,CARA,YCTN,CD0BM,0EAEE,kBAAA,CADA,YAAA,CAEA,sCCxBR,CD0BQ,gHACE,YAAA,CAMA,cAAA,CAJA,oFAAA,CADA,sBAAA,CAMA,+CC3BV,CD6BU,iIAGE,2CAAA,CAFA,6CAAA,CACA,eC1BZ,CD6BY,uBALF,iIAMI,6CAAA,CACA,eC1BZ,CACF,CD6BU,uIAGE,2CAAA,CAFA,6CAAA,CACA,eC1BZ,CD6BY,uBALF,uIAMI,6CAAA,CACA,eC1BZ,CACF,CD+BM,6TAKE,iCCjCR,CDqCQ,wTAGE,iCCrCV,CD0CQ,0HACE,eCxCV","file":"CardCheckboxCommon.css","sourcesContent":["@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-checkbox {\n &__container {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n }\n\n &__legend {\n display: grid;\n margin-block-end: calc(4 / var(--font-size-base) * 1rem);\n row-gap: calc(4 / var(--font-size-base) * 1rem);\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 600;\n color: var(--card-checkbox-color);\n\n & > p {\n margin: 0;\n }\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(--card-checkbox-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 &__choices {\n display: flex;\n flex-direction: column;\n row-gap: calc(8 / var(--font-size-base) * 1rem);\n }\n\n &-group {\n display: flex;\n margin: 0;\n padding: 0;\n align-items: stretch;\n gap: 1rem;\n font-family: var(--card-checkbox-font-family);\n font-style: normal;\n font-weight: 400;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n list-style: none;\n\n &--horizontal {\n flex-direction: var(--card-checkbox-flex-direction);\n\n .af-card-checkbox-label {\n flex-direction: var(--card-checkbox-flex-direction);\n align-items: var(--card-checkbox-align-items);\n gap: calc(16 / var(--font-size-base) * 1rem);\n\n .af-card-checkbox-content {\n flex-direction: var(--card-checkbox-flex-direction);\n\n .af-card-checkbox-content-description {\n flex-direction: var(--card-checkbox-flex-direction);\n align-items: var(--card-checkbox-align-item);\n text-align: left;\n }\n }\n }\n }\n\n &--vertical {\n flex-direction: var(--card-checkbox-flex-direction);\n\n > * {\n flex-basis: 0;\n flex-grow: 1;\n }\n\n .af-card-checkbox-label {\n height: 100%;\n flex-direction: var(--card-checkbox-flex-direction);\n align-items: var(--card-checkbox-align-items);\n justify-content: var(--card-checkbox-justify-content);\n gap: calc(12 / var(--font-size-base) * 1rem);\n background-color: var(--card-checkbox-background-color);\n\n .af-card-checkbox-content {\n width: 100%;\n flex: 1;\n flex-direction: var(--card-checkbox-flex-direction);\n\n .af-card-checkbox-content-description {\n flex-direction: var(--card-checkbox-flex-direction);\n align-items: var(--card-checkbox-align-item);\n text-align: center;\n }\n }\n }\n }\n\n .af-card-checkbox-label {\n --card-checkbox-border-width: 1px;\n\n display: flex;\n padding: 1rem;\n border: var(--card-checkbox-border-width) solid\n var(--card-checkbox-border-color);\n border-radius: var(--card-checkbox-border-radius);\n flex: 1;\n align-self: stretch;\n outline: var(--card-checkbox-outline-width) solid\n var(--card-checkbox-outline-color);\n outline-offset: calc(\n -1 *\n calc(\n var(--card-checkbox-border-width) +\n var(--card-checkbox-outline-width)\n )\n );\n cursor: pointer;\n\n .af-card-checkbox-content {\n display: flex;\n align-items: center;\n gap: calc(8 / var(--font-size-base) * 1rem);\n\n .af-card-checkbox-content-description {\n display: flex;\n justify-content: center;\n gap: calc(\n var(--card-checkbox-content-description-gap, 4) /\n var(--font-size-base) * 1rem\n );\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(--card-checkbox-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(--card-checkbox-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 &:focus-visible,\n &:focus-within,\n &:has([aria-invalid=\"true\"]),\n &:has(input:checked) {\n --card-checkbox-outline-width: 1px;\n }\n\n &:not(:has(:checked)):has([aria-invalid=\"true\"]) {\n &:hover,\n &:focus-visible,\n &:focus-within {\n --card-checkbox-outline-width: 2px;\n }\n }\n\n &:has(input:checked) {\n .af-card-checkbox-content-description > span:first-child {\n font-weight: 600;\n }\n }\n }\n }\n}\n","@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-checkbox {\n &__container {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n }\n\n &__legend {\n display: grid;\n margin-block-end: calc(4 / var(--font-size-base) * 1rem);\n row-gap: calc(4 / var(--font-size-base) * 1rem);\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 600;\n color: var(--card-checkbox-color);\n\n & > p {\n margin: 0;\n }\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(--card-checkbox-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 &__choices {\n display: flex;\n flex-direction: column;\n row-gap: calc(8 / var(--font-size-base) * 1rem);\n }\n\n &-group {\n display: flex;\n margin: 0;\n padding: 0;\n align-items: stretch;\n gap: 1rem;\n font-family: var(--card-checkbox-font-family);\n font-style: normal;\n font-weight: 400;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n list-style: none;\n\n &--horizontal {\n flex-direction: var(--card-checkbox-flex-direction);\n\n .af-card-checkbox-label {\n flex-direction: var(--card-checkbox-flex-direction);\n align-items: var(--card-checkbox-align-items);\n gap: calc(16 / var(--font-size-base) * 1rem);\n\n .af-card-checkbox-content {\n flex-direction: var(--card-checkbox-flex-direction);\n\n .af-card-checkbox-content-description {\n flex-direction: var(--card-checkbox-flex-direction);\n align-items: var(--card-checkbox-align-item);\n text-align: left;\n }\n }\n }\n }\n\n &--vertical {\n flex-direction: var(--card-checkbox-flex-direction);\n\n > * {\n flex-basis: 0;\n flex-grow: 1;\n }\n\n .af-card-checkbox-label {\n height: 100%;\n flex-direction: var(--card-checkbox-flex-direction);\n align-items: var(--card-checkbox-align-items);\n justify-content: var(--card-checkbox-justify-content);\n gap: calc(12 / var(--font-size-base) * 1rem);\n background-color: var(--card-checkbox-background-color);\n\n .af-card-checkbox-content {\n width: 100%;\n flex: 1;\n flex-direction: var(--card-checkbox-flex-direction);\n\n .af-card-checkbox-content-description {\n flex-direction: var(--card-checkbox-flex-direction);\n align-items: var(--card-checkbox-align-item);\n text-align: center;\n }\n }\n }\n }\n\n .af-card-checkbox-label {\n --card-checkbox-border-width: 1px;\n\n display: flex;\n padding: 1rem;\n border: var(--card-checkbox-border-width) solid\n var(--card-checkbox-border-color);\n border-radius: var(--card-checkbox-border-radius);\n flex: 1;\n align-self: stretch;\n outline: var(--card-checkbox-outline-width) solid\n var(--card-checkbox-outline-color);\n outline-offset: calc(\n -1 *\n calc(\n var(--card-checkbox-border-width) +\n var(--card-checkbox-outline-width)\n )\n );\n cursor: pointer;\n\n .af-card-checkbox-content {\n display: flex;\n align-items: center;\n gap: calc(8 / var(--font-size-base) * 1rem);\n\n .af-card-checkbox-content-description {\n display: flex;\n justify-content: center;\n gap: calc(\n var(--card-checkbox-content-description-gap, 4) /\n var(--font-size-base) * 1rem\n );\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(--card-checkbox-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(--card-checkbox-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 &:focus-visible,\n &:focus-within,\n &:has([aria-invalid=\"true\"]),\n &:has(input:checked) {\n --card-checkbox-outline-width: 1px;\n }\n\n &:not(:has(:checked)):has([aria-invalid=\"true\"]) {\n &:hover,\n &:focus-visible,\n &:focus-within {\n --card-checkbox-outline-width: 2px;\n }\n }\n\n &:has(input:checked) {\n .af-card-checkbox-content-description > span:first-child {\n font-weight: 600;\n }\n }\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxCommon.scss%23sass","../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxCommon.scss"],"names":[],"mappings":"AAEA,kBACE,YAAA,CCDF,qBAAA,CDGE,sCCDF,CDGE,0BACE,gBCDJ,CDGI,4BACE,QCDN,CDKE,yBAKE,gCAAA,CAJA,mBAAA,CAEA,6CAAA,CACA,eAAA,CAFA,sCCAJ,CDME,+BAIE,gCAAA,CAHA,6CAAA,CACA,eAAA,CACA,+CCHJ,CDMI,uBANF,+BAOI,6CAAA,CACA,+CCHJ,CACF,CDME,2BACE,YAAA,CACA,QCJJ,CDMI,6BACE,YAAA,CACA,WCJN,CDQE,qCACE,kBCNJ,CDSE,uCACE,qBCPJ","file":"CardCheckboxCommon.css","sourcesContent":["@use \"../../../common/breakpoints\";\n\n.af-card-checkbox {\n display: flex;\n flex-direction: column;\n gap: calc(8 / var(--font-size-base) * 1rem);\n\n &__legend {\n display: contents;\n\n & > p {\n margin: 0;\n }\n }\n\n &__label {\n display: inline-flex;\n gap: calc(4 / var(--font-size-base) * 1rem);\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 600;\n color: var(--card-checkbox-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(--card-checkbox-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 &__options {\n display: flex;\n gap: 1rem;\n\n > * {\n flex-basis: 0;\n flex-grow: 1;\n }\n }\n\n &__options--vertical {\n flex-direction: row;\n }\n\n &__options--horizontal {\n flex-direction: column;\n }\n}\n","@use \"../../../common/breakpoints\";\n\n.af-card-checkbox {\n display: flex;\n flex-direction: column;\n gap: calc(8 / var(--font-size-base) * 1rem);\n\n &__legend {\n display: contents;\n\n & > p {\n margin: 0;\n }\n }\n\n &__label {\n display: inline-flex;\n gap: calc(4 / var(--font-size-base) * 1rem);\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 600;\n color: var(--card-checkbox-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(--card-checkbox-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 &__options {\n display: flex;\n gap: 1rem;\n\n > * {\n flex-basis: 0;\n flex-grow: 1;\n }\n }\n\n &__options--vertical {\n flex-direction: row;\n }\n\n &__options--horizontal {\n flex-direction: column;\n }\n}\n"]}
|
|
@@ -1,25 +1,26 @@
|
|
|
1
|
-
@use "../../../common/breakpoints"
|
|
1
|
+
@use "../../../common/breakpoints";
|
|
2
2
|
|
|
3
3
|
.af-card-checkbox {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
gap: 1rem;
|
|
8
|
-
}
|
|
4
|
+
display: flex;
|
|
5
|
+
flex-direction: column;
|
|
6
|
+
gap: calc(8 / var(--font-size-base) * 1rem);
|
|
9
7
|
|
|
10
8
|
&__legend {
|
|
11
|
-
display:
|
|
12
|
-
margin-block-end: calc(4 / var(--font-size-base) * 1rem);
|
|
13
|
-
row-gap: calc(4 / var(--font-size-base) * 1rem);
|
|
14
|
-
font-size: calc(18 / var(--font-size-base) * 1rem);
|
|
15
|
-
font-weight: 600;
|
|
16
|
-
color: var(--card-checkbox-color);
|
|
9
|
+
display: contents;
|
|
17
10
|
|
|
18
11
|
& > p {
|
|
19
12
|
margin: 0;
|
|
20
13
|
}
|
|
21
14
|
}
|
|
22
15
|
|
|
16
|
+
&__label {
|
|
17
|
+
display: inline-flex;
|
|
18
|
+
gap: calc(4 / var(--font-size-base) * 1rem);
|
|
19
|
+
font-size: calc(18 / var(--font-size-base) * 1rem);
|
|
20
|
+
font-weight: 600;
|
|
21
|
+
color: var(--card-checkbox-color);
|
|
22
|
+
}
|
|
23
|
+
|
|
23
24
|
&__description {
|
|
24
25
|
font-size: calc(16 / var(--font-size-base) * 1rem);
|
|
25
26
|
font-weight: 400;
|
|
@@ -32,155 +33,21 @@
|
|
|
32
33
|
}
|
|
33
34
|
}
|
|
34
35
|
|
|
35
|
-
&
|
|
36
|
-
display: flex;
|
|
37
|
-
flex-direction: column;
|
|
38
|
-
row-gap: calc(8 / var(--font-size-base) * 1rem);
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
&-group {
|
|
36
|
+
&__options {
|
|
42
37
|
display: flex;
|
|
43
|
-
margin: 0;
|
|
44
|
-
padding: 0;
|
|
45
|
-
align-items: stretch;
|
|
46
38
|
gap: 1rem;
|
|
47
|
-
font-family: var(--card-checkbox-font-family);
|
|
48
|
-
font-style: normal;
|
|
49
|
-
font-weight: 400;
|
|
50
|
-
line-height: calc(20 / var(--font-size-base) * 1rem);
|
|
51
|
-
list-style: none;
|
|
52
|
-
|
|
53
|
-
&--horizontal {
|
|
54
|
-
flex-direction: var(--card-checkbox-flex-direction);
|
|
55
|
-
|
|
56
|
-
.af-card-checkbox-label {
|
|
57
|
-
flex-direction: var(--card-checkbox-flex-direction);
|
|
58
|
-
align-items: var(--card-checkbox-align-items);
|
|
59
|
-
gap: calc(16 / var(--font-size-base) * 1rem);
|
|
60
|
-
|
|
61
|
-
.af-card-checkbox-content {
|
|
62
|
-
flex-direction: var(--card-checkbox-flex-direction);
|
|
63
39
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
text-align: left;
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
}
|
|
40
|
+
> * {
|
|
41
|
+
flex-basis: 0;
|
|
42
|
+
flex-grow: 1;
|
|
71
43
|
}
|
|
44
|
+
}
|
|
72
45
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
> * {
|
|
77
|
-
flex-basis: 0;
|
|
78
|
-
flex-grow: 1;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
.af-card-checkbox-label {
|
|
82
|
-
height: 100%;
|
|
83
|
-
flex-direction: var(--card-checkbox-flex-direction);
|
|
84
|
-
align-items: var(--card-checkbox-align-items);
|
|
85
|
-
justify-content: var(--card-checkbox-justify-content);
|
|
86
|
-
gap: calc(12 / var(--font-size-base) * 1rem);
|
|
87
|
-
background-color: var(--card-checkbox-background-color);
|
|
88
|
-
|
|
89
|
-
.af-card-checkbox-content {
|
|
90
|
-
width: 100%;
|
|
91
|
-
flex: 1;
|
|
92
|
-
flex-direction: var(--card-checkbox-flex-direction);
|
|
93
|
-
|
|
94
|
-
.af-card-checkbox-content-description {
|
|
95
|
-
flex-direction: var(--card-checkbox-flex-direction);
|
|
96
|
-
align-items: var(--card-checkbox-align-item);
|
|
97
|
-
text-align: center;
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
.af-card-checkbox-label {
|
|
104
|
-
--card-checkbox-border-width: 1px;
|
|
105
|
-
|
|
106
|
-
display: flex;
|
|
107
|
-
padding: 1rem;
|
|
108
|
-
border: var(--card-checkbox-border-width) solid
|
|
109
|
-
var(--card-checkbox-border-color);
|
|
110
|
-
border-radius: var(--card-checkbox-border-radius);
|
|
111
|
-
flex: 1;
|
|
112
|
-
align-self: stretch;
|
|
113
|
-
outline: var(--card-checkbox-outline-width) solid
|
|
114
|
-
var(--card-checkbox-outline-color);
|
|
115
|
-
outline-offset: calc(
|
|
116
|
-
-1 *
|
|
117
|
-
calc(
|
|
118
|
-
var(--card-checkbox-border-width) +
|
|
119
|
-
var(--card-checkbox-outline-width)
|
|
120
|
-
)
|
|
121
|
-
);
|
|
122
|
-
cursor: pointer;
|
|
123
|
-
|
|
124
|
-
.af-card-checkbox-content {
|
|
125
|
-
display: flex;
|
|
126
|
-
align-items: center;
|
|
127
|
-
gap: calc(8 / var(--font-size-base) * 1rem);
|
|
128
|
-
|
|
129
|
-
.af-card-checkbox-content-description {
|
|
130
|
-
display: flex;
|
|
131
|
-
justify-content: center;
|
|
132
|
-
gap: calc(
|
|
133
|
-
var(--card-checkbox-content-description-gap, 4) /
|
|
134
|
-
var(--font-size-base) * 1rem
|
|
135
|
-
);
|
|
136
|
-
font-size: 1rem;
|
|
137
|
-
line-height: calc(20 / var(--font-size-base) * 1rem);
|
|
138
|
-
|
|
139
|
-
& > span:first-child {
|
|
140
|
-
font-size: calc(18 / var(--font-size-base) * 1rem);
|
|
141
|
-
font-weight: 400;
|
|
142
|
-
color: var(--card-checkbox-label-text-color);
|
|
143
|
-
|
|
144
|
-
@media (width < #{breakpoints.$breakpoint-sm}) {
|
|
145
|
-
font-size: calc(16 / var(--font-size-base) * 1rem);
|
|
146
|
-
font-weight: 400;
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
& > span:not(:first-child) {
|
|
151
|
-
font-size: calc(16 / var(--font-size-base) * 1rem);
|
|
152
|
-
font-weight: 400;
|
|
153
|
-
color: var(--card-checkbox-label-text-color);
|
|
154
|
-
|
|
155
|
-
@media (width < #{breakpoints.$breakpoint-sm}) {
|
|
156
|
-
font-size: calc(14 / var(--font-size-base) * 1rem);
|
|
157
|
-
font-weight: 400;
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
&:hover,
|
|
164
|
-
&:focus-visible,
|
|
165
|
-
&:focus-within,
|
|
166
|
-
&:has([aria-invalid="true"]),
|
|
167
|
-
&:has(input:checked) {
|
|
168
|
-
--card-checkbox-outline-width: 1px;
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
&:not(:has(:checked)):has([aria-invalid="true"]) {
|
|
172
|
-
&:hover,
|
|
173
|
-
&:focus-visible,
|
|
174
|
-
&:focus-within {
|
|
175
|
-
--card-checkbox-outline-width: 2px;
|
|
176
|
-
}
|
|
177
|
-
}
|
|
46
|
+
&__options--vertical {
|
|
47
|
+
flex-direction: row;
|
|
48
|
+
}
|
|
178
49
|
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
font-weight: 600;
|
|
182
|
-
}
|
|
183
|
-
}
|
|
184
|
-
}
|
|
50
|
+
&__options--horizontal {
|
|
51
|
+
flex-direction: column;
|
|
185
52
|
}
|
|
186
53
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-card-
|
|
1
|
+
.af-card-checkbox{display:flex;flex-direction:column;gap:calc(8/var(--font-size-base)*1rem)}.af-card-checkbox__legend{display:contents}.af-card-checkbox__legend>p{margin:0}.af-card-checkbox__label{color:var(--card-checkbox-color);display:inline-flex;font-size:calc(18/var(--font-size-base)*1rem);font-weight:600;gap:calc(4/var(--font-size-base)*1rem)}.af-card-checkbox__description{color:var(--card-checkbox-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-card-checkbox__description{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(18/var(--font-size-base)*1rem)}}.af-card-checkbox__options{display:flex;gap:1rem}.af-card-checkbox__options>*{flex-basis:0;flex-grow:1}.af-card-checkbox__options--vertical{flex-direction:row}.af-card-checkbox__options--horizontal{flex-direction:column}.af-card-checkbox__label{--card-checkbox-color:var(--color-gray-900)}.af-card-checkbox__description{--card-checkbox-color:var(--color-gray-700)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxCommon.scss","../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxLF.scss","../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxLF.scss%23sass"],"names":[],"mappings":"AAGE,6BACE,YAAA,CCFJ,qBAAA,CDII,QCFJ,CDKE,0BAME,gCAAA,CALA,YAAA,CAGA,6CAAA,CACA,eAAA,CAHA,mDAAA,CACA,0CCAJ,CDKI,4BACE,QCHN,CDOE,+BAIE,gCAAA,CAHA,6CAAA,CACA,eAAA,CACA,+CCJJ,CDOI,uBANF,+BAOI,6CAAA,CACA,+CCJJ,CACF,CDOE,2BACE,YAAA,CACA,qBAAA,CACA,0CCLJ,CDQE,wBAIE,mBAAA,CAHA,YAAA,CAKA,4CAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,+CAAA,CACA,eAAA,CARA,QAAA,CACA,SCCJ,CDQI,oCACE,kDCNN,CDQM,4DAEE,4CAAA,CADA,kDAAA,CAEA,uCCNR,CDQQ,sFACE,kDCNV,CDQU,4HAEE,2CAAA,CADA,kDAAA,CAEA,eCNZ,CDYI,kCACE,kDCVN,CDYM,oCACE,YAAA,CACA,WCVR,CDaM,0DAGE,4CAAA,CAGA,sDAAA,CAJA,kDAAA,CAGA,uCAAA,CAJA,WAAA,CAGA,oDCTR,CDaQ,oFAEE,QAAA,CACA,kDAAA,CAFA,UCTV,CDaU,0HAEE,2CAAA,CADA,kDAAA,CAEA,iBCXZ,CDiBI,gDACE,gCAAA,CAQA,kBAAA,CAJA,gFAAA,CAEA,gDAAA,CAYA,cAAA,CAhBA,YAAA,CAKA,QAAA,CAEA,mFAAA,CCjBN,gGAAA,CDWM,YCTN,CD0BM,0EAEE,kBAAA,CADA,YAAA,CAEA,sCCxBR,CD0BQ,gHACE,YAAA,CAMA,cAAA,CAJA,oFAAA,CADA,sBAAA,CAMA,+CC3BV,CD6BU,iIAGE,2CAAA,CAFA,6CAAA,CACA,eC1BZ,CD6BY,uBALF,iIAMI,6CAAA,CACA,eC1BZ,CACF,CD6BU,uIAGE,2CAAA,CAFA,6CAAA,CACA,eC1BZ,CD6BY,uBALF,uIAMI,6CAAA,CACA,eC1BZ,CACF,CD+BM,6TAKE,iCCjCR,CDqCQ,wTAGE,iCCrCV,CD0CQ,0HACE,eCxCV,CCzIE,mCACE,oDD4IJ,CCzIE,0BACE,2CD2IJ,CCxIE,+BACE,2CD0IJ,CCtII,oCACE,qCDwIN,CCtIM,4DACE,kCAAA,CACA,kCDwIR,CCtIQ,sFACE,kCAAA,CACA,+DDwIV,CCtIU,4HACE,qCAAA,CACA,qCAAA,CACA,iCDwIZ,CClII,kCACE,kCDoIN,CClIM,0DACE,kCAAA,CACA,sCAAA,CACA,0CDoIR,CClIQ,uEACE,iBDoIV,CCjIQ,oFACE,qCAAA,CACA,8DDmIV,CCjIU,0HACE,qCAAA,CACA,iCDmIZ,CC7HI,gDACE,kDAAA,CACA,6CAAA,CACA,+DAAA,CACA,mDAAA,CACA,6BD+HN,CC5HQ,uGACE,sDD8HV,CC3HQ,6GACE,sDD6HV,CCzHM,oPAIE,6CDwHR,CCrHM,mEACE,mDAAA,CACA,iDDuHR,CCpHM,mEACE,6CAAA,CACA,oDDsHR","file":"CardCheckboxLF.css","sourcesContent":["@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-checkbox {\n &__container {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n }\n\n &__legend {\n display: grid;\n margin-block-end: calc(4 / var(--font-size-base) * 1rem);\n row-gap: calc(4 / var(--font-size-base) * 1rem);\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 600;\n color: var(--card-checkbox-color);\n\n & > p {\n margin: 0;\n }\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(--card-checkbox-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 &__choices {\n display: flex;\n flex-direction: column;\n row-gap: calc(8 / var(--font-size-base) * 1rem);\n }\n\n &-group {\n display: flex;\n margin: 0;\n padding: 0;\n align-items: stretch;\n gap: 1rem;\n font-family: var(--card-checkbox-font-family);\n font-style: normal;\n font-weight: 400;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n list-style: none;\n\n &--horizontal {\n flex-direction: var(--card-checkbox-flex-direction);\n\n .af-card-checkbox-label {\n flex-direction: var(--card-checkbox-flex-direction);\n align-items: var(--card-checkbox-align-items);\n gap: calc(16 / var(--font-size-base) * 1rem);\n\n .af-card-checkbox-content {\n flex-direction: var(--card-checkbox-flex-direction);\n\n .af-card-checkbox-content-description {\n flex-direction: var(--card-checkbox-flex-direction);\n align-items: var(--card-checkbox-align-item);\n text-align: left;\n }\n }\n }\n }\n\n &--vertical {\n flex-direction: var(--card-checkbox-flex-direction);\n\n > * {\n flex-basis: 0;\n flex-grow: 1;\n }\n\n .af-card-checkbox-label {\n height: 100%;\n flex-direction: var(--card-checkbox-flex-direction);\n align-items: var(--card-checkbox-align-items);\n justify-content: var(--card-checkbox-justify-content);\n gap: calc(12 / var(--font-size-base) * 1rem);\n background-color: var(--card-checkbox-background-color);\n\n .af-card-checkbox-content {\n width: 100%;\n flex: 1;\n flex-direction: var(--card-checkbox-flex-direction);\n\n .af-card-checkbox-content-description {\n flex-direction: var(--card-checkbox-flex-direction);\n align-items: var(--card-checkbox-align-item);\n text-align: center;\n }\n }\n }\n }\n\n .af-card-checkbox-label {\n --card-checkbox-border-width: 1px;\n\n display: flex;\n padding: 1rem;\n border: var(--card-checkbox-border-width) solid\n var(--card-checkbox-border-color);\n border-radius: var(--card-checkbox-border-radius);\n flex: 1;\n align-self: stretch;\n outline: var(--card-checkbox-outline-width) solid\n var(--card-checkbox-outline-color);\n outline-offset: calc(\n -1 *\n calc(\n var(--card-checkbox-border-width) +\n var(--card-checkbox-outline-width)\n )\n );\n cursor: pointer;\n\n .af-card-checkbox-content {\n display: flex;\n align-items: center;\n gap: calc(8 / var(--font-size-base) * 1rem);\n\n .af-card-checkbox-content-description {\n display: flex;\n justify-content: center;\n gap: calc(\n var(--card-checkbox-content-description-gap, 4) /\n var(--font-size-base) * 1rem\n );\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(--card-checkbox-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(--card-checkbox-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 &:focus-visible,\n &:focus-within,\n &:has([aria-invalid=\"true\"]),\n &:has(input:checked) {\n --card-checkbox-outline-width: 1px;\n }\n\n &:not(:has(:checked)):has([aria-invalid=\"true\"]) {\n &:hover,\n &:focus-visible,\n &:focus-within {\n --card-checkbox-outline-width: 2px;\n }\n }\n\n &:has(input:checked) {\n .af-card-checkbox-content-description > span:first-child {\n font-weight: 600;\n }\n }\n }\n }\n}\n","@use \"CardCheckboxCommon\";\n\n.af-card-checkbox {\n &__label-container {\n --font-size-base: calc(16 / var(--font-size-base) * 1rem);\n }\n\n &__legend {\n --card-checkbox-color: var(--color-gray-900);\n }\n\n &__description {\n --card-checkbox-color: var(--color-gray-700);\n }\n\n &-group {\n &--horizontal {\n --card-checkbox-flex-direction: column;\n\n .af-card-checkbox-label {\n --card-checkbox-flex-direction: row;\n --card-checkbox-align-items: center;\n\n .af-card-checkbox-content {\n --card-checkbox-flex-direction: row;\n --card-checkbox-margin-left: calc(12 / var(--font-size-base) * 1rem);\n\n .af-card-checkbox-content-description {\n --card-checkbox-flex-direction: column;\n --card-checkbox-align-item: flex-start;\n --card-checkbox-description-gap: 4;\n }\n }\n }\n }\n\n &--vertical {\n --card-checkbox-flex-direction: row;\n\n .af-card-checkbox-label {\n --card-checkbox-flex-direction: row;\n --card-checkbox-align-items: flex-start;\n --card-checkbox-justify-content: flex-start;\n\n .af-checkbox {\n position: absolute;\n }\n\n .af-card-checkbox-content {\n --card-checkbox-flex-direction: column;\n --card-checkbox-margin-left: calc(2 / var(--font-size-base) * 1rem);\n\n .af-card-checkbox-content-description {\n --card-checkbox-flex-direction: column;\n --card-checkbox-align-item: center;\n }\n }\n }\n }\n\n .af-card-checkbox-label {\n --card-checkbox-border-color: var(--color-gray-700);\n --card-checkbox-border-radius: var(--radius-4);\n --card-checkbox-outline-color: var(--card-checkbox-border-color);\n --card-checkbox-background-color: var(--color-white);\n --card-checkbox-content-gap: 4;\n\n .af-card-checkbox-content-description > span {\n &:first-child {\n --card-checkbox-label-text-color: var(--color-gray-900);\n }\n\n &:not(:first-child) {\n --card-checkbox-label-text-color: var(--color-gray-700);\n }\n }\n\n &:hover,\n &:focus-visible,\n &:focus-within,\n &:has(input:checked) {\n --card-checkbox-border-color: var(--color-axa);\n }\n\n &[aria-invalid=\"true\"] {\n --card-checkbox-background-color: var(--color-white);\n --card-checkbox-border-color: var(--color-red-700);\n }\n\n &:has(input:checked) {\n --card-checkbox-border-color: var(--color-axa);\n --card-checkbox-background-color: var(--color-blue-2);\n }\n }\n }\n}\n","@use \"CardCheckboxCommon\";\n\n.af-card-checkbox {\n &__label-container {\n --font-size-base: calc(16 / var(--font-size-base) * 1rem);\n }\n\n &__legend {\n --card-checkbox-color: var(--color-gray-900);\n }\n\n &__description {\n --card-checkbox-color: var(--color-gray-700);\n }\n\n &-group {\n &--horizontal {\n --card-checkbox-flex-direction: column;\n\n .af-card-checkbox-label {\n --card-checkbox-flex-direction: row;\n --card-checkbox-align-items: center;\n\n .af-card-checkbox-content {\n --card-checkbox-flex-direction: row;\n --card-checkbox-margin-left: calc(12 / var(--font-size-base) * 1rem);\n\n .af-card-checkbox-content-description {\n --card-checkbox-flex-direction: column;\n --card-checkbox-align-item: flex-start;\n --card-checkbox-description-gap: 4;\n }\n }\n }\n }\n\n &--vertical {\n --card-checkbox-flex-direction: row;\n\n .af-card-checkbox-label {\n --card-checkbox-flex-direction: row;\n --card-checkbox-align-items: flex-start;\n --card-checkbox-justify-content: flex-start;\n\n .af-checkbox {\n position: absolute;\n }\n\n .af-card-checkbox-content {\n --card-checkbox-flex-direction: column;\n --card-checkbox-margin-left: calc(2 / var(--font-size-base) * 1rem);\n\n .af-card-checkbox-content-description {\n --card-checkbox-flex-direction: column;\n --card-checkbox-align-item: center;\n }\n }\n }\n }\n\n .af-card-checkbox-label {\n --card-checkbox-border-color: var(--color-gray-700);\n --card-checkbox-border-radius: var(--radius-4);\n --card-checkbox-outline-color: var(--card-checkbox-border-color);\n --card-checkbox-background-color: var(--color-white);\n --card-checkbox-content-gap: 4;\n\n .af-card-checkbox-content-description > span {\n &:first-child {\n --card-checkbox-label-text-color: var(--color-gray-900);\n }\n\n &:not(:first-child) {\n --card-checkbox-label-text-color: var(--color-gray-700);\n }\n }\n\n &:hover,\n &:focus-visible,\n &:focus-within,\n &:has(input:checked) {\n --card-checkbox-border-color: var(--color-axa);\n }\n\n &[aria-invalid=\"true\"] {\n --card-checkbox-background-color: var(--color-white);\n --card-checkbox-border-color: var(--color-red-700);\n }\n\n &:has(input:checked) {\n --card-checkbox-border-color: var(--color-axa);\n --card-checkbox-background-color: var(--color-blue-2);\n }\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxCommon.scss","../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxLF.scss","../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxLF.scss%23sass"],"names":[],"mappings":"AAEA,kBACE,YAAA,CCDF,qBAAA,CDGE,sCCDF,CDGE,0BACE,gBCDJ,CDGI,4BACE,QCDN,CDKE,yBAKE,gCAAA,CAJA,mBAAA,CAEA,6CAAA,CACA,eAAA,CAFA,sCCAJ,CDME,+BAIE,gCAAA,CAHA,6CAAA,CACA,eAAA,CACA,+CCHJ,CDMI,uBANF,+BAOI,6CAAA,CACA,+CCHJ,CACF,CDME,2BACE,YAAA,CACA,QCJJ,CDMI,6BACE,YAAA,CACA,WCJN,CDQE,qCACE,kBCNJ,CDSE,uCACE,qBCPJ,CCxCE,yBACE,2CD2CJ,CCxCE,+BACE,2CD0CJ","file":"CardCheckboxLF.css","sourcesContent":["@use \"../../../common/breakpoints\";\n\n.af-card-checkbox {\n display: flex;\n flex-direction: column;\n gap: calc(8 / var(--font-size-base) * 1rem);\n\n &__legend {\n display: contents;\n\n & > p {\n margin: 0;\n }\n }\n\n &__label {\n display: inline-flex;\n gap: calc(4 / var(--font-size-base) * 1rem);\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 600;\n color: var(--card-checkbox-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(--card-checkbox-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 &__options {\n display: flex;\n gap: 1rem;\n\n > * {\n flex-basis: 0;\n flex-grow: 1;\n }\n }\n\n &__options--vertical {\n flex-direction: row;\n }\n\n &__options--horizontal {\n flex-direction: column;\n }\n}\n","@use \"CardCheckboxCommon\";\n\n.af-card-checkbox {\n &__label {\n --card-checkbox-color: var(--color-gray-900);\n }\n\n &__description {\n --card-checkbox-color: var(--color-gray-700);\n }\n}\n","@use \"CardCheckboxCommon\";\n\n.af-card-checkbox {\n &__label {\n --card-checkbox-color: var(--color-gray-900);\n }\n\n &__description {\n --card-checkbox-color: var(--color-gray-700);\n }\n}\n"]}
|
|
@@ -1,96 +1,11 @@
|
|
|
1
1
|
@use "CardCheckboxCommon";
|
|
2
2
|
|
|
3
3
|
.af-card-checkbox {
|
|
4
|
-
&__label
|
|
5
|
-
--font-size-base: calc(16 / var(--font-size-base) * 1rem);
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
&__legend {
|
|
4
|
+
&__label {
|
|
9
5
|
--card-checkbox-color: var(--color-gray-900);
|
|
10
6
|
}
|
|
11
7
|
|
|
12
8
|
&__description {
|
|
13
9
|
--card-checkbox-color: var(--color-gray-700);
|
|
14
10
|
}
|
|
15
|
-
|
|
16
|
-
&-group {
|
|
17
|
-
&--horizontal {
|
|
18
|
-
--card-checkbox-flex-direction: column;
|
|
19
|
-
|
|
20
|
-
.af-card-checkbox-label {
|
|
21
|
-
--card-checkbox-flex-direction: row;
|
|
22
|
-
--card-checkbox-align-items: center;
|
|
23
|
-
|
|
24
|
-
.af-card-checkbox-content {
|
|
25
|
-
--card-checkbox-flex-direction: row;
|
|
26
|
-
--card-checkbox-margin-left: calc(12 / var(--font-size-base) * 1rem);
|
|
27
|
-
|
|
28
|
-
.af-card-checkbox-content-description {
|
|
29
|
-
--card-checkbox-flex-direction: column;
|
|
30
|
-
--card-checkbox-align-item: flex-start;
|
|
31
|
-
--card-checkbox-description-gap: 4;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
&--vertical {
|
|
38
|
-
--card-checkbox-flex-direction: row;
|
|
39
|
-
|
|
40
|
-
.af-card-checkbox-label {
|
|
41
|
-
--card-checkbox-flex-direction: row;
|
|
42
|
-
--card-checkbox-align-items: flex-start;
|
|
43
|
-
--card-checkbox-justify-content: flex-start;
|
|
44
|
-
|
|
45
|
-
.af-checkbox {
|
|
46
|
-
position: absolute;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.af-card-checkbox-content {
|
|
50
|
-
--card-checkbox-flex-direction: column;
|
|
51
|
-
--card-checkbox-margin-left: calc(2 / var(--font-size-base) * 1rem);
|
|
52
|
-
|
|
53
|
-
.af-card-checkbox-content-description {
|
|
54
|
-
--card-checkbox-flex-direction: column;
|
|
55
|
-
--card-checkbox-align-item: center;
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.af-card-checkbox-label {
|
|
62
|
-
--card-checkbox-border-color: var(--color-gray-700);
|
|
63
|
-
--card-checkbox-border-radius: var(--radius-4);
|
|
64
|
-
--card-checkbox-outline-color: var(--card-checkbox-border-color);
|
|
65
|
-
--card-checkbox-background-color: var(--color-white);
|
|
66
|
-
--card-checkbox-content-gap: 4;
|
|
67
|
-
|
|
68
|
-
.af-card-checkbox-content-description > span {
|
|
69
|
-
&:first-child {
|
|
70
|
-
--card-checkbox-label-text-color: var(--color-gray-900);
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
&:not(:first-child) {
|
|
74
|
-
--card-checkbox-label-text-color: var(--color-gray-700);
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
&:hover,
|
|
79
|
-
&:focus-visible,
|
|
80
|
-
&:focus-within,
|
|
81
|
-
&:has(input:checked) {
|
|
82
|
-
--card-checkbox-border-color: var(--color-axa);
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
&[aria-invalid="true"] {
|
|
86
|
-
--card-checkbox-background-color: var(--color-white);
|
|
87
|
-
--card-checkbox-border-color: var(--color-red-700);
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
&:has(input:checked) {
|
|
91
|
-
--card-checkbox-border-color: var(--color-axa);
|
|
92
|
-
--card-checkbox-background-color: var(--color-blue-2);
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
11
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.af-card-checkbox-option{--checkbox-option-border-width:1px;--checkbox-option-background-color:var(--white);align-items:center;background-color:var(--checkbox-option-background-color);border-radius:calc(8/var(--font-size-base)*1rem);cursor:pointer;display:flex;flex-direction:column;gap:var(--checkbox-option-gap);justify-content:space-between;outline:var(--checkbox-option-border-width) solid var(--checkbox-option-border-color);outline-offset:calc(var(--checkbox-option-border-width)*-1);padding:1rem;position:relative;text-align:center}.af-card-checkbox-option:hover{--checkbox-option-border-width:2px}.af-card-checkbox-option__label{color:var(--checkbox-option-color-title);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400;margin:0}@media (width > 667px){.af-card-checkbox-option__label{font-size:calc(18/var(--font-size-base)*1rem)}}.af-card-checkbox-option:has(input:checked){--checkbox-option-border-width:2px}.af-card-checkbox-option:has(input:checked) .af-card-checkbox-option__label{font-weight:600}.af-card-checkbox-option__content{align-items:center;display:flex;flex-direction:column;flex-grow:1;gap:var(--checkbox-option-gap);justify-content:space-between;text-align:center}.af-card-checkbox-option__description,.af-card-checkbox-option__subtitle{color:var(--checkbox-option-color-subtitle);font-size:calc(14/var(--font-size-base)*1rem);font-weight:400;margin:0}@media (width > 667px){.af-card-checkbox-option__description,.af-card-checkbox-option__subtitle{font-size:1rem}}.af-card-checkbox-option--horizontal{flex-direction:row}.af-card-checkbox-option--horizontal .af-card-checkbox-option__content{align-items:flex-start}.af-card-checkbox-option--horizontal .af-checkbox{order:-1}.af-card-checkbox-option .af-icon{--icon-size:var(--icon-size-medium)}@media (width > 667px){.af-card-checkbox-option .af-icon{--icon-size:var(--icon-size-large)}}.af-card-checkbox-option{--checkbox-option-border-color:var(--axa-blue-65);--checkbox-option-color-title:var(--axa-blue-100);--checkbox-option-color-subtitle:var(--neutral-80);--checkbox-option-gap:calc(8/var(--font-size-base)*1rem)}.af-card-checkbox-option:hover{--checkbox-option-border-color:var(--axa-blue-100)}.af-card-checkbox-option--horizontal{--checkbox-option-gap:calc(8/var(--font-size-base)*1rem)}.af-card-checkbox-option--horizontal .af-card-checkbox-option__content{--checkbox-option-gap:calc(4/var(--font-size-base)*1rem)}.af-card-checkbox-option--horizontal .af-checkbox{margin-right:calc(8/var(--font-size-base)*1rem)}.af-card-checkbox-option:not(.af-card-checkbox-option--horizontal) .af-checkbox{margin-top:calc(8/var(--font-size-base)*1rem)}.af-card-checkbox-option:has(input:checked){--checkbox-option-background-color:var(--axa-blue-4);--checkbox-option-border-color:var(--axa-blue-100)}.af-card-checkbox-option:has(input[aria-invalid=true]):not(:has(input:checked)){--checkbox-option-border-color:var(--red-alert-100);--checkbox-option-background-color:var(--axa-red-4);--checkbox-option-color-title:var(--neutral-80)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionCommon.scss","../../../../src/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionApollo.scss","../../../../src/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionApollo.scss%23sass"],"names":[],"mappings":"AAEA,yBACE,kCAAA,CCDF,+CAAA,CDSE,kBAAA,CAIA,wDAAA,CANA,gDAAA,CAUA,cAAA,CAZA,YAAA,CAGA,qBAAA,CAGA,8BAAA,CADA,6BAAA,CAIA,qFAAA,CAEA,2DAAA,CAVA,YAAA,CAFA,iBAAA,CAQA,iBCEF,CDKE,+BACE,kCCFJ,CDME,gCAIE,wCAAA,CAFA,6CAAA,CACA,eAAA,CAFA,QCDJ,CDMI,uBANF,gCAOI,6CCHJ,CACF,CDME,4CACE,kCCJJ,CDMI,4EACE,eCJN,CDQE,kCAIE,kBAAA,CAHA,YAAA,CACA,qBAAA,CACA,WAAA,CAGA,8BAAA,CADA,6BAAA,CAEA,iBCNJ,CDSE,yEAKE,2CAAA,CAFA,6CAAA,CACA,eAAA,CAFA,QCLJ,CDUI,uBAPF,yEAQI,cCPJ,CACF,CDUE,qCACE,kBCRJ,CDUI,uEACE,sBCRN,CDWI,kDACE,QCTN,CDaE,kCACE,mCCXJ,CDaI,uBAHF,kCAII,kCCVJ,CACF,CCxEA,yBACE,iDAAA,CACA,iDAAA,CACA,kDAAA,CACA,wDD2EF,CCzEE,+BACE,kDD2EJ,CCxEE,qCACE,wDD0EJ,CCxEI,uEACE,wDD0EN,CCvEI,kDACE,+CDyEN,CCrEE,gFACE,6CDuEJ,CCpEE,4CACE,oDAAA,CACA,kDDsEJ,CCnEE,gFACE,mDAAA,CACA,mDAAA,CACA,+CDqEJ","file":"CardCheckboxOptionApollo.css","sourcesContent":["@use \"../../../common/breakpoints\";\n\n.af-card-checkbox-option {\n --checkbox-option-border-width: 1px;\n --checkbox-option-background-color: var(--white);\n\n position: relative;\n display: flex;\n padding: 1rem;\n border-radius: calc(8 / var(--font-size-base) * 1rem);\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n gap: var(--checkbox-option-gap);\n text-align: center;\n background-color: var(--checkbox-option-background-color);\n outline: var(--checkbox-option-border-width) solid\n var(--checkbox-option-border-color);\n outline-offset: calc(-1 * var(--checkbox-option-border-width));\n cursor: pointer;\n\n &:hover {\n --checkbox-option-border-width: 2px;\n --checkbox-option-border-color: var(--axa-blue-100);\n }\n\n &__label {\n margin: 0;\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--checkbox-option-color-title);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n }\n\n &:has(input:checked) {\n --checkbox-option-border-width: 2px;\n\n & .af-card-checkbox-option__label {\n font-weight: 600;\n }\n }\n\n &__content {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n align-items: center;\n justify-content: space-between;\n gap: var(--checkbox-option-gap);\n text-align: center;\n }\n\n &__description,\n &__subtitle {\n margin: 0;\n font-size: calc(14 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--checkbox-option-color-subtitle);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n font-size: 1rem;\n }\n }\n\n &--horizontal {\n flex-direction: row;\n\n & .af-card-checkbox-option__content {\n align-items: flex-start;\n }\n\n & .af-checkbox {\n order: -1;\n }\n }\n\n & .af-icon {\n --icon-size: var(--icon-size-medium);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n --icon-size: var(--icon-size-large);\n }\n }\n}\n","@use \"CardCheckboxOptionCommon\";\n\n.af-card-checkbox-option {\n --checkbox-option-border-color: var(--axa-blue-65);\n --checkbox-option-color-title: var(--axa-blue-100);\n --checkbox-option-color-subtitle: var(--neutral-80);\n --checkbox-option-gap: calc(8 / var(--font-size-base) * 1rem);\n\n &:hover {\n --checkbox-option-border-color: var(--axa-blue-100);\n }\n\n &--horizontal {\n --checkbox-option-gap: calc(8 / var(--font-size-base) * 1rem);\n\n & .af-card-checkbox-option__content {\n --checkbox-option-gap: calc(4 / var(--font-size-base) * 1rem);\n }\n\n & .af-checkbox {\n margin-right: calc(8 / var(--font-size-base) * 1rem);\n }\n }\n\n &:not(&--horizontal) .af-checkbox {\n margin-top: calc(8 / var(--font-size-base) * 1rem);\n }\n\n &:has(input:checked) {\n --checkbox-option-background-color: var(--axa-blue-4);\n --checkbox-option-border-color: var(--axa-blue-100);\n }\n\n &:has(input[aria-invalid=\"true\"]):not(:has(input:checked)) {\n --checkbox-option-border-color: var(--red-alert-100);\n --checkbox-option-background-color: var(--axa-red-4);\n --checkbox-option-color-title: var(--neutral-80);\n }\n}\n","@use \"CardCheckboxOptionCommon\";\n\n.af-card-checkbox-option {\n --checkbox-option-border-color: var(--axa-blue-65);\n --checkbox-option-color-title: var(--axa-blue-100);\n --checkbox-option-color-subtitle: var(--neutral-80);\n --checkbox-option-gap: calc(8 / var(--font-size-base) * 1rem);\n\n &:hover {\n --checkbox-option-border-color: var(--axa-blue-100);\n }\n\n &--horizontal {\n --checkbox-option-gap: calc(8 / var(--font-size-base) * 1rem);\n\n & .af-card-checkbox-option__content {\n --checkbox-option-gap: calc(4 / var(--font-size-base) * 1rem);\n }\n\n & .af-checkbox {\n margin-right: calc(8 / var(--font-size-base) * 1rem);\n }\n }\n\n &:not(&--horizontal) .af-checkbox {\n margin-top: calc(8 / var(--font-size-base) * 1rem);\n }\n\n &:has(input:checked) {\n --checkbox-option-background-color: var(--axa-blue-4);\n --checkbox-option-border-color: var(--axa-blue-100);\n }\n\n &:has(input[aria-invalid=\"true\"]):not(:has(input:checked)) {\n --checkbox-option-border-color: var(--red-alert-100);\n --checkbox-option-background-color: var(--axa-red-4);\n --checkbox-option-color-title: var(--neutral-80);\n }\n}\n"]}
|