Skip to content

Commit 4cdf5ba

Browse files
devversionmmalerba
authored andcommitted
fix(stroked-button): ripples and focus overlay have incorrect radius (#13745)
Due to the fact that stroked buttons have a border that reduces the available space for child elements, the absolute positioned ripple container and focus overlay do not match the `border-radius` with the actual button element. In order to fix this in a non-breaking way, we just use `overflow: hidden` for stroked buttons as compared to just using `overflow: hidden` in general for buttons (like it has been done with #9424) ![image](https://user-images.githubusercontent.com/4987015/47302045-c5c32c00-d620-11e8-9d58-bc34b421943f.png) Fixes #13738
1 parent e8f8d07 commit 4cdf5ba

File tree

1 file changed

+16
-2
lines changed

1 file changed

+16
-2
lines changed

src/lib/button/button.scss

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,18 @@
4545
border: 1px solid currentColor;
4646
padding: $mat-stroked-button-padding;
4747
line-height: $mat-stroked-button-line-height;
48+
49+
// Since the stroked button has has an actual border that reduces the available space for
50+
// child elements (such as the ripple container or focus overlay), an inherited border radius
51+
// for absolute positioned child elements which expand to the parent element boundaries, will
52+
// not align with the stroked button border because the child element cannot expand to the same
53+
// boundaries as the parent element with a border.
54+
// See: https://github.com/angular/material2/issues/13738
55+
overflow: hidden;
56+
57+
.mat-button-ripple.mat-ripple, .mat-button-focus-overlay {
58+
border-radius: 0;
59+
}
4860
}
4961

5062
.mat-fab {
@@ -85,13 +97,15 @@
8597
// Pointer events can be safely disabled because the ripple trigger element is the host element.
8698
pointer-events: none;
8799

88-
// Inherit the border radius from the parent so the ripple is clipped when it reaches the edges.
100+
// Inherit the border radius from the parent so that focus overlay and ripples don't exceed the
101+
// parent button boundaries. Note that an inherited border radius does not work properly if
102+
// the actual button element does have a border because it causes the inner content to be
103+
// smaller. We have special logic for stroked buttons to handle this scenario.
89104
border-radius: inherit;
90105
}
91106

92107
// Element that overlays the button to show focus and hover effects.
93108
.mat-button-focus-overlay {
94-
border-radius: inherit;
95109
opacity: 0;
96110

97111
transition: $mat-button-focus-transition;

0 commit comments

Comments
 (0)