MD Settings: remove shadow from drawer in narrow mode, change font color

chrome/browser/resources/settings/settings_ui/settings_ui.html

Index: chrome/browser/resources/settings/settings_ui/settings_ui.html
diff --git a/chrome/browser/resources/settings/settings_ui/settings_ui.html b/chrome/browser/resources/settings/settings_ui/settings_ui.html
index 36d253ddb47988ac6b9bfdedf87a54b3cc276371..f4b642f1096179c34aa2c482897a47e0b4382993 100644
--- a/chrome/browser/resources/settings/settings_ui/settings_ui.html
+++ b/chrome/browser/resources/settings/settings_ui/settings_ui.html
@@ -33,23 +33,47 @@
       }
 
       #drawer {
+        --paper-header-panel-shadow: {
+          /* Polymer's style transformation chokes on :host() and :not() (and
+           * many other things, it seems). Just hide the built-in shadow and
+           * duplicate its style. */
+          display: none;
+        };
         /* Explicitly set this so that transitions work and look good. */
         background-color: var(--settings-background-color);
       }
 
+      #drawer .toolbar::after {
+        box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
+        content: ' ';
+        display: block;

[dschuyler, 2016/05/10 23:07:44]

Are the content and display entries needed?
I'm wondering if the content can be '' rather
than a space or omitted entirely(?).

Does the ::after subtly remove a display:block
from elsewhere that this is restoring or is it
doing something else?

[Dan Beam, 2016/05/10 23:34:26]

yes
Done. (as '')
https://developer.mozilla.org/en-US/docs/Web/CSS/::after

+        height: 6px;
+      }
+
       #drawer,
-      #drawer .toolbar {
-        transition: background-color .3s, color .3s;
+      #drawer .toolbar,
+      #drawer .toolbar::after {
+        transition: background-color .3s, color .3s, opacity .3s;
+      }
+
+      :host(:not(.narrowing)) [narrow] #drawer,
+      :host(:not(.narrowing)) [narrow] #drawer .toolbar,
+      :host(:not(.narrowing)) [narrow] #drawer .toolbar::after {
+        transition: none;  /* Transition only when removing [narrow]. */
       }
 
       :host(:not(.narrowing)) [narrow] #drawer,
       :host(:not(.narrowing)) [narrow] #drawer .toolbar {
         background-color: white;
-        transition: none;  /* Transition only when removing [narrow]. */
       }
 
       :host(:not(.narrowing)) [narrow] #drawer .toolbar {
-        color: black;
+        color: var(--settings-nav-grey);
+      }
+
+      :host(:not(.narrowing)) [narrow] #drawer .toolbar::after {
+        border-bottom: var(--settings-separator-line);
+        height: 0;
       }
 
       paper-icon-button {