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

feat(overlay): make it easier to override backdrop color (#9114)

Browse Source 
Previously the dark backdrop color was `rgba(0, 0, 0, 0.6)` to which we also added an opacity of `0.48`. This is hard to reason about, because we've got two stacking opacities that the consumer would have to multiply in order to figure out what the actual color is, in addition to being hard to override. These changes switch to animating the backdrop between 0 and 1, as well as setting the backdrop color to `rgba(0, 0, 0, 0.288)` (0.288 being 0.48 * 0.6).

Fixes #7855.
This commit is contained in:
Kristiyan Kostadinov
2018-01-23 17:15:33 +01:00
committed by Jeremy Elbourn
parent c3f662ef27
commit 3d180066ad
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/cdk/overlay/_overlay.scss
+2 -2
View File
@@ -6,7 +6,7 @@ $cdk-z-index-overlay: 1000;
$cdk-z-index-overlay-backdrop: 1000;
// Background color for all of the backdrops
$cdk-overlay-dark-backdrop-background: rgba(0, 0, 0, 0.6);
$cdk-overlay-dark-backdrop-background: rgba(0, 0, 0, 0.288);
// Default backdrop animation is based on the Material Design swift-ease-out.
$backdrop-animation-duration: 400ms !default;
@@ -64,7 +64,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
opacity: 0;
&.cdk-overlay-backdrop-showing {
opacity: 0.48;
opacity: 1;
}
}