From 3506c9390f0ca39c1db1ad1db2d89c409646f2b5 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Mon, 22 Oct 2018 17:34:07 +0200 Subject: [PATCH] fix(stroked-button): ripples and focus overlay have incorrect radius * 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 https://github.com/angular/material2/pull/9424) Fixes #13738 --- src/lib/button/button.scss | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss index adac06d933fd..cdf15396eafa 100644 --- a/src/lib/button/button.scss +++ b/src/lib/button/button.scss @@ -45,6 +45,18 @@ border: 1px solid currentColor; padding: $mat-stroked-button-padding; line-height: $mat-stroked-button-line-height; + + // Since the stroked button has has an actual border that reduces the available space for + // child elements (such as the ripple container or focus overlay), an inherited border radius + // for absolute positioned child elements which expand to the parent element boundaries, will + // not align with the stroked button border because the child element cannot expand to the same + // boundaries as the parent element with a border. + // See: https://github.com/angular/material2/issues/13738 + overflow: hidden; + + .mat-button-ripple.mat-ripple, .mat-button-focus-overlay { + border-radius: 0; + } } .mat-fab { @@ -85,13 +97,15 @@ // Pointer events can be safely disabled because the ripple trigger element is the host element. pointer-events: none; - // Inherit the border radius from the parent so the ripple is clipped when it reaches the edges. + // Inherit the border radius from the parent so that focus overlay and ripples don't exceed the + // parent button boundaries. Note that an inherited border radius does not work properly if + // the actual button element does have a border because it causes the inner content to be + // smaller. We have special logic for stroked buttons to handle this scenario. border-radius: inherit; } // Element that overlays the button to show focus and hover effects. .mat-button-focus-overlay { - border-radius: inherit; opacity: 0; transition: $mat-button-focus-transition;