Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit 328df77

Browse files
acdvorakacdvorak
authored
feat(toolbar): Add theme color mixins (#1720)
This PR also makes the demo page a little prettier. Fixes #1154
1 parent acb47d7 commit 328df77

15 files changed

+230
-205
lines changed

‎demos/common.scss

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222

2323
// Base style
2424
$mdc-theme-primary: $material-color-grey-900 !default;
25+
$mdc-theme-primary: $material-color-blue-500 !default;
2526
$mdc-theme-secondary: $material-color-light-green-a700 !default;
2627

2728
// Import button and ripple mixins to apply overrides for dark theme
@@ -34,20 +35,19 @@ $mdc-theme-secondary: $material-color-light-green-a700 !default;
3435
@import "../packages/mdc-toolbar/mdc-toolbar";
3536
@import "../packages/mdc-typography/mdc-typography";
3637

38+
$dark-button-color: $material-color-light-green-a200;
39+
3740
fieldset {
3841
margin: 0;
3942
padding: 0;
4043
border: 0;
4144
}
4245

43-
.mdc-toolbar {
44-
a {
45-
color: #f0f0f0;
46-
text-decoration: none;
47-
}
46+
.mdc-toolbar__icon,
47+
.mdc-toolbar__menu-icon {
48+
@include mdc-toolbar-icon-ink-color(#f0f0f0);
4849
}
4950

50-
$dark-button-color: $material-color-light-green-a200;
5151
.mdc-button {
5252
@include mdc-theme-dark {
5353
@include mdc-button-ink-color($dark-button-color);
@@ -89,7 +89,7 @@ $dark-button-color: $material-color-light-green-a200;
8989
background-color: rgba(0, 0, 0, .05);
9090
}
9191

92-
/* Default padding on all examples. */
92+
// Default padding on all examples.
9393
section.example {
9494
margin: 24px;
9595
padding: 24px;

‎demos/toolbar/custom-toolbar.html

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<!--
3+
Copyright 2016 Google Inc. All rights reserved.
4+
5+
Licensed under the Apache License, Version 2.0 (the "License");
6+
you may not use this file except in compliance with the License.
7+
You may obtain a copy of the License at
8+
9+
https://www.apache.org/licenses/LICENSE-2.0
10+
11+
Unless required by applicable law or agreed to in writing, software
12+
distributed under the License is distributed on an "AS IS" BASIS,
13+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
See the License for the specific language governing permissions and
15+
limitations under the License
16+
-->
17+
<html>
18+
<head>
19+
<meta charset="utf-8">
20+
<title>Custom Toolbar - Material Components Catalog</title>
21+
<meta name="viewport" content="width=device-width, initial-scale=1">
22+
<link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png">
23+
<script src="/assets/toolbar/toolbar.css.js"></script>
24+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
25+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
26+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
27+
</head>
28+
<body class="mdc-typography">
29+
<header class="mdc-toolbar demo-toolbar demo-toolbar--custom">
30+
<div class="mdc-toolbar__row">
31+
<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
32+
<a href="#" class="material-icons mdc-toolbar__menu-icon demo-toolbar__menu-icon--custom">menu</a>
33+
<span class="mdc-toolbar__title">Title</span>
34+
</section>
35+
<section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
36+
<a href="#" class="material-icons mdc-toolbar__icon demo-toolbar__icon--custom" aria-label="Download" alt="Download">file_download</a>
37+
<a href="#" class="material-icons mdc-toolbar__icon demo-toolbar__icon--custom" aria-label="Print this page" alt="Print this page">print</a>
38+
<a href="#" class="material-icons mdc-toolbar__icon demo-toolbar__icon--custom" aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a>
39+
</section>
40+
</div>
41+
</header>
42+
<main>
43+
<p class="demo-paragraph">
44+
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
45+
</p>
46+
<p class="demo-paragraph">
47+
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
48+
</p>
49+
<p class="demo-paragraph">
50+
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
51+
</p>
52+
</main>
53+
</body>
54+
</html>

‎demos/toolbar/default-flexible-toolbar.html

Lines changed: 4 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -25,36 +25,11 @@
2525
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
2626
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
2727
<style>
28-
.mdc-toolbar-demo {
29-
margin: 0px;
30-
}
31-
.mdc-toolbar__row:first-child::after {
32-
background-image: url("../images/4-3.jpg");
33-
background-size: cover;
34-
background-position: center;
35-
}
36-
.demo-paragraph {
37-
margin: 0px;
38-
padding: 20px 28px;
39-
}
40-
@media (max-width: 599px) {
41-
.demo-paragraph {
42-
padding: 16px;
43-
}
44-
}
45-
footer {
46-
position: fixed;
47-
bottom: 20px;
48-
width: 100%;
49-
text-align: center;
50-
color: red;
51-
background-color: rgba(0, 0, 0, 0.8);
52-
}
5328
</style>
5429
</head>
55-
<body class="mdc-typography mdc-toolbar-demo">
56-
<header class="mdc-toolbar mdc-toolbar--flexible mdc-toolbar--flexible-default-behavior">
57-
<div class="mdc-toolbar__row">
30+
<body class="mdc-typography">
31+
<header class="mdc-toolbar mdc-toolbar--flexible mdc-toolbar--flexible-default-behavior demo-toolbar">
32+
<div class="mdc-toolbar__row demo-toolbar__row--with-image">
5833
<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
5934
<a href="#" class="material-icons mdc-toolbar__menu-icon">menu</a>
6035
<span class="mdc-toolbar__title">Title</span>
@@ -77,7 +52,7 @@
7752
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
7853
</p>
7954
</main>
80-
<footer>
55+
<footer class="demo-toolbar-floating-footer">
8156
<span>Flexible Expansion Ratio: <span id="ratio">0</span></span>
8257
</footer>
8358
<script src="/assets/material-components-web.js"></script>

‎demos/toolbar/default-toolbar.html

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -24,23 +24,9 @@
2424
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
2525
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
2626
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
27-
<style>
28-
.mdc-toolbar-demo {
29-
margin: 0px;
30-
}
31-
.demo-paragraph {
32-
margin: 0px;
33-
padding: 20px 28px;
34-
}
35-
@media (max-width: 599px) {
36-
.demo-paragraph {
37-
padding: 16px;
38-
}
39-
}
40-
</style>
4127
</head>
42-
<body class="mdc-typography mdc-toolbar-demo">
43-
<header class="mdc-toolbar">
28+
<body class="mdc-typography">
29+
<header class="mdc-toolbar demo-toolbar">
4430
<div class="mdc-toolbar__row">
4531
<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
4632
<a href="#" class="material-icons mdc-toolbar__menu-icon">menu</a>

‎demos/toolbar/fixed-toolbar.html

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -24,23 +24,9 @@
2424
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
2525
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
2626
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
27-
<style>
28-
.mdc-toolbar-demo {
29-
margin: 0px;
30-
}
31-
.demo-paragraph {
32-
margin: 0px;
33-
padding: 20px 28px;
34-
}
35-
@media (max-width: 599px) {
36-
.demo-paragraph {
37-
padding: 16px;
38-
}
39-
}
40-
</style>
4127
</head>
42-
<body class="mdc-typography mdc-toolbar-demo">
43-
<header class="mdc-toolbar mdc-toolbar--fixed">
28+
<body class="mdc-typography">
29+
<header class="mdc-toolbar mdc-toolbar--fixed demo-toolbar">
4430
<div class="mdc-toolbar__row">
4531
<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
4632
<a href="#" class="material-icons mdc-toolbar__menu-icon">menu</a>

‎demos/toolbar/index.html

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -118,52 +118,76 @@
118118

119119
<section class="examples">
120120
<div class="example">
121-
<h2>Normal Toolbar <button type="button">Toggle RTL</button></h2>
121+
<h2 class="demo-toolbar-example-heading">
122+
<span class="demo-toolbar-example-heading__text">Normal Toolbar</span>
123+
<button type="button" class="mdc-button mdc-button--stroked mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button></h2>
122124
<p><a href="./default-toolbar.html" target="_blank">View in separate window</a></p>
123125
<iframe class="demo-container" src="./default-toolbar.html" width="320" height="600"></iframe>
124126
</div>
125127

126128
<div class="example">
127-
<h2>Fixed Toolbar<button type="button">Toggle RTL</button></h2>
129+
<h2 class="demo-toolbar-example-heading">
130+
<span class="demo-toolbar-example-heading__text">Fixed Toolbar</span>
131+
<button type="button" class="mdc-button mdc-button--stroked mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button></h2>
128132
<p><a href="./fixed-toolbar.html" target="_blank">View in separate window</a></p>
129133
<iframe class="demo-container" src="./fixed-toolbar.html" width="320" height="600"></iframe>
130134
</div>
131135

132136
<div class="example">
133-
<h2>Fixed Toolbar with Menu<button type="button">Toggle RTL</button></h2>
137+
<h2 class="demo-toolbar-example-heading">
138+
<span class="demo-toolbar-example-heading__text">Fixed Toolbar with Menu</span>
139+
<button type="button" class="mdc-button mdc-button--stroked mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button></h2>
134140
<p><a href="./menu-toolbar.html" target="_blank">View in separate window</a></p>
135141
<iframe class="demo-container" src="./menu-toolbar.html" width="320" height="600"></iframe>
136142
</div>
137143

138144
<div class="example">
139-
<h2>Waterfall Toolbar<button type="button">Toggle RTL</button></h2>
145+
<h2 class="demo-toolbar-example-heading">
146+
<span class="demo-toolbar-example-heading__text">Waterfall Toolbar</span>
147+
<button type="button" class="mdc-button mdc-button--stroked mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button></h2>
140148
<p><a href="./waterfall-toolbar.html" target="_blank">View in separate window</a></p>
141149
<iframe class="demo-container" src="./waterfall-toolbar.html" width="320" height="600"></iframe>
142150
</div>
143151

144152
<div class="example">
145-
<h2>Default Flexible Toolbar<button type="button">Toggle RTL</button></h2>
153+
<h2 class="demo-toolbar-example-heading">
154+
<span class="demo-toolbar-example-heading__text">Default Flexible Toolbar</span>
155+
<button type="button" class="mdc-button mdc-button--stroked mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button></h2>
146156
<p><a href="./default-flexible-toolbar.html" target="_blank">View in separate window</a></p>
147157
<iframe class="demo-container" src="./default-flexible-toolbar.html" width="320" height="600"></iframe>
148158
</div>
149159

150160
<div class="example">
151-
<h2>Waterfall Flexible Toolbar<button type="button">Toggle RTL</button></h2>
161+
<h2 class="demo-toolbar-example-heading">
162+
<span class="demo-toolbar-example-heading__text">Waterfall Flexible Toolbar</span>
163+
<button type="button" class="mdc-button mdc-button--stroked mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button></h2>
152164
<p><a href="./waterfall-flexible-toolbar.html" target="_blank">View in separate window</a></p>
153165
<iframe class="demo-container" src="./waterfall-flexible-toolbar.html" width="320" height="600"></iframe>
154166
</div>
155167

156168
<div class="example">
157-
<h2>Waterfall Toolbar Fix Last Row<button type="button">Toggle RTL</button></h2>
169+
<h2 class="demo-toolbar-example-heading">
170+
<span class="demo-toolbar-example-heading__text">Waterfall Toolbar Fix Last Row</span>
171+
<button type="button" class="mdc-button mdc-button--stroked mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button></h2>
158172
<p><a href="./waterfall-toolbar-fix-last-row.html" target="_blank">View in separate window</a></p>
159173
<iframe class="demo-container" src="./waterfall-toolbar-fix-last-row.html" width="320" height="600"></iframe>
160174
</div>
161175

162176
<div class="example">
163-
<h2>Waterfall Flexible Toolbar with Custom Style<button type="button">Toggle RTL</button></h2>
177+
<h2 class="demo-toolbar-example-heading">
178+
<span class="demo-toolbar-example-heading__text">Waterfall Flexible Toolbar with Custom Style</span>
179+
<button type="button" class="mdc-button mdc-button--stroked mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button></h2>
164180
<p><a href="./waterfall-flexible-toolbar-custom-style.html" target="_blank">View in separate window</a></p>
165181
<iframe class="demo-container" src="./waterfall-flexible-toolbar-custom-style.html" width="320" height="600"></iframe>
166182
</div>
183+
184+
<div class="example">
185+
<h2 class="demo-toolbar-example-heading">
186+
<span class="demo-toolbar-example-heading__text">Custom Colored Toolbar and Icons</span>
187+
<button type="button" class="mdc-button mdc-button--stroked mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button></h2>
188+
<p><a href="./custom-toolbar.html" target="_blank">View in separate window</a></p>
189+
<iframe class="demo-container" src="./custom-toolbar.html" width="320" height="600"></iframe>
190+
</div>
167191
</section>
168192
</main>
169193
<script>

‎demos/toolbar/menu-toolbar.html

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -24,26 +24,14 @@
2424
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
2525
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
2626
<style>
27-
.mdc-toolbar-demo {
28-
margin: 0px;
29-
}
30-
.demo-paragraph {
31-
margin: 0px;
32-
padding: 20px 28px;
33-
}
34-
@media (max-width: 599px) {
35-
.demo-paragraph {
36-
padding: 16px;
37-
}
38-
}
3927
#demo-menu {
4028
margin-top: 8px;
4129
margin-right: 8px;
4230
}
4331
</style>
4432
</head>
45-
<body class="mdc-typography mdc-toolbar-demo">
46-
<header class="mdc-toolbar mdc-toolbar--fixed">
33+
<body class="mdc-typography">
34+
<header class="mdc-toolbar mdc-toolbar--fixed demo-toolbar">
4735
<div class="mdc-toolbar__row">
4836
<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
4937
<a href="#" class="material-icons mdc-toolbar__menu-icon">menu</a>

‎demos/toolbar/toolbar.scss

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,74 @@
1515
//
1616

1717
@import "../common";
18+
@import "../../packages/mdc-button/mdc-button";
1819
@import "../../packages/mdc-list/mdc-list";
1920
@import "../../packages/mdc-menu/mdc-menu";
21+
@import "../../packages/mdc-theme/color-palette";
22+
@import "../../packages/mdc-toolbar/mdc-toolbar";
23+
@import "../../packages/mdc-typography/mdc-typography";
24+
25+
.demo-toolbar-example-heading {
26+
@include mdc-typography(display2);
27+
28+
display: flex;
29+
flex-direction: row;
30+
flex-wrap: wrap;
31+
align-items: center;
32+
}
33+
34+
.demo-toolbar-example-heading__text {
35+
flex-grow: 1;
36+
margin-right: 16px;
37+
}
38+
39+
.demo-toolbar-example-heading__rtl-toggle-button {
40+
flex-grow: 0;
41+
flex-shrink: 0;
42+
}
43+
44+
.demo-toolbar {
45+
margin: 0;
46+
}
47+
48+
.demo-toolbar__row--with-image {
49+
&:first-child::after {
50+
background-image: url("/images/4-3.jpg");
51+
background-size: cover;
52+
background-position: center;
53+
}
54+
}
55+
56+
.demo-toolbar--custom {
57+
@include mdc-toolbar-fill-color-accessible($material-color-red-900);
58+
}
59+
60+
.demo-toolbar__menu-icon--custom,
61+
.demo-toolbar__icon--custom {
62+
@include mdc-toolbar-icon-ink-color($material-color-red-100);
63+
64+
&:hover {
65+
@include mdc-toolbar-icon-ink-color(white);
66+
}
67+
}
68+
69+
.demo-paragraph {
70+
margin: 0;
71+
padding: 20px 28px;
72+
}
73+
74+
@media (max-width: 599px) {
75+
.demo-paragraph {
76+
padding: 16px;
77+
}
78+
}
79+
80+
.demo-toolbar-floating-footer {
81+
position: fixed;
82+
bottom: 0;
83+
width: 100%;
84+
text-align: center;
85+
padding: 8px;
86+
color: white;
87+
background-color: rgba(0, 0, 0, 0.7);
88+
}

0 commit comments

Comments
 (0)