feat(toolbar): Add theme color mixins (#1720)

This PR also makes the demo page a little prettier. Fixes #1154
material-components · Dec 13, 2017 · 328df77 · 328df77
1 parent acb47d7
commit 328df77
Show file tree

Hide file tree

Showing 15 changed files with 230 additions and 205 deletions.
diff --git a/demos/common.scss b/demos/common.scss
@@ -22,6 +22,7 @@
 
 // Base style
 $mdc-theme-primary: $material-color-grey-900 !default;
+$mdc-theme-primary: $material-color-blue-500 !default;
 $mdc-theme-secondary: $material-color-light-green-a700 !default;
 
 // Import button and ripple mixins to apply overrides for dark theme
@@ -34,20 +35,19 @@ $mdc-theme-secondary: $material-color-light-green-a700 !default;
 @import "../packages/mdc-toolbar/mdc-toolbar";
 @import "../packages/mdc-typography/mdc-typography";
 
+$dark-button-color: $material-color-light-green-a200;
+
 fieldset {
   margin: 0;
   padding: 0;
   border: 0;
 }
 
-.mdc-toolbar {
-  a {
-    color: #f0f0f0;
-    text-decoration: none;
-  }
+.mdc-toolbar__icon,
+.mdc-toolbar__menu-icon {
+  @include mdc-toolbar-icon-ink-color(#f0f0f0);
 }
 
-$dark-button-color: $material-color-light-green-a200;
 .mdc-button {
   @include mdc-theme-dark {
     @include mdc-button-ink-color($dark-button-color);
@@ -89,7 +89,7 @@ $dark-button-color: $material-color-light-green-a200;
   background-color: rgba(0, 0, 0, .05);
 }
 
-/* Default padding on all examples. */
+// Default padding on all examples.
 section.example {
   margin: 24px;
   padding: 24px;

diff --git a/demos/toolbar/custom-toolbar.html b/demos/toolbar/custom-toolbar.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!--
+  Copyright 2016 Google Inc. All rights reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Custom Toolbar - Material Components Catalog</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png">
+    <script src="/assets/toolbar/toolbar.css.js"></script>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+  </head>
+  <body class="mdc-typography">
+    <header class="mdc-toolbar demo-toolbar demo-toolbar--custom">
+      <div class="mdc-toolbar__row">
+        <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
+          <a href="#" class="material-icons mdc-toolbar__menu-icon demo-toolbar__menu-icon--custom">menu</a>
+          <span class="mdc-toolbar__title">Title</span>
+        </section>
+        <section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
+          <a href="#" class="material-icons mdc-toolbar__icon demo-toolbar__icon--custom" aria-label="Download" alt="Download">file_download</a>
+          <a href="#" class="material-icons mdc-toolbar__icon demo-toolbar__icon--custom" aria-label="Print this page" alt="Print this page">print</a>
+          <a href="#" class="material-icons mdc-toolbar__icon demo-toolbar__icon--custom" aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a>
+        </section>
+      </div>
+    </header>
+    <main>
+      <p class="demo-paragraph">
+        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.
+      </p>
+      <p class="demo-paragraph">
+        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.
+      </p>
+      <p class="demo-paragraph">
+        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.
+      </p>
+    </main>
+  </body>
+</html>
diff --git a/demos/toolbar/default-flexible-toolbar.html b/demos/toolbar/default-flexible-toolbar.html
@@ -25,36 +25,11 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <style>
-      .mdc-toolbar-demo {
-        margin: 0px;
-      }
-      .mdc-toolbar__row:first-child::after {
-        background-image: url("../images/4-3.jpg");
-        background-size: cover;
-        background-position: center;
-      }
-      .demo-paragraph {
-        margin: 0px;
-        padding: 20px 28px;
-      }
-      @media (max-width: 599px) {
-        .demo-paragraph {
-          padding: 16px;
-        }
-      }
-      footer {
-        position: fixed;
-        bottom: 20px;
-        width: 100%;
-        text-align: center;
-        color: red;
-        background-color: rgba(0, 0, 0, 0.8);
-      }
     </style>
   </head>
-  <body class="mdc-typography mdc-toolbar-demo">
-    <header class="mdc-toolbar mdc-toolbar--flexible mdc-toolbar--flexible-default-behavior">
-      <div class="mdc-toolbar__row">
+  <body class="mdc-typography">
+    <header class="mdc-toolbar mdc-toolbar--flexible mdc-toolbar--flexible-default-behavior demo-toolbar">
+      <div class="mdc-toolbar__row demo-toolbar__row--with-image">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <a href="#" class="material-icons mdc-toolbar__menu-icon">menu</a>
           <span class="mdc-toolbar__title">Title</span>
@@ -77,7 +52,7 @@
         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.
       </p>
     </main>
-    <footer>
+    <footer class="demo-toolbar-floating-footer">
       <span>Flexible Expansion Ratio: <span id="ratio">0</span></span>
     </footer>
     <script src="/assets/material-components-web.js"></script>

diff --git a/demos/toolbar/default-toolbar.html b/demos/toolbar/default-toolbar.html
@@ -24,23 +24,9 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <style>
-      .mdc-toolbar-demo {
-        margin: 0px;
-      }
-      .demo-paragraph {
-        margin: 0px;
-        padding: 20px 28px;
-      }
-      @media (max-width: 599px) {
-        .demo-paragraph {
-          padding: 16px;
-        }
-      }
-    </style>
   </head>
-  <body class="mdc-typography mdc-toolbar-demo">
-    <header class="mdc-toolbar">
+  <body class="mdc-typography">
+    <header class="mdc-toolbar demo-toolbar">
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <a href="#" class="material-icons mdc-toolbar__menu-icon">menu</a>

diff --git a/demos/toolbar/fixed-toolbar.html b/demos/toolbar/fixed-toolbar.html
@@ -24,23 +24,9 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <style>
-      .mdc-toolbar-demo {
-        margin: 0px;
-      }
-      .demo-paragraph {
-        margin: 0px;
-        padding: 20px 28px;
-      }
-      @media (max-width: 599px) {
-        .demo-paragraph {
-          padding: 16px;
-        }
-      }
-    </style>
   </head>
-  <body class="mdc-typography mdc-toolbar-demo">
-    <header class="mdc-toolbar mdc-toolbar--fixed">
+  <body class="mdc-typography">
+    <header class="mdc-toolbar mdc-toolbar--fixed demo-toolbar">
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <a href="#" class="material-icons mdc-toolbar__menu-icon">menu</a>

diff --git a/demos/toolbar/index.html b/demos/toolbar/index.html
@@ -118,52 +118,76 @@
 
       <section class="examples">
         <div class="example">
-          <h2>Normal Toolbar <button type="button">Toggle RTL</button></h2>
+          <h2 class="demo-toolbar-example-heading">
+            <span class="demo-toolbar-example-heading__text">Normal Toolbar</span>
+            <button type="button" class="mdc-button mdc-button--stroked mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button></h2>
           <p><a href="./default-toolbar.html" target="_blank">View in separate window</a></p>
           <iframe class="demo-container" src="./default-toolbar.html" width="320" height="600"></iframe>
         </div>
 
         <div class="example">
-          <h2>Fixed Toolbar<button type="button">Toggle RTL</button></h2>
+          <h2 class="demo-toolbar-example-heading">
+            <span class="demo-toolbar-example-heading__text">Fixed Toolbar</span>
+            <button type="button" class="mdc-button mdc-button--stroked mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button></h2>
           <p><a href="./fixed-toolbar.html" target="_blank">View in separate window</a></p>
           <iframe class="demo-container" src="./fixed-toolbar.html" width="320" height="600"></iframe>
         </div>
 
         <div class="example">
-          <h2>Fixed Toolbar with Menu<button type="button">Toggle RTL</button></h2>
+          <h2 class="demo-toolbar-example-heading">
+            <span class="demo-toolbar-example-heading__text">Fixed Toolbar with Menu</span>
+            <button type="button" class="mdc-button mdc-button--stroked mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button></h2>
           <p><a href="./menu-toolbar.html" target="_blank">View in separate window</a></p>
           <iframe class="demo-container" src="./menu-toolbar.html" width="320" height="600"></iframe>
         </div>
 
         <div class="example">
-          <h2>Waterfall Toolbar<button type="button">Toggle RTL</button></h2>
+          <h2 class="demo-toolbar-example-heading">
+            <span class="demo-toolbar-example-heading__text">Waterfall Toolbar</span>
+            <button type="button" class="mdc-button mdc-button--stroked mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button></h2>
           <p><a href="./waterfall-toolbar.html" target="_blank">View in separate window</a></p>
           <iframe class="demo-container" src="./waterfall-toolbar.html" width="320" height="600"></iframe>
         </div>
 
         <div class="example">
-          <h2>Default Flexible Toolbar<button type="button">Toggle RTL</button></h2>
+          <h2 class="demo-toolbar-example-heading">
+            <span class="demo-toolbar-example-heading__text">Default Flexible Toolbar</span>
+            <button type="button" class="mdc-button mdc-button--stroked mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button></h2>
           <p><a href="./default-flexible-toolbar.html" target="_blank">View in separate window</a></p>
           <iframe class="demo-container" src="./default-flexible-toolbar.html" width="320" height="600"></iframe>
         </div>
 
         <div class="example">
-          <h2>Waterfall Flexible Toolbar<button type="button">Toggle RTL</button></h2>
+          <h2 class="demo-toolbar-example-heading">
+            <span class="demo-toolbar-example-heading__text">Waterfall Flexible Toolbar</span>
+            <button type="button" class="mdc-button mdc-button--stroked mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button></h2>
           <p><a href="./waterfall-flexible-toolbar.html" target="_blank">View in separate window</a></p>
           <iframe class="demo-container" src="./waterfall-flexible-toolbar.html" width="320" height="600"></iframe>
         </div>
 
         <div class="example">
-          <h2>Waterfall Toolbar Fix Last Row<button type="button">Toggle RTL</button></h2>
+          <h2 class="demo-toolbar-example-heading">
+            <span class="demo-toolbar-example-heading__text">Waterfall Toolbar Fix Last Row</span>
+            <button type="button" class="mdc-button mdc-button--stroked mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button></h2>
           <p><a href="./waterfall-toolbar-fix-last-row.html" target="_blank">View in separate window</a></p>
           <iframe class="demo-container" src="./waterfall-toolbar-fix-last-row.html" width="320" height="600"></iframe>
         </div>
 
         <div class="example">
-          <h2>Waterfall Flexible Toolbar with Custom Style<button type="button">Toggle RTL</button></h2>
+          <h2 class="demo-toolbar-example-heading">
+            <span class="demo-toolbar-example-heading__text">Waterfall Flexible Toolbar with Custom Style</span>
+            <button type="button" class="mdc-button mdc-button--stroked mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button></h2>
           <p><a href="./waterfall-flexible-toolbar-custom-style.html" target="_blank">View in separate window</a></p>
           <iframe class="demo-container" src="./waterfall-flexible-toolbar-custom-style.html" width="320" height="600"></iframe>
         </div>
+
+        <div class="example">
+          <h2 class="demo-toolbar-example-heading">
+            <span class="demo-toolbar-example-heading__text">Custom Colored Toolbar and Icons</span>
+            <button type="button" class="mdc-button mdc-button--stroked mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button></h2>
+          <p><a href="./custom-toolbar.html" target="_blank">View in separate window</a></p>
+          <iframe class="demo-container" src="./custom-toolbar.html" width="320" height="600"></iframe>
+        </div>
       </section>
     </main>
     <script>

diff --git a/demos/toolbar/menu-toolbar.html b/demos/toolbar/menu-toolbar.html
@@ -24,26 +24,14 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <style>
-      .mdc-toolbar-demo {
-        margin: 0px;
-      }
-      .demo-paragraph {
-        margin: 0px;
-        padding: 20px 28px;
-      }
-      @media (max-width: 599px) {
-        .demo-paragraph {
-          padding: 16px;
-        }
-      }
       #demo-menu {
         margin-top: 8px;
         margin-right: 8px;
       }
     </style>
   </head>
-  <body class="mdc-typography mdc-toolbar-demo">
-    <header class="mdc-toolbar mdc-toolbar--fixed">
+  <body class="mdc-typography">
+    <header class="mdc-toolbar mdc-toolbar--fixed demo-toolbar">
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <a href="#" class="material-icons mdc-toolbar__menu-icon">menu</a>

diff --git a/demos/toolbar/toolbar.scss b/demos/toolbar/toolbar.scss
@@ -15,5 +15,74 @@
 //
 
 @import "../common";
+@import "../../packages/mdc-button/mdc-button";
 @import "../../packages/mdc-list/mdc-list";
 @import "../../packages/mdc-menu/mdc-menu";
+@import "../../packages/mdc-theme/color-palette";
+@import "../../packages/mdc-toolbar/mdc-toolbar";
+@import "../../packages/mdc-typography/mdc-typography";
+
+.demo-toolbar-example-heading {
+  @include mdc-typography(display2);
+
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.demo-toolbar-example-heading__text {
+  flex-grow: 1;
+  margin-right: 16px;
+}
+
+.demo-toolbar-example-heading__rtl-toggle-button {
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.demo-toolbar {
+  margin: 0;
+}
+
+.demo-toolbar__row--with-image {
+  &:first-child::after {
+    background-image: url("/images/4-3.jpg");
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+.demo-toolbar--custom {
+  @include mdc-toolbar-fill-color-accessible($material-color-red-900);
+}
+
+.demo-toolbar__menu-icon--custom,
+.demo-toolbar__icon--custom {
+  @include mdc-toolbar-icon-ink-color($material-color-red-100);
+
+  &:hover {
+    @include mdc-toolbar-icon-ink-color(white);
+  }
+}
+
+.demo-paragraph {
+  margin: 0;
+  padding: 20px 28px;
+}
+
+@media (max-width: 599px) {
+  .demo-paragraph {
+    padding: 16px;
+  }
+}
+
+.demo-toolbar-floating-footer {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  padding: 8px;
+  color: white;
+  background-color: rgba(0, 0, 0, 0.7);
+}