cloud-ui.vusion/src/u-input.vue/module.css

Vusion Cloud UI

@import 'proto-ui.vusion/src/u-input.vue/module.css';

.root{
    position: relative;
}

.input {
    padding: 0 10px;
    color: #666;
    border-color: $brand-secondary;
    border-radius: 3px;
    transition: border-color $transition-duration;
}
.input[close]{
    padding-right: 30px;
}

.input::placeholder {
    /* Removes placeholder transparency in Firefox. */
    opacity: 1;
    color: #999;
}

.input:focus {
    border-color: #8ebee9;
}

.input[color="error"] {
    border-color: #ff867f;
}

.input[disabled] {
    background-color: $brand-disabled;
    border-color: $brand-disabled;
}

.close{
    position: absolute;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    right: 1px;
    top: 0;
    cursor: pointer;
}

.closeIcon{
    width: 18px;
    height: 18px;
    line-height: 18px;
    background: #f5f7fa;
    border-radius: 100%;
    display: inline-block;
}

.closeIcon:before{
    icon-font: url(../u-icon.vue/icons/close-small.svg);
    font-size: 16px;
    color:#b4b4b4;
    margin-right: 0;
    vertical-align: middle;
}

.root[size$="mini"] { width: 80px; }
.root[size^="mini"] { height: 28px; }
.input[size$="mini"]{ padding: 0 6px; }
.input[size$="mini"][close] { padding-right: 30px; }

.root[size$="small"] { width: 120px; }
.root[size^="small"] { height: 30px; }
.input[size$="small"] { padding: 0 8px; }
.input[size$="small"][close] { padding-right: 30px; }

.root[size$="normal"] { width: 160px; }
.root[size^="normal"] { height: $height-base; }
.input[size$="normal"] { padding: 0 10px; }
.root[size$="normal"][close] { padding-right: 30px; }

.root[size$="medium"] { width: 280px; }
.root[size^="medium"] { height: 36px; }
.input[size$="medium"] { padding: 0 10px; }
.input[size$="medium"][close] { padding-right: 30px; }

.root[size$="large"] { width: 440px; }
.root[size^="large"] { height: 38px; }
.input[size$="large"] { padding: 0 10px; }
.input[size$="large"][close] { padding-right: 30px; }

.root[size$="huge"] { width: 580px; }
.root[size^="huge"] { height: 40px; }
.input[size$="huge"] { padding: 0 10px; }
.input[size$="huge"][close] { padding-right: 30px; }

.root[size$="full"] { width: 100%; }
.input[size$="full"] { padding: 0 10px; }
.input[size$="full"][close] { padding-right: 30px; }
.root[size^="full"] { height: 100%; }