vue-amazing-ui/lib/input/Input.css

An Amazing Vue3 UI Components Library, Using TypeScript.

.m-input[data-v-adcde5d2]{width:var(--input-width);text-align:start;vertical-align:top;position:relative;display:inline-table;border-collapse:separate;border-spacing:0}.m-input .input-addon[data-v-adcde5d2]{position:relative;padding:0 11px;color:#000000e0;font-weight:400;font-size:14px;text-align:center;background-color:#00000005;border:1px solid #d9d9d9;border-radius:6px;line-height:1;display:table-cell;width:1px;white-space:nowrap;vertical-align:middle;transition:all .3s}.m-input .input-addon[data-v-adcde5d2] svg{fill:currentColor}.m-input .addon-before[data-v-adcde5d2]{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.m-input .addon-after[data-v-adcde5d2]{border-top-left-radius:0;border-bottom-left-radius:0;border-left:0}.m-input .input-wrap[data-v-adcde5d2]{font-size:14px;color:#000000e0;line-height:1.57142857;position:relative;display:inline-flex;vertical-align:top;width:100%;min-width:0;background-color:#fff}.m-input .input-wrap .input-border[data-v-adcde5d2]{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;border-radius:inherit;border:1px solid #d9d9d9}.m-input .input-wrap .input-border-state[data-v-adcde5d2]{position:absolute;z-index:1;left:0;right:0;top:0;bottom:0;pointer-events:none;border-radius:inherit;border:1px solid #d9d9d9;border-color:#0000;transition:all .2s}.m-input .input-wrap .input-hover[data-v-adcde5d2]{border:1px solid var(--input-primary-color-hover)}.m-input .input-wrap .input-focus[data-v-adcde5d2]{border:1px solid var(--input-primary-color-focus);box-shadow:0 0 0 2px var(--input-primary-shadow-color)}.m-input .input-wrap .input-prefix[data-v-adcde5d2]{margin-right:4px;display:inline-flex;flex:none;align-items:center}.m-input .input-wrap .input-prefix[data-v-adcde5d2] svg{fill:currentColor}.m-input .input-wrap .input-item[data-v-adcde5d2]{font-size:14px;color:#000000e0;line-height:1.57142857;position:relative;display:inline-block;width:100%;min-width:0;background-color:#fff;border:none;outline:none;text-overflow:ellipsis;transition:all .2s}.m-input .input-wrap input[data-v-adcde5d2]::-webkit-input-placeholder{color:#00000040}.m-input .input-wrap input[data-v-adcde5d2]:-moz-placeholder{color:#00000040}.m-input .input-wrap input[data-v-adcde5d2]::-moz-placeholder{color:#00000040}.m-input .input-wrap input[data-v-adcde5d2]:-ms-input-placeholder{color:#00000040}.m-input .input-wrap .input-suffix[data-v-adcde5d2]{margin-left:4px;display:inline-flex;flex:none;gap:8px;align-items:center}.m-input .input-wrap .input-suffix .input-actions[data-v-adcde5d2]{display:inline-flex;align-items:center;cursor:pointer}.m-input .input-wrap .input-suffix .input-actions .clear-svg[data-v-adcde5d2]{display:inline-block;font-size:12px;color:#00000040;fill:currentColor;transition:color .3s}.m-input .input-wrap .input-suffix .input-actions .clear-svg[data-v-adcde5d2]:hover{color:#00000073}.m-input .input-wrap .input-suffix .input-actions .eye-svg[data-v-adcde5d2]{display:inline-block;font-size:14px;color:#00000073;fill:currentColor;transition:color .3s}.m-input .input-wrap .input-suffix .input-actions .eye-svg[data-v-adcde5d2]:hover{color:#000000d9}.m-input .input-wrap .input-suffix .clear-hidden[data-v-adcde5d2]{visibility:hidden}.m-input .input-wrap .input-suffix .input-count[data-v-adcde5d2]{color:#00000073}.m-input .input-wrap .input-suffix .suffix-item[data-v-adcde5d2]{display:flex;flex:none;align-items:center}.m-input .input-wrap .input-suffix .suffix-item[data-v-adcde5d2] svg{fill:currentColor}.m-input .input-small[data-v-adcde5d2]{padding:1px 7px;border-radius:4px}.m-input .input-middle[data-v-adcde5d2]{padding:5px 11px;border-radius:6px}.m-input .input-large[data-v-adcde5d2]{padding:8px 11px;font-size:16px;line-height:1.5;border-radius:8px}.m-input .input-large .input-item[data-v-adcde5d2]{font-size:16px;line-height:1.5}.m-input .input-before[data-v-adcde5d2]{border-top-left-radius:0;border-bottom-left-radius:0}.m-input .input-after[data-v-adcde5d2]{border-top-right-radius:0;border-bottom-right-radius:0}.m-input .input-disabled[data-v-adcde5d2]{color:#00000040;background-color:#0000000a;cursor:not-allowed}.m-input .input-disabled .input-hover[data-v-adcde5d2]{border-color:#d9d9d9}.m-input .input-disabled .input-focus[data-v-adcde5d2]{border-color:#d9d9d9;box-shadow:none}.m-input .input-disabled .input-item[data-v-adcde5d2]{color:#00000040;background-color:transparent;cursor:not-allowed}