|
| 1 | +@import '../core/theming/palette'; |
| 2 | +@import '../core/theming/theming'; |
| 3 | +@import '../core/style/form-common'; |
| 4 | +@import '../core/typography/typography-utils'; |
| 5 | + |
| 6 | + |
| 7 | +// Theme styles that only apply to the outline appearance of the form-field. |
| 8 | + |
| 9 | +@mixin mat-form-field-outline-theme($theme) { |
| 10 | + $primary: map-get($theme, primary); |
| 11 | + $accent: map-get($theme, accent); |
| 12 | + $warn: map-get($theme, warn); |
| 13 | + $foreground: map-get($theme, foreground); |
| 14 | + $is-dark-theme: map-get($theme, is-dark); |
| 15 | + |
| 16 | + $label-disabled-color: mat-color($foreground, disabled-text); |
| 17 | + $outline-color: mat-color($foreground, divider, if($is-dark-theme, 0.30, 0.12)); |
| 18 | + $outline-color-hover: mat-color($foreground, divider, if($is-dark-theme, 1, 0.87)); |
| 19 | + $outline-color-primary: mat-color($primary); |
| 20 | + $outline-color-accent: mat-color($accent); |
| 21 | + $outline-color-warn: mat-color($warn); |
| 22 | + $outline-color-disabled: mat-color($foreground, divider, if($is-dark-theme, 0.15, 0.06)); |
| 23 | + |
| 24 | + .mat-form-field-appearance-outline { |
| 25 | + .mat-form-field-outline { |
| 26 | + color: $outline-color; |
| 27 | + } |
| 28 | + |
| 29 | + .mat-form-field-outline-thick { |
| 30 | + color: $outline-color-hover; |
| 31 | + } |
| 32 | + |
| 33 | + &.mat-focused { |
| 34 | + .mat-form-field-outline-thick { |
| 35 | + color: $outline-color-primary; |
| 36 | + } |
| 37 | + |
| 38 | + &.mat-accent .mat-form-field-outline-thick { |
| 39 | + color: $outline-color-accent; |
| 40 | + } |
| 41 | + |
| 42 | + &.mat-warn .mat-form-field-outline-thick { |
| 43 | + color: $outline-color-warn; |
| 44 | + } |
| 45 | + } |
| 46 | + |
| 47 | + // Class repeated so that rule is specific enough to override focused accent color case. |
| 48 | + &.mat-form-field-invalid.mat-form-field-invalid { |
| 49 | + .mat-form-field-outline-thick { |
| 50 | + color: $outline-color-warn; |
| 51 | + } |
| 52 | + } |
| 53 | + |
| 54 | + &.mat-form-field-disabled { |
| 55 | + .mat-form-field-label { |
| 56 | + color: $label-disabled-color; |
| 57 | + } |
| 58 | + |
| 59 | + .mat-form-field-outline { |
| 60 | + color: $outline-color-disabled; |
| 61 | + } |
| 62 | + } |
| 63 | + } |
| 64 | +} |
| 65 | + |
| 66 | +// Used to make instances of the _mat-form-field-label-floating mixin negligibly different, |
| 67 | +// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some |
| 68 | +// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters |
| 69 | +// an unknown pseudo-class it will discard the entire rule set. |
| 70 | +$mat-form-field-outline-dedupe: 0; |
| 71 | + |
| 72 | +// Applies a floating label above the form field control itself. |
| 73 | +@mixin _mat-form-field-outline-label-floating($font-scale, $infix-padding, $infix-margin-top) { |
| 74 | + transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-outline-dedupe) |
| 75 | + scale($font-scale); |
| 76 | + width: 100% / $font-scale + $mat-form-field-outline-dedupe; |
| 77 | + |
| 78 | + $mat-form-field-fill-dedupe: $mat-form-field-outline-dedupe + 0.00001 !global; |
| 79 | +} |
| 80 | + |
| 81 | +@mixin mat-form-field-outline-typography($config) { |
| 82 | + // The unit-less line-height from the font config. |
| 83 | + $line-height: mat-line-height($config, input); |
| 84 | + // The amount to scale the font for the floating label and subscript. |
| 85 | + $subscript-font-scale: 0.75; |
| 86 | + // The padding above and below the infix. |
| 87 | + $infix-padding: 1em; |
| 88 | + // The margin applied to the form-field-infix to reserve space for the floating label. |
| 89 | + $infix-margin-top: 1em * $line-height * $subscript-font-scale; |
| 90 | + // The space between the bottom of the .mat-form-field-flex area and the subscript wrapper. |
| 91 | + // Mocks show half of the text size, but this margin is applied to an element with the subscript |
| 92 | + // text font size, so we need to divide by the scale factor to make it half of the original text |
| 93 | + // size. |
| 94 | + $subscript-margin-top: 0.5em / $subscript-font-scale; |
| 95 | + // The padding applied to the form-field-wrapper to reserve space for the subscript, since it's |
| 96 | + // absolutely positioned. This is a combination of the subscript's margin and line-height, but we |
| 97 | + // need to multiply by the subscript font scale factor since the wrapper has a larger font size. |
| 98 | + $wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale; |
| 99 | + // The amount we offset the label from the input text in the outline appearance. |
| 100 | + $outline-appearance-label-offset: -0.25em; |
| 101 | + |
| 102 | + .mat-form-field-appearance-outline { |
| 103 | + .mat-form-field-infix { |
| 104 | + padding: $infix-padding 0 $infix-padding 0; |
| 105 | + } |
| 106 | + |
| 107 | + .mat-form-field-outline { |
| 108 | + // We want the bottom of the outline to start at the end of the content box, not the padding |
| 109 | + // box, so we move it up by the padding amount. |
| 110 | + bottom: $wrapper-padding-bottom; |
| 111 | + } |
| 112 | + |
| 113 | + .mat-form-field-label { |
| 114 | + top: $infix-margin-top + $infix-padding; |
| 115 | + margin-top: $outline-appearance-label-offset; |
| 116 | + } |
| 117 | + |
| 118 | + &.mat-form-field-can-float { |
| 119 | + &.mat-form-field-should-float .mat-form-field-label, |
| 120 | + .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label { |
| 121 | + @include _mat-form-field-outline-label-floating( |
| 122 | + $subscript-font-scale, $infix-padding + $outline-appearance-label-offset, |
| 123 | + $infix-margin-top); |
| 124 | + } |
| 125 | + |
| 126 | + .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper |
| 127 | + .mat-form-field-label { |
| 128 | + @include _mat-form-field-outline-label-floating( |
| 129 | + $subscript-font-scale, $infix-padding + $outline-appearance-label-offset, |
| 130 | + $infix-margin-top); |
| 131 | + } |
| 132 | + |
| 133 | + // Server-side rendered matInput with a label attribute but label not shown |
| 134 | + // (used as a pure CSS stand-in for mat-form-field-should-float). |
| 135 | + .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper |
| 136 | + .mat-form-field-label { |
| 137 | + @include _mat-form-field-outline-label-floating( |
| 138 | + $subscript-font-scale, $infix-padding + $outline-appearance-label-offset, |
| 139 | + $infix-margin-top); |
| 140 | + } |
| 141 | + } |
| 142 | + } |
| 143 | +} |
0 commit comments