Skip to content

Commit 6062bb6

Browse files
committed
feat(windows): initial add of toolbar with some custom theming
references #5565
1 parent b91f8de commit 6062bb6

File tree

3 files changed

+316
-5
lines changed

3 files changed

+316
-5
lines changed

ionic/components.wp.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,5 @@
66
// Windows Components
77
@import
88
"components/app/app.wp",
9-
"components/button/button.wp";
9+
"components/button/button.wp",
10+
"components/toolbar/toolbar.wp";
Lines changed: 310 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,310 @@
1+
@import "../../globals.wp";
2+
@import "./toolbar";
3+
@import "./toolbar-button";
4+
5+
// Windows Toolbar
6+
// --------------------------------------------------
7+
8+
$toolbar-order-wp: (
9+
back-button: 0,
10+
menu-toggle-start: 1,
11+
buttons-left: 2,
12+
content: 3,
13+
buttons-start: 4,
14+
buttons-end: 5,
15+
buttons-right: 6,
16+
menu-toggle-end: 7,
17+
);
18+
19+
$toolbar-wp-padding: 4px !default;
20+
$toolbar-wp-height: 4.6rem !default;
21+
$toolbar-wp-title-font-size: 2.0rem !default;
22+
$toolbar-wp-button-font-size: 1.4rem !default;
23+
$navbar-wp-height: $toolbar-wp-height !default;
24+
25+
$bar-button-wp-color: $toolbar-wp-button-color !default;
26+
$bar-button-wp-border-radius: 2px !default;
27+
28+
29+
.toolbar {
30+
padding: $toolbar-wp-padding;
31+
min-height: $toolbar-wp-height;
32+
}
33+
34+
ion-navbar-section {
35+
min-height: $navbar-wp-height;
36+
}
37+
38+
39+
// Windows Toolbar Background
40+
// --------------------------------------------------
41+
42+
.toolbar-background {
43+
border-color: $toolbar-wp-border-color;
44+
background: $toolbar-wp-background;
45+
}
46+
47+
48+
// Windows Toolbar Content
49+
// --------------------------------------------------
50+
51+
.toolbar-content {
52+
flex: 1;
53+
order: map-get($toolbar-order-wp, content);
54+
max-width: 100%;
55+
}
56+
57+
.toolbar-title {
58+
color: $toolbar-wp-text-color;
59+
padding: 0 12px;
60+
font-size: $toolbar-wp-title-font-size;
61+
font-weight: 500;
62+
}
63+
64+
@mixin wp-toolbar-theme($color-name, $color-value) {
65+
.toolbar[#{$color-name}] {
66+
$fg-color: color-inverse($color-value);
67+
68+
.toolbar-background {
69+
background: $color-value;
70+
}
71+
72+
.bar-button-default,
73+
.bar-button-outline,
74+
.toolbar-title {
75+
color: $fg-color;
76+
}
77+
78+
.bar-button-default,
79+
.bar-button-outline {
80+
ion-button-effect {
81+
background-color: $fg-color;
82+
}
83+
}
84+
85+
.bar-button-outline {
86+
border-color: $fg-color;
87+
}
88+
89+
@each $color-name, $color-value in $colors-wp {
90+
@include wp-bar-button-default($color-name, $color-value);
91+
@include wp-bar-button-outline($color-name, $color-value);
92+
@include wp-bar-button-solid($color-name, $color-value);
93+
}
94+
}
95+
}
96+
97+
98+
// Windows Toolbar Button Placement
99+
// --------------------------------------------------
100+
101+
ion-buttons {
102+
order: map-get($toolbar-order-wp, buttons-start);
103+
transform: translateZ(0px);
104+
}
105+
106+
ion-buttons[left] {
107+
order: map-get($toolbar-order-wp, buttons-left);
108+
}
109+
110+
ion-buttons[left] .bar-button:first-child {
111+
margin-left: 0;
112+
}
113+
114+
ion-buttons[end] {
115+
text-align: right;
116+
order: map-get($toolbar-order-wp, buttons-end);
117+
}
118+
119+
ion-buttons[right] {
120+
text-align: right;
121+
order: map-get($toolbar-order-wp, buttons-right);
122+
}
123+
124+
125+
// Windows Toolbar Button Default
126+
// --------------------------------------------------
127+
128+
.bar-button {
129+
margin-top: 0;
130+
margin-bottom: 0;
131+
margin-left: 0.2rem;
132+
margin-right: 0.2rem;
133+
padding: 0 5px;
134+
height: 32px;
135+
border: 0;
136+
font-size: $toolbar-wp-button-font-size;
137+
border-radius: $bar-button-wp-border-radius;
138+
text-transform: uppercase;
139+
font-weight: 500;
140+
}
141+
142+
.bar-button-solid,
143+
.bar-button-outline {
144+
// restrict the ripple to button size
145+
overflow: hidden;
146+
}
147+
148+
@mixin wp-bar-button-default($color-name, $color-value) {
149+
150+
.bar-button-#{$color-name} {
151+
color: $color-value;
152+
background-color: transparent;
153+
154+
&:hover:not(.disable-hover) {
155+
color: $color-value;
156+
}
157+
}
158+
159+
}
160+
161+
162+
// Windows Toolbar Button Outline
163+
// --------------------------------------------------
164+
165+
.bar-button-outline {
166+
border-width: 1px;
167+
border-style: solid;
168+
border-color: $bar-button-wp-color;
169+
color: $bar-button-wp-color;
170+
background-color: transparent;
171+
172+
&:hover:not(.disable-hover) {
173+
opacity: 0.4;
174+
}
175+
176+
&.activated {
177+
color: color-inverse($bar-button-wp-color);
178+
background-color: $bar-button-wp-color;
179+
}
180+
}
181+
182+
@mixin wp-bar-button-outline($color-name, $color-value) {
183+
184+
.bar-button-outline-#{$color-name} {
185+
$fg-color: color-shade($color-value);
186+
border-color: $fg-color;
187+
color: $fg-color;
188+
background-color: transparent;
189+
190+
&.activated {
191+
color: color-inverse($fg-color);
192+
background-color: $fg-color;
193+
}
194+
}
195+
196+
}
197+
198+
199+
// Windows Toolbar Button Solid
200+
// --------------------------------------------------
201+
202+
.bar-button-solid {
203+
color: color-inverse($bar-button-wp-color);
204+
background-color: $bar-button-wp-color;
205+
206+
&:hover:not(.disable-hover) {
207+
color: color-inverse($bar-button-wp-color);
208+
}
209+
210+
&.activated {
211+
color: color-inverse($bar-button-wp-color);
212+
background-color: color-shade($bar-button-wp-color);
213+
}
214+
}
215+
216+
@mixin wp-bar-button-solid($color-name, $color-value) {
217+
218+
.bar-button-solid-#{$color-name} {
219+
color: color-inverse($color-value);
220+
background-color: $color-value;
221+
222+
&.activated {
223+
background-color: color-shade($color-value);
224+
}
225+
}
226+
227+
}
228+
229+
230+
// Windows Toolbar Button Icon
231+
// --------------------------------------------------
232+
233+
.bar-button-icon-left ion-icon {
234+
padding-right: 0.3em;
235+
font-size: 1.4em;
236+
line-height: 0.67;
237+
pointer-events: none;
238+
}
239+
240+
.bar-button-icon-right ion-icon {
241+
padding-left: 0.4em;
242+
font-size: 1.4em;
243+
line-height: 0.67;
244+
pointer-events: none;
245+
}
246+
247+
.bar-button-icon-only {
248+
padding: 0;
249+
250+
ion-icon {
251+
padding: 0 0.1em;
252+
font-size: 1.8em;
253+
line-height: 0.67;
254+
min-width: 28px;
255+
pointer-events: none;
256+
}
257+
}
258+
259+
260+
// Windows Toolbar Back Button
261+
// --------------------------------------------------
262+
263+
.back-button {
264+
margin: 0 0 0 12px;
265+
box-shadow: none;
266+
}
267+
268+
.back-button-icon {
269+
margin: 0;
270+
min-width: 44px;
271+
font-size: 2.4rem;
272+
font-weight: normal;
273+
text-align: left;
274+
}
275+
276+
277+
// Windows Toolbar Menu Toggle
278+
// --------------------------------------------------
279+
280+
.bar-button-menutoggle {
281+
margin: 0 6px;
282+
padding: 0 2px;
283+
min-width: 44px;
284+
order: map-get($toolbar-order-wp, menu-toggle-start);
285+
286+
ion-icon {
287+
padding: 0 6px;
288+
font-size: 2.4rem;
289+
}
290+
}
291+
292+
.bar-button-menutoggle[end],
293+
.bar-button-menutoggle[right] {
294+
margin: 0 2px;
295+
min-width: 28px;
296+
order: map-get($toolbar-order-wp, menu-toggle-end);
297+
}
298+
299+
300+
// Windows Toolbar Color Generation
301+
// --------------------------------------------------
302+
303+
@include wp-bar-button-default(default, $bar-button-wp-color);
304+
305+
@each $color-name, $color-value in $colors-wp {
306+
@include wp-toolbar-theme($color-name, $color-value);
307+
@include wp-bar-button-default($color-name, $color-value);
308+
@include wp-bar-button-outline($color-name, $color-value);
309+
@include wp-bar-button-solid($color-name, $color-value);
310+
}

ionic/themes/default.wp.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,19 +21,19 @@ $font-size-wp-base: $font-size-base !default;
2121

2222
$toolbar-wp-background: $toolbar-background !default;
2323
$toolbar-wp-border-color: $toolbar-border-color !default;
24-
$toolbar-wp-text-color: #424242 !default;
24+
$toolbar-wp-text-color: $toolbar-text-color !default;
2525
$toolbar-wp-active-color: $toolbar-active-color !default;
2626
$toolbar-wp-inactive-color: $toolbar-inactive-color !default;
27-
$toolbar-wp-button-color: #424242 !default;
27+
$toolbar-wp-button-color: $toolbar-text-color !default;
2828

2929

3030
// Windows List
3131
// --------------------------------------------------
3232

3333
$list-wp-text-color: $list-text-color !default;
34-
$list-wp-border-color: #dedede !default;
34+
$list-wp-border-color: $list-border-color !default;
3535
$list-wp-background-color: $list-background-color !default;
36-
$list-wp-activated-background-color: #f1f1f1 !default;
36+
$list-wp-activated-background-color: #AAAAAA !default;
3737

3838

3939
// Windows Item

0 commit comments

Comments
 (0)