vue-amazing-ui/es/inputsearch/InputSearch.css

An Amazing Vue3 UI Components Library, Using TypeScript.

.m-input-search[data-v-d8cf081f]{width:var(--input-search-width);position:relative;display:inline-flex;align-items:center}.m-input-search .input-search-addon-before[data-v-d8cf081f]{display:inline-flex;justify-content:center;align-items:center;position:relative;padding:0 11px;color:#000000e0;font-weight:400;font-size:14px;line-height:1.57142857;text-align:center;background-color:#00000005;border:1px solid #d9d9d9;border-radius:6px 0 0 6px;border-right:0;transition:all .3s}.m-input-search .input-search-addon-before[data-v-d8cf081f] svg{fill:currentColor}.m-input-search .addon-before-small[data-v-d8cf081f]{height:24px}.m-input-search .addon-before-middle[data-v-d8cf081f]{height:32px}.m-input-search .addon-before-small[data-v-d8cf081f]{height:40px}.m-input-search .input-search-wrap[data-v-d8cf081f]{font-size:14px;color:#000000e0;line-height:1.57142857;position:relative;display:inline-flex;width:100%;min-width:0;background-color:#fff;border:1px solid #d9d9d9;transition:all .2s}.m-input-search .input-search-wrap[data-v-d8cf081f]:hover{border-color:var(--input-search-primary-color-hover);border-right-width:1px;z-index:1}.m-input-search .input-search-wrap[data-v-d8cf081f]:focus-within{border-color:var(--input-search-primary-color-focus);box-shadow:0 0 0 2px var(--input-search-primary-shadow-color);border-right-width:1px;outline:0;z-index:1}.m-input-search .input-search-wrap .input-search-prefix[data-v-d8cf081f]{margin-right:4px;display:flex;flex:none;align-items:center}.m-input-search .input-search-wrap .input-search-prefix[data-v-d8cf081f] svg{fill:currentColor}.m-input-search .input-search-wrap .input-search[data-v-d8cf081f]{font-size:14px;color:inherit;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-search .input-search-wrap input[data-v-d8cf081f]::-webkit-input-placeholder{color:#00000040}.m-input-search .input-search-wrap input[data-v-d8cf081f]:-moz-placeholder{color:#00000040}.m-input-search .input-search-wrap input[data-v-d8cf081f]::-moz-placeholder{color:#00000040}.m-input-search .input-search-wrap input[data-v-d8cf081f]:-ms-input-placeholder{color:#00000040}.m-input-search .input-search-wrap .input-search-suffix[data-v-d8cf081f]{margin-left:4px;display:flex;flex:none;gap:8px;align-items:center}.m-input-search .input-search-wrap .input-search-suffix .input-search-clear[data-v-d8cf081f]{display:inline-flex;justify-content:center;align-items:center;cursor:pointer}.m-input-search .input-search-wrap .input-search-suffix .input-search-clear .clear-svg[data-v-d8cf081f]{display:inline-block;font-size:12px;color:#00000040;fill:currentColor;transition:color .3s}.m-input-search .input-search-wrap .input-search-suffix .input-search-clear .clear-svg[data-v-d8cf081f]:hover{color:#00000073}.m-input-search .input-search-wrap .input-search-suffix .clear-hidden[data-v-d8cf081f]{visibility:hidden}.m-input-search .input-search-wrap .input-search-suffix .input-search-count[data-v-d8cf081f]{color:#00000073}.m-input-search .input-search-wrap .input-search-suffix .suffix-item[data-v-d8cf081f]{display:flex;flex:none;align-items:center}.m-input-search .input-search-wrap .input-search-suffix .suffix-item[data-v-d8cf081f] svg{fill:currentColor}.m-input-search .input-search-small[data-v-d8cf081f]{height:24px;padding:0 7px;border-radius:4px 0 0 4px}.m-input-search .input-search-middle[data-v-d8cf081f]{height:32px;padding:4px 11px;border-radius:6px 0 0 6px}.m-input-search .input-search-large[data-v-d8cf081f]{height:40px;padding:7px 11px;font-size:16px;line-height:1.5;border-radius:8px 0 0 8px}.m-input-search .input-search-large .input-search[data-v-d8cf081f]{font-size:16px;line-height:1.5}.m-input-search .input-search-before[data-v-d8cf081f]{border-top-left-radius:0;border-bottom-left-radius:0}.m-input-search .input-search-disabled[data-v-d8cf081f]{color:#00000040;background-color:#0000000a;cursor:not-allowed}.m-input-search .input-search-disabled[data-v-d8cf081f]:hover{border-color:#d9d9d9}.m-input-search .input-search-disabled[data-v-d8cf081f]:focus-within{border-color:#d9d9d9;box-shadow:none}.m-input-search .input-search-disabled .input-search[data-v-d8cf081f]{color:#00000040;background-color:transparent;cursor:not-allowed}.m-input-search .input-search-button[data-v-d8cf081f]{position:relative;left:-1px;border-left:0;color:#000000e0;font-weight:400;font-size:14px;text-align:center;background-color:#00000005;border-radius:0 6px 6px 0;transition:all .3s;line-height:1}.m-input-search .input-search-button[data-v-d8cf081f] .m-btn{padding-top:0;padding-bottom:0;border-radius:0 6px 6px 0}.m-input-search .input-search-button[data-v-d8cf081f] .m-btn:not(.btn-primary):not(.btn-danger):not(.btn-link):not(.btn-disabled){color:#00000073}