50 lines
1.1 KiB
SCSS
50 lines
1.1 KiB
SCSS
@use 'sass:math';
|
|
|
|
.p-slider {
|
|
background: $sliderBg;
|
|
border: $sliderBorder;
|
|
border-radius: $borderRadius;
|
|
|
|
&.p-slider-horizontal {
|
|
height: $sliderHorizontalHeight;
|
|
|
|
.p-slider-handle {
|
|
margin-top: math.div(-1 * $sliderHandleHeight, 2);
|
|
margin-left: math.div(-1 * $sliderHandleWidth, 2);
|
|
}
|
|
}
|
|
|
|
&.p-slider-vertical {
|
|
width: $sliderVerticalWidth;
|
|
|
|
.p-slider-handle {
|
|
margin-left: math.div(-1 * $sliderHandleWidth, 2);
|
|
margin-bottom: math.div(-1 * $sliderHandleHeight, 2);
|
|
}
|
|
}
|
|
|
|
.p-slider-handle {
|
|
height: $sliderHandleHeight;
|
|
width: $sliderHandleWidth;
|
|
background: $sliderHandleBg;
|
|
border: $sliderHandleBorder;
|
|
border-radius: $sliderHandleBorderRadius;
|
|
transition: $formElementTransition;
|
|
|
|
&:focus {
|
|
@include focused();
|
|
}
|
|
}
|
|
|
|
.p-slider-range {
|
|
background: $sliderRangeBg;
|
|
}
|
|
|
|
&:not(.p-disabled) {
|
|
.p-slider-handle:hover {
|
|
background: $sliderHandleHoverBg;
|
|
border-color: $sliderHandleHoverBorderColor;
|
|
}
|
|
}
|
|
}
|