text-fields/dist/index.css.map

TextFields is designed to create and manage text fields with advanced visuals and functionality, including dynamic notched outlines, floating labels, and adaptive text areas.

{"mappings":"ACAA,kmBCAA,mJAUC,4ZAaA,4TAWC,2MASD,6ZAcA,2iBCzDD,wiBAsBC,0DAKA,mCAIA,qGAKA,6JAKA,+HAKA,+HAKA,uLAKA,uLAKA,2GC7DD,gKAQC,iZAkBC,gCAKD,8CAQA,8CASC,iGAKD,6GAKA,kDAGC,gDAIA,sDAKD,oDAGC,wGAMA,+HAMD,8CAGC,kDAIA,6EAKA,4GAOA,sHAQD,2CAIA,qJAeC,uEAOA,sEAKA,2FAMD,iEAMC,gEAKA,+FAKA,yDAMD,+FASC,kFCpLF,uKAQC,2aAmBC,sCAMA,6GAKD,qDAGC,mDAIA,4DAKD,uDAGC,uHAOD,iDAGC,wDAIA,mFAKA,gGCxEF,+JAQC,mDAKA,gECXC,sIAMA,2DCPF,6CACC,2DAMD,gCAGU","sources":["index.css","src/styles/root.scss","src/styles/notched.scss","src/styles/label.scss","src/styles/input.scss","src/styles/textarea.scss","src/styles/helper.scss","src/styles/placeholder.scss","src/styles/fixes.scss"],"sourcesContent":[".text-field-container {\n  --tf-c-text-field: slategrey;\n  --tf-c-text-helper: slategrey;\n  --tf-c-inactive: darkgray;\n  --tf-c-focused: dodgerblue;\n  --tf-c-activated: gray;\n  --tf-c-hover: dimgray;\n  --tf-c-error: crimson;\n  --tf-c-disabled: silver;\n  --tf-c-placeholder: silver;\n  --tf-c-border: var(--tf-c-inactive);\n  --tf-font-size-field: 16px;\n  --tf-font-size-helper: 12px;\n  --tf-font-weight: 400;\n  --tf-letter-spacing: .009375em;\n  --tf-input-line-height: 23px;\n  --tf-textarea-line-height: 24px;\n  --tf-border-width-inactive: 1px;\n  --tf-border-width-active: 2px;\n  --tf-border-radius: 6px;\n  --tf-transition-easing: cubic-bezier(0, .202, .204, 1);\n  flex-direction: column;\n  display: flex;\n}\n\n.notched-outline {\n  z-index: 1;\n  text-align: left;\n  pointer-events: none;\n  width: 100%;\n  max-width: 100%;\n  height: 100%;\n  display: flex;\n  position: absolute;\n  left: 0;\n  right: 0;\n}\n\n.notched-outline__leading {\n  pointer-events: none;\n  border-top: var(--tf-border-width-inactive) solid;\n  border-right: none;\n  border-bottom: var(--tf-border-width-inactive) solid;\n  border-left: var(--tf-border-width-inactive) solid;\n  border-radius: var(--tf-border-radius) 0 0 var(--tf-border-radius);\n  border-color: var(--tf-c-border);\n  box-sizing: border-box;\n  transition: border-color .225s var(--tf-transition-easing);\n  width: 12px;\n  height: 100%;\n}\n\n.notched-outline__notch {\n  pointer-events: none;\n  border-top: var(--tf-border-width-inactive) solid;\n  border-bottom: var(--tf-border-width-inactive) solid;\n  border-color: var(--tf-c-border);\n  box-sizing: border-box;\n  transition: border-color .225s var(--tf-transition-easing);\n  flex: none;\n  width: auto;\n  max-width: calc(100% - 24px);\n  height: 100%;\n}\n\n.input--focused .notched-outline__notch, .input--filled .notched-outline__notch, .textarea--focused .notched-outline__notch, .textarea--filled .notched-outline__notch {\n  border-top: none;\n  align-items: flex-start;\n}\n\n.notched-outline__trailing {\n  pointer-events: none;\n  border-top: var(--tf-border-width-inactive) solid;\n  border-right: var(--tf-border-width-inactive) solid;\n  border-bottom: var(--tf-border-width-inactive) solid;\n  border-radius: 0 var(--tf-border-radius) var(--tf-border-radius) 0;\n  border-left: none;\n  border-color: var(--tf-c-border);\n  box-sizing: border-box;\n  transition: border-color .225s var(--tf-transition-easing);\n  flex-grow: 1;\n  height: 100%;\n}\n\n.input--focused .notched-outline__leading, .input--focused .notched-outline__notch, .input--focused .notched-outline__trailing, .input--filled .notched-outline__leading, .input--filled .notched-outline__notch, .input--filled .notched-outline__trailing, .textarea--focused .notched-outline__leading, .textarea--focused .notched-outline__notch, .textarea--focused .notched-outline__trailing, .textarea--filled .notched-outline__leading, .textarea--filled .notched-outline__notch, .textarea--filled .notched-outline__trailing {\n  border-width: var(--tf-border-width-active);\n}\n\n.floating-label {\n  right: initial;\n  pointer-events: none;\n  font-size: var(--tf-font-size-field);\n  font-weight: var(--tf-font-weight);\n  letter-spacing: var(--tf-letter-spacing);\n  color: var(--tf-c-text-field);\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  transform-origin: 0 0;\n  transition: transform .15s var(--tf-transition-easing), color .15s var(--tf-transition-easing);\n  text-align: left;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  cursor: text;\n  max-width: calc(100% - 30px);\n  line-height: 23px;\n  display: inline-block;\n  position: absolute;\n  left: 17px;\n  overflow: hidden;\n}\n\n.input .floating-label {\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n.textarea .floating-label {\n  top: 13px;\n}\n\n.input--focused .floating-label, .input--filled .floating-label {\n  transform: translateY(-33px)scale(.75);\n}\n\n.input--focused.input--leading-icon .floating-label, .input--filled.input--leading-icon .floating-label {\n  transform: translateY(-33px)translateX(-27px)scale(.75);\n}\n\n.input--focused.input--dense .floating-label, .input--filled.input--dense .floating-label {\n  transform: translateY(-27px)scale(.75);\n}\n\n.input--focused.input--large .floating-label, .input--filled.input--large .floating-label {\n  transform: translateY(-44px)scale(.75);\n}\n\n.input--focused.input--dense.input--leading-icon .floating-label, .input--filled.input--dense.input--leading-icon .floating-label {\n  transform: translateY(-27px)translateX(-27px)scale(.75);\n}\n\n.input--focused.input--large.input--leading-icon .floating-label, .input--filled.input--large.input--leading-icon .floating-label {\n  transform: translateY(-44px)translateX(-27px)scale(.75);\n}\n\n.textarea--focused .floating-label, .textarea--filled .floating-label {\n  transform: translateY(-22px)scale(.75);\n}\n\n.input {\n  will-change: transform;\n  border-radius: var(--tf-border-radius) var(--tf-border-radius) 0 0;\n  height: 48px;\n  display: inline-flex;\n  position: relative;\n  overflow: visible;\n}\n\n.input input {\n  z-index: 1;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  appearance: none;\n  font-size: var(--tf-font-size-field);\n  line-height: var(--tf-input-line-height);\n  font-weight: var(--tf-font-weight);\n  letter-spacing: var(--tf-letter-spacing);\n  color: var(--tf-c-text-field);\n  background: none;\n  border: none;\n  border-radius: 0;\n  align-self: flex-end;\n  width: 100%;\n  height: 48px;\n  padding: 0 15px;\n  display: flex;\n}\n\n.input input:focus {\n  outline: none;\n}\n\n.input--dense, .input--dense input {\n  height: 36px;\n}\n\n.input--large, .input--large input {\n  height: 70px;\n}\n\n.input:hover:not(.input--error, .input--disabled, .input--focused) {\n  --tf-c-border: var(--tf-c-hover);\n}\n\n.input.input--leading-icon > .input__icon, .input.input--trailing-icon > .input__icon {\n  fill: var(--tf-c-text-field);\n}\n\n.input--focused {\n  --tf-c-border: var(--tf-c-focused);\n}\n\n.input--focused label {\n  color: var(--tf-c-focused);\n}\n\n.input--focused input {\n  caret-color: var(--tf-c-focused);\n}\n\n.input--disabled {\n  --tf-c-border: var(--tf-c-disabled);\n}\n\n.input--disabled label, .input--disabled input, .input--disabled + .input-helper {\n  color: var(--tf-c-disabled);\n}\n\n.input--disabled.input--leading-icon > .input__icon, .input--disabled.input--trailing-icon > .input__icon {\n  fill: var(--tf-c-disabled);\n}\n\n.input--error {\n  --tf-c-border: var(--tf-c-error);\n}\n\n.input--error input {\n  caret-color: var(--tf-c-error);\n}\n\n.input--error label, .input--error + .text-field-helper {\n  color: var(--tf-c-error);\n}\n\n.input--error label.floating-label--required:after {\n  content: \"*\";\n  margin-left: 1px;\n  font-size: 18px;\n  line-height: 0;\n}\n\n.input--error.input--leading-icon > .input__icon, .input--error.input--trailing-icon > .input__icon {\n  fill: var(--tf-c-error);\n}\n\n.input .input__icon {\n  width: 24px;\n  height: 24px;\n}\n\n.input.input--leading-icon .input__icon, .input.input--trailing-icon .input__icon {\n  cursor: pointer;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n.input.input--trailing-icon input {\n  padding-left: 16px;\n  padding-right: 48px;\n}\n\n.input.input--leading-icon input {\n  padding-left: 48px;\n  padding-right: 16px;\n}\n\n.input.input--leading-icon.input--trailing-icon input {\n  padding-left: 48px;\n  padding-right: 48px;\n}\n\n.input.input--trailing-icon .input__icon {\n  left: initial;\n  right: 12px;\n}\n\n.input.input--leading-icon .input__icon {\n  left: 12px;\n  right: initial;\n}\n\n.input.input--leading-icon.input--trailing-icon .input__icon ~ .input__icon {\n  left: auto;\n  right: 12px;\n}\n\n.input.input--leading-icon label {\n  left: 44px;\n  right: initial;\n}\n\n.input.input--trailing-icon label, .input.input--leading-icon label {\n  max-width: calc(100% - 66px);\n}\n\n.input.input--leading-icon.input--trailing-icon label {\n  max-width: calc(100% - 84px);\n}\n\n.textarea {\n  will-change: transform;\n  border-radius: var(--tf-border-radius) var(--tf-border-radius) 0 0;\n  min-height: 80px;\n  display: inline-flex;\n  position: relative;\n  overflow: visible;\n}\n\n.textarea textarea {\n  resize: none;\n  appearance: none;\n  z-index: 1;\n  font-size: var(--tf-font-size-field);\n  line-height: var(--tf-textarea-line-height);\n  font-weight: var(--tf-font-weight);\n  letter-spacing: var(--tf-letter-spacing);\n  color: var(--tf-c-text-field);\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  background: none;\n  border: none;\n  border-radius: 0;\n  width: 100%;\n  height: auto;\n  margin: 8px 1px 2px 0;\n  padding: 0 15px 4px;\n  display: flex;\n}\n\n.textarea textarea:focus {\n  outline: none;\n}\n\n.textarea:hover:not(.textarea--error, .textarea--disabled, .textarea--focused) {\n  --tf-c-border: var(--tf-c-hover);\n}\n\n.textarea--focused {\n  --tf-c-border: var(--tf-c-focused);\n}\n\n.textarea--focused label {\n  color: var(--tf-c-focused);\n}\n\n.textarea--focused textarea {\n  caret-color: var(--tf-c-focused);\n}\n\n.textarea--disabled {\n  --tf-c-border: var(--tf-c-disabled);\n}\n\n.textarea--disabled label, .textarea--disabled textarea, .textarea--disabled + .textarea-helper {\n  color: var(--tf-c-disabled);\n}\n\n.textarea--error {\n  --tf-c-border: var(--tf-c-error);\n}\n\n.textarea--error textarea {\n  caret-color: var(--tf-c-error);\n}\n\n.textarea--error label, .textarea--error + .text-field-helper {\n  color: var(--tf-c-error);\n}\n\n.textarea--error label.floating-label--required:after {\n  content: \"*\";\n  margin-left: 1px;\n  line-height: 0;\n}\n\n.text-field-helper {\n  font-size: var(--tf-font-size-helper);\n  color: var(--tf-c-text-helper);\n  justify-content: flex-end;\n  padding: 4px 17px 0;\n  line-height: 1.3;\n  display: flex;\n}\n\n.text-field-helper__text {\n  flex: 1;\n  padding-right: 10px;\n}\n\n.text-field-helper__counter {\n  white-space: nowrap;\n  text-align: right;\n}\n\n.text-field-container input::placeholder {\n  color: var(--tf-c-placeholder);\n  opacity: 0;\n  transition: opacity .225s var(--tf-transition-easing);\n}\n\n.text-field-container input:focus::placeholder {\n  opacity: .65;\n}\n\n@supports (-webkit-overflow-scrolling: touch) {\n  select, input[type=\"text\"], textarea {\n    font-size: 16px !important;\n  }\n}\n\n.text-field-helper {\n  display: none;\n}\n\n.input--error + .text-field-helper {\n  display: block;\n}\n/*# sourceMappingURL=index.css.map */\n",".text-field-container {\n\t// Colors\n\t--tf-c-text-field: slategrey;\n\t--tf-c-text-helper: slategrey;\n\t--tf-c-inactive: darkgray;\n\t--tf-c-focused: dodgerblue;\n\t--tf-c-activated: gray;\n\t--tf-c-hover: dimgray;\n\t--tf-c-error: crimson;\n\t--tf-c-disabled: silver;\n\t--tf-c-placeholder: silver;\n\t--tf-c-border: var(--tf-c-inactive); // redefined when manipulating text fields\n\n\t// Font\n\t--tf-font-size-field: 16px;\n\t--tf-font-size-helper: 12px;\n\t--tf-font-weight: 400;\n\t--tf-letter-spacing: .009375em;\n\t--tf-input-line-height: 23px;\n\t--tf-textarea-line-height: 24px;\n\n\t// Border\n\t--tf-border-width-inactive: 1px;\n\t--tf-border-width-active: 2px;\n\t--tf-border-radius: 6px;\n\n\t// Transition\n\t--tf-transition-easing: cubic-bezier(0, 0.202, 0.204, 1);\n}\n",".notched-outline {\n\tdisplay: flex;\n\tposition: absolute;\n\tright: 0; left: 0;\n\tz-index: 1;\n\twidth: 100%; height: 100%;\n\tmax-width: 100%;\n\ttext-align: left;\n\tpointer-events: none;\n\n\t&__leading {\n\t\twidth: 12px; height: 100%;\n\t\tpointer-events: none;\n\t\tborder-top: var(--tf-border-width-inactive) solid;\n\t\tborder-right: none;\n\t\tborder-bottom: var(--tf-border-width-inactive) solid;\n\t\tborder-left: var(--tf-border-width-inactive) solid;\n\t\tborder-radius: var(--tf-border-radius) 0 0 var(--tf-border-radius);\n\t\tborder-color: var(--tf-c-border);\n\t\tbox-sizing: border-box;\n\t\ttransition: border-color 225ms var(--tf-transition-easing);\n\t}\n\n\t&__notch {\n\t\tflex: 0 0 auto;\n\t\twidth: auto; height: 100%;\n\t\tmax-width: calc(100% - 12px * 2);\n\t\tpointer-events: none;\n\t\tborder-top: var(--tf-border-width-inactive) solid;\n\t\tborder-bottom: var(--tf-border-width-inactive) solid;\n\t\tborder-color: var(--tf-c-border);\n\t\tbox-sizing: border-box;\n\t\ttransition: border-color 225ms var(--tf-transition-easing);\n\n\t\t.input--focused &,\n\t\t.input--filled &,\n\t\t.textarea--focused &,\n\t\t.textarea--filled & {\n\t\t\tborder-top: none;\n\t\t\talign-items: flex-start;\n\t\t}\n\t}\n\n\t&__trailing {\n\t\tflex-grow: 1;\n\t\theight: 100%;\n\t\tpointer-events: none;\n\t\tborder-top: var(--tf-border-width-inactive) solid;\n\t\tborder-right: var(--tf-border-width-inactive) solid;\n\t\tborder-bottom: var(--tf-border-width-inactive) solid;\n\t\tborder-left: none;\n\t\tborder-radius: 0 var(--tf-border-radius) var(--tf-border-radius) 0;\n\t\tborder-color: var(--tf-c-border);\n\t\tbox-sizing: border-box;\n\t\ttransition: border-color 225ms var(--tf-transition-easing);\n\t}\n\n\t.input--focused &__leading,\n\t.input--focused &__notch,\n\t.input--focused &__trailing,\n\t.input--filled &__leading,\n\t.input--filled &__notch,\n\t.input--filled &__trailing,\n\t.textarea--focused &__leading,\n\t.textarea--focused &__notch,\n\t.textarea--focused &__trailing,\n\t.textarea--filled &__leading,\n\t.textarea--filled &__notch,\n\t.textarea--filled &__trailing {\n\t\tborder-width: var(--tf-border-width-active);\n\t}\n}\n",".floating-label {\n\tdisplay: inline-block;\n\tmax-width: calc(100% - 30px);\n\tright: initial; left: 17px;\n\tpointer-events: none;\n\tfont-size: var(--tf-font-size-field);\n\tfont-weight: var(--tf-font-weight);\n\tletter-spacing: var(--tf-letter-spacing);\n\tline-height: 23px;\n\tcolor: var(--tf-c-text-field);\n\t-moz-osx-font-smoothing: grayscale;\n\t-webkit-font-smoothing: antialiased;\n\tposition: absolute;\n\ttransform-origin: left top;\n\ttransition: transform 150ms var(--tf-transition-easing),\n\tcolor 150ms var(--tf-transition-easing);\n\ttext-align: left;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n\tcursor: text;\n\toverflow: hidden;\n\n\t.input & {\n\t\ttop: 50%;\n\t\ttransform: translateY(-50%);\n\t}\n\n\t.textarea & {\n\t\ttop: 13px;\n\t}\n\n\t.input--focused &,\n\t.input--filled & {\n\t\ttransform: translateY(-33px) scale(.75);\n\t}\n\n\t.input--focused.input--leading-icon &,\n\t.input--filled.input--leading-icon & {\n\t\ttransform: translateY(-33px) translateX(-27px) scale(.75);\n\t}\n\n\t.input--focused.input--dense &,\n\t.input--filled.input--dense & {\n\t\ttransform: translateY(-27px) scale(.75);\n\t}\n\n\t.input--focused.input--large &,\n\t.input--filled.input--large & {\n\t\ttransform: translateY(-44px) scale(.75);\n\t}\n\n\t.input--focused.input--dense.input--leading-icon &,\n\t.input--filled.input--dense.input--leading-icon & {\n\t\ttransform: translateY(-27px) translateX(-27px) scale(.75);\n\t}\n\n\t.input--focused.input--large.input--leading-icon &,\n\t.input--filled.input--large.input--leading-icon & {\n\t\ttransform: translateY(-44px) translateX(-27px) scale(.75);\n\t}\n\n\t.textarea--focused &,\n\t.textarea--filled & {\n\t\ttransform: translateY(-22px) scale(.75);\n\t}\n}\n",".input {\n\toverflow: visible;\n\tdisplay: inline-flex;\n\tposition: relative;\n\twill-change: transform;\n\tborder-radius: var(--tf-border-radius) var(--tf-border-radius) 0 0;\n\theight: 48px;\n\n\tinput {\n\t\tdisplay: flex;\n\t\tpadding: 0 15px;\n\t\tz-index: 1;\n\t\t-moz-osx-font-smoothing: grayscale;\n\t\t-webkit-font-smoothing: antialiased;\n\t\talign-self: flex-end;\n\t\twidth: 100%; height: 48px;\n\t\tborder: none;\n\t\tborder-radius: 0;\n\t\tbackground: none;\n\t\tappearance: none;\n\t\tfont-size: var(--tf-font-size-field);\n\t\tline-height: var(--tf-input-line-height);\n\t\tfont-weight: var(--tf-font-weight);\n\t\tletter-spacing: var(--tf-letter-spacing);\n\t\tcolor: var(--tf-c-text-field);\n\n\t\t&:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t&--dense {\n\t\theight: 36px;\n\n\t\tinput {\n\t\t\theight: 36px;\n\t\t}\n\t}\n\n\t&--large {\n\t\theight: 70px;\n\n\t\tinput {\n\t\t\theight: 70px;\n\t\t}\n\t}\n\n\t&:hover {\n\t\t&:not(.input--error, .input--disabled, .input--focused) {\n\t\t\t--tf-c-border: var(--tf-c-hover);\n\t\t}\n\t}\n\n\t&.input--leading-icon > .input__icon,\n\t&.input--trailing-icon > .input__icon {\n\t\tfill: var(--tf-c-text-field);\n\t}\n\n\t&--focused {\n\t\t--tf-c-border: var(--tf-c-focused);\n\n\t\tlabel {\n\t\t\tcolor: var(--tf-c-focused);\n\t\t}\n\n\t\tinput {\n\t\t\tcaret-color: var(--tf-c-focused);\n\t\t}\n\t}\n\n\t&--disabled {\n\t\t--tf-c-border: var(--tf-c-disabled);\n\n\t\tlabel,\n\t\tinput,\n\t\t+ .input-helper {\n\t\t\tcolor: var(--tf-c-disabled);\n\t\t}\n\n\t\t&.input--leading-icon > .input__icon,\n\t\t&.input--trailing-icon > .input__icon {\n\t\t\tfill: var(--tf-c-disabled);\n\t\t}\n\t}\n\n\t&--error {\n\t\t--tf-c-border: var(--tf-c-error);\n\n\t\tinput {\n\t\t\tcaret-color: var(--tf-c-error);\n\t\t}\n\n\t\tlabel,\n\t\t+ .text-field-helper {\n\t\t\tcolor: var(--tf-c-error);\n\t\t}\n\n\t\tlabel.floating-label--required::after {\n\t\t\tmargin-left: 1px;\n\t\t\tfont-size: 18px;\n\t\t\tline-height: 0;\n\t\t\tcontent: '*';\n\t\t}\n\n\t\t&.input--leading-icon > .input__icon,\n\t\t&.input--trailing-icon > .input__icon {\n\t\t\tfill: var(--tf-c-error);\n\t\t}\n\t}\n\n\t/* icons */\n\n\t.input__icon {\n\t\twidth: 24px; height: 24px;\n\t}\n\n\t&.input--leading-icon .input__icon {\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\ttransform: translateY(-50%);\n\t\tcursor: pointer;\n\t}\n\n\t&.input--trailing-icon {\n\t\t.input__icon {\n\t\t\tposition: absolute;\n\t\t\ttop: 50%;\n\t\t\ttransform: translateY(-50%);\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\tinput {\n\t\t\tpadding-left: 16px;\n\t\t\tpadding-right: 48px;\n\t\t}\n\t}\n\n\t&.input--leading-icon {\n\t\tinput {\n\t\t\tpadding-left: 48px;\n\t\t\tpadding-right: 16px;\n\t\t}\n\n\t\t&.input--trailing-icon input {\n\t\t\tpadding-left: 48px;\n\t\t\tpadding-right: 48px;\n\t\t}\n\t}\n\n\t&.input--trailing-icon .input__icon {\n\t\tleft: initial;\n\t\tright: 12px;\n\t}\n\n\t&.input--leading-icon {\n\t\t.input__icon {\n\t\t\tleft: 12px;\n\t\t\tright: initial;\n\t\t}\n\n\t\t&.input--trailing-icon .input__icon ~ .input__icon {\n\t\t\tright: 12px;\n\t\t\tleft: auto;\n\t\t}\n\n\t\tlabel {\n\t\t\tleft: 44px;\n\t\t\tright: initial;\n\t\t}\n\t}\n\n\t&.input--trailing-icon label {\n\t\tmax-width: calc(100% - 66px);\n\t}\n\n\t&.input--leading-icon {\n\t\tlabel {\n\t\t\tmax-width: calc(100% - 66px);\n\t\t}\n\n\t\t&.input--trailing-icon label {\n\t\t\tmax-width: calc(100% - 84px);\n\t\t}\n\t}\n}\n",".textarea {\n\toverflow: visible;\n\tdisplay: inline-flex;\n\tposition: relative;\n\twill-change: transform;\n\tborder-radius: var(--tf-border-radius) var(--tf-border-radius) 0 0;\n\tmin-height: 80px;\n\n\ttextarea {\n\t\tresize: none;\n\t\tbackground: none;\n\t\tborder: none;\n\t\tborder-radius: 0;\n\t\tappearance: none;\n\t\twidth: 100%; height: auto;\n\t\tdisplay: flex;\n\t\tz-index: 1;\n\t\tmargin: 8px 1px 2px 0;\n\t\tpadding: 0 15px 4px;\n\t\tfont-size: var(--tf-font-size-field);\n\t\tline-height: var(--tf-textarea-line-height);\n\t\tfont-weight: var(--tf-font-weight);\n\t\tletter-spacing: var(--tf-letter-spacing);\n\t\tcolor: var(--tf-c-text-field);\n\t\t-moz-osx-font-smoothing: grayscale;\n\t\t-webkit-font-smoothing: antialiased;\n\n\t\t&:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t&:hover {\n\t\t&:not(.textarea--error, .textarea--disabled, .textarea--focused) {\n\t\t\t--tf-c-border: var(--tf-c-hover);\n\t\t}\n\t}\n\n\t&--focused {\n\t\t--tf-c-border: var(--tf-c-focused);\n\n\t\tlabel {\n\t\t\tcolor: var(--tf-c-focused);\n\t\t}\n\n\t\ttextarea {\n\t\t\tcaret-color: var(--tf-c-focused);\n\t\t}\n\t}\n\n\t&--disabled {\n\t\t--tf-c-border: var(--tf-c-disabled);\n\n\t\tlabel,\n\t\ttextarea,\n\t\t+ .textarea-helper {\n\t\t\tcolor: var(--tf-c-disabled);\n\t\t}\n\t}\n\n\t&--error {\n\t\t--tf-c-border: var(--tf-c-error);\n\n\t\ttextarea {\n\t\t\tcaret-color: var(--tf-c-error);\n\t\t}\n\n\t\tlabel,\n\t\t+ .text-field-helper {\n\t\t\tcolor: var(--tf-c-error);\n\t\t}\n\n\t\tlabel.floating-label--required::after {\n\t\t\tmargin-left: 1px;\n\t\t\tline-height: 0;\n\t\t\tcontent: '*';\n\t\t}\n\t}\n}\n",".text-field-helper {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\tpadding: 4px 17px 0;\n\tfont-size: var(--tf-font-size-helper);\n\tline-height: 1.3;\n\tcolor: var(--tf-c-text-helper);\n\n\t&__text {\n\t\tpadding-right: 10px;\n\t\tflex: 1;\n\t}\n\n\t&__counter {\n\t\twhite-space: nowrap;\n\t\ttext-align: right;\n\t}\n}\n",".text-field-container {\n\tinput {\n\t\t&::placeholder {\n\t\t\tcolor: var(--tf-c-placeholder);\n\t\t\topacity: 0;\n\t\t\ttransition: opacity 225ms var(--tf-transition-easing);\n\t\t}\n\n\t\t&:focus::placeholder {\n\t\t\topacity: 0.65;\n\t\t}\n\t}\n}\n","// Disable Auto Zoom in Input tag iOS\n@supports (-webkit-overflow-scrolling: touch) {\n\tselect, input[type='text'], textarea {\n\t\tfont-size: 16px !important;\n\t}\n}\n\n//\n.text-field-helper {\n\tdisplay: none;\n\n\t@at-root .input--error + & {\n\t\tdisplay: block;\n\t}\n}\n"],"names":[],"version":3,"file":"index.css.map"}