From 6e026d73f6cfa064edd4e72fdd9dec44f7e34d97 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 8 May 2018 18:54:18 +0200 Subject: [PATCH] fix(button): ripples not being clipped by button border radius (#11181) Fixes the ripple container having straight edges, despite the buttons having rounded ones, which causes the ripple container to stick out past the button edge. Fixes #11160. --- src/lib/button/button.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss index 37920cd3ea4..0f1883cd40c 100644 --- a/src/lib/button/button.scss +++ b/src/lib/button/button.scss @@ -73,6 +73,9 @@ // will overlay the user content and we don't want to disable mouse events on the user content. // 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. + border-radius: inherit; } // Element that overlays the button to show focus and hover effects.