Added white to primary colors

docs/getting-started.md

@@ -159,8 +159,8 @@ theme:
 Color names are case-insensitive, but must match the names of the Material
 Design color palette. Valid values are: `red`, `pink`, `purple`, `deep purple`,
 `indigo`, `blue`, `light blue`, `cyan`, `teal`, `green`, `light green`, `lime`,
-`yellow`, `amber`, `orange`, `deep orange`, `brown`, `grey` and `blue grey`.
-The last three colors can only be used as a primary color.
+`yellow`, `amber`, `orange`, `deep orange`, `brown`, `grey`, `blue grey` and
+`white`. The four three colors can only be used as a primary color.
 
 If the color is set via this configuration, an additional CSS file that
 defines the color palette is automatically included. If you want to keep things
@@ -195,6 +195,7 @@ Click on a tile to change the primary color of the theme:
 <button data-md-color-primary="brown">Brown</button>
 <button data-md-color-primary="grey">Grey</button>
 <button data-md-color-primary="blue-grey">Blue Grey</button>
+<button data-md-color-primary="white">White</button>
 
 <script>
   var buttons = document.querySelectorAll("button[data-md-color-primary]");

material/base.html

@@ -46,9 +46,9 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-e056ea954c.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-3368aa6b74.css">
       {% if palette.primary or palette.accent %}
-        <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-3e082b9545.palette.css">
+        <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-95ad5566f9.palette.css">
       {% endif %}
     {% endblock %}
     {% block libs %}

src/assets/stylesheets/application.palette.scss

@@ -152,6 +152,13 @@ button[data-md-color-accent] {
   }
 }
 
+// Color tile for presentation in theme documentation
+button[data-md-color-primary="white"] {
+  background-color: $md-color-white;
+  color: $md-color-black;
+  box-shadow: 0 0 0.1rem $md-color-black--light inset;
+}
+
 // Overrides for white color
 [data-md-color-primary="white"] {
 

src/assets/stylesheets/layout/_header.scss

@@ -31,7 +31,9 @@
   right: 0;
   left: 0;
   height: 4.8rem;
-  transition: background-color 0.25s;
+  transition:
+    background-color 0.25s,
+    color 0.25s;
   background-color: $md-color-primary;
   color: $md-color-white;
   box-shadow:
@@ -43,9 +45,7 @@
 
   // Always show shadow, in case JavaScript is not available
   .no-js & {
-    box-shadow:
-      0 0      0.4rem rgba(0, 0, 0, 0.1),
-      0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
+    box-shadow: none;
   }
 
   // [screen +]: Show shadow depending on scroll offset
@@ -54,7 +54,10 @@
 
     // Show and animate shadow
     &[data-md-state="shadow"] {
-      transition: box-shadow 0.25s;
+      transition:
+        background-color 0.25s,
+        color 0.25,
+        box-shadow 0.25s;
       box-shadow:
         0 0      0.4rem rgba(0, 0, 0, 0.1),
         0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
@@ -144,6 +147,11 @@
       z-index: -1;
       pointer-events: none;
     }
+
+    // Induce ellipsis, if no JavaScript is available
+    .no-js & {
+      position: initial;
+    }
   }
 
   // Header title - set line height to match icon for correct alignment