@axa-fr/design-system-look-and-feel-css 1.0.5-ci.33 → 1.0.5-ci.35
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 +7 -7
- package/dist/Form/Radio/Radio.css +1 -1
- package/dist/Form/Radio/Radio.css.map +1 -1
- package/dist/Form/Radio/Radio.scss +7 -7
- package/dist/Form/Text/Text.css +1 -1
- package/dist/Form/Text/Text.css.map +1 -1
- package/dist/Form/Text/Text.scss +4 -7
- package/dist/Form/TextArea/TextArea.css +1 -1
- package/dist/Form/TextArea/TextArea.css.map +1 -1
- package/dist/look-and-feel.css +1 -1
- package/dist/look-and-feel.css.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-checkbox{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)
|
|
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;display:flex;gap:.75rem}.af-checkbox label input[type=checkbox]~.af-checkbox__icons svg{background-color:var(--color-white);clip-path:inset(.22rem round 2px)}.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{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,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"]}
|
|
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,CADA,YAAA,CAEA,UC5BN,CD8BM,gEACE,mCAAA,CACA,iCC5BR,CD+BM,sKAIE,kBAAA,CADA,cAAA,CADA,aC5BR,CDiCM,kFACE,YC/BR,CDkCM,oFACE,2BAAA,CACA,0BChCR,CDsCI,8KAEE,0BAAA,CACA,yBCrCN,CD0CI,2EAEE,sBAAA,CADA,aAAA,CAEA,qBCxCN,CD2CI,6EACE,YCzCN,CD6CE,oDACE,mCC3CJ,CD8CE,4DACE,oCAAA,CACA,2CC5CJ,CD+CE,sDACE,cC7CJ,CD+CI,0OAGE,oCAAA,CACA,mCC/CN,CDmDE,6DAEE,sCAAA,CACA,kDAAA,CAFA,oCAAA,CAIA,wCClDJ,CDqDE,uEACE,uCAAA,CAEA,kDCpDJ,CDuDE,0EACE,qCAAA,CACA,kBCrDJ,CDyDI,0FACE,sBAAA,CACA,qBCvDN,CD2DE,yEACE,mCAAA,CAEA,kDC1DJ,CD6DE,oBAQE,2BAAA,CAPA,YAAA,CACA,qBAAA,CAEA,mCAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,mBC1DJ,CD6DI,gCACE,kBC3DN","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\n & svg {\n background-color: var(--color-white);\n clip-path: inset(0.22rem round 2px);\n }\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 outline: 2px solid var(--color-blue-3);\n outline-offset: 3px;\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\n & svg {\n background-color: var(--color-white);\n clip-path: inset(0.22rem round 2px);\n }\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 outline: 2px solid var(--color-blue-3);\n outline-offset: 3px;\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"]}
|
|
@@ -167,8 +167,11 @@
|
|
|
167
167
|
display: flex;
|
|
168
168
|
align-items: center;
|
|
169
169
|
gap: 0.75rem;
|
|
170
|
-
|
|
171
|
-
|
|
170
|
+
|
|
171
|
+
& svg {
|
|
172
|
+
background-color: var(--color-white);
|
|
173
|
+
clip-path: inset(0.22rem round 2px);
|
|
174
|
+
}
|
|
172
175
|
|
|
173
176
|
& .af-checkbox__checked,
|
|
174
177
|
& .af-checkbox__unchecked {
|
|
@@ -243,11 +246,8 @@
|
|
|
243
246
|
}
|
|
244
247
|
|
|
245
248
|
& label input[type="checkbox"]:focus-visible ~ .af-checkbox__icons {
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
outline: 2px solid var(--color-blue-3);
|
|
249
|
-
outline-offset: 3px;
|
|
250
|
-
}
|
|
249
|
+
outline: 2px solid var(--color-blue-3);
|
|
250
|
+
outline-offset: 3px;
|
|
251
251
|
}
|
|
252
252
|
|
|
253
253
|
& label:hover:not(:has(input[type="checkbox"]:disabled)) {
|
|
@@ -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;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%)
|
|
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;display:flex;gap:.75rem}.af-radio label input[type=radio]~.af-radio__icons svg{background-color:var(--color-white);clip-path:circle(.72rem at 50% 50%)}.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{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,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"]}
|
|
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,CADA,YAAA,CAEA,UCzBN,CD2BM,uDACE,mCAAA,CACA,mCCzBR,CD4BM,8IAIE,kBAAA,CADA,cAAA,CADA,aCzBR,CD8BM,sEACE,YC5BR,CD+BM,wEACE,2BAAA,CACA,0BC7BR,CDmCI,kEAEE,sBAAA,CADA,aAAA,CAEA,qBCjCN,CDoCI,oEACE,YClCN,CDsCE,iDACE,mCAAA,CAEA,kDCrCJ,CDwCE,gDACE,cCtCJ,CDwCI,+MAGE,2BAAA,CACA,0BCxCN,CD4CE,kEACE,mCC1CJ,CD6CE,0EACE,oCAAA,CACA,2CC3CJ,CD8CE,2EAEE,sCAAA,CACA,kDAAA,CAFA,2BAAA,CAIA,wCC7CJ,CDgDE,iEACE,qCAAA,CACA,kBC9CJ,CDkDI,iFACE,sBAAA,CACA,qBChDN,CDoDE,iBAQE,2BAAA,CAPA,YAAA,CACA,qBAAA,CAEA,mCAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,mBCjDJ,CDoDI,6BACE,kBClDN","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\n & svg {\n background-color: var(--color-white);\n clip-path: circle(0.72rem at 50% 50%);\n }\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 outline: 2px solid var(--color-blue-3);\n outline-offset: 3px;\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\n & svg {\n background-color: var(--color-white);\n clip-path: circle(0.72rem at 50% 50%);\n }\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 outline: 2px solid var(--color-blue-3);\n outline-offset: 3px;\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"]}
|
|
@@ -146,8 +146,11 @@
|
|
|
146
146
|
display: flex;
|
|
147
147
|
align-items: center;
|
|
148
148
|
gap: 0.75rem;
|
|
149
|
-
|
|
150
|
-
|
|
149
|
+
|
|
150
|
+
& svg {
|
|
151
|
+
background-color: var(--color-white);
|
|
152
|
+
clip-path: circle(0.72rem at 50% 50%);
|
|
153
|
+
}
|
|
151
154
|
|
|
152
155
|
& .af-radio__checked,
|
|
153
156
|
& .af-radio__unchecked {
|
|
@@ -214,11 +217,8 @@
|
|
|
214
217
|
}
|
|
215
218
|
|
|
216
219
|
& label input[type="radio"]:focus-visible ~ .af-radio__icons {
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
outline: 2px solid var(--color-blue-3);
|
|
220
|
-
outline-offset: 3px;
|
|
221
|
-
}
|
|
220
|
+
outline: 2px solid var(--color-blue-3);
|
|
221
|
+
outline-offset: 3px;
|
|
222
222
|
}
|
|
223
223
|
|
|
224
224
|
& label:hover:not(:has(input[type="radio"]:disabled)) {
|
package/dist/Form/Text/Text.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-form__input-container{--row-gap:calc(8/var(--font-size-base)*1rem);align-items:flex-start}.af-form__input-container,.af-form__label-container{display:flex;flex-direction:column;row-gap:var(--row-gap)}.af-form__label-container{--row-gap:calc(4/var(--font-size-base)*1rem)}.af-form__input-label{color:var(--color-gray-900);font-size:1.125rem;font-weight:600;line-height:1.25rem}@media (width > 1023px){.af-form__input-label{font-size:1.125rem;line-height:1.5rem}}.af-form__input-description{color:var(--color-gray-700);font-size:.875rem;font-weight:400;line-height:1.125rem}@media (width > 1023px){.af-form__input-description{font-size:1rem;line-height:1.25rem}}.af-form__input-helper{color:var(--color-gray-700);font-size:.875rem;line-height:1.125rem}@media (width > 1023px){.af-form__input-helper{font-size:1rem;line-height:1.25rem}}.af-form__input-more{width:-moz-fit-content;width:fit-content;fill:var(--color-axa)}.af-form__input-more svg{height:1.25rem;width:1.25rem}.af-form__input-text{color:var(--color-gray-900);font-size:1rem;line-height:1.25rem}.af-form__input-text~*{color:var(--color-gray-900);fill:var(--color-gray-900)}@media (width > 1023px){.af-form__input-text{font-size:1.125rem;line-height:1.5rem}}.af-form__input-variant{align-items:center;background-color:var(--color-white);border:1px solid var(--color-gray);border-radius:var(--default-border-radius);display:grid;grid-template-columns:auto min-content;padding:1rem;width:100%}.af-form__input-variant>input{all:unset}.af-form__input-variant:
|
|
1
|
+
.af-form__input-container{--row-gap:calc(8/var(--font-size-base)*1rem);align-items:flex-start}.af-form__input-container,.af-form__label-container{display:flex;flex-direction:column;row-gap:var(--row-gap)}.af-form__label-container{--row-gap:calc(4/var(--font-size-base)*1rem)}.af-form__input-label{color:var(--color-gray-900);font-size:1.125rem;font-weight:600;line-height:1.25rem}@media (width > 1023px){.af-form__input-label{font-size:1.125rem;line-height:1.5rem}}.af-form__input-description{color:var(--color-gray-700);font-size:.875rem;font-weight:400;line-height:1.125rem}@media (width > 1023px){.af-form__input-description{font-size:1rem;line-height:1.25rem}}.af-form__input-helper{color:var(--color-gray-700);font-size:.875rem;line-height:1.125rem}@media (width > 1023px){.af-form__input-helper{font-size:1rem;line-height:1.25rem}}.af-form__input-more{width:-moz-fit-content;width:fit-content;fill:var(--color-axa)}.af-form__input-more svg{height:1.25rem;width:1.25rem}.af-form__input-text{color:var(--color-gray-900);font-size:1rem;line-height:1.25rem}.af-form__input-text~*{color:var(--color-gray-900);fill:var(--color-gray-900)}@media (width > 1023px){.af-form__input-text{font-size:1.125rem;line-height:1.5rem}}.af-form__input-variant{align-items:center;background-color:var(--color-white);border:1px solid var(--color-gray);border-radius:var(--default-border-radius);display:grid;grid-template-columns:auto min-content;padding:1rem;width:100%}.af-form__input-variant>input{all:unset}.af-form__input-variant:has(>input:is(:focus-visible)){outline:2px solid var(--color-focus);outline-offset:3px}.af-form__input-variant:has(>input:is(:hover,:focus,:active)){border:1px solid var(--color-axa);box-shadow:0 0 0 1px var(--color-axa) inset}.af-form__input-variant:has(>input[class*="--error"]){border:1px solid var(--color-red-700)}.af-form__input-variant>input~*{margin-left:.5rem}.af-form__input-variant:has(>input:disabled),.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active){background-color:var(--color-border);border:1px solid var(--color-gray-400);box-shadow:unset;color:var(--color-gray-500);cursor:not-allowed}.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active)>input~*,.af-form__input-variant:has(>input:disabled)>input~*{color:var(--color-gray-500);cursor:not-allowed;fill:var(--color-gray-500)}.af-form__input-variant:has(>input[class*="--error"]):is(:hover,:focus,:active){border:1px solid var(--color-red-700);box-shadow:0 0 0 1px var(--color-red-700) inset}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Form/Text/Text.scss%23sass","../../../src/Form/Text/Text.scss"],"names":[],"mappings":"AAGE,0BACE,4CAAA,CAIA,sBCFJ,CDME,oDCVF,YAAA,CDKI,qBAAA,CAEA,sBCGJ,CDAE,0BACE,4CCDJ,CDQE,sBAIE,2BAAA,CAHA,kBAAA,CACA,eAAA,CACA,mBCLJ,CDQI,wBANF,sBAOI,kBAAA,CACA,kBCLJ,CACF,CDQE,4BAIE,2BAAA,CAHA,iBAAA,CACA,eAAA,CACA,oBCLJ,CDQI,wBANF,4BAOI,cAAA,CACA,mBCLJ,CACF,CDQE,uBAGE,2BAAA,CAFA,iBAAA,CACA,oBCLJ,CDQI,wBALF,uBCAA,cAAA,CDOI,mBCLJ,CACF,CDQE,qBACE,sBAAA,CAAA,iBAAA,CACA,qBCNJ,CDQI,yBAEE,cAAA,CADA,aCLN,CDUE,qBAGE,2BAAA,CAFA,cAAA,CACA,mBCPJ,CDUI,uBACE,2BAAA,CACA,0BCRN,CDWI,wBAVF,qBAWI,kBAAA,CACA,kBCRJ,CACF,CDWE,wBAWE,kBAAA,CACA,mCAAA,CAJA,kCAAA,CACA,0CAAA,CAJA,YAAA,CAKA,sCAAA,CAHA,YAAA,CADA,UCPJ,CDEI,8BACE,SCAN,CDYI,
|
|
1
|
+
{"version":3,"sources":["../../../src/Form/Text/Text.scss%23sass","../../../src/Form/Text/Text.scss"],"names":[],"mappings":"AAGE,0BACE,4CAAA,CAIA,sBCFJ,CDME,oDCVF,YAAA,CDKI,qBAAA,CAEA,sBCGJ,CDAE,0BACE,4CCDJ,CDQE,sBAIE,2BAAA,CAHA,kBAAA,CACA,eAAA,CACA,mBCLJ,CDQI,wBANF,sBAOI,kBAAA,CACA,kBCLJ,CACF,CDQE,4BAIE,2BAAA,CAHA,iBAAA,CACA,eAAA,CACA,oBCLJ,CDQI,wBANF,4BAOI,cAAA,CACA,mBCLJ,CACF,CDQE,uBAGE,2BAAA,CAFA,iBAAA,CACA,oBCLJ,CDQI,wBALF,uBCAA,cAAA,CDOI,mBCLJ,CACF,CDQE,qBACE,sBAAA,CAAA,iBAAA,CACA,qBCNJ,CDQI,yBAEE,cAAA,CADA,aCLN,CDUE,qBAGE,2BAAA,CAFA,cAAA,CACA,mBCPJ,CDUI,uBACE,2BAAA,CACA,0BCRN,CDWI,wBAVF,qBAWI,kBAAA,CACA,kBCRJ,CACF,CDWE,wBAWE,kBAAA,CACA,mCAAA,CAJA,kCAAA,CACA,0CAAA,CAJA,YAAA,CAKA,sCAAA,CAHA,YAAA,CADA,UCPJ,CDEI,8BACE,SCAN,CDYI,uDACE,oCAAA,CACA,kBCVN,CDaI,8DACE,iCAAA,CACA,2CCXN,CDcI,sDACE,qCCZN,CDeI,gCACE,iBCbN,CDgBI,oHAIE,oCAAA,CAFA,sCAAA,CAGA,gBAAA,CAFA,2BAAA,CAGA,kBCfN,CDiBM,oIACE,2BAAA,CACA,kBAAA,CACA,0BCfR,CDmBI,gFACE,qCAAA,CACA,+CCjBN","file":"Text.css","sourcesContent":["@use \"../../common/common\" as common;\n\n.af-form {\n &__input-container {\n --row-gap: calc(8 / var(--font-size-base) * 1rem);\n\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n row-gap: var(--row-gap);\n }\n\n &__label-container {\n --row-gap: calc(4 / var(--font-size-base) * 1rem);\n\n display: flex;\n flex-direction: column;\n row-gap: var(--row-gap);\n }\n\n &__input-label {\n font-size: common.rem(18);\n font-weight: 600;\n line-height: common.rem(20);\n color: var(--color-gray-900);\n\n @media (width > #{common.$breakpoint-md}) {\n font-size: common.rem(18);\n line-height: common.rem(24);\n }\n }\n\n &__input-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 &__input-helper {\n font-size: common.rem(14);\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 &__input-more {\n width: fit-content;\n fill: var(--color-axa);\n\n svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n\n &__input-text {\n font-size: common.rem(16);\n line-height: common.rem(20);\n color: var(--color-gray-900);\n\n & ~ * {\n color: var(--color-gray-900);\n fill: var(--color-gray-900);\n }\n\n @media (width > #{common.$breakpoint-md}) {\n font-size: common.rem(18);\n line-height: common.rem(24);\n }\n }\n\n &__input-variant {\n & > input {\n all: unset;\n }\n\n display: grid;\n width: 100%;\n padding: 1rem;\n border: 1px solid var(--color-gray);\n border-radius: var(--default-border-radius);\n grid-template-columns: auto min-content;\n align-items: center;\n background-color: var(--color-white);\n\n &:has(> input:is(:focus-visible)) {\n outline: 2px solid var(--color-focus);\n outline-offset: 3px;\n }\n\n &:has(> input:is(:hover, :focus, :active)) {\n border: 1px solid var(--color-axa);\n box-shadow: 0 0 0 1px var(--color-axa) inset;\n }\n\n &:has(> input[class*=\"--error\"]) {\n border: 1px solid var(--color-red-700);\n }\n\n & > input ~ * {\n margin-left: 0.5rem;\n }\n\n &:has(> input:disabled),\n &:has(> input:disabled):is(:hover, :focus, :active) {\n border: 1px solid var(--color-gray-400);\n color: var(--color-gray-500);\n background-color: var(--color-border);\n box-shadow: unset;\n cursor: not-allowed;\n\n & > input ~ * {\n color: var(--color-gray-500);\n cursor: not-allowed;\n fill: var(--color-gray-500);\n }\n }\n\n &:has(> input[class*=\"--error\"]):is(:hover, :focus, :active) {\n border: 1px solid var(--color-red-700);\n box-shadow: 0 0 0 1px var(--color-red-700) inset;\n }\n }\n}\n","@use \"../../common/common\" as common;\n\n.af-form {\n &__input-container {\n --row-gap: calc(8 / var(--font-size-base) * 1rem);\n\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n row-gap: var(--row-gap);\n }\n\n &__label-container {\n --row-gap: calc(4 / var(--font-size-base) * 1rem);\n\n display: flex;\n flex-direction: column;\n row-gap: var(--row-gap);\n }\n\n &__input-label {\n font-size: common.rem(18);\n font-weight: 600;\n line-height: common.rem(20);\n color: var(--color-gray-900);\n\n @media (width > #{common.$breakpoint-md}) {\n font-size: common.rem(18);\n line-height: common.rem(24);\n }\n }\n\n &__input-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 &__input-helper {\n font-size: common.rem(14);\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 &__input-more {\n width: fit-content;\n fill: var(--color-axa);\n\n svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n\n &__input-text {\n font-size: common.rem(16);\n line-height: common.rem(20);\n color: var(--color-gray-900);\n\n & ~ * {\n color: var(--color-gray-900);\n fill: var(--color-gray-900);\n }\n\n @media (width > #{common.$breakpoint-md}) {\n font-size: common.rem(18);\n line-height: common.rem(24);\n }\n }\n\n &__input-variant {\n & > input {\n all: unset;\n }\n\n display: grid;\n width: 100%;\n padding: 1rem;\n border: 1px solid var(--color-gray);\n border-radius: var(--default-border-radius);\n grid-template-columns: auto min-content;\n align-items: center;\n background-color: var(--color-white);\n\n &:has(> input:is(:focus-visible)) {\n outline: 2px solid var(--color-focus);\n outline-offset: 3px;\n }\n\n &:has(> input:is(:hover, :focus, :active)) {\n border: 1px solid var(--color-axa);\n box-shadow: 0 0 0 1px var(--color-axa) inset;\n }\n\n &:has(> input[class*=\"--error\"]) {\n border: 1px solid var(--color-red-700);\n }\n\n & > input ~ * {\n margin-left: 0.5rem;\n }\n\n &:has(> input:disabled),\n &:has(> input:disabled):is(:hover, :focus, :active) {\n border: 1px solid var(--color-gray-400);\n color: var(--color-gray-500);\n background-color: var(--color-border);\n box-shadow: unset;\n cursor: not-allowed;\n\n & > input ~ * {\n color: var(--color-gray-500);\n cursor: not-allowed;\n fill: var(--color-gray-500);\n }\n }\n\n &:has(> input[class*=\"--error\"]):is(:hover, :focus, :active) {\n border: 1px solid var(--color-red-700);\n box-shadow: 0 0 0 1px var(--color-red-700) inset;\n }\n }\n}\n"]}
|
package/dist/Form/Text/Text.scss
CHANGED
|
@@ -93,15 +93,12 @@
|
|
|
93
93
|
align-items: center;
|
|
94
94
|
background-color: var(--color-white);
|
|
95
95
|
|
|
96
|
-
&:focus-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
outline: none;
|
|
96
|
+
&:has(> input:is(:focus-visible)) {
|
|
97
|
+
outline: 2px solid var(--color-focus);
|
|
98
|
+
outline-offset: 3px;
|
|
100
99
|
}
|
|
101
100
|
|
|
102
|
-
&:hover,
|
|
103
|
-
&:focus,
|
|
104
|
-
&:active {
|
|
101
|
+
&:has(> input:is(:hover, :focus, :active)) {
|
|
105
102
|
border: 1px solid var(--color-axa);
|
|
106
103
|
box-shadow: 0 0 0 1px var(--color-axa) inset;
|
|
107
104
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-form__input-container{--row-gap:calc(8/var(--font-size-base)*1rem);align-items:flex-start}.af-form__input-container,.af-form__label-container{display:flex;flex-direction:column;row-gap:var(--row-gap)}.af-form__label-container{--row-gap:calc(4/var(--font-size-base)*1rem)}.af-form__input-label{color:var(--color-gray-900);font-size:1.125rem;font-weight:600;line-height:1.25rem}@media (width > 1023px){.af-form__input-label{font-size:1.125rem;line-height:1.5rem}}.af-form__input-description{color:var(--color-gray-700);font-size:.875rem;font-weight:400;line-height:1.125rem}@media (width > 1023px){.af-form__input-description{font-size:1rem;line-height:1.25rem}}.af-form__input-helper{color:var(--color-gray-700);font-size:.875rem;line-height:1.125rem}@media (width > 1023px){.af-form__input-helper{font-size:1rem;line-height:1.25rem}}.af-form__input-more{width:-moz-fit-content;width:fit-content;fill:var(--color-axa)}.af-form__input-more svg{height:1.25rem;width:1.25rem}.af-form__input-text{color:var(--color-gray-900);font-size:1rem;line-height:1.25rem}.af-form__input-text~*{color:var(--color-gray-900);fill:var(--color-gray-900)}@media (width > 1023px){.af-form__input-text{font-size:1.125rem;line-height:1.5rem}}.af-form__input-variant{align-items:center;background-color:var(--color-white);border:1px solid var(--color-gray);border-radius:var(--default-border-radius);display:grid;grid-template-columns:auto min-content;padding:1rem;width:100%}.af-form__input-variant>input{all:unset}.af-form__input-variant:
|
|
1
|
+
.af-form__input-container{--row-gap:calc(8/var(--font-size-base)*1rem);align-items:flex-start}.af-form__input-container,.af-form__label-container{display:flex;flex-direction:column;row-gap:var(--row-gap)}.af-form__label-container{--row-gap:calc(4/var(--font-size-base)*1rem)}.af-form__input-label{color:var(--color-gray-900);font-size:1.125rem;font-weight:600;line-height:1.25rem}@media (width > 1023px){.af-form__input-label{font-size:1.125rem;line-height:1.5rem}}.af-form__input-description{color:var(--color-gray-700);font-size:.875rem;font-weight:400;line-height:1.125rem}@media (width > 1023px){.af-form__input-description{font-size:1rem;line-height:1.25rem}}.af-form__input-helper{color:var(--color-gray-700);font-size:.875rem;line-height:1.125rem}@media (width > 1023px){.af-form__input-helper{font-size:1rem;line-height:1.25rem}}.af-form__input-more{width:-moz-fit-content;width:fit-content;fill:var(--color-axa)}.af-form__input-more svg{height:1.25rem;width:1.25rem}.af-form__input-text{color:var(--color-gray-900);font-size:1rem;line-height:1.25rem}.af-form__input-text~*{color:var(--color-gray-900);fill:var(--color-gray-900)}@media (width > 1023px){.af-form__input-text{font-size:1.125rem;line-height:1.5rem}}.af-form__input-variant{align-items:center;background-color:var(--color-white);border:1px solid var(--color-gray);border-radius:var(--default-border-radius);display:grid;grid-template-columns:auto min-content;padding:1rem;width:100%}.af-form__input-variant>input{all:unset}.af-form__input-variant:has(>input:is(:focus-visible)){outline:2px solid var(--color-focus);outline-offset:3px}.af-form__input-variant:has(>input:is(:hover,:focus,:active)){border:1px solid var(--color-axa);box-shadow:0 0 0 1px var(--color-axa) inset}.af-form__input-variant:has(>input[class*="--error"]){border:1px solid var(--color-red-700)}.af-form__input-variant>input~*{margin-left:.5rem}.af-form__input-variant:has(>input:disabled),.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active){background-color:var(--color-border);border:1px solid var(--color-gray-400);box-shadow:unset;color:var(--color-gray-500);cursor:not-allowed}.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active)>input~*,.af-form__input-variant:has(>input:disabled)>input~*{color:var(--color-gray-500);cursor:not-allowed;fill:var(--color-gray-500)}.af-form__input-variant:has(>input[class*="--error"]):is(:hover,:focus,:active){border:1px solid var(--color-red-700);box-shadow:0 0 0 1px var(--color-red-700) inset}.af-form__input-textarea{background-color:var(--color-white);border:1px solid var(--color-gray);border-radius:var(--default-border-radius);color:var(--color-gray-900);font-size:1rem;height:8.875rem;line-height:1.25rem;padding:1rem 2.5rem 1rem 1rem;width:100%}@media (width > 1023px){.af-form__input-textarea{font-size:1.125rem;line-height:1.5rem}}.af-form__input-textarea--error{border:2px solid var(--color-red-700)}.af-form__input-textarea:enabled:active,.af-form__input-textarea:enabled:focus{border:1px solid var(--color-axa);outline:none}.af-form__input-textarea:not(:disabled,:focus,:active,.af-form__input-textarea--error):hover{border:2px solid var(--color-axa);outline:none}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Form/Text/Text.scss","../../../src/Form/TextArea/TextArea.scss","../../../src/Form/TextArea/TextArea.scss%23sass"],"names":[],"mappings":"AAGE,0BCFF,4CDGI,CAIA,sBCFJ,CDME,oDANE,YAAA,CCHJ,qBAAA,CDMI,sBCGJ,CDAE,0BACE,4CCDJ,CDQE,sBAIE,2BAAA,CAHA,kBAAA,CACA,eAAA,CACA,mBCLJ,CDQI,wBANF,sBCCA,kBAAA,CDOI,kBCLJ,CACF,CDQE,4BAIE,2BAAA,CAHA,iBAAA,CACA,eAAA,CACA,oBCLJ,CDQI,wBANF,4BAOI,cAAA,CCLJ,mBACF,CACA,CDQE,uBAGE,2BAAA,CAFA,iBAAA,CACA,oBCLJ,CDQI,wBALF,uBAMI,cAAA,CACA,mBCLJ,CACF,CDQE,qBACE,sBAAA,CAAA,iBAAA,CACA,qBCNJ,CDQI,yBAEE,cAAA,CADA,aCLN,CDUE,qBAGE,2BAAA,CAFA,cAAA,CACA,mBCPJ,CDUI,uBACE,2BAAA,CACA,0BCRN,CDWI,wBAVF,qBAWI,kBAAA,CACA,kBCRJ,CACF,CDWE,wBAWE,kBAAA,CACA,mCAAA,CAJA,kCAAA,CACA,0CAAA,CAJA,YAAA,CAKA,sCAAA,CAHA,YAAA,CADA,UCPJ,CDEI,8BACE,SCAN,CDYI,
|
|
1
|
+
{"version":3,"sources":["../../../src/Form/Text/Text.scss","../../../src/Form/TextArea/TextArea.scss","../../../src/Form/TextArea/TextArea.scss%23sass"],"names":[],"mappings":"AAGE,0BCFF,4CDGI,CAIA,sBCFJ,CDME,oDANE,YAAA,CCHJ,qBAAA,CDMI,sBCGJ,CDAE,0BACE,4CCDJ,CDQE,sBAIE,2BAAA,CAHA,kBAAA,CACA,eAAA,CACA,mBCLJ,CDQI,wBANF,sBCCA,kBAAA,CDOI,kBCLJ,CACF,CDQE,4BAIE,2BAAA,CAHA,iBAAA,CACA,eAAA,CACA,oBCLJ,CDQI,wBANF,4BAOI,cAAA,CCLJ,mBACF,CACA,CDQE,uBAGE,2BAAA,CAFA,iBAAA,CACA,oBCLJ,CDQI,wBALF,uBAMI,cAAA,CACA,mBCLJ,CACF,CDQE,qBACE,sBAAA,CAAA,iBAAA,CACA,qBCNJ,CDQI,yBAEE,cAAA,CADA,aCLN,CDUE,qBAGE,2BAAA,CAFA,cAAA,CACA,mBCPJ,CDUI,uBACE,2BAAA,CACA,0BCRN,CDWI,wBAVF,qBAWI,kBAAA,CACA,kBCRJ,CACF,CDWE,wBAWE,kBAAA,CACA,mCAAA,CAJA,kCAAA,CACA,0CAAA,CAJA,YAAA,CAKA,sCAAA,CAHA,YAAA,CADA,UCPJ,CDEI,8BACE,SCAN,CDYI,uDACE,oCAAA,CACA,kBCVN,CDaI,8DACE,iCAAA,CACA,2CCXN,CDcI,sDACE,qCCZN,CDeI,gCACE,iBCbN,CDgBI,oHAIE,oCAAA,CAFA,sCAAA,CAGA,gBAAA,CAFA,2BAAA,CAGA,kBCfN,CDiBM,oIACE,2BAAA,CACA,kBAAA,CACA,0BCfR,CDmBI,gFACE,qCAAA,CACA,+CCjBN,CC9GA,yBASE,mCAAA,CALA,kCAAA,CACA,0CAAA,CAGA,2BAAA,CAFA,cAAA,CAJA,eAAA,CAKA,mBAAA,CAJA,6BAAA,CAFA,UDyHF,CC/GE,wBAXF,yBAYI,kBAAA,CACA,kBDkHF,CACF,CChHE,gCACE,qCDkHJ,CC9GI,+EAEE,iCAAA,CACA,YD+GN,CC3GE,6FACE,iCAAA,CACA,YD6GJ","file":"TextArea.css","sourcesContent":["@use \"../../common/common\" as common;\n\n.af-form {\n &__input-container {\n --row-gap: calc(8 / var(--font-size-base) * 1rem);\n\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n row-gap: var(--row-gap);\n }\n\n &__label-container {\n --row-gap: calc(4 / var(--font-size-base) * 1rem);\n\n display: flex;\n flex-direction: column;\n row-gap: var(--row-gap);\n }\n\n &__input-label {\n font-size: common.rem(18);\n font-weight: 600;\n line-height: common.rem(20);\n color: var(--color-gray-900);\n\n @media (width > #{common.$breakpoint-md}) {\n font-size: common.rem(18);\n line-height: common.rem(24);\n }\n }\n\n &__input-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 &__input-helper {\n font-size: common.rem(14);\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 &__input-more {\n width: fit-content;\n fill: var(--color-axa);\n\n svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n\n &__input-text {\n font-size: common.rem(16);\n line-height: common.rem(20);\n color: var(--color-gray-900);\n\n & ~ * {\n color: var(--color-gray-900);\n fill: var(--color-gray-900);\n }\n\n @media (width > #{common.$breakpoint-md}) {\n font-size: common.rem(18);\n line-height: common.rem(24);\n }\n }\n\n &__input-variant {\n & > input {\n all: unset;\n }\n\n display: grid;\n width: 100%;\n padding: 1rem;\n border: 1px solid var(--color-gray);\n border-radius: var(--default-border-radius);\n grid-template-columns: auto min-content;\n align-items: center;\n background-color: var(--color-white);\n\n &:has(> input:is(:focus-visible)) {\n outline: 2px solid var(--color-focus);\n outline-offset: 3px;\n }\n\n &:has(> input:is(:hover, :focus, :active)) {\n border: 1px solid var(--color-axa);\n box-shadow: 0 0 0 1px var(--color-axa) inset;\n }\n\n &:has(> input[class*=\"--error\"]) {\n border: 1px solid var(--color-red-700);\n }\n\n & > input ~ * {\n margin-left: 0.5rem;\n }\n\n &:has(> input:disabled),\n &:has(> input:disabled):is(:hover, :focus, :active) {\n border: 1px solid var(--color-gray-400);\n color: var(--color-gray-500);\n background-color: var(--color-border);\n box-shadow: unset;\n cursor: not-allowed;\n\n & > input ~ * {\n color: var(--color-gray-500);\n cursor: not-allowed;\n fill: var(--color-gray-500);\n }\n }\n\n &:has(> input[class*=\"--error\"]):is(:hover, :focus, :active) {\n border: 1px solid var(--color-red-700);\n box-shadow: 0 0 0 1px var(--color-red-700) inset;\n }\n }\n}\n","@use \"../../common/common\" as common;\n@use \"../Text/Text\";\n\n.af-form__input-textarea {\n width: 100%;\n height: common.rem(142);\n padding: 1rem 2.5rem 1rem 1rem;\n border: 1px solid var(--color-gray);\n border-radius: var(--default-border-radius);\n font-size: common.rem(16);\n line-height: common.rem(20);\n color: var(--color-gray-900);\n background-color: var(--color-white);\n\n @media (width > #{common.$breakpoint-md}) {\n font-size: common.rem(18);\n line-height: common.rem(24);\n }\n\n &--error {\n border: 2px solid var(--color-red-700);\n }\n\n &:enabled {\n &:focus,\n &:active {\n border: 1px solid var(--color-axa);\n outline: none;\n }\n }\n\n &:not(:disabled, :focus, :active, &--error):hover {\n border: 2px solid var(--color-axa);\n outline: none;\n }\n}\n","@use \"../../common/common\" as common;\n@use \"../Text/Text\";\n\n.af-form__input-textarea {\n width: 100%;\n height: common.rem(142);\n padding: 1rem 2.5rem 1rem 1rem;\n border: 1px solid var(--color-gray);\n border-radius: var(--default-border-radius);\n font-size: common.rem(16);\n line-height: common.rem(20);\n color: var(--color-gray-900);\n background-color: var(--color-white);\n\n @media (width > #{common.$breakpoint-md}) {\n font-size: common.rem(18);\n line-height: common.rem(24);\n }\n\n &--error {\n border: 2px solid var(--color-red-700);\n }\n\n &:enabled {\n &:focus,\n &:active {\n border: 1px solid var(--color-axa);\n outline: none;\n }\n }\n\n &:not(:disabled, :focus, :active, &--error):hover {\n border: 2px solid var(--color-axa);\n outline: none;\n }\n}\n"]}
|