yu.css.ui
Version:
纯CSS通用UI模块和组件
82 lines (81 loc) • 3.04 kB
CSS
.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; }