/* ------------------------------------------------------------------------------
*
* # jQuery UI Sliders
*
* Separate styles for jQuery UI library. Slider component
*
* Version: 1.0
* Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */
// Core
// ----------------------------------------
.ui-slider {
position: relative;
text-align: left;
background-color: @gray-lighter;
border-radius: 100px;
.box-shadow(inset 0 1px 1px fade(#000, 10%));
// Handle
.ui-slider-handle {
position: absolute;
z-index: 2;
width: (@slider-base-size * 3);
height: (@slider-base-size * 3);
cursor: pointer;
border-radius: 50%;
background-color: #fcfcfc;
border: 1px solid #bbb;
// Hover color
&.ui-state-hover,
&.ui-state-focus {
outline: 0;
background-color: #f5f5f5;
}
// Active color
&.ui-state-active {
border-color: #ddd;
&:after {
background-color: #999;
}
}
// Inner circle
&:after {
content: '';
display: inline-block;
width: @slider-base-size;
height: @slider-base-size;
position: absolute;
top: 50%;
left: 50%;
margin-top: -(@slider-base-size / 2);
margin-left: -(@slider-base-size / 2);
background-color: @color-grey-600;
border-radius: 50%;
}
}
// Range
.ui-slider-range {
position: absolute;
z-index: 1;
display: block;
border: 0;
background-color: @gray-light;
border-radius: 100px;
}
}
// Orientations
// ----------------------------------------
// Horizontal
.ui-slider-horizontal {
height: @slider-base-size;
// Handle
.ui-slider-handle {
top: -(@slider-base-size * 1.5) + (@slider-base-size / 2);
margin-left: -(@slider-base-size * 1.5);
}
// Ranges
.ui-slider-range {
top: 0;
height: 100%;
}
.ui-slider-range-min {
left: 0;
}
.ui-slider-range-max {
right: 0;
}
}
// Vertical
.ui-slider-vertical {
width: @slider-base-size;
height: 140px;
display: inline-block;
// Handle
.ui-slider-handle {
left: -(@slider-base-size * 1.5) + (@slider-base-size / 2);
margin-bottom: -(@slider-base-size * 1.5);
}
// Ranges
.ui-slider-range {
left: 0;
width: 100%;
}
.ui-slider-range-min {
bottom: 0;
}
.ui-slider-range-max {
top: 0;
}
}
.ui-slider-vertical-default,
.ui-slider-vertical-range-min,
.ui-slider-vertical-range-max {
> span {
margin: 0 10px;
}
}
.ui-slider-vertical-pips,
.ui-slider-vertical-labels,
.ui-slider-vertical-minmax {
> span {
margin: 5px 15px;
}
}
// Handles
// ----------------------------------------
// Slider with solid handle
.ui-slider-solid {
.ui-slider-handle {
background-color: @gray-light;
border-color: @gray-light;
.box-shadow(none);
&:after {
background-color: #fff;
.transition(opacity ease-in-out 0.2s);
}
&.ui-state-hover:after,
&.ui-state-active:after {
background-color: #fff;
.opacity(0.75);
}
}
}
// White handle
.ui-handle-mark.ui-handle-white .ui-slider-handle:after {
content: none;
}
// Sizing
// ----------------------------------------
// Large
.ui-slider-lg {
// Handle
.ui-slider-handle {
width: (@slider-large-size * 3);
height: (@slider-large-size * 3);
// Inner circle
&:after {
width: @slider-large-size;
height: @slider-large-size;
margin-top: -(@slider-large-size / 2);
margin-left: -(@slider-large-size / 2);
}
}
// In horizontal orientation
&.ui-slider-horizontal {
height: @slider-large-size;
.ui-slider-handle {
top: -(@slider-large-size * 1.5) + (@slider-large-size / 2);
margin-left: -(@slider-large-size * 1.5);
}
}
// In vertical orientation
&.ui-slider-vertical {
width: @slider-large-size;
.ui-slider-handle {
left: -(@slider-large-size * 1.5) + (@slider-large-size / 2);
margin-bottom: -(@slider-large-size * 1.5);
}
}
}
// Small and mini have the same handle size
.ui-slider-sm,
.ui-slider-xs {
.ui-slider-handle {
width: (@slider-small-size * 3);
height: (@slider-small-size * 3);
// Inner circle
&:after {
width: @slider-small-size;
height: @slider-small-size;
margin-top: -(@slider-small-size / 2);
margin-left: -(@slider-small-size / 2);
}
}
}
// Small
.ui-slider-sm {
// In horizontal orientation
&.ui-slider-horizontal {
height: @slider-small-size;
.ui-slider-handle {
top: -(@slider-small-size * 1.5) + (@slider-small-size / 2);
margin-left: -(@slider-small-size * 1.5);
}
}
// In vertical orientation
&.ui-slider-vertical {
width: @slider-small-size;
.ui-slider-handle {
left: -(@slider-small-size * 1.5) + (@slider-small-size / 2);
margin-bottom: -(@slider-small-size * 1.5);
}
}
}
// Mini
.ui-slider-xs {
// In horizontal orientation
&.ui-slider-horizontal {
height: @slider-mini-size;
.ui-slider-handle {
top: -(@slider-small-size * 1.5) + (@slider-mini-size / 2);
margin-left: -(@slider-small-size * 1.5);
}
}
// In vertical orientation
&.ui-slider-vertical {
width: @slider-mini-size;
.ui-slider-handle {
left: -(@slider-small-size * 1.5) + (@slider-mini-size / 2);
margin-bottom: -(@slider-small-size * 1.5);
}
}
}
// Contextual colors
// ----------------------------------------
.ui-slider-primary .ui-slider-range,
.ui-slider-solid.ui-slider-primary .ui-slider-handle {
background-color: @brand-primary;
border-color: @brand-primary;
}
.ui-slider-danger .ui-slider-range,
.ui-slider-solid.ui-slider-danger .ui-slider-handle {
background-color: @brand-danger;
border-color: @brand-danger;
}
.ui-slider-success .ui-slider-range,
.ui-slider-solid.ui-slider-success .ui-slider-handle {
background-color: @brand-success;
border-color: @brand-success;
}
.ui-slider-warning .ui-slider-range,
.ui-slider-solid.ui-slider-warning .ui-slider-handle {
background-color: @brand-warning;
border-color: @brand-warning;
}
.ui-slider-info .ui-slider-range,
.ui-slider-solid.ui-slider-info .ui-slider-handle {
background-color: @brand-info;
border-color: @brand-info;
}