naive-ui/styles/Slider.scss

151 lines
4.2 KiB
SCSS

@import './mixins/mixins.scss';
@import './themes/vars.scss';
@include themes-mixin {
@include b(slider) {
@include once {
display: block;
padding: 5px 0;
position: relative;
z-index: 0;
width: calc(100% - 14px);
margin-left: 7px;
margin-right: 7px;
cursor: pointer;
@include b(slider-marks) {
position: absolute;
top: 14px;
left: 0;
right: 0;
@include b(slider-mark) {
position: absolute;
transform: translateX(-50%);
}
}
@include m(with-mark) {
width: calc(100% - 24px);
margin: 8px 12px 32px 12px;
}
}
&:hover {
@include b(slider-rail) {
background-color: map-get($--slider-rail-background-color, 'hover');
@include e(fill) {
background-color: map-get($--slider-rail-fill-background-color, 'hover');
}
@include b(slider-dots) {
@include b(slider-dot) {
box-shadow: map-get($--slider-dot-box-shadow, 'active');
}
}
}
@include b(slider-handle) {
box-shadow: map-get($--slider-handle-box-shadow, 'hover');
}
}
@include m(active) {
@include b(slider-rail) {
background-color: map-get($--slider-rail-background-color, 'hover');
@include e(fill) {
background-color: map-get($--slider-rail-fill-background-color, 'hover');
}
@include b(slider-dots) {
@include b(slider-dot) {
box-shadow: map-get($--slider-dot-box-shadow, 'active');
}
}
}
@include b(slider-handle) {
box-shadow: map-get($--slider-handle-box-shadow, 'hover');
}
}
@include b(slider-rail) {
@include once {
width: 100%;
position: relative;
}
height: $--slider-rail-height;
background-color: map-get($--slider-rail-background-color, 'default');
transition: background-color .2s $default-cubic-bezier;
border-radius: $--slider-rail-height / 2;
@include e(fill) {
@include once {
position: absolute;
top: 0;
bottom: 0;
border-radius: $--slider-rail-height / 2;
transition: background-color .3s $default-cubic-bezier;
}
background-color: map-get($--slider-rail-fill-background-color, 'default');
}
}
@include b(slider-handle) {
@include once {
outline: none;
height: $--slider-handle-size;
width: $--slider-handle-size;
border-radius: $--slider-handle-size / 2;
transition: box-shadow .2s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
position: absolute;
top: 0;
transform: translateX(-50%);
overflow: hidden;
cursor: pointer;
}
background-color: $--slider-handle-background-color;
box-shadow: map-get($--slider-handle-box-shadow, 'default');
&:hover {
box-shadow: map-get($--slider-handle-box-shadow, 'hover');
}
&:hover:focus {
box-shadow: map-get($--slider-handle-box-shadow, 'active');
}
&:focus {
box-shadow: map-get($--slider-handle-box-shadow, 'focus');
}
}
@include b(slider-dots) {
@include once {
position: absolute;
left: 0;
top: 50%;
right: 0;
}
@include b(slider-dot) {
@include once {
transition: box-shadow .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
position: absolute;
transform: translateX(-50%) translateY(-50%);
height: $--slider-dot-size;
width: $--slider-dot-size;
border-radius: $--slider-dot-size / 2;
overflow: hidden;
}
box-shadow: map-get($--slider-dot-box-shadow, 'default');
}
}
}
@include b(slider-handle-indicator) {
@include once {
@include fade-in-scale-up-transition();
transform: scale(0.99999);
font-size: 14px;
padding: 8px 12px;
margin-bottom: 12px;
border-radius: 4px;
}
color: $--slider-indicator-color;
background-color: $--slider-indicator-background-color;
box-shadow: $--slider-indicator-box-shadow;
}
}