song-ui-u/theme/input.css

vue3 + js的PC前端组件库

@charset "UTF-8";.x-input{--x-input-text-color:var(--x-text-color-primary);--x-input-text-color-aside:var(--x-text-color-secondary);--x-input-border-color:var(--x-border-color-default);--x-input-bg-color:var(--x-color-white);--x-input-bg-color-aside:var(--x-color-disabled-bg);--x-input-size:var(--x-component-size-default);--x-input-font-size:var(--x-font-size-default);--x-input-round:var(--x-component-round-default);--x-input-padding:var(--x-padding-default);display:inline-flex;align-items:center;width:100%}.x-input:hover{--x-input-border-color:var(--x-border-color-hover)}.x-input.is-focus{--x-input-border-color:var(--x-color-primary)}.x-input.is-disabled{--x-input-border-color:var(--x-border-color-disabled);--x-input-bg-color:var(--x-color-disabled-bg);--x-input-text-color:var(--x-text-color-placeholder);--x-input-text-color-aside:var(--x-text-color-placeholder)}.x-input__wrapper{display:inline-flex;align-items:center;padding:0 var(--x-input-padding);height:var(--x-input-size);width:100%;border:2px solid var(--x-input-border-color);border-radius:var(--x-input-round);background-color:var(--x-input-bg-color);box-sizing:border-box;transition:var(--x-transition);line-height:var(--x-input-size)}.x-input__wrapper.is-aside-prepend{border-top-left-radius:0;border-bottom-left-radius:0}.x-input__wrapper.is-aside-append{border-top-right-radius:0;border-bottom-right-radius:0}.x-input__inner{height:100%;width:100%;border:none;padding:0;outline:0;background-color:transparent;color:var(--x-input-text-color);font-size:var(--x-input-font-size)}.x-input__inner.is-color-error{--x-input-text-color:var(--x-color-error)}.x-input--size_small{--x-input-font-size:var(--x-font-size-small);--x-input-size:var(--x-component-size-small);--x-input-round:var(--x-component-round-small)}.x-input--size_large{--x-input-font-size:var(--x-font-size-large);--x-input-size:var(--x-component-size-large)}.x-input.is-round{--x-input-round:var(--x-component-round-round)}.x-input__fix-wrapper{display:inline-flex;align-items:center;justify-content:center;height:100%}.x-input__fix{display:flex;align-items:center;color:var(--x-text-color-placeholder);font-size:var(--x-input-font-size);border-radius:var(--x-input-round);box-sizing:border-box;transition:var(--x-transition);background-color:var(--x-input-bg-color);height:100%}.x-input__fix>span{color:var(--x-input-text-color);font-size:inherit}.x-input__prefix{padding-right:var(--x-input-padding)}.x-input__suffix{padding-left:var(--x-input-padding)}.x-input__fix-inner{color:var(--x-input-text-color);font-size:var(--x-input-font-size);-webkit-user-select:none;-moz-user-select:none;user-select:none}.x-input__aside-wrapper{display:inline-flex;align-items:center;justify-content:center;height:var(--x-input-size)}.x-input__aside{display:inline-flex;align-items:center;justify-content:center;height:100%;border:2px solid var(--x-input-border-color);border-radius:var(--x-input-round);background-color:var(--x-input-bg-color-aside);box-sizing:border-box;padding:0 var(--x-input-padding);transition:var(--x-transition);font-size:var(--x-input-font-size);-webkit-user-select:none;-moz-user-select:none;user-select:none;color:var(--x-input-text-color-aside)}.x-input__prepend{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}.x-input__prepend .x-button{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none;min-width:auto;padding:0 var(--x-input-padding)}.x-input__append{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.x-input__append .x-button{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none;min-width:auto;padding:0 var(--x-input-padding)}.x-input .x-button--default{color:var(--x-input-text-color-aside)}.x-input .x-icon+.x-icon{margin-left:var(--x-input-padding)}.x-input__count{font-size:12px;margin-left:var(--x-input-padding);line-height:1;white-space:pre}input::-moz-placeholder{color:var(--x-text-color-placeholder)}input::placeholder{color:var(--x-text-color-placeholder)}input::-webkit-input-placeholder{color:var(--x-text-color-placeholder)}input:-moz-placeholder{color:var(--x-text-color-placeholder)}input::-moz-placeholder{color:var(--x-text-color-placeholder)}input:-ms-input-placeholder{color:var(--x-text-color-placeholder)}input::-ms-input-placeholder{color:var(--x-text-color-placeholder)}