2019-10-22 18:34:49 +08:00
|
|
|
@mixin setup-light-slider {
|
|
|
|
|
$--slider-rail-background-color: (
|
|
|
|
|
'default': rgba(0, 0, 0, .2),
|
|
|
|
|
'hover': rgba(0, 0, 0, .15)
|
|
|
|
|
) !global;
|
|
|
|
|
$--slider-rail-fill-background-color: (
|
|
|
|
|
'default': $--primary-6,
|
|
|
|
|
'hover': $--primary-5
|
|
|
|
|
) !global;
|
2019-10-23 22:37:46 +08:00
|
|
|
$--slider-handle-background-color: white !global;
|
2019-10-22 18:34:49 +08:00
|
|
|
$--slider-handle-box-shadow: (
|
|
|
|
|
'default': inset 0 0 0 2px $--primary-6,
|
|
|
|
|
'hover': inset 0 0 0 2px $--primary-5,
|
|
|
|
|
'active': (inset 0 0 0 2px $--primary-5, 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: $--alpha-neutral-2 !global;
|
|
|
|
|
$--slider-indicator-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .12) !global;
|
|
|
|
|
$--slider-indicator-color: white !global;
|
|
|
|
|
$--slider-dot-box-shadow: (
|
|
|
|
|
'default': inset 0 0 0 2px $--primary-6,
|
|
|
|
|
'active': inset 0 0 0 2px $--primary-5
|
|
|
|
|
) !global;
|
|
|
|
|
}
|
