From 1e1fac2eab55467ec9cbae1852730446bfa451c6 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Sat, 28 Jan 2017 18:19:55 +0100 Subject: [PATCH] fix(button): add transition to focus overlay * Adds a transition to the button focus overlay -It still shows up very fast, it just feels a bit smoother (similar as in MDL and M1) --- src/lib/button/_button-base.scss | 1 + src/lib/button/button.scss | 2 ++ 2 files changed, 3 insertions(+) diff --git a/src/lib/button/_button-base.scss b/src/lib/button/_button-base.scss index b4bea9653ed6..4e9d0f5a1c6b 100644 --- a/src/lib/button/_button-base.scss +++ b/src/lib/button/_button-base.scss @@ -9,6 +9,7 @@ $mat-button-min-width: 88px !default; $mat-button-margin: 0 !default; $mat-button-line-height: 36px !default; $mat-button-border-radius: 2px !default; +$mat-button-focus-transition: opacity 200ms $swift-ease-in-out-timing-function !default; // Icon Button standards $mat-icon-button-size: 40px !default; diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss index 63bab271c252..207ef2a3740c 100644 --- a/src/lib/button/button.scss +++ b/src/lib/button/button.scss @@ -83,6 +83,8 @@ pointer-events: none; opacity: 0; + transition: $mat-button-focus-transition; + @include cdk-high-contrast { // Note that IE will render this in the same way, no // matter whether the theme is light or dark. This helps