@charset "UTF-8";
/**
*
* @Button.css
* @author zhangxinxu
* @create 15-06-12
* @edited 17-06-13
17-11-07 use png+spin for loading
19-07-09 IE9+, no external links
*/
.ui-button {
display: inline-block;
line-height: 20px;
font-size: 14px;
text-align: center;
color: #4c5161;
border-radius: 4px;
border: 1px solid #d0d0d5;
padding: 9px 15px;
min-width: 80px;
background-color: #fff;
background-repeat: no-repeat;
background-position: center;
text-decoration: none;
box-sizing: border-box;
transition: border-color .15s, box-shadow .15s, opacity .15s;
font-family: inherit;
cursor: pointer;
overflow: visible;
}
.ui-button[width="100%"] {
width: 100%;
}
div.ui-button {
display: block;
}
[type="submit"]:not([class]) {
position: absolute;
clip: rect(0 0 0 0);
}
/* Chrome/Firefox的outline会由Keyboard.js帮忙呈现 */
@supports (-webkit-mask: none) {
button,
[type="button"],
[type="submit"],
[tabindex] {
outline: 0 none;
}
}
::-moz-focus-inner {
border: 0;
}
input.ui-button,
button.ui-button {
height: 40px;
}
.ui-button:hover {
color: #4c5161;
text-decoration: none;
}
.ui-button:not(.disabled):not(.loading):not(:disabled):hover {
border-color: #ababaf;
box-shadow: inset 0 1px 2px rgba(0,0,0,.01), inset 0 0 0 100px rgba(0,0,0,.05);
}
.ui-button:not(.disabled):not(.loading):not(:disabled):active {
box-shadow: inset 0 1px 2px rgba(0,0,0,.1), inset 0 0 0 100px rgba(0,0,0,.1);
}
.ui-button[data-type="primary"],
.ui-button[data-type="remind"],
.ui-button[data-type="success"],
.ui-button[data-type^="warn"],
.ui-button[data-type="danger"],
.ui-button[data-type="error"] {
border: 0;
padding-top: 10px;
padding-bottom: 10px;
color: #fff;
}
/* primary button */
.ui-button[data-type="primary"],
.ui-button[data-type="remind"] {
background-color: #2a80eb;
}
/* success button */
.ui-button[data-type="success"] {
background-color: #1cad70;
}
/* warning button */
.ui-button[data-type^="warn"] {
background-color: #f59b00;
}
/* danger button */
.ui-button[data-type="danger"],
.ui-button[data-type="error"] {
background-color: #eb4646;
}
/* disabled status */
.ui-button.disabled,
.ui-button:disabled {
opacity: .4;
cursor: default;
}
/* loading status */
.ui-button.loading {
color: transparent !important;
background-position: center;
background-repeat: no-repeat;
position: relative;
cursor: default;
}
/* for IE9 button按钮以及IE9+ input按钮,三个点 */
input.ui-button.loading,
.ui-button.loading::before {
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='M0 512a512 512 0 1 0 1024 0A512 512 0 1 0 0 512z' fill='%232a80eb'/%3E%3C/svg%3E"), 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='M0 512a512 512 0 1 0 1024 0A512 512 0 1 0 0 512z' fill='%232a80eb'/%3E%3C/svg%3E"), 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='M0 512a512 512 0 1 0 1024 0A512 512 0 1 0 0 512z' fill='%232a80eb'/%3E%3C/svg%3E");
background-position-x: calc(50% - 10px), 50%, calc(50% + 10px);
/* IE不支持calc计算动画,因此是要具体数值代替 */
background-position-y: 18px, 18px, 18px;
background-size: 5px 5px;
animation: bubbling 1s infinite;
}
input.ui-button[data-type]:not([data-type="normal"]).loading,
.ui-button[data-type]:not([data-type="normal"]).loading::before {
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='M0 512a512 512 0 1 0 1024 0A512 512 0 1 0 0 512z' fill='%23fff'/%3E%3C/svg%3E"), 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='M0 512a512 512 0 1 0 1024 0A512 512 0 1 0 0 512z' fill='%23fff'/%3E%3C/svg%3E"), 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='M0 512a512 512 0 1 0 1024 0A512 512 0 1 0 0 512z' fill='%23fff'/%3E%3C/svg%3E");
}
/* IE9+ */
.ui-button.loading::before {
content: '';
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
background-repeat: no-repeat;
}
/* IE10+,:invalid伪类IE10+才支持 */
.ui-button.loading::before,
div:invalid {
width: 20px; height: 20px;
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='M512 1024q-104 0-199-40-92-39-163-110T40 711Q0 616 0 512q0-15 10.5-25.5T36 476t25.5 10.5T72 512q0 90 35 171 33 79 94 140t140 95q81 34 171 34t171-35q79-33 140-94t95-140q34-81 34-171t-35-171q-33-79-94-140t-140-95q-81-34-171-34-15 0-25.5-10.5T476 36t10.5-25.5T512 0q104 0 199 40 92 39 163 110t110 163q40 95 40 199t-40 199q-39 92-110 163T711 984q-95 40-199 40z' fill='%232a80eb'/%3E%3C/svg%3E") no-repeat center;
background-size: 20px 20px;
margin: auto;
animation: spin 1s linear infinite;
}
/* IE10+ */
.ui-button[data-type]:not([data-type="normal"]).loading::before,
div:invalid {
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='M512 1024q-104 0-199-40-92-39-163-110T40 711Q0 616 0 512q0-15 10.5-25.5T36 476t25.5 10.5T72 512q0 90 35 171 33 79 94 140t140 95q81 34 171 34t171-35q79-33 140-94t95-140q34-81 34-171t-35-171q-33-79-94-140t-140-95q-81-34-171-34-15 0-25.5-10.5T476 36t10.5-25.5T512 0q104 0 199 40 92 39 163 110t110 163q40 95 40 199t-40 199q-39 92-110 163T711 984q-95 40-199 40z' fill='%23fff'/%3E%3C/svg%3E");
}
@keyframes bubbling {
0% {
background-position-y: 18px, 18px, 18px;
}
15% {
background-position-y: 15px, 18px, 18px;
}
30% {
background-position-y: 17px, 15px, 18px;
}
45% {
background-position-y: 18px, 17px, 15px;
}
60% {
background-position-y: 18px, 18px, 17px;
}
}
@keyframes spin {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
/* error */
.ui-button.error {
border-color: #eb4646 !important;
}
@media (prefers-reduced-motion: reduce) {
.ui-button {
transition: none;
}
}
/**
*
* @Checkbox.css
* @author zhangxinxu
* @create 15-06-18
* @edit 17-06-14 focusable
**/
input[type="checkbox"]:not([ui-visible]) {
position: absolute;
opacity: 0;
width: 20px;
height: 20px;
cursor: pointer;
z-index: -1;
}
[ui-visible] + .ui-checkbox {
display: none;
}
/* 无绝对定位的模拟生成实现 */
.ui-checkbox {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 4px;
box-sizing: border-box;
box-shadow: inset 0 1px, inset 1px 0, inset -1px 0, inset 0 -1px;
background-color: #fff;
background-clip: content-box;
color: #d0d0d5;
transition: color .2s, background-color .1s;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
vertical-align: -5px;
overflow: hidden;
}
.ui-checkbox + label {
margin-left: 5px;
}
:not(:disabled) + .ui-checkbox:hover,
:disabled + .ui-checkbox {
color: #ababaf;
}
:focus + .ui-checkbox {
color: #2a80eb;
}
:focus + .ui-checkbox:hover {
color: #0057c3;
}
:checked + .ui-checkbox {
color: #2a80eb;
background-color: #2a80eb;
}
:checked:focus + .ui-checkbox,
:checked + .ui-checkbox:hover {
color: #0057c3;
background-color: #0057c3;
}
.ui-checkbox::after {
content: '';
display: block;
width: 100%; height: 100%;
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='M920.185 224.838c-33.782-33.935-88.619-33.935-122.464 0L409.955 614.564 226.231 429.952c-33.782-33.935-88.68-33.935-122.461 0-33.784 33.997-33.784 89.108 0 123.044l244.925 246.118c33.782 33.998 88.68 33.998 122.463 0l449.028-451.201c33.843-33.967 33.843-89.048-.001-123.075z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center;
background-size: 12px 12px;
visibility: hidden;
}
:checked + .ui-checkbox::after {
visibility: visible;
}
:disabled + .ui-checkbox {
opacity: .38;
}
/* error */
.error.ui-checkbox {
color: #eb4646;
}
@media (prefers-reduced-motion: reduce) {
.ui-checkbox {
transition: none;
}
}
/**
*
* @Color.css
* @author xinxuzhang
* @create 16-06-03
**/
.ui-color-input,
[type='color']:not([is-visible]) {
width: 40px; height: 40px;
margin: 0; padding: 0;
border: 0 none;
opacity: 0;
vertical-align: middle;
/* remove IE caret光标 */
text-indent: -999px;
position: relative;
z-index: -1;
}
.ui-color-track {
display: inline;
/* 重要,不会换行 */
position: absolute;
width: 40px; height: 40px;
border-radius: 4px;
background-color: rgba(25, 28, 34, 0.2);
cursor: pointer;
}
.ui-color-thumb {
display: block;
margin: 7px auto;
width: 24px; height: 24px;
border: 1px solid #f7f9fa;
border-radius: 3px;
background-color: #4c5161;
background-clip: content-box;
transition: background-color .25s;
}
.ui-color-container {
display: none;
position: absolute;
width: 241px;
padding: 10px 12px;
border-radius: 4px;
background-color: #f7f9fa;
box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
font-size: 14px;
animation: fadeIn .2s;
z-index: 21;
}
.ui-color-switch {
position: absolute;
top: 12px; right: 12px;
color: #2a80eb;
border: 1px solid transparent;
height: 20px;
line-height: 20px;
padding: 2px 5px;
border-radius: 3px;
background: none;
font-family: inherit;
transition: border-color .2s, background-color .2s;
box-sizing: content-box;
}
.ui-color-switch:hover {
background-color: #fff;
border-color: #d0d0d5;
background-color: #fff;
}
.ui-color-switch:active {
line-height: normal;
}
.ui-color-current {
padding-bottom: 20px;
}
.ui-color-current-square {
display: inline-block;
width: 20px; height: 20px;
margin-right: 5px;
border-radius: 3px;
box-shadow: inset 0 1px rgba(0, 0, 0, .25), inset 0 -1px rgba(0, 0, 0, .25), inset 1px 0 rgba(0, 0, 0, .25), inset -1px 0 rgba(0, 0, 0, .25);
background-color: currentColor;
vertical-align: middle;
}
.ui-color-current-input {
width: 72px;
border: 1px solid #d0d0d5;
background-color: #fff;
height: 20px;
line-height: 20px;
padding: 2px 5px;
border-radius: 3px;
margin-left: 5px;
font-size: 13px;
vertical-align: middle;
box-sizing: content-box;
text-transform: uppercase;
color: inherit;
}
.ui-color-body {
min-height: 100px;
}
.ui-color-basic {
overflow: hidden;
}
.ui-color-lump-group {
width: 72px;
float: left;
}
.ui-color-lump {
display: block;
width: 11px;
height: 11px;
margin: 0 1px 1px 0;
box-sizing: border-box;
background-color: currentColor;
}
.ui-color-lump:hover,
.ui-color-basic a.active {
border: 1px solid #fff;
}
.ui-color-basic-l {
width: 12px;
float: left;
overflow: hidden;
}
.ui-color-basic-r {
margin-left: 25px;
overflow: hidden;
}
.ui-color-basic-r .ui-color-lump {
float: left;
}
.ui-color-more {
display: none;
height: 100px;
}
.ui-color-more svg {
width: 100%;
height: 100%;
}
.ui-color-more-l {
width: 180px;
height: inherit;
float: left;
position: relative;
}
.ui-color-cover-white {
background-color: rgba(0, 0, 0, 0);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), #808080);
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#00808080,endcolorstr=#FF808080,gradientType=0);
cursor: crosshair;
}
.ui-color-circle {
position: absolute;
left: 0;
top: 0;
width: 16px;
height: 16px;
border: 3px solid #fff;
border-radius: 20px;
background-color: #f00;
background-clip: content-box;
-ms-transform: translate(-11px, -11px);
transform: translate(-11px, -11px);
pointer-events: none;
}
.ui-color-more-r {
height: inherit;
float: right;
padding-right: 8px;
position: relative;
}
.ui-color-more-fill {
display: block;
width: 16px;
height: 100%;
background-color: #f00;
}
.ui-color-cover-white,
.ui-color-more-cover {
position: absolute;
left: 0;
top: 0;
width: inherit;
height: 100px;
}
.ui-color-more-cover {
background-color: rgba(0, 0, 0, 0.01);
-webkit-tap-highlight-color: transparent;
}
.ui-color-more-arrow {
position: absolute;
right: 0;
top: 100%;
}
.ui-color-more-arrow::before {
content: '';
position: absolute;
right: 0;
top: -5px;
width: 0;
height: 0;
border-width: 5px 6px;
border-style: solid;
border-color: transparent;
border-right-color: #36383f;
overflow: hidden;
}
.ui-color-footer {
margin-top: 15px;
padding-bottom: 5px;
text-align: right;
}
.ui-color-button-cancel,
.ui-color-button-ensure {
display: inline-block;
width: 80px;
line-height: 20px;
padding-top: 8px;
padding-bottom: 8px;
margin-left: 15px;
border-radius: 4px;
text-align: center;
font-size: 14px;
font-family: inherit;
transition: box-shadow .2s, border-color .2s;
cursor: pointer;
}
.ui-color-button-cancel {
border: 1px solid #d0d0d5;
background-color: #fff;
color: #4c5161;
}
.ui-color-button-cancel:hover {
border-color: #ababaf;
color: #4c5161;
}
.ui-color-button-ensure {
border: 1px solid #2a80eb;
background-color: #2a80eb;
color: #fff;
}
.ui-color-button-ensure:hover {
color: #fff;
}
.ui-color-button-cancel:hover,
.ui-color-button-ensure:hover {
box-shadow: inset 0 1px 2px rgba(0,0,0,.01), inset 0 0 0 100px rgba(0,0,0,.05);
}
.ui-color-button-cancel:active,
.ui-color-button-ensure:active {
box-shadow: inset 0 1px 2px rgba(0,0,0,.1), inset 0 0 0 100px rgba(0,0,0,.1);
}
@media (prefers-reduced-motion: reduce) {
.ui-color-container {
animation: none;
}
.ui-color-thumb,
.ui-color-switch,
.ui-color-button-cancel,
.ui-color-button-ensure {
transition: none;
}
}
/**
*
* @Datalist.css
* @author zhangxinxu
* @create 16-03-29
*
**/
datalist {
display: none;
}
.ui-datalist {
display: none;
position: absolute;
animation: fadeIn .2s;
z-index: 19;
}
.ui-datalist-datalist {
max-height: 304px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
margin: 0;
padding: 0;
list-style: none;
border: 1px solid #d0d0d5;
border: 0 rgba(0, 0, 0, 0.2);
font-size: 14px;
position: relative;
overflow: auto;
overscroll-behavior: none;
-ms-scroll-chaining: none;
}
.ui-datalist-datalist::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.ui-datalist-datalist::-webkit-scrollbar-thumb {
background-color: #bbb;
border-radius: 8px;
}
.ui-datalist-datalist::-webkit-scrollbar-thumb:hover {
background-color: #aaa;
}
.ui-datalist-datalist::-webkit-scrollbar-track-piece {
background-color: #ddd;
}
.ui-datalist-option {
line-height: 20px;
padding: 9px 12px;
background-color: #fff;
transition: background-color .15s;
overflow: hidden;
cursor: pointer;
}
.ui-datalist:empty,
.ui-datalist-option:empty {
display: none;
}
.ui-datalist-option:not(.disabled):hover {
background-color: #f0f7ff;
}
.ui-datalist-datalist > .selected {
background-color: #e0f0ff;
}
.ui-datalist-datalist > .disabled {
opacity: .4;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.ui-datalist-value {
display: block;
text-overflow: ellipsis;
white-space: nowrap;
color: inherit;
overflow: hidden;
}
.ui-datalist-label {
float: right;
color: #a2a9b6;
font-size: 12px;
}
.ui-datalist-label + .ui-datalist-value {
margin-right: 60px;
}
@media (prefers-reduced-motion: reduce) {
.ui-datalist {
animation: none;
}
.ui-datalist-option {
transition: none;
}
}
/**
*
* @Date.css
* @author xinxuzhang
* @create 15-07-03
*
**/
:not([is-visible])::-webkit-clear-button,
:not([is-visible])::-webkit-inner-spin-button,
:not([is-visible])::-webkit-calendar-picker-indicator {
display: none;
}
[type="date"]:not([is-visible])::-webkit-datetime-edit-text {
color: transparent;
background: linear-gradient(#4c5161, #4c5161) no-repeat center;
background-size: 80% 1px;
}
:not([is-visible])::-webkit-datetime-edit-text,
:not([is-visible])::-webkit-datetime-edit-year-field,
:not([is-visible])::-webkit-datetime-edit-month-field,
:not([is-visible])::-webkit-datetime-edit-day-field,
:not([is-visible])::-webkit-datetime-edit-hour-field,
:not([is-visible])::-webkit-datetime-edit-minute-field,
:not([is-visible])::-webkit-datetime-edit-ampm-field {
background: none;
color: #4c5161;
}
:not([is-visible]):disabled::-webkit-datetime-edit-text,
:not([is-visible]):disabled::-webkit-datetime-edit-year-field,
:not([is-visible]):disabled::-webkit-datetime-edit-month-field,
:not([is-visible]):disabled::-webkit-datetime-edit-day-field,
:not([is-visible]):disabled::-webkit-datetime-edit-hour-field,
:not([is-visible]):disabled::-webkit-datetime-edit-minute-field,
:not([is-visible]):disabled::-webkit-datetime-edit-ampm-field {
opacity: .4;
}
:not([is-visible]):valid::-webkit-datetime-edit {
visibility: hidden;
}
.ui-date-input,
.ui-year-input,
.ui-month-input,
.ui-time-input,
.ui-date-range-input,
.ui-month-range-input {
-webkit-tap-highlight-color: transparent;
position: relative;
}
.ui-date-input > input:not([is-visible]),
.ui-year-input > input:not([is-visible]),
.ui-month-input > input:not([is-visible]),
.ui-time-input > input:not([is-visible]),
.ui-hour-input > input:not([is-visible]),
[class].ui-date-range-input > input,
[class].ui-month-range-input > input {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background: #fff;
-webkit-appearance: none;
}
.ui-input:hover > input[readonly] {
border-color: #ababaf;
}
.ui-input:active > input[readonly] {
background-color: #f7f9fa;
}
span.ui-date-input > input {
width: 125px;
}
span.ui-year-input > input,
span.ui-time-input > input {
width: 85px;
}
span.ui-month-input > input {
width: 125px;
}
span.ui-date-range-input > input {
width: 210px;
}
span.ui-month-range-input > input {
width: 170px;
}
/* Chrome-window/iOS 月份日期控件会根据系统添加中文描述,宽度不定,因此,宽度使用自动宽度 */
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
span.ui-time-input > [type="time"] {
width: auto;
/* for Safari */
max-width: 125px;
}
}
@supports not (-moz-appearance: none) {
span.ui-time-input > [type="time"] {
padding-right: 33px;
}
}
/* 这里定位改成覆盖是为了避免IE浏览器下的focus光标 */
.ui-date-arrow {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
border-right: 4px solid transparent;
cursor: pointer;
}
.ui-date-arrow::before {
content: '';
position: absolute;
width: 20px;
top: 1px; bottom: 1px; right: 0;
margin: auto;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-205 297 200 200'%3E%3Cpath d='M-59.3 365.9c-5.1-5.2-13.4-5.2-18.5 0l-27.7 28.3-27.7-28.3c-5.1-5.2-13.4-5.2-18.5 0s-5.1 13.6 0 18.9l46.2 47.1 46.2-47.1c5.1-5.2 5.1-13.6 0-18.9z' fill='%232a80eb'/%3E%3C/svg%3E") no-repeat right;
background-size: 20px 20px;
}
:disabled + .ui-date-arrow {
cursor: default;
}
:disabled + .ui-date-arrow::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-205 297 200 200'%3E%3Cpath d='M-59.3 365.9c-5.1-5.2-13.4-5.2-18.5 0l-27.7 28.3-27.7-28.3c-5.1-5.2-13.4-5.2-18.5 0s-5.1 13.6 0 18.9l46.2 47.1 46.2-47.1c5.1-5.2 5.1-13.6 0-18.9z' fill='%232a80eb' fill-opacity='0.4' /%3E%3C/svg%3E");
}
/* firefox覆盖清除按钮,以及移动端覆盖下拉箭头 */
.ui-date-arrow::before {
background-color: #fff;
transition: background-color .15s;
}
.ui-input:active .ui-date-arrow::before,
:disabled + .ui-date-arrow::before {
background-color: #f7f9fa;
}
/* 选择浮层 */
.ui-date-container {
display: inline-block;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
border: 1px solid #d0d0d5;
border-radius: 4px;
font-size: 14px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
animation: fadeIn .2s;
}
body > .ui-date-container {
display: none;
position: absolute;
z-index: 9;
}
.ui-date-container a {
text-decoration: none;
transition: background-color .2s, color .2s;
}
.ui-date-head {
padding: 5px 0 0;
overflow: hidden;
}
.ui-date-half {
width: 50%;
float: left;
}
.ui-date-prev, .ui-date-next {
width: 35px;
height: 30px;
text-align: center;
color: #b6bbc6;
fill: currentColor;
}
a.ui-date-prev:hover {
color: #2a80eb;
}
span.ui-date-prev {
color: #ccd0d7;
}
a.ui-date-next:hover {
color: #2a80eb;
}
span.ui-date-next {
color: #ccd0d7;
}
.ui-date-prev > svg,
.ui-date-next > svg {
display: block;
width: 20px;
height: 20px;
margin: 5px auto 0;
}
.ui-date-next > svg {
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.ui-date-prev {
float: left;
}
.ui-date-next {
float: right;
}
.ui-date-switch {
display: block;
line-height: 30px;
margin: 0 35px;
border-radius: 2px;
color: #4c5161;
text-align: center;
}
a.ui-date-switch:hover,
a.ui-date-item:not(.selected):hover {
color: #4c5161;
background-color: #f0f0f2;
}
.ui-minute-x,
.ui-hour-x,
.ui-year-x,
.ui-month-x,
.ui-date-x {
width: 225px;
}
.ui-minute-x[data-step="1"] {
width: 328px;
}
.ui-minute-x[data-step="2"] {
width: 276px;
}
.ui-minute-body {
padding-left: 12px;
padding-bottom: 12px;
}
.ui-hour-body {
padding: 8px 0 12px 12px;
}
.ui-year-body,
.ui-month-body,
.ui-date-body {
padding-left: 5px;
padding-right: 2px;
padding-bottom: 5px;
}
.ui-date-item {
display: inline-block;
border-radius: 2px;
text-align: center;
font-size: 13px;
color: #4c5161;
}
span.ui-date-item {
opacity: .4;
}
.ui-date-item.col0,
.ui-date-item.col6,
.ui-day-item.col0,
.ui-day-item.col6 {
color: #eb4646;
}
.ui-date-tr:last-child .ui-date-item:empty {
display: none;
}
.ui-minute-body .ui-date-item,
.ui-hour-body .ui-date-item {
width: 45px;
line-height: 26px;
margin-top: 4px;
margin-right: 7px;
}
.ui-year-body .ui-date-item,
.ui-month-body .ui-date-item {
width: 45px;
line-height: 54px;
margin-top: 5px;
margin-left: 7px;
}
.ui-date-now {
display: block;
line-height: 30px;
margin: 0 5px 5px;
text-align: center;
}
.ui-day-x {
padding: 0 2px 0 5px;
text-align: center;
}
.ui-day-item,
.ui-date-body .ui-date-item {
display: inline-block;
width: 28px;
line-height: 28px;
margin-right: 3px;
margin-top: 1px;
vertical-align: top;
}
.ui-range-x {
width: 458px;
}
.ui-range-body {
overflow: hidden;
}
.ui-range-body .ui-date-half + .ui-date-half {
border-left: 1px solid #f0f0f2;
margin-left: -1px;
}
.ui-range-footer {
padding: 5px 15px 15px;
text-align: right;
}
.ui-range-footer > .ui-button {
margin-left: 10px;
}
.ui-date-container .selected {
background-color: #2a80eb;
color: #fff;
cursor: default;
}
.ui-date-container span.selected {
opacity: .4;
}
.ui-range-body .ui-date-half {
width: 229px;
}
.ui-range-body .ui-date-body {
padding-left: 6px;
padding-right: 0;
}
.ui-range-body .ui-month-body {
margin-bottom: 15px;
}
.ui-range-date-body .selected {
width: 26px;
line-height: 26px;
border: 1px solid #2a80eb;
border-right-width: 4px;
margin-right: 0;
border-radius: 0;
}
.ui-range-body .selected.col0 {
margin-left: -6px;
border-left-width: 7px;
}
.ui-range-body .selected.col6 {
border-right-width: 10px;
}
.ui-range-body .selected.ui-date-first:not(.col0) {
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.ui-range-body .selected.ui-date-last:not(.col6) {
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
.ui-range-body .ui-date-begin,
.ui-range-body .ui-date-end {
border-radius: 0;
width: 26px;
background-color: #fff;
color: #4c5161;
}
.ui-range-body .ui-date-begin {
border-right-width: 4px;
border-left-width: 1px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.ui-range-body .ui-date-end {
margin-right: 3px;
border-right-width: 1px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
.ui-range-body .ui-date-begin:hover,
.ui-range-body .ui-date-end:hover {
background-color: #fff;
color: #4c5161;
}
.ui-range-body .ui-date-begin.col6 {
border-right-width: 0;
padding-right: 9px;
}
.ui-range-body .ui-date-begin.col0 {
border-left-width: 1px;
margin-left: 0;
}
.ui-range-body .ui-date-end.col0 {
border-left-width: 0;
padding-left: 7px;
}
.ui-range-body .ui-date-end.col6 {
border-right-width: 1px;
}
.ui-range-body .ui-date-begin.ui-date-end {
margin-right: 3px;
padding: 0;
border: 1px solid #2a80eb;
border-radius: 2px;
}
.ui-range-body .ui-date-begin + .ui-date-end {
border-left-width: 1px;
margin-right: 3px;
}
@media (prefers-reduced-motion: reduce) {
.ui-date-container {
animation: none;
}
.ui-date-arrow::before,
.ui-date-container a {
transition: none;
}
}
/**
*
* @Dialog.css
* @author zhangxinxu
* @create 15-06-18
* @edit 19-10-31
*
**/
.ui-dialog-container {
position: fixed;
left: 0; top: 0;
height: 100%;
width: 100%;
padding: 0;
border: 0;
background-color: rgba(25, 28, 34, 0.88);
text-align: center;
color: #4c5161;
font-size: 14px;
white-space: nowrap;
overflow: auto;
z-index: 19;
}
.ui-dialog-container:not([open]) {
display: none;
}
.ui-dialog-animation {
animation: fadeIn .2s both;
}
/* 多个弹框出现的时候,隐藏后面弹框的背景 */
.ui-dialog-container + .ui-dialog-container {
transition: background-color .2s;
background-color: transparent;
}
.ui-dialog-container:after {
content: '';
display: inline-block;
height: 95%;
vertical-align: middle;
}
.ui-dialog {
display: inline-block;
margin-top: 20px;
margin-bottom: 30px;
text-align: left;
min-width: 400px;
border-radius: 4px;
background-color: #f7f9fa;
vertical-align: middle;
white-space: normal;
outline: none;
position: relative;
}
.ui-dialog-animation .ui-dialog {
animation: tinydown .25s;
}
.ui-dialog-title {
margin: 0;
line-height: 30px;
padding: 15px 50px 0 25px;
font-weight: bold;
font-size: 14px;
color: #4c5161;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}
.ui-dialog-close {
position: absolute;
top: 8px; right: 7px;
width: 40px; height: 40px;
border: 0;
background: none;
transition: fill .2s;
fill: #b6bbc6;
cursor: pointer;
z-index: 1;
}
.ui-dialog-close > svg {
width: 20px;
height: 20px;
}
.ui-dialog-close:hover {
background-color: #4c5161;
background-color: rgba(0, 0, 0, 0);
fill: #4c5161;
}
.ui-dialog-body {
min-height: 60px;
padding: 10px 25px 20px;
}
.ui-dialog-title:empty ~ .ui-dialog-body {
min-height: 40px;
padding-top: 30px;
}
.ui-dialog-body:after {
content: '';
display: table;
clear: both;
}
.ui-dialog-footer {
padding: 3px 25px 25px;
margin-top: -3px;
text-align: right;
max-height: 40px;
opacity: 1;
transition: max-height .2s, opacity .2s .1s;
overflow: hidden;
}
.ui-dialog-footer:empty {
max-height: 0;
opacity: 0;
}
.ui-dialog-footer .ui-button {
margin-left: 15px;
}
.ui-dialog-footer .ui-button:first-child {
margin-left: 0;
}
.ui-dialog-stretch {
max-height: 2000px;
height: calc(100% - 50px);
}
.ui-dialog-stretch .ui-dialog-footer {
position: absolute;
left: 0;
bottom: 0;
right: 0;
}
.ui-dialog-stretch .ui-dialog-body {
position: absolute;
left: 0;
right: 0;
top: 50px;
bottom: 90px;
padding: 0 0 0 25px;
overflow: auto;
}
.ui-dialog-remind {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-105 197 400 400'%3E%3Cstyle%3E.st1%7Bfill:%23fff%7D%3C/style%3E%3Cpath d='M95.5 197.5c110.5 0 200 89.5 200 200s-89.5 200-200 200-200-89.5-200-200 89.5-200 200-200z' fill='%232a80eb'/%3E%3Cpath class='st1' d='M90.5 347.5h10c2.8 0 5 2.2 5 5v150c0 2.8-2.2 5-5 5h-10c-2.8 0-5-2.2-5-5v-150c0-2.8 2.2-5 5-5zM90.5 297.5h10c2.8 0 5 2.2 5 5v20c0 2.8-2.2 5-5 5h-10c-2.8 0-5-2.2-5-5v-20c0-2.8 2.2-5 5-5z'/%3E%3C/svg%3E"), none;
}
.ui-dialog-success {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cpath fill='%231cad70' d='M400.5 200.5c0 110.457-89.542 199.999-199.999 199.999C90.043 400.499.5 310.957.5 200.5m0 0C.5 90.042 90.043.5 200.501.5 310.958.5 400.5 90.042 400.5 200.5'/%3E%3Cpath fill='%23FFF' d='M286.398 147.132c-1.654-1.134-3.306-2.395-6.801-4.293-4.271-2.336-9.259 2.624-12.391 6.816l-77.641 102.279-47.916-63.522c-3.144-4.188-4.902-8.468-13.073-1.859-3.097 2.123.234-.361-3.969 2.881-3.884 3.064-4.105 8.598-.971 12.774 0 0 38.641 55.817 45.883 65.074 10.625 13.22 29.944 12.57 40.087 0 7.483-9.473 77.757-107.584 77.757-107.584 3.14-4.194 2.898-9.697-.965-12.566z'/%3E%3C/svg%3E"), none;
}
.ui-dialog-warning {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cpath fill='%23f59b00' d='M400.5 200.5c0 110.457-89.542 199.999-199.999 199.999C90.043 400.499.5 310.957.5 200.5m0 0C.5 90.042 90.043.5 200.501.5 310.958.5 400.5 90.042 400.5 200.5'/%3E%3Cpath fill='%23FFF' d='M195.503 100.503h10a5 5 0 0 1 5 5v150a5 5 0 0 1-5 5h-10a5 5 0 0 1-5-5v-150a5 5 0 0 1 5-5zM195.503 280.502h10a5 5 0 0 1 5 4.999v20.002a5 5 0 0 1-5 5h-10a5 5 0 0 1-5-5v-20.002a5 5 0 0 1 5-4.999z'/%3E%3C/svg%3E"), none;
}
.ui-dialog-danger {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cpath fill='%23eb4646' d='M400.5 200.5c0 110.457-89.542 199.999-199.999 199.999C90.043 400.499.5 310.957.5 200.5m0 0C.5 90.042 90.043.5 200.501.5 310.958.5 400.5 90.042 400.5 200.5'/%3E%3Cpath fill='%23FFF' d='M195.503 100.503h10a5 5 0 0 1 5 5v150a5 5 0 0 1-5 5h-10a5 5 0 0 1-5-5v-150a5 5 0 0 1 5-5zM195.503 280.502h10a5 5 0 0 1 5 4.999v20.002a5 5 0 0 1-5 5h-10a5 5 0 0 1-5-5v-20.002a5 5 0 0 1 5-4.999z'/%3E%3C/svg%3E"), none;
}
.ui-dialog-alert,
.ui-dialog-confirm {
max-width: 340px;
min-height: 40px;
padding-top: 10px;
font-size: 16px;
word-wrap: break-word;
overflow: hidden;
}
.ui-dialog-remind,
.ui-dialog-success,
.ui-dialog-warning,
.ui-dialog-danger {
padding: 20px 0 20px 60px;
background-repeat: no-repeat;
background-position: 0 10px;
background-size: 40px 40px;
}
.ui-dialog-alert > h6,
.ui-dialog-confirm > h6 {
font-size: 15px;
margin-bottom: 5px;
}
.ui-dialog-alert > :first-child:only-child,
.ui-dialog-confirm > :first-child:only-child {
margin-top: 0;
}
.ui-dialog-alert > :first-child:not(:only-child),
.ui-dialog-confirm > :first-child:not(:only-child) {
margin-top: -10px;
}
.ui-dialog-alert > h6 ~ p,
.ui-dialog-confirm > h6 ~ p {
font-size: 14px;
}
.ui-dialog-alert > p,
.ui-dialog-confirm > p {
margin: 0;
}
.ui-dialog-loading .ui-dialog-title,
.ui-dialog-loading .ui-dialog-close,
.ui-dialog-loading .ui-dialog-footer {
visibility: hidden;
}
.ui-dialog-loading .ui-dialog-body {
min-width: 400px;
}
@media screen and (max-width: 480px) {
.ui-dialog-loading .ui-dialog-body,
.ui-dialog {
min-width: 90vw;
}
.ui-dialog-remind,
.ui-dialog-success,
.ui-dialog-warning,
.ui-dialog-danger {
padding-bottom: 0;
}
.ui-dialog-container-alert .ui-dialog,
.ui-dialog-container-confirm .ui-dialog,
.ui-dialog[style*="width: auto"] {
max-width: calc(100vw - 16px);
}
}
@media (prefers-reduced-motion: reduce) {
.ui-dialog-animation,
.ui-dialog-animation .ui-dialog {
animation: none;
}
.ui-dialog-container + .ui-dialog-container,
.ui-dialog-close,
.ui-dialog-footer {
transition: none;
}
}
/**
*
* @DropList.css
* @author xinxuzhang
* @create 15-07-01
* @edit 19-10-20 sunmeiye
*
**/
.ui-droplist-x {
position: absolute;
width: 111px;
padding: 7px 0;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
border: 1px solid #d0d0d5;
border-radius: 4px;
font-size: 14px;
animation: fadeIn .2s;
z-index: 9;
}
.ui-droplist-li {
display: block;
line-height: 20px;
padding: 7px 12px 8px;
color: #4c5161;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.ui-droplist-hr {
border: 0;
border-bottom: 1px solid #d0d0d5;
margin: 7px 12px;
opacity: .4;
}
a.ui-droplist-li:hover {
color: #4c5161;
background-color: #f0f7ff;
}
a.ui-droplist-li:hover::after {
background-position: 0 -20px;
}
span.ui-droplist-li {
color: #a2a9b6;
cursor: default;
}
.ui-droplist-li[data-sublist]::before {
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
margin-top: 1px;
float: right;
}
.ui-droplist-x > .selected {
background-color: #f1f9fe;
}
.selected + .ui-droplist-xx > .ui-droplist-x {
display: block;
}
.ui-droplist-xx {
position: relative;
}
.ui-droplist-xx > .ui-droplist-x {
display: none;
left: calc(100% - 5px);
top: -35px;
}
.ui-droplist-xx > .reverse {
left: auto;
right: calc(100% - 5px);
}
.ui-droplist-arrow:empty,
.ui-droplist-arrow:not(:empty)::after,
.ui-droplist-li[data-sublist]::before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-205 197 200 400'%3E%3Cpath d='M-59.7 271.6c-4.2-4.1-11-4.1-15.3 0l-30.5 29.6-30.5-29.6c-4.2-4.1-11-4.1-15.3 0-4.2 4.1-4.2 10.7 0 14.8l38.2 37c4.2 4.1 11 4.1 15.3 0l38.2-37c4.1-4.1 4.1-10.7-.1-14.8z' fill='%23a2a9b6'/%3E%3Cpath d='M-58.7 471.6c-4.2-4.1-11-4.1-15.3 0l-30.5 29.6-30.5-29.6c-4.2-4.1-11-4.1-15.3 0-4.2 4.1-4.2 10.7 0 14.8l38.2 37c4.2 4.1 11 4.1 15.3 0l38.2-37c4.1-4.1 4.1-10.7-.1-14.8z' fill='%232a80eb'/%3E%3C/svg%3E"), none;
background-size: 20px 40px;
vertical-align: -5px;
}
a:hover .ui-droplist-arrow:empty,
.ui-droplist-arrow:not(:empty):hover::after {
background-position: 0 -20px;
}
/**
*
* @DropPanel.css
* @author xinxuzhang
* @create 15-07-01
*
**/
.ui-dropanel-x {
position: absolute;
width: 260px;
padding: 20px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
border: 1px solid #d0d0d5;
border: 0 rgba(0, 0, 0, 0.2);
font-size: 14px;
animation: fadeIn .2s;
z-index: 9;
}
.ui-dropanel-title {
line-height: 20px;
margin-top: -2px;
margin-bottom: 0;
font-size: 14px;
font-weight: bold;
}
.ui-dropanel-close {
position: absolute;
top: 3px; right: 2px;
width: 40px; height: 40px;
border: 0;
background: none;
margin: 0; padding: 0;
transition: fill .2s;
fill: #b6bbc6;
cursor: pointer;
z-index: 1;
}
.ui-dropanel-close svg {
width: 20px;
height: 20px;
}
.ui-dropanel-close:hover {
background-color: #4c5161;
fill: #4c5161;
background: none, none;
}
.ui-dropanel-content {
display: block;
min-height: 40px;
padding: 10px 0 20px;
}
.ui-dropanel-footer {
text-align: right;
}
.ui-dropanel-footer .ui-button {
margin-left: 15px;
}
.ui-dropanel-footer .ui-button:first-child {
margin-left: 0;
}
@media (prefers-reduced-motion: reduce) {
.ui-datalist-x,
.ui-dropanel-x {
animation: none;
}
.ui-dropanel-close {
transition: none;
}
}
/**
*
* @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.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;
}
}
/**
*
* @Keyboard.css
* @author zhangxinxu
* @create 17-06-13
*
**/
.ui-kbd-tips {
position: absolute;
left: -9em;
top: -9em;
font-family: consolas, "Liberation Mono", courier, monospace;
font-size: 12px;
border-radius: 2px;
color: #fff;
background: rgba(0, 0, 0, 0.75);
opacity: 0.8;
line-height: 13px;
padding: 0 3px;
z-index: 99;
}
.ui-kbd-tips kbd {
font-family: inherit;
}
.ui-outline.ui-outline {
outline: 1px dotted #2a80eb;
outline: 5px auto -webkit-focus-ring-color;
}
/**
*
* @LightTip.css
* @author xinxuzhang
* @create 15-06-25
* @edit 17-06-19
* @edit 19-09-13 @ziven27 [去jQuery]
**/
.ui-lightip {
display: none;
width: 25em;
margin: 0 auto;
border-radius: 2px;
text-align: center;
font-size: 14px;
line-height: 20px;
padding: 15px 1em;
background-color: #4c5161;
animation: fadeIn .25s both;
position: fixed;
top: 0; left: 1rem; right: 1rem;
z-index: 19;
outline: none;
cursor: default;
}
/* 显示 */
.ui-lightip[open] {
display: inline;
}
/* 成功状态 */
.ui-lightip[data-status="success"] {
background-color: #1cad70;
}
/* 失败状态 */
.ui-lightip[data-status="error"] {
background-color: #eb4646;
}
/* 修改文案 */
.ui-lightip-text {
display: inline-block;
background-repeat: no-repeat;
background-size: 20px 20px;
text-align: left;
color: #fff;
}
[data-status="success"] .ui-lightip-text {
padding-left: 23px;
margin-left: -5px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath fill='%23FFF' d='M163.038 57.226c-5.217-4.162-5.713-4.289-11.674-7.244-2.683-1.344-6.633 2.113-8.569 4.67l-52.648 67.042-34.301-43.387c-1.94-2.558-5.516-3.499-8.2-2.293-6.11 3.095-5.496 2.992-10.715 7.029-2.386 1.883-2.535 5.245-.597 7.793 0 0 36.97 46.917 41.44 52.565 6.557 8.068 18.483 7.669 24.744 0 4.62-5.781 61.117-78.506 61.117-78.506 1.937-2.559 1.788-5.918-.597-7.669z'/%3E%3C/svg%3E");
}
[data-status="error"] .ui-lightip-text {
padding-left: 23px;
margin-left: -5px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath fill='%23FFF' d='M116.153 99.999l36.484-36.486a7.369 7.369 0 0 0 0-10.423l-5.212-5.213a7.375 7.375 0 0 0-10.425 0l-36.484 36.485-36.485-36.485a7.374 7.374 0 0 0-10.424 0l-5.211 5.213a7.365 7.365 0 0 0 0 10.423L84.88 99.999l-36.483 36.485a7.369 7.369 0 0 0 0 10.426l5.211 5.213a7.38 7.38 0 0 0 10.424 0l36.485-36.486L137 152.122a7.38 7.38 0 0 0 10.425 0l5.212-5.213a7.372 7.372 0 0 0 0-10.426l-36.484-36.484z'/%3E%3C/svg%3E");
}
/* 移动端居中呈现 */
@media screen and (max-width: 640px) {
.ui-lightip {
width: auto;
top: 50%; left: 50%;
right: auto;
max-width: calc(100% - 2rem - 2em);
transform: translate(-50%, -50%);
}
}
@media (prefers-reduced-motion: reduce) {
.ui-lightip {
animation: none;
}
}
/**
*
* @Loading.css
* @author zhangxinxu
* @create 15-06-23
* @edit 19-09-24 add custom element support
*
**/
/*
* 结构如下:
*
*
*/
ui-loading,
.ui-loading {
text-align: center;
cursor: default;
/* icon offset need */
box-sizing: border-box;
}
ui-loading {
display: inline-block;
font-size: 14px;
line-height: 20px;
vertical-align: middle;
}
ui-loading[align="center"] {
position: absolute;
left: 50%; top: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
ui-loading[rows] {
display: block;
}
ui-loading:not([rows]):not([spin])::before {
display: block;
}
ui-loading:not([rows]):not([spin])::after {
display: none;
}
/* 更高高度使用style属性内容或者JS控制 */
ui-loading[rows="2"] {
height: 40px;
}
ui-loading[rows="3"] {
height: 60px;
}
ui-loading[rows="4"] {
height: 80px;
}
ui-loading[rows="5"] {
height: 100px;
}
ui-loading[rows="6"] {
height: 120px;
}
ui-loading[rows="7"] {
height: 140px;
}
ui-loading[rows="8"] {
height: 160px;
}
ui-loading[rows="9"] {
height: 180px;
}
ui-loading[rows="10"] {
height: 200px;
}
ui-loading[rows="11"] {
height: 220px;
}
ui-loading[rows="12"] {
height: 240px;
}
ui-loading[rows="13"] {
height: 260px;
}
ui-loading[rows="14"] {
height: 280px;
}
ui-loading[rows="15"] {
height: 300px;
}
ui-loading[width="100%"] {
width: 100%;
}
ui-loading[height="100%"] {
height: 100%;
}
ui-loading::after,
.ui-loading::after {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
ui-loading::before,
.ui-loading::before,
.ui-loading-before {
content: '';
display: inline-block;
width: 20px; height: 20px;
margin: 0 .5em;
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='M512 1024q-104 0-199-40-92-39-163-110T40 711Q0 616 0 512q0-15 10.5-25.5T36 476t25.5 10.5T72 512q0 90 35 171 33 79 94 140t140 95q81 34 171 34t171-35q79-33 140-94t95-140q34-81 34-171t-35-171q-33-79-94-140t-140-95q-81-34-171-34-15 0-25.5-10.5T476 36t10.5-25.5T512 0q104 0 199 40 92 39 163 110t110 163q40 95 40 199t-40 199q-39 92-110 163T711 984q-95 40-199 40z' fill='%232a80eb'/%3E%3C/svg%3E") no-repeat center;
background-size: 100%;
animation: spin 1s linear infinite;
vertical-align: -4px;
}
ui-loading[spin]::before,
.ui-loading[spin]::before {
display: none;
}
ui-loading[size="1"]::before,
.ui-loading[size="1"]::before,
[size="1"] > .ui-loading-before {
width: 10px; height: 10px;
vertical-align: 0;
}
ui-loading[size="3"]::before,
.ui-loading[size="3"]::before,
[size="3"] > .ui-loading-before {
width: 30px; height: 30px;
vertical-align: -8px;
}
ui-loading[size="4"]::before,
.ui-loading[size="4"]::before,
[size="4"] > .ui-loading-before {
width: 40px; height: 40px;
vertical-align: -12px;
}
@keyframes spin {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
/* 文本点点点 */
ui-dot {
display: inline-block;
height: 1em; line-height: 1;
text-align: left;
vertical-align: -.25em;
overflow: hidden;
}
ui-dot::before {
display: block;
content: '...\A..\A.';
white-space: pre-wrap;
animation: dot 3s infinite step-start both;
}
@keyframes dot {
33% {
transform: translateY(-2em);
}
66% {
transform: translateY(-1em);
}
}
/**
*
* @Pagination.css
* @author xinxuzhang
* @create 15-06-26 ↓7.4%
* @edit 19-09-19 zhangxinxu
*
**/
ui-pagination {
display: block;
height: 30px;
}
.ui-page {
display: inline-block;
min-width: 18px;
padding-left: 2px;
padding-right: 2px;
margin-left: 5px;
margin-right: 5px;
height: 28px;
line-height: 28px;
border: 1px solid transparent;
text-align: center;
color: #a2a9b6;
font-size: 14px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
transition: border-color .15s, background-color .15s;
vertical-align: top;
text-decoration: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
}
span.ui-page {
cursor: default;
}
a.ui-page:hover {
border-color: #b6bbc6;
color: #a2a9b6;
text-decoration: none;
}
.ui-page > svg {
width: 20px;
height: 20px;
margin-top: 3px;
}
.ui-page-prev,
.ui-page-next {
text-align: center;
fill: currentColor;
overflow: hidden;
}
/* 当前不可点的按钮颜色 */
span.ui-page-prev,
span.ui-page-next {
color: #ccd0d7;
}
.ui-page-next svg {
-ms-transform: scaleX(-1);
transform: scaleX(-1);
}
.ui-page-prev {
margin-left: 0;
}
.ui-page-next {
margin-right: 0;
}
.ui-page-ellipsis {
display: inline-block;
}
.ui-page-current {
color: #fff;
background-color: #2a80eb;
}
.ui-page-text {
color: #4c5161;
}
.ui-page.loading > svg {
visibility: hidden;
}
/* IE9+ */
.ui-page.loading::before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-repeat: no-repeat;
width: 20px;
height: 20px;
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='M512 1024q-104 0-199-40-92-39-163-110T40 711Q0 616 0 512q0-15 10.5-25.5T36 476t25.5 10.5T72 512q0 90 35 171 33 79 94 140t140 95q81 34 171 34t171-35q79-33 140-94t95-140q34-81 34-171t-35-171q-33-79-94-140t-140-95q-81-34-171-34-15 0-25.5-10.5T476 36t10.5-25.5T512 0q104 0 199 40 92 39 163 110t110 163q40 95 40 199t-40 199q-39 92-110 163T711 984q-95 40-199 40z' fill='%232a80eb'/%3E%3C/svg%3E") no-repeat center;
background-size: 20px 20px;
margin: auto;
animation: spin 1s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.ui-page {
transition: none;
}
}
/* placeholder */
::-webkit-input-placeholder {
transition: opacity .15s;
color: #a2a9b6;
line-height: inherit;
font-size: 14px;
}
:focus::-webkit-input-placeholder {
opacity: .38;
}
::-moz-placeholder {
transition: opacity .15s;
color: #a2a9b6;
font-size: 14px;
}
:focus::-moz-placeholder {
opacity: .38;
}
::placeholder {
transition: opacity .15s;
color: #a2a9b6;
font-size: 14px;
}
:focus::placeholder {
opacity: .38;
}
:-ms-input-placeholder {
transition: opacity .15s;
color: #a2a9b6 !important;
font-size: 14px;
}
:focus:-ms-input-placeholder {
opacity: .38;
}
@media (prefers-reduced-motion: reduce) {
::-webkit-input-placeholder {
transition: none;
}
:-ms-input-placeholder {
transition: none;
}
::-moz-placeholder {
transition: none;
}
::placeholder {
transition: none;
}
}
/**
*
* @Progress.css
* @author zhangxinxu
* @create 19-10-18
*
**/
.ui-progress {
display: inline-block;
width: 10em; height: .25em;
vertical-align: calc(.25em - 2px);
border: 0;
background-color: #d0d0d5;
color: #2a80eb;
border-radius: 1em;
overflow: hidden;
}
.ui-progress::-moz-progress-bar {
background-color: #2a80eb;
}
.ui-progress::-webkit-progress-bar {
background-color: #d0d0d5;
}
.ui-progress::-webkit-progress-value {
background-color: #2a80eb;
}
progress[width="100%"] {
width: 100%;
}
/* For firefox to match no [value] */
.ui-progress:indeterminate::-moz-progress-bar {
background-color: inherit;
}
/* remove IE black line */
.ui-progress::-ms-fill {
border: none;
}
/* IE9 polyfill */
.ui-progress[role] {
display: inline-block;
position: relative;
box-sizing: border-box;
}
.ui-progress[aria-valuenow]::before {
background-color: #2a80eb;
}
/* Determinate only overrides */
.ui-progress[aria-valuenow] {
background: #d0d0d5;
}
.ui-progress[aria-valuenow]::before {
content: '';
display: block;
height: 100%;
}
/**
*
* @Radio.css
* @author zhangxinxu
* @create 15-06-17
* @edit 17-06-14 focusable
**/
input[type="radio"]:not([ui-visible]) {
position: absolute;
opacity: 0;
width: 20px; height: 20px;
cursor: pointer;
z-index: -1;
}
[ui-visible] + .ui-radio {
display: none;
}
.ui-radio {
display: inline-block;
width: 20px; height: 20px;
border: 1px solid #d0d0d5;
border-radius: 50%;
background-color: #fff;
box-sizing: border-box;
vertical-align: -.5ex;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
transition: border-color .2s;
overflow: hidden;
}
.ui-radio + label {
margin-left: 5px;
}
:not(:disabled) + .ui-radio:hover {
border-color: #ababaf;
}
:focus + .ui-radio {
border-color: #2a80eb;
}
.ui-radio::before {
content: '';
display: block;
width: 10px;
height: 10px;
margin: 4px auto 0;
border-radius: 50%;
background-color: #2a80eb;
visibility: hidden;
}
:checked + .ui-radio::before {
visibility: visible;
}
:disabled + .ui-radio {
border-color: #ababaf;
opacity: .38;
}
/* error */
.error.ui-radio {
border-color: #eb4646;
}
@media (prefers-reduced-motion: reduce) {
.ui-radio {
transition: none;
}
}
/**
*
* @Range.css
* @author zhangxinxu
* @create 15-07-20
* @edit 17-06-16 keyboard support
* 19-09-23 pure theme
**/
[type="range"]:not([is-visible]),
.ui-range-input {
height: 20px;
margin: 0;
padding: 0;
touch-action: none;
visibility: hidden;
vertical-align: middle;
}
div.ui-range-input > input {
width: 100%;
visibility: hidden;
}
.ui-range-input[width="100%"] {
width: 100%;
}
.ui-range {
display: inline-block;
/* 重要,不会换行 */
/*position: absolute;*/
visibility: visible;
transition: opacity .2s;
}
.ui-range-track {
height: 4px;
margin-top: 8px;
border-radius: 4px;
background-color: #a2a9b6;
border-left: 0 solid #2a80eb;
text-align: left;
}
.ui-range-thumb {
width: 16px; height: 16px;
position: absolute;
margin: -7px 0 0 -9px;
border-radius: 20px;
background-color: #fff;
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .25);
transition: border-color .15s, background-color .15s;
cursor: pointer;
/* UE better */
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
/* 无法精确点击时候,滑杆按钮尺寸变大 */
@media (any-pointer: coarse) {
.ui-range-thumb {
width: 20px; height: 20px;
margin: -9px 0 0 -11px;
}
}
.ui-range-thumb:hover {
border-color: #ababaf;
}
.ui-range-thumb.active {
background-color: #f7f9fa;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25);
}
:disabled + .ui-range {
opacity: .38;
cursor: default;
}
/* for IE */
:disabled + .ui-range .ui-range-track {
position: relative;
}
:disabled + .ui-range .ui-range-thumb {
cursor: inherit;
}
@media (prefers-reduced-motion: reduce) {
.ui-range,
.ui-range-thumb {
transition: none;
}
}
/**
*
* @Select.css
* @author zhangxinxu(.com)
* @create 15-06-18
* @edited 19-08-27
*
**/
select {
display: inline-block;
height: 40px;
margin: 0;
border: 1px solid #d0d0d5;
/* OS X padding-right无效 */
border-right: 27px solid #d0d0d5;
opacity: 0.0001;
font-size: 14px;
font-family: simsun;
vertical-align: middle;
}
select[width="100%"] {
width: 100%;
}
select[multiple] {
height: auto;
font-size: 38px;
font-size: calc(34px - 1px);
font-family: simsun;
padding: 0;
border-right-width: 1px;
vertical-align: top;
cursor: pointer;
}
select[multiple] > option {
min-height: 38px;
height: 38px;
padding: 0;
font-size: inherit;
}
select[multiple] > option:disabled {
cursor: default;
}
select[hidden],
select[hidden] + .ui-select {
display: none;
}
select[opacity="1"],
select[opacity="100%"],
select[style*="opacity:1"],
select[style*="opacity: 1"],
select[is-visible] {
opacity: 1;
border-right-width: 1px;
}
.ui-select {
display: inline-block;
height: 40px;
line-height: 20px;
vertical-align: middle;
font-size: 14px;
transition: opacity .2s;
text-align: left;
position: relative;
}
[multiple] ~ .ui-select {
vertical-align: top;
}
.ui-select.active {
z-index: 3;
}
.ui-select-button {
display: block;
height: 20px;
padding: 9px 27px 9px 12px;
color: #4c5161;
border: 1px solid #d0d0d5;
border-radius: 4px;
background-color: #fff;
text-decoration: none;
transition: border-color .15s, background-color .15s;
cursor: pointer;
}
.ui-select-button:hover {
color: #4c5161;
border-color: #ababaf;
}
:not(:disabled) + .ui-select > .ui-select-button:active {
background-color: #f7f9fa;
}
.active > a.ui-select-button {
border-color: #2a80eb;
border-radius: 4px 4px 0 0;
}
.reverse > a.ui-select-button {
border-radius: 0 0 4px 4px;
}
.ui-select-text {
display: block;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.ui-select-icon,
.ui-select-text:only-child::after {
position: absolute;
width: 20px;
height: 20px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath fill='%232a80eb' d='M145.659 68.949a12.874 12.874 0 0 0-18.473 0L99.479 97.233 71.772 68.949a12.874 12.874 0 0 0-18.473 0c-5.099 5.208-5.099 13.648 0 18.857l46.18 47.14 46.181-47.14c5.099-5.208 5.099-13.649-.001-18.857z'/%3E%3C/svg%3E") no-repeat center;
background-size: 20px 20px;
right: 7px;
top: 10px;
}
.ui-select-text:only-child::after {
content: '';
}
.ui-select-datalist {
position: absolute;
left: 0;
right: 0;
top: 39px;
display: none;
box-sizing: border-box;
max-height: 306px;
padding: 0;
border: 1px solid #2a80eb;
background-color: #fff;
overflow: auto;
overscroll-behavior: none;
-ms-scroll-chaining: none;
}
[multiple] ~ .ui-select > .ui-select-datalist {
position: static;
display: block;
max-height: none;
height: inherit;
border-color: #d0d0d5;
border-radius: 4px;
box-sizing: border-box;
}
[multiple]:hover ~ .ui-select > .ui-select-datalist {
border-color: #ababaf;
}
[multiple]:focus ~ .ui-select > .ui-select-datalist {
border-color: #2a80eb;
}
.ui-select-datalist::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.ui-select-datalist::-webkit-scrollbar-thumb {
background-color: #bbb;
border-radius: 8px;
}
.ui-select-datalist::-webkit-scrollbar-thumb:hover {
background-color: #aaa;
}
.ui-select-datalist::-webkit-scrollbar-track-piece {
background-color: #ddd;
}
.active > .ui-select-datalist,
.ui-select-datalist.active {
display: block;
}
.reverse > .ui-select-datalist {
top: auto;
bottom: 39px;
}
.ui-select-intent {
text-indent: 1em;
}
.ui-select-datalist-li {
display: block;
line-height: 20px;
padding: 9px 12px;
color: #4c5161;
background-color: #fff;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
transition: background-color .15s;
overflow: hidden;
}
.ui-select-datalist-li[role="heading"] {
font-weight: 700;
margin: 0;
padding-bottom: 6px;
}
.ui-select-datalist-li[href] {
cursor: pointer;
}
.ui-select-datalist-li:not(:only-child):empty {
display: none;
}
.ui-select-datalist-hr:not(:first-child) {
border: 0;
border-bottom: 1px solid #d0d0d5;
margin: 7px 12px;
opacity: .38;
}
/* reset default a:hover */
.ui-select-datalist-li:hover {
color: #4c5161;
}
.ui-select-datalist > .disabled {
color: #a2a9b6;
cursor: default;
}
.ui-select-datalist > .selected {
background-color: #e0f0ff;
}
.ui-select-datalist-li[href]:hover,
[multiple] ~ .ui-select .ui-select-datalist-li[href] {
color: #4c5161;
background-color: #f0f7ff;
}
/* disabled */
select:disabled {
cursor: default;
}
select:disabled + .ui-select {
opacity: .38;
}
select:disabled + .ui-select .ui-select-button,
select:disabled + .ui-select .ui-select-datalist {
cursor: default;
border-color: #ababaf;
}
/* error */
.error .ui-select-button,
.error[multiple] ~ .ui-select .ui-select-datalist,
select.error {
border-color: #eb4646;
}
@media (prefers-reduced-motion: reduce) {
.ui-select,
.ui-select-button,
.ui-select-datalist-li {
transition: none;
}
}
/**
*
* @Switch.css
* @author zhangxinxu
* @create 15-06-18
* @edit 17-06-14 keyboard accessible
**/
.ui-switch {
display: inline-block;
width: 44px; height: 26px;
border: 2px solid;
border-radius: 26px;
background-color: currentColor;
box-sizing: border-box;
color: #b6bbc6;
font-size: 0;
transition: all .2s;
cursor: pointer;
/* UE better */
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.ui-switch::before {
content: '';
display: block;
width: 22px; height: 22px;
border-radius: 50%;
background-color: #fff;
transition: margin-left .2s;
}
:active + .ui-switch::before {
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1);
}
:checked + .ui-switch {
color: #2a80eb;
}
:checked + .ui-switch::before {
margin-left: 18px;
}
:disabled + .ui-switch {
opacity: .38;
cursor: default;
}
:focus + .ui-switch,
.ui-switch:hover {
color: #a2a9b6;
}
:checked:focus + .ui-switch,
:checked + .ui-switch:hover {
color: #0057c3;
}
:disabled + .ui-switch:hover {
color: #b6bbc6;
}
:checked:disabled + .ui-switch:hover {
color: #2a80eb;
}
@media (prefers-reduced-motion: reduce) {
.ui-switch,
.ui-switch::before {
transition: none;
}
}
/**
*
* @Tab.css
* @author xinxuzhang
* @create 15-06-12
*/
/* tabs */
.ui-tab-tabs {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #d0d0d5;
position: relative;
}
.ui-tab-tab {
float: left;
margin-right: 50px;
font-size: 16px;
text-align: center;
color: #4c5161;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.ui-tab-tab a {
display: block;
color: #4c5161;
}
.ui-tab-tab:hover,
.ui-tab-tab:hover a {
color: #2a80eb;
}
.ui-tab-tabs .active,
.ui-tab-tabs .active a,
.ui-tab-tabs .active:hover {
line-height: 36px;
padding-top: 2px;
margin-bottom: -1px;
border-bottom: 3px solid;
color: #2a80eb;
cursor: default;
}
.ui-tab-line {
display: none;
position: absolute;
bottom: -1px;
left: 0;
width: 0;
border-bottom: 3px solid #2a80eb;
transition: .35s;
}
.ui-tab-tabs > .ui-tab-line ~ .ui-tab-tab {
line-height: 40px;
padding-top: 0;
margin-bottom: 0;
border-bottom: 0;
}
/* contents */
.ui-tab-contents {
margin-top: 30px;
}
/* 有role属性表示JS已经介入了初始化,锚点hash显示功能去除 */
.ui-tab-content[role]:not(.active),
.ui-tab-content:not([role]):not(:target) {
display: none;
}
.ui-tab-contents:target-within .ui-tab-content:not(:target) {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.ui-tab-line {
transition: none;
}
}
/**
*
* @Table.css
* @author xinxuzhang
* @create 15-06-24
*
**/
.ui-table {
width: 100%;
line-height: 21px;
table-layout: fixed;
border-spacing: 0;
border-collapse: collapse\9;
font-size: 14px;
border: 1px solid #d0d0d5;
}
.ui-table thead td,
.ui-table th {
background-color: #f7f9fa;
border-bottom: 1px solid #ededed;
font-weight: normal;
font-style: normal;
margin: 0;
}
.ui-table thead td:not([class]):not([align]),
.ui-table th:not([class]):not([align]) {
text-align: left;
}
.ui-table tbody td {
background-color: #fff;
border-bottom: 1px solid #ededed;
}
.ui-table td,
.ui-table th {
padding-top: 14px;
padding-bottom: 14px;
padding-right: 20px;
}
.ui-table td:first-child,
.ui-table th:first-child {
padding-left: 20px;
}
.ui-table tr {
cursor: default;
}
.ui-table tr:last-child td {
padding-bottom: 15px;
border-bottom: 0;
}
.ui-table ~ .ui-loading {
height: 300px;
}
/**
*
* @Textarea.css
* @author xinxuzhang
* @create 15-06-17
**/
textarea {
font-family: inherit;
}
textarea.ui-textarea,
.ui-textarea > textarea {
line-height: 20px;
padding: 9px 8px;
border: 1px solid #d0d0d5;
border-radius: 4px;
background-color: #fff;
outline: none;
color: #4c5161;
font-size: 14px;
transition: border-color .15s, background-color .15s;
word-break: break-all;
vertical-align: top;
box-sizing: border-box;
resize: none;
overflow: auto;
}
textarea[resize] {
resize: both;
}
textarea[resize="vertical"] {
resize: vertical;
}
textarea[resize="horizontal"] {
resize: horizontal;
}
div.ui-textarea > textarea {
width: 100%;
}
/* hover */
.ui-textarea:hover,
.ui-textarea > textarea:hover {
border-color: #ababaf;
}
/* focus */
.ui-textarea:focus,
.ui-textarea > textarea:focus {
border-color: #2a80eb;
}
/* textarea with count */
.ui-textarea-x {
position: relative;
padding: 2px 9px 32px 3px;
border-radius: 4px;
box-sizing: border-box;
overflow: hidden;
}
.ui-textarea-x > textarea {
display: block;
width: 100%;
line-height: 20px;
border: 0 none;
padding: 7px 0 9px;
right: -6px;
color: #4c5161;
font-size: 14px;
outline: none;
background: none;
word-break: break-all;
overflow: auto;
resize: none;
position: relative;
z-index: 1;
}
.ui-textarea-x > .ui-textarea {
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-textarea-x .ui-textarea-count {
position: absolute;
left: 8px; right: 10px; bottom: 0;
line-height: 32px;
color: #a2a9b6;
font-size: 12px;
text-align: right;
z-index: 1;
}
.ui-textarea-count slash {
margin: 0 1px;
}
.ui-textarea-x:hover > .ui-textarea {
border-color: #ababaf;
}
.ui-textarea-x > textarea:focus ~ .ui-textarea {
border-color: #2a80eb;
}
.ui-textarea-x .ui-placeholder {
padding: 7px !important;
z-index: 1;
}
/* resize */
.ui-textarea-resize {
width: 17px; height: 17px;
position: absolute;
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='M765.558 510.004a93.65 93.65 0 1 0 191.665 0 93.65 93.65 0 1 0-191.665 0zM765.558 821.46a93.65 93.65 0 1 0 191.665 0 93.65 93.65 0 1 0-191.665 0zM422.15700000000004 821.46a93.65 93.65 0 1 0 191.665 0 93.65 93.65 0 1 0-191.665 0zM422.15700000000004 510.004a93.65 93.65 0 1 0 191.665 0 93.65 93.65 0 1 0-191.665 0zM765.558 202.54a93.65 93.65 0 1 0 191.665 0 93.65 93.65 0 1 0-191.665 0zM66.77700000000002 821.46a93.65 93.65 0 1 0 191.665 0 93.65 93.65 0 1 0-191.665 0z' fill='%23BFBFBF'/%3E%3C/svg%3E") no-repeat 100% 100%;
background-size: 100%;
}
/* disabled */
.ui-textarea:disabled,
.ui-textarea > textarea:disabled,
.ui-textarea[readonly],
.ui-textarea > textarea[readonly],
.ui-textarea-x > textarea:disabled ~ .ui-textarea,
.ui-textarea-x > textarea[readonly] ~ .ui-textarea {
background-color: #f7f9fa;
}
.ui-textarea[readonly],
.ui-textarea > textarea[readonly],
.ui-textarea-x > [readonly] ~ .ui-textarea {
background-color: #fff;
}
.ui-textarea:disabled:hover,
.ui-textarea > textarea:disabled:hover,
.ui-textarea[readonly]:hover,
.ui-textarea > textarea[readonly]:hover,
.ui-textarea[readonly]:focus,
.ui-textarea > textarea[readonly]:focus {
border-color: #d0d0d5;
}
textarea[readonly],
textarea:disabled {
resize: none;
}
/* error */
.ui-textarea.error,
.ui-textarea > .error {
border-color: #eb4646 !important;
}
.ui-textarea-count > .error,
.ui-textarea-count.error {
color: #eb4646;
}
@media (prefers-reduced-motion: reduce) {
textarea.ui-textarea,
.ui-textarea > textarea,
.ui-textarea-x > .ui-textarea {
transition: none;
}
}
/**
*
* @Tips.css
* @author xinxuzhang
* @create 15-06-25
*
**/
.ui-tips[data-title] {
text-indent: 0;
position: relative;
overflow: visible;
}
.ui-tips[data-title]::before,
.ui-tips[data-title]::after {
position: absolute;
left: 50%;
-ms-pointer-events: none;
pointer-events: none;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
visibility: hidden;
}
.ui-tips[data-title]::before {
content: attr(data-title);
bottom: calc(100% + 12px);
max-width: 250px;
padding: 6px 10px;
line-height: 18px;
border-radius: 3px;
background-color: #373c42;
text-align: left;
color: #fff;
font-size: 12px;
font-style: normal;
white-space: nowrap;
}
.ui-tips[data-title]::after {
content: '';
border: 6px solid transparent;
border-top-color: #373c42;
bottom: 100%;
}
.ui-tips[data-title]:hover::before,
.ui-tips[data-title]:hover::after,
.ui-tips[data-title]:focus::before,
.ui-tips[data-title]:focus::after {
transition: visibility .1s .1s;
visibility: visible;
}
.ui-tips[data-title]:hover {
outline: none;
}
/* 朝下的情况 */
.reverse.ui-tips[data-title]::before,
[reverse].ui-tips[data-title]::before {
bottom: auto;
top: calc(100% + 12px);
}
.reverse.ui-tips[data-title]::after,
[reverse].ui-tips[data-title]::after {
border-color: transparent transparent #373c42;
bottom: auto;
top: 100%;
}
/* JS生成的,和CSS定位样式不合并,保持独立 */
.ui-tips-x {
text-align: center;
position: absolute;
z-index: 99;
}
.ui-tips-content {
display: block;
max-width: 20em;
padding: 6px 10px;
line-height: 18px;
border-radius: 3px;
background-color: #373c42;
color: #fff;
font-size: 12px;
font-style: normal;
text-align: left;
}
.ui-tips-arrow {
position: absolute;
top: 100%;
left: calc(50% - 6px);
border: 6px solid transparent;
border-top-color: #373c42;
}
@media (any-hover: none) {
html {
--hoverNone: 'true';
}
}
/* 左右箭头方向展示的tips效果 */
.ui-tips-x[data-direction="top"] {
margin-top: -12px;
}
.ui-tips-x[data-direction="left"] {
margin-left: -12px;
}
.ui-tips-x[data-direction="right"] {
margin-left: 12px;
}
.ui-tips-x[data-direction="bottom"] {
margin-top: 12px;
}
[data-direction="bottom"] .ui-tips-arrow {
top: -12px;
border-color: transparent transparent #373c42;
}
[data-direction="left"] .ui-tips-arrow,
[data-direction="right"] .ui-tips-arrow {
top: calc(50% - 6px);
}
[data-direction="left"] .ui-tips-arrow {
left: 100%;
border-color: transparent transparent transparent #373c42;
}
[data-direction="right"] .ui-tips-arrow {
left: -12px;
border-color: transparent #373c42 transparent transparent;
}
[data-align="8-6"] .ui-tips-content,
[data-align="6-8"] .ui-tips-content {
max-width: 600px;
}
[data-align="2-3"] .ui-tips-content,
[data-align="3-2"] .ui-tips-content {
position: relative;
left: 10px;
}
[data-align="1-4"] .ui-tips-content,
[data-align="4-1"] .ui-tips-content {
position: relative;
left: -10px;
}
/* 错误提示的tips效果 */
.ui-tips-error:not(.none) {
animation: fadeIn .2s, fallDown .2s;
}
.ui-tips-error .ui-tips-content {
background-color: #eb4646;
}
.ui-tips-error .ui-tips-arrow {
border-top-color: #eb4646;
}
/**
*
* @Table.css
* @author zhangxinxu
* @edit 17-10-18 从原Table.css中分离出来
*
**/
/* table shadow */
.table-x {
background-color: #fff;
border: 1px solid #d0d0d5;
}
.table-x table {
border: 0;
}
/* table without data */
.table-null-x,
.table-error-x {
height: 300px;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.table-error-x {
line-height: 300px;
}
.table-null {
display: inline-block;
vertical-align: middle;
}
.table-null-x::after {
content: '';
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
.table-null-x:empty::before {
content: '暂无数据';
}
.table-error-x:empty::before {
content: '数据获取失败';
}
/* 列表分页 */
.table-page-x {
padding: 10px 10px 10px 20px;
margin-top: -1px;
border-top: 1px solid #ededed;
background-color: #f7f9fa;
position: relative;
overflow: hidden;
}
@media screen and (max-width: 640px) {
.table-page-x {
padding-left: 10px;
padding-right: 5px;
}
}
.table-page-data {
float: left;
line-height: 20px;
padding-top: 5px;
font-size: 14px;
}
.table-page-total {
margin: 0 3px;
}
.table-page-per {
display: inline-block;
margin-left: 5px;
cursor: pointer;
}
.table-page-per::after {
content: '';
display: inline-block;
width: 20px; height: 20px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-205 197 200 400'%3E%3Cpath d='M-59.7 271.6c-4.2-4.1-11-4.1-15.3 0l-30.5 29.6-30.5-29.6c-4.2-4.1-11-4.1-15.3 0-4.2 4.1-4.2 10.7 0 14.8l38.2 37c4.2 4.1 11 4.1 15.3 0l38.2-37c4.1-4.1 4.1-10.7-.1-14.8z' fill='%23a2a9b6'/%3E%3Cpath d='M-58.7 471.6c-4.2-4.1-11-4.1-15.3 0l-30.5 29.6-30.5-29.6c-4.2-4.1-11-4.1-15.3 0-4.2 4.1-4.2 10.7 0 14.8l38.2 37c4.2 4.1 11 4.1 15.3 0l38.2-37c4.1-4.1 4.1-10.7-.1-14.8z' fill='%232a80eb'/%3E%3C/svg%3E") no-repeat;
background-size: 20px 40px;
vertical-align: -5px;
}
.table-page-per:hover::after {
color: #2a80eb;
background-position: 0 -20px;
}
.table-page {
float: right;
padding-top: 2px;
}
.table-checkbox td:first-child,
.table-checkbox th:first-child {
width: 20px;
padding-right: 0;
padding-left: 18px;
text-align: right;
}
.table-checkbox td:first-child + td,
.table-checkbox th:first-child + th {
padding-left: 13px;
}
.table-checkbox tr:hover td {
background-color: #f0f7ff;
}
.table-checkbox tr.selected td {
background-color: #e0f0ff;
}
/* 表格头部操作,搜索,或者大标题 */
.table-header {
padding: 12px 20px;
border-bottom: 1px solid #ededed;
}
.table-title {
line-height: 56px;
font-size: 24px;
margin: 0;
}