From ef0c651ac04f9e8218cab16e1b261a7685264713 Mon Sep 17 00:00:00 2001
From: Anshgoyal <58463645+anshgo01yal@users.noreply.github.com>
Date: Wed, 21 Apr 2021 05:04:28 +0530
Subject: [PATCH] fix(demo): Fix centering of icons, add hover effect on
 settings (#3352)

Co-authored-by: Anshgoyal <anshgo01yal@users.noreply.github.com>
---
 demo/demo.less | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/demo/demo.less b/demo/demo.less
index 918cf7a9bb..61b9320987 100644
--- a/demo/demo.less
+++ b/demo/demo.less
@@ -93,6 +93,15 @@ html, body {
   transition: 0.2s ease-in-out;
 }
 
+.mdl-button--fab,
+.mdl-button--icon {
+  /* By default, MDL icon buttons may end up vertically off-center.  This aligns
+   * them to the center both vertically and horizontally. */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .mdl-button--fab:hover {
   filter: drop-shadow(0 2px 8px #333);
 }
@@ -383,6 +392,16 @@ html, body {
   padding: 0 16px;
 }
 
+.app-header .mdl-layout__drawer-button .material-icons {
+  &:hover {
+    /* Spin the gear icon in the settings menu when hovered. */
+    transform: rotate(90deg);
+  }
+
+  /* Animate the spin. */
+  transition: transform 0.3s ease-in-out;
+}
+
 footer li {
   list-style: square outside;
 }