fix(button): hover, disabled, alignment, docs

Includes component fixes after global CSS updates Closes #1607, #1687, #1690, #1832, #1907, #1987, #2009
angular · Mar 27, 2015 · af9e317 · af9e317
1 parent 0e1820c
commit af9e317
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 65 deletions.
diff --git a/docs/app/css/style.css b/docs/app/css/style.css
@@ -556,7 +556,7 @@ md-content.demo-source-container > hljs > pre > code.highlight {
 }
 
 .dashed-bottom {
-  border-bottom: dashed 1px rgb(224, 224, 224);;
+  border-bottom: dashed 1px rgb(224, 224, 224);
   padding-bottom: 10px;
 }
 

diff --git a/src/components/button/button-theme.scss b/src/components/button/button-theme.scss
@@ -1,52 +1,44 @@
 $button-border-radius: 3px !default;
 $button-fab-border-radius: 50% !default;
 
-md-toolbar .md-button.md-THEME_NAME-theme.md-fab {
-  background-color: white;
-}
-
 .md-button.md-THEME_NAME-theme {
   border-radius: $button-border-radius;
 
   &:not([disabled]) {
-    &:hover, 
     &:focus {
       background-color: '{{background-500-0.2}}';
     }
   }
 
+  &.md-fab {
+    border-radius: $button-fab-border-radius;
+    background-color: '{{accent-color}}';
+    color: '{{accent-contrast}}';
+    &:not([disabled]) {
+      &:focus {
+        background-color: '{{accent-A700}}';
+      }
+    }
+  }
+
   &.md-primary {
     color: '{{primary-color}}';
     &.md-raised,
     &.md-fab {
       color: '{{primary-contrast}}';
       background-color: '{{primary-color}}';
       &:not([disabled]) {
-        &:hover, 
         &:focus {
           background-color: '{{primary-600}}';
         }
       }
     }
   }
 
-  &.md-fab {
-    border-radius: $button-fab-border-radius;
-    background-color: '{{accent-color}}';
-    color: '{{accent-contrast}}';
-    &:not([disabled]) {
-      &:hover, 
-      &:focus {
-        background-color: '{{accent-A700}}';
-      }
-    }
-  }
-
   &.md-raised {
     color: '{{background-contrast}}';
     background-color: '{{background-50}}';
     &:not([disabled]) {
-      &:hover, 
       &:focus {
         background-color: '{{background-200}}';
       }
@@ -61,7 +53,6 @@ md-toolbar .md-button.md-THEME_NAME-theme.md-fab {
       color: '{{warn-contrast}}';
       background-color: '{{warn-color}}';
       &:not([disabled]) {
-        &:hover, 
         &:focus {
           background-color: '{{warn-700}}';
         }
@@ -77,7 +68,6 @@ md-toolbar .md-button.md-THEME_NAME-theme.md-fab {
       color: '{{accent-contrast}}';
       background-color: '{{accent-color}}';
       &:not([disabled]) {
-        &:hover, 
         &:focus {
           background-color: '{{accent-700}}';
         }
@@ -88,8 +78,14 @@ md-toolbar .md-button.md-THEME_NAME-theme.md-fab {
   &[disabled],
   &.md-raised[disabled],
   &.md-fab[disabled] {
-    color: '{{foreground-3}}';
-    background-color: transparent;
+    color: '{{foreground-2}}';
     cursor: not-allowed;
   }
+  &.md-raised[disabled],
+  &.md-fab[disabled] {
+    background-color: '{{foreground-4}}';
+  }
+  &[disabled] {
+    background-color: 'transparent';
+  }
 }
diff --git a/src/components/button/button.js b/src/components/button/button.js
@@ -39,13 +39,22 @@ angular.module('material.components.button', [
  * @usage
  * <hljs lang="html">
  *  <md-button>
- *    Button
+ *    Flat Button
  *  </md-button>
- *  <md-button href="http://google.com" class="md-button-colored">
- *    I'm a link
+ *  <md-button href="http://google.com">
+ *    Flat link
  *  </md-button>
- *  <md-button ng-disabled="true" class="md-colored">
- *    I'm a disabled button
+ *  <md-button class="md-raised">
+ *    Raised Button
+ *  </md-button>
+ *  <md-button ng-disabled="true">
+ *    Disabled Button
+ *  </md-button>
+ *  <md-button class="md-fab" aria-label="FAB">
+ *    <md-icon md-svg-src="your/icon.svg"></md-icon>
+ *  </md-button>
+ *  <md-button class="md-fab md-mini" aria-label="Mini FAB">
+ *    <md-icon md-svg-src="your/icon.svg"></md-icon>
  *  </md-button>
  * </hljs>
  */

diff --git a/src/components/button/button.scss b/src/components/button/button.scss
@@ -1,12 +1,16 @@
-$button-line-height: 25px !default;
-$button-padding: 2px 6px 3px !default;
+$button-line-height: 3.60rem !default;
+$button-padding: 0 0.600rem !default;
+$button-margin: 0.600rem 0.800rem !default;
+$button-min-width: 8.800rem !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;
+$button-fab-width: 5.600rem !default;
+$button-fab-height: 5.600rem !default;
+$button-fab-line-height: 5.600rem !default;
+$button-fab-padding: 1.60rem !default;
+$button-fab-mini-width: 4.00rem !default;
+$button-fab-mini-height: 4.00rem !default;
+$button-fab-mini-line-height: 4.00rem !default;
 
 $button-fab-toast-offset: $button-fab-height * 0.75;
 
@@ -24,15 +28,18 @@ $button-fab-toast-offset: $button-fab-height * 0.75;
 }
 
 .md-button {
+  box-sizing: border-box;
   color: currentColor;
 
   user-select: none;
   position: relative; //for child absolute-positioned <canvas>
 
   outline: none;
   border: 0;
-  padding: 6px;
-  margin: 0;
+  display: inline-block;
+  padding: $button-padding;
+  margin: $button-margin;
+  line-height: $button-line-height;
   background: transparent;
   white-space: nowrap;
 
@@ -45,21 +52,24 @@ $button-fab-toast-offset: $button-fab-height * 0.75;
   font-style: inherit;
   font-variant: inherit;
   font-family: inherit;
-  line-height: inherit;
   text-decoration: none;
 
   cursor: pointer;
   overflow: hidden;   // for ink containment
 
   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;
+              background-color $swift-ease-out-duration $swift-ease-out-timing-function;
 
+  *,
+  *:before,
+  *:after {
+    box-sizing: border-box;
+  }
   &:focus {
     outline: none;
   }
 
-  &:hover {
+  &:hover, &:focus {
     text-decoration: none;
   }
 
@@ -77,13 +87,15 @@ $button-fab-toast-offset: $button-fab-height * 0.75;
   }
 
   &.md-raised {
-    transform: translate3d(0, 0, 0);
-
     &:not([disabled]) {
       @extend .md-shadow-bottom-z-1;
     }
   }
 
+  &:not(.md-fab) {
+    min-width: $button-min-width;
+  }
+
   &.md-fab {
 
     @include fab-position(bottom-right, auto, ($button-fab-width - $button-fab-padding)/2, ($button-fab-height - $button-fab-padding)/2, auto);
@@ -93,18 +105,18 @@ $button-fab-toast-offset: $button-fab-height * 0.75;
 
     z-index: $z-index-fab;
 
+    line-height: $button-fab-line-height;
     width: $button-fab-width;
     height: $button-fab-height;
+    vertical-align: middle;
 
     @extend .md-shadow-bottom-z-1;
     border-radius: 50%;
     background-clip: padding-box;
     overflow: hidden;
 
-    transform: translate3d(0,0,0);
-
     transition: 0.2s linear;
-    transition-property: transform, box-shadow;
+    transition-property: background-color, box-shadow;
     .md-ripple-container {
       border-radius: 50%;
       background-clip: padding-box;
@@ -118,20 +130,20 @@ $button-fab-toast-offset: $button-fab-height * 0.75;
     }
 
     &.md-mini {
+      line-height: $button-fab-mini-line-height;
       width: $button-fab-mini-width;
       height: $button-fab-mini-height;
-      md-icon {
-      }
     }
 
   }
 
   &:not([disabled]) {
     &.md-raised,
     &.md-fab {
-      &:focus,
-      &:hover {
-        transform: translate3d(0, -1px, 0);
+      &:focus {
+        @extend .md-shadow-bottom-z-1;
+      }
+      &:active {
         @extend .md-shadow-bottom-z-2;
       }
     }

diff --git a/src/components/button/demoBasicUsage/index.html b/src/components/button/demoBasicUsage/index.html
@@ -18,13 +18,13 @@
     </section>
 
     <section layout="row" layout-sm="column" layout-align="center center">
-        <md-button class="md-fab" aria-label="Eat cake">
+        <md-button class="md-fab" aria-label="Eat cake" ng-href="#">
             <md-icon md-svg-src="img/icons/cake.svg"></md-icon>
         </md-button>
 
-      <md-button class="md-fab md-primary" aria-label="Use Android">
-        <md-icon md-svg-src="img/icons/android.svg"></md-icon>
-      </md-button>
+        <md-button class="md-fab md-primary" aria-label="Use Android">
+          <md-icon md-svg-src="img/icons/android.svg"></md-icon>
+        </md-button>
 
         <md-button class="md-fab" ng-disabled="true" aria-label="Comment">
             <md-icon md-svg-src="img/icons/ic_comment_24px.svg"></md-icon>
@@ -33,6 +33,14 @@
         <md-button class="md-fab md-primary md-hue-2" aria-label="Profile">
             <md-icon md-svg-src="img/icons/ic_people_24px.svg"></md-icon>
         </md-button>
+
+        <md-button class="md-fab md-mini" aria-label="Eat cake" ng-href="#">
+            <md-icon md-svg-src="img/icons/cake.svg"></md-icon>
+        </md-button>
+
+        <md-button class="md-fab md-mini md-primary" aria-label="Use Android">
+          <md-icon md-svg-src="img/icons/android.svg"></md-icon>
+        </md-button>
       <div class="label">FAB</div>
     </section>
 

diff --git a/src/components/button/demoBasicUsage/style.css b/src/components/button/demoBasicUsage/style.css
@@ -1,6 +1,3 @@
-
-/** From vulcanized demo **/
-
 section {
   background: #f7f7f7;
   border-radius: 3px;
@@ -12,13 +9,9 @@ section {
 md-content {
   margin-right: 7px;
 }
-section .md-button:not(.md-fab) {
-  min-width: 10em;
-}
 section .md-button {
-  display: block;
-  margin: 1em;
-  line-height: 25px;
+  margin-top: 16px;
+  margin-bottom: 16px;
 }
 .label {
   position: absolute;

diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog.scss
@@ -59,6 +59,7 @@ md-dialog {
 
     > * {
       margin-left: 8px;
+      margin-right: 0;
     }
   }
   &.md-content-overflow .md-actions {

diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss
@@ -113,6 +113,10 @@ md-tabs {
       font-size: 16px;
       background: transparent no-repeat center center;
       transition: $swift-ease-in-out;
+
+      &:focus {
+        outline: none;
+      }
       md-icon {
         position: absolute;
         top: 50%;
-Original file line number
+Diff line change
@@ Expand Up / @@ -59,6 +59,7 @@ md-dialog { @@
         > * {
           margin-left: 8px;
+          margin-right: 0;
         }
       }
       &.md-content-overflow .md-actions {
@@ Expand Down @@