-
Notifications
You must be signed in to change notification settings - Fork 6.8k
feat(form-field): add outline style #9705
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit
Hold shift + click to select a range
5a30888
remove datepicker reliance on form-field's underlineRef
mmalerba 1706343
add spacing and alignment rules for outline variant
mmalerba eb37c19
outline color & thickness
mmalerba 9c25f9a
style tweaks
mmalerba 15a591b
correctly position and size the gap
mmalerba ac00b7a
address comments
mmalerba File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,143 @@ | ||
| @import '../core/theming/palette'; | ||
| @import '../core/theming/theming'; | ||
| @import '../core/style/form-common'; | ||
| @import '../core/typography/typography-utils'; | ||
|
|
||
|
|
||
| // Theme styles that only apply to the outline appearance of the form-field. | ||
|
|
||
| @mixin mat-form-field-outline-theme($theme) { | ||
| $primary: map-get($theme, primary); | ||
| $accent: map-get($theme, accent); | ||
| $warn: map-get($theme, warn); | ||
| $foreground: map-get($theme, foreground); | ||
| $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-hover: mat-color($foreground, divider, if($is-dark-theme, 1, 0.87)); | ||
| $outline-color-primary: mat-color($primary); | ||
| $outline-color-accent: mat-color($accent); | ||
| $outline-color-warn: mat-color($warn); | ||
| $outline-color-disabled: mat-color($foreground, divider, if($is-dark-theme, 0.15, 0.06)); | ||
|
|
||
| .mat-form-field-appearance-outline { | ||
| .mat-form-field-outline { | ||
| color: $outline-color; | ||
| } | ||
|
|
||
| .mat-form-field-outline-thick { | ||
| color: $outline-color-hover; | ||
| } | ||
|
|
||
| &.mat-focused { | ||
| .mat-form-field-outline-thick { | ||
| color: $outline-color-primary; | ||
| } | ||
|
|
||
| &.mat-accent .mat-form-field-outline-thick { | ||
| color: $outline-color-accent; | ||
| } | ||
|
|
||
| &.mat-warn .mat-form-field-outline-thick { | ||
| color: $outline-color-warn; | ||
| } | ||
| } | ||
|
|
||
| // Class repeated so that rule is specific enough to override focused accent color case. | ||
| &.mat-form-field-invalid.mat-form-field-invalid { | ||
| .mat-form-field-outline-thick { | ||
| color: $outline-color-warn; | ||
| } | ||
| } | ||
|
|
||
| &.mat-form-field-disabled { | ||
| .mat-form-field-label { | ||
| color: $label-disabled-color; | ||
| } | ||
|
|
||
| .mat-form-field-outline { | ||
| color: $outline-color-disabled; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // Used to make instances of the _mat-form-field-label-floating mixin negligibly different, | ||
| // and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some | ||
| // of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters | ||
| // an unknown pseudo-class it will discard the entire rule set. | ||
| $mat-form-field-outline-dedupe: 0; | ||
|
|
||
| // Applies a floating label above the form field control itself. | ||
| @mixin _mat-form-field-outline-label-floating($font-scale, $infix-padding, $infix-margin-top) { | ||
| transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-outline-dedupe) | ||
| scale($font-scale); | ||
| width: 100% / $font-scale + $mat-form-field-outline-dedupe; | ||
|
|
||
| $mat-form-field-fill-dedupe: $mat-form-field-outline-dedupe + 0.00001 !global; | ||
| } | ||
|
|
||
| @mixin mat-form-field-outline-typography($config) { | ||
| // The unit-less line-height from the font config. | ||
| $line-height: mat-line-height($config, input); | ||
| // The amount to scale the font for the floating label and subscript. | ||
| $subscript-font-scale: 0.75; | ||
| // The padding above and below the infix. | ||
| $infix-padding: 1em; | ||
| // The margin applied to the form-field-infix to reserve space for the floating label. | ||
| $infix-margin-top: 1em * $line-height * $subscript-font-scale; | ||
| // The space between the bottom of the .mat-form-field-flex area and the subscript wrapper. | ||
| // Mocks show half of the text size, but this margin is applied to an element with the subscript | ||
| // text font size, so we need to divide by the scale factor to make it half of the original text | ||
| // size. | ||
| $subscript-margin-top: 0.5em / $subscript-font-scale; | ||
| // The padding applied to the form-field-wrapper to reserve space for the subscript, since it's | ||
| // absolutely positioned. This is a combination of the subscript's margin and line-height, but we | ||
| // need to multiply by the subscript font scale factor since the wrapper has a larger font size. | ||
| $wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale; | ||
| // The amount we offset the label from the input text in the outline appearance. | ||
| $outline-appearance-label-offset: -0.25em; | ||
|
|
||
| .mat-form-field-appearance-outline { | ||
| .mat-form-field-infix { | ||
| padding: $infix-padding 0 $infix-padding 0; | ||
| } | ||
|
|
||
| .mat-form-field-outline { | ||
| // We want the bottom of the outline to start at the end of the content box, not the padding | ||
| // box, so we move it up by the padding amount. | ||
| bottom: $wrapper-padding-bottom; | ||
| } | ||
|
|
||
| .mat-form-field-label { | ||
| top: $infix-margin-top + $infix-padding; | ||
| margin-top: $outline-appearance-label-offset; | ||
| } | ||
|
|
||
| &.mat-form-field-can-float { | ||
| &.mat-form-field-should-float .mat-form-field-label, | ||
| .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label { | ||
| @include _mat-form-field-outline-label-floating( | ||
| $subscript-font-scale, $infix-padding + $outline-appearance-label-offset, | ||
| $infix-margin-top); | ||
| } | ||
|
|
||
| .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper | ||
| .mat-form-field-label { | ||
| @include _mat-form-field-outline-label-floating( | ||
| $subscript-font-scale, $infix-padding + $outline-appearance-label-offset, | ||
| $infix-margin-top); | ||
| } | ||
|
|
||
| // Server-side rendered matInput with a label attribute but label not shown | ||
| // (used as a pure CSS stand-in for mat-form-field-should-float). | ||
| .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper | ||
| .mat-form-field-label { | ||
| @include _mat-form-field-outline-label-floating( | ||
| $subscript-font-scale, $infix-padding + $outline-appearance-label-offset, | ||
| $infix-margin-top); | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
How about
getConnectedOverlayOrigin? I want to save the term "popup" in case we ever make one as its own thing (a la xap-bubble). We also use the term "origin" throughout the overlay positioning code to refer to this element.