@vue-material/core/dist/assets/input.css.js

Yet another 'Material Design Components' library for Vue3.

import i from "../attach-styles.js";
i('.md-input{display:inline-block;margin-block:var(--xs)}.md-input-wrapper{display:grid;place-items:center;position:relative;color:var(--on-surface-variant);transition:box-shadow .2s;padding-left:var(--md);grid-template:"l-icon prefix input suffix r-icon n-arrows" var(--component-lg) "   .     .    input    .     .       .    " auto/auto auto 1fr auto auto auto}.md-input-icon{display:grid;place-items:center;width:var(--component-md);aspect-ratio:1}.md-input-icon.left{margin-left:calc(var(--md) * -1);grid-area:l-icon}.md-input-icon.right{grid-area:r-icon}.md-input-prefix{grid-area:prefix;padding-right:var(--xxs)}.md-input-suffix{grid-area:suffix}.md-input-field{background:none;border:none;outline:none;grid-area:input;font:inherit;width:100%;color:currentcolor}.md-input-field:focus{color:var(--on-surface)}.md-input textarea{resize:none;height:100%;min-height:var(--component-lg);padding-top:var(--md)}.md-input-number-arrows{grid-area:n-arrows;display:grid;grid-template-rows:1fr 1fr;place-items:center;user-select:none;height:100%}.md-input-number-arrows>*{height:100%;display:grid;width:var(--xl);place-items:center;cursor:pointer}.md-input-number-arrows :first-child{align-items:end}.md-input-number-arrows :last-child{align-items:start}.md-input-placeholder{top:var(--md);left:var(--md);content:attr(data-placeholder);position:absolute;justify-self:start;transition:all .2s}.md-input[variant=outlined] .md-input-wrapper{border-radius:var(--xxs);box-shadow:0 0 0 1px inset var(--outline)}.md-input[variant=outlined]:focus-within .md-input-wrapper{box-shadow:0 0 0 2px inset var(--primary)}.md-input[variant=outlined] .md-input-placeholder{background:var(--surface)}.md-input[variant=filled] .md-input-wrapper{border-radius:var(--xxs) var(--xxs) 0 0;background:var(--surface-container-highest)}.md-input[variant=filled] input{padding-top:var(--md)}.md-input[variant=filled] textarea{padding-top:var(--xl)}.md-input[variant=filled] .md-input-wrapper:before,.md-input[variant=filled] .md-input-wrapper:after{content:"";position:absolute;bottom:0;width:100%;height:2px}.md-input[variant=filled] .md-input-wrapper:before{height:1px;background:var(--on-surface-variant)}.md-input[variant=filled] .md-input-wrapper:after{scale:0 1;transition:all .2s}.md-input[variant=filled] .md-input-prefix,.md-input[variant=filled] .md-input-suffix{padding:var(--md) var(--xs) 0 0}.md-input[variant=filled]:focus-within .md-input-wrapper:after{background:var(--primary);scale:1 1}.md-input:has(.md-input-icon.left) .md-input-placeholder{left:var(--component-md)}.md-input[empty] .md-input-prefix,.md-input[empty] .md-input-suffix,.md-input[empty] .md-input-field{opacity:0}.md-input[span]{width:100%}.md-input[open] .md-input-placeholder,.md-input:focus-within .md-input-placeholder{color:var(--primary)}.md-input:focus-within .md-input-placeholder,.md-input:not([empty]) .md-input-placeholder{top:0;font-size:var(--font-sm)}.md-input:focus-within .md-input-prefix,.md-input:focus-within .md-input-suffix,.md-input:focus-within .md-input-field,.md-input:not([empty]) .md-input-prefix,.md-input:not([empty]) .md-input-suffix,.md-input:not([empty]) .md-input-field{opacity:1}.md-input[variant=filled]:focus-within .md-input-placeholder,.md-input[variant=filled]:not([empty]) .md-input-placeholder{top:var(--xxs);font-size:var(--font-sm)}.md-input[variant=outlined]:focus-within .md-input-placeholder,.md-input[variant=outlined]:not([empty]) .md-input-placeholder{left:var(--sm)!important;padding-inline:var(--xxs);transform:translateY(-50%)}.md-input input::-webkit-outer-spin-button,.md-input input::-webkit-inner-spin-button{appearance:none;margin:0}', "af370488");