From 97aeda22aa21c5b625c9b470fa111986aec2d426 Mon Sep 17 00:00:00 2001
From: Kevin Ross <kevin.ross@alienfast.com>
Date: Thu, 7 Jan 2016 16:17:34 -0600
Subject: [PATCH] Added icon buttons - look like smaller than fab-sm, and are
 intended for use in things such as navs, perhaps an input group.

---
 docs/material-design/buttons.md        | 76 ++++++++++++++++++++++++--
 scss/_bootstrap.scss                   |  1 -
 scss/_buttons.scss                     | 74 ++++++++++++++++++-------
 scss/variables/_colors.scss            |  6 +-
 scss/variables/bootstrap/_buttons.scss | 12 ++--
 5 files changed, 137 insertions(+), 32 deletions(-)

diff --git a/docs/material-design/buttons.md b/docs/material-design/buttons.md
index 93cdf0ed..c858106c 100644
--- a/docs/material-design/buttons.md
+++ b/docs/material-design/buttons.md
@@ -64,6 +64,13 @@ group: material-design
 </fieldset>
 {% endexample %}
 
+### Sizes
+{% example html %}
+<button type="button" class="btn btn-raised btn-lg">Large button</button>
+<button type="button" class="btn btn-raised">Default button</button>
+<button type="button" class="btn btn-raised btn-sm">Small button</button>
+{% endexample %}
+
 ## Floating Action
 
 {% example html %}
@@ -138,9 +145,70 @@ Using `mdb-btn-fab-sm` on the button, or using `btn-group-sm` on the enclosing e
 {% endexample %}
 
 
-## Sizes
+## Icon 
+
 {% example html %}
-<button type="button" class="btn btn-raised btn-lg">Large button</button>
-<button type="button" class="btn btn-raised">Default button</button>
-<button type="button" class="btn btn-raised btn-sm">Small button</button>
+<button type="button" class="btn btn-primary mdb-btn-icon">
+  <i class="material-icons">grade</i>
+</button>
+<button type="button" class="btn btn-secondary mdb-btn-icon">
+  <i class="material-icons">grade</i>
+</button>
+<button type="button" class="btn btn-success mdb-btn-icon">
+  <i class="material-icons">grade</i>
+</button>
+<button type="button" class="btn btn-info mdb-btn-icon">
+  <i class="material-icons">grade</i>
+</button>
+<button type="button" class="btn btn-warning mdb-btn-icon">
+  <i class="material-icons">grade</i>
+</button>
+<button type="button" class="btn btn-danger mdb-btn-icon">
+  <i class="material-icons">grade</i>
+</button>
+<button type="button" class="btn btn-danger mdb-btn-icon active">
+  <i class="material-icons">grade</i>
+</button>
+{% endexample %}
+
+### Disabled
+{% example html %}
+<fieldset disabled>
+  <button type="button" class="btn btn-primary mdb-btn-icon">
+    <i class="material-icons">grade</i>
+  </button>
+  <button type="button" class="btn btn-secondary mdb-btn-icon">
+    <i class="material-icons">grade</i>
+  </button>
+  <button type="button" class="btn btn-success mdb-btn-icon">
+    <i class="material-icons">grade</i>
+  </button>
+  <button type="button" class="btn btn-info mdb-btn-icon">
+    <i class="material-icons">grade</i>
+  </button>
+  <button type="button" class="btn btn-warning mdb-btn-icon">
+    <i class="material-icons">grade</i>
+  </button>
+  <button type="button" class="btn btn-danger mdb-btn-icon">
+    <i class="material-icons">grade</i>
+  </button>
+</fieldset>
+{% endexample %}
+
+### Sizes
+
+Using `mdb-btn-icon-sm` on the button, or using `btn-group-sm` on the enclosing element of a `mdb-btn-icon` renders a small variation.
+
+{% example html %}
+<button type="button" class="btn mdb-btn-icon">
+  <i class="material-icons">grade</i>
+</button>
+<button type="button" class="btn mdb-btn-icon mdb-btn-icon-sm">
+  <i class="material-icons">grade</i>
+</button>
+<span class="btn-group-sm">
+  <button type="button" class="btn mdb-btn-icon">
+    <i class="material-icons">grade</i>
+  </button>
+</span>
 {% endexample %}
diff --git a/scss/_bootstrap.scss b/scss/_bootstrap.scss
index a4133416..d19b4d09 100644
--- a/scss/_bootstrap.scss
+++ b/scss/_bootstrap.scss
@@ -27,7 +27,6 @@
 @import "../bower_components/bootstrap/scss/card";
 @import "../bower_components/bootstrap/scss/breadcrumb";
 @import "../bower_components/bootstrap/scss/pagination";
-@import "../bower_components/bootstrap/scss/pager";
 @import "../bower_components/bootstrap/scss/labels";
 @import "../bower_components/bootstrap/scss/jumbotron";
 @import "../bower_components/bootstrap/scss/alert";
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 4c3773ee..ee4c55fd 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -70,17 +70,34 @@
   }
 
   // https://www.google.com/design/spec/components/buttons-floating-action-button.html
+  &.mdb-btn-fab,
+  &.mdb-btn-icon {
+    padding: 0;
+    overflow: hidden;
+    font-size: $mdb-btn-fab-font-size;
+    line-height: normal;
+    border-radius: 50%;
+
+    .btn-group-sm & {
+      padding: 0; // need specificity
+    }
+
+    .material-icons {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: $mdb-btn-fab-font-size;
+      line-height: $mdb-btn-fab-font-size;
+      transform: translate(-($mdb-btn-fab-font-size / 2), -($mdb-btn-fab-font-size / 2));
+    }
+  }
+
   &.mdb-btn-fab {
     // see above for color variations
     width: $mdb-btn-fab-size;
     min-width: $mdb-btn-fab-size;
     height: $mdb-btn-fab-size;
-    padding: 0;
     margin: auto;
-    overflow: hidden;
-    font-size: $mdb-btn-fab-font-size;
-    line-height: normal;
-    border-radius: 50%;
     box-shadow: 0 1px 1.5px 0 $gray-lighter, 0 1px 1px 0 $gray-light;
 
     .ripple-container {
@@ -89,23 +106,42 @@
 
     &.mdb-btn-fab-sm,
     .btn-group-sm & {
-      width: $mdb-btn-fab-size-mini;
-      min-width: $mdb-btn-fab-size-mini;
-      height: $mdb-btn-fab-size-mini;
+      width: $mdb-btn-fab-size-sm;
+      min-width: $mdb-btn-fab-size-sm;
+      height: $mdb-btn-fab-size-sm;
 
-      &.material-icons {
-        top: ($mdb-btn-icon-size-mini - $mdb-btn-fab-font-size) / 2;
-        left: ($mdb-btn-icon-size-mini - $mdb-btn-fab-font-size) / 2;
-      }
+      //.material-icons {
+      //  top: ($mdb-btn-icon-size-sm - $mdb-btn-fab-font-size) / 2;
+      //  left: ($mdb-btn-icon-size-sm - $mdb-btn-fab-font-size) / 2;
+      //}
     }
+  }
 
-    i.material-icons {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      width: $mdb-btn-fab-font-size;
-      line-height: $mdb-btn-fab-font-size;
-      transform: translate(-($mdb-btn-fab-font-size / 2), -($mdb-btn-fab-font-size / 2));
+
+  // Icon buttons
+  &.mdb-btn-icon {
+    width: $mdb-btn-icon-size;
+    min-width: $mdb-btn-icon-size;
+    height: $mdb-btn-icon-size;
+    margin-right: 0;
+    margin-left: 0;
+    color: inherit;
+
+    &.mdb-btn-icon-sm,
+    .btn-group-sm & {
+      width: $mdb-btn-icon-size-sm;
+      min-width: $mdb-btn-icon-size-sm;
+      height: $mdb-btn-icon-size-sm;
+
+      .material-icons {
+        //$position: ($mdb-btn-icon-size-sm - $mdb-btn-icon-font-size-sm) / 2;
+        //top: $position;
+        //left: $position;
+        width: $mdb-btn-icon-font-size-sm;
+        font-size: $mdb-btn-icon-font-size-sm;
+        line-height: 1;
+        transform: translate(-($mdb-btn-icon-font-size-sm / 2), -($mdb-btn-icon-font-size-sm / 2));
+      }
     }
   }
 
diff --git a/scss/variables/_colors.scss b/scss/variables/_colors.scss
index fc08240f..c805cc5b 100644
--- a/scss/variables/_colors.scss
+++ b/scss/variables/_colors.scss
@@ -323,7 +323,7 @@ $grey-100: #f5f5f5 !default;
 $grey-200: #eee !default;
 $grey-300: #e0e0e0 !default;
 $grey-400: #bdbdbd !default;
-$grey-500: #9e9e9e;  //$rgb-grey-500: "158, 158, 158" !default;
+$grey-500: #9e9e9e;
 $grey-600: #757575 !default;
 $grey-700: #616161 !default;
 $grey-800: #424242 !default;
@@ -352,5 +352,5 @@ $blue-grey-a700: #455a64 !default;
 $blue-grey: $blue-grey-500 !default;
 
 
-$black: #000; //$rgb-black: "0,0,0"; $hsl-black: "0, 0%, 0%";
-$white: #fff; //$rgb-white: "255,255,255"; $hsl-white: "0, 0%, 100%";
+$black: #000;
+$white: #fff;
diff --git a/scss/variables/bootstrap/_buttons.scss b/scss/variables/bootstrap/_buttons.scss
index 22449282..a6ed58a3 100644
--- a/scss/variables/bootstrap/_buttons.scss
+++ b/scss/variables/bootstrap/_buttons.scss
@@ -17,12 +17,14 @@ $mdb-inverse-btn-focus-bg: rgba(#ccc, .15) !default; // spec: dark bg Hover: 15%
 $mdb-inverse-btn-active-bg: rgba(#ccc, .25) !default; // spec: dark Pressed: 25% #CCCCCC
 $mdb-inverse-btn-disabled: rgba($white, .30) !default; // spec: dark theme: Disabled text: 30% $white
 
-$mdb-btn-fab-size: 56px !default;
-$mdb-btn-fab-size-mini: 40px !default;
-$mdb-btn-fab-font-size: 24px !default;
+$mdb-btn-fab-size: 3.5rem !default; // 56px
+$mdb-btn-fab-size-sm: 2.5rem !default; // 40px
+$mdb-btn-fab-font-size: 1.5rem !default; // 24px
 
-$mdb-btn-icon-size: 32px !default;
-$mdb-btn-icon-size-mini: 24px !default;
+// icons
+$mdb-btn-icon-size: 2rem !default; // 32px
+$mdb-btn-icon-size-sm: (.75 * $mdb-btn-icon-size) !default; // ~24px
+$mdb-btn-icon-font-size-sm: (.75 * $mdb-btn-fab-font-size) !default;
 
 
 // Buttons