diff --git a/src/lib/form-field/_form-field-theme.scss b/src/lib/form-field/_form-field-theme.scss index 010b6b368ce5..898a2b0a35e4 100644 --- a/src/lib/form-field/_form-field-theme.scss +++ b/src/lib/form-field/_form-field-theme.scss @@ -55,10 +55,10 @@ .mat-form-field-underline { background-color: $underline-color; + } - &.mat-disabled { - @include mat-control-disabled-underline($underline-color); - } + .mat-form-field-disabled .mat-form-field-underline { + @include mat-control-disabled-underline($underline-color); } .mat-form-field-ripple { diff --git a/src/lib/form-field/form-field.html b/src/lib/form-field/form-field.html index 3ab526ce0e7e..f78d16a64000 100644 --- a/src/lib/form-field/form-field.html +++ b/src/lib/form-field/form-field.html @@ -35,8 +35,7 @@ -
+
diff --git a/src/lib/form-field/form-field.scss b/src/lib/form-field/form-field.scss index f91817b6c324..936322c3fab0 100644 --- a/src/lib/form-field/form-field.scss +++ b/src/lib/form-field/form-field.scss @@ -148,7 +148,7 @@ $mat-form-field-underline-height: 1px !default; // Prevents underline from disappearing at lower zoom levels. transform: perspective(1px); - &.mat-disabled { + .mat-form-field-disabled & { background-position: 0; background-color: transparent; } diff --git a/src/lib/form-field/form-field.ts b/src/lib/form-field/form-field.ts index 0569f2871982..92e8ffa4e808 100644 --- a/src/lib/form-field/form-field.ts +++ b/src/lib/form-field/form-field.ts @@ -75,6 +75,7 @@ let nextUniqueId = 0; '[class.mat-form-field-invalid]': '_control.errorState', '[class.mat-form-field-can-float]': '_canPlaceholderFloat', '[class.mat-form-field-should-float]': '_control.shouldPlaceholderFloat || _shouldAlwaysFloat', + '[class.mat-form-field-disabled]': '_control.disabled', '[class.mat-focused]': '_control.focused', '[class.mat-primary]': 'color == "primary"', '[class.mat-accent]': 'color == "accent"', diff --git a/src/lib/input/input.spec.ts b/src/lib/input/input.spec.ts index 5f161743e271..82382d81863c 100644 --- a/src/lib/input/input.spec.ts +++ b/src/lib/input/input.spec.ts @@ -423,19 +423,19 @@ describe('MatInput without forms', function () { const fixture = TestBed.createComponent(MatInputWithDisabled); fixture.detectChanges(); - const underlineEl = - fixture.debugElement.query(By.css('.mat-form-field-underline')).nativeElement; + const formFieldEl = + fixture.debugElement.query(By.css('.mat-form-field')).nativeElement; const inputEl = fixture.debugElement.query(By.css('input')).nativeElement; - expect(underlineEl.classList.contains('mat-disabled')) - .toBe(false, `Expected underline not to start out disabled.`); + expect(formFieldEl.classList.contains('mat-form-field-disabled')) + .toBe(false, `Expected form field not to start out disabled.`); expect(inputEl.disabled).toBe(false); fixture.componentInstance.disabled = true; fixture.detectChanges(); - expect(underlineEl.classList.contains('mat-disabled')) - .toBe(true, `Expected underline to look disabled after property is set.`); + expect(formFieldEl.classList.contains('mat-form-field-disabled')) + .toBe(true, `Expected form field to look disabled after property is set.`); expect(inputEl.disabled).toBe(true); })); @@ -1010,19 +1010,19 @@ describe('MatInput with forms', () => { const fixture = TestBed.createComponent(MatInputWithFormControl); fixture.detectChanges(); - const underlineEl = - fixture.debugElement.query(By.css('.mat-form-field-underline')).nativeElement; + const formFieldEl = + fixture.debugElement.query(By.css('.mat-form-field')).nativeElement; const inputEl = fixture.debugElement.query(By.css('input')).nativeElement; - expect(underlineEl.classList) - .not.toContain('mat-disabled', `Expected underline not to start out disabled.`); + expect(formFieldEl.classList) + .not.toContain('mat-form-field-disabled', `Expected form field not to start out disabled.`); expect(inputEl.disabled).toBe(false); fixture.componentInstance.formControl.disable(); fixture.detectChanges(); - expect(underlineEl.classList).toContain('mat-disabled', - `Expected underline to look disabled after disable() is called.`); + expect(formFieldEl.classList).toContain('mat-form-field-disabled', + `Expected form field to look disabled after disable() is called.`); expect(inputEl.disabled).toBe(true); }); diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss index e3eb9f2c6f32..7f7dd9af7f0e 100644 --- a/src/lib/select/select.scss +++ b/src/lib/select/select.scss @@ -78,7 +78,7 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a } .mat-form-field-type-mat-select { - .mat-form-field-flex { + &:not(.mat-form-field-disabled) .mat-form-field-flex { cursor: pointer; }