@mdsfe/mds-ui
Version:
A set of enterprise-class Vue UI components.
81 lines (80 loc) • 1.83 kB
CSS
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
/* stylelint-disable declaration-bang-space-before */
/* stylelint-disable declaration-bang-space-before */
.mds-slider-wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.mds-slider-input {
margin-left: 30px;
}
.mds-slider-bar {
cursor: pointer;
width: 100%;
height: 4px;
border-radius: 4px;
background: rgba(0, 0, 0, 0.09);
position: relative;
}
.mds-slider-progress {
height: 100%;
border-radius: 4px;
background: #0364ff;
}
.mds-slider-button {
position: absolute;
z-index: 2;
bottom: 50%;
transform: translate(-50%, 50%);
width: 7px;
height: 7px;
box-sizing: content-box;
border-radius: 7px;
background: #0364ff;
border: 3px #fff solid;
box-shadow: 0px 2px 4px 0px rgba(96, 97, 112, 0.16), 0px 0px 1px 0px rgba(40, 41, 61, 0.04);
}
.mds-slider-scale {
position: absolute;
z-index: 1;
top: 50%;
transform: translate(-50%, -50%);
width: 4px;
height: 4px;
box-sizing: content-box;
border-radius: 7px;
background: #0364ff;
border: 2px #fff solid;
}
.vertical.mds-slider-wrapper {
height: 100%;
}
.vertical .mds-slider-bar {
position: relative;
height: 100%;
width: 4px;
display: flex;
align-items: flex-end;
}
.vertical .mds-slider-progress {
width: 100%;
}
.vertical .mds-slider-button {
left: 50%;
}
.vertical .mds-slider-scale {
left: 50%;
}
.disable .mds-slider-bar {
cursor: not-allowed;
}
.disable .mds-slider-progress {
background: rgba(0, 0, 0, 0.25);
}
.disable .mds-slider-button {
background: #b2b2b2;
}
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
/* stylelint-disable declaration-bang-space-before */
/* stylelint-disable declaration-bang-space-before */