git.roojs.org Git - bootswatch/blob - Eshopper/css/price-range.css

   1 /*!
   2  * Slider for Bootstrap
   3  *
   4  * Copyright 2012 Stefan Petre
   5  * Licensed under the Apache License v2.0
   6  * http://www.apache.org/licenses/LICENSE-2.0
   7  *
   8  */
   9 .slider {
  10   display: inline-block;
  11   vertical-align: middle;
  12   position: relative;
  13 }
  14 .slider.slider-horizontal {
  15   width: 210px;
  16   height: 20px;
  17 }
  18 .slider.slider-horizontal .slider-track {
  19   height: 15px;
  20   left: 0;
  21   margin-top: -5px;
  22   top: 50%;
  23   width: 100%;
  24 }
  25 .slider.slider-horizontal .slider-selection {
  26   height: 100%;
  27   top: 0;
  28   bottom: 0;
  29 }
  30 .slider.slider-horizontal .slider-handle {
  31   margin-left: -12px;
  32   margin-top: 2px;
  33 }
  34
  35 .left-round{
  36   margin-left:2px !important;
  37 }
  38
  39 .slider.slider-horizontal .slider-handle.triangle {
  40   border-width: 0 10px 10px 10px;
  41   width: 0;
  42   height: 0;
  43   border-bottom-color: #0480be;
  44   margin-top: 0;
  45 }
  46 .slider.slider-vertical {
  47   height: 210px;
  48   width: 20px;
  49 }
  50 .slider.slider-vertical .slider-track {
  51   width: 10px;
  52   height: 100%;
  53   margin-left: -5px;
  54   left: 50%;
  55   top: 0;
  56 }
  57 .slider.slider-vertical .slider-selection {
  58   width: 100%;
  59   left: 0;
  60   top: 0;
  61   bottom: 0;
  62 }
  63 .slider.slider-vertical .slider-handle {
  64   margin-left: -5px;
  65   margin-top: -10px;
  66 }
  67 .slider.slider-vertical .slider-handle.triangle {
  68   border-width: 10px 0 10px 10px;
  69   width: 1px;
  70   height: 1px;
  71   border-left-color: #0480be;
  72   margin-left: 0;
  73 }
  74 .slider input {
  75   display: none;
  76 }
  77 .slider .tooltip-inner {
  78   white-space: nowrap;
  79 }
  80 .slider-track {
  81   position: absolute;
  82   cursor: pointer;
  83   background-color: #f7f7f7;
  84   background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
  85   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
  86   background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
  87   background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
  88   background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
  89   background-repeat: repeat-x;
  90   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
  91   -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  92   -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  93   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  94   -webkit-border-radius: 15px;
  95   -moz-border-radius: 15px;
  96   border-radius: 15px;
  97 }
  98
  99 .slider-selection {
 100   -moz-box-sizing: border-box;
 101   background: none repeat scroll 0 0 #FE980F;
 102   border-radius: 15px;
 103   box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset;
 104   position: absolute;
 105 }
 106
 107 .slider-handle {
 108   background: #fff;
 109   box-shadow:none;
 110   height: 10px;
 111   opacity: 1;
 112   position: absolute;
 113   width: 10px;
 114 }
 115
 116 .slider-handle.round {
 117   -webkit-border-radius: 20px;
 118   -moz-border-radius: 20px;
 119   border-radius: 20px;
 120 }
 121 .slider-handle.triangle {
 122   background: transparent none;
 123 }