165 lines
2.9 KiB
SCSS
165 lines
2.9 KiB
SCSS
@import '../../css/_custom-variables/libs';
|
|
|
|
$slider-line-height: .75rem !default;
|
|
$slider-border-radius: 6.1875rem !default;
|
|
$slider-horizontal-width: 100% !default;
|
|
|
|
// DUMMY
|
|
@mixin slider_background-image ($v...) {}
|
|
@mixin slider_box-sizing ($v...) {}
|
|
@mixin slider_box-shadow ($v...) {}
|
|
@mixin slider_border-radius ($value) { border-radius: $value; }
|
|
@function slider_border-radius($value) { @return $value; }
|
|
|
|
// Imports
|
|
@import "../../../../node_modules/bootstrap-slider/src/sass/variables";
|
|
@import "mixins";
|
|
@import "../../../../node_modules/bootstrap-slider/src/sass/rules";
|
|
|
|
.slider {
|
|
user-select: none;
|
|
}
|
|
|
|
.slider .tooltip {
|
|
transition: opacity .2s;
|
|
line-height: 1;
|
|
|
|
&.top,
|
|
&.bottom {
|
|
transform: translateX(-50%);
|
|
|
|
[dir=rtl] & {
|
|
transform: translateX(50%);
|
|
}
|
|
}
|
|
|
|
&.left,
|
|
&.right {
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
&.in {
|
|
opacity: 1;
|
|
}
|
|
|
|
&.top {
|
|
margin-top: -($slider-line-height * 2.2) - .125rem;
|
|
}
|
|
|
|
&.right {
|
|
margin-left: .5rem;
|
|
}
|
|
|
|
&.left {
|
|
margin-right: .5rem;
|
|
}
|
|
|
|
.tooltip-inner {
|
|
padding-top: .375rem;
|
|
padding-bottom: .375rem;
|
|
}
|
|
}
|
|
|
|
.slider-handle {
|
|
background: #fff;
|
|
transition: transform .2s;
|
|
transform-origin: center;
|
|
|
|
&:active {
|
|
transform: scale(1.4, 1.4);
|
|
}
|
|
}
|
|
|
|
// Horizontal track
|
|
.slider.slider-horizontal .slider-track {
|
|
margin-top: -.0625rem;
|
|
height: .125rem;
|
|
}
|
|
|
|
// Vertical track
|
|
.slider.slider-vertical .slider-track {
|
|
margin-left: .125rem;
|
|
width: .125rem;
|
|
}
|
|
|
|
// Reversed slider
|
|
.slider-reversed .slider-selection {
|
|
background: transparent !important;
|
|
}
|
|
|
|
// Disabled
|
|
//
|
|
|
|
.slider-disabled .slider-track {
|
|
opacity: .3;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.slider-disabled .slider-handle {
|
|
box-shadow: 0 0 0 1px rgba(0,0,0,.07);
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
|
|
// Horizontal labels
|
|
.slider.slider-horizontal .slider-tick-label-container .slider-tick-label {
|
|
padding-top: .25rem;
|
|
}
|
|
|
|
[dir=rtl] .slider.slider-vertical {
|
|
.slider-track {
|
|
margin-left: 0;
|
|
margin-right: .125rem;
|
|
}
|
|
}
|
|
|
|
.default-style {
|
|
@import '../../css/_appwork/include';
|
|
|
|
.slider-handle {
|
|
box-shadow: 0 0 0 1px rgba(0,0,0,.1), $floating-component-shadow;
|
|
}
|
|
|
|
.slider-track {
|
|
background: $gray-200;
|
|
}
|
|
|
|
.slider-tick-label-container .slider-tick-label {
|
|
color: $text-muted;
|
|
font-size: $small-font-size;
|
|
}
|
|
|
|
@each $color, $value in $theme-colors {
|
|
@if $color != primary {
|
|
.slider-#{$color} {
|
|
@include bs-slider-variant($value);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.material-style {
|
|
@import '../../css/_appwork/include-material';
|
|
|
|
.slider-handle {
|
|
box-shadow: 0 0 0 1px rgba(0,0,0,.1), $floating-component-shadow;
|
|
}
|
|
|
|
.slider-track {
|
|
background: $gray-200;
|
|
}
|
|
|
|
.slider-tick-label-container .slider-tick-label {
|
|
color: $text-muted;
|
|
font-size: $small-font-size;
|
|
}
|
|
|
|
@each $color, $value in $theme-colors {
|
|
@if $color != primary {
|
|
.slider-#{$color} {
|
|
@include material-bs-slider-variant($value);
|
|
}
|
|
}
|
|
}
|
|
}
|