Skip to content

Commit cad9e49

Browse files
committed
feat(button): increase hit area of toolbar buttons
1 parent d4afb4d commit cad9e49

File tree

2 files changed

+16
-1
lines changed

2 files changed

+16
-1
lines changed

ionic/components/toolbar/toolbar-button.scss

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@
1616

1717
white-space: nowrap;
1818
text-overflow: ellipsis;
19-
overflow: hidden;
2019

2120
text-align: center;
2221
text-transform: none;
@@ -29,6 +28,16 @@
2928
@include appearance(none);
3029
}
3130

31+
.bar-button:after {
32+
// used to make the button's hit area larger
33+
position: absolute;
34+
content: '';
35+
top: -7px;
36+
right: -2px;
37+
bottom: -6px;
38+
left: -2px;
39+
}
40+
3241

3342
// Menu Toggle
3443
// --------------------------------------------------

ionic/components/toolbar/toolbar.md.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,12 @@ ion-buttons[right] {
133133
font-weight: 500;
134134
}
135135

136+
.bar-button-solid,
137+
.bar-button-outline {
138+
// restrict the ripple to button size
139+
overflow: hidden;
140+
}
141+
136142
@mixin md-bar-button-default($color-name, $color-value) {
137143

138144
.bar-button-#{$color-name} {

0 commit comments

Comments
 (0)