Skip to content

Commit a7ac5f8

Browse files
committed
.
1 parent 43f8fa2 commit a7ac5f8

File tree

2 files changed

+24
-1
lines changed

2 files changed

+24
-1
lines changed

src/lib/button-toggle/_button-toggle-theme.scss

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,35 @@
11
@import '../core/theming/palette';
22
@import '../core/theming/theming';
33

4+
// Applies a focus style to an md-button-toggle element for each of the supported palettes.
5+
@mixin _mat-button-toggle-focus-color($theme) {
6+
$primary: map-get($theme, primary);
7+
$accent: map-get($theme, accent);
8+
$warn: map-get($theme, warn);
9+
10+
&.mat-primary .mat-button-toggle-focus-overlay {
11+
background-color: mat-color($primary, 0.12);
12+
}
13+
14+
&.mat-accent .mat-button-toggle-focus-overlay {
15+
background-color: mat-color($accent, 0.12);
16+
}
17+
18+
&.mat-warn .mat-button-toggle-focus-overlay {
19+
background-color: mat-color($warn, 0.12);
20+
}
21+
}
422

523
@mixin mat-button-toggle-theme($theme) {
624
$foreground: map-get($theme, foreground);
725
$background: map-get($theme, background);
826

927
.mat-button-toggle {
1028
color: mat-color($foreground, hint-text);
29+
30+
&.cdk-focused {
31+
@include _mat-button-toggle-focus-color($theme);
32+
}
1133
}
1234

1335
.mat-button-toggle-checked {

src/lib/button-toggle/button-toggle.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -333,6 +333,7 @@ export class MdButtonToggle implements OnInit {
333333
@Optional() toggleGroupMultiple: MdButtonToggleGroupMultiple,
334334
public buttonToggleDispatcher: UniqueSelectionDispatcher,
335335
private _renderer: Renderer,
336+
private _elementRef: ElementRef,
336337
private _focusOriginMonitor: FocusOriginMonitor) {
337338
this.buttonToggleGroup = toggleGroup;
338339

@@ -364,7 +365,7 @@ export class MdButtonToggle implements OnInit {
364365
if (this.buttonToggleGroup && this._value == this.buttonToggleGroup.value) {
365366
this._checked = true;
366367
}
367-
this._focusOriginMonitor.registerElementForFocusClasses(this._inputElement.nativeElement, this._renderer);
368+
this._focusOriginMonitor.monitor(this._elementRef.nativeElement, this._renderer, true);
368369
}
369370

370371
/** Unique ID for the underlying `input` element. */

0 commit comments

Comments
 (0)