yu.css.ui
Version:
纯CSS通用UI模块和组件
241 lines (237 loc) • 7.87 kB
CSS
.yu-option {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
background-color: #fff;
min-width: 175px;
border: 1px solid #E4E7ED;
border-radius: 4px;
color: #606266;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
display: inline-block;
padding-inline-start: 0;
padding: 0; }
.yu-option > li {
list-style: none; }
.yu-option.overflow {
overflow: auto;
max-height: 175px; }
.yu-option > li {
box-sizing: border-box;
font-size: 14px;
padding: 8px 14px; }
.yu-option > li:hover:not(.disabled) {
background-color: #f5f5f9; }
.yu-option > li.active {
background-color: #f5f5f9;
font-weight: bold;
color: #409EFF; }
.yu-option > li.hide {
display: none; }
.yu-option > li.disabled {
color: #C0C4CC;
cursor: not-allowed; }
.yu-input {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
position: relative;
display: block;
margin: 0 8px 14px 0;
font-size: 0; }
.yu-input .transition {
transform: scaleY(0);
opacity: 0;
transform-origin: center top;
transition: transform .3s ease, opacity .3s ease; }
.yu-input .transition.transition-enter {
transform: scaleY(1);
opacity: 1; }
.yu-input .transition.transition-leave {
transform: scaleY(0);
opacity: 0; }
.yu-input > input {
width: 175px;
padding: 4px 14px;
outline: none;
font-size: 14px;
color: #606266;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
box-sizing: border-box;
height: 32px;
border: 1px solid #E4E7ED;
border-radius: 4px;
transition: all ease 0.4s; }
.yu-input > input::placeholder {
color: #C0C4CC; }
.yu-input > input:hover {
border: 1px solid #C0C4CC; }
.yu-input > input:focus {
border: 1px solid #409EFF; }
.yu-input > input.prefix {
padding-left: 32px; }
.yu-input > input.suffix {
padding-right: 32px; }
.yu-input > input.large {
height: 40px; }
.yu-input > input.small {
height: 24px; }
.yu-input > input.full {
width: 100%; }
.yu-input.textarea {
height: auto; }
.yu-input.disabled > input {
color: #C0C4CC;
background-color: #f5f5f9; }
.yu-input.disabled > input:hover {
border: 1px solid #E4E7ED;
cursor: not-allowed; }
.yu-input.disabled > input:focus {
border: 1px solid #E4E7ED; }
.yu-input > span.prefix {
position: relative;
color: #C0C4CC; }
.yu-input > span.prefix > i {
position: absolute;
left: 10px;
top: -14px; }
.yu-input > span.suffix {
position: relative;
color: #C0C4CC; }
.yu-input > span.suffix > i {
position: absolute;
left: -25px;
top: -14px; }
.yu-input > span.suffix.clearable > i {
transition: color .1s;
cursor: pointer; }
.yu-input > span.suffix.clearable > i:hover {
color: #909399; }
.yu-input > textarea {
padding: 8px;
border-color: #E4E7ED;
border-radius: 4px;
font-size: 14px;
outline: none;
box-sizing: border-box;
transition: all ease .4s; }
.yu-input > textarea:hover {
border: 1px solid #C0C4CC; }
.yu-input > textarea:focus {
border: 1px solid #409EFF; }
.yu-input > textarea::placeholder {
color: #DCDFE6;
font-weight: lighter; }
.yu-input > input.append {
border-radius: 4px 0 0 4px; }
.yu-input > input.prepend {
border-radius: 0 4px 4px 0; }
.yu-input > input.number {
padding-right: 0; }
.yu-input > .yu-button.prepend {
margin: 0;
border-radius: 4px 0 0 4px;
vertical-align: top; }
.yu-input > .yu-button.append {
margin: 0;
border-radius: 0 4px 4px 0;
vertical-align: top; }
.yu-input > .yu-option {
margin-top: 8px;
position: absolute;
top: 30px;
left: 0;
z-index: 1000; }
.yu-date-picker-option {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
display: inline-block;
width: 330px;
background-color: #fff;
border: 1px solid #E4E7ED;
padding: 14px;
border-radius: 4px;
color: #606266;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); }
.yu-date-picker-option > .head {
text-align: center; }
.yu-date-picker-option > .head > a {
display: inline-block;
padding: 8px; }
.yu-date-picker-option > .head > a:hover {
color: #409EFF;
cursor: pointer; }
.yu-date-picker-option > .head > div {
display: inline-block;
padding: 8px;
font-size: 14px; }
.yu-date-picker-option > .head > div > span:hover {
color: #409EFF;
cursor: pointer; }
.yu-date-picker-option > .head > .left {
float: left; }
.yu-date-picker-option > .head > .right {
float: right; }
.yu-date-picker-option > table.date {
width: 100%;
margin: 0 auto; }
.yu-date-picker-option > table.date > thead > tr > th {
border-bottom: 1px solid #E4E7ED;
font-size: 14px;
width: 40px;
height: 40px;
font-weight: normal;
color: #606266; }
.yu-date-picker-option > table.date > tbody > tr td {
text-align: center;
font-size: 14px;
width: 40px;
height: 40px;
font-weight: normal;
color: #606266;
vertical-align: middle; }
.yu-date-picker-option > table.date > tbody > tr td:hover:not(.other-month):not(.disabled) {
color: #409EFF;
cursor: pointer; }
.yu-date-picker-option > table.date > tbody > tr td.other-month {
color: #C0C4CC; }
.yu-date-picker-option > table.date > tbody > tr td.current-day {
color: #409EFF;
font-weight: bold; }
.yu-date-picker-option > table.date > tbody > tr td.active:not(.disabled) > div {
display: inline-block;
text-align: center;
line-height: 24px;
width: 24px;
height: 24px;
background-color: #409EFF;
border-radius: 100%;
color: #fff; }
.yu-date-picker-option > table.date > tbody > tr td.disabled {
color: #C0C4CC;
cursor: not-allowed; }
.yu-date-picker-option > table.date.month > tbody > tr td, .yu-date-picker-option > table.date.year > tbody > tr td {
width: 80px;
height: 60px; }
.yu-date-picker-option > table.date.month > tbody > tr td.active:not(.disabled) > div, .yu-date-picker-option > table.date.year > tbody > tr td.active:not(.disabled) > div {
width: 80px;
height: 60px;
border-radius: 0;
background-color: #fff;
line-height: 60px;
font-weight: bold;
color: #409EFF; }
.yu-date-picker-option > table.date.month > tbody > tr td.disabled, .yu-date-picker-option > table.date.year > tbody > tr td.disabled {
color: #C0C4CC;
cursor: not-allowed; }
.yu-date-picker {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif; }
.yu-date-picker .transition {
transform: scaleY(0);
opacity: 0;
transform-origin: center top;
transition: transform .3s ease, opacity .3s ease; }
.yu-date-picker .transition.transition-enter {
transform: scaleY(1);
opacity: 1; }
.yu-date-picker .transition.transition-leave {
transform: scaleY(0);
opacity: 0; }
.yu-date-picker > .yu-date-picker-option {
position: absolute;
z-index: 1000; }