Subversion Repositories SmartDukaan

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
13542 anikendra 1 
 
2 
/**
3 
 * Range
4 
 * --------------------------------------------------
5 
 */
6 
 
7 
input[type="range"] {
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 
 
58 
}
59 
 
60 
.range {
61 
  @include display-flex();
62 
  @include align-items(center);
63 
  padding: 2px 11px;
64 
 
65 
  &.range-light {
66 
    input { @include range-style($range-light-track-bg); }
67 
  }
68 
  &.range-stable {
69 
    input { @include range-style($range-stable-track-bg); }
70 
  }
71 
  &.range-positive {
72 
    input { @include range-style($range-positive-track-bg); }
73 
  }
74 
  &.range-calm {
75 
    input { @include range-style($range-calm-track-bg); }
76 
  }
77 
  &.range-balanced {
78 
    input { @include range-style($range-balanced-track-bg); }
79 
  }
80 
  &.range-assertive {
81 
    input { @include range-style($range-assertive-track-bg); }
82 
  }
83 
  &.range-energized {
84 
    input { @include range-style($range-energized-track-bg); }
85 
  }
86 
  &.range-royal {
87 
    input { @include range-style($range-royal-track-bg); }
88 
  }
89 
  &.range-dark {
90 
    input { @include range-style($range-dark-track-bg); }
91 
  }
92 
}
93 
 
94 
.range .icon {
95 
  @include flex(0);
96 
  display: block;
97 
  min-width: $range-icon-size;
98 
  text-align: center;
99 
  font-size: $range-icon-size;
100 
}
101 
 
102 
.range input {
103 
  @include flex(1);
104 
  display: block;
105 
  margin-right: 10px;
106 
  margin-left: 10px;
107 
}
108 
 
109 
.range-label {
110 
  @include flex(0, 0, auto);
111 
  display: block;
112 
  white-space: nowrap;
113 
}
114 
 
115 
.range-label:first-child {
116 
  padding-left: 5px;
117 
}
118 
.range input + .range-label {
119 
  padding-right: 5px;
120 
  padding-left: 0;
121 
}
122