From 1612d4898f5bddf1b842fc06b97f2b85a1fe7728 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Gomes?= <sgomes@google.com>
Date: Wed, 10 Dec 2014 17:54:56 +0000
Subject: [PATCH] Cleaning up button and FAB SCSS - Make sure as much as
 possible is behind optional classes - Rename everything to follow style
 convention - Add new class for JS binding - Rearrange SCSS to take advantage
 of nesting with & - Merge button and FAB demos

---
 app/material-styleguide.html       |   5 -
 app/styleguide/button/_button.scss | 324 ++++++++++++++---------------
 app/styleguide/button/button.js    |   4 +-
 app/styleguide/button/demo.html    |  31 ++-
 app/styleguide/button/demo.scss    |   6 +-
 app/styleguide/fab/demo.html       |  47 -----
 app/styleguide/fab/demo.scss       |   8 -
 7 files changed, 185 insertions(+), 240 deletions(-)
 delete mode 100644 app/styleguide/fab/demo.html
 delete mode 100644 app/styleguide/fab/demo.scss

diff --git a/app/material-styleguide.html b/app/material-styleguide.html
index 63b79d0c..596aeb70 100644
--- a/app/material-styleguide.html
+++ b/app/material-styleguide.html
@@ -78,11 +78,6 @@
           <iframe src="./styleguide/button/demo.html" scrolling="no"></iframe>
         </div>
 
-        <div class="styleguide-demo">
-          <h1>Floating Action Button</h1>
-          <iframe src="./styleguide/fab/demo.html" scrolling="no"></iframe>
-        </div>
-
         <div class="styleguide-demo">
           <h1>Dropdown Menu</h1>
           <iframe src="./styleguide/dropdown-menu/demo.html" scrolling="no"></iframe>
diff --git a/app/styleguide/button/_button.scss b/app/styleguide/button/_button.scss
index 667d36ea..1a278b3a 100644
--- a/app/styleguide/button/_button.scss
+++ b/app/styleguide/button/_button.scss
@@ -4,49 +4,47 @@
 @import "../animation/animation";
 @import "../ripple/ripple";
 
-// Default button colors
-$default-btn-color: rgba(#999999, 0.20);
-$default-btn-hover-color: $default-btn-color;
-$default-btn-active-color: rgba($default-btn-color, 0.40);
-$default-btn-text-color: #000;
-$default-flat-btn-focus-color: rgba(black, 0.12);
+// Default button colors.
+$button-primary-color: rgba(#999999, 0.20);
+$button-secondary-color: #000;
+$button-hover-color: $button-primary-color;
+$button-active-color: rgba($button-primary-color, 0.40);
+$button-focus-color: rgba(black, 0.12);
 
-// Colored button colors
-$colored-btn-color: nth($primaryPalette, 6);
-$colored-btn-hover-color: nth($primaryPalette, 7);
-$colored-btn-active-color: nth($primaryPalette, 8);
-$colored-flat-btn-focus-color: $default-flat-btn-focus-color;
-$colored-raised-btn-text-color: #fff;
+// Colored button colors.
+$button-primary-color-alt: nth($primaryPalette, 6);
+$button-secondary-color-alt: #fff;
+$button-hover-color-alt: nth($primaryPalette, 7);
+$button-active-color-alt: nth($primaryPalette, 8);
+$button-focus-color-alt: $button-focus-color;
 
-// Ripple color for colored raised buttons
-$color-ripple-raised-bg-color: white;
+// Ripple color for colored raised buttons and FABs.
+$button-ripple-color-alt: white;
 
-// Disabled button colors
-$disabled-btn-text-color: rgba(#000, 0.26);
-$disabled-raised-btn-bg-color: rgba(#000, 0.12);
+// Disabled button colors.
+$button-primary-color-disabled: rgba(#000, 0.12);
+$button-secondary-color-disabled: rgba(#000, 0.26);
 
-// FAB colors and sizes
-$fab-bg-color: nth($accentPalette, 5);
-$fab-hover-color: nth($accentPalette, 6);
-$fab-active-color: nth($accentPalette, 7);
-$default-fab-size: 56px;
-$mini-fab-size: 40px;
-$fab-font-size: 24px;
+// FAB colors and sizes.
+$button-fab-color-alt: nth($accentPalette, 5);
+$button-fab-hover-color-alt: nth($accentPalette, 6);
+$button-fab-active-color-alt: nth($accentPalette, 7);
+$button-fab-size: 56px;
+$button-fab-size-mini: 40px;
+$button-fab-font-size: 24px;
 
-// Focus shadow
+// Focus shadow mixin.
 @mixin focus-shadow() {
   box-shadow: 0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);
 }
 
 
-// Flat buttons (default)
-
-.PaperButton,
-.PaperFab {
+// The button component. Defaults to a flat button.
+.wsk-button {
   background: transparent;
   border: none;
   border-radius: 2px;
-  color: $default-btn-text-color;
+  color: $button-secondary-color;
   display: block;
   position: relative;
   height: 36px;
@@ -61,168 +59,162 @@ $fab-font-size: 24px;
               background-color 0.2s $animation-curve-default,
               color 0.2s $animation-curve-default;
   outline: none;
-}
 
-.PaperButton::-moz-focus-inner,
-.PaperFab::-moz-focus-inner {
-  border: 0;
-}
+  &::-moz-focus-inner {
+    border: 0;
+  }
 
-.PaperButton--colored {
-  color: $colored-btn-color;
-}
+  &:hover {
+    background-color: $button-hover-color;
+  }
 
-.PaperButton:hover {
-  background-color: $default-btn-hover-color;
-}
+  &:focus:not(:active) {
+    background-color: $button-focus-color;
+  }
 
-.PaperButton:focus:not(:active) {
-  background-color: $default-flat-btn-focus-color;
-}
+  &:active {
+    background-color: $button-active-color;
+  }
 
-.PaperButton.PaperButton--colored:focus:not(:active) {
-  background-color: $colored-flat-btn-focus-color;
-}
+  // Bump up specificity by using [disabled] twice.
+  &[disabled][disabled] {
+    color: $button-secondary-color-disabled;
+    cursor: auto;
+    background-color: transparent;
+  }
 
-.PaperButton:active {
-  background-color: $default-btn-active-color;
+  &.wsk-button--colored {
+    color: $button-primary-color-alt;
+
+    &:focus:not(:active) {
+      background-color: $button-focus-color-alt;
+    }
+  }
 }
 
 
-// Raised buttons
+  // Raised buttons
+  .wsk-button--raised {
+    background: $button-primary-color;
+    @include shadow-z1();
 
-.PaperButton--raised,
-.PaperFab {
-  background: $default-btn-color;
-  @include shadow-z1();
-}
+    &:active {
+      @include shadow-z3();
+      background-color: $button-active-color;
+    }
 
-.PaperButton--raised.PaperButton--colored {
-  background: $colored-btn-color;
-  color: $colored-raised-btn-text-color;
-}
+    &:focus:not(:active) {
+      @include focus-shadow();
+      background-color: $button-active-color;
+    }
 
-.PaperButton--raised.PaperButton--colored:hover {
-  background-color: $colored-btn-hover-color;
-}
+    &.wsk-button--colored {
+      background: $button-primary-color-alt;
+      color: $button-secondary-color-alt;
 
-.PaperButton--raised:focus:not(:active),
-.PaperFab:focus:not(:active) {
-  @include focus-shadow();
-  background-color: $default-btn-active-color;
-}
+      &:hover {
+        background-color: $button-hover-color-alt;
+      }
 
-.PaperButton--raised.PaperButton--colored:focus:not(:active) {
-  background-color: $colored-btn-active-color;
-}
+      &:active {
+        background-color: $button-active-color-alt;
+      }
 
-.PaperButton--raised:active,
-.PaperFab:active {
-  @include shadow-z3();
-  background-color: $default-btn-active-color;
-}
+      &:focus:not(:active) {
+        background-color: $button-active-color-alt;
+      }
 
-.PaperButton[disabled].PaperButton--raised:hover,
-.PaperFab[disabled]:hover {
-  background-color: $disabled-raised-btn-bg-color;
-}
+      & .Ripple {
+        background: $button-ripple-color-alt;
+      }
+    }
 
-.PaperButton--raised.PaperButton--colored:active {
-  background-color: $colored-btn-active-color;
-}
-
-.PaperButton--raised.PaperButton--colored .Ripple,
-.PaperFab.PaperButton--colored .Ripple,
-.PaperFab.PaperFab--colored .Ripple {
-  background: $color-ripple-raised-bg-color;
-}
+    // Bump up specificity by using [disabled] twice.
+    &[disabled][disabled] {
+      background-color: $button-primary-color-disabled;
+      color: $button-secondary-color-disabled;
+      @include shadow-z1();
+    }
+  }
 
 
-// FABs
+  // FABs
+  .wsk-button--fab {
+    border-radius: 50%;
+    font-size: $button-fab-font-size;
+    height: $button-fab-size;
+    margin: auto;
+    min-width: $button-fab-size;
+    width: $button-fab-size;
+    padding: 0;
+    overflow: hidden;
+    background: $button-primary-color;
+    @include shadow-z1();
 
-.PaperFab {
-  border-radius: 50%;
-  font-size: $fab-font-size;
-  height: $default-fab-size;
-  margin: auto;
-  min-width: $default-fab-size;
-  width: $default-fab-size;
-  padding: 0;
-  overflow: hidden;
-}
+    &.wsk-button--mini-fab {
+      height: $button-fab-size-mini;
+      min-width: $button-fab-size-mini;
+      width: $button-fab-size-mini;
+    }
 
-.PaperFab.PaperFab--mini {
-  height: $mini-fab-size;
-  min-width: $mini-fab-size;
-  width: $mini-fab-size;
-}
+    & .wsk-button__ripple-container {
+      border-radius: 50%;
+      // Fixes clipping bug in Safari.
+      -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
+    }
 
-.PaperFab .PaperButton-rippleContainer {
-  border-radius: 50%;
-  -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
-}
+    &:active {
+      @include shadow-z3();
+      background-color: $button-active-color;
+    }
 
-.PaperFab.PaperButton--colored,
-.PaperFab.PaperFab--colored {
-  background: $fab-bg-color;
-  color     : $colored-raised-btn-text-color;
-}
+    &:focus:not(:active) {
+      @include focus-shadow();
+      background-color: $button-active-color;
+    }
 
-.PaperFab.PaperButton--colored:hover,
-.PaperFab.PaperFab--colored:hover {
-  background-color: $fab-hover-color;
-}
+    &.wsk-button--colored {
+      background: $button-fab-color-alt;
+      color: $button-secondary-color-alt;
 
-.PaperFab.PaperButton--colored:focus:not(:active),
-.PaperFab.PaperFab--colored:focus:not(:active) {
-  background-color: $fab-active-color;
-}
+      &:hover {
+        background-color: $button-fab-hover-color-alt;
+      }
 
-.PaperFab.PaperButton--colored:active,
-.PaperFab.PaperFab--colored:active {
-  background-color: $fab-active-color;
-}
+      &:focus:not(:active) {
+        background-color: $button-fab-active-color-alt;
+      }
+
+      &:active {
+        background-color: $button-fab-active-color-alt;
+      }
+
+      & .Ripple {
+        background: $button-ripple-color-alt;
+      }
+    }
+
+    // Bump up specificity by using [disabled] twice.
+    &[disabled][disabled] {
+      background-color: $button-primary-color-disabled;
+      color: $button-secondary-color-disabled;
+      @include shadow-z1();
+    }
+  }
 
 
-// Disabled buttons
+  // Ripples
+  .wsk-button__ripple-container {
+    display: block;
+    height: 100%;
+    left: 0px;
+    position: absolute;
+    top: 0px;
+    width: 100%;
+    z-index: 0;
+    overflow: hidden;
 
-.PaperButton[disabled] {
-  color: $disabled-btn-text-color;
-  cursor: auto;
-}
-
-.PaperButton[disabled]:hover {
-  background-color: transparent;
-}
-
-.PaperButton[disabled].PaperButton--raised,
-.PaperFab[disabled],
-.PaperFab[disabled].PaperButton--colored,
-.PaperFab[disabled].PaperFab--colored {
-  background-color: $disabled-raised-btn-bg-color;
-  color: $disabled-btn-text-color;
-}
-
-.PaperButton[disabled].PaperButton--raised:active,
-.PaperFab[disabled]:active {
-  @include shadow-z1();
-}
-
-
-// Ripples
-
-.PaperButton-rippleContainer {
-  display: block;
-  height: 100%;
-  left: 0px;
-  position: absolute;
-  top: 0px;
-  width: 100%;
-  z-index: 0;
-  overflow: hidden;
-}
-
-.PaperButton[disabled] .PaperButton-rippleContainer .Ripple,
-.PaperFab[disabled] .PaperButton-rippleContainer .Ripple, {
-  background-color: transparent;
-}
+    .wsk-button[disabled] & .Ripple {
+      background-color: transparent;
+    }
+  }
diff --git a/app/styleguide/button/button.js b/app/styleguide/button/button.js
index 84402725..d469160a 100644
--- a/app/styleguide/button/button.js
+++ b/app/styleguide/button/button.js
@@ -5,14 +5,14 @@ window.addEventListener('load', function() {
     return function() { element.blur(); };
   };
 
-  var buttonElements = document.querySelectorAll('.PaperButton, .PaperFab');
+  var buttonElements = document.querySelectorAll('.wsk-js-button');
 
   for (var i = 0; i < buttonElements.length; i++) {
     var buttonElement = buttonElements[i];
     var blurHandler = blurHandlerGenerator(buttonElement);
     if (buttonElement.classList.contains('RippleEffect')) {
       var rippleContainer = document.createElement('span');
-      rippleContainer.classList.add('PaperButton-rippleContainer');
+      rippleContainer.classList.add('wsk-button__ripple-container');
       var ripple = document.createElement('span');
       ripple.classList.add('Ripple');
       rippleContainer.appendChild(ripple);
diff --git a/app/styleguide/button/demo.html b/app/styleguide/button/demo.html
index 28820e4e..61950e46 100644
--- a/app/styleguide/button/demo.html
+++ b/app/styleguide/button/demo.html
@@ -15,28 +15,37 @@
 
   <div class="preview-block">
 
-    <button class="PaperButton">Flat</button>
-    <button class="PaperButton PaperButton--raised">Raised</button>
+    <button class="wsk-button wsk-js-button">Flat</button>
+    <button class="wsk-button wsk-js-button wsk-button--raised">Raised</button>
+    <button class="wsk-button wsk-js-button wsk-button--fab">♥</button>
 
     <h2>With Ripples</h2>
 
-    <button class="PaperButton RippleEffect">Flat</button>
-    <button class="PaperButton PaperButton--raised RippleEffect">Raised</button>
+    <button class="wsk-button wsk-js-button RippleEffect">Flat</button>
+    <button class="wsk-button wsk-js-button wsk-button--raised RippleEffect">Raised</button>
+    <button class="wsk-button wsk-js-button wsk-button--fab RippleEffect">♥</button>
 
-    <h2>.PaperButton--colored</h2>
+    <h2>.wsk-button--colored</h2>
 
-    <button class="PaperButton PaperButton--colored">Flat</button>
-    <button class="PaperButton PaperButton--raised PaperButton--colored">Raised</button>
+    <button class="wsk-button wsk-js-button wsk-button--colored">Flat</button>
+    <button class="wsk-button wsk-js-button wsk-button--raised wsk-button--colored">Raised</button>
+    <button class="wsk-button wsk-js-button wsk-button--fab wsk-button--colored">♥</button>
 
     <h2>With Ripples</h2>
 
-    <button class="PaperButton PaperButton--colored RippleEffect">Flat</button>
-    <button class="PaperButton PaperButton--raised PaperButton--colored RippleEffect">Raised</button>
+    <button class="wsk-button wsk-js-button wsk-button--colored RippleEffect">Flat</button>
+    <button class="wsk-button wsk-js-button wsk-button--raised wsk-button--colored RippleEffect">Raised</button>
+    <button class="wsk-button wsk-js-button wsk-button--fab wsk-button--colored RippleEffect">♥</button>
+
+    <h2>.wsk-button--mini-fab</h2>
+
+    <button class="wsk-button wsk-js-button wsk-button--fab wsk-button--colored wsk-button--mini-fab RippleEffect">♥</button>
 
     <h2>Disabled</h2>
 
-    <button class="PaperButton RippleEffect" disabled>Flat</button>
-    <button class="PaperButton PaperButton--raised RippleEffect" disabled>Raised</button>
+    <button class="wsk-button wsk-js-button RippleEffect" disabled>Flat</button>
+    <button class="wsk-button wsk-js-button wsk-button--raised RippleEffect" disabled>Raised</button>
+    <button class="wsk-button wsk-js-button wsk-button--fab RippleEffect" disabled>♥</button>
   </div>
     <!-- build:js(app/styleguide/button/) ../../scripts/main.min.js -->
     <script src="button.js"></script>
diff --git a/app/styleguide/button/demo.scss b/app/styleguide/button/demo.scss
index c0399b75..ca17a63d 100644
--- a/app/styleguide/button/demo.scss
+++ b/app/styleguide/button/demo.scss
@@ -2,7 +2,11 @@
 @import "../shadow/_shadow";
 @import "_button";
 
-.PaperButton {
+.wsk-button {
   margin-top: 24px;
   margin-bottom: 24px;
 }
+
+.wsk-button--fab {
+  margin-left: 8px;
+}
diff --git a/app/styleguide/fab/demo.html b/app/styleguide/fab/demo.html
deleted file mode 100644
index df0b3a28..00000000
--- a/app/styleguide/fab/demo.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<!doctype html>
-<html lang="">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="description" content="">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>FAB</title>
-
-    <link rel="stylesheet" href="demo.css">
-
-    <link href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
-
-  </head>
-  <body>
-
-  <div class="preview-block">
-
-    <button class="PaperFab">♥</button>
-
-    <h2>With Ripples</h2>
-
-    <button class="PaperFab RippleEffect">♥</button>
-
-    <h2>.PaperButton--colored</h2>
-
-    <button class="PaperFab PaperFab--colored">♥</button>
-
-    <h2>With Ripples</h2>
-
-    <button class="PaperFab PaperFab--colored RippleEffect">♥</button>
-
-    <h2>Mini</h2>
-
-    <button class="PaperFab PaperFab--mini PaperFab--colored RippleEffect">♥</button>
-
-    <h2>Disabled</h2>
-
-    <button class="PaperFab RippleEffect" disabled>♥</button>
-  </div>
-    <!-- build:js(app/styleguide/button/) ../../scripts/main.min.js -->
-    <script src="../button/button.js"></script>
-    <script src="../ripple/ripple.js"></script>
-    <script src="../third_party/rAF.js"></script>
-    <!-- endbuild -->
-  </body>
-</html>
diff --git a/app/styleguide/fab/demo.scss b/app/styleguide/fab/demo.scss
deleted file mode 100644
index 6aa73089..00000000
--- a/app/styleguide/fab/demo.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@import "../styleguide_demo_bp";
-@import "../button/_button";
-@import "../shadow/_shadow";
-
-.PaperFab {
-  margin-top: 24px;
-  margin-bottom: 24px;
-}