Skip to content

Commit af6d5e4

Browse files
brandyscarneybrandyscarney
committed
feat(range): add md and wp styling, tweak ios styling
references #5422
1 parent 2c6e11b commit af6d5e4

File tree

4 files changed

+383
-11
lines changed

4 files changed

+383
-11
lines changed

‎src/components/range/range.ios.scss

Lines changed: 28 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,30 @@
33
// iOS Range
44
// --------------------------------------------------
55

6+
$range-ios-padding: 8px 16px !default;
7+
68
$range-ios-slider-height: 42px !default;
79

810
$range-ios-hit-width: 42px !default;
911
$range-ios-hit-height: $range-ios-slider-height !default;
1012

11-
$range-ios-bar-height: 2px !default;
13+
$range-ios-bar-height: 1px !default;
1214
$range-ios-bar-background-color: #bdbdbd !default;
1315
$range-ios-bar-active-background-color: color($colors-ios, primary) !default;
1416

15-
$range-ios-knob-width: 12px !default;
17+
$range-ios-knob-width: 28px !default;
1618
$range-ios-knob-height: $range-ios-knob-width !default;
17-
$range-ios-knob-background-color: $range-ios-bar-active-background-color !default;
19+
$range-ios-knob-box-shadow: 0 3px 1px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.13), 0 0 0 1px rgba(0, 0, 0, 0.02) !default;
20+
$range-ios-knob-border-radius: 50% !default;
21+
$range-ios-knob-background-color: #fff !default;
1822

1923
$range-ios-tick-width: 6px !default;
2024
$range-ios-tick-height: $range-ios-tick-width !default;
2125
$range-ios-tick-background-color: $range-ios-bar-background-color !default;
2226
$range-ios-tick-active-background-color: $range-ios-bar-active-background-color !default;
2327

24-
$range-ios-pin-background-color: $range-ios-bar-active-background-color !default;
25-
$range-ios-pin-color: color-contrast($colors-ios, $range-ios-pin-background-color) !default;
28+
$range-ios-pin-background-color: transparent !default;
29+
$range-ios-pin-color: $text-ios-color !default;
2630
$range-ios-pin-font-size: 12px !default;
2731

2832

@@ -44,8 +48,8 @@ ion-range {
4448
position: relative;
4549
display: block;
4650

47-
margin-top: -16px;
48-
padding: 8px;
51+
margin-top: -8px;
52+
padding: $range-ios-padding;
4953
}
5054

5155
.range-slider {
@@ -101,16 +105,18 @@ ion-range {
101105

102106
.range-knob {
103107
position: absolute;
104-
top: ($range-ios-hit-height / 2) - ($range-ios-knob-height / 2) + ($range-ios-bar-height / 2);
108+
top: ($range-ios-hit-height / 2) - ($range-ios-knob-height / 2) + ($range-ios-bar-height / 2) - .5px;
105109
left: ($range-ios-hit-width / 2) - ($range-ios-knob-width / 2);
106110

107111
width: $range-ios-knob-width;
108112
height: $range-ios-knob-height;
109113

110-
border-radius: 50%;
114+
border-radius: $range-ios-knob-border-radius;
111115

112116
background: $range-ios-knob-background-color;
113117

118+
box-shadow: $range-ios-knob-box-shadow;
119+
114120
pointer-events: none;
115121
}
116122

@@ -160,3 +166,16 @@ ion-range {
160166
.range-knob-pressed .range-pin {
161167
transform: translate3d(0, 0, 0) scale(1);
162168
}
169+
170+
// Generate iOS Range Colors
171+
// --------------------------------------------------
172+
173+
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
174+
175+
ion-range[#{$color-name}] {
176+
.range-bar-active {
177+
background: $color-base;
178+
}
179+
}
180+
181+
}

‎src/components/range/range.md.scss

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,181 @@
22

33
// Material Design Range
44
// --------------------------------------------------
5+
6+
$range-md-padding: 8px !default;
7+
8+
$range-md-slider-height: 42px !default;
9+
10+
$range-md-hit-width: 42px !default;
11+
$range-md-hit-height: $range-md-slider-height !default;
12+
13+
$range-md-bar-height: 2px !default;
14+
$range-md-bar-background-color: #bdbdbd !default;
15+
$range-md-bar-active-background-color: color($colors-md, primary) !default;
16+
17+
$range-md-knob-width: 12px !default;
18+
$range-md-knob-height: $range-md-knob-width !default;
19+
$range-md-knob-background-color: $range-md-bar-active-background-color !default;
20+
21+
$range-md-tick-width: 0 !default;
22+
$range-md-tick-height: $range-md-tick-width !default;
23+
$range-md-tick-background-color: $range-md-bar-background-color !default;
24+
$range-md-tick-active-background-color: $range-md-bar-active-background-color !default;
25+
26+
$range-md-pin-background-color: $range-md-bar-active-background-color !default;
27+
$range-md-pin-color: color-contrast($colors-md, $range-md-bar-active-background-color) !default;
28+
$range-md-pin-font-size: 12px !default;
29+
30+
31+
.item-range .item-inner {
32+
overflow: visible;
33+
}
34+
35+
.item-range .input-wrapper {
36+
overflow: visible;
37+
38+
flex-direction: column;
39+
}
40+
41+
.item-range ion-range {
42+
width: 100%;
43+
}
44+
45+
ion-range {
46+
position: relative;
47+
display: block;
48+
49+
margin-top: -16px;
50+
padding: $range-md-padding;
51+
}
52+
53+
.range-slider {
54+
position: relative;
55+
56+
height: $range-md-slider-height;
57+
58+
cursor: pointer;
59+
}
60+
61+
.range-bar {
62+
position: absolute;
63+
top: ($range-md-slider-height / 2);
64+
left: 0;
65+
66+
width: 100%;
67+
height: $range-md-bar-height;
68+
69+
background: $range-md-bar-background-color;
70+
71+
pointer-events: none;
72+
}
73+
74+
.range-pressed .range-bar-active {
75+
will-change: left, right;
76+
}
77+
78+
.range-pressed .range-knob-handle {
79+
will-change: left;
80+
}
81+
82+
.range-bar-active {
83+
bottom: 0;
84+
85+
width: auto;
86+
87+
background: $range-md-bar-active-background-color;
88+
}
89+
90+
.range-knob-handle {
91+
position: absolute;
92+
top: ($range-md-slider-height / 2);
93+
left: 0%;
94+
95+
margin-top: -($range-md-hit-height / 2);
96+
margin-left: -($range-md-hit-width / 2);
97+
98+
width: $range-md-hit-width;
99+
height: $range-md-hit-height;
100+
101+
text-align: center;
102+
}
103+
104+
.range-knob {
105+
position: absolute;
106+
top: ($range-md-hit-height / 2) - ($range-md-knob-height / 2) + ($range-md-bar-height / 2);
107+
left: ($range-md-hit-width / 2) - ($range-md-knob-width / 2);
108+
109+
width: $range-md-knob-width;
110+
height: $range-md-knob-height;
111+
112+
border-radius: 50%;
113+
114+
background: $range-md-knob-background-color;
115+
116+
pointer-events: none;
117+
}
118+
119+
.range-tick {
120+
position: absolute;
121+
top: ($range-md-hit-height / 2) - ($range-md-tick-height / 2) + ($range-md-bar-height / 2);
122+
123+
margin-left: ($range-md-tick-width / 2) * -1;
124+
125+
width: $range-md-tick-width;
126+
height: $range-md-tick-height;
127+
128+
border-radius: 50%;
129+
130+
background: $range-md-tick-background-color;
131+
132+
pointer-events: none;
133+
}
134+
135+
.range-tick-active {
136+
background: $range-md-tick-active-background-color;
137+
}
138+
139+
.range-pin {
140+
position: relative;
141+
top: -20px;
142+
display: inline-block;
143+
144+
padding: 8px;
145+
146+
min-width: 28px;
147+
148+
border-radius: 50px;
149+
150+
font-size: $range-md-pin-font-size;
151+
152+
text-align: center;
153+
154+
color: $range-md-pin-color;
155+
156+
background: $range-md-pin-background-color;
157+
158+
transform: translate3d(0, 28px, 0) scale(.01);
159+
transition: transform 120ms ease;
160+
}
161+
162+
.range-knob-pressed .range-pin {
163+
transform: translate3d(0, 0, 0) scale(1);
164+
}
165+
166+
.range-knob-pressed .range-knob {
167+
transform: scale(1.5);
168+
}
169+
170+
// Generate iOS Range Colors
171+
// --------------------------------------------------
172+
173+
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
174+
175+
ion-range[#{$color-name}] {
176+
.range-bar-active,
177+
.range-knob {
178+
background: $color-base;
179+
}
180+
}
181+
182+
}

0 commit comments

Comments
 (0)