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(button-toggle): only show focus style when focused via keyboard (#3232)

Browse Source 
* Use a lighter color for focused layer in button-toggle

* .

* Only show focus layer when keyboard focus
This commit is contained in:
tinayuangao
2017-02-22 16:39:13 -08:00
committed by mmalerba
parent a306a8e669
commit d744a5f0d5
3 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/button-toggle/_button-toggle-theme.scss
+1 -1
View File
@@ -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);
}
}
src/lib/button-toggle/button-toggle.scss
+1 -1
View File
@@ -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;
}
src/lib/core/theming/_palette.scss
+4 -2
View File
@@ -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,
focused-button: $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,
focused-button: $white-6-opacity,
);
// Foreground palette for light themes.