cloud-ui.vusion/src/components/u-input.vue/index.css

Vusion Cloud UI

.root {
    display: inline-block;
    position: relative;
    max-width: 100%; /* 防止表格等小的地方超出区域 */
    width: var(--input-width);
    height: var(--input-height);
    padding: 0 var(--input-padding-x);
    line-height: calc(var(--input-height) - var(--input-border-width) * 2);
    background: var(--input-background);
    border-width:  var(--input-border-width);
    border-style: solid;
    border-color: var(--input-border-color);
    border-radius: var(--input-border-radius);
    cursor: text;
    color: var(--input-color);
    transition: border-color var(--transition-duration-base);
}

.input {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: inherit;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    border-radius: inherit;
    line-height: inherit;
    text-align: inherit;
    cursor: inherit;
}

.baseline {
    visibility: hidden;
}

/* .placeholder, .input::placeholder {
    opacity: 1;
    font-size: inherit;
    color: var(--input-placeholder-color);
} */

.placeholder { /* for IE9 */
    position: absolute;
    left: 0;
    top: 0;
    padding: inherit;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: var(--input-placeholder-color);
}
.clearable::before,
.password::before {
    display: inline-block;
    /* position: absolute;
    right: 8px;
    top: 0;
    bottom: 0; */
    line-height: 1;
    height: 1em;
    margin: auto;
    cursor: var(--cursor-pointer);
    color: var(--input-icon-color);
}

.clearable:hover::before,
.password:hover::before {
    color: var(--input-icon-color-hover);
}

.root[disabled] .clearable:hover::before,
.root[disabled] .password:hover::before {
    color: var(--input-icon-color-disabled);
    cursor: var(--cursor-not-allowed);
}

.root[readonly] .clearable:hover::before,
.root[readonly] .password:hover::before {
    color: var(--input-icon-color-disabled);
}

.clearable::before {
    icon-font: url('../i-icon.vue/assets/close-solid.svg');
}

.password::before {
    icon-font: url('../i-icon.vue/assets/hide.svg');
}

.clearable,
.password {
    display: none;
}
.root:hover .clearable,
.root:hover .password,
.input:focus ~ .clearable,
.input:focus ~ .password {
    display: inline-block;
}

.suffix span + span {
    margin-left: 5px;
}

.root[password][show-password] .password::before {
    icon-font: url('../i-icon.vue/assets/show.svg');
}

.root[password][suffix] .password::before,
.root[password][clearable]:not([password][clearable=""]) .password::before {
    right: var(--input-suffix-padding-right);
}

.input:focus {
    outline: var(--focus-outline);
}

.root:hover {
    border-color: var(--input-border-color-hover);
}

.root[focus] {
    border-color: var(--input-border-color-focus);
    box-shadow: var(--input-box-shadow-focus);
}

.root[color="default"] { /* By default */
}

.root[color="error"] {
    border-color: var(--input-border-color-error);
}

.root[disabled] {
    cursor: var(--cursor-not-allowed);
    background: var(--input-background-disabled);
    color: var(--input-color-disabled);
    border-color: var(--input-border-color-disabled);
}

.root[disabled]:hover {
    border-color: var(--input-border-color);
}

.root[readonly] {
    border-color: var(--input-border-color-disabled);
}
.root[readonly][focus] {
    box-shadow: none;
}

.root[size="normal"] { /* By default */
}

.root[display="inline"] { /* By default */
}

.root[size^=mini] {
    height: var(--input-height-mini);
    line-height: calc(var(--input-height-mini) - var(--input-border-width)*2);
}

.root[size$=mini] {
    width: var(--input-width-mini);
    padding-left: var(--input-padding-x-mini);
    padding-right: var(--input-padding-x-mini);
}

.root[display="block"] {
    display: block;
    width: auto;
}

.root[clearable] .input .input {
    padding-right: var(--input-suffix-padding-right);
}

.prefix, .suffix {
    display: block;
    position: absolute;
    cursor: pointer;
    top: 0;
    z-index: 1;
    /* font-size: 16px;
    color: var(--input-icon-color); */
}

.prefix {
    left: 8px;
}

.suffix {
    right: 8px;
}

.root[prefix] .input {
    padding-left: var(--input-prefix-padding-left);
}

.root[suffix] .input,
.root[password] .input,
.root[clearable] .input {
    padding-right: var(--input-suffix-padding-right);
}

.root[password][suffix] .input,
.root[password][clearable]:not([password][clearable=""]) .input {
    padding-right: 50px;
}
.root[prefix] .placeholder {
    left: var(--input-prefix-placeholder-left);
}
.root[suffix] .placeholder {
    padding-right: var(--input-suffix-padding-right);
}
.root[prefix] .placeholder,
.root[suffix] .placeholder {
    width: calc(100% - var(--input-prefix-placeholder-left));
}

.root[suffix][clearable]:hover .input,
.root[suffix][clearable]:not([suffix][clearable=""])[focus] .input {
    padding-right: 50px;
}

.root .singleicon{
    color: var(--input-icon-color);
}

/* 兼容历史遗留组件中的size属性 */
.root[size$="small"] { width: var(--input-width-small); padding-left: var(--input-padding-x-small); padding-right: var(--input-padding-x-small); }
.root[size^="small"] { height: var(--input-height-small); line-height: calc(var(--input-height-small) - var(--input-border-width) * 2); }

.root[size$="normal"] { width: var(--input-width); padding-left: var(--input-padding-x); padding-right: var(--input-padding-x); }
.root[size^="normal"] { height: var(--input-height); line-height: calc(var(--input-height) - var(--input-border-width) * 2); }

.root[size$="medium"] { width: var(--input-width-medium); padding-left: var(--input-padding-x-medium); padding-right: var(--input-padding-x-medium); }
.root[size^="medium"] { height: var(--input-height-medium); line-height: calc(var(--input-height-medium) - var(--input-border-width) * 2); }

.root[size$="large"] { width: var(--input-width-large); padding-left: var(--input-padding-x-large); padding-right: var(--input-padding-x-large); }
.root[size^="large"] { height: var(--input-height-large); line-height: calc(var(--input-height-large) - var(--input-border-width) * 2); }

.root[size$="huge"] { width: var(--input-width-huge); padding-left: var(--input-padding-x-huge); padding-right: var(--input-padding-x-huge); }
.root[size^="huge"] { height: var(--input-height-huge); line-height: calc(var(--input-height-huge) - var(--input-border-width) * 2); }

.root[size$="full"] { width: 100%; padding-left: var(--input-padding-x-full); padding-right: var(--input-padding-x-full); }
.root[size^="full"] { height: 100%; }

/* 针对新的组件中设置尺寸width和height， 同时存在时，width和height会自动覆盖size */
.root[width="mini"] {
    width: var(--input-width-mini);
    padding-left: var(--input-padding-x-mini);
    padding-right: var(--input-padding-x-mini);
}

.root[height="mini"] {
    height: var(--input-height-mini);
    line-height: calc(var(--input-height-mini) - var(--input-border-width) * 2);
}

.root[width="small"] {
    width: var(--input-width-small);
    padding-left: var(--input-padding-x-small);
    padding-right: var(--input-padding-x-small);
}

.root[height="small"] {
    height: var(--input-height-small);
    line-height: calc(var(--input-height-small) - var(--input-border-width) * 2);
}

.root[width="normal"] {
    width: var(--input-width);
    padding-left: var(--input-padding-x);
    padding-right: var(--input-padding-x);
}

.root[height="normal"] {
    height: var(--input-height);
    line-height: calc(var(--input-height) - var(--input-border-width) * 2);
}

.root[width="medium"] {
    width: var(--input-width-medium);
    padding-left: var(--input-padding-x-medium);
    padding-right: var(--input-padding-x-medium);
}

.root[height="medium"] {
    height: var(--input-height-medium);
    line-height: calc(var(--input-height-medium) - var(--input-border-width) * 2);
}

.root[width="large"] {
    width: var(--input-width-large);
    padding-left: var(--input-padding-x-large);
    padding-right: var(--input-padding-x-large);
}

.root[height="large"] {
    height: var(--input-height-large);
    line-height: calc(var(--input-height-large) - var(--input-border-width) * 2);
}

.root[width="huge"] {
    width: var(--input-width-huge);
    padding-left: var(--input-padding-x-huge);
    padding-right: var(--input-padding-x-huge);
}

.root[height="huge"] {
    height: var(--input-height-huge);
    line-height: calc(var(--input-height-huge) - var(--input-border-width) * 2);
}

.root[width="full"] {
    width: 100%;
    padding-left: var(--input-padding-x-full);
    padding-right: var(--input-padding-x-full);
    min-width: initial;
}

.root[height="full"] {
    height: 100%;
}