fix(toolbar): Wrong placement of last icon when there is a menu (#1068)

Resolved #1026
material-components · Aug 9, 2017 · 11a8ff3 · 11a8ff3
1 parent 264c154
commit 11a8ff3
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 1 deletion.
diff --git a/demos/toolbar/index.html b/demos/toolbar/index.html
@@ -127,6 +127,12 @@ <h2>Fixed Toolbar<button type="button" onclick="toggleRTL(1)">Toggle RTL</button
           <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" onclick="toggleRTL(1)">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" onclick="toggleRTL(2)">Toggle RTL</button></h2>
           <p><a href="./waterfall-toolbar.html" target="_blank">View in separate window</a></p>

diff --git a/demos/toolbar/menu-toolbar.html b/demos/toolbar/menu-toolbar.html
@@ -0,0 +1,93 @@
+<!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>MDC Toolbar Demo</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/material-components-web.css.js" charset="utf-8"></script>
+    <script src="../assets/demo-styles.css.js" charset="utf-8"></script>
+    <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">
+	  <div class="mdc-toolbar__row">
+		<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
+		  <a href="#" class="material-icons mdc-toolbar__icon--menu">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" aria-label="Download" alt="Download">file_download</a>
+		  <a href="#" class="material-icons mdc-toolbar__icon" aria-label="Print this page" alt="Print this page">print</a>
+		  <div class="mdc-menu-anchor">
+			<a href="#" class="material-icons mdc-toolbar__icon toggle" aria-label="Bookmark this page" alt="Bookmark this page">more_vert</a>
+			<div class="mdc-simple-menu" tabindex="-1" id="demo-menu">
+			  <ul class="mdc-simple-menu__items mdc-list" role="menu" aria-hidden="true" style="transform: scale(1, 1);">
+				<li class="mdc-list-item" role="menuitem" tabindex="0" style="transition-delay: 0.069s;">Back</li>
+				<li class="mdc-list-item" role="menuitem" tabindex="0" style="transition-delay: 0.124s;">Forward</li>
+				<li class="mdc-list-item" role="menuitem" tabindex="0" style="transition-delay: 0.179s;">Reload</li>
+				<li class="mdc-list-divider" role="separator"></li>
+
+				<li class="mdc-list-item" role="menuitem" tabindex="0" style="transition-delay: 0.236s;">Save As...</li>
+			  </ul>
+			</div>
+		  </div>
+		</section>
+	  </div>
+	</header>
+    <main>
+
+      <div class="mdc-toolbar-fixed-adjust">
+        <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>
+      </div>
+    </main>
+
+	<script src="../assets/material-components-web.js" charset="utf-8"></script>
+	<script>
+      var menuEl = document.querySelector('#demo-menu');
+      var menu = new mdc.menu.MDCSimpleMenu(menuEl);
+      var toggle = document.querySelector('.toggle');
+      toggle.addEventListener('click', function() {
+        menu.open = !menu.open;
+      });
+    </script>
+  </body>
+</html>
diff --git a/packages/mdc-toolbar/mdc-toolbar.scss b/packages/mdc-toolbar/mdc-toolbar.scss
@@ -93,7 +93,7 @@
     cursor: pointer;
   }
 
-  &__icon:last-child {
+  &__icon:last-of-type {
     padding-right: 16px;
   }