skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(stroked-button): ripples and focus overlay have incorrect radius (#13745)

Browse Source 
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)

![image](https://user-images.githubusercontent.com/4987015/47302045-c5c32c00-d620-11e8-9d58-bc34b421943f.png)



Fixes #13738
This commit is contained in:
Paul Gschwendtner
2018-10-23 19:23:48 +02:00
committed by mmalerba
parent e8f8d079fa
commit 4cdf5bafd6
1 changed files with 16 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/button/button.scss
+16 -2
View File
@@ -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;