yu.css.ui
Version:
纯CSS通用UI模块和组件
76 lines (75 loc) • 2.58 kB
CSS
.yu-slider {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
margin: 0 8px 14px 0; }
.yu-slider.disabled > .bottom-bar > .top-bar {
background-color: #c5c7ca; }
.yu-slider.disabled > .bottom-bar > .top-bar > .circle {
border-color: #c5c7ca; }
.yu-slider > .bottom-bar {
position: relative;
width: 100%;
height: 4px;
border-radius: 2px;
background-color: #E4E7ED; }
.yu-slider > .bottom-bar > .top-bar {
height: 4px;
border-radius: 2px;
background-color: #409EFF; }
.yu-slider > .bottom-bar > .top-bar > .circle {
transform: translateX(-8px);
position: absolute;
top: -6px;
box-sizing: border-box;
line-height: 14px;
vertical-align: middle;
display: inline-block;
width: 14px;
height: 14px;
background-color: #fff;
border: 2px solid #409EFF;
border-radius: 14px; }
.yu-slider > .bottom-bar > .top-bar > .circle > .tooltip {
box-sizing: content-box;
position: absolute;
top: -36px;
height: 20px;
padding: 2px 7px;
line-height: 20px;
background: #373737;
border-radius: 4px;
color: #fff;
font-size: 14px;
margin-left: -12px;
text-align: center;
min-width: 20px;
display: none; }
.yu-slider > .bottom-bar > .top-bar > .circle > .tooltip:after {
content: '';
display: inline-block;
height: 8px;
width: 8px;
background-color: #373737;
position: absolute;
bottom: -4px;
left: 14px;
transform: rotate(45deg); }
.yu-slider > .bottom-bar > .top-bar > .circle.hover {
width: 16px;
height: 16px; }
.yu-slider > .bottom-bar > .top-bar > .circle.hover > .tooltip {
display: inline-block; }
.yu-slider > .bottom-bar > .top-bar > .circle:hover {
width: 16px;
height: 16px; }
.yu-slider > .bottom-bar > .top-bar > .circle:hover > .tooltip {
display: inline-block; }
.yu-slider > .bottom-bar > .top-bar > .point {
position: absolute;
width: 4px;
height: 4px;
background-color: #fff;
border-radius: 2px; }
.yu-slider > .bottom-bar:hover {
cursor: pointer; }
.yu-slider input {
display: none; }