diff --git a/src/demo-app/input/input-demo.scss b/src/demo-app/input/input-demo.scss index db8cb556622d..d7761343e44b 100644 --- a/src/demo-app/input/input-demo.scss +++ b/src/demo-app/input/input-demo.scss @@ -10,6 +10,10 @@ .demo-card { margin: 16px; + + mat-card-content { + font-size: 16px; + } } .demo-text-align-end { diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss index 952889dd9a34..5e1ba07262c4 100644 --- a/src/lib/button/button.scss +++ b/src/lib/button/button.scss @@ -50,6 +50,19 @@ } } +// Align icon-buttons correctly inside of standard, fill, and outline form-field appearances. +.mat-form-field:not(.mat-form-field-appearance-legacy) { + .mat-form-field-prefix, + .mat-form-field-suffix { + .mat-icon-button { + display: block; + font-size: inherit; + width: 2.5em; + height: 2.5em; + } + } +} + // The text and icon should be vertical aligned inside a button .mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { color: currentColor; diff --git a/src/lib/chips/chip-list.ts b/src/lib/chips/chip-list.ts index 15fc84581419..f7aa330b07a1 100644 --- a/src/lib/chips/chip-list.ts +++ b/src/lib/chips/chip-list.ts @@ -11,7 +11,6 @@ import {Directionality} from '@angular/cdk/bidi'; import {coerceBooleanProperty} from '@angular/cdk/coercion'; import {SelectionModel} from '@angular/cdk/collections'; import {BACKSPACE} from '@angular/cdk/keycodes'; -import {startWith} from 'rxjs/operators/startWith'; import { AfterContentInit, ChangeDetectionStrategy, @@ -21,7 +20,6 @@ import { DoCheck, ElementRef, EventEmitter, - Inject, Input, OnDestroy, OnInit, @@ -31,16 +29,12 @@ import { Self, ViewEncapsulation, } from '@angular/core'; -import { - ControlValueAccessor, - FormGroupDirective, - NgControl, - NgForm -} from '@angular/forms'; -import {ErrorStateMatcher, mixinErrorState, CanUpdateErrorState} from '@angular/material/core'; +import {ControlValueAccessor, FormGroupDirective, NgControl, NgForm} from '@angular/forms'; +import {CanUpdateErrorState, ErrorStateMatcher, mixinErrorState} from '@angular/material/core'; import {MatFormFieldControl} from '@angular/material/form-field'; import {Observable} from 'rxjs/Observable'; import {merge} from 'rxjs/observable/merge'; +import {startWith} from 'rxjs/operators/startWith'; import {Subscription} from 'rxjs/Subscription'; import {MatChip, MatChipEvent, MatChipSelectionChange} from './chip'; import {MatChipInput} from './chip-input'; diff --git a/src/lib/datepicker/datepicker-toggle.scss b/src/lib/datepicker/datepicker-toggle.scss index 839458707005..87d954d5b6d7 100644 --- a/src/lib/datepicker/datepicker-toggle.scss +++ b/src/lib/datepicker/datepicker-toggle.scss @@ -1,6 +1,23 @@ -.mat-datepicker-toggle-default-icon { - .mat-form-field-prefix &, - .mat-form-field-suffix & { - width: 1em; +.mat-form-field-appearance-legacy { + .mat-form-field-prefix, + .mat-form-field-suffix { + .mat-datepicker-toggle-default-icon { + width: 1em; + } + } +} + +.mat-form-field:not(.mat-form-field-appearance-legacy) { + .mat-form-field-prefix, + .mat-form-field-suffix { + .mat-datepicker-toggle-default-icon { + display: block; + width: 1.5em; + height: 1.5em; + } + + .mat-icon-button .mat-datepicker-toggle-default-icon { + margin: auto; + } } } diff --git a/src/lib/form-field/_form-field-outline-theme.scss b/src/lib/form-field/_form-field-outline-theme.scss index b3064feaead5..c534faa22207 100644 --- a/src/lib/form-field/_form-field-outline-theme.scss +++ b/src/lib/form-field/_form-field-outline-theme.scss @@ -14,7 +14,7 @@ $is-dark-theme: map-get($theme, is-dark); $label-disabled-color: mat-color($foreground, disabled-text); - $outline-color: mat-color($foreground, divider, if($is-dark-theme, 0.30, 0.12)); + $outline-color: mat-color($foreground, divider, if($is-dark-theme, 0.3, 0.12)); $outline-color-hover: mat-color($foreground, divider, if($is-dark-theme, 1, 0.87)); $outline-color-primary: mat-color($primary); $outline-color-accent: mat-color($accent); diff --git a/src/lib/form-field/form-field-legacy.scss b/src/lib/form-field/form-field-legacy.scss index 301fea946862..52c901489169 100644 --- a/src/lib/form-field/form-field-legacy.scss +++ b/src/lib/form-field/form-field-legacy.scss @@ -14,6 +14,24 @@ $mat-form-field-legacy-underline-height: 1px !default; -ms-transform: none; } + .mat-form-field-prefix, + .mat-form-field-suffix { + // Allow icons in a prefix or suffix to adapt to the correct size. + .mat-icon { + width: 1em; + } + + // Allow icon buttons in a prefix or suffix to adapt to the correct size. + .mat-icon-button { + font: inherit; + vertical-align: baseline; + + .mat-icon { + font-size: inherit; + } + } + } + // The underline is what's shown under the control, its prefix and its suffix. // The ripple is the blue animation coming on top of it. .mat-form-field-underline { diff --git a/src/lib/form-field/form-field-outline.scss b/src/lib/form-field/form-field-outline.scss index a4958a19cefe..d3f08c98607d 100644 --- a/src/lib/form-field/form-field-outline.scss +++ b/src/lib/form-field/form-field-outline.scss @@ -33,6 +33,11 @@ $mat-form-field-outline-subscript-padding: margin-top: -$mat-form-field-outline-label-overlap; } + .mat-form-field-prefix, + .mat-form-field-suffix { + top: $mat-form-field-outline-label-overlap; + } + .mat-form-field-outline { display: flex; position: absolute; @@ -52,7 +57,7 @@ $mat-form-field-outline-subscript-padding: border-radius: $mat-form-field-outline-border-radius 0 0 $mat-form-field-outline-border-radius; border-right-style: none; - [dir="rtl"] & { + [dir='rtl'] & { border-right-style: solid; border-left-style: none; border-radius: 0 $mat-form-field-outline-border-radius $mat-form-field-outline-border-radius @@ -65,7 +70,7 @@ $mat-form-field-outline-subscript-padding: border-left-style: none; flex-grow: 1; - [dir="rtl"] & { + [dir='rtl'] & { border-left-style: solid; border-right-style: none; border-radius: $mat-form-field-outline-border-radius 0 0 diff --git a/src/lib/form-field/form-field.scss b/src/lib/form-field/form-field.scss index ad133c0c69d9..b08fbdee23a2 100644 --- a/src/lib/form-field/form-field.scss +++ b/src/lib/form-field/form-field.scss @@ -43,21 +43,7 @@ $mat-form-field-default-infix-width: 180px !default; .mat-form-field-suffix { white-space: nowrap; flex: none; - - // Allow icons in a prefix or suffix to adapt to the correct size. - .mat-icon { - width: 1em; - } - - // Allow icon buttons in a prefix or suffix to adapt to the correct size. - .mat-icon-button { - font: inherit; - vertical-align: baseline; - - .mat-icon { - font-size: inherit; - } - } + position: relative; } .mat-form-field-infix { diff --git a/src/lib/icon/icon.scss b/src/lib/icon/icon.scss index 54bafa4ff9a8..21b38398017b 100644 --- a/src/lib/icon/icon.scss +++ b/src/lib/icon/icon.scss @@ -11,3 +11,16 @@ $mat-icon-size: 24px !default; height: $mat-icon-size; width: $mat-icon-size; } + +.mat-form-field:not(.mat-form-field-appearance-legacy) { + .mat-form-field-prefix, + .mat-form-field-suffix { + .mat-icon { + display: block; + } + + .mat-icon-button .mat-icon { + margin: auto; + } + } +} diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss index 8225a0f73950..5f8ccd5c0e6e 100644 --- a/src/lib/select/select.scss +++ b/src/lib/select/select.scss @@ -46,10 +46,16 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a display: table-cell; vertical-align: middle; - // When used in a box appearance form-field the arrow should be centered in the box. - .mat-form-field-appearance-fill & { + // When used in a box or standard appearance form-field the arrow should be shifted up 50%. + .mat-form-field-appearance-fill &, + .mat-form-field-appearance-standard & { transform: translateY(-50%); } + + // When used in a outline form-field the arrow should be shifted up 25%. + .mat-form-field-appearance-outline & { + transform: translateY(-25%); + } } .mat-select-arrow {