@axa-fr/design-system-apollo-css 1.0.5-alpha.367 → 1.0.5-alpha.371
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Form/Checkbox/CardCheckbox/CardCheckboxApollo.css +1 -1
- package/dist/Form/Checkbox/CardCheckbox/CardCheckboxApollo.css.map +1 -1
- package/dist/Form/Checkbox/CardCheckbox/CardCheckboxApollo.scss +1 -0
- package/dist/Form/Checkbox/CardCheckbox/CardCheckboxCommon.css +1 -1
- package/dist/Form/Checkbox/CardCheckbox/CardCheckboxCommon.css.map +1 -1
- package/dist/Form/Checkbox/CardCheckbox/CardCheckboxCommon.scss +28 -9
- package/dist/Form/Checkbox/CardCheckbox/CardCheckboxLF.css +1 -1
- package/dist/Form/Checkbox/CardCheckbox/CardCheckboxLF.css.map +1 -1
- package/dist/Form/Checkbox/CardCheckbox/CardCheckboxLF.scss +2 -1
- package/dist/Form/Checkbox/Checkbox/CheckboxApollo.css +1 -1
- package/dist/Form/Checkbox/Checkbox/CheckboxApollo.css.map +1 -1
- package/dist/Form/Checkbox/Checkbox/CheckboxApollo.scss +7 -0
- package/dist/Form/Checkbox/Checkbox/CheckboxCommon.css +1 -1
- package/dist/Form/Checkbox/Checkbox/CheckboxCommon.css.map +1 -1
- package/dist/Form/Checkbox/Checkbox/CheckboxCommon.scss +7 -7
- package/dist/Form/Checkbox/Checkbox/CheckboxLF.css +1 -1
- package/dist/Form/Checkbox/Checkbox/CheckboxLF.css.map +1 -1
- package/dist/Form/Checkbox/Checkbox/CheckboxLF.scss +2 -1
- package/dist/Form/Radio/CardRadio/CardRadioApollo.css +1 -1
- package/dist/Form/Radio/CardRadio/CardRadioApollo.css.map +1 -1
- package/dist/Form/Radio/CardRadio/CardRadioApollo.scss +23 -5
- package/dist/Form/Radio/CardRadio/CardRadioCommon.css +1 -1
- package/dist/Form/Radio/CardRadio/CardRadioCommon.css.map +1 -1
- package/dist/Form/Radio/CardRadio/CardRadioCommon.scss +31 -10
- package/dist/Form/Radio/CardRadio/CardRadioLF.css +1 -1
- package/dist/Form/Radio/CardRadio/CardRadioLF.css.map +1 -1
- package/dist/Form/Radio/CardRadio/CardRadioLF.scss +11 -8
- package/dist/Form/Radio/Radio/RadioApollo.css +1 -1
- package/dist/Form/Radio/Radio/RadioApollo.css.map +1 -1
- package/dist/Form/Radio/Radio/RadioApollo.scss +10 -2
- package/dist/Form/Radio/Radio/RadioCommon.css +1 -1
- package/dist/Form/Radio/Radio/RadioCommon.css.map +1 -1
- package/dist/Form/Radio/Radio/RadioCommon.scss +9 -8
- package/dist/Form/Radio/Radio/RadioLF.css +1 -1
- package/dist/Form/Radio/Radio/RadioLF.css.map +1 -1
- package/dist/Form/Radio/Radio/RadioLF.scss +14 -4
- package/dist/Form/TextArea/TextAreaApollo.css +1 -1
- package/dist/Form/TextArea/TextAreaApollo.css.map +1 -1
- package/dist/Form/TextArea/TextAreaApollo.scss +46 -7
- package/dist/Form/TextArea/TextAreaCommon.css +1 -1
- package/dist/Form/TextArea/TextAreaCommon.css.map +1 -1
- package/dist/Form/TextArea/TextAreaCommon.scss +75 -52
- package/dist/Form/TextArea/TextAreaLF.css +1 -1
- package/dist/Form/TextArea/TextAreaLF.css.map +1 -1
- package/dist/Form/TextArea/TextAreaLF.scss +19 -10
- package/dist/apollo.css +1 -1
- package/dist/apollo.css.map +1 -1
- package/dist/look-and-feel.css +2 -2
- package/dist/look-and-feel.css.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/Form/Radio/Radio/RadioCommon.scss","../../../../src/Form/Radio/Radio/RadioLF.scss","../../../../src/Form/Radio/Radio/RadioLF.scss%23sass"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"sources":["../../../../src/Form/Radio/Radio/RadioCommon.scss","../../../../src/Form/Radio/Radio/RadioLF.scss","../../../../src/Form/Radio/Radio/RadioLF.scss%23sass"],"names":[],"mappings":"AAAA,UACE,wBAAA,CAOA,kBAAA,CAGA,8CAAA,CALA,gEAAA,CCJF,YAAA,CDQE,uCAAA,CADA,sBAAA,CAGA,mEAAA,CACA,gFAAA,CATA,yCCSF,CDIE,2BAZA,cAAA,CAEA,iBCaF,CDHE,iBAKE,mDAAA,CAJA,YAAA,CACA,wBCCJ,CDKE,4BAME,cAAA,CAHA,0CAAA,CACA,QAAA,CACA,SAAA,CAJA,iBAAA,CACA,yCCCJ,CDKI,qDACE,aCHN,CC7BA,UACE,0CAAA,CACA,+CAAA,CACA,yBAAA,CACA,2CDgCF,CC9BE,iBACE,iDAAA,CACA,8CDgCJ,CC7BE,+DAGE,qCD6BJ,CC1BE,uCAEE,yBD2BJ,CCxBE,wBACE,yBD0BJ,CCvBE,uDACE,yCDyBJ","file":"RadioLF.css","sourcesContent":[".af-radio {\n --radio-border-width: 1px;\n\n display: flex;\n width: calc(24 / var(--font-size-base) * 1rem);\n aspect-ratio: 1;\n border: var(--radio-border-width) solid var(--radio-border-color);\n border-radius: 50%;\n align-items: center;\n justify-content: center;\n gap: calc(12 / var(--font-size-base) * 1rem);\n background-color: var(--radio-background-color);\n outline: var(--radio-outline-width) solid var(--radio-outline-color);\n outline-offset: calc(\n -1 * calc(var(--radio-border-width) + var(--radio-outline-width))\n );\n\n &__icons {\n display: none;\n width: var(--radio-width);\n aspect-ratio: 1;\n border-radius: 50%;\n background-color: var(--radio-icon-background-color);\n }\n\n input[type=\"radio\"] {\n position: absolute;\n width: calc(24 / var(--font-size-base) * 1rem);\n height: calc(24 / var(--font-size-base) * 1rem);\n margin: 0;\n opacity: 0;\n cursor: pointer;\n\n &:checked ~ .af-radio__icons {\n display: block;\n }\n }\n}\n","@use \"RadioCommon\";\n\n.af-radio {\n --radio-border-color: var(--color-gray-700);\n --radio-outline-color: var(--radio-border-color);\n --radio-outline-width: 1px;\n --radio-background-color: var(--color-white);\n\n &__icons {\n --radio-width: calc(10 / var(--font-size-base) * 1rem);\n --radio-icon-background-color: var(--color-axa);\n }\n\n &:hover,\n &:focus-within,\n &:has(:checked) {\n --radio-border-color: var(--color-axa);\n }\n\n &:hover,\n &:focus-within {\n --radio-outline-width: 2px;\n }\n\n &:has(:checked) {\n --radio-outline-width: 1px;\n }\n\n &:not(:has(:checked)):has([aria-invalid=\"true\"]) {\n --radio-border-color: var(--color-red-700);\n }\n}\n","@use \"RadioCommon\";\n\n.af-radio {\n --radio-border-color: var(--color-gray-700);\n --radio-outline-color: var(--radio-border-color);\n --radio-outline-width: 1px;\n --radio-background-color: var(--color-white);\n\n &__icons {\n --radio-width: calc(10 / var(--font-size-base) * 1rem);\n --radio-icon-background-color: var(--color-axa);\n }\n\n &:hover,\n &:focus-within,\n &:has(:checked) {\n --radio-border-color: var(--color-axa);\n }\n\n &:hover,\n &:focus-within {\n --radio-outline-width: 2px;\n }\n\n &:has(:checked) {\n --radio-outline-width: 1px;\n }\n\n &:not(:has(:checked)):has([aria-invalid=\"true\"]) {\n --radio-border-color: var(--color-red-700);\n }\n}\n"]}
|
|
@@ -3,11 +3,12 @@
|
|
|
3
3
|
.af-radio {
|
|
4
4
|
--radio-border-color: var(--color-gray-700);
|
|
5
5
|
--radio-outline-color: var(--radio-border-color);
|
|
6
|
-
--radio-
|
|
6
|
+
--radio-outline-width: 1px;
|
|
7
|
+
--radio-background-color: var(--color-white);
|
|
7
8
|
|
|
8
9
|
&__icons {
|
|
9
|
-
--radio-width: calc(
|
|
10
|
-
--radio-background-color: var(--color-axa);
|
|
10
|
+
--radio-width: calc(10 / var(--font-size-base) * 1rem);
|
|
11
|
+
--radio-icon-background-color: var(--color-axa);
|
|
11
12
|
}
|
|
12
13
|
|
|
13
14
|
&:hover,
|
|
@@ -16,7 +17,16 @@
|
|
|
16
17
|
--radio-border-color: var(--color-axa);
|
|
17
18
|
}
|
|
18
19
|
|
|
19
|
-
|
|
20
|
+
&:hover,
|
|
21
|
+
&:focus-within {
|
|
22
|
+
--radio-outline-width: 2px;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&:has(:checked) {
|
|
26
|
+
--radio-outline-width: 1px;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&:not(:has(:checked)):has([aria-invalid="true"]) {
|
|
20
30
|
--radio-border-color: var(--color-red-700);
|
|
21
31
|
}
|
|
22
32
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-form__input-textarea{background-color:var(--input-text-area-background);border:1px solid var(--input-text-area-border-color);border-radius:var(--input-text-area-border-radius);box-shadow:0 0 0 1px var(--input-text-area-background);color:var(--input-text-area-color);font:var(--font-family-base);font-size:calc(
|
|
1
|
+
.af-form__input-container .af-item-label .af-item-label__label{font-size:var(--input-text-area-font-size)}.af-form__input-container .af-form__input-textarea{background-color:var(--input-text-area-background);border:1px solid var(--input-text-area-border-color);border-radius:var(--input-text-area-border-radius);box-shadow:0 0 0 1px var(--input-text-area-background);color:var(--input-text-area-color);font:var(--font-family-base);font-size:var(--input-text-area-font-size);line-height:calc(20/var(--font-size-base)*1rem);min-height:calc(56/var(--font-size-base)*1rem);padding:calc(16/var(--font-size-base)*1rem);resize:vertical;width:100%}@media (width < 667px){.af-form__input-container .af-form__input-textarea{box-shadow:none;line-height:125%;--input-text-area-font-size:calc(16/var(--font-size-base)*1rem)}.af-form__input-container .af-form__input-textarea:focus{font-size:var(--input-text-area-font-size)}}.af-form__input-container .af-form__input-textarea :focus,.af-form__input-container .af-form__input-textarea :hover,.af-form__input-container .af-form__input-textarea :not(:placeholder-shown),.af-form__input-container .af-form__input-textarea--error{box-shadow:1px solid var(--input-text-area-box-shadow-color);color:var(--input-text-area-font-color);font-weight:var(--input-text-area-font-weight);outline:none}.af-form__input-container .af-form__input-textarea:active,.af-form__input-container .af-form__input-textarea:enabled,.af-form__input-container .af-form__input-textarea:focus{box-shadow:0 0 0 1px var(--white);outline:none}.af-form__input-container .af-form__input-textarea--error:focus,.af-form__input-container .af-form__input-textarea--error:hover{box-shadow:0 0 0 1px var(--input-text-area-box-shadow-color)}.af-form__input-container .af-form__input-textarea:disabled{background:var(--input-text-area-background);border:1px solid var(--input-text-area-border-color)}.af-form__input-container .af-form__input-textarea:not(:placeholder-shown,:focus,:disabled,.af-form__input-textarea--error){box-shadow:0 0 0 1px var(--input-text-area-box-shadow)}.af-form__input-container .af-form__input-textarea:disabled:not(:placeholder-shown){border:1px solid var(--input-text-area-border-color)}.af-form__input-container .af-form__input-textarea:not(.af-form__input-textarea--error):focus,.af-form__input-container .af-form__input-textarea:not(.af-form__input-textarea--error,:disabled):hover{border:var(--input-text-area-border-size) solid var(--input-text-area-border-color);box-shadow:0 0 0 1px var(--input-text-area-border-color)}.af-form__input-container .af-form__input-textarea:not(:disabled,.af-form__input-container .af-form__input-textarea--error):focus,.af-form__input-container .af-form__input-textarea:not(:disabled,.af-form__input-container .af-form__input-textarea--error):hover,.af-form__input-container .af-form__input-textarea:not(:disabled,.af-form__input-container .af-form__input-textarea--error):not(:placeholder-shown,:focus){color:var(--input-text-area-font-color);font-weight:var(--input-text-area-font-weight)}.af-form__input-container .af-item-label .af-item-label__label{--input-text-area-font-size:calc(18/var(--font-size-base)*1rem)}@media (width < 667px){.af-form__input-container .af-item-label .af-item-label__label,.af-form__input-container :focus,.af-form__input-container :hover,.af-form__input-container :placeholder-shown,.af-form__input-container--error,.af-form__input-container:not(:disabled,.af-form__input-container--error){--input-text-area-font-size:calc(16/var(--font-size-base)*1rem)}}.af-form__input-textarea{--input-text-area-box-shadow:var(--axa-blue-100);--input-text-area-border-radius:var(--radius-8);--input-text-area-border-color:var(--axa-blue-65);--input-text-area-background:var(--white);--input-text-area-color:var(--neutral-80)}.af-form__input-textarea--error{--input-text-area-border-color:var(--axa-red-100)}.af-form__input-textarea--error:focus,.af-form__input-textarea--error:hover{--input-text-area-box-shadow-color:var(--axa-red-100)}.af-form__input-textarea:not(:placeholder-shown,:focus,:active){--input-text-area-font-color:var(--axa-blue-100)}.af-form__input-textarea :focus,.af-form__input-textarea :not(:placeholder-shown){--input-text-area-font-size:calc(18/var(--font-size-base)*1rem);--input-text-area-font-weight:400}.af-form__input-textarea:disabled{--input-text-area-border-color:var(--neutral-14);--input-text-area-background:var(--neutral-5)}.af-form__input-textarea:disabled:not(:placeholder-shown){--input-text-area-border-color:var(--neutral-14)}.af-form__input-textarea:not(.af-form__input-textarea--error):focus,.af-form__input-textarea:not(.af-form__input-textarea--error,:disabled):hover{--input-text-area-border-size:2px;--input-text-area-border-color:var(--axa-blue-100)}.af-form__input-textarea:not(:disabled,.af-form__input-textarea--error):not(:placeholder-shown){--input-text-area-font-color:var(--axa-blue-100);--input-text-area-font-weight:600}@media (width < 667px){.af-form__input-textarea,.af-form__input-textarea:not(.af-form__input-textarea--error):focus{--input-text-area-font-size:calc(16/var(--font-size-base)*1rem)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Form/TextArea/TextAreaCommon.scss","../../../src/Form/TextArea/TextAreaApollo.scss","../../../src/Form/TextArea/TextAreaApollo.scss%23sass"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/Form/TextArea/TextAreaCommon.scss","../../../src/Form/TextArea/TextAreaApollo.scss","../../../src/Form/TextArea/TextAreaApollo.scss%23sass"],"names":[],"mappings":"AAGE,+DCFF,0CACA,CDKE,mDAUE,kDAAA,CANA,oDAAA,CACA,kDAAA,CAMA,sDAAA,CAFA,kCAAA,CAHA,4BAAA,CACA,0CAAA,CACA,+CAAA,CANA,8CAAA,CACA,2CAAA,CASA,eAAA,CAXA,UCQJ,CDKI,uBAdF,mDCaF,eAAA,CADE,gBAAA,CDMI,+DCHN,CDKM,yDCHJ,0CACA,CACF,CDMI,0PAME,4DAAA,CADA,uCAAA,CADA,8CAAA,CAGA,YCJN,CDOI,8KAGE,iCAAA,CACA,YCPN,CDUI,gIAEE,4DCTN,CDYI,4DAEE,4CAAA,CADA,oDCTN,CDaI,4HAME,sDCbN,CDgBI,oFACE,oDCdN,CDiBI,sMAEE,mFAAA,CAEA,wDCjBN,CDqBM,+ZAIE,uCAAA,CADA,8CCpBR,CC3DE,+DACE,+DD8DJ,CC5DE,uBAKE,yRAKE,+DD2DJ,CACF,CCvDA,yBACE,gDAAA,CACA,+CAAA,CACA,iDAAA,CACA,yCAAA,CACA,yCD0DF,CCxDE,gCACE,iDD0DJ,CCvDE,4EAEE,qDDwDJ,CCrDE,gEACE,gDDuDJ,CCpDE,kFAEE,+DAAA,CACA,iCDsDJ,CCnDE,kCACE,gDAAA,CACA,6CDqDJ,CClDE,0DACE,gDDoDJ,CCjDE,kJAEE,iCAAA,CACA,kDDkDJ,CC9CI,gGACE,gDAAA,CACA,iCDgDN,CC5CE,uBAGE,6FACE,+DD+CJ,CACF","file":"TextAreaApollo.css","sourcesContent":["@use \"../../common/breakpoints\" as breakpoints;\n\n.af-form__input-container {\n .af-item-label .af-item-label__label {\n font-size: var(--input-text-area-font-size);\n }\n\n .af-form__input-textarea {\n width: 100%;\n min-height: calc(56 / var(--font-size-base) * 1rem);\n padding: calc(16 / var(--font-size-base) * 1rem);\n border: 1px solid var(--input-text-area-border-color);\n border-radius: var(--input-text-area-border-radius);\n font: var(--font-family-base);\n font-size: var(--input-text-area-font-size);\n line-height: calc(20 / var(--font-size-base) * 1rem);\n color: var(--input-text-area-color);\n background-color: var(--input-text-area-background);\n box-shadow: 0 0 0 1px var(--input-text-area-background);\n resize: vertical;\n\n @media (width < #{breakpoints.$breakpoint-sm}) {\n line-height: 125%;\n box-shadow: none;\n\n --input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);\n\n &:focus {\n font-size: var(--input-text-area-font-size);\n }\n }\n\n &--error,\n :not(:placeholder-shown),\n :focus,\n :hover {\n font-weight: var(--input-text-area-font-weight);\n color: var(--input-text-area-font-color);\n box-shadow: 1px solid var(--input-text-area-box-shadow-color);\n outline: none;\n }\n\n &:enabled,\n &:focus,\n &:active {\n box-shadow: 0 0 0 1px var(--white);\n outline: none;\n }\n\n &--error:hover,\n &--error:focus {\n box-shadow: 0 0 0 1px var(--input-text-area-box-shadow-color);\n }\n\n &:disabled {\n border: 1px solid var(--input-text-area-border-color);\n background: var(--input-text-area-background);\n }\n\n &:not(\n :placeholder-shown,\n :focus,\n :disabled,\n .af-form__input-textarea--error\n ) {\n box-shadow: 0 0 0 1px var(--input-text-area-box-shadow);\n }\n\n &:disabled:not(:placeholder-shown) {\n border: 1px solid var(--input-text-area-border-color);\n }\n\n &:not(.af-form__input-textarea--error):focus,\n &:not(.af-form__input-textarea--error, :disabled):hover {\n border: var(--input-text-area-border-size) solid\n var(--input-text-area-border-color);\n box-shadow: 0 0 0 1px var(--input-text-area-border-color);\n }\n\n &:not(:disabled, &--error) {\n &:focus,\n &:hover,\n &:not(:placeholder-shown, :focus) {\n font-weight: var(--input-text-area-font-weight);\n color: var(--input-text-area-font-color);\n }\n }\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n@use \"TextAreaCommon\";\n\n.af-form__input-container {\n .af-item-label .af-item-label__label {\n --input-text-area-font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n @media (width < #{breakpoints.$breakpoint-sm}) {\n .af-item-label .af-item-label__label {\n --input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n\n :focus,\n :hover,\n :placeholder-shown,\n &:not(:disabled, &--error),\n &--error {\n --input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n }\n}\n\n.af-form__input-textarea {\n --input-text-area-box-shadow: var(--axa-blue-100);\n --input-text-area-border-radius: var(--radius-8);\n --input-text-area-border-color: var(--axa-blue-65);\n --input-text-area-background: var(--white);\n --input-text-area-color: var(--neutral-80);\n\n &--error {\n --input-text-area-border-color: var(--axa-red-100);\n }\n\n &--error:hover,\n &--error:focus {\n --input-text-area-box-shadow-color: var(--axa-red-100);\n }\n\n &:not(:placeholder-shown, :focus, :active) {\n --input-text-area-font-color: var(--axa-blue-100);\n }\n\n :not(:placeholder-shown),\n :focus {\n --input-text-area-font-size: calc(18 / var(--font-size-base) * 1rem);\n --input-text-area-font-weight: 400;\n }\n\n &:disabled {\n --input-text-area-border-color: var(--neutral-14);\n --input-text-area-background: var(--neutral-5);\n }\n\n &:disabled:not(:placeholder-shown) {\n --input-text-area-border-color: var(--neutral-14);\n }\n\n &:not(.af-form__input-textarea--error):focus,\n &:not(.af-form__input-textarea--error, :disabled):hover {\n --input-text-area-border-size: 2px;\n --input-text-area-border-color: var(--axa-blue-100);\n }\n\n &:not(:disabled, &--error) {\n &:not(:placeholder-shown) {\n --input-text-area-font-color: var(--axa-blue-100);\n --input-text-area-font-weight: 600;\n }\n }\n\n @media (width < #{breakpoints.$breakpoint-sm}) {\n --input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);\n\n &:not(.af-form__input-textarea--error):focus {\n --input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n@use \"TextAreaCommon\";\n\n.af-form__input-container {\n .af-item-label .af-item-label__label {\n --input-text-area-font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n @media (width < #{breakpoints.$breakpoint-sm}) {\n .af-item-label .af-item-label__label {\n --input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n\n :focus,\n :hover,\n :placeholder-shown,\n &:not(:disabled, &--error),\n &--error {\n --input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n }\n}\n\n.af-form__input-textarea {\n --input-text-area-box-shadow: var(--axa-blue-100);\n --input-text-area-border-radius: var(--radius-8);\n --input-text-area-border-color: var(--axa-blue-65);\n --input-text-area-background: var(--white);\n --input-text-area-color: var(--neutral-80);\n\n &--error {\n --input-text-area-border-color: var(--axa-red-100);\n }\n\n &--error:hover,\n &--error:focus {\n --input-text-area-box-shadow-color: var(--axa-red-100);\n }\n\n &:not(:placeholder-shown, :focus, :active) {\n --input-text-area-font-color: var(--axa-blue-100);\n }\n\n :not(:placeholder-shown),\n :focus {\n --input-text-area-font-size: calc(18 / var(--font-size-base) * 1rem);\n --input-text-area-font-weight: 400;\n }\n\n &:disabled {\n --input-text-area-border-color: var(--neutral-14);\n --input-text-area-background: var(--neutral-5);\n }\n\n &:disabled:not(:placeholder-shown) {\n --input-text-area-border-color: var(--neutral-14);\n }\n\n &:not(.af-form__input-textarea--error):focus,\n &:not(.af-form__input-textarea--error, :disabled):hover {\n --input-text-area-border-size: 2px;\n --input-text-area-border-color: var(--axa-blue-100);\n }\n\n &:not(:disabled, &--error) {\n &:not(:placeholder-shown) {\n --input-text-area-font-color: var(--axa-blue-100);\n --input-text-area-font-weight: 600;\n }\n }\n\n @media (width < #{breakpoints.$breakpoint-sm}) {\n --input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);\n\n &:not(.af-form__input-textarea--error):focus {\n --input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n }\n}\n"]}
|
|
@@ -1,9 +1,29 @@
|
|
|
1
|
+
@use "../../common/breakpoints" as breakpoints;
|
|
1
2
|
@use "TextAreaCommon";
|
|
2
3
|
|
|
4
|
+
.af-form__input-container {
|
|
5
|
+
.af-item-label .af-item-label__label {
|
|
6
|
+
--input-text-area-font-size: calc(18 / var(--font-size-base) * 1rem);
|
|
7
|
+
}
|
|
8
|
+
@media (width < #{breakpoints.$breakpoint-sm}) {
|
|
9
|
+
.af-item-label .af-item-label__label {
|
|
10
|
+
--input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
:focus,
|
|
14
|
+
:hover,
|
|
15
|
+
:placeholder-shown,
|
|
16
|
+
&:not(:disabled, &--error),
|
|
17
|
+
&--error {
|
|
18
|
+
--input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
3
23
|
.af-form__input-textarea {
|
|
24
|
+
--input-text-area-box-shadow: var(--axa-blue-100);
|
|
4
25
|
--input-text-area-border-radius: var(--radius-8);
|
|
5
26
|
--input-text-area-border-color: var(--axa-blue-65);
|
|
6
|
-
--input-text-area-height: 148px;
|
|
7
27
|
--input-text-area-background: var(--white);
|
|
8
28
|
--input-text-area-color: var(--neutral-80);
|
|
9
29
|
|
|
@@ -13,7 +33,17 @@
|
|
|
13
33
|
|
|
14
34
|
&--error:hover,
|
|
15
35
|
&--error:focus {
|
|
16
|
-
--input-text-area-
|
|
36
|
+
--input-text-area-box-shadow-color: var(--axa-red-100);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&:not(:placeholder-shown, :focus, :active) {
|
|
40
|
+
--input-text-area-font-color: var(--axa-blue-100);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
:not(:placeholder-shown),
|
|
44
|
+
:focus {
|
|
45
|
+
--input-text-area-font-size: calc(18 / var(--font-size-base) * 1rem);
|
|
46
|
+
--input-text-area-font-weight: 400;
|
|
17
47
|
}
|
|
18
48
|
|
|
19
49
|
&:disabled {
|
|
@@ -21,19 +51,28 @@
|
|
|
21
51
|
--input-text-area-background: var(--neutral-5);
|
|
22
52
|
}
|
|
23
53
|
|
|
54
|
+
&:disabled:not(:placeholder-shown) {
|
|
55
|
+
--input-text-area-border-color: var(--neutral-14);
|
|
56
|
+
}
|
|
57
|
+
|
|
24
58
|
&:not(.af-form__input-textarea--error):focus,
|
|
25
|
-
&:not(.af-form__input-textarea--error):hover {
|
|
26
|
-
--input-text-area-border-size:
|
|
59
|
+
&:not(.af-form__input-textarea--error, :disabled):hover {
|
|
60
|
+
--input-text-area-border-size: 2px;
|
|
27
61
|
--input-text-area-border-color: var(--axa-blue-100);
|
|
28
62
|
}
|
|
29
63
|
|
|
30
64
|
&:not(:disabled, &--error) {
|
|
31
|
-
&:focus,
|
|
32
|
-
&:hover,
|
|
33
65
|
&:not(:placeholder-shown) {
|
|
34
66
|
--input-text-area-font-color: var(--axa-blue-100);
|
|
35
|
-
--input-text-area-font-size: calc(18 / var(--font-size-base) * 1rem);
|
|
36
67
|
--input-text-area-font-weight: 600;
|
|
37
68
|
}
|
|
38
69
|
}
|
|
70
|
+
|
|
71
|
+
@media (width < #{breakpoints.$breakpoint-sm}) {
|
|
72
|
+
--input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);
|
|
73
|
+
|
|
74
|
+
&:not(.af-form__input-textarea--error):focus {
|
|
75
|
+
--input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
39
78
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-form__input-textarea{background-color:var(--input-text-area-background);border:1px solid var(--input-text-area-border-color);border-radius:var(--input-text-area-border-radius);box-shadow:0 0 0 1px var(--input-text-area-background);color:var(--input-text-area-color);font:var(--font-family-base);font-size:calc(
|
|
1
|
+
.af-form__input-container .af-item-label .af-item-label__label{font-size:var(--input-text-area-font-size)}.af-form__input-container .af-form__input-textarea{background-color:var(--input-text-area-background);border:1px solid var(--input-text-area-border-color);border-radius:var(--input-text-area-border-radius);box-shadow:0 0 0 1px var(--input-text-area-background);color:var(--input-text-area-color);font:var(--font-family-base);font-size:var(--input-text-area-font-size);line-height:calc(20/var(--font-size-base)*1rem);min-height:calc(56/var(--font-size-base)*1rem);padding:calc(16/var(--font-size-base)*1rem);resize:vertical;width:100%}@media (width < 667px){.af-form__input-container .af-form__input-textarea{box-shadow:none;line-height:125%;--input-text-area-font-size:calc(16/var(--font-size-base)*1rem)}.af-form__input-container .af-form__input-textarea:focus{font-size:var(--input-text-area-font-size)}}.af-form__input-container .af-form__input-textarea :focus,.af-form__input-container .af-form__input-textarea :hover,.af-form__input-container .af-form__input-textarea :not(:placeholder-shown),.af-form__input-container .af-form__input-textarea--error{box-shadow:1px solid var(--input-text-area-box-shadow-color);color:var(--input-text-area-font-color);font-weight:var(--input-text-area-font-weight);outline:none}.af-form__input-container .af-form__input-textarea:active,.af-form__input-container .af-form__input-textarea:enabled,.af-form__input-container .af-form__input-textarea:focus{box-shadow:0 0 0 1px var(--white);outline:none}.af-form__input-container .af-form__input-textarea--error:focus,.af-form__input-container .af-form__input-textarea--error:hover{box-shadow:0 0 0 1px var(--input-text-area-box-shadow-color)}.af-form__input-container .af-form__input-textarea:disabled{background:var(--input-text-area-background);border:1px solid var(--input-text-area-border-color)}.af-form__input-container .af-form__input-textarea:not(:placeholder-shown,:focus,:disabled,.af-form__input-textarea--error){box-shadow:0 0 0 1px var(--input-text-area-box-shadow)}.af-form__input-container .af-form__input-textarea:disabled:not(:placeholder-shown){border:1px solid var(--input-text-area-border-color)}.af-form__input-container .af-form__input-textarea:not(.af-form__input-textarea--error):focus,.af-form__input-container .af-form__input-textarea:not(.af-form__input-textarea--error,:disabled):hover{border:var(--input-text-area-border-size) solid var(--input-text-area-border-color);box-shadow:0 0 0 1px var(--input-text-area-border-color)}.af-form__input-container .af-form__input-textarea:not(:disabled,.af-form__input-container .af-form__input-textarea--error):focus,.af-form__input-container .af-form__input-textarea:not(:disabled,.af-form__input-container .af-form__input-textarea--error):hover,.af-form__input-container .af-form__input-textarea:not(:disabled,.af-form__input-container .af-form__input-textarea--error):not(:placeholder-shown,:focus){color:var(--input-text-area-font-color);font-weight:var(--input-text-area-font-weight)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Form/TextArea/TextAreaCommon.scss%23sass","../../../src/Form/TextArea/TextAreaCommon.scss"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/Form/TextArea/TextAreaCommon.scss%23sass","../../../src/Form/TextArea/TextAreaCommon.scss"],"names":[],"mappings":"AAGE,+DACE,0CCFJ,CDKE,mDAUE,kDAAA,CANA,oDAAA,CACA,kDAAA,CAMA,sDAAA,CAFA,kCAAA,CAHA,4BAAA,CACA,0CAAA,CACA,+CAAA,CANA,8CAAA,CACA,2CAAA,CASA,eAAA,CAXA,UCQJ,CDKI,uBAdF,mDAgBI,eAAA,CADA,gBAAA,CAGA,+DCHJ,CDKI,yDACE,0CCHN,CACF,CDMI,0PAME,4DAAA,CADA,uCAAA,CADA,8CAAA,CAGA,YCJN,CDOI,8KAGE,iCAAA,CACA,YCPN,CDUI,gIAEE,4DCTN,CDYI,4DAEE,4CAAA,CADA,oDCTN,CDaI,4HAME,sDCbN,CDgBI,oFACE,oDCdN,CDiBI,sMAEE,mFAAA,CAEA,wDCjBN,CDqBM,+ZAIE,uCAAA,CADA,8CCpBR","file":"TextAreaCommon.css","sourcesContent":["@use \"../../common/breakpoints\" as breakpoints;\n\n.af-form__input-container {\n .af-item-label .af-item-label__label {\n font-size: var(--input-text-area-font-size);\n }\n\n .af-form__input-textarea {\n width: 100%;\n min-height: calc(56 / var(--font-size-base) * 1rem);\n padding: calc(16 / var(--font-size-base) * 1rem);\n border: 1px solid var(--input-text-area-border-color);\n border-radius: var(--input-text-area-border-radius);\n font: var(--font-family-base);\n font-size: var(--input-text-area-font-size);\n line-height: calc(20 / var(--font-size-base) * 1rem);\n color: var(--input-text-area-color);\n background-color: var(--input-text-area-background);\n box-shadow: 0 0 0 1px var(--input-text-area-background);\n resize: vertical;\n\n @media (width < #{breakpoints.$breakpoint-sm}) {\n line-height: 125%;\n box-shadow: none;\n\n --input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);\n\n &:focus {\n font-size: var(--input-text-area-font-size);\n }\n }\n\n &--error,\n :not(:placeholder-shown),\n :focus,\n :hover {\n font-weight: var(--input-text-area-font-weight);\n color: var(--input-text-area-font-color);\n box-shadow: 1px solid var(--input-text-area-box-shadow-color);\n outline: none;\n }\n\n &:enabled,\n &:focus,\n &:active {\n box-shadow: 0 0 0 1px var(--white);\n outline: none;\n }\n\n &--error:hover,\n &--error:focus {\n box-shadow: 0 0 0 1px var(--input-text-area-box-shadow-color);\n }\n\n &:disabled {\n border: 1px solid var(--input-text-area-border-color);\n background: var(--input-text-area-background);\n }\n\n &:not(\n :placeholder-shown,\n :focus,\n :disabled,\n .af-form__input-textarea--error\n ) {\n box-shadow: 0 0 0 1px var(--input-text-area-box-shadow);\n }\n\n &:disabled:not(:placeholder-shown) {\n border: 1px solid var(--input-text-area-border-color);\n }\n\n &:not(.af-form__input-textarea--error):focus,\n &:not(.af-form__input-textarea--error, :disabled):hover {\n border: var(--input-text-area-border-size) solid\n var(--input-text-area-border-color);\n box-shadow: 0 0 0 1px var(--input-text-area-border-color);\n }\n\n &:not(:disabled, &--error) {\n &:focus,\n &:hover,\n &:not(:placeholder-shown, :focus) {\n font-weight: var(--input-text-area-font-weight);\n color: var(--input-text-area-font-color);\n }\n }\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n.af-form__input-container {\n .af-item-label .af-item-label__label {\n font-size: var(--input-text-area-font-size);\n }\n\n .af-form__input-textarea {\n width: 100%;\n min-height: calc(56 / var(--font-size-base) * 1rem);\n padding: calc(16 / var(--font-size-base) * 1rem);\n border: 1px solid var(--input-text-area-border-color);\n border-radius: var(--input-text-area-border-radius);\n font: var(--font-family-base);\n font-size: var(--input-text-area-font-size);\n line-height: calc(20 / var(--font-size-base) * 1rem);\n color: var(--input-text-area-color);\n background-color: var(--input-text-area-background);\n box-shadow: 0 0 0 1px var(--input-text-area-background);\n resize: vertical;\n\n @media (width < #{breakpoints.$breakpoint-sm}) {\n line-height: 125%;\n box-shadow: none;\n\n --input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);\n\n &:focus {\n font-size: var(--input-text-area-font-size);\n }\n }\n\n &--error,\n :not(:placeholder-shown),\n :focus,\n :hover {\n font-weight: var(--input-text-area-font-weight);\n color: var(--input-text-area-font-color);\n box-shadow: 1px solid var(--input-text-area-box-shadow-color);\n outline: none;\n }\n\n &:enabled,\n &:focus,\n &:active {\n box-shadow: 0 0 0 1px var(--white);\n outline: none;\n }\n\n &--error:hover,\n &--error:focus {\n box-shadow: 0 0 0 1px var(--input-text-area-box-shadow-color);\n }\n\n &:disabled {\n border: 1px solid var(--input-text-area-border-color);\n background: var(--input-text-area-background);\n }\n\n &:not(\n :placeholder-shown,\n :focus,\n :disabled,\n .af-form__input-textarea--error\n ) {\n box-shadow: 0 0 0 1px var(--input-text-area-box-shadow);\n }\n\n &:disabled:not(:placeholder-shown) {\n border: 1px solid var(--input-text-area-border-color);\n }\n\n &:not(.af-form__input-textarea--error):focus,\n &:not(.af-form__input-textarea--error, :disabled):hover {\n border: var(--input-text-area-border-size) solid\n var(--input-text-area-border-color);\n box-shadow: 0 0 0 1px var(--input-text-area-border-color);\n }\n\n &:not(:disabled, &--error) {\n &:focus,\n &:hover,\n &:not(:placeholder-shown, :focus) {\n font-weight: var(--input-text-area-font-weight);\n color: var(--input-text-area-font-color);\n }\n }\n }\n}\n"]}
|
|
@@ -1,66 +1,89 @@
|
|
|
1
1
|
@use "../../common/breakpoints" as breakpoints;
|
|
2
2
|
|
|
3
|
-
.af-form__input-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
padding: 16px;
|
|
7
|
-
border: 1px solid var(--input-text-area-border-color);
|
|
8
|
-
border-radius: var(--input-text-area-border-radius);
|
|
9
|
-
font: var(--font-family-base);
|
|
10
|
-
font-size: calc(16 / var(--font-size-base) * 1rem);
|
|
11
|
-
line-height: calc(20 / var(--font-size-base) * 1rem);
|
|
12
|
-
color: var(--input-text-area-color);
|
|
13
|
-
background-color: var(--input-text-area-background);
|
|
14
|
-
box-shadow: 0 0 0 1px var(--input-text-area-background);
|
|
15
|
-
|
|
16
|
-
@media (width > #{breakpoints.$breakpoint-md}) {
|
|
17
|
-
width: 100%;
|
|
18
|
-
font-size: calc(18 / var(--font-size-base) * 1rem);
|
|
19
|
-
line-height: calc(24 / var(--font-size-base) * 1rem);
|
|
3
|
+
.af-form__input-container {
|
|
4
|
+
.af-item-label .af-item-label__label {
|
|
5
|
+
font-size: var(--input-text-area-font-size);
|
|
20
6
|
}
|
|
21
7
|
|
|
22
|
-
|
|
8
|
+
.af-form__input-textarea {
|
|
9
|
+
width: 100%;
|
|
10
|
+
min-height: calc(56 / var(--font-size-base) * 1rem);
|
|
11
|
+
padding: calc(16 / var(--font-size-base) * 1rem);
|
|
23
12
|
border: 1px solid var(--input-text-area-border-color);
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
13
|
+
border-radius: var(--input-text-area-border-radius);
|
|
14
|
+
font: var(--font-family-base);
|
|
15
|
+
font-size: var(--input-text-area-font-size);
|
|
16
|
+
line-height: calc(20 / var(--font-size-base) * 1rem);
|
|
17
|
+
color: var(--input-text-area-color);
|
|
18
|
+
background-color: var(--input-text-area-background);
|
|
19
|
+
box-shadow: 0 0 0 1px var(--input-text-area-background);
|
|
20
|
+
resize: vertical;
|
|
27
21
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
box-shadow: 0 0 0 1px var(--white);
|
|
32
|
-
outline: none;
|
|
33
|
-
}
|
|
22
|
+
@media (width < #{breakpoints.$breakpoint-sm}) {
|
|
23
|
+
line-height: 125%;
|
|
24
|
+
box-shadow: none;
|
|
34
25
|
|
|
35
|
-
|
|
36
|
-
&--error:focus {
|
|
37
|
-
border: 2px solid var(--input-text-area-border-color);
|
|
38
|
-
}
|
|
26
|
+
--input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);
|
|
39
27
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
&:not(:placeholder-shown, :focus) {
|
|
47
|
-
box-shadow: 0 0 0 1px var(--input-text-area-box-shadow);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
&:not(.af-form__input-textarea--error):focus,
|
|
51
|
-
&:not(.af-form__input-textarea--error):hover {
|
|
52
|
-
border: var(--input-text-area-border-size) solid
|
|
53
|
-
var(--input-text-area-border-color);
|
|
54
|
-
box-shadow: 0 0 0 1px var(--input-text-area-border-color);
|
|
55
|
-
}
|
|
28
|
+
&:focus {
|
|
29
|
+
font-size: var(--input-text-area-font-size);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
56
32
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
font-size: var(--input-text-area-font-size);
|
|
33
|
+
&--error,
|
|
34
|
+
:not(:placeholder-shown),
|
|
35
|
+
:focus,
|
|
36
|
+
:hover {
|
|
62
37
|
font-weight: var(--input-text-area-font-weight);
|
|
63
38
|
color: var(--input-text-area-font-color);
|
|
39
|
+
box-shadow: 1px solid var(--input-text-area-box-shadow-color);
|
|
40
|
+
outline: none;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&:enabled,
|
|
44
|
+
&:focus,
|
|
45
|
+
&:active {
|
|
46
|
+
box-shadow: 0 0 0 1px var(--white);
|
|
47
|
+
outline: none;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
&--error:hover,
|
|
51
|
+
&--error:focus {
|
|
52
|
+
box-shadow: 0 0 0 1px var(--input-text-area-box-shadow-color);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
&:disabled {
|
|
56
|
+
border: 1px solid var(--input-text-area-border-color);
|
|
57
|
+
background: var(--input-text-area-background);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
&:not(
|
|
61
|
+
:placeholder-shown,
|
|
62
|
+
:focus,
|
|
63
|
+
:disabled,
|
|
64
|
+
.af-form__input-textarea--error
|
|
65
|
+
) {
|
|
66
|
+
box-shadow: 0 0 0 1px var(--input-text-area-box-shadow);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
&:disabled:not(:placeholder-shown) {
|
|
70
|
+
border: 1px solid var(--input-text-area-border-color);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
&:not(.af-form__input-textarea--error):focus,
|
|
74
|
+
&:not(.af-form__input-textarea--error, :disabled):hover {
|
|
75
|
+
border: var(--input-text-area-border-size) solid
|
|
76
|
+
var(--input-text-area-border-color);
|
|
77
|
+
box-shadow: 0 0 0 1px var(--input-text-area-border-color);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
&:not(:disabled, &--error) {
|
|
81
|
+
&:focus,
|
|
82
|
+
&:hover,
|
|
83
|
+
&:not(:placeholder-shown, :focus) {
|
|
84
|
+
font-weight: var(--input-text-area-font-weight);
|
|
85
|
+
color: var(--input-text-area-font-color);
|
|
86
|
+
}
|
|
64
87
|
}
|
|
65
88
|
}
|
|
66
89
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-form__input-textarea{background-color:var(--input-text-area-background);border:1px solid var(--input-text-area-border-color);border-radius:var(--input-text-area-border-radius);box-shadow:0 0 0 1px var(--input-text-area-background);color:var(--input-text-area-color);font:var(--font-family-base);font-size:calc(
|
|
1
|
+
.af-form__input-container .af-item-label .af-item-label__label{font-size:var(--input-text-area-font-size)}.af-form__input-container .af-form__input-textarea{background-color:var(--input-text-area-background);border:1px solid var(--input-text-area-border-color);border-radius:var(--input-text-area-border-radius);box-shadow:0 0 0 1px var(--input-text-area-background);color:var(--input-text-area-color);font:var(--font-family-base);font-size:var(--input-text-area-font-size);line-height:calc(20/var(--font-size-base)*1rem);min-height:calc(56/var(--font-size-base)*1rem);padding:calc(16/var(--font-size-base)*1rem);resize:vertical;width:100%}@media (width < 667px){.af-form__input-container .af-form__input-textarea{box-shadow:none;line-height:125%;--input-text-area-font-size:calc(16/var(--font-size-base)*1rem)}.af-form__input-container .af-form__input-textarea:focus{font-size:var(--input-text-area-font-size)}}.af-form__input-container .af-form__input-textarea :focus,.af-form__input-container .af-form__input-textarea :hover,.af-form__input-container .af-form__input-textarea :not(:placeholder-shown),.af-form__input-container .af-form__input-textarea--error{box-shadow:1px solid var(--input-text-area-box-shadow-color);color:var(--input-text-area-font-color);font-weight:var(--input-text-area-font-weight);outline:none}.af-form__input-container .af-form__input-textarea:active,.af-form__input-container .af-form__input-textarea:enabled,.af-form__input-container .af-form__input-textarea:focus{box-shadow:0 0 0 1px var(--white);outline:none}.af-form__input-container .af-form__input-textarea--error:focus,.af-form__input-container .af-form__input-textarea--error:hover{box-shadow:0 0 0 1px var(--input-text-area-box-shadow-color)}.af-form__input-container .af-form__input-textarea:disabled{background:var(--input-text-area-background);border:1px solid var(--input-text-area-border-color)}.af-form__input-container .af-form__input-textarea:not(:placeholder-shown,:focus,:disabled,.af-form__input-textarea--error){box-shadow:0 0 0 1px var(--input-text-area-box-shadow)}.af-form__input-container .af-form__input-textarea:disabled:not(:placeholder-shown){border:1px solid var(--input-text-area-border-color)}.af-form__input-container .af-form__input-textarea:not(.af-form__input-textarea--error):focus,.af-form__input-container .af-form__input-textarea:not(.af-form__input-textarea--error,:disabled):hover{border:var(--input-text-area-border-size) solid var(--input-text-area-border-color);box-shadow:0 0 0 1px var(--input-text-area-border-color)}.af-form__input-container .af-form__input-textarea:not(:disabled,.af-form__input-container .af-form__input-textarea--error):focus,.af-form__input-container .af-form__input-textarea:not(:disabled,.af-form__input-container .af-form__input-textarea--error):hover,.af-form__input-container .af-form__input-textarea:not(:disabled,.af-form__input-container .af-form__input-textarea--error):not(:placeholder-shown,:focus){color:var(--input-text-area-font-color);font-weight:var(--input-text-area-font-weight)}.af-form__input-container .af-item-label .af-item-label__label{--input-text-area-font-size:calc(18/var(--font-size-base)*1rem)}@media (width < 667px){.af-form__input-container .af-item-label .af-item-label__label{--input-text-area-font-size:calc(16/var(--font-size-base)*1rem)}}.af-form__input-textarea{--input-text-area-border-radius:var(--default-border-radius);--input-text-area-border-color:var(--color-gray-700);--input-text-area-background:var(--color-white);--input-text-area-color:var(--color-gray)}.af-form__input-textarea--error{--input-text-area-border-color:var(--color-red-700)}.af-form__input-textarea--error:focus,.af-form__input-textarea--error:hover{--input-text-area-box-shadow-color:var(--color-red-700)}.af-form__input-textarea:disabled{--input-text-area-border-color:var(--color-gray-400);--input-text-area-background:var(--color-gray-200)}.af-form__input-textarea:not(.af-form__input-textarea--error):focus,.af-form__input-textarea:not(.af-form__input-textarea--error,:disabled):hover{--input-text-area-border-size:2px;--input-text-area-border-color:var(--color-axa)}.af-form__input-textarea:not(:disabled,.af-form__input-textarea--error):not(:placeholder-shown){--input-text-area-font-weight:600;--input-text-area-border-color:var(--color-axa)}.af-form__input-textarea:not(:placeholder-shown):focus{--input-text-area-box-shadow:none}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Form/TextArea/TextAreaCommon.scss","../../../src/Form/TextArea/TextAreaLF.scss","../../../src/Form/TextArea/TextAreaLF.scss%23sass"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/Form/TextArea/TextAreaCommon.scss","../../../src/Form/TextArea/TextAreaLF.scss","../../../src/Form/TextArea/TextAreaLF.scss%23sass"],"names":[],"mappings":"AAGE,+DCFF,0CACA,CDKE,mDCMF,kDAAA,CDFI,oDAAA,CACA,kDAAA,CAMA,sDAAA,CAFA,kCAAA,CAHA,4BAAA,CACA,0CAAA,CACA,+CAAA,CANA,8CAAA,CACA,2CAAA,CCKJ,eAAA,CDPI,UCQJ,CDKI,uBAdF,mDAgBI,eAAA,CCJJ,gBAAA,CAEA,+DACA,CDKI,yDACE,0CCHN,CACF,CDMI,0PAME,4DAAA,CADA,uCAAA,CADA,8CAAA,CAGA,YCJN,CDOI,8KAGE,iCAAA,CACA,YCPN,CDUI,gIAEE,4DCTN,CDYI,4DAEE,4CAAA,CADA,oDCTN,CDaI,4HAME,sDCbN,CDgBI,oFACE,oDCdN,CDiBI,sMAEE,mFAAA,CAEA,wDCjBN,CDqBM,+ZAIE,uCAAA,CADA,8CCpBR,CC3DE,+DACE,+DD8DJ,CC3DE,uBACE,+DACE,+DD6DJ,CACF,CCzDA,yBACE,4DAAA,CACA,oDAAA,CACA,+CAAA,CACA,yCD4DF,CC1DE,gCACE,mDD4DJ,CCzDE,4EAEE,uDD0DJ,CCvDE,kCACE,oDAAA,CACA,kDDyDJ,CCtDE,kJAEE,iCAAA,CACA,+CDuDJ,CCnDI,gGACE,iCAAA,CACA,+CDqDN,CChDI,uDACE,iCDkDN","file":"TextAreaLF.css","sourcesContent":["@use \"../../common/breakpoints\" as breakpoints;\n\n.af-form__input-container {\n .af-item-label .af-item-label__label {\n font-size: var(--input-text-area-font-size);\n }\n\n .af-form__input-textarea {\n width: 100%;\n min-height: calc(56 / var(--font-size-base) * 1rem);\n padding: calc(16 / var(--font-size-base) * 1rem);\n border: 1px solid var(--input-text-area-border-color);\n border-radius: var(--input-text-area-border-radius);\n font: var(--font-family-base);\n font-size: var(--input-text-area-font-size);\n line-height: calc(20 / var(--font-size-base) * 1rem);\n color: var(--input-text-area-color);\n background-color: var(--input-text-area-background);\n box-shadow: 0 0 0 1px var(--input-text-area-background);\n resize: vertical;\n\n @media (width < #{breakpoints.$breakpoint-sm}) {\n line-height: 125%;\n box-shadow: none;\n\n --input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);\n\n &:focus {\n font-size: var(--input-text-area-font-size);\n }\n }\n\n &--error,\n :not(:placeholder-shown),\n :focus,\n :hover {\n font-weight: var(--input-text-area-font-weight);\n color: var(--input-text-area-font-color);\n box-shadow: 1px solid var(--input-text-area-box-shadow-color);\n outline: none;\n }\n\n &:enabled,\n &:focus,\n &:active {\n box-shadow: 0 0 0 1px var(--white);\n outline: none;\n }\n\n &--error:hover,\n &--error:focus {\n box-shadow: 0 0 0 1px var(--input-text-area-box-shadow-color);\n }\n\n &:disabled {\n border: 1px solid var(--input-text-area-border-color);\n background: var(--input-text-area-background);\n }\n\n &:not(\n :placeholder-shown,\n :focus,\n :disabled,\n .af-form__input-textarea--error\n ) {\n box-shadow: 0 0 0 1px var(--input-text-area-box-shadow);\n }\n\n &:disabled:not(:placeholder-shown) {\n border: 1px solid var(--input-text-area-border-color);\n }\n\n &:not(.af-form__input-textarea--error):focus,\n &:not(.af-form__input-textarea--error, :disabled):hover {\n border: var(--input-text-area-border-size) solid\n var(--input-text-area-border-color);\n box-shadow: 0 0 0 1px var(--input-text-area-border-color);\n }\n\n &:not(:disabled, &--error) {\n &:focus,\n &:hover,\n &:not(:placeholder-shown, :focus) {\n font-weight: var(--input-text-area-font-weight);\n color: var(--input-text-area-font-color);\n }\n }\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n@use \"TextAreaCommon\";\n\n.af-form__input-container {\n .af-item-label .af-item-label__label {\n --input-text-area-font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n\n @media (width < #{breakpoints.$breakpoint-sm}) {\n .af-item-label .af-item-label__label {\n --input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n }\n}\n\n.af-form__input-textarea {\n --input-text-area-border-radius: var(--default-border-radius);\n --input-text-area-border-color: var(--color-gray-700);\n --input-text-area-background: var(--color-white);\n --input-text-area-color: var(--color-gray);\n\n &--error {\n --input-text-area-border-color: var(--color-red-700);\n }\n\n &--error:hover,\n &--error:focus {\n --input-text-area-box-shadow-color: var(--color-red-700);\n }\n\n &:disabled {\n --input-text-area-border-color: var(--color-gray-400);\n --input-text-area-background: var(--color-gray-200);\n }\n\n &:not(.af-form__input-textarea--error, :disabled):hover,\n &:not(.af-form__input-textarea--error):focus {\n --input-text-area-border-size: 2px;\n --input-text-area-border-color: var(--color-axa);\n }\n\n &:not(:disabled, &--error) {\n &:not(:placeholder-shown) {\n --input-text-area-font-weight: 600;\n --input-text-area-border-color: var(--color-axa);\n }\n }\n\n &:not(:placeholder-shown) {\n &:focus {\n --input-text-area-box-shadow: none;\n }\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n@use \"TextAreaCommon\";\n\n.af-form__input-container {\n .af-item-label .af-item-label__label {\n --input-text-area-font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n\n @media (width < #{breakpoints.$breakpoint-sm}) {\n .af-item-label .af-item-label__label {\n --input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n }\n}\n\n.af-form__input-textarea {\n --input-text-area-border-radius: var(--default-border-radius);\n --input-text-area-border-color: var(--color-gray-700);\n --input-text-area-background: var(--color-white);\n --input-text-area-color: var(--color-gray);\n\n &--error {\n --input-text-area-border-color: var(--color-red-700);\n }\n\n &--error:hover,\n &--error:focus {\n --input-text-area-box-shadow-color: var(--color-red-700);\n }\n\n &:disabled {\n --input-text-area-border-color: var(--color-gray-400);\n --input-text-area-background: var(--color-gray-200);\n }\n\n &:not(.af-form__input-textarea--error, :disabled):hover,\n &:not(.af-form__input-textarea--error):focus {\n --input-text-area-border-size: 2px;\n --input-text-area-border-color: var(--color-axa);\n }\n\n &:not(:disabled, &--error) {\n &:not(:placeholder-shown) {\n --input-text-area-font-weight: 600;\n --input-text-area-border-color: var(--color-axa);\n }\n }\n\n &:not(:placeholder-shown) {\n &:focus {\n --input-text-area-box-shadow: none;\n }\n }\n}\n"]}
|
|
@@ -1,7 +1,19 @@
|
|
|
1
|
+
@use "../../common/breakpoints" as breakpoints;
|
|
1
2
|
@use "TextAreaCommon";
|
|
2
3
|
|
|
4
|
+
.af-form__input-container {
|
|
5
|
+
.af-item-label .af-item-label__label {
|
|
6
|
+
--input-text-area-font-size: calc(18 / var(--font-size-base) * 1rem);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@media (width < #{breakpoints.$breakpoint-sm}) {
|
|
10
|
+
.af-item-label .af-item-label__label {
|
|
11
|
+
--input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
|
|
3
16
|
.af-form__input-textarea {
|
|
4
|
-
--input-text-area-height: 142px;
|
|
5
17
|
--input-text-area-border-radius: var(--default-border-radius);
|
|
6
18
|
--input-text-area-border-color: var(--color-gray-700);
|
|
7
19
|
--input-text-area-background: var(--color-white);
|
|
@@ -11,27 +23,24 @@
|
|
|
11
23
|
--input-text-area-border-color: var(--color-red-700);
|
|
12
24
|
}
|
|
13
25
|
|
|
26
|
+
&--error:hover,
|
|
27
|
+
&--error:focus {
|
|
28
|
+
--input-text-area-box-shadow-color: var(--color-red-700);
|
|
29
|
+
}
|
|
30
|
+
|
|
14
31
|
&:disabled {
|
|
15
32
|
--input-text-area-border-color: var(--color-gray-400);
|
|
16
33
|
--input-text-area-background: var(--color-gray-200);
|
|
17
34
|
}
|
|
18
35
|
|
|
19
|
-
&:not(.af-form__input-textarea--error):hover,
|
|
36
|
+
&:not(.af-form__input-textarea--error, :disabled):hover,
|
|
20
37
|
&:not(.af-form__input-textarea--error):focus {
|
|
21
38
|
--input-text-area-border-size: 2px;
|
|
22
39
|
--input-text-area-border-color: var(--color-axa);
|
|
23
40
|
}
|
|
24
41
|
|
|
25
|
-
&--error:hover,
|
|
26
|
-
&--error:focus {
|
|
27
|
-
--input-text-area-border-color: var(--color-red-700);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
42
|
&:not(:disabled, &--error) {
|
|
31
|
-
&:focus,
|
|
32
|
-
&:hover,
|
|
33
43
|
&:not(:placeholder-shown) {
|
|
34
|
-
--input-text-area-font-size: calc(18 / var(--font-size-base) * 1rem);
|
|
35
44
|
--input-text-area-font-weight: 600;
|
|
36
45
|
--input-text-area-border-color: var(--color-axa);
|
|
37
46
|
}
|