@axa-fr/design-system-look-and-feel-css 1.0.5-ci.24 → 1.0.5-ci.26
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/Checkbox.css +1 -1
- package/dist/Form/Checkbox/Checkbox.css.map +1 -1
- package/dist/Form/Checkbox/Checkbox.scss +23 -2
- package/dist/Form/Radio/Radio.css +1 -1
- package/dist/Form/Radio/Radio.css.map +1 -1
- package/dist/Form/Radio/Radio.scss +0 -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{font-family:Source Sans Pro,arial,sans-serif}.af-checkbox *{box-sizing:border-box}.af-checkbox__container{display:flex;flex-direction:column;gap:1rem}.af-checkbox__label-container{display:flex;flex-direction:column;row-gap:calc(4/var(--font-size-base)*1rem)}.af-checkbox__label{color:var(--color-gray-900);font-size:1.125rem;font-weight:600}.af-checkbox__description{color:var(--color-gray-700);font-size:.875rem;font-weight:400;line-height:1.125rem}@media (width > 1023px){.af-checkbox__description{font-size:1rem;line-height:1.25rem}}.af-checkbox__content{align-items:center;display:flex;gap:1rem;
|
|
1
|
+
.af-checkbox{font-family:Source Sans Pro,arial,sans-serif}.af-checkbox ul{all:unset;display:flex;flex-direction:inherit;gap:.5rem}.af-checkbox li{all:unset}.af-checkbox *{box-sizing:border-box}.af-checkbox__container{display:flex;flex-direction:column;gap:1rem}.af-checkbox__label-container{display:flex;flex-direction:column;row-gap:calc(4/var(--font-size-base)*1rem)}.af-checkbox__label{color:var(--color-gray-900);font-size:1.125rem;font-weight:600}.af-checkbox__description{color:var(--color-gray-700);font-size:.875rem;font-weight:400;line-height:1.125rem}@media (width > 1023px){.af-checkbox__description{font-size:1rem;line-height:1.25rem}}.af-checkbox__content{align-items:center;display:flex;gap:1rem;width:100%}.af-checkbox__content>svg{color:var(--color-axa);height:1.75rem;width:1.75rem;fill:var(--color-axa)}.af-checkbox__content .af-checkbox__content-description{display:flex;flex-direction:column;gap:.25rem;line-height:1.25rem}.af-checkbox__content .af-checkbox__content-description>span:first-child{color:var(--color-gray-900);font-size:1.125rem;line-height:1.4rem}.af-checkbox__content .af-checkbox__content-description>span:not(:first-child){color:var(--color-gray-700)}input[type=checkbox]:checked~.af-checkbox__content .af-checkbox__content-description>span:first-child{font-weight:600}.af-checkbox-select--horizontal .af-checkbox__content{flex-direction:column;gap:.5rem}.af-checkbox__group-description{font-size:1rem;line-height:1.25rem}.af-checkbox~.af-checkbox__error{align-items:center;color:var(--color-red-700);display:flex;font-family:Source Sans Pro,arial,sans-serif;gap:.5rem;line-height:1.25rem;margin-left:3.2rem}.af-checkbox~.af-checkbox__error>svg{color:var(--color-red-700);width:1rem;fill:var(--color-red-700)}.af-checkbox-select~.af-checkbox__error{margin:1rem 0 0}.af-checkbox label{align-items:center;border-radius:var(--default-border-radius);cursor:pointer;display:flex;gap:.75rem;margin:0}.af-checkbox-select label{align-items:center;box-shadow:0 0 0 1px var(--box-shadow-color) inset;padding:1rem;--box-shadow-color:var(--color-gray)}.af-checkbox-select--vertical ul{flex-direction:column}.af-checkbox-select--horizontal label{flex-direction:column;gap:0;height:auto;justify-content:flex-start;padding:1rem;position:relative;text-align:center;width:12rem}.af-checkbox-select--horizontal label .af-checkbox__icons{left:1rem;position:absolute;top:1rem}.af-checkbox-select.subgrid label{width:inherit}.af-checkbox label input[type=checkbox]{margin-right:.5rem;opacity:0;position:absolute}.af-checkbox label input[type=checkbox]~.af-checkbox__icons{align-items:center;background-color:var(--color-white);clip-path:inset(.22rem round 2px);display:flex;gap:.75rem}.af-checkbox label input[type=checkbox]~.af-checkbox__icons .af-checkbox__checked,.af-checkbox label input[type=checkbox]~.af-checkbox__icons .af-checkbox__unchecked{align-items:center;height:1.75rem;width:1.75rem}.af-checkbox label input[type=checkbox]~.af-checkbox__icons .af-checkbox__checked{display:none}.af-checkbox label input[type=checkbox]~.af-checkbox__icons .af-checkbox__unchecked{color:var(--color-gray-700);fill:var(--color-gray-700)}.af-checkbox label:has(input[type=checkbox][aria-invalid=true]) .af-checkbox__checked,.af-checkbox label:has(input[type=checkbox][aria-invalid=true]) .af-checkbox__unchecked{color:var(--color-red-700);fill:var(--color-red-700)}.af-checkbox label:has(input[type=checkbox]:checked) .af-checkbox__checked{color:var(--color-axa);display:block;fill:var(--color-axa)}.af-checkbox label:has(input[type=checkbox]:checked) .af-checkbox__unchecked{display:none}.af-checkbox-select label:has(input[type=checkbox]){background-color:var(--color-white)}.af-checkbox-select label:has(input[type=checkbox]:checked){background-color:var(--color-blue-2);box-shadow:0 0 0 2px var(--color-axa) inset}.af-checkbox label:has(input[type=checkbox]:disabled){cursor:default}.af-checkbox label:has(input[type=checkbox]:disabled) .af-checkbox__checked,.af-checkbox label:has(input[type=checkbox]:disabled) .af-checkbox__content>svg,.af-checkbox label:has(input[type=checkbox]:disabled) .af-checkbox__unchecked{color:var(--color-btn-disabled-text);fill:var(--color-btn-disabled-text)}.af-checkbox-select label:has(input[type=checkbox]:disabled){background-color:var(--color-gray-200);box-shadow:0 0 0 1px var(--box-shadow-color) inset;color:var(--color-btn-disabled-text);--box-shadow-color:var(--color-gray-400)}.af-checkbox-select label:has(input[type=checkbox][aria-invalid=true]){--box-shadow-color:var(--color-red-700);box-shadow:0 0 0 2px var(--box-shadow-color) inset}.af-checkbox label input[type=checkbox]:focus-visible~.af-checkbox__icons .af-checkbox__checked,.af-checkbox label input[type=checkbox]:focus-visible~.af-checkbox__icons .af-checkbox__unchecked{outline:2px solid var(--color-blue-3);outline-offset:3px}.af-checkbox label:hover:not(:has(input[type=checkbox]:disabled)) .af-checkbox__unchecked{color:var(--color-axa);fill:var(--color-axa)}.af-checkbox-select label:hover:not(:has(input[type=checkbox]:disabled)){--box-shadow-color:var(--color-axa);box-shadow:0 0 0 1px var(--box-shadow-color) inset}.af-checkbox-select{color:var(--color-gray-700);display:flex;flex-direction:column;font-family:var(--font-family-base);font-style:normal;font-weight:400;gap:1rem;line-height:1.25rem}.af-checkbox-select--horizontal{flex-direction:row}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Form/Checkbox/Checkbox.scss%23sass","../../../src/Form/Checkbox/Checkbox.scss"],"names":[],"mappings":"AAEA,aACE,4CCDF,CDGE,eACE,qBCDJ,CDIE,wBACE,YAAA,CACA,qBAAA,CACA,QCFJ,CDKE,8BACE,YAAA,CACA,qBAAA,CACA,0CCHJ,CDME,oBAGE,2BAAA,CAFA,kBAAA,CACA,eCHJ,CDOE,0BAIE,2BAAA,CAHA,iBAAA,CACA,eAAA,CACA,oBCJJ,CDOI,wBANF,0BAOI,cAAA,CACA,mBCJJ,CACF,CDOE,sBAGE,kBAAA,CAFA,YAAA,CAIA,QAAA,CADA,sBAAA,CAFA,UCFJ,CDOI,0BAGE,sBAAA,CADA,cAAA,CADA,aAAA,CAGA,qBCLN,CDQI,wDACE,YAAA,CACA,qBAAA,CACA,UAAA,CACA,mBCNN,CDQM,yEAEE,2BAAA,CADA,kBCLR,CDSM,+EACE,2BCPR,CDYE,sDACE,qBAAA,CACA,SCVJ,CDaE,gCACE,cAAA,CACA,mBCXJ,CDcE,iCAGE,kBAAA,CAIA,0BAAA,CANA,YAAA,CAIA,4CAAA,CADA,SAAA,CAEA,mBAAA,CAJA,kBCPJ,CDcI,qCAEE,0BAAA,CADA,UAAA,CAEA,yBCZN,CDgBE,wCACE,eCdJ,CDiBE,mBAIE,kBAAA,CADA,0CAAA,CAGA,cAAA,CALA,YAAA,CAIA,UAAA,CAHA,QCXJ,CDkBE,0BAGE,kBAAA,CACA,kDAAA,CAHA,aAAA,CACA,YAAA,CAIA,oCCjBJ,CDoBE,sCAKE,qBAAA,CAEA,KAAA,CAJA,WAAA,CAGA,0BAAA,CAFA,YAAA,CAHA,iBAAA,CAOA,iBAAA,CANA,WCZJ,CDoBI,0DAGE,SAAA,CAFA,iBAAA,CACA,QCjBN,CDsBE,kCACE,aCpBJ,CDuBE,wCAEE,kBAAA,CACA,SAAA,CAFA,iBCnBJ,CDuBI,4DAEE,kBAAA,CAEA,mCAAA,CACA,iCAAA,CAJA,YAAA,CAEA,UCnBN,CDuBM,sKAIE,kBAAA,CADA,cAAA,CADA,aCpBR,CDyBM,kFACE,YCvBR,CD0BM,oFACE,2BAAA,CACA,0BCxBR,CD8BI,8KAEE,0BAAA,CACA,yBC7BN,CDkCI,2EAEE,sBAAA,CADA,aAAA,CAEA,qBChCN,CDmCI,6EACE,YCjCN,CDqCE,oDACE,mCCnCJ,CDsCE,4DACE,oCAAA,CACA,2CCpCJ,CDuCE,sDACE,cCrCJ,CDuCI,0OAGE,oCAAA,CACA,mCCvCN,CD2CE,6DAEE,sCAAA,CACA,kDAAA,CAFA,oCAAA,CAIA,wCC1CJ,CD6CE,uEACE,uCAAA,CAEA,kDC5CJ,CDgDI,kMAEE,qCAAA,CACA,kBC/CN,CDoDI,0FACE,sBAAA,CACA,qBClDN,CDsDE,yEACE,mCAAA,CAEA,kDCrDJ,CDwDE,oBAQE,2BAAA,CAPA,YAAA,CACA,qBAAA,CAEA,mCAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,mBCrDJ,CDwDI,gCACE,kBCtDN","file":"Checkbox.css","sourcesContent":["@use \"../../common/common\" as common;\n\n.af-checkbox {\n font-family: \"Source Sans Pro\", arial, sans-serif;\n\n * {\n box-sizing: border-box;\n }\n\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: common.rem(18);\n font-weight: 600;\n color: var(--color-gray-900);\n }\n\n &__description {\n font-size: common.rem(14);\n font-weight: 400;\n line-height: common.rem(18);\n color: var(--color-gray-700);\n\n @media (width > #{common.$breakpoint-md}) {\n font-size: common.rem(16);\n line-height: common.rem(20);\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: 1.75rem;\n height: 1.75rem;\n color: var(--color-axa);\n fill: var(--color-axa);\n }\n\n & &-description {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n line-height: 1.25rem;\n\n & > span:first-child {\n line-height: 1.4rem;\n color: var(--color-gray-900);\n }\n\n & > span:not(:first-child) {\n color: var(--color-gray-700);\n }\n }\n }\n\n &-select--horizontal &__content {\n flex-direction: column;\n gap: 0.5rem;\n }\n\n &__group-description {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n\n & ~ &__error {\n display: flex;\n margin-left: 3.2rem;\n align-items: center;\n gap: 0.5rem;\n font-family: \"Source Sans Pro\", arial, sans-serif;\n line-height: 1.25rem;\n color: var(--color-red-700);\n\n & > svg {\n width: 1rem;\n color: var(--color-red-700);\n fill: var(--color-red-700);\n }\n }\n\n &-select ~ &__error {\n margin: 1rem 0 0;\n }\n\n & label {\n display: flex;\n margin: 0;\n border-radius: var(--default-border-radius);\n align-items: center;\n gap: 0.75rem;\n cursor: pointer;\n }\n\n &-select label {\n height: 6.4rem;\n padding: 1rem;\n align-items: center;\n box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n\n --box-shadow-color: #{var(--color-gray)};\n }\n\n &-select--horizontal label {\n position: relative;\n width: 12rem;\n height: auto;\n padding: 1rem;\n flex-direction: column;\n justify-content: flex-start;\n gap: 0;\n text-align: center;\n\n & .af-checkbox__icons {\n position: absolute;\n top: 1rem;\n left: 1rem;\n }\n }\n\n &-select.subgrid label {\n width: inherit;\n }\n\n & label input[type=\"checkbox\"] {\n position: absolute;\n margin-right: 0.5rem;\n opacity: 0;\n\n & ~ .af-checkbox__icons {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n background-color: var(--color-white);\n clip-path: inset(0.22rem round 2px);\n\n & .af-checkbox__checked,\n & .af-checkbox__unchecked {\n width: 1.75rem;\n height: 1.75rem;\n align-items: center;\n }\n\n & .af-checkbox__checked {\n display: none;\n }\n\n & .af-checkbox__unchecked {\n color: var(--color-gray-700);\n fill: var(--color-gray-700);\n }\n }\n }\n\n & label:has(input[type=\"checkbox\"][aria-invalid=\"true\"]) {\n & .af-checkbox__checked,\n & .af-checkbox__unchecked {\n color: var(--color-red-700);\n fill: var(--color-red-700);\n }\n }\n\n & label:has(input[type=\"checkbox\"]:checked) {\n & .af-checkbox__checked {\n display: block;\n color: var(--color-axa);\n fill: var(--color-axa);\n }\n\n & .af-checkbox__unchecked {\n display: none;\n }\n }\n\n &-select label:has(input[type=\"checkbox\"]) {\n background-color: var(--color-white);\n }\n\n &-select label:has(input[type=\"checkbox\"]:checked) {\n background-color: var(--color-blue-2);\n box-shadow: 0 0 0 2px var(--color-axa) inset;\n }\n\n & label:has(input[type=\"checkbox\"]:disabled) {\n cursor: default;\n\n & .af-checkbox__content > svg,\n & .af-checkbox__checked,\n & .af-checkbox__unchecked {\n color: var(--color-btn-disabled-text);\n fill: var(--color-btn-disabled-text);\n }\n }\n\n &-select label:has(input[type=\"checkbox\"]:disabled) {\n color: var(--color-btn-disabled-text);\n background-color: var(--color-gray-200);\n box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n\n --box-shadow-color: #{var(--color-gray-400)};\n }\n\n &-select label:has(input[type=\"checkbox\"][aria-invalid=\"true\"]) {\n --box-shadow-color: #{var(--color-red-700)};\n\n box-shadow: 0 0 0 2px var(--box-shadow-color) inset;\n }\n\n & label input[type=\"checkbox\"]:focus-visible ~ .af-checkbox__icons {\n & .af-checkbox__unchecked,\n & .af-checkbox__checked {\n outline: 2px solid var(--color-blue-3);\n outline-offset: 3px;\n }\n }\n\n & label:hover:not(:has(input[type=\"checkbox\"]:disabled)) {\n & .af-checkbox__unchecked {\n color: var(--color-axa);\n fill: var(--color-axa);\n }\n }\n\n &-select label:hover:not(:has(input[type=\"checkbox\"]:disabled)) {\n --box-shadow-color: var(--color-axa);\n\n box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n }\n\n &-select {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n font-family: var(--font-family-base);\n font-style: normal;\n font-weight: 400;\n line-height: 1.25rem;\n color: var(--color-gray-700);\n\n &--horizontal {\n flex-direction: row;\n }\n }\n}\n","@use \"../../common/common\" as common;\n\n.af-checkbox {\n font-family: \"Source Sans Pro\", arial, sans-serif;\n\n * {\n box-sizing: border-box;\n }\n\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: common.rem(18);\n font-weight: 600;\n color: var(--color-gray-900);\n }\n\n &__description {\n font-size: common.rem(14);\n font-weight: 400;\n line-height: common.rem(18);\n color: var(--color-gray-700);\n\n @media (width > #{common.$breakpoint-md}) {\n font-size: common.rem(16);\n line-height: common.rem(20);\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: 1.75rem;\n height: 1.75rem;\n color: var(--color-axa);\n fill: var(--color-axa);\n }\n\n & &-description {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n line-height: 1.25rem;\n\n & > span:first-child {\n line-height: 1.4rem;\n color: var(--color-gray-900);\n }\n\n & > span:not(:first-child) {\n color: var(--color-gray-700);\n }\n }\n }\n\n &-select--horizontal &__content {\n flex-direction: column;\n gap: 0.5rem;\n }\n\n &__group-description {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n\n & ~ &__error {\n display: flex;\n margin-left: 3.2rem;\n align-items: center;\n gap: 0.5rem;\n font-family: \"Source Sans Pro\", arial, sans-serif;\n line-height: 1.25rem;\n color: var(--color-red-700);\n\n & > svg {\n width: 1rem;\n color: var(--color-red-700);\n fill: var(--color-red-700);\n }\n }\n\n &-select ~ &__error {\n margin: 1rem 0 0;\n }\n\n & label {\n display: flex;\n margin: 0;\n border-radius: var(--default-border-radius);\n align-items: center;\n gap: 0.75rem;\n cursor: pointer;\n }\n\n &-select label {\n height: 6.4rem;\n padding: 1rem;\n align-items: center;\n box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n\n --box-shadow-color: #{var(--color-gray)};\n }\n\n &-select--horizontal label {\n position: relative;\n width: 12rem;\n height: auto;\n padding: 1rem;\n flex-direction: column;\n justify-content: flex-start;\n gap: 0;\n text-align: center;\n\n & .af-checkbox__icons {\n position: absolute;\n top: 1rem;\n left: 1rem;\n }\n }\n\n &-select.subgrid label {\n width: inherit;\n }\n\n & label input[type=\"checkbox\"] {\n position: absolute;\n margin-right: 0.5rem;\n opacity: 0;\n\n & ~ .af-checkbox__icons {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n background-color: var(--color-white);\n clip-path: inset(0.22rem round 2px);\n\n & .af-checkbox__checked,\n & .af-checkbox__unchecked {\n width: 1.75rem;\n height: 1.75rem;\n align-items: center;\n }\n\n & .af-checkbox__checked {\n display: none;\n }\n\n & .af-checkbox__unchecked {\n color: var(--color-gray-700);\n fill: var(--color-gray-700);\n }\n }\n }\n\n & label:has(input[type=\"checkbox\"][aria-invalid=\"true\"]) {\n & .af-checkbox__checked,\n & .af-checkbox__unchecked {\n color: var(--color-red-700);\n fill: var(--color-red-700);\n }\n }\n\n & label:has(input[type=\"checkbox\"]:checked) {\n & .af-checkbox__checked {\n display: block;\n color: var(--color-axa);\n fill: var(--color-axa);\n }\n\n & .af-checkbox__unchecked {\n display: none;\n }\n }\n\n &-select label:has(input[type=\"checkbox\"]) {\n background-color: var(--color-white);\n }\n\n &-select label:has(input[type=\"checkbox\"]:checked) {\n background-color: var(--color-blue-2);\n box-shadow: 0 0 0 2px var(--color-axa) inset;\n }\n\n & label:has(input[type=\"checkbox\"]:disabled) {\n cursor: default;\n\n & .af-checkbox__content > svg,\n & .af-checkbox__checked,\n & .af-checkbox__unchecked {\n color: var(--color-btn-disabled-text);\n fill: var(--color-btn-disabled-text);\n }\n }\n\n &-select label:has(input[type=\"checkbox\"]:disabled) {\n color: var(--color-btn-disabled-text);\n background-color: var(--color-gray-200);\n box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n\n --box-shadow-color: #{var(--color-gray-400)};\n }\n\n &-select label:has(input[type=\"checkbox\"][aria-invalid=\"true\"]) {\n --box-shadow-color: #{var(--color-red-700)};\n\n box-shadow: 0 0 0 2px var(--box-shadow-color) inset;\n }\n\n & label input[type=\"checkbox\"]:focus-visible ~ .af-checkbox__icons {\n & .af-checkbox__unchecked,\n & .af-checkbox__checked {\n outline: 2px solid var(--color-blue-3);\n outline-offset: 3px;\n }\n }\n\n & label:hover:not(:has(input[type=\"checkbox\"]:disabled)) {\n & .af-checkbox__unchecked {\n color: var(--color-axa);\n fill: var(--color-axa);\n }\n }\n\n &-select label:hover:not(:has(input[type=\"checkbox\"]:disabled)) {\n --box-shadow-color: var(--color-axa);\n\n box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n }\n\n &-select {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n font-family: var(--font-family-base);\n font-style: normal;\n font-weight: 400;\n line-height: 1.25rem;\n color: var(--color-gray-700);\n\n &--horizontal {\n flex-direction: row;\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/Form/Checkbox/Checkbox.scss%23sass","../../../src/Form/Checkbox/Checkbox.scss"],"names":[],"mappings":"AAEA,aACE,4CCDF,CDGE,gBACE,SAAA,CACA,YAAA,CACA,sBAAA,CACA,SCDJ,CDIE,gBACE,SCFJ,CDKE,eACE,qBCHJ,CDME,wBACE,YAAA,CACA,qBAAA,CACA,QCJJ,CDOE,8BACE,YAAA,CACA,qBAAA,CACA,0CCLJ,CDQE,oBAGE,2BAAA,CAFA,kBAAA,CACA,eCLJ,CDSE,0BAIE,2BAAA,CAHA,iBAAA,CACA,eAAA,CACA,oBCNJ,CDSI,wBANF,0BCAA,cAAA,CDQI,mBCNJ,CACF,CDSE,sBAGE,kBAAA,CAFA,YAAA,CAGA,QAAA,CAFA,UCLJ,CDSI,0BAGE,sBAAA,CADA,cAAA,CADA,aAAA,CAGA,qBCPN,CDUI,wDACE,YAAA,CACA,qBAAA,CACA,UAAA,CACA,mBCRN,CDUM,yEAGE,2BAAA,CAFA,kBAAA,CACA,kBCPR,CDWM,+EACE,2BCTR,CDcE,sGAIE,eCfJ,CDkBE,sDACE,qBAAA,CACA,SChBJ,CDmBE,gCACE,cAAA,CACA,mBCjBJ,CDoBE,iCAGE,kBAAA,CAIA,0BAAA,CANA,YAAA,CAIA,4CAAA,CADA,SAAA,CAEA,mBAAA,CAJA,kBCbJ,CDoBI,qCAEE,0BAAA,CADA,UAAA,CAEA,yBClBN,CDsBE,wCACE,eCpBJ,CDuBE,mBAIE,kBAAA,CADA,0CAAA,CAGA,cAAA,CALA,YAAA,CAIA,UAAA,CAHA,QCjBJ,CDwBE,0BAEE,kBAAA,CACA,kDAAA,CAFA,YAAA,CAIA,oCCvBJ,CD0BE,iCACE,qBCxBJ,CD2BE,sCAKE,qBAAA,CAEA,KAAA,CAJA,WAAA,CAGA,0BAAA,CAFA,YAAA,CAHA,iBAAA,CAOA,iBAAA,CANA,WCnBJ,CD2BI,0DAGE,SAAA,CAFA,iBAAA,CACA,QCxBN,CD6BE,kCACE,aC3BJ,CD8BE,wCAEE,kBAAA,CACA,SAAA,CAFA,iBC1BJ,CD8BI,4DAEE,kBAAA,CAEA,mCAAA,CACA,iCAAA,CAJA,YAAA,CAEA,UC1BN,CD8BM,sKAIE,kBAAA,CADA,cAAA,CADA,aC3BR,CDgCM,kFACE,YC9BR,CDiCM,oFACE,2BAAA,CACA,0BC/BR,CDqCI,8KAEE,0BAAA,CACA,yBCpCN,CDyCI,2EAEE,sBAAA,CADA,aAAA,CAEA,qBCvCN,CD0CI,6EACE,YCxCN,CD4CE,oDACE,mCC1CJ,CD6CE,4DACE,oCAAA,CACA,2CC3CJ,CD8CE,sDACE,cC5CJ,CD8CI,0OAGE,oCAAA,CACA,mCC9CN,CDkDE,6DAEE,sCAAA,CACA,kDAAA,CAFA,oCAAA,CAIA,wCCjDJ,CDoDE,uEACE,uCAAA,CAEA,kDCnDJ,CDuDI,kMAEE,qCAAA,CACA,kBCtDN,CD2DI,0FACE,sBAAA,CACA,qBCzDN,CD6DE,yEACE,mCAAA,CAEA,kDC5DJ,CD+DE,oBAQE,2BAAA,CAPA,YAAA,CACA,qBAAA,CAEA,mCAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,mBC5DJ,CD+DI,gCACE,kBC7DN","file":"Checkbox.css","sourcesContent":["@use \"../../common/common\" as common;\n\n.af-checkbox {\n font-family: \"Source Sans Pro\", arial, sans-serif;\n\n ul {\n all: unset;\n display: flex;\n flex-direction: inherit;\n gap: 0.5rem;\n }\n\n li {\n all: unset;\n }\n\n * {\n box-sizing: border-box;\n }\n\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: common.rem(18);\n font-weight: 600;\n color: var(--color-gray-900);\n }\n\n &__description {\n font-size: common.rem(14);\n font-weight: 400;\n line-height: common.rem(18);\n color: var(--color-gray-700);\n\n @media (width > #{common.$breakpoint-md}) {\n font-size: common.rem(16);\n line-height: common.rem(20);\n }\n }\n\n &__content {\n display: flex;\n width: 100%;\n align-items: center;\n gap: 1rem;\n\n & > svg {\n width: 1.75rem;\n height: 1.75rem;\n color: var(--color-axa);\n fill: var(--color-axa);\n }\n\n & &-description {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n line-height: 1.25rem;\n\n & > span:first-child {\n font-size: common.rem(18);\n line-height: 1.4rem;\n color: var(--color-gray-900);\n }\n\n & > span:not(:first-child) {\n color: var(--color-gray-700);\n }\n }\n }\n\n input[type=\"checkbox\"]:checked\n ~ &__content\n &__content-description\n > span:first-child {\n font-weight: 600;\n }\n\n &-select--horizontal &__content {\n flex-direction: column;\n gap: 0.5rem;\n }\n\n &__group-description {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n\n & ~ &__error {\n display: flex;\n margin-left: 3.2rem;\n align-items: center;\n gap: 0.5rem;\n font-family: \"Source Sans Pro\", arial, sans-serif;\n line-height: 1.25rem;\n color: var(--color-red-700);\n\n & > svg {\n width: 1rem;\n color: var(--color-red-700);\n fill: var(--color-red-700);\n }\n }\n\n &-select ~ &__error {\n margin: 1rem 0 0;\n }\n\n & label {\n display: flex;\n margin: 0;\n border-radius: var(--default-border-radius);\n align-items: center;\n gap: 0.75rem;\n cursor: pointer;\n }\n\n &-select label {\n padding: 1rem;\n align-items: center;\n box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n\n --box-shadow-color: #{var(--color-gray)};\n }\n\n &-select--vertical ul {\n flex-direction: column;\n }\n\n &-select--horizontal label {\n position: relative;\n width: 12rem;\n height: auto;\n padding: 1rem;\n flex-direction: column;\n justify-content: flex-start;\n gap: 0;\n text-align: center;\n\n & .af-checkbox__icons {\n position: absolute;\n top: 1rem;\n left: 1rem;\n }\n }\n\n &-select.subgrid label {\n width: inherit;\n }\n\n & label input[type=\"checkbox\"] {\n position: absolute;\n margin-right: 0.5rem;\n opacity: 0;\n\n & ~ .af-checkbox__icons {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n background-color: var(--color-white);\n clip-path: inset(0.22rem round 2px);\n\n & .af-checkbox__checked,\n & .af-checkbox__unchecked {\n width: 1.75rem;\n height: 1.75rem;\n align-items: center;\n }\n\n & .af-checkbox__checked {\n display: none;\n }\n\n & .af-checkbox__unchecked {\n color: var(--color-gray-700);\n fill: var(--color-gray-700);\n }\n }\n }\n\n & label:has(input[type=\"checkbox\"][aria-invalid=\"true\"]) {\n & .af-checkbox__checked,\n & .af-checkbox__unchecked {\n color: var(--color-red-700);\n fill: var(--color-red-700);\n }\n }\n\n & label:has(input[type=\"checkbox\"]:checked) {\n & .af-checkbox__checked {\n display: block;\n color: var(--color-axa);\n fill: var(--color-axa);\n }\n\n & .af-checkbox__unchecked {\n display: none;\n }\n }\n\n &-select label:has(input[type=\"checkbox\"]) {\n background-color: var(--color-white);\n }\n\n &-select label:has(input[type=\"checkbox\"]:checked) {\n background-color: var(--color-blue-2);\n box-shadow: 0 0 0 2px var(--color-axa) inset;\n }\n\n & label:has(input[type=\"checkbox\"]:disabled) {\n cursor: default;\n\n & .af-checkbox__content > svg,\n & .af-checkbox__checked,\n & .af-checkbox__unchecked {\n color: var(--color-btn-disabled-text);\n fill: var(--color-btn-disabled-text);\n }\n }\n\n &-select label:has(input[type=\"checkbox\"]:disabled) {\n color: var(--color-btn-disabled-text);\n background-color: var(--color-gray-200);\n box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n\n --box-shadow-color: #{var(--color-gray-400)};\n }\n\n &-select label:has(input[type=\"checkbox\"][aria-invalid=\"true\"]) {\n --box-shadow-color: #{var(--color-red-700)};\n\n box-shadow: 0 0 0 2px var(--box-shadow-color) inset;\n }\n\n & label input[type=\"checkbox\"]:focus-visible ~ .af-checkbox__icons {\n & .af-checkbox__unchecked,\n & .af-checkbox__checked {\n outline: 2px solid var(--color-blue-3);\n outline-offset: 3px;\n }\n }\n\n & label:hover:not(:has(input[type=\"checkbox\"]:disabled)) {\n & .af-checkbox__unchecked {\n color: var(--color-axa);\n fill: var(--color-axa);\n }\n }\n\n &-select label:hover:not(:has(input[type=\"checkbox\"]:disabled)) {\n --box-shadow-color: var(--color-axa);\n\n box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n }\n\n &-select {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n font-family: var(--font-family-base);\n font-style: normal;\n font-weight: 400;\n line-height: 1.25rem;\n color: var(--color-gray-700);\n\n &--horizontal {\n flex-direction: row;\n }\n }\n}\n","@use \"../../common/common\" as common;\n\n.af-checkbox {\n font-family: \"Source Sans Pro\", arial, sans-serif;\n\n ul {\n all: unset;\n display: flex;\n flex-direction: inherit;\n gap: 0.5rem;\n }\n\n li {\n all: unset;\n }\n\n * {\n box-sizing: border-box;\n }\n\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: common.rem(18);\n font-weight: 600;\n color: var(--color-gray-900);\n }\n\n &__description {\n font-size: common.rem(14);\n font-weight: 400;\n line-height: common.rem(18);\n color: var(--color-gray-700);\n\n @media (width > #{common.$breakpoint-md}) {\n font-size: common.rem(16);\n line-height: common.rem(20);\n }\n }\n\n &__content {\n display: flex;\n width: 100%;\n align-items: center;\n gap: 1rem;\n\n & > svg {\n width: 1.75rem;\n height: 1.75rem;\n color: var(--color-axa);\n fill: var(--color-axa);\n }\n\n & &-description {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n line-height: 1.25rem;\n\n & > span:first-child {\n font-size: common.rem(18);\n line-height: 1.4rem;\n color: var(--color-gray-900);\n }\n\n & > span:not(:first-child) {\n color: var(--color-gray-700);\n }\n }\n }\n\n input[type=\"checkbox\"]:checked\n ~ &__content\n &__content-description\n > span:first-child {\n font-weight: 600;\n }\n\n &-select--horizontal &__content {\n flex-direction: column;\n gap: 0.5rem;\n }\n\n &__group-description {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n\n & ~ &__error {\n display: flex;\n margin-left: 3.2rem;\n align-items: center;\n gap: 0.5rem;\n font-family: \"Source Sans Pro\", arial, sans-serif;\n line-height: 1.25rem;\n color: var(--color-red-700);\n\n & > svg {\n width: 1rem;\n color: var(--color-red-700);\n fill: var(--color-red-700);\n }\n }\n\n &-select ~ &__error {\n margin: 1rem 0 0;\n }\n\n & label {\n display: flex;\n margin: 0;\n border-radius: var(--default-border-radius);\n align-items: center;\n gap: 0.75rem;\n cursor: pointer;\n }\n\n &-select label {\n padding: 1rem;\n align-items: center;\n box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n\n --box-shadow-color: #{var(--color-gray)};\n }\n\n &-select--vertical ul {\n flex-direction: column;\n }\n\n &-select--horizontal label {\n position: relative;\n width: 12rem;\n height: auto;\n padding: 1rem;\n flex-direction: column;\n justify-content: flex-start;\n gap: 0;\n text-align: center;\n\n & .af-checkbox__icons {\n position: absolute;\n top: 1rem;\n left: 1rem;\n }\n }\n\n &-select.subgrid label {\n width: inherit;\n }\n\n & label input[type=\"checkbox\"] {\n position: absolute;\n margin-right: 0.5rem;\n opacity: 0;\n\n & ~ .af-checkbox__icons {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n background-color: var(--color-white);\n clip-path: inset(0.22rem round 2px);\n\n & .af-checkbox__checked,\n & .af-checkbox__unchecked {\n width: 1.75rem;\n height: 1.75rem;\n align-items: center;\n }\n\n & .af-checkbox__checked {\n display: none;\n }\n\n & .af-checkbox__unchecked {\n color: var(--color-gray-700);\n fill: var(--color-gray-700);\n }\n }\n }\n\n & label:has(input[type=\"checkbox\"][aria-invalid=\"true\"]) {\n & .af-checkbox__checked,\n & .af-checkbox__unchecked {\n color: var(--color-red-700);\n fill: var(--color-red-700);\n }\n }\n\n & label:has(input[type=\"checkbox\"]:checked) {\n & .af-checkbox__checked {\n display: block;\n color: var(--color-axa);\n fill: var(--color-axa);\n }\n\n & .af-checkbox__unchecked {\n display: none;\n }\n }\n\n &-select label:has(input[type=\"checkbox\"]) {\n background-color: var(--color-white);\n }\n\n &-select label:has(input[type=\"checkbox\"]:checked) {\n background-color: var(--color-blue-2);\n box-shadow: 0 0 0 2px var(--color-axa) inset;\n }\n\n & label:has(input[type=\"checkbox\"]:disabled) {\n cursor: default;\n\n & .af-checkbox__content > svg,\n & .af-checkbox__checked,\n & .af-checkbox__unchecked {\n color: var(--color-btn-disabled-text);\n fill: var(--color-btn-disabled-text);\n }\n }\n\n &-select label:has(input[type=\"checkbox\"]:disabled) {\n color: var(--color-btn-disabled-text);\n background-color: var(--color-gray-200);\n box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n\n --box-shadow-color: #{var(--color-gray-400)};\n }\n\n &-select label:has(input[type=\"checkbox\"][aria-invalid=\"true\"]) {\n --box-shadow-color: #{var(--color-red-700)};\n\n box-shadow: 0 0 0 2px var(--box-shadow-color) inset;\n }\n\n & label input[type=\"checkbox\"]:focus-visible ~ .af-checkbox__icons {\n & .af-checkbox__unchecked,\n & .af-checkbox__checked {\n outline: 2px solid var(--color-blue-3);\n outline-offset: 3px;\n }\n }\n\n & label:hover:not(:has(input[type=\"checkbox\"]:disabled)) {\n & .af-checkbox__unchecked {\n color: var(--color-axa);\n fill: var(--color-axa);\n }\n }\n\n &-select label:hover:not(:has(input[type=\"checkbox\"]:disabled)) {\n --box-shadow-color: var(--color-axa);\n\n box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n }\n\n &-select {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n font-family: var(--font-family-base);\n font-style: normal;\n font-weight: 400;\n line-height: 1.25rem;\n color: var(--color-gray-700);\n\n &--horizontal {\n flex-direction: row;\n }\n }\n}\n"]}
|
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
.af-checkbox {
|
|
4
4
|
font-family: "Source Sans Pro", arial, sans-serif;
|
|
5
5
|
|
|
6
|
+
ul {
|
|
7
|
+
all: unset;
|
|
8
|
+
display: flex;
|
|
9
|
+
flex-direction: inherit;
|
|
10
|
+
gap: 0.5rem;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
li {
|
|
14
|
+
all: unset;
|
|
15
|
+
}
|
|
16
|
+
|
|
6
17
|
* {
|
|
7
18
|
box-sizing: border-box;
|
|
8
19
|
}
|
|
@@ -41,7 +52,6 @@
|
|
|
41
52
|
display: flex;
|
|
42
53
|
width: 100%;
|
|
43
54
|
align-items: center;
|
|
44
|
-
justify-content: center;
|
|
45
55
|
gap: 1rem;
|
|
46
56
|
|
|
47
57
|
& > svg {
|
|
@@ -58,6 +68,7 @@
|
|
|
58
68
|
line-height: 1.25rem;
|
|
59
69
|
|
|
60
70
|
& > span:first-child {
|
|
71
|
+
font-size: common.rem(18);
|
|
61
72
|
line-height: 1.4rem;
|
|
62
73
|
color: var(--color-gray-900);
|
|
63
74
|
}
|
|
@@ -68,6 +79,13 @@
|
|
|
68
79
|
}
|
|
69
80
|
}
|
|
70
81
|
|
|
82
|
+
input[type="checkbox"]:checked
|
|
83
|
+
~ &__content
|
|
84
|
+
&__content-description
|
|
85
|
+
> span:first-child {
|
|
86
|
+
font-weight: 600;
|
|
87
|
+
}
|
|
88
|
+
|
|
71
89
|
&-select--horizontal &__content {
|
|
72
90
|
flex-direction: column;
|
|
73
91
|
gap: 0.5rem;
|
|
@@ -108,7 +126,6 @@
|
|
|
108
126
|
}
|
|
109
127
|
|
|
110
128
|
&-select label {
|
|
111
|
-
height: 6.4rem;
|
|
112
129
|
padding: 1rem;
|
|
113
130
|
align-items: center;
|
|
114
131
|
box-shadow: 0 0 0 1px var(--box-shadow-color) inset;
|
|
@@ -116,6 +133,10 @@
|
|
|
116
133
|
--box-shadow-color: #{var(--color-gray)};
|
|
117
134
|
}
|
|
118
135
|
|
|
136
|
+
&-select--vertical ul {
|
|
137
|
+
flex-direction: column;
|
|
138
|
+
}
|
|
139
|
+
|
|
119
140
|
&-select--horizontal label {
|
|
120
141
|
position: relative;
|
|
121
142
|
width: 12rem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-radio{font-family:Source Sans Pro,arial,sans-serif}.af-radio *{box-sizing:border-box}.af-radio__container{display:flex;flex-direction:column;gap:1rem}.af-radio__label-container{display:flex;flex-direction:column;row-gap:calc(4/var(--font-size-base)*1rem)}.af-radio__label{color:var(--color-gray-900);font-size:1.125rem;font-weight:600}.af-radio__description{color:var(--color-gray-700);font-size:.875rem;font-weight:400;line-height:1.125rem}@media (width > 1023px){.af-radio__description{font-size:1rem;line-height:1.25rem}}.af-radio__content{align-items:center;display:flex;gap:1rem;justify-content:center}.af-radio__content>svg{color:var(--color-axa);height:1.75rem;width:1.75rem;fill:var(--color-axa)}.af-radio__content .af-radio__content-description{display:flex;flex-direction:column;gap:.25rem;line-height:1.25rem}.af-radio__content .af-radio__content-description>span:first-child{color:var(--color-gray-900);font-size:1.125rem;line-height:1.4rem}.af-radio__content .af-radio__content-description>span:not(:first-child){color:var(--color-gray-700)}.af-radio-select--horizontal .af-radio__content{flex-direction:column;gap:.5rem}.af-radio__group-description{font-size:1rem;line-height:1.25rem}.af-radio~.af-input-error{gap:.5rem}.af-radio~.af-input-error__message{line-height:1.25rem}.af-radio label{align-items:flex-start;border-radius:var(--default-border-radius);cursor:pointer;display:flex;gap:.75rem;margin:0}.af-radio-select label{align-items:center;box-shadow:0 0 0 1px var(--box-shadow-color) inset;
|
|
1
|
+
.af-radio{font-family:Source Sans Pro,arial,sans-serif}.af-radio *{box-sizing:border-box}.af-radio__container{display:flex;flex-direction:column;gap:1rem}.af-radio__label-container{display:flex;flex-direction:column;row-gap:calc(4/var(--font-size-base)*1rem)}.af-radio__label{color:var(--color-gray-900);font-size:1.125rem;font-weight:600}.af-radio__description{color:var(--color-gray-700);font-size:.875rem;font-weight:400;line-height:1.125rem}@media (width > 1023px){.af-radio__description{font-size:1rem;line-height:1.25rem}}.af-radio__content{align-items:center;display:flex;gap:1rem;justify-content:center}.af-radio__content>svg{color:var(--color-axa);height:1.75rem;width:1.75rem;fill:var(--color-axa)}.af-radio__content .af-radio__content-description{display:flex;flex-direction:column;gap:.25rem;line-height:1.25rem}.af-radio__content .af-radio__content-description>span:first-child{color:var(--color-gray-900);font-size:1.125rem;line-height:1.4rem}.af-radio__content .af-radio__content-description>span:not(:first-child){color:var(--color-gray-700)}.af-radio-select--horizontal .af-radio__content{flex-direction:column;gap:.5rem}.af-radio__group-description{font-size:1rem;line-height:1.25rem}.af-radio~.af-input-error{gap:.5rem}.af-radio~.af-input-error__message{line-height:1.25rem}.af-radio label{align-items:flex-start;border-radius:var(--default-border-radius);cursor:pointer;display:flex;gap:.75rem;margin:0}.af-radio-select label{align-items:center;box-shadow:0 0 0 1px var(--box-shadow-color) inset;padding:1rem;--box-shadow-color:var(--color-gray)}.af-radio[aria-invalid=true] :not(.af-radio__content *){color:var(--color-red-700);fill:var(--color-red-700)}.af-radio-select--horizontal label{flex-direction:column;gap:0;height:auto;justify-content:flex-start;padding:1rem;position:relative;text-align:center;width:12rem}.af-radio-select--horizontal label .af-radio__icons{left:1rem;position:absolute;top:1rem}.af-radio-select.subgrid label{width:inherit}.af-radio-select[aria-invalid=true] label{--box-shadow-color:var(--color-red-700);box-shadow:0 0 0 2px var(--box-shadow-color) inset}.af-radio label input[type=radio]{margin-right:.5rem;opacity:0;position:absolute}.af-radio label input[type=radio]~.af-radio__icons{align-items:center;background-color:var(--color-white);clip-path:circle(.72rem at 50% 50%);display:flex;gap:.75rem}.af-radio label input[type=radio]~.af-radio__icons .af-radio__checked,.af-radio label input[type=radio]~.af-radio__icons .af-radio__unchecked{align-items:center;height:1.75rem;width:1.75rem}.af-radio label input[type=radio]~.af-radio__icons .af-radio__checked{display:none}.af-radio label input[type=radio]~.af-radio__icons .af-radio__unchecked{color:var(--color-gray-700);fill:var(--color-gray-700)}.af-radio label:has(input[type=radio]:checked) .af-radio__checked{color:var(--color-axa);display:block;fill:var(--color-axa)}.af-radio label:has(input[type=radio]:checked) .af-radio__unchecked{display:none}.af-radio-select[aria-invalid=false] label:hover{--box-shadow-color:var(--color-axa);box-shadow:0 0 0 1px var(--box-shadow-color) inset}.af-radio label:has(input[type=radio]:disabled){cursor:default}.af-radio label:has(input[type=radio]:disabled) .af-radio__checked,.af-radio label:has(input[type=radio]:disabled) .af-radio__content>svg,.af-radio label:has(input[type=radio]:disabled) .af-radio__unchecked{color:var(--color-gray-500);fill:var(--color-gray-500)}.af-radio-select[aria-invalid=false] label:has(input[type=radio]){background-color:var(--color-white)}.af-radio-select[aria-invalid=false] label:has(input[type=radio]:checked){background-color:var(--color-blue-2);box-shadow:0 0 0 2px var(--color-axa) inset}.af-radio-select[aria-invalid=false] label:has(input[type=radio]:disabled){background-color:var(--color-gray-200);box-shadow:0 0 0 1px var(--box-shadow-color) inset;color:var(--color-gray-500);--box-shadow-color:var(--color-gray-400)}.af-radio label input[type=radio]:focus-visible~.af-radio__icons .af-radio__checked,.af-radio label input[type=radio]:focus-visible~.af-radio__icons .af-radio__unchecked{outline:2px solid var(--color-blue-3);outline-offset:3px}.af-radio label:hover:not(:has(input[type=radio]:disabled)) .af-radio__unchecked{color:var(--color-axa);fill:var(--color-axa)}.af-radio-select{color:var(--color-gray-700);display:flex;flex-direction:column;font-family:var(--font-family-base);font-style:normal;font-weight:400;gap:1rem;line-height:1.25rem}.af-radio-select--horizontal{flex-direction:row}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Form/Radio/Radio.scss%23sass","../../../src/Form/Radio/Radio.scss"],"names":[],"mappings":"AAEA,UACE,4CCDF,CDGE,YACE,qBCDJ,CDIE,qBACE,YAAA,CACA,qBAAA,CACA,QCFJ,CDKE,2BACE,YAAA,CACA,qBAAA,CACA,0CCHJ,CDME,iBAGE,2BAAA,CAFA,kBAAA,CACA,eCHJ,CDOE,uBAIE,2BAAA,CAHA,iBAAA,CACA,eAAA,CACA,oBCJJ,CDOI,wBANF,uBAOI,cAAA,CACA,mBCJJ,CACF,CDOE,mBAEE,kBAAA,CADA,YAAA,CAGA,QAAA,CADA,sBCJJ,CDOI,uBAGE,sBAAA,CADA,cAAA,CADA,aAAA,CAGA,qBCLN,CDQI,kDACE,YAAA,CACA,qBAAA,CACA,UAAA,CACA,mBCNN,CDQM,mEAGE,2BAAA,CAFA,kBAAA,CACA,kBCLR,CDSM,yEACE,2BCPR,CDYE,gDACE,qBAAA,CACA,SCVJ,CDaE,6BACE,cAAA,CACA,mBCXJ,CDcE,0BACE,SCZJ,CDcI,mCACE,mBCZN,CDgBE,gBAIE,sBAAA,CADA,0CAAA,CAGA,cAAA,CALA,YAAA,CAIA,UAAA,CAHA,QCVJ,CDiBE,uBAGE,kBAAA,CACA,kDAAA,CAHA,aAAA,CACA,YAAA,CAIA,oCChBJ,CDoBI,wDACE,0BAAA,CACA,yBClBN,CDsBE,mCAKE,qBAAA,CAEA,KAAA,CAJA,WAAA,CAGA,0BAAA,CAFA,YAAA,CAHA,iBAAA,CAOA,iBAAA,CANA,WCdJ,CDsBI,oDAGE,SAAA,CAFA,iBAAA,CACA,QCnBN,CDwBE,+BACE,aCtBJ,CDyBE,0CACE,uCAAA,CAEA,kDCxBJ,CD2BE,kCAEE,kBAAA,CACA,SAAA,CAFA,iBCvBJ,CD2BI,mDAEE,kBAAA,CAEA,mCAAA,CACA,mCAAA,CAJA,YAAA,CAEA,UCvBN,CD2BM,8IAIE,kBAAA,CADA,cAAA,CADA,aCxBR,CD6BM,sEACE,YC3BR,CD8BM,wEACE,2BAAA,CACA,0BC5BR,CDkCI,kEAEE,sBAAA,CADA,aAAA,CAEA,qBChCN,CDmCI,oEACE,YCjCN,CDqCE,iDACE,mCAAA,CAEA,kDCpCJ,CDuCE,gDACE,cCrCJ,CDuCI,+MAGE,2BAAA,CACA,0BCvCN,CD2CE,kEACE,mCCzCJ,CD4CE,0EACE,oCAAA,CACA,2CC1CJ,CD6CE,2EAEE,sCAAA,CACA,kDAAA,CAFA,2BAAA,CAIA,wCC5CJ,CDgDI,0KAEE,qCAAA,CACA,kBC/CN,CDoDI,iFACE,sBAAA,CACA,qBClDN,CDsDE,iBAQE,2BAAA,CAPA,YAAA,CACA,qBAAA,CAEA,mCAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,mBCnDJ,CDsDI,6BACE,kBCpDN","file":"Radio.css","sourcesContent":["@use \"../../common/common\" as common;\n\n.af-radio {\n font-family: \"Source Sans Pro\", arial, sans-serif;\n\n * {\n box-sizing: border-box;\n }\n\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: common.rem(18);\n font-weight: 600;\n color: var(--color-gray-900);\n }\n\n &__description {\n font-size: common.rem(14);\n font-weight: 400;\n line-height: common.rem(18);\n color: var(--color-gray-700);\n\n @media (width > #{common.$breakpoint-md}) {\n font-size: common.rem(16);\n line-height: common.rem(20);\n }\n }\n\n &__content {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n\n & > svg {\n width: 1.75rem;\n height: 1.75rem;\n color: var(--color-axa);\n fill: var(--color-axa);\n }\n\n & &-description {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n line-height: 1.25rem;\n\n & > span:first-child {\n font-size: 1.125rem;\n line-height: 1.4rem;\n color: var(--color-gray-900);\n }\n\n & > span:not(:first-child) {\n color: var(--color-gray-700);\n }\n }\n }\n\n &-select--horizontal &__content {\n flex-direction: column;\n gap: 0.5rem;\n }\n\n &__group-description {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n\n & ~ .af-input-error {\n gap: 0.5rem;\n\n &__message {\n line-height: 1.25rem;\n }\n }\n\n & label {\n display: flex;\n margin: 0;\n border-radius: var(--default-border-radius);\n align-items: flex-start;\n gap: 0.75rem;\n cursor: pointer;\n }\n\n &-select label {\n height: 6.4rem;\n padding: 1rem;\n align-items: center;\n box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n\n --box-shadow-color: var(--color-gray);\n }\n\n &[aria-invalid=\"true\"] {\n *:not(.af-radio__content *) {\n color: var(--color-red-700);\n fill: var(--color-red-700);\n }\n }\n\n &-select--horizontal label {\n position: relative;\n width: 12rem;\n height: auto;\n padding: 1rem;\n flex-direction: column;\n justify-content: flex-start;\n gap: 0;\n text-align: center;\n\n & .af-radio__icons {\n position: absolute;\n top: 1rem;\n left: 1rem;\n }\n }\n\n &-select.subgrid label {\n width: inherit;\n }\n\n &-select[aria-invalid=\"true\"] label {\n --box-shadow-color: var(--color-red-700);\n\n box-shadow: 0 0 0 2px var(--box-shadow-color) inset;\n }\n\n & label input[type=\"radio\"] {\n position: absolute;\n margin-right: 0.5rem;\n opacity: 0;\n\n & ~ .af-radio__icons {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n background-color: var(--color-white);\n clip-path: circle(0.72rem at 50% 50%);\n\n & .af-radio__checked,\n & .af-radio__unchecked {\n width: 1.75rem;\n height: 1.75rem;\n align-items: center;\n }\n\n & .af-radio__checked {\n display: none;\n }\n\n & .af-radio__unchecked {\n color: var(--color-gray-700);\n fill: var(--color-gray-700);\n }\n }\n }\n\n & label:has(input[type=\"radio\"]:checked) {\n & .af-radio__checked {\n display: block;\n color: var(--color-axa);\n fill: var(--color-axa);\n }\n\n & .af-radio__unchecked {\n display: none;\n }\n }\n\n &-select[aria-invalid=\"false\"] label:hover {\n --box-shadow-color: var(--color-axa);\n\n box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n }\n\n & label:has(input[type=\"radio\"]:disabled) {\n cursor: default;\n\n & .af-radio__content > svg,\n & .af-radio__checked,\n & .af-radio__unchecked {\n color: var(--color-gray-500);\n fill: var(--color-gray-500);\n }\n }\n\n &-select[aria-invalid=\"false\"] label:has(input[type=\"radio\"]) {\n background-color: var(--color-white);\n }\n\n &-select[aria-invalid=\"false\"] label:has(input[type=\"radio\"]:checked) {\n background-color: var(--color-blue-2);\n box-shadow: 0 0 0 2px var(--color-axa) inset;\n }\n\n &-select[aria-invalid=\"false\"] label:has(input[type=\"radio\"]:disabled) {\n color: var(--color-gray-500);\n background-color: var(--color-gray-200);\n box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n\n --box-shadow-color: var(--color-gray-400);\n }\n\n & label input[type=\"radio\"]:focus-visible ~ .af-radio__icons {\n & .af-radio__unchecked,\n & .af-radio__checked {\n outline: 2px solid var(--color-blue-3);\n outline-offset: 3px;\n }\n }\n\n & label:hover:not(:has(input[type=\"radio\"]:disabled)) {\n & .af-radio__unchecked {\n color: var(--color-axa);\n fill: var(--color-axa);\n }\n }\n\n &-select {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n font-family: var(--font-family-base);\n font-style: normal;\n font-weight: 400;\n line-height: 1.25rem;\n color: var(--color-gray-700);\n\n &--horizontal {\n flex-direction: row;\n }\n }\n}\n","@use \"../../common/common\" as common;\n\n.af-radio {\n font-family: \"Source Sans Pro\", arial, sans-serif;\n\n * {\n box-sizing: border-box;\n }\n\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: common.rem(18);\n font-weight: 600;\n color: var(--color-gray-900);\n }\n\n &__description {\n font-size: common.rem(14);\n font-weight: 400;\n line-height: common.rem(18);\n color: var(--color-gray-700);\n\n @media (width > #{common.$breakpoint-md}) {\n font-size: common.rem(16);\n line-height: common.rem(20);\n }\n }\n\n &__content {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n\n & > svg {\n width: 1.75rem;\n height: 1.75rem;\n color: var(--color-axa);\n fill: var(--color-axa);\n }\n\n & &-description {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n line-height: 1.25rem;\n\n & > span:first-child {\n font-size: 1.125rem;\n line-height: 1.4rem;\n color: var(--color-gray-900);\n }\n\n & > span:not(:first-child) {\n color: var(--color-gray-700);\n }\n }\n }\n\n &-select--horizontal &__content {\n flex-direction: column;\n gap: 0.5rem;\n }\n\n &__group-description {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n\n & ~ .af-input-error {\n gap: 0.5rem;\n\n &__message {\n line-height: 1.25rem;\n }\n }\n\n & label {\n display: flex;\n margin: 0;\n border-radius: var(--default-border-radius);\n align-items: flex-start;\n gap: 0.75rem;\n cursor: pointer;\n }\n\n &-select label {\n height: 6.4rem;\n padding: 1rem;\n align-items: center;\n box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n\n --box-shadow-color: var(--color-gray);\n }\n\n &[aria-invalid=\"true\"] {\n *:not(.af-radio__content *) {\n color: var(--color-red-700);\n fill: var(--color-red-700);\n }\n }\n\n &-select--horizontal label {\n position: relative;\n width: 12rem;\n height: auto;\n padding: 1rem;\n flex-direction: column;\n justify-content: flex-start;\n gap: 0;\n text-align: center;\n\n & .af-radio__icons {\n position: absolute;\n top: 1rem;\n left: 1rem;\n }\n }\n\n &-select.subgrid label {\n width: inherit;\n }\n\n &-select[aria-invalid=\"true\"] label {\n --box-shadow-color: var(--color-red-700);\n\n box-shadow: 0 0 0 2px var(--box-shadow-color) inset;\n }\n\n & label input[type=\"radio\"] {\n position: absolute;\n margin-right: 0.5rem;\n opacity: 0;\n\n & ~ .af-radio__icons {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n background-color: var(--color-white);\n clip-path: circle(0.72rem at 50% 50%);\n\n & .af-radio__checked,\n & .af-radio__unchecked {\n width: 1.75rem;\n height: 1.75rem;\n align-items: center;\n }\n\n & .af-radio__checked {\n display: none;\n }\n\n & .af-radio__unchecked {\n color: var(--color-gray-700);\n fill: var(--color-gray-700);\n }\n }\n }\n\n & label:has(input[type=\"radio\"]:checked) {\n & .af-radio__checked {\n display: block;\n color: var(--color-axa);\n fill: var(--color-axa);\n }\n\n & .af-radio__unchecked {\n display: none;\n }\n }\n\n &-select[aria-invalid=\"false\"] label:hover {\n --box-shadow-color: var(--color-axa);\n\n box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n }\n\n & label:has(input[type=\"radio\"]:disabled) {\n cursor: default;\n\n & .af-radio__content > svg,\n & .af-radio__checked,\n & .af-radio__unchecked {\n color: var(--color-gray-500);\n fill: var(--color-gray-500);\n }\n }\n\n &-select[aria-invalid=\"false\"] label:has(input[type=\"radio\"]) {\n background-color: var(--color-white);\n }\n\n &-select[aria-invalid=\"false\"] label:has(input[type=\"radio\"]:checked) {\n background-color: var(--color-blue-2);\n box-shadow: 0 0 0 2px var(--color-axa) inset;\n }\n\n &-select[aria-invalid=\"false\"] label:has(input[type=\"radio\"]:disabled) {\n color: var(--color-gray-500);\n background-color: var(--color-gray-200);\n box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n\n --box-shadow-color: var(--color-gray-400);\n }\n\n & label input[type=\"radio\"]:focus-visible ~ .af-radio__icons {\n & .af-radio__unchecked,\n & .af-radio__checked {\n outline: 2px solid var(--color-blue-3);\n outline-offset: 3px;\n }\n }\n\n & label:hover:not(:has(input[type=\"radio\"]:disabled)) {\n & .af-radio__unchecked {\n color: var(--color-axa);\n fill: var(--color-axa);\n }\n }\n\n &-select {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n font-family: var(--font-family-base);\n font-style: normal;\n font-weight: 400;\n line-height: 1.25rem;\n color: var(--color-gray-700);\n\n &--horizontal {\n flex-direction: row;\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/Form/Radio/Radio.scss%23sass","../../../src/Form/Radio/Radio.scss"],"names":[],"mappings":"AAEA,UACE,4CCDF,CDGE,YACE,qBCDJ,CDIE,qBACE,YAAA,CACA,qBAAA,CACA,QCFJ,CDKE,2BACE,YAAA,CACA,qBAAA,CACA,0CCHJ,CDME,iBAGE,2BAAA,CAFA,kBAAA,CACA,eCHJ,CDOE,uBAIE,2BAAA,CAHA,iBAAA,CACA,eAAA,CACA,oBCJJ,CDOI,wBANF,uBAOI,cAAA,CACA,mBCJJ,CACF,CDOE,mBAEE,kBAAA,CADA,YAAA,CAGA,QAAA,CADA,sBCJJ,CDOI,uBAGE,sBAAA,CADA,cAAA,CADA,aAAA,CAGA,qBCLN,CDQI,kDACE,YAAA,CACA,qBAAA,CACA,UAAA,CACA,mBCNN,CDQM,mEAGE,2BAAA,CAFA,kBAAA,CACA,kBCLR,CDSM,yEACE,2BCPR,CDYE,gDACE,qBAAA,CACA,SCVJ,CDaE,6BACE,cAAA,CACA,mBCXJ,CDcE,0BACE,SCZJ,CDcI,mCACE,mBCZN,CDgBE,gBAIE,sBAAA,CADA,0CAAA,CAGA,cAAA,CALA,YAAA,CAIA,UAAA,CAHA,QCVJ,CDiBE,uBAEE,kBAAA,CACA,kDAAA,CAFA,YAAA,CAIA,oCChBJ,CDoBI,wDACE,0BAAA,CACA,yBClBN,CDsBE,mCAKE,qBAAA,CAEA,KAAA,CAJA,WAAA,CAGA,0BAAA,CAFA,YAAA,CAHA,iBAAA,CAOA,iBAAA,CANA,WCdJ,CDsBI,oDAGE,SAAA,CAFA,iBAAA,CACA,QCnBN,CDwBE,+BACE,aCtBJ,CDyBE,0CACE,uCAAA,CAEA,kDCxBJ,CD2BE,kCAEE,kBAAA,CACA,SAAA,CAFA,iBCvBJ,CD2BI,mDAEE,kBAAA,CAEA,mCAAA,CACA,mCAAA,CAJA,YAAA,CAEA,UCvBN,CD2BM,8IAIE,kBAAA,CADA,cAAA,CADA,aCxBR,CD6BM,sEACE,YC3BR,CD8BM,wEACE,2BAAA,CACA,0BC5BR,CDkCI,kEAEE,sBAAA,CADA,aAAA,CAEA,qBChCN,CDmCI,oEACE,YCjCN,CDqCE,iDACE,mCAAA,CAEA,kDCpCJ,CDuCE,gDACE,cCrCJ,CDuCI,+MAGE,2BAAA,CACA,0BCvCN,CD2CE,kEACE,mCCzCJ,CD4CE,0EACE,oCAAA,CACA,2CC1CJ,CD6CE,2EAEE,sCAAA,CACA,kDAAA,CAFA,2BAAA,CAIA,wCC5CJ,CDgDI,0KAEE,qCAAA,CACA,kBC/CN,CDoDI,iFACE,sBAAA,CACA,qBClDN,CDsDE,iBAQE,2BAAA,CAPA,YAAA,CACA,qBAAA,CAEA,mCAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,mBCnDJ,CDsDI,6BACE,kBCpDN","file":"Radio.css","sourcesContent":["@use \"../../common/common\" as common;\n\n.af-radio {\n font-family: \"Source Sans Pro\", arial, sans-serif;\n\n * {\n box-sizing: border-box;\n }\n\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: common.rem(18);\n font-weight: 600;\n color: var(--color-gray-900);\n }\n\n &__description {\n font-size: common.rem(14);\n font-weight: 400;\n line-height: common.rem(18);\n color: var(--color-gray-700);\n\n @media (width > #{common.$breakpoint-md}) {\n font-size: common.rem(16);\n line-height: common.rem(20);\n }\n }\n\n &__content {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n\n & > svg {\n width: 1.75rem;\n height: 1.75rem;\n color: var(--color-axa);\n fill: var(--color-axa);\n }\n\n & &-description {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n line-height: 1.25rem;\n\n & > span:first-child {\n font-size: 1.125rem;\n line-height: 1.4rem;\n color: var(--color-gray-900);\n }\n\n & > span:not(:first-child) {\n color: var(--color-gray-700);\n }\n }\n }\n\n &-select--horizontal &__content {\n flex-direction: column;\n gap: 0.5rem;\n }\n\n &__group-description {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n\n & ~ .af-input-error {\n gap: 0.5rem;\n\n &__message {\n line-height: 1.25rem;\n }\n }\n\n & label {\n display: flex;\n margin: 0;\n border-radius: var(--default-border-radius);\n align-items: flex-start;\n gap: 0.75rem;\n cursor: pointer;\n }\n\n &-select label {\n padding: 1rem;\n align-items: center;\n box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n\n --box-shadow-color: var(--color-gray);\n }\n\n &[aria-invalid=\"true\"] {\n *:not(.af-radio__content *) {\n color: var(--color-red-700);\n fill: var(--color-red-700);\n }\n }\n\n &-select--horizontal label {\n position: relative;\n width: 12rem;\n height: auto;\n padding: 1rem;\n flex-direction: column;\n justify-content: flex-start;\n gap: 0;\n text-align: center;\n\n & .af-radio__icons {\n position: absolute;\n top: 1rem;\n left: 1rem;\n }\n }\n\n &-select.subgrid label {\n width: inherit;\n }\n\n &-select[aria-invalid=\"true\"] label {\n --box-shadow-color: var(--color-red-700);\n\n box-shadow: 0 0 0 2px var(--box-shadow-color) inset;\n }\n\n & label input[type=\"radio\"] {\n position: absolute;\n margin-right: 0.5rem;\n opacity: 0;\n\n & ~ .af-radio__icons {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n background-color: var(--color-white);\n clip-path: circle(0.72rem at 50% 50%);\n\n & .af-radio__checked,\n & .af-radio__unchecked {\n width: 1.75rem;\n height: 1.75rem;\n align-items: center;\n }\n\n & .af-radio__checked {\n display: none;\n }\n\n & .af-radio__unchecked {\n color: var(--color-gray-700);\n fill: var(--color-gray-700);\n }\n }\n }\n\n & label:has(input[type=\"radio\"]:checked) {\n & .af-radio__checked {\n display: block;\n color: var(--color-axa);\n fill: var(--color-axa);\n }\n\n & .af-radio__unchecked {\n display: none;\n }\n }\n\n &-select[aria-invalid=\"false\"] label:hover {\n --box-shadow-color: var(--color-axa);\n\n box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n }\n\n & label:has(input[type=\"radio\"]:disabled) {\n cursor: default;\n\n & .af-radio__content > svg,\n & .af-radio__checked,\n & .af-radio__unchecked {\n color: var(--color-gray-500);\n fill: var(--color-gray-500);\n }\n }\n\n &-select[aria-invalid=\"false\"] label:has(input[type=\"radio\"]) {\n background-color: var(--color-white);\n }\n\n &-select[aria-invalid=\"false\"] label:has(input[type=\"radio\"]:checked) {\n background-color: var(--color-blue-2);\n box-shadow: 0 0 0 2px var(--color-axa) inset;\n }\n\n &-select[aria-invalid=\"false\"] label:has(input[type=\"radio\"]:disabled) {\n color: var(--color-gray-500);\n background-color: var(--color-gray-200);\n box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n\n --box-shadow-color: var(--color-gray-400);\n }\n\n & label input[type=\"radio\"]:focus-visible ~ .af-radio__icons {\n & .af-radio__unchecked,\n & .af-radio__checked {\n outline: 2px solid var(--color-blue-3);\n outline-offset: 3px;\n }\n }\n\n & label:hover:not(:has(input[type=\"radio\"]:disabled)) {\n & .af-radio__unchecked {\n color: var(--color-axa);\n fill: var(--color-axa);\n }\n }\n\n &-select {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n font-family: var(--font-family-base);\n font-style: normal;\n font-weight: 400;\n line-height: 1.25rem;\n color: var(--color-gray-700);\n\n &--horizontal {\n flex-direction: row;\n }\n }\n}\n","@use \"../../common/common\" as common;\n\n.af-radio {\n font-family: \"Source Sans Pro\", arial, sans-serif;\n\n * {\n box-sizing: border-box;\n }\n\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: common.rem(18);\n font-weight: 600;\n color: var(--color-gray-900);\n }\n\n &__description {\n font-size: common.rem(14);\n font-weight: 400;\n line-height: common.rem(18);\n color: var(--color-gray-700);\n\n @media (width > #{common.$breakpoint-md}) {\n font-size: common.rem(16);\n line-height: common.rem(20);\n }\n }\n\n &__content {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n\n & > svg {\n width: 1.75rem;\n height: 1.75rem;\n color: var(--color-axa);\n fill: var(--color-axa);\n }\n\n & &-description {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n line-height: 1.25rem;\n\n & > span:first-child {\n font-size: 1.125rem;\n line-height: 1.4rem;\n color: var(--color-gray-900);\n }\n\n & > span:not(:first-child) {\n color: var(--color-gray-700);\n }\n }\n }\n\n &-select--horizontal &__content {\n flex-direction: column;\n gap: 0.5rem;\n }\n\n &__group-description {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n\n & ~ .af-input-error {\n gap: 0.5rem;\n\n &__message {\n line-height: 1.25rem;\n }\n }\n\n & label {\n display: flex;\n margin: 0;\n border-radius: var(--default-border-radius);\n align-items: flex-start;\n gap: 0.75rem;\n cursor: pointer;\n }\n\n &-select label {\n padding: 1rem;\n align-items: center;\n box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n\n --box-shadow-color: var(--color-gray);\n }\n\n &[aria-invalid=\"true\"] {\n *:not(.af-radio__content *) {\n color: var(--color-red-700);\n fill: var(--color-red-700);\n }\n }\n\n &-select--horizontal label {\n position: relative;\n width: 12rem;\n height: auto;\n padding: 1rem;\n flex-direction: column;\n justify-content: flex-start;\n gap: 0;\n text-align: center;\n\n & .af-radio__icons {\n position: absolute;\n top: 1rem;\n left: 1rem;\n }\n }\n\n &-select.subgrid label {\n width: inherit;\n }\n\n &-select[aria-invalid=\"true\"] label {\n --box-shadow-color: var(--color-red-700);\n\n box-shadow: 0 0 0 2px var(--box-shadow-color) inset;\n }\n\n & label input[type=\"radio\"] {\n position: absolute;\n margin-right: 0.5rem;\n opacity: 0;\n\n & ~ .af-radio__icons {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n background-color: var(--color-white);\n clip-path: circle(0.72rem at 50% 50%);\n\n & .af-radio__checked,\n & .af-radio__unchecked {\n width: 1.75rem;\n height: 1.75rem;\n align-items: center;\n }\n\n & .af-radio__checked {\n display: none;\n }\n\n & .af-radio__unchecked {\n color: var(--color-gray-700);\n fill: var(--color-gray-700);\n }\n }\n }\n\n & label:has(input[type=\"radio\"]:checked) {\n & .af-radio__checked {\n display: block;\n color: var(--color-axa);\n fill: var(--color-axa);\n }\n\n & .af-radio__unchecked {\n display: none;\n }\n }\n\n &-select[aria-invalid=\"false\"] label:hover {\n --box-shadow-color: var(--color-axa);\n\n box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n }\n\n & label:has(input[type=\"radio\"]:disabled) {\n cursor: default;\n\n & .af-radio__content > svg,\n & .af-radio__checked,\n & .af-radio__unchecked {\n color: var(--color-gray-500);\n fill: var(--color-gray-500);\n }\n }\n\n &-select[aria-invalid=\"false\"] label:has(input[type=\"radio\"]) {\n background-color: var(--color-white);\n }\n\n &-select[aria-invalid=\"false\"] label:has(input[type=\"radio\"]:checked) {\n background-color: var(--color-blue-2);\n box-shadow: 0 0 0 2px var(--color-axa) inset;\n }\n\n &-select[aria-invalid=\"false\"] label:has(input[type=\"radio\"]:disabled) {\n color: var(--color-gray-500);\n background-color: var(--color-gray-200);\n box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n\n --box-shadow-color: var(--color-gray-400);\n }\n\n & label input[type=\"radio\"]:focus-visible ~ .af-radio__icons {\n & .af-radio__unchecked,\n & .af-radio__checked {\n outline: 2px solid var(--color-blue-3);\n outline-offset: 3px;\n }\n }\n\n & label:hover:not(:has(input[type=\"radio\"]:disabled)) {\n & .af-radio__unchecked {\n color: var(--color-axa);\n fill: var(--color-axa);\n }\n }\n\n &-select {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n font-family: var(--font-family-base);\n font-style: normal;\n font-weight: 400;\n line-height: 1.25rem;\n color: var(--color-gray-700);\n\n &--horizontal {\n flex-direction: row;\n }\n }\n}\n"]}
|