1
  2/**
  3 * Range
  4 * --------------------------------------------------
  5 */
  6
  7 .range input{
  8  display: inline-block;
  9  overflow: hidden;
 10  margin-top: 5px;
 11  margin-bottom: 5px;
 12  padding-right: 2px;
 13  padding-left: 1px;
 14  width: auto;
 15  height: $range-slider-height + 15;
 16  outline: none;
 17  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, $range-default-track-bg), color-stop(100%, $range-default-track-bg));
 18  background: linear-gradient(to right, $range-default-track-bg 0%, $range-default-track-bg 100%);
 19  background-position: center;
 20  background-size: 99% $range-track-height;
 21  background-repeat: no-repeat;
 22  -webkit-appearance: none;
 23
 24  &::-moz-focus-outer {
 25    /* hide the focus outline in Firefox */
 26    border: 0;
 27  }
 28
 29  &::-webkit-slider-thumb {
 30    position: relative;
 31    width: $range-slider-width;
 32    height: $range-slider-height;
 33    border-radius: $range-slider-border-radius;
 34    background-color: $toggle-handle-off-bg-color;
 35    box-shadow: $range-slider-box-shadow;
 36    cursor: pointer;
 37    -webkit-appearance: none;
 38    border: 0;
 39  }
 40
 41  &::-webkit-slider-thumb:before{
 42    /* what creates the colorful line on the left side of the slider */
 43    position: absolute;
 44    top: ($range-slider-height / 2) - ($range-track-height / 2);
 45    left: -2001px;
 46    width: 2000px;
 47    height: $range-track-height;
 48    background: $dark;
 49    content: ' ';
 50  }
 51
 52  &::-webkit-slider-thumb:after {
 53    /* create a larger (but hidden) hit area */
 54    position: absolute;
 55    top: -15px;
 56    left: -15px;
 57    padding: 30px;
 58    content: ' ';
 59    //background: red;
 60    //opacity: .5;
 61  }
 62   &::-ms-fill-lower{
 63     height: $range-track-height;
 64     background:$dark;
 65   }
 66  /*
 67   &::-ms-track{
 68     background: transparent;
 69     border-color: transparent;
 70     border-width: 11px 0 16px;
 71     color:transparent;
 72     margin-top:20px;
 73   }
 74   &::-ms-thumb {
 75     width: $range-slider-width;
 76     height: $range-slider-height;
 77     border-radius: $range-slider-border-radius;
 78     background-color: $toggle-handle-off-bg-color;
 79     border-color:$toggle-handle-off-bg-color;
 80     box-shadow: $range-slider-box-shadow;
 81     margin-left:1px;
 82     margin-right:1px;
 83     outline:none;
 84   }
 85   &::-ms-fill-upper {
 86     height: $range-track-height;
 87     background:$range-default-track-bg;
 88   }
 89   */
 90}
 91
 92.range {
 93  @include display-flex();
 94  @include align-items(center);
 95  padding: 2px 11px;
 96
 97  &.range-light {
 98    input { @include range-style($range-light-track-bg); }
 99  }
100  &.range-stable {
101    input { @include range-style($range-stable-track-bg); }
102  }
103  &.range-positive {
104    input { @include range-style($range-positive-track-bg); }
105  }
106  &.range-calm {
107    input { @include range-style($range-calm-track-bg); }
108  }
109  &.range-balanced {
110    input { @include range-style($range-balanced-track-bg); }
111  }
112  &.range-assertive {
113    input { @include range-style($range-assertive-track-bg); }
114  }
115  &.range-energized {
116    input { @include range-style($range-energized-track-bg); }
117  }
118  &.range-royal {
119    input { @include range-style($range-royal-track-bg); }
120  }
121  &.range-dark {
122    input { @include range-style($range-dark-track-bg); }
123  }
124}
125
126.range .icon {
127  @include flex(0);
128  display: block;
129  min-width: $range-icon-size;
130  text-align: center;
131  font-size: $range-icon-size;
132}
133
134.range input {
135  @include flex(1);
136  display: block;
137  margin-right: 10px;
138  margin-left: 10px;
139}
140
141.range-label {
142  @include flex(0, 0, auto);
143  display: block;
144  white-space: nowrap;
145}
146
147.range-label:first-child {
148  padding-left: 5px;
149}
150.range input + .range-label {
151  padding-right: 5px;
152  padding-left: 0;
153}
154
155// WP range height must be auto
156.platform-windowsphone{
157  .range input{
158    height:auto;
159  }
160}