From 2e529f633f02e84323a0c431bdc0b8441b908346 Mon Sep 17 00:00:00 2001
From: Hai Nguyen <hai@call-em-all.com>
Date: Tue, 17 Feb 2015 11:02:29 -0600
Subject: [PATCH] Fixed ripple style bug on flat buttons.

---
 docs/src/app/components/pages/components/buttons.jsx |  2 +-
 docs/src/less/pages/components/buttons.less          | 12 ++++++------
 src/js/utils/dom.js                                  |  2 +-
 src/less/components/flat-button.less                 |  3 ++-
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/docs/src/app/components/pages/components/buttons.jsx b/docs/src/app/components/pages/components/buttons.jsx
index 091904620e8e7e..dc187e1d7343e2 100644
--- a/docs/src/app/components/pages/components/buttons.jsx
+++ b/docs/src/app/components/pages/components/buttons.jsx
@@ -179,7 +179,7 @@ var ButtonPage = React.createClass({
             <div className="button-example-container">
               <FlatButton linkButton={true} href="https://github.com/callemall/material-ui" secondary={true}>
                 <FontIcon className="muidocs-icon-custom-github example-flat-button-icon"/>
-                <span className="mui-flat-button-label">Github</span>
+                <span className="mui-flat-button-label example-icon-button-label">Github</span>
               </FlatButton>
             </div>
             <div className="button-example-container">
diff --git a/docs/src/less/pages/components/buttons.less b/docs/src/less/pages/components/buttons.less
index 6490a42d0b3092..23adb1c0202bed 100644
--- a/docs/src/less/pages/components/buttons.less
+++ b/docs/src/less/pages/components/buttons.less
@@ -16,6 +16,10 @@
       width: 25%;
     }
   }
+
+  .example-icon-button-label {
+    padding-left: 8px; 
+  }
 }
 
 .example-image-button {
@@ -49,17 +53,13 @@
   display: inline-block;
   vertical-align: middle;
   float: left;
-  padding-left: 6px;
+  padding-left: 12px;
   line-height: 36px;
 }
 
-.example-icon-button-label {
-  padding-left: 6px!important; 
-}
-
 .example-flat-button-icon {
   display: inline-block;
   float: left;
   line-height: 36px;
-  padding-right: 6px; 
+  padding-left: 12px; 
 }
\ No newline at end of file
diff --git a/src/js/utils/dom.js b/src/js/utils/dom.js
index f63ab813f854db..56eca247de31e5 100644
--- a/src/js/utils/dom.js
+++ b/src/js/utils/dom.js
@@ -12,7 +12,7 @@ module.exports = {
   },
 
   offset: function(el) {
-    var rect = el.getBoundingClientRect()
+    var rect = el.getBoundingClientRect();
     return {
       top: rect.top + document.body.scrollTop,
       left: rect.left + document.body.scrollLeft
diff --git a/src/less/components/flat-button.less b/src/less/components/flat-button.less
index f4ffcd10ec0d07..192b0d813c078f 100644
--- a/src/less/components/flat-button.less
+++ b/src/less/components/flat-button.less
@@ -11,7 +11,7 @@
   color: @flat-button-text-color;
   line-height: @button-height;
   min-width: @button-min-width;
-  padding: 0 @desktop-gutter-less;
+  padding: 0;
   margin: 0;
 
   //This is need so that ripples do not bleed
@@ -33,6 +33,7 @@
 
   .mui-flat-button-label {
     position: relative;
+    padding: 0 @desktop-gutter-less;
   }
 
   &:hover,