Skip to content

Commit a9c995d

Browse files
brandyscarneybrandyscarney
committed
feat(windows): initial add of windows mode
basically a copy of md for now references #5565
1 parent 1495a13 commit a9c995d

File tree

14 files changed

+581
-2
lines changed

14 files changed

+581
-2
lines changed

‎gulpfile.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -266,6 +266,7 @@ gulp.task('sass', function() {
266266
gulp.src([
267267
'ionic/ionic.ios.scss',
268268
'ionic/ionic.md.scss',
269+
'ionic/ionic.wp.scss',
269270
'ionic/ionic.scss'
270271
])
271272
.pipe(sass({
@@ -300,6 +301,7 @@ gulp.task('sass.themes', function() {
300301

301302
buildTheme('ios');
302303
buildTheme('md');
304+
buildTheme('wp');
303305
});
304306

305307
/**

‎ionic/components.wp.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
2+
// Windows Globals
3+
@import "globals.wp";
4+
5+
6+
// Windows Components
7+
@import
8+
"components/app/app.wp",
9+
"components/button/button.wp";

‎ionic/components/app/app.wp.scss

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
@import "../../globals.wp";
2+
3+
// Windows App
4+
// --------------------------------------------------
5+
6+
ion-content {
7+
color: $text-wp-color;
8+
}
9+
10+
p {
11+
color: $paragraph-wp-color;
12+
}
13+
14+
a {
15+
color: $link-wp-color;
16+
}
17+
18+
hr {
19+
background-color: rgba(0, 0, 0, 0.08);
20+
}
21+
22+
@each $color-name, $color-value in $colors-wp {
23+
h1, h2, h3, h4, h5, h6,
24+
p,
25+
span,
26+
a:not([button]),
27+
small,
28+
b,
29+
i,
30+
strong,
31+
em,
32+
sub,
33+
sup,
34+
ion-icon {
35+
&[#{$color-name}] {
36+
color: $color-value !important;
37+
}
38+
}
39+
}

‎ionic/components/button/button.wp.scss

Lines changed: 308 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,308 @@
1+
@import "../../globals.wp";
2+
@import "./button";
3+
4+
// Windows Button
5+
// --------------------------------------------------
6+
7+
$button-wp-margin: 0.4rem 0.2rem !default;
8+
$button-wp-padding: 0 1.1em !default;
9+
$button-wp-font-size: 1.4rem !default;
10+
$button-wp-height: 3.6rem !default;
11+
$button-wp-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
12+
$button-wp-box-shadow-active: 0 3px 5px rgba(0, 0, 0, 0.14), 0 3px 5px rgba(0, 0, 0, 0.21) !default;
13+
14+
$button-wp-border-radius: 2px !default;
15+
$button-wp-animation-curve: cubic-bezier(0.4, 0, 0.2, 1) !default;
16+
$button-wp-transition-duration: 300ms !default;
17+
18+
$button-wp-clear-hover-background-color: rgba(158, 158, 158, 0.1) !default;
19+
$button-wp-clear-active-background-color: rgba(158, 158, 158, 0.2) !default;
20+
21+
$button-wp-fab-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.14), 0 4px 5px rgba(0, 0, 0, 0.1) !default;
22+
$button-wp-fab-box-shadow-active: 0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4px 7px 0 rgba(0, 0, 0, 0.1) !default;
23+
24+
$button-wp-color: map-get($colors-wp, primary) !default;
25+
$button-wp-color-activated: color-shade($button-wp-color) !default;
26+
$button-wp-text-color: color-inverse($button-wp-color) !default;
27+
$button-wp-hover-opacity: 0.8 !default;
28+
29+
$button-wp-large-font-size: 2rem !default;
30+
$button-wp-large-height: 2.8em !default;
31+
$button-wp-large-padding: 1.0em !default;
32+
$button-wp-small-font-size: 1.3rem !default;
33+
$button-wp-small-height: 2.1em !default;
34+
$button-wp-small-padding: 0.9em !default;
35+
$button-wp-small-icon-font-size: 1.4em !default;
36+
37+
38+
// Windows Default Button
39+
// --------------------------------------------------
40+
41+
.button {
42+
margin: $button-wp-margin;
43+
padding: $button-wp-padding;
44+
height: $button-wp-height;
45+
border-radius: $button-wp-border-radius;
46+
47+
font-weight: 500;
48+
font-size: $button-wp-font-size;
49+
50+
color: $button-wp-text-color;
51+
background-color: $button-wp-color;
52+
box-shadow: $button-wp-box-shadow;
53+
54+
text-transform: uppercase;
55+
56+
transition: box-shadow $button-wp-transition-duration $button-wp-animation-curve,
57+
background-color $button-wp-transition-duration $button-wp-animation-curve,
58+
color $button-wp-transition-duration $button-wp-animation-curve;
59+
60+
&:hover:not(.disable-hover) {
61+
background-color: $button-wp-color;
62+
}
63+
64+
&.activated {
65+
box-shadow: $button-wp-box-shadow-active;
66+
background-color: $button-wp-color-activated;
67+
}
68+
69+
ion-button-effect {
70+
background-color: $button-wp-text-color;
71+
}
72+
}
73+
74+
75+
// Windows Default Button Color Mixin
76+
// --------------------------------------------------
77+
78+
@mixin wp-button-default($color-name, $color-value) {
79+
80+
.button-#{$color-name} {
81+
$bg-color: $color-value;
82+
$bg-color-activated: color-shade($bg-color);
83+
$fg-color: color-inverse($bg-color);
84+
85+
color: $fg-color;
86+
background-color: $bg-color;
87+
88+
&:hover:not(.disable-hover) {
89+
background-color: $bg-color;
90+
}
91+
92+
&.activated {
93+
opacity: 1;
94+
background-color: $bg-color-activated;
95+
}
96+
97+
ion-button-effect {
98+
background-color: $fg-color;
99+
}
100+
}
101+
102+
}
103+
104+
105+
// Windows Button Sizes
106+
// --------------------------------------------------
107+
108+
.button-large {
109+
padding: 0 $button-wp-large-padding;
110+
height: $button-wp-large-height;
111+
font-size: $button-wp-large-font-size;
112+
}
113+
114+
.button-small {
115+
padding: 0 $button-wp-small-padding;
116+
height: $button-wp-small-height;
117+
font-size: $button-wp-small-font-size;
118+
}
119+
120+
.button-small.button-icon-only ion-icon {
121+
font-size: $button-wp-small-icon-font-size;
122+
}
123+
124+
// Windows Block Button
125+
// --------------------------------------------------
126+
127+
.button-block {
128+
margin-left: 0;
129+
margin-right: 0;
130+
}
131+
132+
// Windows Full Button
133+
// --------------------------------------------------
134+
135+
.button-full {
136+
margin-right: 0;
137+
margin-left: 0;
138+
border-radius: 0;
139+
border-right-width: 0;
140+
border-left-width: 0;
141+
}
142+
143+
// Windows Outline Button
144+
// --------------------------------------------------
145+
146+
.button-outline {
147+
border-width: 1px;
148+
border-style: solid;
149+
border-color: $button-wp-color;
150+
background-color: transparent;
151+
color: $button-wp-color;
152+
box-shadow: none;
153+
154+
&:hover:not(.disable-hover) {
155+
background-color: $button-wp-clear-hover-background-color;
156+
}
157+
158+
&.activated {
159+
opacity: 1;
160+
box-shadow: none;
161+
background-color: transparent;
162+
}
163+
164+
ion-button-effect {
165+
background-color: $button-wp-color;
166+
}
167+
}
168+
169+
170+
// Windows Outline Button Color Mixin
171+
// --------------------------------------------------
172+
173+
@mixin wp-button-outline($color-name, $color-value) {
174+
175+
.button-outline-#{$color-name} {
176+
$fg-color: color-shade($color-value, 5%);
177+
border-color: $fg-color;
178+
background-color: transparent;
179+
color: $fg-color;
180+
181+
&:hover:not(.disable-hover) {
182+
background-color: $button-wp-clear-hover-background-color;
183+
}
184+
185+
&.activated {
186+
background-color: transparent;
187+
}
188+
189+
ion-button-effect {
190+
background-color: $fg-color;
191+
}
192+
}
193+
194+
}
195+
196+
197+
// Windows Clear Button
198+
// --------------------------------------------------
199+
200+
.button-clear {
201+
border-color: transparent;
202+
opacity: 1;
203+
box-shadow: none;
204+
background-color: transparent;
205+
color: $button-wp-color;
206+
207+
&.activated {
208+
background-color: $button-wp-clear-active-background-color;
209+
box-shadow: none;
210+
}
211+
212+
&:hover:not(.disable-hover) {
213+
background-color: $button-wp-clear-hover-background-color;
214+
}
215+
216+
ion-button-effect {
217+
background-color: #999;
218+
}
219+
}
220+
221+
222+
// Windows Clear Button Color Mixin
223+
// --------------------------------------------------
224+
225+
@mixin wp-button-clear($color-name, $color-value) {
226+
227+
.button-clear-#{$color-name} {
228+
$fg-color: $color-value;
229+
border-color: transparent;
230+
background-color: transparent;
231+
color: $fg-color;
232+
233+
&.activated {
234+
background-color: $button-wp-clear-active-background-color;
235+
box-shadow: none;
236+
}
237+
238+
&:hover:not(.disable-hover) {
239+
color: $fg-color;
240+
}
241+
}
242+
}
243+
244+
245+
// Windows Round Button
246+
// --------------------------------------------------
247+
248+
.button-round {
249+
padding: $button-round-padding;
250+
border-radius: $button-round-border-radius;
251+
}
252+
253+
254+
// Windows FAB Button
255+
// --------------------------------------------------
256+
257+
.button-fab {
258+
border-radius: 50%;
259+
box-shadow: $button-wp-fab-box-shadow;
260+
261+
transition: box-shadow $button-wp-transition-duration $button-wp-animation-curve,
262+
background-color $button-wp-transition-duration $button-wp-animation-curve,
263+
color $button-wp-transition-duration $button-wp-animation-curve;
264+
265+
&.activated {
266+
box-shadow: $button-wp-fab-box-shadow-active;
267+
}
268+
}
269+
270+
.button-icon-only {
271+
padding: 0;
272+
}
273+
274+
275+
// Windows Ripple Effect
276+
// --------------------------------------------------
277+
278+
$ripple-background-color: #555 !default;
279+
280+
ion-button-effect {
281+
position: absolute;
282+
z-index: 0;
283+
display: block;
284+
border-radius: 50%;
285+
286+
background-color: $ripple-background-color;
287+
opacity: 0.2;
288+
289+
pointer-events: none;
290+
transition-timing-function: ease-in-out;
291+
}
292+
293+
294+
// Generate Windows Button Colors
295+
// --------------------------------------------------
296+
297+
@each $color-name, $color-value in $colors-wp {
298+
@include wp-button-default($color-name, $color-value);
299+
@include wp-button-outline($color-name, $color-value);
300+
@include wp-button-clear($color-name, $color-value);
301+
}
302+
303+
304+
// Core Button Overrides
305+
// --------------------------------------------------
306+
307+
@import "./button-fab";
308+
@import "./button-icon";

‎ionic/config/bootstrap.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ function setupDom(window, document, config, platform, clickBlock, featureDetect)
8181
}
8282

8383
// set the mode class name
84-
// ios/md
84+
// ios/md/wp
8585
bodyEle.classList.add(mode);
8686

8787
// language and direction

0 commit comments

Comments
 (0)