UNPKG

cux-test

Version:

[SB Admin](http://startbootstrap.com/template-overviews/sb-admin/) is an open source, admin dashboard template for [Bootstrap](http://getbootstrap.com/) created by [Start Bootstrap](http://startbootstrap.com/).

310 lines (305 loc) 8.81 kB
/*! ========================================================= * bootstrap-slider.js * * Maintainers: * Kyle Kemp * - Twitter: @seiyria * - Github: seiyria * Rohit Kalkur * - Twitter: @Rovolutionary * - Github: rovolution * * ========================================================= * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. * ========================================================= */ .slider { display: inline-block; vertical-align: middle; position: relative; } .slider.slider-horizontal { width: 210px; height: 6px; } .slider.slider-horizontal .slider-track { height: 6px; width: 100%; margin-top: -5px; top: 50%; left: 0; } .slider.slider-horizontal .slider-selection, .slider.slider-horizontal .slider-track-low, .slider.slider-horizontal .slider-track-high { height: 100%; top: 0; bottom: 0; } .slider.slider-horizontal .slider-tick, .slider.slider-horizontal .slider-handle { margin-left: -10px; margin-top: -2px; } .slider.slider-horizontal .slider-tick:hover, .slider.slider-horizontal .slider-tick.hover, .slider.slider-horizontal .slider-handle:hover, .slider.slider-horizontal .slider-handle.hover, .slider.slider-horizontal .slider-tick:focus, .slider.slider-horizontal .slider-tick.focus, .slider.slider-horizontal .slider-handle:focus, .slider.slider-horizontal .slider-handle.focus { margin-left: -10px; margin-top: -5px; } .slider.slider-horizontal .slider-tick.triangle, .slider.slider-horizontal .slider-handle.triangle { border-width: 0 10px 10px 10px; width: 0; height: 0; border-bottom-color: #0480be; margin-top: 0; } .slider.slider-horizontal .slider-tick-label-container { white-space: nowrap; margin-top: 20px; } .slider.slider-horizontal .slider-tick-label-container .slider-tick-label { padding-top: 4px; display: inline-block; text-align: center; } .slider.slider-vertical { height: 210px; width: 6px; } .slider.slider-vertical .slider-track { width: 6px; height: 100%; margin-left: -5px; left: 50%; top: 0; } .slider.slider-vertical .slider-selection { width: 100%; left: 0; top: 0; bottom: 0; } .slider.slider-vertical .slider-track-low, .slider.slider-vertical .slider-track-high { width: 100%; left: 0; right: 0; } .slider.slider-vertical .slider-tick, .slider.slider-vertical .slider-handle { margin-left: -2px; margin-top: -10px; } .slider.slider-vertical .slider-tick:hover, .slider.slider-vertical .slider-tick.hover, .slider.slider-vertical .slider-handle:hover, .slider.slider-vertical .slider-handle.hover, .slider.slider-vertical .slider-tick:focus, .slider.slider-vertical .slider-tick.focus, .slider.slider-vertical .slider-handle:focus, .slider.slider-vertical .slider-handle.focus { margin-left: -5px; margin-top: -10px; } .slider.slider-vertical .slider-tick.triangle, .slider.slider-vertical .slider-handle.triangle { border-width: 10px 0 10px 10px; width: 1px; height: 1px; border-left-color: #0480be; margin-left: 0; } .slider.slider-disabled .slider-handle { background-image: -webkit-linear-gradient(top, #dfdfdf 0%, #bebebe 100%); background-image: -o-linear-gradient(top, #dfdfdf 0%, #bebebe 100%); background-image: linear-gradient(to bottom, #dfdfdf 0%, #bebebe 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdfdfdf', endColorstr='#ffbebebe', GradientType=0); } .slider.slider-disabled .slider-track { background-image: -webkit-linear-gradient(top, #e5e5e5 0%, #e9e9e9 100%); background-image: -o-linear-gradient(top, #e5e5e5 0%, #e9e9e9 100%); background-image: linear-gradient(to bottom, #e5e5e5 0%, #e9e9e9 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe5e5e5', endColorstr='#ffe9e9e9', GradientType=0); cursor: not-allowed; } .slider input { display: none; } .slider .tooltip.top { margin-top: -50px; margin-left: -2px; } .slider .tooltip.right { margin-top: -50px; margin-left: 5px; } .slider .tooltip-inner { white-space: nowrap; background: #ffffff; border: 1px solid #b4b4b4; color: #0096e0; border-radius: 0; } .slider .tooltip.top .tooltip-arrow { white-space: nowrap; background: transparent; border: 1px solid transparent; } .slider .tooltip.right .tooltip-arrow { white-space: nowrap; background: transparent; border: 1px solid transparent; } .slider .hide { display: none; } .slider-track { position: absolute; cursor: pointer; background: #0aaeff; border-radius: 0px; } .slider-selection { position: absolute; background: #cdcdcd; background-repeat: repeat-x; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #cdcdcd; border-radius: 0px; } .slider-selection.tick-slider-selection { background-image: -webkit-linear-gradient(top, #89cdef 0%, #81bfde 100%); background-image: -o-linear-gradient(top, #89cdef 0%, #81bfde 100%); background-image: linear-gradient(to bottom, #89cdef 0%, #81bfde 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff89cdef', endColorstr='#ff81bfde', GradientType=0); } .slider-track-low, .slider-track-high { position: absolute; background: transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 0px; } .slider-handle { position: absolute; width: 10px; height: 10px; background: #0aaeff; background-repeat: repeat-x; -webkit-box-shadow: none; box-shadow: none; border: 0px solid #ffffff; } .slider-handle.hover, .slider-handle:hover { position: absolute; width: 16px; height: 16px; background: #0aaeff; background-repeat: repeat-x; -webkit-box-shadow: none; box-shadow: none; border: 0px solid transparent; } .slider-handle.focus, .slider-handle:focus { position: absolute; width: 16px; height: 16px; background: #0aaeff; background-repeat: repeat-x; -webkit-box-shadow: none; box-shadow: none; border: 2px solid #206397; } .slider-handle.active, .slider-handle:active { position: absolute; width: 16px; height: 16px; background: #0aaeff; background-repeat: repeat-x; -webkit-box-shadow: none; box-shadow: none; border: 1px solid #206397; } .slider-handle.round { border-radius: none; } .slider-handle.triangle { background: transparent none; } .slider-handle.custom { background: transparent none; } .slider-handle.custom::before { line-height: 20px; font-size: 20px; content: '\2605'; color: #726204; } .slider-tick { position: absolute; width: 20px; height: 20px; background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%); background-image: -o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%); background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; filter: none; opacity: 0.8; border: 0px solid transparent; } .slider-tick.round { border-radius: 50%; } .slider-tick.triangle { background: transparent none; } .slider-tick.custom { background: transparent none; } .slider-tick.custom::before { line-height: 20px; font-size: 20px; content: '\2605'; color: #726204; } .slider-tick.in-selection { background-image: -webkit-linear-gradient(top, #89cdef 0%, #81bfde 100%); background-image: -o-linear-gradient(top, #89cdef 0%, #81bfde 100%); background-image: linear-gradient(to bottom, #89cdef 0%, #81bfde 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff89cdef', endColorstr='#ff81bfde', GradientType=0); opacity: 1; }