naive-ui/styles/themes/dark/components/Slider.scss
2019-10-30 16:35:42 +08:00

24 lines
983 B
SCSS

@mixin setup-dark-slider {
$--slider-rail-background-color: (
'default': rgba(255, 255, 255, .2),
'hover': rgba(255, 255, 255, .3)
) !global;
$--slider-rail-fill-background-color: (
'default': $--primary-9,
'hover': $--primary-6
) !global;
$--slider-handle-background-color: black !global;
$--slider-handle-box-shadow: (
'default': inset 0 0 0 2px $--primary-9,
'hover': inset 0 0 0 2px $--primary-6,
'active': (inset 0 0 0 2px $--primary-6, 0 0 0 3px change-color($--primary-6, $alpha: .2)),
'focus': (inset 0 0 0 2px $--primary-6, 0 0 0 3px change-color($--primary-6, $alpha: .2))
) !global;
$--slider-indicator-background-color: $--n-dialog-color !global;
$--slider-indicator-box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.18) !global;
$--slider-indicator-color: $--n-secondary-text-color !global;
$--slider-dot-box-shadow: (
'default': inset 0 0 0 2px $--primary-9,
'active': inset 0 0 0 2px $--primary-6
) !global;
}