text-fields/dist/index.css

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

.text-field-container{--tf-c-text-field:slategrey;--tf-c-text-helper:slategrey;--tf-c-inactive:darkgray;--tf-c-focused:dodgerblue;--tf-c-activated:gray;--tf-c-hover:dimgray;--tf-c-error:crimson;--tf-c-disabled:silver;--tf-c-placeholder:silver;--tf-c-border:var(--tf-c-inactive);--tf-font-size-field:16px;--tf-font-size-helper:12px;--tf-font-weight:400;--tf-letter-spacing:.009375em;--tf-input-line-height:23px;--tf-textarea-line-height:24px;--tf-border-width-inactive:1px;--tf-border-width-active:2px;--tf-border-radius:6px;--tf-transition-easing:cubic-bezier(0,.202,.204,1);flex-direction:column;display:flex}.notched-outline{z-index:1;text-align:left;pointer-events:none;width:100%;max-width:100%;height:100%;display:flex;position:absolute;left:0;right:0}.notched-outline__leading{pointer-events:none;border-top:var(--tf-border-width-inactive)solid;border-right:none;border-bottom:var(--tf-border-width-inactive)solid;border-left:var(--tf-border-width-inactive)solid;border-radius:var(--tf-border-radius)0 0 var(--tf-border-radius);border-color:var(--tf-c-border);box-sizing:border-box;transition:border-color .225s var(--tf-transition-easing);width:12px;height:100%}.notched-outline__notch{pointer-events:none;border-top:var(--tf-border-width-inactive)solid;border-bottom:var(--tf-border-width-inactive)solid;border-color:var(--tf-c-border);box-sizing:border-box;transition:border-color .225s var(--tf-transition-easing);flex:none;width:auto;max-width:calc(100% - 24px);height:100%}.input--focused .notched-outline__notch,.input--filled .notched-outline__notch,.textarea--focused .notched-outline__notch,.textarea--filled .notched-outline__notch{border-top:none;align-items:flex-start}.notched-outline__trailing{pointer-events:none;border-top:var(--tf-border-width-inactive)solid;border-right:var(--tf-border-width-inactive)solid;border-bottom:var(--tf-border-width-inactive)solid;border-radius:0 var(--tf-border-radius)var(--tf-border-radius)0;border-left:none;border-color:var(--tf-c-border);box-sizing:border-box;transition:border-color .225s var(--tf-transition-easing);flex-grow:1;height:100%}.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{border-width:var(--tf-border-width-active)}.floating-label{right:initial;pointer-events:none;font-size:var(--tf-font-size-field);font-weight:var(--tf-font-weight);letter-spacing:var(--tf-letter-spacing);color:var(--tf-c-text-field);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;transform-origin:0 0;transition:transform .15s var(--tf-transition-easing),color .15s var(--tf-transition-easing);text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:text;max-width:calc(100% - 30px);line-height:23px;display:inline-block;position:absolute;left:17px;overflow:hidden}.input .floating-label{top:50%;transform:translateY(-50%)}.textarea .floating-label{top:13px}.input--focused .floating-label,.input--filled .floating-label{transform:translateY(-33px)scale(.75)}.input--focused.input--leading-icon .floating-label,.input--filled.input--leading-icon .floating-label{transform:translateY(-33px)translate(-27px)scale(.75)}.input--focused.input--dense .floating-label,.input--filled.input--dense .floating-label{transform:translateY(-27px)scale(.75)}.input--focused.input--large .floating-label,.input--filled.input--large .floating-label{transform:translateY(-44px)scale(.75)}.input--focused.input--dense.input--leading-icon .floating-label,.input--filled.input--dense.input--leading-icon .floating-label{transform:translateY(-27px)translate(-27px)scale(.75)}.input--focused.input--large.input--leading-icon .floating-label,.input--filled.input--large.input--leading-icon .floating-label{transform:translateY(-44px)translate(-27px)scale(.75)}.textarea--focused .floating-label,.textarea--filled .floating-label{transform:translateY(-22px)scale(.75)}.input{will-change:transform;border-radius:var(--tf-border-radius)var(--tf-border-radius)0 0;height:48px;display:inline-flex;position:relative;overflow:visible}.input input{z-index:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;appearance:none;font-size:var(--tf-font-size-field);line-height:var(--tf-input-line-height);font-weight:var(--tf-font-weight);letter-spacing:var(--tf-letter-spacing);color:var(--tf-c-text-field);background:0 0;border:none;border-radius:0;align-self:flex-end;width:100%;height:48px;padding:0 15px;display:flex}.input input:focus{outline:none}.input--dense,.input--dense input{height:36px}.input--large,.input--large input{height:70px}.input:hover:not(.input--error,.input--disabled,.input--focused){--tf-c-border:var(--tf-c-hover)}.input.input--leading-icon>.input__icon,.input.input--trailing-icon>.input__icon{fill:var(--tf-c-text-field)}.input--focused{--tf-c-border:var(--tf-c-focused)}.input--focused label{color:var(--tf-c-focused)}.input--focused input{caret-color:var(--tf-c-focused)}.input--disabled{--tf-c-border:var(--tf-c-disabled)}.input--disabled label,.input--disabled input,.input--disabled+.input-helper{color:var(--tf-c-disabled)}.input--disabled.input--leading-icon>.input__icon,.input--disabled.input--trailing-icon>.input__icon{fill:var(--tf-c-disabled)}.input--error{--tf-c-border:var(--tf-c-error)}.input--error input{caret-color:var(--tf-c-error)}.input--error label,.input--error+.text-field-helper{color:var(--tf-c-error)}.input--error label.floating-label--required:after{content:"*";margin-left:1px;font-size:18px;line-height:0}.input--error.input--leading-icon>.input__icon,.input--error.input--trailing-icon>.input__icon{fill:var(--tf-c-error)}.input .input__icon{width:24px;height:24px}.input.input--leading-icon .input__icon,.input.input--trailing-icon .input__icon{cursor:pointer;position:absolute;top:50%;transform:translateY(-50%)}.input.input--trailing-icon input{padding-left:16px;padding-right:48px}.input.input--leading-icon input{padding-left:48px;padding-right:16px}.input.input--leading-icon.input--trailing-icon input{padding-left:48px;padding-right:48px}.input.input--trailing-icon .input__icon{left:initial;right:12px}.input.input--leading-icon .input__icon{left:12px;right:initial}.input.input--leading-icon.input--trailing-icon .input__icon~.input__icon{left:auto;right:12px}.input.input--leading-icon label{left:44px;right:initial}.input.input--trailing-icon label,.input.input--leading-icon label{max-width:calc(100% - 66px)}.input.input--leading-icon.input--trailing-icon label{max-width:calc(100% - 84px)}.textarea{will-change:transform;border-radius:var(--tf-border-radius)var(--tf-border-radius)0 0;min-height:80px;display:inline-flex;position:relative;overflow:visible}.textarea textarea{resize:none;appearance:none;z-index:1;font-size:var(--tf-font-size-field);line-height:var(--tf-textarea-line-height);font-weight:var(--tf-font-weight);letter-spacing:var(--tf-letter-spacing);color:var(--tf-c-text-field);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;background:0 0;border:none;border-radius:0;width:100%;height:auto;margin:8px 1px 2px 0;padding:0 15px 4px;display:flex}.textarea textarea:focus{outline:none}.textarea:hover:not(.textarea--error,.textarea--disabled,.textarea--focused){--tf-c-border:var(--tf-c-hover)}.textarea--focused{--tf-c-border:var(--tf-c-focused)}.textarea--focused label{color:var(--tf-c-focused)}.textarea--focused textarea{caret-color:var(--tf-c-focused)}.textarea--disabled{--tf-c-border:var(--tf-c-disabled)}.textarea--disabled label,.textarea--disabled textarea,.textarea--disabled+.textarea-helper{color:var(--tf-c-disabled)}.textarea--error{--tf-c-border:var(--tf-c-error)}.textarea--error textarea{caret-color:var(--tf-c-error)}.textarea--error label,.textarea--error+.text-field-helper{color:var(--tf-c-error)}.textarea--error label.floating-label--required:after{content:"*";margin-left:1px;line-height:0}.text-field-helper{font-size:var(--tf-font-size-helper);color:var(--tf-c-text-helper);justify-content:flex-end;padding:4px 17px 0;line-height:1.3;display:flex}.text-field-helper__text{flex:1;padding-right:10px}.text-field-helper__counter{white-space:nowrap;text-align:right}.text-field-container input::placeholder{color:var(--tf-c-placeholder);opacity:0;transition:opacity .225s var(--tf-transition-easing)}.text-field-container input:focus::placeholder{opacity:.65}@supports (-webkit-overflow-scrolling:touch){select,input[type=text],textarea{font-size:16px!important}}.text-field-helper{display:none}.input--error+.text-field-helper{display:block}
/*# sourceMappingURL=index.css.map */