PNG %k25u25%fgd5n! /home/mkuwqnjx/public_html/src/assets/scss/plugins/_ui-slider.scss
//
// UI Slider
//
.noUi-target {
background: rgba($gray-500, .2);
border-radius: 4px;
border: 1px solid var(--#{$prefix}border-color);
box-shadow: inset 0 1px 1px rgba($gray-500, .1), 0 3px 6px -5px rgba($gray-500, .2);
}
.noUi-horizontal {
.noUi-handle {
width: 16px;
height: 16px;
right: -8px;
top: -6px;
}
}
.noUi-horizontal {
height: 7px;
}
/* Handle stripes;
*/
.noUi-handle{
border: 2px solid var(--#{$prefix}border-color);
border-radius: 50px;
background: $primary;
box-shadow: none;
&:before,
&:after {
height: 4px;
width: 1px;
background: $white;
left: 4px;
top: 4px;
}
}
.noUi-handle:after {
left: 7px;
}
.noUi-connect {
background: shade-color($primary, 10%);
}
.noUi-vertical {
width: 7px;
.noUi-handle {
width: 16px;
height: 16px;
right: -5.5px;
top: -10px;
&:before,
&:after {
width: 5px;
height: 1px;
left: 3px;
top: 7px;
}
}
.noUi-handle:after {
width: 5px;
height: 1px;
left: 3px;
top: 4px;
}
.noUi-origin{
top: 0;
}
}
.noUi-marker {
position: absolute;
background: rgba($gray-500, .2);
}
.noUi-marker-sub {
background: rgba($gray-500, .3);
}
.noUi-marker-large {
background: rgba($gray-500, .3);
}
.noUi-marker-horizontal{
&.noUi-marker-large{
height: 12px;
}
}
.example-val:before {
content: "Value: ";
}
.noUi-tooltip {
display: none;
}
.noUi-active .noUi-tooltip {
display: block;
}
.noUi-tooltip {
border: 1px solid var(--#{$prefix}border-color);
background: tint-color($gray-100, 50%);
color: $gray-700;
padding: 2px 4px;
font-size: 10px;
}