fixed some btn-flat bugs

Dogfalo · May 22, 2016 · 638b13e · 638b13e
1 parent 1cd9d6b
commit 638b13e
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 4 deletions.
diff --git a/bin/materialize.css b/bin/materialize.css
@@ -5012,6 +5012,16 @@ button.btn-floating {
   background-color: transparent;
   color: #343434;
   cursor: pointer;
+  transition: background-color .2s;
+}
+
+.btn-flat:focus, .btn-flat:active {
+  background-color: transparent;
+}
+
+.btn-flat:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+  box-shadow: none;
 }
 
 .btn-flat.disabled {
@@ -5202,7 +5212,7 @@ button.btn-floating {
 }
 
 /* Firefox Bug: link not triggered */
-a.waves-effect .waves-ripple {
+.waves-effect .waves-ripple {
   z-index: -1;
 }
 

diff --git a/css/ghpages-materialize.css b/css/ghpages-materialize.css
diff --git a/sass/components/_buttons.scss b/sass/components/_buttons.scss
@@ -176,6 +176,17 @@ button.btn-floating {
   background-color: transparent;
   color: $button-flat-color;
   cursor: pointer;
+  transition: background-color .2s;
+
+  &:focus,
+  &:active {
+    background-color: transparent;
+  }
+
+  &:hover {
+    background-color: rgba(0,0,0,.1);
+    box-shadow: none;
+  }
 
   &.disabled {
     color: $button-flat-disabled-color;

diff --git a/sass/components/_waves.scss b/sass/components/_waves.scss
@@ -168,6 +168,6 @@
 }
 
 /* Firefox Bug: link not triggered */
-a.waves-effect .waves-ripple {
+.waves-effect .waves-ripple {
     z-index: -1;
 }
diff --git a/test/html/buttons.html b/test/html/buttons.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
+    <title>Documentation - Materialize</title>
+    <!-- CSS  -->
+    <link href="../../../bin/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
+  </head>
+  <body>
+
+<div class="row">
+  <div class="col s6 container">
+    <h4>
+    Anchors
+    </h4>
+    <a class="btn-flat waves-effect waves-red" href="#">
+      btn-flat waves-red
+    </a>
+    <a class="btn-flat btn-large waves-effect waves-red" href="#">
+      btn-flat btn-large waves-red
+    </a>
+    <h4>
+      Buttons
+    </h4>
+    <button class="btn-flat waves-effect waves-red">
+      btn-flat waves-red
+    </button>
+    <button class="btn-flat btn-large waves-effect waves-red">
+      btn-flat btn-large waves-red
+    </button>
+  </div>
+</div>
+
+
+    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
+    <script src="../../../bin/materialize.js"></script>
+
+    <script type="text/javascript">
+    $( document ).ready(function() {
+
+    });
+
+
+
+    </script>
+  </body>
+</html>