afm-client/app/Frontend/widgets/RangeSliders/Rangeslider.scss

   1 /*
   2  * ibz-Datepicker for Foundation
   3  *
   4  * Author: Fulup Ar Foll
   5  * Date  : March-2015
   6  * Object: SASS stylesheet, customized to Foundation
   7  * References: https://css-tricks.com/stripes-css/
   8  *
   9  */
  10 @import "app/ibz-mixins";
  11
  12 .range-slider-handle {
  13   display: inline-block;
  14   position: absolute;
  15   z-index: 1;
  16   top: -0.2rem;
  17   width: 2rem;
  18   height: 1.375rem;
  19   border: 1px solid none;
  20   cursor: pointer;
  21   background: #008cba;
  22 }
  23
  24 .range-slider.radius, .range-slider-handle {
  25   background: #008cba;
  26   -webkit-border-radius: 3px;
  27   border-radius: 3px;
  28 }
  29
  30 .range-slider-active-segment {
  31   display: inline-block;
  32   top: 0.07rem;
  33   position: absolute;
  34   height: 0.80rem;
  35   background: #e5e5e5;
  36 }
  37
  38 .ibz-range-slider {
  39    background-color: rgba(154, 205, 50, 0.6) !important;
  40    height: 1rem;
  41    position: relative;
  42
  43   .range-slider-active-segment {
  44     background-color: rgba(82, 168, 200, 0.6);
  45   }
  46
  47   &-display {
  48     background-color: rgba(82, 168, 200, 0.6) !important;
  49     width : 4rem !important;
  50     padding: .25rem;
  51     text-align:center
  52    }
  53
  54    &-start,&-stop {
  55    display: inline-block;
  56    position: absolute;
  57    padding-top: 2px;
  58    height: 95%;
  59    background: repeating-linear-gradient(
  60     45deg,
  61     #606dbc,
  62     #606dbc 10px,
  63     #465298 10px,
  64     #465298 20px
  65   );}
  66
  67 }