Skip to content

Commit aa9a667

Browse files
adamdbradleyadamdbradley
committed
feat(picker): add ios/md/wp picker styles
1 parent 066ab71 commit aa9a667

File tree

8 files changed

+932
-153
lines changed

8 files changed

+932
-153
lines changed

‎ionic/components/picker/picker.ios.scss

Lines changed: 97 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,45 +5,59 @@
55
// --------------------------------------------------
66

77
$picker-ios-height: 260px !default;
8-
$picker-ios-background-color: #cfd5da !default;
8+
$picker-ios-border-color: $list-ios-border-color !default;
9+
$picker-ios-background-color: $list-ios-background-color !default;
910

1011
$picker-ios-toolbar-height: 44px !default;
11-
$picker-ios-toolbar-background-color: #f7f7f8 !default;
12+
$picker-ios-toolbar-background-color: $picker-ios-background-color !default;
1213

1314
$picker-ios-button-height: $picker-ios-toolbar-height !default;
14-
$picker-ios-button-text-color: color($colors-ios, primary) !default;
15+
$picker-ios-button-text-color: $link-ios-color !default;
1516
$picker-ios-button-background-color: transparent !default;
1617

17-
$picker-ios-option-offset-y: 90px !default;
18-
$picker-ios-option-font-size: 18px !default;
19-
$picker-ios-option-line-height: 24px !default;
18+
$picker-ios-column-padding: 0 12px !default;
19+
20+
$picker-ios-option-padding: 0 10px !default;
21+
$picker-ios-option-text-color: $list-ios-text-color !default;
22+
$picker-ios-option-font-size: 22px !default;
23+
$picker-ios-option-height: 42px !default;
24+
$picker-ios-option-offset-y: (($picker-ios-height - $picker-ios-toolbar-height) / 2) - ($picker-ios-option-height / 2) - 10 !default;
25+
26+
$picker-highlight-opacity: .8 !default;
2027

2128

2229
.picker-wrapper {
2330
height: $picker-ios-height;
2431

25-
border-top: 1px solid #929499;
32+
border-top: 1px solid $picker-ios-border-color;
2633

2734
background: $picker-ios-background-color;
2835
}
2936

30-
.hairlines .picker-wrapper {
31-
border-width: $hairlines-width;
32-
}
33-
3437
.picker-toolbar {
3538
display: flex;
3639

3740
height: $picker-ios-toolbar-height;
41+
42+
border-bottom: 1px solid $picker-ios-border-color;
43+
3844
background: $picker-ios-toolbar-background-color;
3945
}
4046

47+
.hairlines .picker-wrapper,
48+
.hairlines .picker-toolbar {
49+
border-width: $hairlines-width;
50+
}
51+
4152
.picker-toolbar-button {
4253
flex: 1;
54+
4355
text-align: right;
4456
}
4557

4658
.picker-toolbar-cancel {
59+
font-weight: normal;
60+
4761
text-align: left;
4862
}
4963

@@ -57,23 +71,85 @@ $picker-ios-option-line-height: 24px !default;
5771
background: $picker-ios-button-background-color;
5872
}
5973

60-
.picker-offset {
61-
transform: translateY($picker-ios-option-offset-y);
74+
.picker-columns {
75+
height: $picker-ios-height - $picker-ios-toolbar-height;
76+
77+
perspective: 1800px;
6278
}
6379

64-
.picker-column {
65-
padding: 0 10px;
80+
.picker-col {
81+
padding: $picker-ios-column-padding;
82+
83+
transform-style: preserve-3d;
6684
}
6785

6886
.picker-prefix,
6987
.picker-suffix,
70-
.picker-options {
71-
padding: 0 8px;
88+
.picker-opts {
89+
top: $picker-ios-option-offset-y;
90+
7291
font-size: $picker-ios-option-font-size;
73-
line-height: $picker-ios-option-line-height;
92+
line-height: $picker-ios-option-height;
93+
color: $picker-ios-option-text-color;
94+
95+
transform-style: preserve-3d;
96+
97+
pointer-events: none;
7498
}
7599

76-
.picker-prefix,
77-
.picker-suffix {
78-
padding: 0
100+
.picker-opt {
101+
margin: 0;
102+
padding: $picker-ios-option-padding;
103+
104+
width: calc(100% - 24px);
105+
106+
font-size: $picker-ios-option-font-size;
107+
line-height: $picker-ios-option-height;
108+
109+
background: transparent;
110+
transform-origin: center center;
111+
transform-style: preserve-3d;
112+
transition-timing-function: ease-out;
113+
114+
backface-visibility: hidden;
115+
116+
pointer-events: auto;
117+
}
118+
119+
.picker-above-highlight {
120+
position: absolute;
121+
top: 0;
122+
left: 0;
123+
z-index: 10;
124+
display: block;
125+
126+
width: 100%;
127+
height: $picker-ios-option-offset-y + 4px;
128+
129+
border-bottom: 1px solid $picker-ios-border-color;
130+
131+
background: linear-gradient(to bottom,
132+
rgba($picker-ios-background-color, 1) 20%,
133+
rgba($picker-ios-background-color, .7) 100%);
134+
135+
transform: translate3d(0, 0, 90px);
136+
}
137+
138+
.picker-below-highlight {
139+
position: absolute;
140+
top: $picker-ios-option-offset-y + $picker-ios-option-height - 4;
141+
left: 0;
142+
z-index: 11;
143+
display: block;
144+
145+
width: 100%;
146+
height: $picker-ios-option-offset-y + $picker-ios-option-height;
147+
148+
border-top: 1px solid $picker-ios-border-color;
149+
150+
background: linear-gradient(to top,
151+
rgba($picker-ios-background-color, 1) 30%,
152+
rgba($picker-ios-background-color, .7) 100%);
153+
154+
transform: translate3d(0, 0, 90px);
79155
}

‎ionic/components/picker/picker.md.scss

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,159 @@
33

44
// Material Design Picker
55
// --------------------------------------------------
6+
7+
$picker-md-height: 260px !default;
8+
$picker-md-border-color: $list-md-border-color !default;
9+
$picker-md-background-color: $list-md-background-color !default;
10+
11+
$picker-md-toolbar-height: 44px !default;
12+
$picker-md-toolbar-background-color: $picker-md-background-color !default;
13+
14+
$picker-md-button-height: $picker-md-toolbar-height !default;
15+
$picker-md-button-text-color: $link-md-color !default;
16+
$picker-md-button-background-color: transparent !default;
17+
18+
$picker-md-column-padding: 0 12px !default;
19+
20+
$picker-md-option-padding: 0 10px !default;
21+
$picker-md-option-text-color: $list-md-text-color !default;
22+
$picker-md-option-font-size: 18px !default;
23+
$picker-md-option-height: 42px !default;
24+
$picker-md-option-offset-y: (($picker-md-height - $picker-md-toolbar-height) / 2) - ($picker-md-option-height / 2) - 10 !default;
25+
26+
$picker-md-option-selected-font-size: 24px !default;
27+
$picker-md-option-selected-color: $link-md-color !default;
28+
29+
$picker-highlight-opacity: .8 !default;
30+
31+
32+
.picker-wrapper {
33+
height: $picker-md-height;
34+
35+
border-top: 1px solid $picker-md-border-color;
36+
37+
background: $picker-md-background-color;
38+
}
39+
40+
.picker-toolbar {
41+
display: flex;
42+
43+
justify-content: flex-end;
44+
45+
height: $picker-md-toolbar-height;
46+
47+
background: $picker-md-toolbar-background-color;
48+
}
49+
50+
.hairlines .picker-wrapper,
51+
.hairlines .picker-toolbar {
52+
border-width: $hairlines-width;
53+
}
54+
55+
.picker-button,
56+
.picker-button.activated {
57+
margin: 0;
58+
59+
height: $picker-md-button-height;
60+
61+
color: $picker-md-button-text-color;
62+
background: $picker-md-button-background-color;
63+
64+
box-shadow: none;
65+
}
66+
67+
.picker-columns {
68+
height: $picker-md-height - $picker-md-toolbar-height;
69+
70+
perspective: 1800px;
71+
}
72+
73+
.picker-col {
74+
padding: $picker-md-column-padding;
75+
76+
transform-style: preserve-3d;
77+
}
78+
79+
.picker-prefix,
80+
.picker-suffix,
81+
.picker-opts {
82+
top: $picker-md-option-offset-y;
83+
84+
font-size: $picker-md-option-font-size;
85+
line-height: $picker-md-option-height;
86+
color: $picker-md-option-text-color;
87+
88+
transform-style: preserve-3d;
89+
90+
pointer-events: none;
91+
}
92+
93+
.picker-opts ion-button-effect {
94+
display: none;
95+
}
96+
97+
.picker-opt {
98+
margin: 0;
99+
padding: $picker-md-option-padding;
100+
101+
width: calc(100% - 24px);
102+
103+
font-size: $picker-md-option-font-size;
104+
line-height: $picker-md-option-height;
105+
106+
background: transparent;
107+
108+
transition-timing-function: ease-out;
109+
110+
backface-visibility: hidden;
111+
112+
pointer-events: auto;
113+
}
114+
115+
.picker-opt .button-inner {
116+
transition: 200ms;
117+
}
118+
119+
.picker-prefix,
120+
.picker-suffix,
121+
.picker-opt-selected {
122+
font-size: $picker-md-option-selected-font-size;
123+
124+
color: $picker-md-option-selected-color;
125+
}
126+
127+
.picker-above-highlight {
128+
position: absolute;
129+
top: 0;
130+
left: 0;
131+
z-index: 10;
132+
133+
width: 100%;
134+
height: $picker-md-option-offset-y + 4px;
135+
136+
border-bottom: 1px solid $picker-md-border-color;
137+
138+
background: linear-gradient(to bottom,
139+
rgba($picker-md-background-color, 1) 20%,
140+
rgba($picker-md-background-color, .7) 100%);
141+
142+
transform: translate3d(0, 0, 90px);
143+
}
144+
145+
.picker-below-highlight {
146+
position: absolute;
147+
top: $picker-md-option-offset-y + $picker-md-option-height - 4;
148+
left: 0;
149+
z-index: 11;
150+
151+
width: 100%;
152+
height: $picker-md-option-offset-y + $picker-md-option-height;
153+
154+
border-top: 1px solid $picker-md-border-color;
155+
156+
background: linear-gradient(to top,
157+
rgba($picker-md-background-color, 1) 30%,
158+
rgba($picker-md-background-color, .7) 100%);
159+
160+
transform: translate3d(0, 0, 90px);
161+
}

0 commit comments

Comments
 (0)