From 21e2f3c1dbfb2a0eac5e954535a12282294cfdf9 Mon Sep 17 00:00:00 2001
From: Jeremy Elbourn <jelbourn@google.com>
Date: Thu, 30 Jul 2015 17:25:32 -0700
Subject: [PATCH] chore(button): dramatically clean-up button css.

---
 .../src/components/button/button.scss         | 416 +++++-------------
 .../src/components/button/button.ts           |   2 +-
 .../src/core/style/shadows.scss               |   8 +-
 .../src/core/style/theme-functions.scss       |   6 +
 .../src/core/style/variables.scss             |   5 +
 .../src/material/button/demo_app.html         |  42 +-
 6 files changed, 149 insertions(+), 330 deletions(-)

diff --git a/modules/angular2_material/src/components/button/button.scss b/modules/angular2_material/src/components/button/button.scss
index aa73c6d3a6..68f45f2a77 100644
--- a/modules/angular2_material/src/components/button/button.scss
+++ b/modules/angular2_material/src/components/button/button.scss
@@ -4,23 +4,24 @@
 // TODO(jelbourn): This goes away.
 @import "../../core/style/default-theme";
 
-$button-line-height: 25px !default;
-$button-padding: 2px 6px 3px !default;
 
-// Fab buttons
-$button-fab-width: 56px !default;
-$button-fab-height: 56px !default;
-$button-fab-padding: 16px !default;
-$button-fab-mini-width: 40px !default;
-$button-fab-mini-height: 40px !default;
+// Standard button sizing.
+$md-button-padding: 0 rem(0.600) !default;
+$md-button-min-width: rem(8.800) !default;
+$md-button-margin: rem(0.600) rem(0.800) !default;
+$md-button-line-height: rem(3.60) !default;
+$md-button-border-radius: 3px !default;
 
-$button-fab-toast-offset: $button-fab-height * 0.75;
+// FAB sizing.
+$md-fab-size: rem(5.600) !default;
+$md-fab-line-height: rem(5.600) !default;
+$md-fab-padding: rem(1.60) !default;
+$md-fab-mini-size: rem(4.00) !default;
+$md-fab-mini-line-height: rem(4.00) !default;
 
-/**
- * Mixin to create distinct classes for fab positions, e.g. ".md-fab-bottom-right".
- */
-@mixin fab-position($spot, $top: auto, $right: auto, $bottom: auto, $left: auto) {
-  &.md-fab-#{$spot} {
+/** Mixin to create distinct classes for fab positions, e.g. ".md-fab-bottom-right". */
+@mixin md-fab-position($spot, $top: auto, $right: auto, $bottom: auto, $left: auto) {
+  .md-fab-position-#{$spot} {
     top: $top;
     right: $right;
     bottom: $bottom;
@@ -29,321 +30,140 @@ $button-fab-toast-offset: $button-fab-height * 0.75;
   }
 }
 
-[md-button] {
-  user-select: none;
+// Base styles for all buttons.
+@mixin md-button-base() {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-block;
 
-  // TODO(jelbourn): What canvas?
-  position: relative; //for child absolute-positioned <canvas>
-
-  outline: none;
-  border: 0;
-  padding: 6px;
-  margin: 0;
-  background: transparent;
-  white-space: nowrap;
-
-  text-align: center;
-
-  // TODO(jelbourn): wat?
+  font-size: $md-body-font-size-base;
   font-weight: 500;
-  font-style: inherit;
-  font-variant: inherit;
-  font-size: inherit;
-  font-family: inherit;
-  line-height: inherit;
+
+  // Reset browser <button> styles.
+  background: transparent;
+  text-align: center;
+  overflow: hidden;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  border: none;
+
+  // Apply nowrap and remove underline for anchor md-buttons.
+  white-space: nowrap;
   text-decoration: none;
 
-  cursor: pointer;
-  overflow: hidden; // for ink containment
+  // Sizing.
+  padding: $md-button-padding;
+  margin: $md-button-margin;
+  min-width: $md-button-min-width;
+  line-height: $md-button-line-height;
+  border-radius: $md-button-border-radius;
 
-  transition: box-shadow $swift-ease-out-duration $swift-ease-out-timing-function,
-  background-color $swift-ease-out-duration $swift-ease-out-timing-function,
-  transform $swift-ease-out-duration $swift-ease-out-timing-function;
+  // Animation.
+  // TODO(jelbourn): figure out where will-change would be beneficial.
+  transition: background $swift-ease-out-duration $swift-ease-out-timing-function;
 
+  // Hide the default browser focus indicator.
   &:focus {
     outline: none;
   }
 
-  &:hover {
+  &:hover, &:focus {
+    // Remove anchor underline again for more specific modifiers.
     text-decoration: none;
+
+    background: md-color($md-background, 500, 0.2);
   }
 
-  &.md-cornered {
-    border-radius: 0;
-  }
-
-  &.md-icon {
-    padding: 0;
-    background: none;
-  }
-
-  &.md-raised {
-    transform: translate3d(0, 0, 0);
-
-
-    &:not([disabled]) {
-      @extend .md-shadow-bottom-z-1;
-    }
-  }
-
-  &.md-fab {
-    // .md-fab-bottom-right
-    @include fab-position(
-        bottom-right,
-        auto,
-        ($button-fab-width - $button-fab-padding) / 2,
-        ($button-fab-height - $button-fab-padding) / 2,
-        auto);
-
-    // .md-fab-bottom-left
-    @include fab-position(
-        bottom-left,
-        auto,
-        auto,
-        ($button-fab-height - $button-fab-padding) / 2,
-        ($button-fab-width - $button-fab-padding) / 2);
-
-    // .md-fab-top-right
-    @include fab-position(
-        top-right,
-        ($button-fab-height - $button-fab-padding) / 2,
-        ($button-fab-width - $button-fab-padding) / 2,
-        auto,
-        auto);
-
-    // .md-fab-top-left
-    @include fab-position(
-        top-left,
-        ($button-fab-height - $button-fab-padding) / 2,
-        auto,
-        auto,
-        ($button-fab-width - $button-fab-padding) / 2);
-
-
-    z-index: $z-index-fab;
-
-    width: $button-fab-width;
-    height: $button-fab-height;
-
-    border-radius: 50%;
-
-    @extend .md-shadow-bottom-z-1;
-    overflow: hidden;
-
-    transform: translate3d(0, 0, 0);
-
-    transition: 0.2s linear;
-    transition-property: transform, box-shadow;
-
-
-    // When there is an md-icon inside of an [md-button].
-    & md-icon {
-      line-height: $button-fab-height;
-      margin-top: 0;
-    }
-
-    &.md-mini {
-      width: $button-fab-mini-width;
-      height: $button-fab-mini-height;
-      md-icon {
-        line-height: $button-fab-mini-height;
-      }
-    }
-
-  }
-
-  &:not([disabled]) {
-    &.md-raised,
-    &.md-fab {
-      &:focus,
-      &:hover {
-        transform: translate3d(0, -1px, 0);
-        @extend .md-shadow-bottom-z-2;
-      }
-    }
-  }
-}
-
-// TODO
-.md-toast-open-top {
-  [md-button].md-fab-top-left,
-  [md-button].md-fab-top-right {
-    transform: translate3d(0, $button-fab-toast-offset, 0);
-    &:not([disabled]) {
-      &:focus,
-      &:hover {
-        transform: translate3d(0, $button-fab-toast-offset - 1, 0);
-      }
-    }
-  }
-}
-
-// TODO
-.md-toast-open-bottom {
-  [md-button].md-fab-bottom-left,
-  [md-button].md-fab-bottom-right {
-    transform: translate3d(0, -$button-fab-toast-offset, 0);
-    &:not([disabled]) {
-      &:focus,
-      &:hover {
-        transform: translate3d(0, -$button-fab-toast-offset - 1, 0);
-      }
-    }
-  }
-}
-
-// TODO
-.md-button-group {
-  display: flex;
-  flex: 1;
-  width: 100%;
-}
-
-// TODO
-.md-button-group > [md-button] {
-  flex: 1;
-
-  display: block;
-
-  overflow: hidden;
-
-  width: 0;
-
-  border-width: 1px 0 1px 1px;
-  border-radius: 0;
-
-  text-align: center;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  &:first-child {
-    border-radius: 2px 0 0 2px;
-  }
-  &:last-child {
-    border-right-width: 1px;
-    border-radius: 0 2px 2px 0;
-  }
-}
-
-
-// ------------------------ Button theme ----------------------------------------------------------
-
-$button-border-radius: 3px !default;
-$button-fab-border-radius: 50% !default;
-
-// The ELEMENT '[md-button]' is the host.
-// The CLASS '[md-button]' is the shadow root.
-
-md-toolbar [md-button].md-fab {
-  background-color: white;
-}
-
-
-// Because of Shadow DOM emulation, the modifier classes are applied to the [md-button]
-// element (host), but the style needs to be changed for the shadow content (.[md-button]).
-[md-button] {
-  border-radius: $button-border-radius;
-
-  // When the user explictly applies the primary color.
   &.md-primary {
     color: md-color($md-primary);
   }
 
-  &.md-primary.md-fab,
-  &.md-primary.md-raised {
-    color: md-color($md-primary, default-contrast);
-    background-color: md-color($md-primary);
-  }
-
-  // When the user explictly applies the accent color.
   &.md-accent {
     color: md-color($md-accent);
   }
 
-  &.md-accent.md-fab,
-  &.md-accent.md-raised {
+  &:disabled {
+    color: md-color($md-foreground, disabled);
+    background-color: transparent;
+    cursor: default;
+  }
+}
+
+/** Base styles for raised buttons, including FABs. */
+@mixin md-raised-button() {
+  @include md-button-base();
+
+  // Force hardware acceleration.
+  // TODO(jelbourn): determine if this actually has an impact.
+  transform: translate3d(0, 0, 0);
+  box-shadow: $md-shadow-bottom-z-1;
+
+  transition: background $swift-ease-out-duration $swift-ease-out-timing-function,
+              box-shadow $swift-ease-out-duration $swift-ease-out-timing-function;
+
+  &:active {
+    box-shadow: $md-shadow-bottom-z-2;
+  }
+
+  &:disabled {
+    box-shadow: none;
+  }
+
+  &.md-primary {
+    color: md-color($md-primary, default-contrast);
+    background-color: md-color($md-primary);
+  }
+
+  &.md-accent {
     color: md-color($md-accent, default-contrast);
     background-color: md-color($md-accent);
   }
+}
 
-  // When the user explictly applies the warn color.
-  &.md-warn {
-    color: md-color($md-warn);
-  }
 
-  &.md-warn.md-fab,
-  &.md-warn.md-raised {
-    color: md-color($md-warn, default-contrast);
-    background-color: md-color($md-warn);
-  }
+[md-button] {
+  @include md-button-base();
+}
 
-  // When the button is a fab without an explicit color applied.
-  &.md-fab {
-    border-radius: $button-fab-border-radius;
-    background-color: md-color($md-accent);
-    color: md-color($md-accent, default-contrast);
-  }
+[md-raised-button] {
+  @include md-raised-button();
 
-  // When the button is raised without an explicit color applied.
-  &.md-raised {
-    color: md-color($md-background, default-contrast);
-    background-color: md-color($md-background, 50);
+  color: md-color($md-background, default-contrast);
+  background-color: md-color($md-background, 50);
+}
+
+[md-fab] {
+  @include md-raised-button();
+
+  z-index: $z-index-fab;
+
+  border-radius: 50%;
+  min-width: 0;
+  width: $md-fab-size;
+  height: $md-fab-size;
+  line-height: $md-fab-line-height;
+  vertical-align: middle;
+
+  // TODO(jelbourn): May need `background-clip: padding-box;` depending on ripple implementation.
+
+  &.md-mini {
+    line-height: $md-fab-mini-line-height;
+    width: $md-fab-mini-size;
+    height: $md-fab-mini-size;
   }
 }
 
-// Hover and focus styles (only applied when the button is not disabled).
-// The modifiers for :focus and :hover actually apply to the element in the
-// shadow DOM (the .[md-button]).
-[md-button]:not([disabled])  {
-  // Default hover/focus background.
-  &:focus,
-  &:hover {
-    background-color: md-color($md-background, 500, 0.2);
-  }
-
-  &.md-primary.md-fab,
-  &.md-primary.md-raised {
-    &:hover,
-    &:focus {
-      background-color: md-color($md-primary, 600);
-    }
-  }
-
-  &.md-accent.md-fab,
-  &.md-accent.md-raised {
-    &:hover,
-    &:focus {
-      background-color: md-color($md-accent, 700);
-    }
-  }
-
-  &.md-warn.md-fab,
-  &.md-warn.md-raised {
-    &:hover,
-    &:focus {
-      background-color: md-color($md-warn, 700);
-    }
-  }
-
-  &.md-fab {
-    &:hover,
-    &:focus {
-      background-color: md-color($md-accent, A700);
-    }
-  }
-
-  &.md-raised {
-    &:hover,
-    &:focus {
-      background-color: md-color($md-background, 200);
-    }
+// Styles for high contrast mode.
+@media screen and (-ms-high-contrast: active) {
+  [md-raised],
+  [md-fab] {
+    border: 1px solid #fff;
   }
 }
 
-[md-button][disabled],
-[md-button][disabled].md-fab,
-[md-button][disabled].md-raised, {
-  color: md-color($md-foreground, disabled);
-  background-color: transparent;
-  cursor: not-allowed;
-}
+$md-fab-pos-offset: ($md-fab-size - $md-fab-padding) / 2;
+@include md-fab-position(bottom-right, auto, $md-fab-pos-offset, $md-fab-pos-offset, auto);
+@include md-fab-position(bottom-left, auto, auto, $md-fab-pos-offset, $md-fab-pos-offset);
+@include md-fab-position(top-right, $md-fab-pos-offset, $md-fab-pos-offset, auto, auto);
+@include md-fab-position(top-left, $md-fab-pos-offset, auto, auto, $md-fab-pos-offset);
diff --git a/modules/angular2_material/src/components/button/button.ts b/modules/angular2_material/src/components/button/button.ts
index d113dbaf25..222c24fb56 100644
--- a/modules/angular2_material/src/components/button/button.ts
+++ b/modules/angular2_material/src/components/button/button.ts
@@ -2,7 +2,7 @@ import {Component, View, LifecycleEvent, ViewEncapsulation} from 'angular2/angul
 import {isPresent} from 'angular2/src/facade/lang';
 
 
-@Component({selector: '[md-button]:not([href])'})
+@Component({selector: '[md-button]:not(a), [md-fab]:not(a), [md-raised-button]:not(a)'})
 @View({
   templateUrl: 'package:angular2_material/src/components/button/button.html',
   encapsulation: ViewEncapsulation.NONE
diff --git a/modules/angular2_material/src/core/style/shadows.scss b/modules/angular2_material/src/core/style/shadows.scss
index 572629e2b2..ec31006c01 100644
--- a/modules/angular2_material/src/core/style/shadows.scss
+++ b/modules/angular2_material/src/core/style/shadows.scss
@@ -1,9 +1,5 @@
 // Elements can have an "elevation" from 1 to 5, signified by shadows.
 // See http://google.com/design/spec/what-is-material/objects-in-3d-space.html
-.md-shadow-bottom-z-1 {
-  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-}
 
-.md-shadow-bottom-z-2 {
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
-}
+$md-shadow-bottom-z-1: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+$md-shadow-bottom-z-2: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
diff --git a/modules/angular2_material/src/core/style/theme-functions.scss b/modules/angular2_material/src/core/style/theme-functions.scss
index f4611bd7ae..4a3537ee5a 100644
--- a/modules/angular2_material/src/core/style/theme-functions.scss
+++ b/modules/angular2_material/src/core/style/theme-functions.scss
@@ -2,6 +2,12 @@
 // md-palette: used for defining your theme in terms of Material hues.
 // md-color: apply colors to components from the palette. Consumes the output of md-palette
 
+// Implement the rem unit with SCSS so we don't have to actually set a font-size on
+// the user's body element.
+@function rem($multiplier) {
+  $font-size: 10px;
+  @return $multiplier * $font-size;
+}
 
 // For a given hue in a palette, return the contrast color from the map of contrast palettes.
 @function md-contrast($color-map, $hue, $contrast-color-map) {
diff --git a/modules/angular2_material/src/core/style/variables.scss b/modules/angular2_material/src/core/style/variables.scss
index d6a13addc1..690413dc4a 100644
--- a/modules/angular2_material/src/core/style/variables.scss
+++ b/modules/angular2_material/src/core/style/variables.scss
@@ -1,3 +1,5 @@
+@import 'theme-functions';
+
 // Font
 $font-family: RobotoDraft, Roboto, 'Helvetica Neue', sans-serif !default;
 
@@ -9,6 +11,9 @@ $layout-breakpoint-md:     960px !default;
 $layout-breakpoint-lg:     1200px !default;
 $layout-gutter-width:      ($baseline-grid * 2) !default;
 
+// Typography
+$md-body-font-size-base: rem(1.400) !default;
+
 
 // App bar variables
 $app-bar-height: 64px;
diff --git a/modules/examples/src/material/button/demo_app.html b/modules/examples/src/material/button/demo_app.html
index 8c09669dd0..99f1130196 100644
--- a/modules/examples/src/material/button/demo_app.html
+++ b/modules/examples/src/material/button/demo_app.html
@@ -7,21 +7,13 @@
     position: relative !important;
     padding-bottom: 10px;
   }
-  section [md-button]:not(.md-fab) {
-    min-width: 10em;
+  .label {
+    position: absolute;
+    bottom: 5px;
+    left: 7px;
+    color: #ccc;
+    font-size: 14px;
   }
-  section [md-button] {
-    display: inline-block;
-    margin: 1em;
-    line-height: 25px;
-  }
-.label {
-  position: absolute;
-  bottom: 5px;
-  left: 7px;
-  color: #ccc;
-  font-size: 14px;
-}
 </style>
 
 <h1>Button demo</h1>
@@ -52,25 +44,25 @@
 
 <section>
   <span class="label">Raised button</span>
-  <button md-button class="md-raised" (^click)="click('raised')">BUTTON</button>
-  <button md-button class="md-raised md-primary" (^click)="click('raised primary')">PRIMARY</button>
-  <button md-button class="md-raised" disabled="disabled" (^click)="click('raised disabled')">DISABLED</button>
-  <button md-button class="md-raised md-accent" (^click)="click('raised accent')">ACCENT</button>
-  <button md-button class="md-raised md-warn" (^click)="click('raised warn')">WARN</button>
+  <button md-raised-button (^click)="click('raised')">BUTTON</button>
+  <button md-raised-button class="md-primary" (^click)="click('raised primary')">PRIMARY</button>
+  <button md-raised-button disabled="disabled" (^click)="click('raised disabled')">DISABLED</button>
+  <button md-raised-button class="md-accent" (^click)="click('raised accent')">ACCENT</button>
+  <button md-raised-button class="md-warn" (^click)="click('raised warn')">WARN</button>
 </section>
 <section>
   <span class="label">Fab button</span>
-  <button md-button class="md-fab" (^click)="click('fab')">BTN</button>
-  <button md-button class="md-fab md-primary" (^click)="click('fab primary')">PRMY</button>
-  <button md-button class="md-fab" disabled="disabled" (^click)="click('fab disabled')">DIS</button>
-  <button md-button class="md-fab md-accent" (^click)="click('fab accent')">ACC</button>
-  <button md-button class="md-fab md-warn" (^click)="click('fab warn')">WRN</button>
+  <button md-fab (^click)="click('fab')">BTN</button>
+  <button md-fab class="md-primary" (^click)="click('fab primary')">PRMY</button>
+  <button md-fab disabled="disabled" (^click)="click('fab disabled')">DIS</button>
+  <button md-fab class="md-accent" (^click)="click('fab accent')">ACC</button>
+  <button md-fab class="md-warn" (^click)="click('fab warn')">WRN</button>
 </section>
 <section>
   <span class="label">Anchor / hyperlink</span>
   <a md-button href="http://google.com" target="_blank">HREF</a>
   <a md-button href="http://google.com" disabled>DISABLED HREF</a>
-  <a md-button class="md-raised" target="_blank" href="http://google.com">RAISED HREF</a>
+  <a md-raised-button target="_blank" href="http://google.com">RAISED HREF</a>
 </section>