diff --git a/src/lib/button-toggle/_button-toggle-theme.scss b/src/lib/button-toggle/_button-toggle-theme.scss
index 4b7f6c9309f3..4da2ad51bf19 100644
--- a/src/lib/button-toggle/_button-toggle-theme.scss
+++ b/src/lib/button-toggle/_button-toggle-theme.scss
@@ -1,6 +1,14 @@
@import '../core/theming/palette';
@import '../core/theming/theming';
+// Applies a focus style to an md-button-toggle element for each of the supported palettes.
+@mixin _mat-button-toggle-focus-color($theme) {
+ $background: map-get($theme, background);
+
+ .mat-button-toggle-focus-overlay {
+ background-color: mat-color($background, dark-overlay);
+ }
+}
@mixin mat-button-toggle-theme($theme) {
$foreground: map-get($theme, foreground);
@@ -8,6 +16,10 @@
.mat-button-toggle {
color: mat-color($foreground, hint-text);
+
+ &.cdk-focused {
+ @include _mat-button-toggle-focus-color($theme);
+ }
}
.mat-button-toggle-checked {
diff --git a/src/lib/button-toggle/button-toggle.html b/src/lib/button-toggle/button-toggle.html
index face84340cfa..fffdfa7c3e25 100644
--- a/src/lib/button-toggle/button-toggle.html
+++ b/src/lib/button-toggle/button-toggle.html
@@ -12,3 +12,5 @@
+
+
diff --git a/src/lib/button-toggle/button-toggle.scss b/src/lib/button-toggle/button-toggle.scss
index 78a54939c765..98c04cb95c08 100644
--- a/src/lib/button-toggle/button-toggle.scss
+++ b/src/lib/button-toggle/button-toggle.scss
@@ -1,4 +1,6 @@
+@import '../core/a11y/a11y';
@import '../core/style/elevation';
+@import '../core/style/layout-common';
$mat-button-toggle-padding: 0 16px !default;
$mat-button-toggle-line-height: 36px !default;
@@ -34,6 +36,11 @@ $mat-button-toggle-border-radius: 2px !default;
.mat-button-toggle {
white-space: nowrap;
font-family: $mat-font-family;
+ position: relative;
+}
+
+.mat-button-toggle.cdk-focused .mat-button-toggle-focus-overlay {
+ opacity: 1;
}
.mat-button-toggle-label-content {
@@ -47,3 +54,13 @@ $mat-button-toggle-border-radius: 2px !default;
.mat-button-toggle-label-content > * {
vertical-align: middle;
}
+
+// Overlay to be used as a tint. Note that the same effect can be achieved by using a pseudo
+// element, however we use a proper DOM element in order to be able to disable the default
+// touch action. This makes the buttons more responsive on touch devices.
+.mat-button-toggle-focus-overlay {
+ border-radius: inherit;
+ pointer-events: none;
+ opacity: 0;
+ @include mat-fill;
+}
diff --git a/src/lib/button-toggle/button-toggle.ts b/src/lib/button-toggle/button-toggle.ts
index a34cbb15134b..7bc964988040 100644
--- a/src/lib/button-toggle/button-toggle.ts
+++ b/src/lib/button-toggle/button-toggle.ts
@@ -21,6 +21,7 @@ import {
import {NG_VALUE_ACCESSOR, ControlValueAccessor, FormsModule} from '@angular/forms';
import {Observable} from 'rxjs/Observable';
import {
+ FocusOriginMonitor,
UniqueSelectionDispatcher,
coerceBooleanProperty,
UNIQUE_SELECTION_DISPATCHER_PROVIDER,
@@ -276,7 +277,6 @@ export class MdButtonToggleGroupMultiple {
set vertical(value) {
this._vertical = coerceBooleanProperty(value);
}
-
}
/** Single button inside of a toggle group. */
@@ -332,7 +332,9 @@ export class MdButtonToggle implements OnInit {
constructor(@Optional() toggleGroup: MdButtonToggleGroup,
@Optional() toggleGroupMultiple: MdButtonToggleGroupMultiple,
public buttonToggleDispatcher: UniqueSelectionDispatcher,
- private _renderer: Renderer) {
+ private _renderer: Renderer,
+ private _elementRef: ElementRef,
+ private _focusOriginMonitor: FocusOriginMonitor) {
this.buttonToggleGroup = toggleGroup;
this.buttonToggleGroupMultiple = toggleGroupMultiple;
@@ -363,6 +365,7 @@ export class MdButtonToggle implements OnInit {
if (this.buttonToggleGroup && this._value == this.buttonToggleGroup.value) {
this._checked = true;
}
+ this._focusOriginMonitor.monitor(this._elementRef.nativeElement, this._renderer, true);
}
/** Unique ID for the underlying `input` element. */
@@ -477,7 +480,7 @@ export class MdButtonToggle implements OnInit {
CompatibilityModule,
],
declarations: [MdButtonToggleGroup, MdButtonToggleGroupMultiple, MdButtonToggle],
- providers: [UNIQUE_SELECTION_DISPATCHER_PROVIDER]
+ providers: [UNIQUE_SELECTION_DISPATCHER_PROVIDER, FocusOriginMonitor]
})
export class MdButtonToggleModule {
/** @deprecated */
diff --git a/src/lib/core/theming/_palette.scss b/src/lib/core/theming/_palette.scss
index a211a0836914..00c85649459b 100644
--- a/src/lib/core/theming/_palette.scss
+++ b/src/lib/core/theming/_palette.scss
@@ -8,6 +8,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);
$mat-red: (
50: #ffebee,
@@ -649,8 +651,9 @@ $mat-light-theme-background: (
hover: rgba(black, 0.04), // TODO(kara): check style with Material Design UX
card: white,
dialog: white,
- disabled-button: rgba(black, 0.12),
+ disabled-button: $black-12-opacity,
raised-button: white,
+ dark-overlay: $black-12-opacity,
);
// Background palette for dark themes.
@@ -661,15 +664,16 @@ $mat-dark-theme-background: (
hover: rgba(white, 0.04), // TODO(kara): check style with Material Design UX
card: map_get($mat-grey, 800),
dialog: map_get($mat-grey, 800),
- disabled-button: rgba(white, 0.12),
+ disabled-button: $white-12-opacity,
raised-button: map-get($mat-grey, 800),
+ dark-overlay: $white-12-opacity,
);
// Foreground palette for light themes.
$mat-light-theme-foreground: (
base: black,
- divider: rgba(black, 0.12),
- dividers: rgba(black, 0.12),
+ divider: $black-12-opacity,
+ dividers: $black-12-opacity,
disabled: rgba(black, 0.38),
disabled-button: rgba(black, 0.38),
disabled-text: rgba(black, 0.38),
@@ -683,8 +687,8 @@ $mat-light-theme-foreground: (
// Foreground palette for dark themes.
$mat-dark-theme-foreground: (
base: white,
- divider: rgba(white, 0.12),
- dividers: rgba(white, 0.12),
+ divider: $white-12-opacity,
+ dividers: $white-12-opacity,
disabled: rgba(white, 0.3),
disabled-button: rgba(white, 0.3),
disabled-text: rgba(white, 0.3),