fix(): refactor global CSS styles

Includes new typography stylesheet, flex styles for layout.scss in Safari

Closes #1442, #1561, #1718

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;
@@ -238,10 +214,13 @@ code:not(.highlight) {
 }
 /* End Docs Menu */
 
-.docs-logotype {
- line-height:40px;
- text-indent: 15px;
+.docs-logo:focus {
+ outline: none;
 }
+ .docs-logotype {
+ line-height: 40px;
+ text-indent: 15px;
+ }
 .docs-menu-icon {
  background: none;
  border: none;
@@ -264,7 +243,10 @@ code:not(.highlight) {
  display: none;
  }
 }
-
+[role=main]:focus,
+.docs-toolbar-tools:focus {
+ outline: none;
+}
 docs-demo {
  display: block;
  margin-top: 16px;
@@ -480,7 +462,6 @@ code.api-type {
 }
 
 .layout-title {
- color: #999999;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
@@ -539,5 +520,5 @@ md-content.demo-source-container > hljs > pre > code.highlight {
 }
 
 .api-section h3 {
-  padding-top:20px;
+ padding-top: 20px;
 }

docs/config/template/index.template.html

@@ -22,7 +22,7 @@
 
  <md-toolbar>
  <h1 class="md-toolbar-tools">
- <a ng-href="/" layout="row" flex>
+ <a ng-href="/" layout="row" flex class="docs-logo">
  <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>
@@ -65,7 +65,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/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;

src/components/dialog/dialog.scss

@@ -33,6 +33,10 @@ md-dialog {
  display: flex;
  flex-direction: column;
 
+ &:focus {
+ outline: none;
+ }
+
  md-content {
  order: 1;
  padding: 24px;

src/components/gridList/gridList.scss

@@ -1,7 +1,14 @@
 md-grid-list {
+ box-sizing: border-box;
  display: block;
  position: relative;
 
+ *,
+ *:before,
+ *:after {
+ box-sizing: border-box;
+ }
+
  md-grid-tile {
  display: block;
  position: absolute;

src/components/icon/demoFontIcons/style.css

@@ -3,6 +3,11 @@
  padding:25px;
  width: 100%;
 }
+.appDemoFontIcons,
+.appDemoFontIcons *:before,
+.appDemoFontIcons *:after {
+ box-sizing: border-box;
+}
 
  /* Bootstrap Overrides */
  [class^="icon-"]:before,

src/components/radioButton/radio-button.scss

@@ -3,11 +3,18 @@ $radio-height: $radio-width !default;
 
 md-radio-button,
 .md-switch-thumb { // Used in switch
+ box-sizing: border-box;
  display: block;
  margin: 15px;
  white-space: nowrap;
  cursor: pointer;
 
+ *,
+ *:before,
+ *:after {
+ box-sizing: border-box;
+ }
+
  input {
  display: none;
  }
@@ -23,7 +30,7 @@ md-radio-button,
  .md-ripple-container {
  position: absolute;
  display: block;
- width: $radio-width * 3; 
+ width: $radio-width * 3;
  height: $radio-width * 3;
  left: -$radio-width;
  top: -$radio-width;

src/components/sidenav/sidenav.scss

@@ -2,6 +2,7 @@ $sidenav-default-width: 304px !default;
 $sidenav-min-space: 56px !default;
 
 md-sidenav {
+ box-sizing: border-box;
  position: absolute;
 
  width: $sidenav-default-width;
@@ -13,6 +14,20 @@ md-sidenav {
  overflow: auto;
  flex-direction: column;
 
+ *,
+ *:before,
+ *:after {
+ box-sizing: border-box;
+ }
+
+ ul {
+ list-style: none;
+ }
+
+ &:focus {
+ outline: none;
+ }
+
  &.md-closed {
  display: none;
  }

src/components/tabs/tabs.scss

@@ -4,10 +4,17 @@ $tabs-tab-width: $baseline-grid * 12 !default;
 $tabs-header-height: 48px !default;
 
 md-tabs {
+ box-sizing: border-box;
  display: block;
  width: 100%;
  font-weight: 500;
  overflow: auto;
+
+ *,
+ *:before,
+ *:after {
+ box-sizing: border-box;
+ }
 }
 
 .md-header {

src/components/toolbar/toolbar.scss

@@ -6,6 +6,7 @@ $toolbar-indent-margin: 64px !default;
 $toolbar-padding: 16px !default;
 
 md-toolbar {
+ box-sizing: border-box;
  display: flex;
  flex-direction: column;
 
@@ -18,6 +19,12 @@ md-toolbar {
 
  box-shadow: $whiteframe-shadow-z1;
 
+ *,
+ *:before,
+ *:after {
+ box-sizing: border-box;
+ }
+
  &.md-tall {
  height: $toolbar-tall-height;
  min-height: $toolbar-tall-height;

src/core/style/layout.scss

@@ -11,6 +11,11 @@
 
 [layout] {
  box-sizing: border-box;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: -moz-flex;
+ display: -ms-flexbox;
  display: flex;
 }
 
@@ -40,7 +45,7 @@
  min-height: 100%;
  width: 100%;
 }
-@-moz-document url-prefix() { 
+@-moz-document url-prefix() {
  [layout-fill] {
  margin: 0;
  width: 100%;
@@ -69,6 +74,11 @@
 @mixin layout-for-name($name) {
  [layout-#{$name}] {
  box-sizing: border-box;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: -moz-flex;
+ display: -ms-flexbox;
  display: flex;
  }
  [layout-#{$name}=column] {
@@ -86,6 +96,7 @@
  }
 
  [#{$flexName}] {
+ box-sizing: border-box;
  flex: 1;
  }
 

src/core/style/mixins.scss

@@ -17,3 +17,32 @@
  color: $color;
  }
 }
+@function map-to-string($map) {
+ $map-str: '{';
+ $keys: map-keys($map);
+ $len: length($keys);
+ @for $i from 1 through $len {
+ $key: nth($keys, $i);
+ $value: map-get($map, $key);
+ $map-str: $map-str + '_' + $key + '_: _' + map-get($map, $key) + '_';
+ @if $i != $len {
+ $map-str: $map-str + ',';
+ }
+ }
+ @return $map-str + '}';
+}
+
+@function map-to-string($map) {
+ $map-str: '{';
+ $keys: map-keys($map);
+ $len: length($keys);
+ @for $i from 1 through $len {
+ $key: nth($keys, $i);
+ $value: map-get($map, $key);
+ $map-str: $map-str + '_' + $key + '_: _' + map-get($map, $key) + '_';
+ @if $i != $len {
+ $map-str: $map-str + ',';
+ }
+ }
+ @return $map-str + '}';
+}