feat(button): increase hit area of toolbar buttons

ionic-team · Feb 1, 2016 · cad9e49 · cad9e49
1 parent d4afb4d
commit cad9e49
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/ionic/components/toolbar/toolbar-button.scss b/ionic/components/toolbar/toolbar-button.scss
@@ -16,7 +16,6 @@
 
   white-space: nowrap;
   text-overflow: ellipsis;
-  overflow: hidden;
 
   text-align: center;
   text-transform: none;
@@ -29,6 +28,16 @@
   @include appearance(none);
 }
 
+.bar-button:after {
+  // used to make the button's hit area larger
+  position: absolute;
+  content: '';
+  top: -7px;
+  right: -2px;
+  bottom: -6px;
+  left: -2px;
+}
+
 
 // Menu Toggle
 // --------------------------------------------------

diff --git a/ionic/components/toolbar/toolbar.md.scss b/ionic/components/toolbar/toolbar.md.scss
@@ -133,6 +133,12 @@ ion-buttons[right] {
   font-weight: 500;
 }
 
+.bar-button-solid,
+.bar-button-outline {
+  // restrict the ripple to button size
+  overflow: hidden;
+}
+
 @mixin md-bar-button-default($color-name, $color-value) {
 
   .bar-button-#{$color-name} {