Subversion Repositories SmartDukaan

Rev

Details | Last modification | View Log | RSS feed

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