diff --git a/src/lib/checkbox/checkbox.scss b/src/lib/checkbox/checkbox.scss index 5090761738d9..8329c241652f 100644 --- a/src/lib/checkbox/checkbox.scss +++ b/src/lib/checkbox/checkbox.scss @@ -438,7 +438,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default; left: calc(50% - #{$_mat-checkbox-ripple-radius}); top: calc(50% - #{$_mat-checkbox-ripple-radius}); height: $_mat-checkbox-ripple-radius * 2; - width: $_mat_checkbox-ripple-radius * 2; + width: $_mat-checkbox-ripple-radius * 2; z-index: 1; pointer-events: none; } diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts index ff46c7d0aee6..a88fa065d45e 100644 --- a/src/lib/checkbox/checkbox.ts +++ b/src/lib/checkbox/checkbox.ts @@ -9,6 +9,7 @@ import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y'; import {coerceBooleanProperty} from '@angular/cdk/coercion'; import { + AfterViewChecked, AfterViewInit, Attribute, ChangeDetectionStrategy, @@ -50,6 +51,11 @@ import {MAT_CHECKBOX_CLICK_ACTION, MatCheckboxClickAction} from './checkbox-conf // Increasing integer for generating unique ids for checkbox components. let nextUniqueId = 0; +// TODO(josephperrott): Revert to constants for ripple radius once 2018 Checkbox updates have +// landed. +// The radius for the checkbox's ripple, in pixels. +let calculatedRippleRadius = 0; + /** * Provider Expression that allows mat-checkbox to register as a ControlValueAccessor. * This allows it to support [(ngModel)]. @@ -127,7 +133,8 @@ export const _MatCheckboxMixinBase: changeDetection: ChangeDetectionStrategy.OnPush }) export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAccessor, - AfterViewInit, OnDestroy, CanColor, CanDisable, HasTabIndex, CanDisableRipple { + AfterViewChecked, AfterViewInit, OnDestroy, CanColor, CanDisable, HasTabIndex, + CanDisableRipple { /** * Attached to the aria-label attribute of the host element. In most cases, arial-labelledby will @@ -210,6 +217,10 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc .subscribe(focusOrigin => this._onInputFocusChange(focusOrigin)); } + ngAfterViewChecked() { + this._calculateRippleRadius(); + } + ngOnDestroy() { this._focusMonitor.stopMonitoring(this._inputElement); } @@ -457,4 +468,19 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc return `mat-checkbox-anim-${animSuffix}`; } + + // TODO(josephperrott): Revert to constants for ripple radius once 2018 Checkbox updates have + // landed. + /** + * Calculate the radius for the ripple based on the ripple elements width. Only calculated once + * for the application. + */ + private _calculateRippleRadius() { + if (!calculatedRippleRadius) { + const rippleWidth = + this._elementRef.nativeElement.querySelector('.mat-checkbox-ripple').clientWidth || 0; + calculatedRippleRadius = rippleWidth / 2; + } + this.ripple.radius = calculatedRippleRadius; + } }