227 lines
8.5 KiB
SCSS
227 lines
8.5 KiB
SCSS
@use '../core/tokens/token-utils';
|
|
@use '../core/style/vendor-prefixes';
|
|
@use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field;
|
|
@use './form-field-subscript';
|
|
@use './form-field-focus-overlay';
|
|
@use './form-field-high-contrast';
|
|
@use './form-field-native-select';
|
|
@use './user-agent-overrides';
|
|
@use './mdc-text-field-structure';
|
|
@use './mdc-text-field-textarea-overrides';
|
|
@use './mdc-text-field-structure-overrides';
|
|
@use './mdc-text-field-density-overrides';
|
|
|
|
// Base styles for MDC text-field, notched-outline, floating label and line-ripple.
|
|
@include mdc-text-field-structure.private-text-field-structure();
|
|
|
|
// MDC text-field overwrites.
|
|
@include mdc-text-field-textarea-overrides.private-text-field-textarea-overrides();
|
|
@include mdc-text-field-structure-overrides.private-text-field-structure-overrides();
|
|
@include mdc-text-field-density-overrides.private-text-field-density-overrides();
|
|
|
|
// Include the subscript, focus-overlay, native select and high-contrast styles.
|
|
@include form-field-subscript.private-form-field-subscript();
|
|
@include form-field-focus-overlay.private-form-field-focus-overlay();
|
|
@include form-field-native-select.private-form-field-native-select();
|
|
@include form-field-high-contrast.private-form-field-high-contrast();
|
|
@include user-agent-overrides.private-form-field-user-agent-overrides();
|
|
|
|
// The amount of padding between the icon prefix/suffix and the infix.
|
|
// This assumes that the icon will be a 24px square with 12px padding.
|
|
$_icon-prefix-infix-padding: 4px;
|
|
|
|
// Host element of the form-field. It contains the mdc-text-field wrapper
|
|
// and the subscript wrapper.
|
|
.mat-mdc-form-field {
|
|
// The scale to use for the form-field's label when its in the floating position.
|
|
--mat-mdc-form-field-floating-label-scale: 0.75;
|
|
|
|
display: inline-flex;
|
|
// This container contains the text-field and the subscript. The subscript
|
|
// should be displayed below the text-field. Hence the column direction.
|
|
flex-direction: column;
|
|
// This allows the form-field to shrink down when used inside flex or grid layouts.
|
|
min-width: 0;
|
|
// To avoid problems with text-align.
|
|
text-align: left;
|
|
|
|
@include token-utils.use-tokens(tokens-mat-form-field.$prefix,
|
|
tokens-mat-form-field.get-token-slots()) {
|
|
@include vendor-prefixes.smooth-font();
|
|
@include token-utils.create-token-slot(font-family, container-text-font);
|
|
@include token-utils.create-token-slot(line-height, container-text-line-height);
|
|
@include token-utils.create-token-slot(font-size, container-text-size);
|
|
@include token-utils.create-token-slot(letter-spacing, container-text-tracking);
|
|
@include token-utils.create-token-slot(font-weight, container-text-weight);
|
|
|
|
.mdc-text-field--outlined {
|
|
$token-value: token-utils.get-token-variable(outlined-label-text-populated-size);
|
|
|
|
// For the non-upgraded notch label (i.e. when rendered on the server), also
|
|
// use the correct typography.
|
|
.mdc-floating-label--float-above {
|
|
font-size: calc(#{$token-value} * var(--mat-mdc-form-field-floating-label-scale));
|
|
}
|
|
|
|
.mdc-notched-outline--upgraded .mdc-floating-label--float-above {
|
|
font-size: $token-value;
|
|
}
|
|
}
|
|
}
|
|
|
|
[dir='rtl'] & {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
// Container that contains the prefixes, infix and suffixes. These elements should
|
|
// be aligned vertically in the baseline and in a single row.
|
|
.mat-mdc-form-field-flex {
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
}
|
|
|
|
.mat-mdc-text-field-wrapper {
|
|
// The MDC text-field should stretch to the width of the host `<mat-form-field>` element.
|
|
// This allows developers to control the width without needing custom CSS overrides.
|
|
width: 100%;
|
|
// Avoids stacking issues due to the absolutely-positioned
|
|
// descendants of the form field (see #28708)
|
|
z-index: 0;
|
|
}
|
|
|
|
.mat-mdc-form-field-icon-prefix,
|
|
.mat-mdc-form-field-icon-suffix {
|
|
// Vertically center icons.
|
|
align-self: center;
|
|
// The line-height can cause the prefix/suffix container to be taller than the actual icons,
|
|
// breaking the vertical centering. To prevent this we set the line-height to 0.
|
|
line-height: 0;
|
|
// MDC applies `pointer-events: none` to the `.mdc-text-field--disabled`. This breaks clicking on
|
|
// prefix and suffix buttons, so we override `pointer-events` to always allow clicking.
|
|
pointer-events: auto;
|
|
// Needs a z-index to ensure it's on top of other clickable content. See #27043.
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
& > .mat-icon {
|
|
padding: 0 12px;
|
|
// It's common for apps to apply `box-sizing: border-box`
|
|
// globally which will break the alignment.
|
|
box-sizing: content-box;
|
|
}
|
|
}
|
|
|
|
.mat-mdc-form-field-icon-prefix {
|
|
@include token-utils.use-tokens(tokens-mat-form-field.$prefix,
|
|
tokens-mat-form-field.get-token-slots()) {
|
|
@include token-utils.create-token-slot(color, leading-icon-color);
|
|
|
|
.mat-form-field-disabled & {
|
|
@include token-utils.create-token-slot(color, disabled-leading-icon-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.mat-mdc-form-field-icon-suffix {
|
|
@include token-utils.use-tokens(tokens-mat-form-field.$prefix,
|
|
tokens-mat-form-field.get-token-slots()) {
|
|
@include token-utils.create-token-slot(color, trailing-icon-color);
|
|
|
|
.mat-form-field-disabled & {
|
|
@include token-utils.create-token-slot(color, disabled-trailing-icon-color);
|
|
}
|
|
|
|
.mat-form-field-invalid & {
|
|
@include token-utils.create-token-slot(color, error-trailing-icon-color);
|
|
}
|
|
|
|
.mat-form-field-invalid:not(.mat-focused):not(.mat-form-field-disabled)
|
|
.mat-mdc-text-field-wrapper:hover & {
|
|
@include token-utils.create-token-slot(color, error-hover-trailing-icon-color);
|
|
}
|
|
|
|
.mat-form-field-invalid.mat-focused .mat-mdc-text-field-wrapper & {
|
|
@include token-utils.create-token-slot(color, error-focus-trailing-icon-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
// The prefix/suffix needs a little extra padding between the icon and the infix. Because we need to
|
|
// support arbitrary height input elements, we use a different DOM structure for prefix and suffix
|
|
// icons, and therefore can't rely on MDC for these styles.
|
|
.mat-mdc-form-field-icon-prefix,
|
|
[dir='rtl'] .mat-mdc-form-field-icon-suffix {
|
|
padding: 0 $_icon-prefix-infix-padding 0 0;
|
|
}
|
|
.mat-mdc-form-field-icon-suffix,
|
|
[dir='rtl'] .mat-mdc-form-field-icon-prefix {
|
|
padding: 0 0 0 $_icon-prefix-infix-padding;
|
|
}
|
|
|
|
// Scale down icons in the subscript and floating label to be the same size
|
|
// as the text.
|
|
.mat-mdc-form-field-subscript-wrapper,
|
|
.mat-mdc-form-field label {
|
|
.mat-icon {
|
|
width: 1em;
|
|
height: 1em;
|
|
font-size: inherit;
|
|
}
|
|
}
|
|
|
|
// Infix that contains the projected content (usually an input or a textarea). We ensure
|
|
// that the projected form-field control and content can stretch as needed, but we also
|
|
// apply a default infix width to make the form-field's look natural.
|
|
.mat-mdc-form-field-infix {
|
|
flex: auto;
|
|
min-width: 0;
|
|
|
|
// Infix stretches to fit the container, but naturally wants to be this wide. We set
|
|
// this in order to have a consistent natural size for the various types of controls
|
|
// that can go in a form field.
|
|
width: 180px;
|
|
|
|
// Needed so that the floating label does not overlap with prefixes or suffixes.
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
|
|
// We do not want to set fixed width on textarea with cols attribute as it makes different
|
|
// columns look same width.
|
|
&:has(textarea[cols]) {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
// In the form-field theme, we add a 1px left margin to the notch to fix a rendering bug in Chrome.
|
|
// Here we apply negative margin to offset the effect on the layout and a clip-path to ensure the
|
|
// left border is completely hidden. (Though the border is transparent, it still creates a triangle
|
|
// shaped artifact where it meets the top and bottom borders.)
|
|
.mat-mdc-form-field .mdc-notched-outline__notch {
|
|
margin-left: -1px;
|
|
@include vendor-prefixes.clip-path(inset(-9em -999em -9em 1px));
|
|
|
|
[dir='rtl'] & {
|
|
margin-left: 0;
|
|
margin-right: -1px;
|
|
@include vendor-prefixes.clip-path(inset(-9em 1px -9em -999em));
|
|
}
|
|
}
|
|
|
|
// In order to make it possible for developers to disable animations for form-fields,
|
|
// we only activate the animation styles if animations are not explicitly disabled.
|
|
.mat-mdc-form-field:not(.mat-form-field-no-animations) {
|
|
@include mdc-text-field-structure.private-text-field-animations;
|
|
}
|
|
|
|
// Allow the label to grow 1px bigger than the notch.
|
|
// If we see this actually happen we know we need to resize the notch.
|
|
.mdc-notched-outline .mdc-floating-label {
|
|
max-width: calc(100% + 1px);
|
|
}
|
|
.mdc-notched-outline--upgraded .mdc-floating-label--float-above {
|
|
max-width: calc(100% * 4 / 3 + 1px);
|
|
}
|