From c10c4fba048e60326286acbd8776904308da00cf Mon Sep 17 00:00:00 2001 From: Yuan Gao Date: Tue, 21 Feb 2017 15:13:04 -0800 Subject: [PATCH 1/3] Use a lighter color for focused layer in button-toggle --- src/lib/core/theming/_palette.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/lib/core/theming/_palette.scss b/src/lib/core/theming/_palette.scss index 00c85649459b..e333e8073121 100644 --- a/src/lib/core/theming/_palette.scss +++ b/src/lib/core/theming/_palette.scss @@ -10,6 +10,8 @@ $black-87-opacity: rgba(black, 0.87); $white-87-opacity: rgba(white, 0.87); $black-12-opacity: rgba(black, 0.12); $white-12-opacity: rgba(white, 0.12); +$black-6-opacity: rgba(black, 0.06); +$white-6-opacity: rgba(white, 0.06); $mat-red: ( 50: #ffebee, @@ -653,7 +655,7 @@ $mat-light-theme-background: ( dialog: white, disabled-button: $black-12-opacity, raised-button: white, - dark-overlay: $black-12-opacity, + dark-overlay: $black-6-opacity, ); // Background palette for dark themes. @@ -666,7 +668,7 @@ $mat-dark-theme-background: ( dialog: map_get($mat-grey, 800), disabled-button: $white-12-opacity, raised-button: map-get($mat-grey, 800), - dark-overlay: $white-12-opacity, + dark-overlay: $white-6-opacity, ); // Foreground palette for light themes. From f70bb52fc795b082b57a492945aa0f9074b21f3a Mon Sep 17 00:00:00 2001 From: Yuan Gao Date: Tue, 21 Feb 2017 15:45:36 -0800 Subject: [PATCH 2/3] . --- src/lib/button-toggle/_button-toggle-theme.scss | 2 +- src/lib/core/theming/_palette.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/lib/button-toggle/_button-toggle-theme.scss b/src/lib/button-toggle/_button-toggle-theme.scss index 4da2ad51bf19..912ade1b3428 100644 --- a/src/lib/button-toggle/_button-toggle-theme.scss +++ b/src/lib/button-toggle/_button-toggle-theme.scss @@ -6,7 +6,7 @@ $background: map-get($theme, background); .mat-button-toggle-focus-overlay { - background-color: mat-color($background, dark-overlay); + background-color: mat-color($background, focused-button); } } diff --git a/src/lib/core/theming/_palette.scss b/src/lib/core/theming/_palette.scss index e333e8073121..e30ce6d2a9ad 100644 --- a/src/lib/core/theming/_palette.scss +++ b/src/lib/core/theming/_palette.scss @@ -655,7 +655,7 @@ $mat-light-theme-background: ( dialog: white, disabled-button: $black-12-opacity, raised-button: white, - dark-overlay: $black-6-opacity, + focused-button: $black-6-opacity, ); // Background palette for dark themes. @@ -668,7 +668,7 @@ $mat-dark-theme-background: ( dialog: map_get($mat-grey, 800), disabled-button: $white-12-opacity, raised-button: map-get($mat-grey, 800), - dark-overlay: $white-6-opacity, + focused-button: $white-6-opacity, ); // Foreground palette for light themes. From 1f5dfb1821fe8a972d12014311efc9d373df5144 Mon Sep 17 00:00:00 2001 From: Yuan Gao Date: Wed, 22 Feb 2017 13:29:02 -0800 Subject: [PATCH 3/3] Only show focus layer when keyboard focus --- src/lib/button-toggle/button-toggle.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/button-toggle/button-toggle.scss b/src/lib/button-toggle/button-toggle.scss index 98c04cb95c08..eea47e3edaab 100644 --- a/src/lib/button-toggle/button-toggle.scss +++ b/src/lib/button-toggle/button-toggle.scss @@ -39,7 +39,7 @@ $mat-button-toggle-border-radius: 2px !default; position: relative; } -.mat-button-toggle.cdk-focused .mat-button-toggle-focus-overlay { +.mat-button-toggle.cdk-keyboard-focused .mat-button-toggle-focus-overlay { opacity: 1; }