/*#region Form Sliders*/ /*#region noUiSlider*/ .noUi-target, .noUi-target { -webkit-touch-callout: none; -ms-touch-action: none; touch-action: none; .user-select(none); .box-sizing(border-box); } .noUi-base { width: 100%; height: 100%; position: relative; } .noUi-origin { position: absolute; right: 0; top: 0; left: 0; bottom: 0; .border-radius(2px); } .noUi-stacking .noUi-handle { /* This class is applied to the lower origin when its values is > 50%. */ z-index: 10; } .noUi-stacking + .noUi-origin { /* Fix stacking order in IE7, which incorrectly creates a new context for the origins. */ *z-index: -1; } .noUi-state-tap .noUi-origin { .transition(left 0.3s, top 0.3s); } .noUi-state-drag { cursor: inherit !important; } /* Slider size and handle placement; */ .noUi-horizontal { height: 18px; &.slider-xs { height: 14px; .noUi-handle { height: 24px; width: 26px; &:before { left: 10px; top: 4px; } &:after { left: 13px; top: 4px; } } } &.slider-sm { height: 16px; .noUi-handle { height: 26px; width: 30px; &:before { left: 12px; top: 5px; } &:after { left: 15px; top: 5px; } } } &.slider-lg { height: 20px; .noUi-handle { height: 30px; width: 36px; &:before { left: 15px; top: 7px; } &:after { left: 18px; top: 7px; } } } &.slider-xl { height: 22px; .noUi-handle { height: 32px; width: 38px; &:before { left: 16px; top: 8px; } &:after { left: 19px; top: 8px; } } } } .noUi-horizontal .noUi-handle { width: 34px; height: 28px; left: -17px; top: -6px; } .noUi-horizontal.noUi-extended { padding: 0 15px; } .noUi-horizontal.noUi-extended .noUi-origin { right: -15px; } .noUi-vertical { width: 18px; &.slider-xs { width: 14px; .noUi-handle { width: 24px; height: 26px; &:before { top: 10px; left: 4px; } &:after { top: 13px; left: 4px; } } } &.slider-sm { width: 16px; .noUi-handle { width: 26px; height: 30px; &:before { top: 12px; left: 5px; } &:after { top: 15px; left: 5px; } } } &.slider-lg { width: 20px; .noUi-handle { width: 30px; height: 36px; &:before { top: 15px; left: 7px; } &:after { top: 18px; left: 7px; } } } &.slider-xl { width: 22px; .noUi-handle { width: 32px; height: 38px; &:before { top: 16px; left: 8px; } &:after { top: 19px; left: 8px; } } } } .noUi-vertical .noUi-handle { width: 28px; height: 34px; left: -6px; top: -17px; } .noUi-vertical.noUi-extended { padding: 15px 0; } .noUi-vertical.noUi-extended .noUi-origin { bottom: -15px; } /* Styling; */ .noUi-background { background: #FAFAFA; } .noUi-connect { background: @themeprimary; .transition(background 450ms); } .noUi-target { border-radius: 4px; border: 1px solid #D3D3D3; } .noUi-target.noUi-connect { } /* Handles and cursors; */ .noUi-dragable { cursor: w-resize; } .noUi-vertical .noUi-dragable { cursor: n-resize; } .noUi-handle { position: relative; z-index: 1; border: 1px solid #D9D9D9; border-radius: 3px; background: #FFF; cursor: default; .box-shadow(inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB); } .noUi-active { .box-shadow(inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB); } /* Handle stripes; */ .noUi-handle:before, .noUi-handle:after { content: ""; display: block; position: absolute; height: 14px; width: 1px; background: #E8E7E6; left: 14px; top: 6px; } .noUi-handle:after { left: 17px; } .noUi-vertical .noUi-handle:before, .noUi-vertical .noUi-handle:after { width: 14px; height: 1px; left: 6px; top: 14px; } .noUi-vertical .noUi-handle:after { top: 17px; } /* Disabled state; */ [disabled].noUi-connect, [disabled] .noUi-connect { background: #B8B8B8; } [disabled] .noUi-handle { cursor: not-allowed; } /* Blocked state; */ .noUi-state-blocked.noUi-connect, .noUi-state-blocked .noUi-connect { background: #4FDACF; } /*#endregion noUiSlider*/ /*#region jQRangeSlider*/ .ui-rangeSlider { height: 30px; padding-top: 40px; &.slider-sm { .ui-rangeSlider-container, .ui-rangeSlider-arrow { height: 20px; } .ui-rangeSlider-bar { height: 18px; } } &.slider-xs { .ui-rangeSlider-container, .ui-rangeSlider-arrow { height: 10px; } .ui-rangeSlider-bar { height: 8px; } .ui-rangeSlider-arrow-inner:before { font-size: 10px; line-height: 22px; } } &.valuelabel-blue { .ui-rangeSlider-label { background-color: @blue; } .ui-rangeSlider-label-inner { border-top: 6px solid @blue; } } &.valuelabel-primary { .ui-rangeSlider-label { background-color: @primary; } .ui-rangeSlider-label-inner { border-top: 6px solid @primary; } } &.valuelabel-danger { .ui-rangeSlider-label { background-color: @danger; } .ui-rangeSlider-label-inner { border-top: 6px solid @danger; } } &.valuelabel-success { .ui-rangeSlider-label { background-color: @success; } .ui-rangeSlider-label-inner { border-top: 6px solid @success; } } &.valuelabel-warning { .ui-rangeSlider-label { background-color: @warning; } .ui-rangeSlider-label-inner { border-top: 6px solid @warning; } } &.valuelabel-silver { .ui-rangeSlider-label { background-color: @silver; } .ui-rangeSlider-label-inner { border-top: 6px solid @silver; } } &.valuelabel-blueberry { .ui-rangeSlider-label { background-color: @blueberry; } .ui-rangeSlider-label-inner { border-top: 6px solid @blueberry; } } &.valuelabel-palegreen { .ui-rangeSlider-label { background-color: @palegreen; } .ui-rangeSlider-label-inner { border-top: 6px solid @palegreen; } } &.valuelabel-orange { .ui-rangeSlider-label { background-color: @orange; } .ui-rangeSlider-label-inner { border-top: 6px solid @orange; } } &.valuelabel-darkorange { .ui-rangeSlider-label { background-color: @darkorange; } .ui-rangeSlider-label-inner { border-top: 6px solid @darkorange; } } &.valuelabel-magenta { .ui-rangeSlider-label { background-color: @magenta; } .ui-rangeSlider-label-inner { border-top: 6px solid @magenta; } } &.valuelabel-purple { .ui-rangeSlider-label { background-color: @purple; } .ui-rangeSlider-label-inner { border-top: 6px solid @purple; } } &.valuelabel-maroon { .ui-rangeSlider-label { background-color: @maroon; } .ui-rangeSlider-label-inner { border-top: 6px solid @maroon; } } &.valuelabel-yellow { .ui-rangeSlider-label { background-color: @yellow; } .ui-rangeSlider-label-inner { border-top: 6px solid @yellow; } } &.valuelabel-success { .ui-rangeSlider-label { background-color: @success; } .ui-rangeSlider-label-inner { border-top: 6px solid @success; } } &.silder-blue { .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before, .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before { color: @blue !important; } .ui-rangeSlider-bar { background: @blue !important; } } &.silder-primary { .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before, .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before { color: @primary !important; } .ui-rangeSlider-bar { background: @primary !important; } } &.silder-danger { .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before, .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before { color: @danger !important; } .ui-rangeSlider-bar { background: @danger !important; } } &.silder-warning { .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before, .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before { color: @warning !important; } .ui-rangeSlider-bar { background: @warning !important; } } &.silder-silver { .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before, .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before { color: @silver !important; } .ui-rangeSlider-bar { background: @silver !important; } } &.silder-blueberry { .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before, .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before { color: @blueberry !important; } .ui-rangeSlider-bar { background: @blueberry !important; } } &.silder-palegreen { .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before, .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before { color: @palegreen !important; } .ui-rangeSlider-bar { background: @palegreen !important; } } &.silder-success { .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before, .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before { color: @success !important; } .ui-rangeSlider-bar { background: @success !important; } } &.silder-yellow { .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before, .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before { color: @yellow !important; } .ui-rangeSlider-bar { background: @yellow !important; } } &.silder-orange { .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before, .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before { color: @orange !important; } .ui-rangeSlider-bar { background: @orange !important; } } &.silder-darkorange { .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before, .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before { color: @darkorange !important; } .ui-rangeSlider-bar { background: @darkorange !important; } } &.silder-magenta { .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before, .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before { color: @magenta !important; } .ui-rangeSlider-bar { background: @magenta !important; } } &.silder-purple { .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before, .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before { color: @purple !important; } .ui-rangeSlider-bar { background: @purple !important; } } &.silder-maroon { .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before, .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before { color: @maroon !important; } .ui-rangeSlider-bar { background: @maroon !important; } } } .ui-rangeSlider, .ui-rangeSlider-container, .ui-rangeSlider-arrow { .box-sizing(content-box); } .ui-rangeSlider-withArrows .ui-rangeSlider-container { margin: 0 15px; } .ui-rangeSlider-noArrow .ui-rangeSlider-container { .border-radius(2px); border-left: solid 1px #D3D3D3; border-right: solid 1px #D3D3D3; } .ui-rangeSlider-disabled.ui-rangeSlider-noArrow .ui-rangeSlider-container { border-color: #8490a3; } .ui-rangeSlider-container, .ui-rangeSlider-arrow { height: 30px; border-top: solid 1px #D3D3D3; border-bottom: solid 1px #D3D3D3; background: @white; } .ui-rangeSlider-disabled .ui-rangeSlider-container, .ui-rangeSlider-disabled .ui-rangeSlider-arrow { } .ui-rangeSlider-label { background-color: @themesecondary; .border-radius(3px); padding: 5px 10px; bottom: 36px; color: @white; font-size: 13px; cursor: col-resize; } .ui-rangeSlider-disabled .ui-rangeSlider-container, .ui-rangeSlider-disabled .ui-rangeSlider-arrow, .ui-rangeSlider-disabled .ui-rangeSlider-label { .opacity(.4); } .ui-rangeSlider-arrow { width: 14px; cursor: pointer; } .ui-rangeSlider-leftArrow { .border-radius(2px 0 0 2px); border-left: solid 1px #D3D3D3; } .ui-rangeSlider-disabled .ui-rangeSlider-leftArrow { } .ui-rangeSlider-rightArrow { .border-radius(0 2px 2px 0); border-right: solid 1px #D3D3D3; } .ui-rangeSlider-disabled .ui-rangeSlider-rightArrow { } .ui-rangeSlider-arrow-inner { position: absolute; top: 50%; width: 0; height: 0; margin-top: -10px; &:before { position: absolute; top: 0; font-family: FontAwesome; font-weight: normal; font-size: 14px; line-height: 23px; border-width: 1px; content: ""; color: #d3d3d3; } } .ui-rangeSlider-leftArrow .ui-rangeSlider-arrow-inner:before { content: "\f053"; left: 8px; margin-left: -5px; } .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before, .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before { color: @palegreen; } .ui-rangeSlider-rightArrow .ui-rangeSlider-arrow-inner:before { content: "\f054"; right: 0; margin-right: -11px; } .ui-rangeSlider-innerBar { width: 110%; height: 100%; left: -10px; overflow: hidden; } .ui-rangeSlider-bar { background: @themeprimary; height: 28px; margin: 1px; .border-radius(2px); cursor: move; cursor: grab; cursor: -moz-grab; } .ui-rangeSlider-disabled .ui-rangeSlider-bar { .opacity(.4); } .ui-rangeSlider-handle { width: 10px; height: 30px; background: transparent; cursor: col-resize; } .ui-rangeSlider-label-inner { position: absolute; top: 100%; left: 50%; display: block; z-index: 99; border-left: 6px solid transparent; border-right: 6px solid transparent; margin-left: -6px; border-top: 6px solid @themesecondary; } .ui-rangeSlider-disabled .ui-rangeSlider-label-inner { .opacity(.4); } .ui-editRangeSlider-inputValue { width: 2em; text-align: center; font-size: 13px; border: 1px solid transparent !important; margin-left: -5px; margin-right: -5px; } .ui-rangeSlider .ui-ruler-scale { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .ui-rangeSlider .ui-ruler-tick { float: left; } .ui-rangeSlider .ui-ruler-scale0 .ui-ruler-tick-inner { color: #d3d3d3; margin-top: 1px; border-left: 1px solid #d3d3d3; height: 30px; padding-left: 2px; position: relative; } .ui-rangeSlider .ui-ruler-scale0 .ui-ruler-tick-label { position: absolute; bottom: 6px; } .ui-rangeSlider .ui-ruler-scale1 .ui-ruler-tick-label { color: @snow; } .ui-rangeSlider .ui-ruler-scale1 .ui-ruler-tick-inner { border-left: 1px solid #d3d3d3; margin-top: 25px; height: 5px; } /*#endregion jQRangeSlider*/ /*#endregion Form Sliders*/