resources/css/bootstrap-slider.css

   1 /*! =======================================================
   2                       VERSION  10.6.1
   3 ========================================================= */
   4 /*! =========================================================
   5  * bootstrap-slider.js
   6  *
   7  * Maintainers:
   8  *              Kyle Kemp
   9  *                      - Twitter: @seiyria
  10  *                      - Github:  seiyria
  11  *              Rohit Kalkur
  12  *                      - Twitter: @Rovolutionary
  13  *                      - Github:  rovolution
  14  *
  15  * =========================================================
  16   *
  17  * bootstrap-slider is released under the MIT License
  18  * Copyright (c) 2019 Kyle Kemp, Rohit Kalkur, and contributors
  19  *
  20  * Permission is hereby granted, free of charge, to any person
  21  * obtaining a copy of this software and associated documentation
  22  * files (the "Software"), to deal in the Software without
  23  * restriction, including without limitation the rights to use,
  24  * copy, modify, merge, publish, distribute, sublicense, and/or sell
  25  * copies of the Software, and to permit persons to whom the
  26  * Software is furnished to do so, subject to the following
  27  * conditions:
  28  *
  29  * The above copyright notice and this permission notice shall be
  30  * included in all copies or substantial portions of the Software.
  31  *
  32  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
  33  * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
  34  * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
  35  * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
  36  * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
  37  * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  38  * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
  39  * OTHER DEALINGS IN THE SOFTWARE.
  40  *
  41  * ========================================================= */
  42 .slider {
  43   display: inline-block;
  44   vertical-align: middle;
  45   position: relative;
  46 }
  47 .slider.slider-horizontal {
  48   width: 210px;
  49   height: 20px;
  50 }
  51 .slider.slider-horizontal .slider-track {
  52   height: 10px;
  53   width: 100%;
  54   margin-top: -5px;
  55   top: 50%;
  56   left: 0;
  57 }
  58 .slider.slider-horizontal .slider-selection,
  59 .slider.slider-horizontal .slider-track-low,
  60 .slider.slider-horizontal .slider-track-high {
  61   height: 100%;
  62   top: 0;
  63   bottom: 0;
  64 }
  65 .slider.slider-horizontal .slider-tick,
  66 .slider.slider-horizontal .slider-handle {
  67   margin-left: -10px;
  68 }
  69 .slider.slider-horizontal .slider-tick.triangle,
  70 .slider.slider-horizontal .slider-handle.triangle {
  71   position: relative;
  72   top: 50%;
  73   -ms-transform: translateY(-50%);
  74   transform: translateY(-50%);
  75   border-width: 0 10px 10px 10px;
  76   width: 0;
  77   height: 0;
  78   border-bottom-color: #2e6da4;
  79   margin-top: 0;
  80 }
  81 .slider.slider-horizontal .slider-tick-container {
  82   white-space: nowrap;
  83   position: absolute;
  84   top: 0;
  85   left: 0;
  86   width: 100%;
  87 }
  88 .slider.slider-horizontal .slider-tick-label-container {
  89   white-space: nowrap;
  90   margin-top: 20px;
  91 }
  92 .slider.slider-horizontal .slider-tick-label-container .slider-tick-label {
  93   padding-top: 4px;
  94   display: inline-block;
  95   text-align: center;
  96 }
  97 .slider.slider-horizontal .tooltip {
  98   -ms-transform: translateX(-50%);
  99   transform: translateX(-50%);
 100 }
 101 .slider.slider-horizontal.slider-rtl .slider-track {
 102   left: initial;
 103   right: 0;
 104 }
 105 .slider.slider-horizontal.slider-rtl .slider-tick,
 106 .slider.slider-horizontal.slider-rtl .slider-handle {
 107   margin-left: initial;
 108   margin-right: -10px;
 109 }
 110 .slider.slider-horizontal.slider-rtl .slider-tick-container {
 111   left: initial;
 112   right: 0;
 113 }
 114 .slider.slider-horizontal.slider-rtl .tooltip {
 115   -ms-transform: translateX(50%);
 116   transform: translateX(50%);
 117 }
 118 .slider.slider-vertical {
 119   height: 210px;
 120   width: 20px;
 121 }
 122 .slider.slider-vertical .slider-track {
 123   width: 10px;
 124   height: 100%;
 125   left: 25%;
 126   top: 0;
 127 }
 128 .slider.slider-vertical .slider-selection {
 129   width: 100%;
 130   left: 0;
 131   top: 0;
 132   bottom: 0;
 133 }
 134 .slider.slider-vertical .slider-track-low,
 135 .slider.slider-vertical .slider-track-high {
 136   width: 100%;
 137   left: 0;
 138   right: 0;
 139 }
 140 .slider.slider-vertical .slider-tick,
 141 .slider.slider-vertical .slider-handle {
 142   margin-top: -10px;
 143 }
 144 .slider.slider-vertical .slider-tick.triangle,
 145 .slider.slider-vertical .slider-handle.triangle {
 146   border-width: 10px 0 10px 10px;
 147   width: 1px;
 148   height: 1px;
 149   border-left-color: #2e6da4;
 150   border-right-color: #2e6da4;
 151   margin-left: 0;
 152   margin-right: 0;
 153 }
 154 .slider.slider-vertical .slider-tick-label-container {
 155   white-space: nowrap;
 156 }
 157 .slider.slider-vertical .slider-tick-label-container .slider-tick-label {
 158   padding-left: 4px;
 159 }
 160 .slider.slider-vertical .tooltip {
 161   -ms-transform: translateY(-50%);
 162   transform: translateY(-50%);
 163 }
 164 .slider.slider-vertical.slider-rtl .slider-track {
 165   left: initial;
 166   right: 25%;
 167 }
 168 .slider.slider-vertical.slider-rtl .slider-selection {
 169   left: initial;
 170   right: 0;
 171 }
 172 .slider.slider-vertical.slider-rtl .slider-tick.triangle,
 173 .slider.slider-vertical.slider-rtl .slider-handle.triangle {
 174   border-width: 10px 10px 10px 0;
 175 }
 176 .slider.slider-vertical.slider-rtl .slider-tick-label-container .slider-tick-label {
 177   padding-left: initial;
 178   padding-right: 4px;
 179 }
 180 .slider.slider-disabled .slider-handle {
 181   background-image: -webkit-linear-gradient(top, #dfdfdf 0%, #bebebe 100%);
 182   background-image: -o-linear-gradient(top, #dfdfdf 0%, #bebebe 100%);
 183   background-image: linear-gradient(to bottom, #dfdfdf 0%, #bebebe 100%);
 184   background-repeat: repeat-x;
 185   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdfdfdf', endColorstr='#ffbebebe', GradientType=0);
 186 }
 187 .slider.slider-disabled .slider-track {
 188   background-image: -webkit-linear-gradient(top, #e5e5e5 0%, #e9e9e9 100%);
 189   background-image: -o-linear-gradient(top, #e5e5e5 0%, #e9e9e9 100%);
 190   background-image: linear-gradient(to bottom, #e5e5e5 0%, #e9e9e9 100%);
 191   background-repeat: repeat-x;
 192   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe5e5e5', endColorstr='#ffe9e9e9', GradientType=0);
 193   cursor: not-allowed;
 194 }
 195 .slider input {
 196   display: none;
 197 }
 198 .slider .tooltip {
 199   pointer-events: none;
 200 }
 201 .slider .tooltip.top {
 202   margin-top: -36px;
 203 }
 204 .slider .tooltip-inner {
 205   white-space: nowrap;
 206   max-width: none;
 207 }
 208 .slider .hide {
 209   display: none;
 210 }
 211 .slider-track {
 212   position: absolute;
 213   cursor: pointer;
 214   background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #f9f9f9 100%);
 215   background-image: -o-linear-gradient(top, #f5f5f5 0%, #f9f9f9 100%);
 216   background-image: linear-gradient(to bottom, #f5f5f5 0%, #f9f9f9 100%);
 217   background-repeat: repeat-x;
 218   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
 219   -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 220   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 221   border-radius: 4px;
 222 }
 223 .slider-selection {
 224   position: absolute;
 225   background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
 226   background-image: -o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
 227   background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%);
 228   background-repeat: repeat-x;
 229   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
 230   -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
 231   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
 232   -webkit-box-sizing: border-box;
 233   -moz-box-sizing: border-box;
 234   box-sizing: border-box;
 235   border-radius: 4px;
 236 }
 237 .slider-selection.tick-slider-selection {
 238   background-image: -webkit-linear-gradient(top, #8ac1ef 0%, #82b3de 100%);
 239   background-image: -o-linear-gradient(top, #8ac1ef 0%, #82b3de 100%);
 240   background-image: linear-gradient(to bottom, #8ac1ef 0%, #82b3de 100%);
 241   background-repeat: repeat-x;
 242   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8ac1ef', endColorstr='#ff82b3de', GradientType=0);
 243 }
 244 .slider-track-low,
 245 .slider-track-high {
 246   position: absolute;
 247   background: transparent;
 248   -webkit-box-sizing: border-box;
 249   -moz-box-sizing: border-box;
 250   box-sizing: border-box;
 251   border-radius: 4px;
 252 }
 253 .slider-handle {
 254   position: absolute;
 255   top: 0;
 256   width: 20px;
 257   height: 20px;
 258   background-color: #337ab7;
 259   background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
 260   background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
 261   background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
 262   background-repeat: repeat-x;
 263   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
 264   filter: none;
 265   -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
 266   box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
 267   border: 0px solid transparent;
 268 }
 269 .slider-handle:hover {
 270   cursor: pointer;
 271 }
 272 .slider-handle.round {
 273   border-radius: 50%;
 274 }
 275 .slider-handle.triangle {
 276   background: transparent none;
 277 }
 278 .slider-handle.custom {
 279   background: transparent none;
 280 }
 281 .slider-handle.custom::before {
 282   line-height: 20px;
 283   font-size: 20px;
 284   content: '\2605';
 285   color: #726204;
 286 }
 287 .slider-tick {
 288   position: absolute;
 289   cursor: pointer;
 290   width: 20px;
 291   height: 20px;
 292   background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
 293   background-image: -o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
 294   background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%);
 295   background-repeat: repeat-x;
 296   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
 297   -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
 298   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
 299   -webkit-box-sizing: border-box;
 300   -moz-box-sizing: border-box;
 301   box-sizing: border-box;
 302   filter: none;
 303   opacity: 0.8;
 304   border: 0px solid transparent;
 305 }
 306 .slider-tick.round {
 307   border-radius: 50%;
 308 }
 309 .slider-tick.triangle {
 310   background: transparent none;
 311 }
 312 .slider-tick.custom {
 313   background: transparent none;
 314 }
 315 .slider-tick.custom::before {
 316   line-height: 20px;
 317   font-size: 20px;
 318   content: '\2605';
 319   color: #726204;
 320 }
 321 .slider-tick.in-selection {
 322   background-image: -webkit-linear-gradient(top, #8ac1ef 0%, #82b3de 100%);
 323   background-image: -o-linear-gradient(top, #8ac1ef 0%, #82b3de 100%);
 324   background-image: linear-gradient(to bottom, #8ac1ef 0%, #82b3de 100%);
 325   background-repeat: repeat-x;
 326   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8ac1ef', endColorstr='#ff82b3de', GradientType=0);
 327   opacity: 1;
 328 }