kingdot
Version:
A UI Components Library For Vue
1 lines • 6.23 kB
CSS
.kd-input,.kd-textarea{box-sizing:border-box;display:inline-block;width:300px;vertical-align:middle}.kd-input input,.kd-textarea input{appearance:button;-moz-appearance:none;-webkit-appearance:none}.kd-input .kd-input-wrapper,.kd-textarea .kd-input-wrapper{box-sizing:border-box;position:relative;display:inline-block;width:100%}.kd-input .kd-input-inner,.kd-textarea .kd-input-inner{box-sizing:border-box;position:relative;display:block;width:100%;color:#8d919b;outline:0;border:1px solid #525c77;border-radius:2px;background-color:#2c314e;transition:border .25s ease-in-out,background .25s ease-in-out}.kd-input .kd-input-inner:focus,.kd-textarea .kd-input-inner:focus{border:1px solid #5399ff;z-index:1}.kd-input .kd-input-inner::-webkit-input-placeholder,.kd-textarea .kd-input-inner::-webkit-input-placeholder{color:#8d919b}.kd-input.kd-input-fluid,.kd-textarea.kd-input-fluid{width:100%}.kd-input .kd-input-prefix,.kd-input .kd-input-suffix,.kd-textarea .kd-input-prefix,.kd-textarea .kd-input-suffix{box-sizing:border-box;position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);z-index:2;cursor:pointer}.kd-input.kd-input-group,.kd-textarea.kd-input-group{display:table}.kd-input.kd-input-group .kd-input-append,.kd-input.kd-input-group .kd-input-prepend,.kd-textarea.kd-input-group .kd-input-append,.kd-textarea.kd-input-group .kd-input-prepend{box-sizing:border-box;display:table-cell;padding:0 20px;width:1px;color:#fff;vertical-align:middle;border:1px solid #525c77;text-align:center}.kd-input.kd-input-group .kd-input-prepend,.kd-textarea.kd-input-group .kd-input-prepend{border-right:none;white-space:nowrap;border-radius:2px 0 0 2px}.kd-input.kd-input-group .kd-input-append,.kd-textarea.kd-input-group .kd-input-append{border-left:none;white-space:nowrap;border-radius:0 2px 2px 0}.kd-input.kd-input-group .kd-input-inner,.kd-textarea.kd-input-group .kd-input-inner{border-radius:0}.kd-input.kd-input-disabled,.kd-textarea.kd-input-disabled{color:#4f576e;cursor:not-allowed}.kd-input.kd-input-disabled .kd-input-inner,.kd-textarea.kd-input-disabled .kd-input-inner{color:#4f576e;border-color:#2f374f;background-color:#222a41;cursor:not-allowed}.kd-input.kd-is-exceed .kd-input-inner,.kd-textarea.kd-is-exceed .kd-input-inner{border-color:#ed3351}.kd-input .kd-textarea,.kd-textarea .kd-textarea{height:auto;line-height:1.5}.kd-input.kd-input-mini,.kd-textarea.kd-input-mini{font-size:12px}.kd-input.kd-input-mini .kd-input-inner,.kd-textarea.kd-input-mini .kd-input-inner{height:26px;line-height:26px;font-size:12px;padding:0 16px}.kd-input.kd-input-mini.kd-textarea,.kd-textarea.kd-input-mini.kd-textarea{font-size:0}.kd-input.kd-input-mini.kd-textarea .kd-input-inner,.kd-textarea.kd-input-mini.kd-textarea .kd-input-inner{padding:16px;height:auto;line-height:1.5}.kd-input.kd-with-prefix.kd-input-mini .kd-input-inner,.kd-textarea.kd-with-prefix.kd-input-mini .kd-input-inner{padding-left:16px}.kd-input.kd-with-suffix.kd-input-mini .kd-input-inner,.kd-textarea.kd-with-suffix.kd-input-mini .kd-input-inner{padding-right:16px}.kd-input.kd-input-small,.kd-textarea.kd-input-small{font-size:12px}.kd-input.kd-input-small .kd-input-inner,.kd-textarea.kd-input-small .kd-input-inner{height:28px;line-height:28px;font-size:12px;padding:0 16px}.kd-input.kd-input-small.kd-textarea,.kd-textarea.kd-input-small.kd-textarea{font-size:0}.kd-input.kd-input-small.kd-textarea .kd-input-inner,.kd-textarea.kd-input-small.kd-textarea .kd-input-inner{padding:16px;height:auto;line-height:1.5}.kd-input.kd-with-prefix.kd-input-small .kd-input-inner,.kd-textarea.kd-with-prefix.kd-input-small .kd-input-inner{padding-left:16px}.kd-input.kd-with-suffix.kd-input-small .kd-input-inner,.kd-textarea.kd-with-suffix.kd-input-small .kd-input-inner{padding-right:16px}.kd-input.kd-input-default,.kd-textarea.kd-input-default{font-size:14px}.kd-input.kd-input-default .kd-input-inner,.kd-textarea.kd-input-default .kd-input-inner{height:32px;line-height:32px;font-size:14px;padding:0 16px}.kd-input.kd-input-default.kd-textarea,.kd-textarea.kd-input-default.kd-textarea{font-size:0}.kd-input.kd-input-default.kd-textarea .kd-input-inner,.kd-textarea.kd-input-default.kd-textarea .kd-input-inner{padding:16px;height:auto;line-height:1.5}.kd-input.kd-with-prefix.kd-input-default .kd-input-inner,.kd-textarea.kd-with-prefix.kd-input-default .kd-input-inner{padding-left:36px}.kd-input.kd-with-suffix.kd-input-default .kd-input-inner,.kd-textarea.kd-with-suffix.kd-input-default .kd-input-inner{padding-right:36px}.kd-input.kd-input-large,.kd-textarea.kd-input-large{font-size:16px}.kd-input.kd-input-large .kd-input-inner,.kd-textarea.kd-input-large .kd-input-inner{height:36px;line-height:36px;font-size:16px;padding:0 16px}.kd-input.kd-input-large.kd-textarea,.kd-textarea.kd-input-large.kd-textarea{font-size:0}.kd-input.kd-input-large.kd-textarea .kd-input-inner,.kd-textarea.kd-input-large.kd-textarea .kd-input-inner{padding:16px;height:auto;line-height:1.5}.kd-input.kd-with-prefix.kd-input-large .kd-input-inner,.kd-textarea.kd-with-prefix.kd-input-large .kd-input-inner{padding-left:16px}.kd-input.kd-with-suffix.kd-input-large .kd-input-inner,.kd-textarea.kd-with-suffix.kd-input-large .kd-input-inner{padding-right:16px}.kd-input .kd-input-prefix,.kd-textarea .kd-input-prefix{left:16px}.kd-input .kd-input-suffix,.kd-textarea .kd-input-suffix{right:16px}.kd-input .kd-input-clearable{color:#4f576e;cursor:pointer}.kd-input .kd-input-clearable .kd-textarea .kd-input-inner{height:auto}.kd-textarea-show-count .kd-input-inner{resize:vertical}.kd-textarea-show-count .kd-textarea-count{color:#8d919b;background:#2c314e;position:absolute;font-size:$-input-textarea-count-font-size;bottom:$-input-textarea-count-bottom;right:$-input-textarea-count-right;z-index:1}.kd-textarea-resize-vertical.kd-input-mini .kd-input-inner{min-height:26px}.kd-textarea-resize-vertical.kd-input-small .kd-input-inner{min-height:28px}.kd-textarea-resize-vertical.kd-input-default .kd-input-inner{min-height:32px}.kd-textarea-resize-vertical.kd-input-large .kd-input-inner{min-height:36px}input::-ms-clear,input::-ms-reveal{display:none}.kd-input-suffix>[class*=kd-icon]{margin-left:4px}