From 3d180066ad086cb83f5bfb74c4c607cd496e0d5a Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 23 Jan 2018 17:15:33 +0100 Subject: [PATCH] feat(overlay): make it easier to override backdrop color (#9114) 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. --- src/cdk/overlay/_overlay.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/cdk/overlay/_overlay.scss b/src/cdk/overlay/_overlay.scss index cbdb6fedbc9..44287a8f7b6 100644 --- a/src/cdk/overlay/_overlay.scss +++ b/src/cdk/overlay/_overlay.scss @@ -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; } }