lu2/theme/pure/css/common/ui/Input.css

Simple and flexible UI component library based on native HTML and JavaScript

@charset "UTF-8";
/**
 *
 * @Input.css
 * @author zhangxinxu(.com)
 * @create 15-06-16
 * @edit     17-06-13
 *                 19-07-18 version pure
 */
/*disabled X for IE */
input:not([type=search])::-ms-clear {
    display: none;
}

/* reset [type=search] ui */
[type=search] {
    -webkit-appearance: none;
}

[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin-right: -2px;
    background: #b6bbc6 url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiB2aWV3Qm94PSIwIDAgMjAwIDIwMCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNGRkYiIGQ9Ik0wIDB2MjAwaDIwMFYwSDB6bTE1MS42MzYgMTM2LjQ4MmE3LjM3NCA3LjM3NCAwIDAgMSAwIDEwLjQyN2wtNS4yMTIgNS4yMWE3LjM3MiA3LjM3MiAwIDAgMS0xMC40MjYgMGwtMzYuNDgzLTM2LjQ4NUw2My4wMyAxNTIuMTJhNy4zNyA3LjM3IDAgMCAxLTEwLjQyNCAwbC01LjIxLTUuMjFhNy4zNyA3LjM3IDAgMCAxIDAtMTAuNDI4TDgzLjg4IDEwMCA0Ny4zOTYgNjMuNTE0YTcuMzY4IDcuMzY4IDAgMCAxIDAtMTAuNDI1bDUuMjEtNS4yMWE3LjM2OCA3LjM2OCAwIDAgMSAxMC40MjYgMEw5OS41MTYgODQuMzYgMTM2IDQ3Ljg4YTcuMzcgNy4zNyAwIDAgMSAxMC40MjUgMGw1LjIxMiA1LjIxYTcuMzcgNy4zNyAwIDAgMSAwIDEwLjQyNUwxMTUuMTUzIDEwMGwzNi40ODMgMzYuNDgyeiIvPjwvc3ZnPg==) no-repeat center;
    background-size: 20px 20px;
    transition: background-color .15s;
    cursor: pointer;
}

[type=search]::-webkit-search-cancel-button:hover {
    background-color: #4c5161;
}

input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    background-color: transparent;
}

input[disabled],
input[readonly] {
    cursor: default;
}

input.ui-input,
.ui-input > input {
    height: 40px;
    line-height: 20px;
    padding: 9px 8px;
    border: 1px solid #d0d0d5;
    border-radius: 4px;
    background-color: #fff;
    box-sizing: border-box;
    font-size: 14px;
    outline: none;
    color: #4c5161;
    transition: border-color .15s, background-color .15s;
}

.ui-input:hover,
.ui-input:hover > input {
    border-color: #ababaf;
}

.ui-input:focus,
.ui-input > input:focus {
    border-color: #2a80eb;
}

span.ui-input {
    display: inline-block;
}

div.ui-input > input,
input[width="100%"] {
    width: 100%;
}

/* input with count */
.ui-input-x {
    position: relative;
    padding: 0 56px 0 3px;
    border-radius: 4px;
    box-sizing: border-box;
    overflow: hidden;
}

.ui-input-x > input {
    display: block;
    width: 100%;
    height: 40px;
    line-height: 20px;
    padding: 9px 0 9px;
    border: 0 none;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    right: -6px;
    color: #4c5161;
    font-size: 14px;
    outline: none;
    background: none;
    background-clip: content-box;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.ui-input-x > .ui-input {
    position: absolute;
    border: 1px solid #d0d0d5;
    border-radius: 4px;
    background-color: #fff;
    top: 0; bottom: 0; left: 0; right: 0;
    transition: border-color .15s, background-color .15s;
}

.ui-input-x .ui-input-count {
    line-height: 38px;
    padding: 0 2px;
    color: #a2a9b6;
    font-size: 12px;
    white-space: nowrap;
    position: absolute;
    font-family: sans-serif;
    right: 8px;
    top: 1px;
    z-index: 1;
}
.ui-input-count slash {
    margin: 0 1px;
}

.ui-input-x > input:not(:disabled):not([readonly]):hover ~ .ui-input {
    border-color: #ababaf;
}

.ui-input-x > input:not(:disabled):not([readonly]):focus ~ .ui-input {
    border-color: #2a80eb;
}

.ui-input-x .ui-placeholder {
    padding: 9px 7px;
    z-index: 1;
}

/* type=[search] with icon */
.ui-input-search:not(input) {
    position: relative;
}

.ui-input-search > input:not(.ui-icon-search) {
    padding-left: 40px;
}

.ui-input-search[align="right"] > :not(.ui-icon-search),
.ui-input-search[align="end"] > :not(.ui-icon-search) {
    padding-right: 40px;
    padding-left: 9px;
}

.ui-icon-search {
    position: absolute;
    left: 3px; top: 1px;
    width: 20px; height: 20px;
    color: #b6bbc6;
    background-color: transparent;
    border: solid transparent;
    border-width: 9px 8px;
    box-sizing: content-box;
    transition: color .2s;
    padding: 0; margin: 0;
    text-indent: -99px;
    font-size: 0;
    cursor: pointer;
    outline: 0 none;
    overflow: hidden;
}

[align="right"] > .ui-icon-search,
[align="end"] > .ui-icon-search {
    left: auto; right: 3px;
}

.ui-input-search:hover .ui-icon-search {
    color: #a2a9b6;
}
.ui-input-search > :disabled ~ .ui-icon-search {
    color: #b6bbc6;
    cursor: default;
}
.ui-input-search > :focus ~ .ui-icon-search {
    color: #2a80eb;
}
.ui-input-search > .error ~ .ui-icon-search {
    color: #eb4646;
}

/**
 * 改成CSS绘制
 */
.ui-icon-search::before,
.ui-icon-search::after {
    content: '';
    position: absolute;
}
.ui-icon-search::before {
    width: 9px; height: 9px;
    border: 2px solid;
    border-radius: 50%;
    left: 2px; top: 2px;
}
.ui-icon-search::after {
    width: 6px;
    border-top: 2px solid;
    transform-origin: left;
    transform: scaleY(1.25) rotate(30deg);
    left: 13px; top: 11px;
}

/**
 * <input>按钮不支持伪元素，我们使用背景图片代替
 * 不建议使用<input>标签按钮，
 */
input.ui-icon-search {
    border: 0; margin: 1px;
    width: 18px; height: 18px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M638.72 638.72a256 256 0 1 0-361.984-361.984A256 256 0 0 0 638.72 638.72zm58.71 119.04a384 384 0 1 1 85.418-95.573l202.24 202.24a64.256 64.256 0 0 1 .597 91.136 63.744 63.744 0 0 1-91.05-.598l-197.206-197.12z' fill='%23b6bbc6'/%3E%3C/svg%3E") center;
    background-clip: content-box;
    /* 不能是18px 18px，否则Chrome下会有显示bug */
    background-size: 17.9px 17.9px;
    box-sizing: content-box;
}

:focus ~ input.ui-icon-search {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M638.72 638.72a256 256 0 1 0-361.984-361.984A256 256 0 0 0 638.72 638.72zm58.71 119.04a384 384 0 1 1 85.418-95.573l202.24 202.24a64.256 64.256 0 0 1 .597 91.136 63.744 63.744 0 0 1-91.05-.598l-197.206-197.12z' fill='%232a80eb'/%3E%3C/svg%3E");
}
.error ~ input.ui-icon-search {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M638.72 638.72a256 256 0 1 0-361.984-361.984A256 256 0 0 0 638.72 638.72zm58.71 119.04a384 384 0 1 1 85.418-95.573l202.24 202.24a64.256 64.256 0 0 1 .597 91.136 63.744 63.744 0 0 1-91.05-.598l-197.206-197.12z' fill='%23eb4646'/%3E%3C/svg%3E");
}

/*
 * disabled and readonly
 * 理论上，[readonly]应该使用:read-only伪类更合适，
 * 只不过Firefox还需要-moz-私有前缀，也就是:-moz-read-only，
 * IE也不支持，Edge13+才支持
 * 比较啰嗦，因此，我们使用属性选择器代替
 **/
input.ui-input:disabled,
.ui-input > input:disabled,
.ui-input-x > :disabled ~ .ui-input {
    background-color: #f7f9fa;
}

input.ui-input:disabled,
.ui-input > input:disabled,
.ui-input-x > input:disabled {
    color: #a2a9b6;
}

.ui-input:disabled:hover,
.ui-input > input:disabled:hover,
.ui-input:hover > input:disabled,
.ui-input[readonly]:hover,
.ui-input > input[readonly]:hover,
.ui-input[readonly]:focus,
.ui-input > input[readonly]:focus {
    border-color: #d0d0d5;
}

/* error */
.ui-input.error,
.ui-input > .error {
    border-color: #eb4646 !important;
}
.ui-input-count > .error,
.ui-input-count.error {
    color: #eb4646;
}

@media (prefers-reduced-motion: reduce) {
    [type=search]::-webkit-search-cancel-button,
    input.ui-input,
    .ui-input > input,
    .ui-input-x > .ui-input,
    .ui-icon-search {
        transition: none;
    }
}