yu.css.ui
Version:
纯CSS通用UI模块和组件
426 lines (419 loc) • 12.9 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-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-select {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
position: relative; }
.yu-select input {
transition: all ease .4s; }
.yu-select input + span.suffix > i.icon-angle-down {
transition: all ease .4s; }
.yu-select input:hover {
cursor: pointer; }
.yu-select input:focus:not([readonly]) {
border: 1px solid #409EFF; }
.yu-select input:focus:not([readonly]) + span.suffix > i.icon-angle-down {
transform: rotate(-180deg); }
.yu-select .transition {
transform: scaleY(0);
opacity: 0;
transform-origin: center top;
transition: transform .3s ease, opacity .3s ease; }
.yu-select .transition.transition-enter {
transform: scaleY(1);
opacity: 1; }
.yu-select .transition.transition-leave {
transform: scaleY(0);
opacity: 0; }
.yu-select.prepend {
display: inline-block;
vertical-align: top;
margin: 0; }
.yu-select.prepend > .yu-input {
margin: 0; }
.yu-select.prepend > .yu-input > input {
border-radius: 4px 0 0 4px; }
.yu-select.append {
display: inline-block;
vertical-align: top; }
.yu-select.append > .yu-input {
margin: 0; }
.yu-select.append > .yu-input > input {
border-radius: 0 4px 4px 0; }
.yu-select > .yu-option {
margin-top: 8px;
position: absolute;
top: 30px;
z-index: 1000; }
.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-pagination {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
font-size: 14px; }
.yu-pagination > ul {
padding-inline-start: 0;
padding: 0;
display: inline-block;
user-select: none; }
.yu-pagination > ul > li {
list-style: none; }
.yu-pagination > ul > li {
font-size: 14px;
padding: 0 12px;
display: inline-block;
height: 32px;
line-height: 32px;
cursor: pointer;
color: #606266;
transition: all 0.4s; }
.yu-pagination > ul > li:hover:not(.disabled) {
color: #409EFF; }
.yu-pagination > ul > li.disabled {
cursor: not-allowed;
background-color: #fff;
color: #C0C4CC; }
.yu-pagination > ul > li.more span {
display: inline; }
.yu-pagination > ul > li.more i {
display: none; }
.yu-pagination > ul > li.more:hover i {
display: inline-block; }
.yu-pagination > ul > li.more:hover span {
display: none; }
.yu-pagination > ul > li.current {
cursor: default;
background-color: #409EFF;
border-radius: 4px;
color: #fff; }
.yu-pagination.border > ul > li {
background-color: #fff;
margin-right: 8px;
border-radius: 4px;
border: 1px solid #E4E7ED; }
.yu-pagination.border > ul > li:hover:not(.disabled) {
color: #409EFF;
border-color: #409EFF; }
.yu-pagination.border > ul > li.current {
background-color: #409EFF;
border-color: #409EFF;
color: white; }
.yu-pagination > span {
margin-right: 8px; }
.yu-pagination > label {
margin-right: 8px; }
.yu-pagination > .yu-select.page-size {
display: inline-block; }
.yu-pagination > .yu-select.page-size input {
width: 100px; }
.yu-pagination > .yu-select.page-size .yu-option {
width: 100px; }
.yu-pagination > .yu-input.goto {
display: inline-block; }
.yu-pagination > .yu-input.goto input {
width: 50px; }