@axa-fr/design-system-apollo-css 1.0.5-alpha.400 → 1.0.5-alpha.403

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.
Files changed (14) hide show
  1. package/dist/Form/TextArea/TextAreaApollo.css +1 -1
  2. package/dist/Form/TextArea/TextAreaApollo.css.map +1 -1
  3. package/dist/Form/TextArea/TextAreaApollo.scss +33 -67
  4. package/dist/Form/TextArea/TextAreaCommon.css +1 -1
  5. package/dist/Form/TextArea/TextAreaCommon.css.map +1 -1
  6. package/dist/Form/TextArea/TextAreaCommon.scss +23 -85
  7. package/dist/Form/TextArea/TextAreaLF.css +1 -1
  8. package/dist/Form/TextArea/TextAreaLF.css.map +1 -1
  9. package/dist/Form/TextArea/TextAreaLF.scss +28 -39
  10. package/dist/apollo.css +1 -1
  11. package/dist/apollo.css.map +1 -1
  12. package/dist/look-and-feel.css +1 -1
  13. package/dist/look-and-feel.css.map +1 -1
  14. package/package.json +1 -1
package/dist/Form/TextArea/TextAreaApollo.css CHANGED
@@ -1 +1 @@
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
+ .af-form__input-textarea{background-color:var(--input-textarea-background-color);border:none;border-radius:var(--input-textarea-border-radius);box-shadow:0 0 0 var(--input-textarea-box-shadow-size) var(--input-textarea-box-shadow-color);color:var(--input-textarea-color);font:var(--font-family-base);font-size:var(--input-textarea-font-size);font-weight:600;line-height:125%;min-height:calc(56/var(--font-size-base)*1rem);outline:none;padding:calc(16/var(--font-size-base)*1rem);width:100%}@media (width > 1023px){.af-form__input-textarea{font-size:calc(18/var(--font-size-base)*1rem)}}.af-form__input-textarea::placeholder{color:var(--input-textarea-placeholder-color);font-weight:400}.af-form__input-textarea{--input-textarea-border-radius:var(--radius-8);--input-textarea-box-shadow-color:var(--axa-blue-65);--input-textarea-placeholder-color:var(--neutral-80);--input-textarea-background-color:var(--white);--input-textarea-color:var(--axa-blue-100);--input-textarea-box-shadow-size:1px}.af-form__input-textarea:focus,.af-form__input-textarea:hover,.af-form__input-textarea:not(:placeholder-shown){--input-textarea-box-shadow-color:var(--axa-blue-100);--input-textarea-box-shadow-size:2px}.af-form__input-textarea[aria-invalid=true]{--input-textarea-box-shadow-color:var(--red-alert-100);--input-textarea-box-shadow-size:2px}.af-form__input-textarea[aria-invalid=true]:focus,.af-form__input-textarea[aria-invalid=true]:hover{--input-textarea-box-shadow-size:3px}.af-form__input-textarea:disabled{--input-textarea-background-color:var(--neutral-5);--input-textarea-box-shadow-color:var(--neutral-50);--input-textarea-placeholder-color:var(--neutral-50);--input-textarea-color:var(--neutral-80)}.af-form__input-textarea:disabled,.af-form__input-textarea:disabled:hover{--input-textarea-box-shadow-size:1px}.af-form__input-textarea:not(:placeholder-shown):hover{--input-textarea-box-shadow-size:3px}
package/dist/Form/TextArea/TextAreaApollo.css.map CHANGED
@@ -1 +1 @@
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
+ {"version":3,"sources":["../../../src/Form/TextArea/TextAreaCommon.scss","../../../src/Form/TextArea/TextAreaApollo.scss","../../../src/Form/TextArea/TextAreaApollo.scss%23sass"],"names":[],"mappings":"AAEA,yBAWE,uDAAA,CAPA,WAAA,CACA,iDAAA,CAOA,6FAAA,CAFA,iCAAA,CAJA,4BAAA,CACA,yCAAA,CACA,eAAA,CACA,gBAAA,CAPA,8CAAA,CAYA,YAAA,CCbF,2CAAA,CAFA,UAaA,CDIE,wBAhBF,yBAiBI,6CCDF,CACF,CDGE,sCAEE,6CAAA,CADA,eCAJ,CCpBA,yBACE,8CAAA,CACA,oDAAA,CACA,oDAAA,CACA,8CAAA,CACA,0CAAA,CACA,oCDuBF,CCrBE,+GAGE,qDAAA,CACA,oCDqBJ,CClBE,4CACE,sDAAA,CACA,oCDoBJ,CClBI,oGAEE,oCDmBN,CCfE,kCACE,kDAAA,CACA,mDAAA,CACA,oDAAA,CACA,wCDkBJ,CCfI,0EAFA,oCDoBJ,CCbE,uDACE,oCDeJ","file":"TextAreaApollo.css","sourcesContent":["@use \"../../common/breakpoints\";\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: none;\n border-radius: var(--input-textarea-border-radius);\n font: var(--font-family-base);\n font-size: var(--input-textarea-font-size);\n font-weight: 600;\n line-height: 125%;\n color: var(--input-textarea-color);\n background-color: var(--input-textarea-background-color);\n box-shadow: 0 0 0 var(--input-textarea-box-shadow-size)\n var(--input-textarea-box-shadow-color);\n outline: none;\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n\n &::placeholder {\n font-weight: 400;\n color: var(--input-textarea-placeholder-color);\n }\n}\n","@use \"../../common/breakpoints\";\n@use \"TextAreaCommon\";\n\n.af-form__input-textarea {\n --input-textarea-border-radius: var(--radius-8);\n --input-textarea-box-shadow-color: var(--axa-blue-65);\n --input-textarea-placeholder-color: var(--neutral-80);\n --input-textarea-background-color: var(--white);\n --input-textarea-color: var(--axa-blue-100);\n --input-textarea-box-shadow-size: 1px;\n\n &:hover,\n &:focus,\n &:not(:placeholder-shown) {\n --input-textarea-box-shadow-color: var(--axa-blue-100);\n --input-textarea-box-shadow-size: 2px;\n }\n\n &[aria-invalid=\"true\"] {\n --input-textarea-box-shadow-color: var(--red-alert-100);\n --input-textarea-box-shadow-size: 2px;\n\n &:hover,\n &:focus {\n --input-textarea-box-shadow-size: 3px;\n }\n }\n\n &:disabled {\n --input-textarea-background-color: var(--neutral-5);\n --input-textarea-box-shadow-color: var(--neutral-50);\n --input-textarea-placeholder-color: var(--neutral-50);\n --input-textarea-color: var(--neutral-80);\n --input-textarea-box-shadow-size: 1px;\n\n &:hover {\n --input-textarea-box-shadow-size: 1px;\n }\n }\n\n &:not(:placeholder-shown):hover {\n --input-textarea-box-shadow-size: 3px;\n }\n}\n","@use \"../../common/breakpoints\";\n@use \"TextAreaCommon\";\n\n.af-form__input-textarea {\n --input-textarea-border-radius: var(--radius-8);\n --input-textarea-box-shadow-color: var(--axa-blue-65);\n --input-textarea-placeholder-color: var(--neutral-80);\n --input-textarea-background-color: var(--white);\n --input-textarea-color: var(--axa-blue-100);\n --input-textarea-box-shadow-size: 1px;\n\n &:hover,\n &:focus,\n &:not(:placeholder-shown) {\n --input-textarea-box-shadow-color: var(--axa-blue-100);\n --input-textarea-box-shadow-size: 2px;\n }\n\n &[aria-invalid=\"true\"] {\n --input-textarea-box-shadow-color: var(--red-alert-100);\n --input-textarea-box-shadow-size: 2px;\n\n &:hover,\n &:focus {\n --input-textarea-box-shadow-size: 3px;\n }\n }\n\n &:disabled {\n --input-textarea-background-color: var(--neutral-5);\n --input-textarea-box-shadow-color: var(--neutral-50);\n --input-textarea-placeholder-color: var(--neutral-50);\n --input-textarea-color: var(--neutral-80);\n --input-textarea-box-shadow-size: 1px;\n\n &:hover {\n --input-textarea-box-shadow-size: 1px;\n }\n }\n\n &:not(:placeholder-shown):hover {\n --input-textarea-box-shadow-size: 3px;\n }\n}\n"]}
package/dist/Form/TextArea/TextAreaApollo.scss CHANGED
@@ -1,78 +1,44 @@
1
- @use "../../common/breakpoints" as breakpoints;
1
+ @use "../../common/breakpoints";
2
2
  @use "TextAreaCommon";
3
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
-
23
4
  .af-form__input-textarea {
24
- --input-text-area-box-shadow: var(--axa-blue-100);
25
- --input-text-area-border-radius: var(--radius-8);
26
- --input-text-area-border-color: var(--axa-blue-65);
27
- --input-text-area-background: var(--white);
28
- --input-text-area-color: var(--neutral-80);
29
-
30
- &--error {
31
- --input-text-area-border-color: var(--axa-red-100);
32
- }
33
-
34
- &--error:hover,
35
- &--error:focus {
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;
5
+ --input-textarea-border-radius: var(--radius-8);
6
+ --input-textarea-box-shadow-color: var(--axa-blue-65);
7
+ --input-textarea-placeholder-color: var(--neutral-80);
8
+ --input-textarea-background-color: var(--white);
9
+ --input-textarea-color: var(--axa-blue-100);
10
+ --input-textarea-box-shadow-size: 1px;
11
+
12
+ &:hover,
13
+ &:focus,
14
+ &:not(:placeholder-shown) {
15
+ --input-textarea-box-shadow-color: var(--axa-blue-100);
16
+ --input-textarea-box-shadow-size: 2px;
17
+ }
18
+
19
+ &[aria-invalid="true"] {
20
+ --input-textarea-box-shadow-color: var(--red-alert-100);
21
+ --input-textarea-box-shadow-size: 2px;
22
+
23
+ &:hover,
24
+ &:focus {
25
+ --input-textarea-box-shadow-size: 3px;
26
+ }
47
27
  }
48
28
 
49
29
  &:disabled {
50
- --input-text-area-border-color: var(--neutral-14);
51
- --input-text-area-background: var(--neutral-5);
52
- }
53
-
54
- &:disabled:not(:placeholder-shown) {
55
- --input-text-area-border-color: var(--neutral-14);
56
- }
57
-
58
- &:not(.af-form__input-textarea--error):focus,
59
- &:not(.af-form__input-textarea--error, :disabled):hover {
60
- --input-text-area-border-size: 2px;
61
- --input-text-area-border-color: var(--axa-blue-100);
62
- }
63
-
64
- &:not(:disabled, &--error) {
65
- &:not(:placeholder-shown) {
66
- --input-text-area-font-color: var(--axa-blue-100);
67
- --input-text-area-font-weight: 600;
30
+ --input-textarea-background-color: var(--neutral-5);
31
+ --input-textarea-box-shadow-color: var(--neutral-50);
32
+ --input-textarea-placeholder-color: var(--neutral-50);
33
+ --input-textarea-color: var(--neutral-80);
34
+ --input-textarea-box-shadow-size: 1px;
35
+
36
+ &:hover {
37
+ --input-textarea-box-shadow-size: 1px;
68
38
  }
69
39
  }
70
40
 
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
- }
41
+ &:not(:placeholder-shown):hover {
42
+ --input-textarea-box-shadow-size: 3px;
77
43
  }
78
44
  }
package/dist/Form/TextArea/TextAreaCommon.css CHANGED
@@ -1 +1 @@
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
+ .af-form__input-textarea{background-color:var(--input-textarea-background-color);border:none;border-radius:var(--input-textarea-border-radius);box-shadow:0 0 0 var(--input-textarea-box-shadow-size) var(--input-textarea-box-shadow-color);color:var(--input-textarea-color);font:var(--font-family-base);font-size:var(--input-textarea-font-size);font-weight:600;line-height:125%;min-height:calc(56/var(--font-size-base)*1rem);outline:none;padding:calc(16/var(--font-size-base)*1rem);width:100%}@media (width > 1023px){.af-form__input-textarea{font-size:calc(18/var(--font-size-base)*1rem)}}.af-form__input-textarea::placeholder{color:var(--input-textarea-placeholder-color);font-weight:400}
package/dist/Form/TextArea/TextAreaCommon.css.map CHANGED
@@ -1 +1 @@
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
+ {"version":3,"sources":["../../../src/Form/TextArea/TextAreaCommon.scss%23sass","../../../src/Form/TextArea/TextAreaCommon.scss"],"names":[],"mappings":"AAEA,yBAWE,uDAAA,CAPA,WAAA,CACA,iDAAA,CAOA,6FAAA,CAFA,iCAAA,CAJA,4BAAA,CACA,yCAAA,CACA,eAAA,CACA,gBAAA,CCTF,8CAAA,CDcE,YAAA,CAXA,2CAAA,CAFA,UCWF,CDIE,wBAhBF,yBAiBI,6CCDF,CACF,CDGE,sCAEE,6CAAA,CADA,eCAJ","file":"TextAreaCommon.css","sourcesContent":["@use \"../../common/breakpoints\";\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: none;\n border-radius: var(--input-textarea-border-radius);\n font: var(--font-family-base);\n font-size: var(--input-textarea-font-size);\n font-weight: 600;\n line-height: 125%;\n color: var(--input-textarea-color);\n background-color: var(--input-textarea-background-color);\n box-shadow: 0 0 0 var(--input-textarea-box-shadow-size)\n var(--input-textarea-box-shadow-color);\n outline: none;\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n\n &::placeholder {\n font-weight: 400;\n color: var(--input-textarea-placeholder-color);\n }\n}\n","@use \"../../common/breakpoints\";\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: none;\n border-radius: var(--input-textarea-border-radius);\n font: var(--font-family-base);\n font-size: var(--input-textarea-font-size);\n font-weight: 600;\n line-height: 125%;\n color: var(--input-textarea-color);\n background-color: var(--input-textarea-background-color);\n box-shadow: 0 0 0 var(--input-textarea-box-shadow-size)\n var(--input-textarea-box-shadow-color);\n outline: none;\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n\n &::placeholder {\n font-weight: 400;\n color: var(--input-textarea-placeholder-color);\n }\n}\n"]}
package/dist/Form/TextArea/TextAreaCommon.scss CHANGED
@@ -1,89 +1,27 @@
1
- @use "../../common/breakpoints" as breakpoints;
2
-
3
- .af-form__input-container {
4
- .af-item-label .af-item-label__label {
5
- font-size: var(--input-text-area-font-size);
1
+ @use "../../common/breakpoints";
2
+
3
+ .af-form__input-textarea {
4
+ width: 100%;
5
+ min-height: calc(56 / var(--font-size-base) * 1rem);
6
+ padding: calc(16 / var(--font-size-base) * 1rem);
7
+ border: none;
8
+ border-radius: var(--input-textarea-border-radius);
9
+ font: var(--font-family-base);
10
+ font-size: var(--input-textarea-font-size);
11
+ font-weight: 600;
12
+ line-height: 125%;
13
+ color: var(--input-textarea-color);
14
+ background-color: var(--input-textarea-background-color);
15
+ box-shadow: 0 0 0 var(--input-textarea-box-shadow-size)
16
+ var(--input-textarea-box-shadow-color);
17
+ outline: none;
18
+
19
+ @media (width > #{breakpoints.$breakpoint-md}) {
20
+ font-size: calc(18 / var(--font-size-base) * 1rem);
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);
12
- border: 1px solid var(--input-text-area-border-color);
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;
21
-
22
- @media (width < #{breakpoints.$breakpoint-sm}) {
23
- line-height: 125%;
24
- box-shadow: none;
25
-
26
- --input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);
27
-
28
- &:focus {
29
- font-size: var(--input-text-area-font-size);
30
- }
31
- }
32
-
33
- &--error,
34
- :not(:placeholder-shown),
35
- :focus,
36
- :hover {
37
- font-weight: var(--input-text-area-font-weight);
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
- }
87
- }
23
+ &::placeholder {
24
+ font-weight: 400;
25
+ color: var(--input-textarea-placeholder-color);
88
26
  }
89
27
  }
package/dist/Form/TextArea/TextAreaLF.css CHANGED
@@ -1 +1 @@
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
+ .af-form__input-textarea{background-color:var(--input-textarea-background-color);border:none;border-radius:var(--input-textarea-border-radius);box-shadow:0 0 0 var(--input-textarea-box-shadow-size) var(--input-textarea-box-shadow-color);color:var(--input-textarea-color);font:var(--font-family-base);font-size:var(--input-textarea-font-size);font-weight:600;line-height:125%;min-height:calc(56/var(--font-size-base)*1rem);outline:none;padding:calc(16/var(--font-size-base)*1rem);width:100%}@media (width > 1023px){.af-form__input-textarea{font-size:calc(18/var(--font-size-base)*1rem)}}.af-form__input-textarea::placeholder{color:var(--input-textarea-placeholder-color);font-weight:400}.af-form__input-textarea{--input-textarea-border-radius:var(--default-border-radius);--input-textarea-box-shadow-color:var(--color-gray-700);--input-textarea-placeholder-color:var(--color-gray-700);--input-textarea-background-color:var(--color-white);--input-textarea-color:var(--color-gray-900);--input-textarea-box-shadow-size:1px}.af-form__input-textarea:focus,.af-form__input-textarea:hover{--input-textarea-box-shadow-size:2px}.af-form__input-textarea:focus,.af-form__input-textarea:hover,.af-form__input-textarea:not(:placeholder-shown){--input-textarea-box-shadow-color:var(--color-axa)}.af-form__input-textarea[aria-invalid=true]{--input-textarea-box-shadow-color:var(--color-red-700);--input-textarea-box-shadow-size:2px}.af-form__input-textarea[aria-invalid=true]:focus,.af-form__input-textarea[aria-invalid=true]:hover{--input-textarea-box-shadow-size:3px}.af-form__input-textarea:disabled{--input-textarea-background-color:var(--color-gray-200);--input-textarea-box-shadow-color:var(--color-gray-400);--input-textarea-placeholder-color:var(--color-gray-500);--input-textarea-color:var(--color-gray-700)}.af-form__input-textarea:disabled:hover{--input-textarea-box-shadow-size:1px}
package/dist/Form/TextArea/TextAreaLF.css.map CHANGED
@@ -1 +1 @@
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
+ {"version":3,"sources":["../../../src/Form/TextArea/TextAreaCommon.scss","../../../src/Form/TextArea/TextAreaLF.scss","../../../src/Form/TextArea/TextAreaLF.scss%23sass"],"names":[],"mappings":"AAEA,yBAWE,uDAAA,CAPA,WAAA,CACA,iDAAA,CAOA,6FAAA,CAFA,iCAAA,CAJA,4BAAA,CACA,yCAAA,CACA,eAAA,CACA,gBAAA,CAPA,8CAAA,CAYA,YAAA,CCbF,2CAAA,CAFA,UAaA,CDIE,wBAhBF,yBAiBI,6CCDF,CACF,CDGE,sCAEE,6CAAA,CADA,eCAJ,CCpBA,yBACE,2DAAA,CACA,uDAAA,CACA,wDAAA,CACA,oDAAA,CACA,4CAAA,CACA,oCDuBF,CCrBE,8DAEE,oCDsBJ,CCnBE,+GAGE,kDDmBJ,CChBE,4CACE,sDAAA,CACA,oCDkBJ,CChBI,oGAEE,oCDiBN,CCbE,kCACE,uDAAA,CACA,uDAAA,CACA,wDAAA,CACA,4CDeJ,CCbI,wCACE,oCDeN","file":"TextAreaLF.css","sourcesContent":["@use \"../../common/breakpoints\";\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: none;\n border-radius: var(--input-textarea-border-radius);\n font: var(--font-family-base);\n font-size: var(--input-textarea-font-size);\n font-weight: 600;\n line-height: 125%;\n color: var(--input-textarea-color);\n background-color: var(--input-textarea-background-color);\n box-shadow: 0 0 0 var(--input-textarea-box-shadow-size)\n var(--input-textarea-box-shadow-color);\n outline: none;\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n\n &::placeholder {\n font-weight: 400;\n color: var(--input-textarea-placeholder-color);\n }\n}\n","@use \"../../common/breakpoints\";\n@use \"TextAreaCommon\";\n\n.af-form__input-textarea {\n --input-textarea-border-radius: var(--default-border-radius);\n --input-textarea-box-shadow-color: var(--color-gray-700);\n --input-textarea-placeholder-color: var(--color-gray-700);\n --input-textarea-background-color: var(--color-white);\n --input-textarea-color: var(--color-gray-900);\n --input-textarea-box-shadow-size: 1px;\n\n &:hover,\n &:focus {\n --input-textarea-box-shadow-size: 2px;\n }\n\n &:hover,\n &:focus,\n &:not(:placeholder-shown) {\n --input-textarea-box-shadow-color: var(--color-axa);\n }\n\n &[aria-invalid=\"true\"] {\n --input-textarea-box-shadow-color: var(--color-red-700);\n --input-textarea-box-shadow-size: 2px;\n\n &:hover,\n &:focus {\n --input-textarea-box-shadow-size: 3px;\n }\n }\n\n &:disabled {\n --input-textarea-background-color: var(--color-gray-200);\n --input-textarea-box-shadow-color: var(--color-gray-400);\n --input-textarea-placeholder-color: var(--color-gray-500);\n --input-textarea-color: var(--color-gray-700);\n\n &:hover {\n --input-textarea-box-shadow-size: 1px;\n }\n }\n}\n","@use \"../../common/breakpoints\";\n@use \"TextAreaCommon\";\n\n.af-form__input-textarea {\n --input-textarea-border-radius: var(--default-border-radius);\n --input-textarea-box-shadow-color: var(--color-gray-700);\n --input-textarea-placeholder-color: var(--color-gray-700);\n --input-textarea-background-color: var(--color-white);\n --input-textarea-color: var(--color-gray-900);\n --input-textarea-box-shadow-size: 1px;\n\n &:hover,\n &:focus {\n --input-textarea-box-shadow-size: 2px;\n }\n\n &:hover,\n &:focus,\n &:not(:placeholder-shown) {\n --input-textarea-box-shadow-color: var(--color-axa);\n }\n\n &[aria-invalid=\"true\"] {\n --input-textarea-box-shadow-color: var(--color-red-700);\n --input-textarea-box-shadow-size: 2px;\n\n &:hover,\n &:focus {\n --input-textarea-box-shadow-size: 3px;\n }\n }\n\n &:disabled {\n --input-textarea-background-color: var(--color-gray-200);\n --input-textarea-box-shadow-color: var(--color-gray-400);\n --input-textarea-placeholder-color: var(--color-gray-500);\n --input-textarea-color: var(--color-gray-700);\n\n &:hover {\n --input-textarea-box-shadow-size: 1px;\n }\n }\n}\n"]}
package/dist/Form/TextArea/TextAreaLF.scss CHANGED
@@ -1,54 +1,43 @@
1
- @use "../../common/breakpoints" as breakpoints;
1
+ @use "../../common/breakpoints";
2
2
  @use "TextAreaCommon";
3
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
-
16
4
  .af-form__input-textarea {
17
- --input-text-area-border-radius: var(--default-border-radius);
18
- --input-text-area-border-color: var(--color-gray-700);
19
- --input-text-area-background: var(--color-white);
20
- --input-text-area-color: var(--color-gray);
21
-
22
- &--error {
23
- --input-text-area-border-color: var(--color-red-700);
24
- }
5
+ --input-textarea-border-radius: var(--default-border-radius);
6
+ --input-textarea-box-shadow-color: var(--color-gray-700);
7
+ --input-textarea-placeholder-color: var(--color-gray-700);
8
+ --input-textarea-background-color: var(--color-white);
9
+ --input-textarea-color: var(--color-gray-900);
10
+ --input-textarea-box-shadow-size: 1px;
25
11
 
26
- &--error:hover,
27
- &--error:focus {
28
- --input-text-area-box-shadow-color: var(--color-red-700);
12
+ &:hover,
13
+ &:focus {
14
+ --input-textarea-box-shadow-size: 2px;
29
15
  }
30
16
 
31
- &:disabled {
32
- --input-text-area-border-color: var(--color-gray-400);
33
- --input-text-area-background: var(--color-gray-200);
17
+ &:hover,
18
+ &:focus,
19
+ &:not(:placeholder-shown) {
20
+ --input-textarea-box-shadow-color: var(--color-axa);
34
21
  }
35
22
 
36
- &:not(.af-form__input-textarea--error, :disabled):hover,
37
- &:not(.af-form__input-textarea--error):focus {
38
- --input-text-area-border-size: 2px;
39
- --input-text-area-border-color: var(--color-axa);
40
- }
23
+ &[aria-invalid="true"] {
24
+ --input-textarea-box-shadow-color: var(--color-red-700);
25
+ --input-textarea-box-shadow-size: 2px;
41
26
 
42
- &:not(:disabled, &--error) {
43
- &:not(:placeholder-shown) {
44
- --input-text-area-font-weight: 600;
45
- --input-text-area-border-color: var(--color-axa);
27
+ &:hover,
28
+ &:focus {
29
+ --input-textarea-box-shadow-size: 3px;
46
30
  }
47
31
  }
48
32
 
49
- &:not(:placeholder-shown) {
50
- &:focus {
51
- --input-text-area-box-shadow: none;
33
+ &:disabled {
34
+ --input-textarea-background-color: var(--color-gray-200);
35
+ --input-textarea-box-shadow-color: var(--color-gray-400);
36
+ --input-textarea-placeholder-color: var(--color-gray-500);
37
+ --input-textarea-color: var(--color-gray-700);
38
+
39
+ &:hover {
40
+ --input-textarea-box-shadow-size: 1px;
52
41
  }
53
42
  }
54
43
  }