From a51536eb4c6e5c63874edfd74c2716491c84a318 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Gomes?= <sgomes@google.com>
Date: Tue, 9 Jun 2015 15:55:32 +0100
Subject: [PATCH] Scoping docs CSS properly. Fixes #346

---
 docs/_assets/main.css       | 107 ++++++++++++++++++------------------
 docs/_templates/layout.html |  12 ++--
 2 files changed, 58 insertions(+), 61 deletions(-)

diff --git a/docs/_assets/main.css b/docs/_assets/main.css
index 32b673f6..af3c5518 100644
--- a/docs/_assets/main.css
+++ b/docs/_assets/main.css
@@ -1,7 +1,7 @@
 html > body {
   font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
 }
-.mdl-layout__header {
+.docs-layout-header {
   height: 33vh;
   flex-shrink: 0;
   background-size: auto 30%;
@@ -13,90 +13,87 @@ html > body {
   flex-shrink: 0;
   position: relative;
 }
-.mdl-layout__header .mdl-textfield {
+.docs-layout-header .mdl-textfield {
   padding-top: 0;
 }
-.mdl-layout__header-row {
+.docs-layout-header > .mdl-layout__header-row {
   padding: 40px;
   align-items: flex-start;
   height: auto;
 }
-.mdl-layout__header > .mdl-navigation {
+.docs-layout-header > .docs-navigation {
   position: absolute;
   bottom: 1px;
   left: 0;
   width: 100%;
 }
-.mdl-layout-title {
+.docs-layout-title {
   font-weight: 500;
   text-transform: uppercase;
   line-height: 1.5em;
   font-size: 1rem;
 }
-.mdl-layout-title a {
+.docs-layout-title a {
   font-weight: inherit;
 }
-.about .mdl-layout__header {
+.about .docs-layout-header {
   background-color: #37474f;
   background-image: url('logo.svg');
 }
-.mdl-layout__header {
-  box-shadow: none !important;
-}
-.mdl-layout__header .mdl-textfield .mdl-button {
+.docs-layout-header .mdl-textfield .mdl-button {
   right: 0;
 }
-.mdl-layout__header .mdl-textfield .mdl-textfield__expandable-holder {
+.docs-layout-header .mdl-textfield .mdl-textfield__expandable-holder {
   margin-right: 32px;
 }
-.mdl-layout__header .mdl-textfield label:after {
+.docs-layout-header .mdl-textfield label:after {
   background-color: rgba(255, 255, 255, 0.12);
 }
-body.about .mdl-layout__header {
+body.about .docs-layout-header {
   background: url('logo.svg'), url('header.jpg');
   background-size: auto 30%, cover;
   background-repeat: no-repeat, no-repeat;
   background-position: center center, center center;
 }
 @media all and (-webkit-min-device-pixel-ratio: 2) {
-  .about .mdl-layout__header {
+  .about .docs-layout-header {
     background: url('logo.svg'), url('header_2x.jpg');
     background-size: auto 30%, cover;
     background-repeat: no-repeat, no-repeat;
     background-position: center center, center center;
   }
 }
-body:not(.about) .mdl-layout__header {
+body:not(.about) .docs-layout-header {
   background-size: auto 30%;
   background-repeat: no-repeat;
   background-position: center center;
 }
-.templates .mdl-layout__header {
+.templates .docs-layout-header {
   background-color: #263238;
   background-image: url('templates.svg');
 }
-.components .mdl-layout__header {
+.components .docs-layout-header {
   background-color: #C2185B;
   background-image: url('components.svg');
 }
-.styles .mdl-layout__header {
+.styles .docs-layout-header {
   background-color: #8E24AA;
   background-image: url('styles.svg');
 }
-.customize .mdl-layout__header {
+.customize .docs-layout-header {
   background-color: #1A237E;
   background-image: url('customize.svg');
 }
-body:not(.about) .mdl-layout__header {
+body:not(.about) .docs-layout-header {
   box-sizing: border-box;
   height: 144px;
   padding-top: 0;
   background-position: 40px 32px;
 }
-body:not(.about) .mdl-layout-title {
+body:not(.about) .docs-layout-title {
   display: none;
 }
-.mdl-navigation {
+.docs-navigation {
   box-shadow: none !important;
   border: 0 !important;
   padding: 0 16px;
@@ -105,14 +102,14 @@ body:not(.about) .mdl-layout-title {
   flex-shrink: 0;
   padding-left: 16px !important;
 }
-.mdl-navigation span.mdl-icon {
+.docs-navigation span.mdl-icon {
   font-size: 24px;
   margin-right: 8px;
 }
-.mdl-navigation a {
+.docs-navigation a {
   display: flex;
 }
-.mdl-navigation a, section.download {
+.docs-navigation a, section.download {
   font-weight: 500;
   font-size: 13px;
   text-transform: uppercase;
@@ -122,73 +119,73 @@ body:not(.about) .mdl-layout-title {
   box-sizing: border-box;
   border-bottom: 3px solid transparent;
 }
-.mdl-navigation a:hover {
+.docs-navigation a:hover {
   background-color: inherit;
 }
-.mdl-navigation a:not(.download) {
+.docs-navigation a:not(.download) {
   opacity: 0.65;
 }
-.mdl-navigation a.download > span {
+.docs-navigation a.download > span {
   opacity: 0.65;
 }
-.mdl-navigation .mdl-layout-spacer ~ a {
+.docs-navigation .mdl-layout-spacer ~ a {
   text-transform: none;
 }
-.mdl-navigation .mdl-layout-spacer ~ a:hover {
+.docs-navigation .mdl-layout-spacer ~ a:hover {
   background-color: transparent;
 }
-.mdl-navigation a.download {
+.docs-navigation a.download {
   text-decoration: none;
 }
-.mdl-navigation a.download > span {
+.docs-navigation a.download > span {
   color: inherit;
   text-decoration: inherit;
 }
-.mdl-navigation a.download button {
+.docs-navigation a.download button {
   margin-left: 8px;
 }
-.mdl-navigation a.download .material-icons {
+.docs-navigation a.download .material-icons {
   color: black;
   opacity: 0.5;
 }
-.about .mdl-navigation .about,
-.templates .mdl-navigation .templates,
-.components .mdl-navigation .components,
-.styles .mdl-navigation .styles,
-.customize .mdl-navigation .customize {
+.about .docs-navigation .about,
+.templates .docs-navigation .templates,
+.components .docs-navigation .components,
+.styles .docs-navigation .styles,
+.customize .docs-navigation .customize {
   opacity: 1;
   border-bottom-color: #18FFFF;
 }
-.mdl-layout__content {
+.docs-layout-content {
   overflow: visible;
 }
-.mdl-layout__content > section.download {
+.docs-layout-content > section.download {
   width: 100%;
   height: 6rem;
   display: flex;
   justify-content: center;
   align-items: center;
 }
-.mdl-layout__content > section.download > a {
+.docs-layout-content > section.download > a {
   font-weight: 300;
   text-transform: uppercase;
 }
-.mdl-layout__content > footer {
+.docs-layout-content > footer {
   height: 120px;
 }
-.mdl-mini-footer {
+.docs-footer {
   flex-direction: column;
   align-items: stretch;
   justify-content: center;
 }
-.mdl-mini-footer ul {
+.docs-footer ul {
   padding: 0;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
 }
-.mdl-mini-footer ul > a {
+.docs-footer ul > a {
   margin: 0 8px;
   font-weight: 400;
   font-size: 12px;
@@ -279,7 +276,7 @@ body:not(.about) .mdl-layout-title {
 .templates .content {
   max-width: 1280px;
 }
-.templates .mdl-layout__content .content {
+.templates .docs-layout-content .content {
   padding: 72px 0;
 }
 .template {
@@ -302,7 +299,7 @@ body:not(.about) .mdl-layout-title {
 .template > .template__preview {
   height: auto;
 }
-.mdl-layout__content p {
+.docs-layout-content p {
   font-size: 15px;
   margin-bottom: 32px;
 
@@ -310,18 +307,18 @@ body:not(.about) .mdl-layout-title {
   font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
 }
 
-.mdl-layout__content ol li {
+.docs-layout-content ol li {
   font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
 }
 
-.mdl-layout__content h1 {
+.docs-layout-content h1 {
   color: #c2185b;
   font-size: 2.5em;
   margin: .67em 0;
 }
 
 
-.mdl-layout__content h2 {
+.docs-layout-content h2 {
   padding-top: 48px;
   font-size: 24px;
   font-weight: 400;
@@ -330,17 +327,17 @@ body:not(.about) .mdl-layout-title {
   color: #c2185b;
 }
 
-.mdl-layout__content a {
+.docs-layout-content a {
   @extend mdl-color-text--cyan-600;
   text-decoration: none;
 }
 
-.mdl-layout__content .mdl-download {
+.docs-layout-content .mdl-download {
   color: #000;
   font-weight: normal;
 }
 
-.mdl-layout-title a,
+.docs-layout-title a,
 button a {
   color: inherit;
   text-decoration: none;
diff --git a/docs/_templates/layout.html b/docs/_templates/layout.html
index e8c1e9db..91abc0b7 100644
--- a/docs/_templates/layout.html
+++ b/docs/_templates/layout.html
@@ -44,10 +44,10 @@
     <script src="{{page.include_prefix}}material.min.js"></script>
   </head>
   <body class="{{page.bodyclass}}">
-  <div class="mdl-layout mdl-js-layout">
-    <header class="mdl-layout__header">
+  <div class="docs-layout mdl-layout mdl-js-layout">
+    <header class="docs-layout-header mdl-layout__header">
       <div class="mdl-layout__header-row">
-        <span class="mdl-layout-title"><a href="/">Material<br>Design<br>Lite</a></span>
+        <span class="docs-layout-title mdl-layout-title"><a href="/">Material<br>Design<br>Lite</a></span>
         <div class="mdl-layout-spacer"></div>
         <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
           <label class="mdl-button mdl-js-button mdl-button--icon" for="search">
@@ -59,7 +59,7 @@
           </div>
         </div>
       </div>
-      <nav class="mdl-navigation mdl-js-ripple-effect">
+      <nav class="docs-navigation mdl-navigation mdl-js-ripple-effect">
         <a href="{{page.include_prefix}}" class="mdl-navigation__link about">About</a>
         <a href="{{page.include_prefix}}templates" class="mdl-navigation__link templates">Templates</a>
         <a href="{{page.include_prefix}}components" class="mdl-navigation__link components">Components</a>
@@ -76,7 +76,7 @@
       </nav>
     </header>
     <div class="subpageheader">{{page.title}}</div>
-    <main class="mdl-layout__content mdl-color-text--grey-600">
+    <main class="docs-layout-content mdl-layout__content mdl-color-text--grey-600">
       <div class="content mdl-grid mdl-grid--no-spacing">
         {% block content %}
           {{content|safe}}
@@ -85,7 +85,7 @@
       <section class="download mdl-color--grey-800">
         <a href="#" class="mdl-color-text--grey-50">Download Kit</a>
       </section>
-      <footer class="mdl-mini-footer mdl-color--grey-900">
+      <footer class="docs-footer mdl-mini-footer mdl-color--grey-900">
         <ul>
           <button class="mdl-mini-footer--social-btn social-btn social-btn__twitter"></button>
           <button class="mdl-mini-footer--social-btn social-btn social-btn__blogger"></button>