CSS Refactor: Minimize global styles, support high contrast mode, new typography feature

docs/app/css/layout-demo.css

@@ -66,3 +66,8 @@ demo-include {
 [ng-panel] .demo-content {
   background: white;
 }
+@media screen and (-ms-high-contrast: active) {
+  .layout-content demo-include [layout] > div {
+    border: 1px solid #fff !important;
+  }
+}

docs/app/css/style.css

@@ -4,17 +4,7 @@ body {
   overflow: hidden;
   max-width: 100%;
   max-height: 100%;
-  font-size: 16px;
 }
-
-a {
-  color: #3f51b5;
-  text-decoration: none;
-}
-a:hover, a:focus {
-  text-decoration: underline;
-}
-
 table {
   margin-bottom: 20px;
   max-width: 100%;
@@ -37,20 +27,6 @@ th {
   background-color: #f5f5f5;
 }
 
-ul {
-  margin: 0;
-  padding: 0;
-}
-ul li {
-  margin-left: 16px;
-  padding: 0;
-  margin-top: 3px;
-  list-style-position: inside;
-}
-ul li:first-child {
-  margin-top: 0;
-}
-
 ul.skip-links li {
   list-style: none;
   margin: 0;
@@ -106,7 +82,7 @@ pre > code.highlight {
 }
 
 code {
-  font-size: 14px;
+  font-size: 0.875rem;
   background: #f6f6f6;
 }
 
@@ -165,7 +141,7 @@ code:not(.highlight) {
   border-radius: 0;
   color: inherit;
   cursor: pointer;
-  font-weight: 400;
+  display: block;
   line-height: 40px;
   margin: 0;
   max-height: 40px;
@@ -176,20 +152,14 @@ code:not(.highlight) {
   white-space: normal;
   width: 100%;
 }
-.docs-menu a.md-button {
-  display: block;
-}
 .docs-menu button.md-button::-moz-focus-inner {
   padding: 0;
 }
 .docs-menu .md-button.active {
   color: #03a9f4;
 }
 .menu-heading {
-  color: #888;
   display: block;
-  font-size: inherit;
-  font-weight: 500;
   line-height: 40px;
   margin: 0;
   padding: 0px 16px;
@@ -218,30 +188,36 @@ code:not(.highlight) {
 }
 .docs-menu .menu-toggle-list a.md-button {
   display: block;
+  font-weight: 400;
   padding: 0 16px 0 32px;
   text-transform: none;
 }
 .md-button-toggle .md-toggle-icon {
-  background: transparent url(img/icons/list_control_down.png) no-repeat center center;
-  background-size: 100% auto;
-  display: inline-block;
-  height: 24px;
-  margin: auto 0 auto auto;
+  display: block;
+  margin-left: auto;
   speak: none;
-  width: 24px;
+  vertical-align: middle;
+  transform: rotate(180deg);
+  -webkit-transform: rotate(180deg);
   transition: transform 0.3s ease-in-out;
   -webkit-transition: -webkit-transform 0.3s ease-in-out;
 }
 .md-button-toggle .md-toggle-icon.toggled {
-  transform: rotate(180deg);
-  -webkit-transform: rotate(180deg);
+  transform: rotate(0deg);
+  -webkit-transform: rotate(0deg);
 }
 /* End Docs Menu */
 
-.docs-logotype {
-  line-height:40px;
-  text-indent: 15px;
+.docs-logo:focus {
+  outline: none;
 }
+  .docs-logo md-icon {
+    margin: 0 16px 0 0;
+  }
+  .docs-logotype {
+    line-height: 40px;
+    text-indent: 15px;
+  }
 .docs-menu-icon {
   background: none;
   border: none;
@@ -264,7 +240,6 @@ code:not(.highlight) {
     display: none;
   }
 }
-
 docs-demo {
   display: block;
   margin-top: 16px;
@@ -364,7 +339,6 @@ md-tabs.demo-source-tabs .active md-tab-label {
 .small-demo .md-toolbar-tools {
   min-height: 48px;
   max-height: 48px;
-  font-size: 20px;
 }
 
 .show-source md-toolbar.demo-toolbar {
@@ -479,13 +453,6 @@ code.api-type {
   font-weight: bold;
 }
 
-.layout-title {
-  color: #999999;
-  font-size: 14px;
-  font-weight: bold;
-  text-transform: uppercase;
-}
-
 .api-params-content ul {
   padding-left: 4px;
 }
@@ -539,5 +506,15 @@ md-content.demo-source-container > hljs > pre > code.highlight {
 }
 
 .api-section h3 {
-    padding-top:20px;
+  padding-top: 20px;
+}
+
+/* Styles for Windows High Contrast mode */
+@media screen and (-ms-high-contrast: active) {
+  a {
+    text-decoration: underline;
+  }
+  iframe, hljs pre {
+    border: 1px solid #fff;
+  }
 }

docs/app/partials/docs-demo.tmpl.html

@@ -13,13 +13,14 @@
           <span>{{demoCtrl.demoTitle}}</span>
           <span flex></span>
           <md-button
-            style="min-width: 72px;"
-            layout="row" layout-align="center center"
+            style="min-width: 72px; margin-left: auto;"
             ng-click="demoCtrl.$showSource = !demoCtrl.$showSource">
-            <md-icon md-svg-src="img/icons/ic_visibility_24px.svg"
-               style="margin: 0 4px 0 0;">
-            </md-icon>
-            Source
+            <div flex layout="row" layout-align="center center">
+              <md-icon md-svg-src="img/icons/ic_visibility_24px.svg"
+                 style="margin: 0 4px 0 0;">
+              </md-icon>
+              Source
+            </div>
           </md-button>
         </div>
       </md-toolbar>

docs/app/partials/home.tmpl.html

@@ -38,7 +38,7 @@
           </li>
         </ul>
 
-        <h2>What is Material Design?</h2>
+        <h2 class="md-title">What is Material Design?</h2>
         <p>
             <a href="http://www.google.com/design/spec/material-design/">Material Design</a> is a specification for a
             unified system of visual, motion, and interaction design that adapts across different devices and different

docs/app/partials/layout-container.tmpl.html

@@ -1,6 +1,6 @@
 <div ng-controller="LayoutCtrl" layout="column" layout-fill class="layout-content">
 
-  <h3 class="layout-title">Overview</h3>
+  <h3>Overview</h3>
   <p>
     Angular Material's responsive CSS layout is built on
     <a href="http://www.w3.org/TR/css3-flexbox/">flexbox</a>.
@@ -13,7 +13,7 @@ <h3 class="layout-title">Overview</h3>
   </p>
 
   <md-divider></md-divider>
-  <h3 class="layout-title">Layout Attribute</h3>
+  <h3>Layout Attribute</h3>
   <p>
     Use the <code>layout</code> attribute on an element to arrange its children
     horizontally in a row (<code>layout="row"</code>), or vertically in

docs/app/partials/menu-toggle.tmpl.html

@@ -1,11 +1,15 @@
 <md-button class="md-button-toggle"
   ng-click="toggle()"
   aria-controls="docs-menu-{{section.name | nospace}}"
-  flex layout="row"
   aria-expanded="{{isOpen()}}">
-  {{section.name}}
-  <span aria-hidden="true" class="md-toggle-icon"
-  ng-class="{'toggled' : isOpen()}"></span>
+  <div flex layout="row">
+    {{section.name}}
+    <span flex=""></span>
+    <span aria-hidden="true" class="md-toggle-icon"
+    ng-class="{'toggled' : isOpen()}">
+      <md-icon md-svg-src="toggle-arrow"></md-icon>
+    </span>
+  </div>
   <span class="visually-hidden">
     Toggle {{isOpen()? 'expanded' : 'collapsed'}}
   </span>

docs/config/template/index.template.html

@@ -11,7 +11,7 @@
 
 <script src="docs.js"></script>
 <script src="docs-demo-scripts.js"></script>
-<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
 <link rel="stylesheet" href="docs.css">
 </head>
 <body layout="row">
@@ -22,15 +22,8 @@
 
     <md-toolbar>
       <h1 class="md-toolbar-tools">
-        <a ng-href="/" layout="row" flex>
-          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" style="
-              width: 40px; height: 40px;">
-            <path d="M 50 0 L 100 14 L 92 80 L 50 100 L 8 80 L 0 14 Z" fill="#b2b2b2"></path>
-            <path d="M 50 5 L 6 18 L 13.5 77 L 50 94 Z" fill="#E42939"></path>
-            <path d="M 50 5 L 94 18 L 86.5 77 L 50 94 Z" fill="#B72833"></path>
-            <path d="M 50 7 L 83 75 L 72 75 L 65 59 L 50 59 L 50 50 L 61 50 L 50 26 Z" fill="#b2b2b2"></path>
-            <path d="M 50 7 L 17 75 L 28 75 L 35 59 L 50 59 L 50 50 L 39 50 L 50 26 Z" fill="#fff"></path>
-          </svg>
+        <a ng-href="/" layout="row" flex class="docs-logo">
+          <md-icon md-svg-src="menu"></md-icon>
           <div class="docs-logotype">Material Design</div>
         </a>
       </h1>
@@ -45,7 +38,7 @@ <h1 class="md-toolbar-tools">
     <md-content flex role="navigation">
       <ul class="docs-menu">
         <li ng-repeat="section in menu.sections" class="parent-list-item" ng-class="{'parentActive' : isSectionSelected(section)}">
-          <h2 class="menu-heading" ng-if="section.type === 'heading'" id="heading_{{ section.name | nospace }}">
+          <h2 class="menu-heading md-subhead" ng-if="section.type === 'heading'" id="heading_{{ section.name | nospace }}">
             {{section.name}}
           </h2>
           <menu-link section="section" ng-if="section.type === 'link'"></menu-link>
@@ -65,7 +58,7 @@ <h2 class="menu-heading" ng-if="section.type === 'heading'" id="heading_{{ secti
   <div layout="column" tabIndex="-1" role="main" flex>
     <md-toolbar>
 
-      <div class="md-toolbar-tools" ng-click="openMenu()">
+      <div class="md-toolbar-tools docs-toolbar-tools" ng-click="openMenu()" tabIndex="-1">
         <button class="docs-menu-icon" hide-gt-sm aria-label="Toggle Menu">
           <md-icon md-svg-src="img/icons/ic_menu_24px.svg"></md-icon>
         </button>

gulpfile.js

@@ -66,6 +66,7 @@ var config = {
     'src/core/style/variables.scss',
     'src/core/style/mixins.scss',
     'src/core/style/structure.scss',
+    'src/core/style/typography.scss',
     'src/core/style/layout.scss'
   ],
   scssStandaloneFiles: [

src/components/autocomplete/autocomplete.scss

@@ -117,6 +117,8 @@ md-autocomplete {
       z-index: -1;
     }
     &:focus {
+      outline: none;
+
       &:after {
         transform: scale(1);
         opacity: 1;
@@ -179,4 +181,14 @@ md-autocomplete {
       }
     }
   }
+  @media screen and (-ms-high-contrast: active) {
+    $border-color: #fff;
+
+    input {
+      border: 1px solid $border-color;
+    }
+    li:focus {
+      color: #fff;
+    }
+  }
 }

src/components/button/button.scss

@@ -41,9 +41,9 @@ $button-fab-toast-offset: $button-fab-height * 0.75;
   // Always uppercase buttons
   text-transform: uppercase;
   font-weight: 500;
+  font-size: $body-font-size-base;
   font-style: inherit;
   font-variant: inherit;
-  font-size: inherit;
   font-family: inherit;
   line-height: inherit;
   text-decoration: none;
@@ -66,7 +66,6 @@ $button-fab-toast-offset: $button-fab-height * 0.75;
   &.ng-hide {
     transition: none;
   }
-;
 
   &.md-cornered {
     border-radius: 0;
@@ -188,3 +187,9 @@ $button-fab-toast-offset: $button-fab-height * 0.75;
     border-radius: 0px 2px 2px 0px;
   }
 }
+@media screen and (-ms-high-contrast: active) {
+  .md-button.md-raised,
+  .md-button.md-fab {
+    border: 1px solid #fff;
+  }
+}

src/components/card/card.scss

@@ -21,3 +21,10 @@ md-card {
     padding: $card-padding;
   }
 }
+
+@media screen and (-ms-high-contrast: active) {
+  md-card {
+    border: 1px solid #fff;
+  }
+}
+

src/components/checkbox/checkbox.scss

@@ -2,13 +2,20 @@ $checkbox-width: 18px !default;
 $checkbox-height: $checkbox-width !default;
 
 md-checkbox {
+  box-sizing: border-box;
   display: block;
   margin: 15px;
   white-space: nowrap;
   cursor: pointer;
   outline: none;
   user-select: none;
 
+  *,
+  *:before,
+  *:after {
+    box-sizing: border-box;
+  }
+
   .md-container {
     position: relative;
     top: 4px;