[Styling] Visual refresh. (#50)

* [Styling] Visual refresh.

* [Styling] Color changes and trying to center the lines.

* [Styling] Changing the green on a button.

* [Styling] Correcting import.

* [Styling] Removing test copy.

* [Styling] Weight correction.

* [Styling] Properly importing Google Sans.

* [Styling] Better use of variables for colors.

* [Styling] Correcting one old color.

* [Styling] Formatting

Author: willlarche

codelab-style.html

@@ -15,6 +15,7 @@
 -->
 
 <link rel="import" href="../paper-styles/color.html">
+<link rel="import" href="google-sans.html">
 
 <dom-module id="codelab-style">
   <template strip-whitespace>
@@ -31,10 +32,22 @@
   };
 
   --app-drawer-content-container: {
-    background: var(--google-codelab-background, --paper-grey-100);
+    background: var(--google-codelab-background, #FFFFFF);
   };
 
   --nav-height: 64px;
+
+  --google-material-blue-600: #1A73E8;
+  --google-material-blue-800: #185ABC;
+
+  --google-material-green-600: #1E8E3E;
+
+  --google-material-grey-900: #212124;
+  --google-material-grey-800: #3C4043;
+  --google-material-grey-700: #5f6368;
+  --google-material-grey-600: #80868B;
+  --google-material-grey-300: #DADCE0;
+  --google-material-grey-100: #F1F3F4;
 }
 
 
@@ -60,10 +73,11 @@
 
 .drawer-content-wrapper {
   padding: 16px;
+  border-right: 1px solid var(--google-material-grey-300);
 }
 
 #main-content {
-  background: var(--google-codelab-background, --paper-grey-300);
+  background: var(--google-codelab-background, --paper-blue-300);
 }
 
 #pages {
@@ -75,8 +89,9 @@
 }
 
 #main-toolbar {
-  background: var(--google-codelab-header-background, --paper-blue-600);
-  color: #fff;
+  background: var(--google-codelab-header-background, #FFFFFF);
+  box-shadow: 0px 1px 2px 0px rgba(60, 64, 67, 0.3), 0px 2px 6px 2px rgba(60, 64, 67, 0.15);
+  color: var(--google-material-grey-800);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -87,7 +102,8 @@
 #main-toolbar .title {
   margin: 0 8px;
   flex: 1;
-  font-weight: 300;
+  font-weight: 400;
+  font-family: 'Google Sans', Arial, sans-serif;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -142,63 +158,82 @@
 
 #controls .fabs {
   /* Note: custom props don't work in calc(). */
-  max-width: calc(800px + 175px);
+  max-width: calc(800px + 250px);
   margin: 0 auto;
 }
 
 .navbutton {
+  border-radius: 4px;
+  font-family: 'Google Sans', Arial, sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: .6px;
+  padding-bottom: 6px;
+  padding-left: 24px;
+  padding-right: 24px;
+  padding-top: 6px;
   pointer-events: initial; /* make sure buttons are clickable */
+  text-transform: none;
+}
+
+.navbutton.nextbutton {
+  background: var(--google-material-blue-600);
+  color: #FFFFFF;
 }
 
 .navbutton.prevbutton {
+  background: #FFFFFF;
+  color: var(--google-material-blue-600);
   transition: transform 300ms ease-in-out;
 }
 
 .navbutton.prevbutton[disabled] {
-  background: var(--google-codelab-fab-background);
   color: white;
   transform: scale(0);
 }
 
 .navbutton.donebutton {
-  background: var(--google-green-500);
+  background: var(--google-material-green-600);
+  color: #FFFFFF;
 }
-        
+
 #toc {
   /* ensures bottom of nav scrolling meny doesn't overlap with file bug link. */
   margin-bottom: 1.5em;
 }
 
 .toc-item {
   font-size: 14px;
-  color: var(--paper-grey-500);
+  color: var(--google-material-grey-600);
   overflow: hidden;
   border-radius: 4px;
   padding: 6px 16px;
   box-sizing: content-box; /* override users that set * selector box-sizing. */
+  line-height: 20px;
+  font-weight: 400;
 }
 
 .toc-item i {
+  color: #FFFFFF;
   display: inline-block;
   font-style: normal;
-  width: 24px;
-  min-width: 24px;
-  background: #fff;
+  width: 26px;
+  min-width: 26px;
+  background: var(--google-material-grey-600);
   border-radius: 50%;
   text-align: center;
-  height: 24px;
+  height: 26px;
   vertical-align: middle;
-  line-height: 24px;
-  border: 2px solid var(--paper-grey-400);
+  line-height: 26px;
   margin-right: 8px;
-  font-weight: 400;
 }
 
 .toc-item i::before,
 .toc-item i::after {
   content: '';
   display: block;
-  border-left: 1px solid var(--paper-grey-400);
+  border-left: 1px solid var(--google-material-grey-600);
+  border-right: 1px solid var(--google-material-grey-600);
   width: 0;
   height: 44px;
   z-index: 1;
@@ -215,12 +250,17 @@
 }
 
 .toc-item.completed {
-  color: var(--paper-grey-900);
+  color: var(--google-material-grey-900);
+}
+
+.toc-item.completed i,
+.toc-item.iron-selected i {
+  background-color: var(--google-material-blue-600);
 }
 
 .toc-item.iron-selected {
-  color: var(--paper-grey-900);
-  background-color: var(--paper-grey-300);
+  color: var(--google-material-grey-900);
+  background-color: var(--google-material-grey-300);
   font-weight: 600;
 }
 
@@ -229,7 +269,7 @@
 .toc-item.completed i::after,
 .toc-item.iron-selected i,
 .toc-item.iron-selected i:before {
-  border-color: var(--paper-blue-500);
+  border-color: var(--google-material-blue-600);
 }
 
 .toc-item:first-of-type i::before,

demo/codelab.html

@@ -36,7 +36,7 @@
   <style is="custom-style">
     body {
       font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial;
-      background: var(--google-codelab-background, --paper-grey-300);
+      background: var(--google-codelab-background, #F8F9FA);
     }
   </style>
 </head>
@@ -97,7 +97,7 @@ <h2>Next up</h2>
     <google-codelab-step label="Using <google-map>" duration="5">
 
           <p>The <a href="https://elements.polymer-project.org/browse?package=google-web-components">Google Web Components</a>&#160;provide the <code>&lt;google-map&gt;</code>&#160;element for declaratively rendering a Google Map. To use it, you first need to install it using Bower.</p>
-<aside class="special"><p><strong>What is Bower?</strong></p>
+<aside class="note"><p><strong>What is Bower?</strong></p>
 <p><a href="http://bower.io/">Bower</a>&#160;is a client-side package management tool that can be used with any web app. When working with Polymer, it simplifies the hassles of dependency management. Every component defines its own set of dependencies. When you use Bower to install a component, the component's dependencies are installed alongside it under <code>bower_components/</code>.</p></aside>
 
 <h2>Install the <google-map> element</h2>

google-codelab-survey.html

@@ -53,8 +53,10 @@ <h4>How would rate your experience with Polymer?</h4>
         display: block;
         margin: 2em 0;
         padding: 0;
-        background: var(--google-codelab-survey-background, #edf4ff);
-        border-left: var(--google-codelab-survey-border, 4px solid #94BAF9);
+        background: var(--google-codelab-survey-background, #E8F0FE);
+        border-left: var(--google-codelab-survey-border, 4px solid #185ABC);
+        border-radius: 4px;
+        color: #3C4043;
       }
 
       .survey > ::content h4 {

google-codelab.html

@@ -139,24 +139,21 @@ <h3 class="title">[[title]]</h3>
 
           <footer id="controls" hidden$="[[noArrows]]" narrow$="[[_narrow]]">
             <div class="fabs layout horizontal justified">
-              <paper-fab raised class="navbutton prevbutton" icon="chevron-left"
+              <paper-button raised class="navbutton prevbutton"
                 on-tap="selectPrevious"
                 title="Previous step"
-                disabled$="{{_isFirstStep(selected)}}">
-              </paper-fab>
+                disabled$="{{_isFirstStep(selected)}}">Back</paper-button>
 
               <div>
                 <template is="dom-if" if="{{_showNextFab(selected, steps)}}" strip-whitespace>
-                  <paper-fab icon="chevron-right" raised class="navbutton nextbutton"
+                  <paper-button raised class="navbutton nextbutton"
                     title="{{_nextFabTitle(selected)}}"
-                    on-tap="selectNext">
-                  </paper-fab>
+                    on-tap="selectNext">Next</paper-button>
                 </template>
 
                 <template is="dom-if" if="{{_showDoneFab(selected, steps)}}" strip-whitespace>
-                  <paper-fab icon="done" raised class="navbutton donebutton"
-                    on-tap="_goToHome" title="Complete codelab">
-                  </paper-fab>
+                  <paper-button raised class="navbutton donebutton"
+                    on-tap="_goToHome" title="Complete codelab">Done</paper-button>
                 </template>
               </div>
             </div>

google-sans.html

@@ -0,0 +1 @@
+<link href="https://fonts.googleapis.com/css?family=Google+Sans" rel="stylesheet">

shared-style.html

@@ -19,9 +19,9 @@
     <style>
       /* Theming - Custom CSS  properties */
       :root {
-        --paper-radio-button-checked-ink-color: #4285f4;
-        --paper-radio-button-checked-color: #4285f4;
-        --paper-radio-button-unchecked-color: #4285f4;
+        --paper-radio-button-checked-ink-color: #185ABC;
+        --paper-radio-button-checked-color: #185ABC;
+        --paper-radio-button-unchecked-color: #185ABC;
       }
     </style>
   </template>