/* ------------------------------------------------------------------------------ * * # NoUI slider * * Styles for NoUI range slider plugin * * Version: 1.0 * Latest update: May 25, 2015 * * ---------------------------------------------------------------------------- */ // Functional styling // ------------------------------ // Container .noUi-target { border-radius: 100px; .box-shadow(inset 0 1px 1px fade(#000, 10%)); &, & * { .user-select(none); } } // Base .noUi-base { width: 100%; height: 100%; position: relative; } // Slider origin .noUi-origin { position: absolute; right: 0; top: 0; left: 0; bottom: 0; border-radius: 100px; .noUi-state-tap & { .transition(left 0.3s); .transition(top 0.3s); } } // Inherit cursor .noUi-state-drag * { cursor: inherit !important; } // Background .noUi-background { background-color: @gray-lighter; .box-shadow(inset 0 1px 1px fade(#000, 10%)); } // Connector .noUi-connect { background-color: @gray-light; margin-right: 1px; .transition(background 450ms); } // Disabled state [disabled] { .noUi-connect, &.noUi-connect { background-color: #bbb; } .noUi-handle { cursor: @cursor-disabled; } } // Orientations // ------------------------------ // Horizontal orientation .noUi-horizontal { height: @slider-base-size; .noUi-handle { top: -(@slider-base-size * 1.5) + (@slider-base-size / 2); left: -(@slider-base-size * 1.5); } &.noUi-extended { padding: 0 @content-padding-base; .noUi-origin { right: -(@content-padding-base); } } } // Vertical orientation .noUi-vertical { display: inline-block; width: @slider-base-size; height: 120px; & + & { margin-left: 20px; } .noUi-handle { top: -(@slider-base-size * 1.5); left: -(@slider-base-size * 1.5) + (@slider-base-size / 2); } &.noUi-extended { padding: @content-padding-base 0; .noUi-origin { bottom: -(@content-padding-base); } } } // Handles and cursors // ------------------------------ // Draggable .noUi-dragable { cursor: w-resize; .noUi-vertical & { cursor: n-resize; } } // Handle .noUi-handle { width: (@slider-base-size * 3); height: (@slider-base-size * 3); background-color: #fcfcfc; cursor: pointer; top: -(@slider-base-size); position: relative; z-index: 1; border-radius: 50%; border: 1px solid #bbb; .noUi-stacking & { z-index: 10; // this class is applied to the lower origin when its values is > 50% } // 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%; } // Hover state &:hover, &:focus { background-color: #f5f5f5; } // Active state &:active { border-color: #ddd; &:after { background-color: #999; } } } // White handle .noui-slider-white .noUi-handle:after { content: none; } // Sizing // ------------------------------ // Large .noui-slider-lg { // Handle .noUi-handle { width: (@slider-large-size * 3); height: (@slider-large-size * 3); top: -(@slider-large-size); // Inner circle &:after { width: @slider-large-size; height: @slider-large-size; margin-top: -(@slider-large-size / 2); margin-left: -(@slider-large-size / 2); } } // Horizontal &.noUi-horizontal { height: @slider-large-size; .noUi-handle { left: -(@slider-large-size * 1.5); } } // Vertical &.noUi-vertical { width: @slider-large-size; .noUi-handle { top: -(@slider-large-size * 1.5); left: -(@slider-large-size * 1.5) + (@slider-large-size / 2); } } } // Small and mini have the same handle size .noui-slider-sm, .noui-slider-xs { // Handle .noUi-handle { width: (@slider-small-size * 3); height: (@slider-small-size * 3); top: -(@slider-small-size); // Inner circle &:after { width: @slider-small-size; height: @slider-small-size; margin-top: -(@slider-small-size / 2); margin-left: -(@slider-small-size / 2); } } } // Small .noui-slider-sm { // Horizontal &.noUi-horizontal { height: @slider-small-size; .noUi-handle { top: -(@slider-small-size * 1.5) + (@slider-small-size / 2); left: -(@slider-small-size * 1.5); } } // Vertical &.noUi-vertical { width: @slider-small-size; .noUi-handle { top: -(@slider-small-size * 1.5); left: -(@slider-small-size * 1.5) + (@slider-small-size / 2); } } } // Mini .noui-slider-xs { // Horizontal &.noUi-horizontal { height: @slider-mini-size; .noUi-handle { top: -(@slider-small-size * 1.5) + (@slider-mini-size / 2); left: -(@slider-small-size * 1.5); } } // Vertical &.noUi-vertical { width: @slider-mini-size; .noUi-handle { top: -(@slider-small-size * 1.5); left: -(@slider-small-size * 1.5) + (@slider-mini-size / 2); } } } // Solid slider handle // ------------------------------ .noui-slider-solid { // Handle .noUi-handle { background-color: @gray-light; border-color: @gray-light; .box-shadow(none); // Inner circle &:after { background-color: #fff; .transition(opacity ease-in-out 0.2s); } // Change circle opacity on hover &:hover, &:focus { &:after { .opacity(0.75); } } } // Handle colors &.noui-slider-primary .noUi-handle { background-color: @brand-primary; border-color: @brand-primary; } &.noui-slider-danger .noUi-handle { background-color: @brand-danger; border-color: @brand-danger; } &.noui-slider-success .noUi-handle { background-color: @brand-success; border-color: @brand-success; } &.noui-slider-warning .noUi-handle { background-color: @brand-warning; border-color: @brand-warning; } &.noui-slider-info .noUi-handle { background-color: @brand-info; border-color: @brand-info; } } // Contextual colors // ------------------------------ // Primary .noui-slider-primary { .noUi-connect, &.noUi-connect { background-color: @brand-primary; } } // Danger .noui-slider-danger { .noUi-connect, &.noUi-connect { background-color: @brand-danger; } } // Success .noui-slider-success { .noUi-connect, &.noUi-connect { background-color: @brand-success; } } // Warning .noui-slider-warning { .noUi-connect, &.noUi-connect { background-color: @brand-warning; } } // Info .noui-slider-info { .noUi-connect, &.noUi-connect { background-color: @brand-info; } } // Tooltip // ------------------------------ .noui-tooltip { display: none; position: absolute; border-radius: @border-radius-base; background: @gray-dark; color: #fff; top: -43px; padding: @padding-base-vertical @padding-base-horizontal; left: 50%; margin-left: -26px; text-align: center; width: 52px; &:after { content: ''; width: 0; height: 0; border: 5px solid transparent; border-top-color: @gray-dark; position: absolute; bottom: -10px; left: 50%; margin-left: -5px; } .noUi-handle:hover & { display: block; } }