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

An Amazing Vue3 UI Components Library, Using TypeScript.

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