muf-ui/style/input.css

MUF-UI,基于Vue的Web多样化组件库

/* common style */

.muf-input-case {
    width: 100%;
    position: relative;
    display: inline-table;
}

.muf-input-- {
    width: 100%;
    box-sizing: border-box;
    padding: 0px 15px 0px 20px;
    transition: all 0.3s;
    outline: none;
    vertical-align: middle;
    color: rgb(89, 89, 89);
}

.input-box {
    width: 100%;
    display: table-cell;
    vertical-align: middle;
    position: relative;
    box-sizing: border-box;
}


/* set input placeholder style */

input::-webkit-input-placeholder {
    color: rgb(200, 200, 200);
}


/* disabled input style */

input[type='text']:disabled {
    background-color: rgb(245, 245, 245);
    color: rgb(204, 185, 185);
    cursor: not-allowed;
}

input[type='text']:disabled:hover {
    border: 0.5px solid rgb(216, 208, 208);
}


/* input size */

.max {
    height: 35px;
    font-size: 14px;
}

.med {
    height: 28px;
    font-size: 14px;
}

.min {
    height: 23px;
    font-size: 12px;
}


/* tiny round */

.tiny {
    border-radius: 5px 5px 5px 5px;
}


/* prefix slot tiny round */

.prefixSlot.tiny {
    border-radius: 5px 0px 0px 5px;
}


/* suffix slot tiny round */

.suffixSlot.tiny {
    border-radius: 0px 5px 5px 0px;
}


/* input half round */

.half {
    border-radius: 20px 20px;
}


/* prefix slot half round */

.prefixSlot.half {
    border-radius: 20px 0px 0px 20px;
}


/* suffix slot half round */

.suffixSlot.half {
    border-radius: 0px 20px 20px 0px;
}


/* plain style */

.plain {
    background-color: white;
    color: gray;
    border: 0.5px solid rgb(216, 208, 208);
}

.muf-input--.plain:hover {
    border: 0.5px solid rgb(183, 174, 233);
}

.muf-input--.plain:focus {
    border: 0.5px solid rgb(146, 136, 252);
}


/* if plain style eles not show input border */

.prefixSlot.plain {
    border-right: none;
}

.suffixSlot.plain {
    border-left: none;
}


/* pure style */

.pure {
    border: none;
    background-color: rgb(242, 242, 242);
}


/* if input model is pure, eles not show right and left input border */

.prefixSlot.pure {
    border-right: 0.5px solid rgb(230, 230, 230);
}

.suffixSlot.pure {
    border-left: 0.5px solid rgb(230, 230, 230);
}


/* open prefix slot */

.is-prefixSlot {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.is-suffixSlot {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}


/* is prefix icon */

.is-prefixIcon {
    padding-left: 30px;
}


/* prefix slot icon layout */

.prefix_slot {
    display: inline-flex;
    align-items: center;
    height: 100%;
    font-size: 12px;
    position: absolute;
    left: 12px;
}


/* prefix icon */

.prefixIcon {
    color: rgb(145, 137, 137);
}


/* prefix slot */

.input-slot-box {
    background-color: rgb(242, 242, 242);
    box-sizing: border-box;
    display: table-cell;
    vertical-align: middle;
    white-space: nowrap;
    padding: 0px 20px;
    text-align: center;
    color: rgb(150, 150, 150);
}


/* suffix slot icon root element */

.suffix_flex {
    width: auto;
    height: 100%;
    display: inline-flex;
    align-items: center;
    position: absolute;
    right: 10px;
    letter-spacing: 5px;
}


/* suffix icon element */

.suffix_icon_box {
    border: none;
    display: inline-block;
    margin: 0px;
    padding: 0px;
    font-size: 12px;
    color: rgb(150, 150, 150);
}


/* suffix slot */


/* if suffix content have button */

.suffixSlot>button {
    width: auto;
    border: none !important;
    background-color: rgb(0, 0, 0, 0) !important;
    margin: -10px -20px;
    color: rgb(150, 150, 150) !important;
    transition: all 0.3s;
}

.suffixSlot>button:hover {
    color: rgb(112, 132, 245) !important;
}


/* show value length */

.showValueLength {
    vertical-align: middle;
    letter-spacing: 0px;
}

.clearableWord {
    color: rgb(150, 150, 150);
}

.clearableWord:hover {
    color: rgb(97, 96, 99);
    cursor: pointer;
}


/* is show password */

.show-pass {
    transition: all 0.3;
    color: rgb(150, 150, 150);
}

.show-pass:hover {
    color: rgb(255, 4, 4);
    cursor: pointer;
}