Text Field Sass API

Variables

text-field-disable-everything

$text-field-disable-everything: base.$form-disable-everything !default;

text-field-disable-addon

$text-field-disable-addon: $disable-everything !default;

Used By

• @mixin text-field-variables
• @mixin text-field-container-styles

text-field-disable-placeholder-ellipsis

$text-field-disable-placeholder-ellipsis: false !default;

Used By

• @mixin text-field-text-field-styles

text-field-disable-inline

$text-field-disable-inline: false !default;

text-field-disable-container-dense

$text-field-disable-container-dense: false !default;

Used By

• @mixin text-field-container-styles

text-field-disable-underline-left

$text-field-disable-underline-left: base.$form-disable-underlined-theme !default;

Used By

• @mixin text-field-container-styles

text-field-disable-underline-center

$text-field-disable-underline-center: base.$form-disable-underlined-theme !default;

Used By

• @mixin text-field-container-styles

text-field-disable-underline-right

$text-field-disable-underline-right: base.$form-disable-underlined-theme !default;

Used By

• @mixin text-field-container-styles

text-field-typography

$text-field-typography: map.merge(
  typography.$base-font-styles,
  map.merge(
    typography.$body-1-styles,
    (
      font-size: 1em,
    )
  )
) !default;

text-field-height

$text-field-height: 3rem !default;

text-field-dense-height

$text-field-dense-height: 2.5rem !default;

text-field-label-height

$text-field-label-height: 3.5rem !default;

Used By

• @mixin text-field-container-styles

text-field-label-dense-height

$text-field-label-dense-height: 3.25rem !default;

Used By

• @mixin text-field-container-styles

text-field-border-radius

$text-field-border-radius: border-radius.get-var(xs) !default;

text-field-border-width

$text-field-border-width: 1px !default;

text-field-border-width-active

$text-field-border-width-active: 2px !default;

Used By

• @mixin text-field-container-styles

text-field-filled-padding

$text-field-filled-padding: calc(spacing.get-var(sm) * 1.5) !default;

Used By

• @mixin text-field-variables
• @mixin text-field-container-styles

text-field-outlined-padding

$text-field-outlined-padding: spacing.get-var(md) !default;

Used By

• @mixin text-field-variables

text-field-underlined-padding

$text-field-underlined-padding: null !default;

Used By

• @mixin text-field-variables
• @mixin text-field-container-styles

text-field-underlined-placeholder-height

$text-field-underlined-placeholder-height: 2.5rem !default;

Used By

• @mixin text-field-container-styles

text-field-underlined-placeholder-padding-top

$text-field-underlined-placeholder-padding-top: spacing.get-var(sm) !default;

Used By

• @mixin text-field-container-styles

text-field-underlined-placeholder-addon-padding-top

$text-field-underlined-placeholder-addon-padding-top: spacing.get-var(xs) !default;

Used By

• @mixin text-field-container-styles

text-field-underlined-label-padding-top

$text-field-underlined-label-padding-top: spacing.get-var(lg) !default;

Used By

• @mixin text-area-textarea-container-styles
• @mixin text-field-container-styles

text-field-underlined-label-left-offset

$text-field-underlined-label-left-offset: spacing.get-var(sm) !default;

Used By

• @mixin text-field-container-styles

text-field-color-min-width

$text-field-color-min-width: 5rem !default;

Used By

• @mixin text-field-text-field-styles

text-field-addon-gap

$text-field-addon-gap: spacing.get-var(xs) !default;

text-field-addon-margin

$text-field-addon-margin: spacing.get-var(sm) !default;

Used By

• @mixin text-field-container-styles

text-field-addon-spacing

$text-field-addon-spacing: spacing.get-var(sm) !default;

text-field-light-border-color

$text-field-light-border-color: rgba(colors.$black, 0.12) !default;

Used By

• @mixin text-field-use-light-theme

text-field-dark-border-color

$text-field-dark-border-color: rgba(colors.$white, 0.5) !default;

Used By

• @mixin text-field-use-dark-theme

text-field-border-color

$text-field-border-color: theme.get-default-color(
  $light-border-color,
  $dark-border-color
) !default;

text-field-light-hover-border-color

$text-field-light-hover-border-color: rgba(colors.$black, 0.87) !default;

Used By

• @mixin text-field-use-light-theme

text-field-dark-hover-border-color

$text-field-dark-hover-border-color: rgba(colors.$white, 0.87) !default;

Used By

• @mixin text-field-use-dark-theme

text-field-hover-border-color

$text-field-hover-border-color: theme.get-default-color(
  $light-hover-border-color,
  $dark-hover-border-color
) !default;

Used By

• @mixin text-field-variables

text-field-light-filled-background-color

$text-field-light-filled-background-color: colors.$grey-100 !default;

Used By

• @mixin text-field-use-light-theme

text-field-dark-filled-background-color

$text-field-dark-filled-background-color: #424242 !default;

Used By

• @mixin text-field-use-dark-theme

text-field-filled-background-color

$text-field-filled-background-color: theme.get-default-color(
  $light-filled-background-color,
  $dark-filled-background-color
) !default;

Used By

• @mixin text-field-variables

text-field-variables

$text-field-variables: (
  addon-top,
  addon-spacing,
  addon-margin-top,
  addon-left-offset,
  height,
  padding-left,
  padding-right,
  padding-top,
  border-color,
  hover-border-color,
  filled-color,
  filled-padding,
  outlined-padding,
  underlined-padding
);

Mixins

text-field-set-var

@mixin set-var($name, $value) { … }

Requires

• @function get-var-name
• @mixin app-bar-variables

text-field-use-var

@mixin use-var($property, $name: $property, $fallback: null) { … }

Requires

• @function app-bar-get-var

text-field-use-light-theme

@mixin use-light-theme { … }

Requires

• @mixin app-bar-set-var
• $app-bar-disable-everything
• $text-field-light-border-color
• $text-field-light-hover-border-color
• $form-disable-filled-theme
• $text-field-light-filled-background-color

text-field-use-dark-theme

@mixin use-dark-theme { … }

Requires

• @mixin app-bar-set-var
• $app-bar-disable-everything
• $text-field-dark-border-color
• $text-field-dark-hover-border-color
• $form-disable-filled-theme
• $text-field-dark-filled-background-color

text-field-variables

@mixin variables { … }

Requires

• @mixin app-bar-set-var
• $app-bar-disable-everything
• $form-disable-filled-theme
• $text-field-filled-padding
• $form-disable-outlined-theme
• $text-field-outlined-padding
• $form-disable-underlined-theme
• $text-field-underlined-padding
• $app-bar-height
• $avatar-border-color
• $text-field-hover-border-color
• $text-field-filled-background-color
• $text-field-disable-addon
• $autocomplete-addon-spacing

text-field-container-styles

@mixin container-styles($disable-layer: false) { … }

Used By

• @mixin text-field-styles

Requires

• @mixin app-bar-use-var
• @mixin app-bar-set-var
• @function app-bar-get-var
• @function theme-get-var
• $button-disable-floating
• $text-field-disable-container-dense
• $app-bar-dense-height
• $text-field-label-dense-height
• $form-message-disable-inline
• $text-field-label-height
• $text-field-disable-addon
• $form-disable-underlined-theme
• $form-disable-outlined-theme
• $label-floating-padding
• $avatar-border-radius
• $card-border-width
• $avatar-color
• $interaction-disable-outline-offset
• $form-disable-filled-theme
• $text-field-filled-padding
• $text-field-underlined-padding
• $text-field-border-width-active
• $linear-duration
• $linear-timing-function
• $text-field-underlined-placeholder-height
• $text-field-underlined-placeholder-addon-padding-top
• $text-field-underlined-placeholder-padding-top
• $text-field-underlined-label-padding-top
• $text-field-addon-margin
• $text-field-disable-underline-left
• $text-field-disable-underline-center
• $text-field-disable-underline-right
• $text-field-underlined-label-left-offset

text-field-text-field-styles

@mixin text-field-styles($disable-layer: false) { … }

Used By

• @mixin text-field-styles

Requires

• @mixin responsive-item-base-styles
• @mixin app-bar-use-var
• $text-field-color-min-width
• $text-field-disable-placeholder-ellipsis
• $linear-duration

text-field-addon-styles

@mixin addon-styles($disable-layer: false) { … }

Used By

• @mixin text-field-styles

Requires

• @mixin app-bar-use-var
• $autocomplete-addon-gap
• $form-disable-filled-theme
• $form-disable-underlined-theme

text-field-styles

@mixin styles($disable-layer: false) { … }

Requires

• @mixin text-field-container-styles
• @mixin text-field-text-field-styles
• @mixin text-field-addon-styles
• $app-bar-disable-everything

Functions

text-field-get-var

@function get-var($name, $fallback: null) { … }

Returns — String

Requires

• @function get-var-name
• @mixin app-bar-variables

Set to true to disable the TextField styles

Set to true if the addon props will not be used with the TextField or TextArea components or the visibilityIcon prop for the Password component.

Set to true if the ::placeholder text should not automatically ellipsis when there is text overflow.

Set to true to disable the styles for allowing the TextField to be rendered inline instead of always spanning the full width of the container.

Set to true to disable the TextFieldContainer dense styles.

Set to true if the underlined theme will not animate from the left.

NOTE: This would require updating the FORM_CONFIG.underlineDirection value since this is the default.

Set to true if the underlined theme will not animate from the center.

Set to true if the underlined theme will not animate from the right.

The default TextField typography

The default TextField height.

The default TextField height when the dense prop is enabled.

The default TextField height when there is a label prop.

The default TextField height when there is a label and dense prop.

The border-radius for a TextField.

The border-width for a TextField.

The border-width for a TextField while active or focused.

The amount of horizontal padding to apply to a TextField with the theme="filled".

The amount of horizontal padding to apply to a TextField with the theme="outline".

The amount of horizontal padding to apply to a TextField with the theme="underline".

The amount of height to apply to a TextField while the theme="underline" and a label has not been provided.

Set this to null to disable these styles.

The amount of padding-top to apply to a TextField while the theme="underline" and a label has not been provided.

This will be ignored if the $underlined-placeholder-height is null.

The amount of padding-top to apply to addons in a TextField while the theme="underline".

This will be ignored if the $underlined-placeholder-height is null.

The amount of padding-top to apply to the TextFieldContainer while the theme="underline" and a label was provided.

NOTE: This is the default height of the label with line-height

The position in the TextFieldContainer for a Label while the theme="underline".

Set this to null if not using <TextField type="color" /> since this is used to apply a min-width to color inputs.

The gap to apply between addon elements if multiple were provided. i.e. leftAddon={<><FavoriteIcon /><CloseIcon /></>}

The amount of margin to apply to addons when the TextField theme="underline".

The amount of spacing between a TextField addon and the <input> element.

The border-color for a theme="outline" TextField in the light theme.

The border-color for a theme="outline" TextField in the dark theme.

The default border-color for a theme="outline" TextField.

The border-color for a theme="outline" TextField in the light theme while hovering.

The border-color for a theme="outline" TextField in the dark theme while hovering.

The default border-color for a theme="outline" TextField while hovering.

The background color for theme="filled" TextField in the light theme.

The background color for theme="filled" TextField in the dark theme.

The default background color for theme="filled" TextField.

The available configurable css variables and mostly used internally for the get-var, set-var, and use-var utils.

The supported variable name

The value to set the variable to. Supports null which will just be a no-op.

The css property to apply the variable to

The supported variable name

An optional fallback value if the variable has not been set

Applies the light the variables based on feature flags

Applies the dark the variables based on feature flags

Conditionally applies the css variables based on feature flags

Generates all the styles based on feature flags.

Set this to true to disable the layer behavior

Generates all the styles based on feature flags.

Set this to true to disable the layer behavior

Generates all the styles based on feature flags.

Set this to true to disable the layer behavior

Generates all the styles based on feature flags.

Set this to true to disable the layer behavior

a var() statement

The supported variable name

An optional fallback value