Text Fields

Variables

md-text-field-autocompleted-shadow
$md-text-field-autocompleted-shadow: 0 0 0 50px $md-white-base inset !default;
Sass (Scss)

Description

The box shadow to apply to text fields that have been autocompleted by the browser's autocomplete ability. The default styles are to remove the yellow color and just display as a normal text field. This value can be set to null to allow normal browser behavior or any other valid box-shadow style.

Type

String

Used by

md-text-field-error-color
$md-text-field-error-color: $md-error-color !default;
Sass (Scss)

Description

The error color to use on text fields. This will be applied to the any icons, text field error message, floating label, and the text field divider when there is an error.

Type

Color
md-text-field-divider-active-height
$md-text-field-divider-active-height: 2px !default;
Sass (Scss)

Description

The text field divider's active height. This is the bar that gets colored with the primary color or the error color.

Type

Number

Used by

md-text-field-custom-sizes
$md-text-field-custom-sizes: ()
Sass (Scss)
Click to expand

Description

A Map of custom sizes for text fields. Set this to null if you do not want any custom sizes by default. This is a key value pair of String and List. The key will be used to generate a --suffix class name to apply to floating labels and text fields. The list must have a length of 4 where it is the:

  • custom font size
  • the transition duration modifier
  • the y position of the label when inactive on mobile devices
  • the y position of the label when inactive on desktop screens

Type

Map

Used by

md-text-field-include-multiline
$md-text-field-include-multiline: true !default;
Sass (Scss)

Description

Boolean if the multiline styling should be included by default.

Type

Boolean
md-text-field-include-floating-label
$md-text-field-include-floating-label: true !default;
Sass (Scss)

Description

Boolean if the floating label styling should be included by default.

Type

Boolean
md-text-field-include-block
$md-text-field-include-block: true !default;
Sass (Scss)

Description

Boolean if the block styling should be included by default.

Type

Boolean
md-text-field-include-icon
$md-text-field-include-icon: true !default;
Sass (Scss)

Description

Boolean if the icon styling for text fields should be included by default.

Type

Boolean
md-text-field-include-message
$md-text-field-include-message: true !default;
Sass (Scss)

Description

Boolean if the message styling for text fields should be included by default.

Type

Boolean
md-text-field-include-password
$md-text-field-include-password: true !default;
Sass (Scss)

Description

Boolean if the password text field styling should be included by default.

Type

Boolean
md-text-field-include-inline-indicator
$md-text-field-include-inline-indicator: true !default;
Sass (Scss)

Description

Boolean if the minimal styling for inline indicators for text fields should be included by default.

Type

Boolean
md-text-field-message-font-size
$md-text-field-message-font-size: 12px !default;
Sass (Scss)

Description

The font size for the text field messages.

Type

Number

Used by

md-text-field-active-font-size
$md-text-field-active-font-size: 12px !default;
Sass (Scss)

Description

The font size for the floating label when it is floating above the text field.

Type

Number

Used by

md-text-field-mobile-divider-bottom-padding
$md-text-field-mobile-divider-bottom-padding: 8px !default;
Sass (Scss)

Description

The padding below the text field divider on mobile devices.

Type

Number

Used by

md-text-field-mobile-height
$md-text-field-mobile-height: $md-height !default;
Sass (Scss)

Description

The height for a single-line text field on mobile devices.

Type

Number

Used by

md-text-field-mobile-floating-height
$md-text-field-mobile-floating-height: 72px !default;
Sass (Scss)

Description

The height for a floating-label text field on mobile devices.

Type

Number
md-text-field-mobile-font-size
$md-text-field-mobile-font-size: 16px !default;
Sass (Scss)

Description

The font size for a text field on mobile devices.

Type

Number

Used by

md-text-field-mobile-top-padding
$md-text-field-mobile-top-padding: $md-default-padding !default;
Sass (Scss)

Description

The padding above a floating label on mobile devices.

Type

Number

Used by

md-text-field-mobile-floating-label-padding
$md-text-field-mobile-floating-label-padding: 8px !default;
Sass (Scss)

Description

The padding between a floating floating label and the text field on mobile devices.

Type

Number
md-text-field-divider-top-padding
$md-text-field-divider-top-padding: 7px !default;
Sass (Scss)

Description

The padding above the text field divider for mobile and desktop.

Type

Number

Used by

md-text-field-desktop-height
$md-text-field-desktop-height: 40px !default;
Sass (Scss)

Description

The height for a single-line text field on desktop displays.

Type

Number

Used by

md-text-field-desktop-floating-height
$md-text-field-desktop-floating-height: 60px !default;
Sass (Scss)

Description

The height for a floating-label text field on desktop displays.

Type

Number
md-text-field-desktop-font-size
$md-text-field-desktop-font-size: 13px !default;
Sass (Scss)

Description

The font size for text fields on desktop displays.

Type

Number

Used by

md-text-field-desktop-top-padding
$md-text-field-desktop-top-padding: 12px !default;
Sass (Scss)

Description

The padding from the top of the text field container to the floating floating label on desktop displays.

Type

Number

Used by

md-text-field-desktop-floating-label-padding
$md-text-field-desktop-floating-label-padding: 4px !default;
Sass (Scss)

Description

The padding between a floating floating label and the text field on desktop displays.

Type

Number
md-text-field-desktop-divider-bottom-padding
$md-text-field-desktop-divider-bottom-padding: 4px !default;
Sass (Scss)

Description

The padding between the text field container's bottom and the text field divider on desktop displays.

Type

Number

Used by

md-text-field-mobile-floating-label-margin
$md-text-field-mobile-floating-label-margin: 37px !default;
Sass (Scss)

Description

This is the position from the top of the text field's container that the floating label should appear.

Type

Number

Used by

md-text-field-desktop-floating-label-margin
$md-text-field-desktop-floating-label-margin: 33px !default;
Sass (Scss)

Description

This is the position from the top of the text field's container that the floating label should appear for desktop screens.

Type

Number

Used by

md-text-field-line-height
$md-text-field-line-height: 1.15 !default;
Sass (Scss)

Description

The line-height to use for the text field's input. This will not be applied to multiline text fields. This value should be more than 1 to support Firefox clipping letters.

Type

Number

Used by

md-text-field-message-line-height
$md-text-field-message-line-height: $md-line-height !default;
Sass (Scss)

Description

The line-height to apply to the text field message. This is really only required in case the text field appears as a title in a toolbar.

Type

Number

Used by

Mixins

react-md-text-fields
@mixin react-md-text-fields($primary-color: $md-primary-color, $light-theme: $md-light-theme, $error-color: $md-red-500, $include-media: $md-media-included, $include-multiline: $md-text-field-include-multiline, $include-floating-label: $md-text-field-include-floating-label, $include-block: $md-text-field-include-block, $include-icon: $md-text-field-include-icon, $include-message: $md-text-field-include-message, $include-password: $md-text-field-include-password, $include-inline-indicator: $md-text-field-include-inline-indicator, $include-dense-icons: $md-font-icon-include-dense, $custom-sizes: $md-text-field-custom-sizes) {}
Sass (Scss)
Click to expand

Description

Includes the CSS for text fields. The floating label, block styling, icon, password, and messages are all optional. These sections can be enabled or disabled by modifying the params on this mixin or modifying the default values. If the $include-media param is true, the mobile and desktop media queries will be included for all included parts of the text fields.

Also if the $md-text-field-custom-sizes map is defined, each custom size will be created.

Parameters

NameDescriptionTypeDefault value
$primary-color

The primary color to theme text fields with.

Color
$md-primary-color
$light-theme

Boolean if the text fields should be styled for the light or dark theme.

Boolean
$md-light-theme
$error-color

The error color to use with text fields.

Color
$md-red-500
$include-media

Boolean if the media queries should be included.

Boolean
$md-media-included
$include-multiline

Boolean if the multiline styling of text fields should be included.

Boolean
$md-text-field-include-multiline
$include-floating-label

Boolean if the floating label styles should be included.

Boolean
$md-text-field-include-floating-label
$include-block

Boolean if the block styling should be included.

Boolean
$md-text-field-include-block
$include-icon

Boolean if the minimal styling for using icons should be included.

Boolean
$md-text-field-include-icon
$include-message

Boolean if the text field message styling should be included. This is the CSS for the counter and/or help/error text.

Boolean
$md-text-field-include-message
$include-password

Boolean if the styling for password text fields should be included.

Boolean
$md-text-field-include-password
$include-inline-indicator

Boolean if the styling for inline indicators should be included. If the $include-password param is true, this will automatically be included as well.

Boolean
$md-text-field-include-inline-indicator
$include-dense-icons

Boolean if the dense font icon styles should be included for text fields.

Boolean
$md-font-icon-include-dense
$custom-sizes

This is a map of size names and font sizes to apply as custom sizes for the text field.

Map
$md-text-field-custom-sizes

Examples

Basic Usage SCSS

@include react-md-text-fields;

// or
$md-primary-color: $md-light-blue-500;
@include react-md-text-fields;

// or
@include react-md-text-fields($md-light-theme, $md-light-blue-500);
Sass (Scss)

Requires

Used by

See

react-md-text-field-container
@mixin react-md-text-field-container($light-theme: $md-light-theme, $include-multiline: $md-text-field-include-multiline, $include-block: $md-text-field-include-block, $include-message: $md-text-field-include-message) {}
Sass (Scss)
Click to expand

Description

Includes only the md-text-field-container CSS. This should normally be used from the react-md-text-fields mixin. The placeholders will also be styled accordingly.

Parameters

NameDescriptionTypeDefault value
$light-theme

Boolean if currently using the light theme.

Boolean
$md-light-theme
$include-multiline

Boolean if the multiline text field CSS should be included.

Boolean
$md-text-field-include-multiline
$include-block

Boolean if the block styling for text fields should be included.

Boolean
$md-text-field-include-block
$include-message

Boolean if the styles for the inline messages or counter should be included. This will only every create styles if the include-block param is true as well.

Boolean
$md-text-field-include-message

Examples

Example Usage SCSS

@include react-md-text-field-container;

// or
$md-primary-color: $md-orange-500;
@include react-md-text-field-container;
Sass (Scss)

Requires

Used by

react-md-text-field
@mixin react-md-text-field($light-theme: $md-light-theme, $include-multiline: $md-text-field-include-multiline, $include-floating-label: $md-text-field-include-floating-label) {}
Sass (Scss)
Click to expand

Description

Includes the CSS for the input / textarea tags for text fields. This is normally used only within the react-md-text-fields mixin.

Parameters

NameDescriptionTypeDefault value
$light-theme

Boolean if the text field should be styled for the light-theme.

Boolean
$md-light-theme
$include-multiline

Boolean if the multiline styling of text fields should be included.

Boolean
$md-text-field-include-multiline
$include-floating-label

Boolean if the floating label styles should be included.

Boolean
$md-text-field-include-floating-label

Examples

Basic Usage SCSS

@include react-md-text-field;
Sass (Scss)

Requires

Used by

react-md-text-field-floating-label
@mixin react-md-text-field-floating-label($primary-color: $md-primary-color, $light-theme: $md-light-theme, $error-color: $md-red-500) {}
Sass (Scss)
Click to expand

Description

Includes the styles for the text field's floating label.

Parameters

NameDescriptionTypeDefault value
$primary-color

The primary color to theme text fields with.

Color
$md-primary-color
$light-theme

Boolean if the text fields should be styled for the light or dark theme.

Boolean
$md-light-theme
$error-color

The error color to use with text fields.

Color
$md-red-500

Examples

Example Usage SCSS

@include react-md-text-field-floating-label;
Sass (Scss)

Requires

Used by

react-md-theme-text-field-floating-label
@mixin react-md-theme-text-field-floating-label {}
Sass (Scss)
Click to expand

Parameters

None
react-md-text-field-divider
@mixin react-md-text-field-divider($primary-color: $md-primary-color, $light-theme: $md-light-theme, $error-color: $md-error-color) {}
Sass (Scss)
Click to expand

Description

Includes only CSS for the text field dividers. This is really used if you do not use the react-md-text-fields mixin.

Parameters

NameDescriptionTypeDefault value
$primary-color

The primary color to theme text fields with.

Color
$md-primary-color
$light-theme

Boolean if the text fields should be styled for the light or dark theme.

Boolean
$md-light-theme
$error-color

The error color to use with text fields.

Color
$md-error-color

Examples

Example Usage SCSS

@include react-md-text-field-divider;
Sass (Scss)

Requires

Used by

react-md-text-field-message
@mixin react-md-text-field-message($light-theme: $md-light-theme, $error-color: $md-red-500, $include-icon: $md-text-field-include-icon) {}
Sass (Scss)
Click to expand

Description

Includes the styles for the text field message / counter component.

Parameters

NameDescriptionTypeDefault value
$light-theme

Boolean if the text fields should be styled for the light or dark theme.

Boolean
$md-light-theme
$error-color

The error color to use with text fields.

Color
$md-red-500
$include-icon

Boolean if the styles for text fields with icons and messages should be included.

Boolean
$md-text-field-include-icon

Examples

Example Usage SCSS

@include react-md-text-field-message;
Sass (Scss)

Requires

Used by

react-md-theme-text-field-message
@mixin react-md-theme-text-field-message {}
Sass (Scss)
Click to expand

Parameters

None
react-md-text-field-icon
@mixin react-md-text-field-icon($primary-color: $md-primary-color, $light-theme: $md-light-theme, $error-color: $md-red-500) {}
Sass (Scss)
Click to expand

Description

Includes the styles for using icons with text fields. This is really only useful if you did not use the react-md-text-fields mixin.

Parameters

NameDescriptionTypeDefault value
$primary-color

The primary color to theme text fields with.

Color
$md-primary-color
$light-theme

Boolean if the text fields should be styled for the light or dark theme.

Boolean
$md-light-theme
$error-color

The error color to use with text fields.

Color
$md-red-500

Examples

Example Usage SCSS

@include react-md-text-field-icon;
Sass (Scss)

Requires

Used by

react-md-theme-text-field-icon
@mixin react-md-theme-text-field-icon {}
Sass (Scss)
Click to expand

Parameters

None
react-md-text-field-password
@mixin react-md-text-field-password($light-theme: $md-light-theme) {}
Sass (Scss)
Click to expand

Description

Includes the styles for having a password text field.

Parameters

NameDescriptionTypeDefault value
$light-theme

Boolean if the text fields should be styled for the light or dark theme.

Boolean
$md-light-theme

Examples

Example Usage SCSS

@include react-md-text-field-password;
Sass (Scss)

Requires

Used by

react-md-text-field-inline-indicator
@mixin react-md-text-field-inline-indicator {}
Sass (Scss)
Click to expand

Description

Creates the styles for the text field's inline indicator. This is is for showing a password button or some other icon within the text field.

Parameters

None

Examples

Example Usage SCSS

@include react-md-text-field-inline-indicator;
Sass (Scss)

Requires

Used by

react-md-text-field-custom-sizes
@mixin react-md-text-field-custom-sizes($font-sizes: $md-text-field-custom-sizes, $include-floating-label: $md-text-field-include-floating-label) {}
Sass (Scss)
Click to expand

Description

Includes the CSS for custom sizes for text fields. This will create some class names with the components they modify and a --#{$name} suffix.

Parameters

NameDescriptionTypeDefault value
$font-sizes

A map of size names with font sizes.

Map
$md-text-field-custom-sizes
$include-floating-label

Boolean if the custom text field size should include the styles for floating labels.

Boolean
$md-text-field-include-floating-label

Examples

Example Usage SCSS

@include react-md-text-field-custom-sizes;
Sass (Scss)

Example Usage CSS Output

.md-text-field--title {
  font-size: 34px;
}

.md-floating-label--title {
  font-size: 34px;
}
Sass (Scss)

Used by

react-md-style-placeholders
@mixin react-md-style-placeholders($child: true) {}
Sass (Scss)
Click to expand

Description

A mixin for adding custom styles to placeholders since the autoprefixer doesn't seem to be able to pick it up correctly.

Parameters

NameDescriptionTypeDefault value
$child

Boolean if the placeholder should apply to a child of the class name instead of applying to the current class name/selector.

Boolean
true

Examples

Example Scss Usage

.md-text-field[disabled] {
  @include react-md-style-placeholders {
    color: get-color(disabled, true);
  }
}

.some-field-container {
  @include react-md-style-placeholders(true) {
    color: red;
  }
}
Sass (Scss)

Example CSS Output

.md-text-field[disabled]:placeholder {
  color: rgba(0, 0, 0, .87);
}

.md-text-field[disabled]:-moz-placeholder {
  color: rgba(0, 0, 0, .87);
}

.md-text-field[disabled]::-moz-placeholder {
  color: rgba(0, 0, 0, .87);
}

.md-text-field[disabled]:-ms-input-placeholder {
  color: rgba(0, 0, 0, .87);
}

.md-text-field[disabled]::-webkit-placeholder {
  color: rgba(0, 0, 0, .87);
}


.some-field-container :placeholder {
  color: red;
}

.some-field-container :-moz-placeholder {
  color: red;
}

.some-field-container ::-moz-placeholder {
  color: red;
}

.some-field-container :-ms-input-placeholder {
  color: red;
}

.some-field-container ::-webkit-placeholder {
  color: red;
}
Sass (Scss)

Used by

react-md-text-fields-mobile
@mixin react-md-text-fields-mobile($include-multiline: $md-text-field-include-multiline, $include-floating-label: $md-text-field-include-floating-label, $include-block: $md-text-field-include-block, $include-icon: $md-text-field-include-icon, $include-password: $md-text-field-include-password, $include-inline-indicator: $md-text-field-include-inline-indicator, $custom-sizes: $md-text-field-custom-sizes) {}
Sass (Scss)
Click to expand

Description

Creates the styles for text fields on mobile devices. The floating labels, blocks, icons, or password styles can be omitted by disabling the defaults or passing false here. This should normally be used within a media query for mobile devices.

Note: If the password is included, icons will automatically be included since they share styles.

Parameters

NameDescriptionTypeDefault value
$include-multiline

Boolean if the multiline styling of text fields should be included.

Boolean
$md-text-field-include-multiline
$include-floating-label

Boolean if the floating label styles should be included.

Boolean
$md-text-field-include-floating-label
$include-block

Boolean if the block styling should be included.

Boolean
$md-text-field-include-block
$include-icon

Boolean if the minimal styling for using icons should be included.

Boolean
$md-text-field-include-icon
$include-password

Boolean if the styling for password text fields should be included.

Boolean
$md-text-field-include-password
$include-inline-indicator

Boolean if the styling for inline indicators should be included. If the $include-password param is true, this will automatically be included as well.

Boolean
$md-text-field-include-inline-indicator
$custom-sizes

A map of custom sizes to apply. If you do not want any custom sizes, set the global or this param to null.

Map
$md-text-field-custom-sizes

Examples

Example Usage SCSS

@media #{$md-mobile-media} {
  @include react-md-text-fields-mobile;
}
Sass (Scss)

Requires

Used by

react-md-text-fields-desktop
@mixin react-md-text-fields-desktop($include-multiline: $md-text-field-include-multiline, $include-floating-label: $md-text-field-include-floating-label, $include-block: $md-text-field-include-block, $include-icon: $md-text-field-include-icon, $include-message: $md-text-field-include-message, $include-password: $md-text-field-include-password, $include-inline-indicator: $md-text-field-include-inline-indicator, $include-dense-icons: $md-font-icon-include-dense, $custom-sizes: $md-text-field-custom-sizes) {}
Sass (Scss)
Click to expand

Description

Creates the styles for text fields on desktop screens. The floating labels, blocks, icons, or password styles can be omitted by disabling the defaults or passing false here. This should normally be used within a media query for desktop screens.

Note: If the password is included, icons will automatically be included since they share styles.

Parameters

NameDescriptionTypeDefault value
$include-multiline

Boolean if the multiline styling of text fields should be included.

Boolean
$md-text-field-include-multiline
$include-floating-label

Boolean if the floating label styles should be included.

Boolean
$md-text-field-include-floating-label
$include-block

Boolean if the block styling should be included.

Boolean
$md-text-field-include-block
$include-icon

Boolean if the minimal styling for using icons should be included.

Boolean
$md-text-field-include-icon
$include-message

Boolean if the text field message styling should be included. This is the CSS for the counter and/or help/error text.

Boolean
$md-text-field-include-message
$include-password

Boolean if the styling for password text fields should be included.

Boolean
$md-text-field-include-password
$include-inline-indicator

Boolean if the styling for inline indicators should be included. If the $include-password param is true, this will automatically be included as well.

Boolean
$md-text-field-include-inline-indicator
$include-dense-icons

Boolean if the dense font icon styles should be included for text fields.

Boolean
$md-font-icon-include-dense
$custom-sizes

A map of custom sizes to apply. If you do not want any custom sizes, set the global or this param to null.

Map
$md-text-field-custom-sizes

Examples

Example Usage SCSS

@media #{$md-desktop-media} {
  @include react-md-text-fields-desktop;
}
Sass (Scss)

Requires

Used by

react-md-text-fields-media
@mixin react-md-text-fields-media($include-multiline: $md-text-field-include-multiline, $include-floating-label: $md-text-field-include-floating-label, $include-block: $md-text-field-include-block, $include-icon: $md-text-field-include-icon, $include-message: $md-text-field-include-message, $include-password: $md-text-field-include-password, $include-inline-indicator: $md-text-field-include-inline-indicator, $include-dense-icons: $md-font-icon-include-dense, $custom-sizes: $md-text-field-custom-sizes) {}
Sass (Scss)
Click to expand

Description

Includes the media queries for text fields on mobile devices and desktop screens. The floating labels, blocks, icons, or password styles can be omitted by disabling the defaults or passing false here. This should normally be used within a media query for mobile devices.

Note: If the password is included, icons will automatically be included since they share styles.

Parameters

NameDescriptionTypeDefault value
$include-multiline

Boolean if the multiline styling of text fields should be included.

Boolean
$md-text-field-include-multiline
$include-floating-label

Boolean if the floating label styles should be included.

Boolean
$md-text-field-include-floating-label
$include-block

Boolean if the block styling should be included.

Boolean
$md-text-field-include-block
$include-icon

Boolean if the minimal styling for using icons should be included.

Boolean
$md-text-field-include-icon
$include-message

Boolean if the text field message styling should be included. This is the CSS for the counter and/or help/error text.

Boolean
$md-text-field-include-message
$include-password

Boolean if the styling for password text fields should be included.

Boolean
$md-text-field-include-password
$include-inline-indicator

Boolean if the styling for inline indicators should be included. If the $include-password param is true, this will automatically be included as well.

Boolean
$md-text-field-include-inline-indicator
$include-dense-icons

Boolean if the dense font icon styles should be included for text fields.

Boolean
$md-font-icon-include-dense
$custom-sizes

A map of custom sizes to apply. If you do not want any custom sizes, set the global or this param to null.

Map
$md-text-field-custom-sizes

Examples

Example Usage SCSS

@include react-md-text-fields-media;
Sass (Scss)

Requires

Used by

react-md-text-field-container-mobile
@mixin react-md-text-field-container-mobile($include-block: $md-text-field-include-block) {}
Sass (Scss)
Click to expand

Description

Creates the styles for the text-field-container on mobile devices. This should normally be used within the react-md-text-fields-mobile mixin.

Parameters

NameDescriptionTypeDefault value
$include-block

Boolean if block styling should be included.

Boolean
$md-text-field-include-block

Examples

Example Usage SCSS

@media #{$md-mobile-media} {
  @import react-md-text-field-container-mobile;
}
Sass (Scss)

Used by

react-md-text-field-container-desktop
@mixin react-md-text-field-container-desktop($include-block: $md-text-field-include-block) {}
Sass (Scss)
Click to expand

Description

Creates the styles for the text-field-container on desktop screens. This should normally be used within the react-md-text-fields-desktop mixin.

Parameters

NameDescriptionTypeDefault value
$include-block

Boolean if block styling should be included.

Boolean
$md-text-field-include-block

Examples

Example Usage SCSS

@media #{$md-desktop-media} {
  @import react-md-text-field-container-desktop;
}
Sass (Scss)

Used by

react-md-text-field-container-media
@mixin react-md-text-field-container-media($include-block: $md-text-field-include-block) {}
Sass (Scss)
Click to expand

Description

Includes the media queries for the text-field container.

Parameters

NameDescriptionTypeDefault value
$include-block

Boolean if block styling should be included.

Boolean
$md-text-field-include-block

Examples

Example Usage SCSS

@import react-md-text-field-container-media;
Sass (Scss)

Requires

react-md-text-field-mobile
@mixin react-md-text-field-mobile($include-floating-label: $md-text-field-include-floating-label) {}
Sass (Scss)
Click to expand

Description

Creates the CSS for styling text fields on a mobile device. This should be used within media queries.

Parameters

NameDescriptionTypeDefault value
$include-floating-label

Boolean if the floating label styles should be included.

Boolean
$md-text-field-include-floating-label

Examples

Example Usage SCSS

@media #{$md-mobile-media} {
  @include react-md-text-field-mobile;
}
Sass (Scss)

Requires

Used by

react-md-text-field-desktop
@mixin react-md-text-field-desktop($include-floating-label: $md-text-field-include-floating-label) {}
Sass (Scss)
Click to expand

Description

Creates the CSS for styling text fields on a mobile device. This should be used within media queries.

Parameters

NameDescriptionTypeDefault value
$include-floating-label

Boolean if the floating label styles should be included.

Boolean
$md-text-field-include-floating-label

Examples

Example Usage SCSS

@media #{$md-desktop-media} {
  @include react-md-text-field-desktop;
}
Sass (Scss)

Requires

Used by

react-md-text-field-media
@mixin react-md-text-field-media($include-floating-label: $md-text-field-include-floating-label) {}
Sass (Scss)
Click to expand

Description

Includes the media queries for text fields on mobile and desktop devices. This is really only helpful if you do not use the react-md-text-fields mixin.

Parameters

NameDescriptionTypeDefault value
$include-floating-label

Boolean if the floating label styles should be included.

Boolean
$md-text-field-include-floating-label

Examples

Example Usage SCSS

@include react-md-text-field-media;
Sass (Scss)

Requires

react-md-text-field-floating-label-mobile
@mixin react-md-text-field-floating-label-mobile {}
Sass (Scss)
Click to expand

Description

Creates the styles for the text field floating labels for mobile devices. This should be used within a media query.

Parameters

None

Examples

Example Usage SCSS

@media #{$md-mobile-media} {
  @include react-md-text-field-floating-label-mobile;
}
Sass (Scss)

Requires

Used by

react-md-text-field-floating-label-desktop
@mixin react-md-text-field-floating-label-desktop {}
Sass (Scss)
Click to expand

Description

Creates the styles for the text field floating labels for desktop screens. This should be used within a media query.

Parameters

None

Examples

Example Usage SCSS

@media #{$md-desktop-media} {
  @include react-md-text-field-floating-label-desktop;
}
Sass (Scss)

Requires

Used by

react-md-text-field-floating-label-media
@mixin react-md-text-field-floating-label-media {}
Sass (Scss)
Click to expand

Description

Includes the media queries and styles for the text field floating labels..

Parameters

None

Examples

Example Usage SCSS

@include react-md-text-field-floating-label-media;
Sass (Scss)

Requires

react-md-text-field-divider-mobile
@mixin react-md-text-field-divider-mobile {}
Sass (Scss)
Click to expand

Description

Creates the styles for the text field dividers for mobile devices. This should be used within a media query.

Parameters

None

Examples

Example Usage SCSS

@media #{$md-mobile-media} {
  @include react-md-text-field-divider-mobile;
}
Sass (Scss)

Requires

Used by

react-md-text-field-divider-desktop
@mixin react-md-text-field-divider-desktop {}
Sass (Scss)
Click to expand

Description

Creates the styles for the text field dividers for mobile devices. This should be used within a media query.

Parameters

None

Examples

Example Usage SCSS

@media #{$md-desktop-media} {
  @include react-md-text-field-divider-desktop;
}
Sass (Scss)

Requires

Used by

react-md-text-field-divider-media
@mixin react-md-text-field-divider-media {}
Sass (Scss)
Click to expand

Description

Includes the mobile and desktop media queries for the text field dividers.

Parameters

None

Examples

Example Usage SCSS

@include react-md-text-field-divider-media;
Sass (Scss)

Requires

react-md-text-field-icon-mobile
@mixin react-md-text-field-icon-mobile {}
Sass (Scss)
Click to expand

Description

Creates the styles for text field icons on mobile devices. This should be included within a media query.

Parameters

None

Examples

Example Usage SCSS

@media #{$md-mobile-media} {
  @include react-md-text-field-icon-mobile;
}
Sass (Scss)

Requires

Used by

react-md-text-field-icon-desktop
@mixin react-md-text-field-icon-desktop($include-password: $md-text-field-include-password, $include-dense-icons: $md-font-icon-include-dense) {}
Sass (Scss)
Click to expand

Description

Creates the styles for text field icons on desktop screens. This should be included within a media query.

Parameters

NameDescriptionTypeDefault value
$include-password

Boolean if the password button should be included.

Boolean
$md-text-field-include-password
$include-dense-icons

Boolean if the dense font icon styles should be included for text fields.

Boolean
$md-font-icon-include-dense

Examples

Example Usage SCSS

@media #{$md-desktop-media} {
  @include react-md-text-field-icon-desktop;
}
Sass (Scss)

Requires

Used by

react-md-text-field-icon-media
@mixin react-md-text-field-icon-media($include-dense-icons: $md-font-icon-include-dense) {}
Sass (Scss)
Click to expand

Description

Includes the media queries and styles for the text field icons.

Parameters

NameDescriptionTypeDefault value
$include-dense-icons

Boolean if the dense font icon styles should be included for text fields.

Boolean
$md-font-icon-include-dense

Examples

Example Usage SCSS

@include react-md-text-field-icon-media;
Sass (Scss)

Requires

react-md-text-field-inline-indicator-mobile
@mixin react-md-text-field-inline-indicator-mobile($include-floating-label: $md-text-field-include-floating-label, $include-block: $md-text-field-include-block) {}
Sass (Scss)
Click to expand

Description

Creates the styles for showing inline indicators in text fields on mobile devices. This should be used within a media query.

Parameters

NameDescriptionTypeDefault value
$include-floating-label

Boolean if the floating label styles for inline indicators should be included.

Boolean
$md-text-field-include-floating-label
$include-block

Boolean if the block styles should be included

Boolean
$md-text-field-include-block

Examples

Example Usage SCSS

@media #{$md-mobile-media} {
  @include react-md-text-field-inline-indicator-mobile;
}
Sass (Scss)

Used by

react-md-text-field-inline-indicator-desktop
@mixin react-md-text-field-inline-indicator-desktop($include-floating-label: $md-text-field-include-floating-label, $include-block: $md-text-field-include-block, $include-dense-icons: $md-font-icon-include-dense) {}
Sass (Scss)
Click to expand

Description

Creates the styles for showing inline indicators in text fields on desktop screens. This should be used within a media query.

Parameters

NameDescriptionTypeDefault value
$include-floating-label

Boolean if the floating label styles for inline indicators should be included.

Boolean
$md-text-field-include-floating-label
$include-block

Boolean if the block styles should be included.

Boolean
$md-text-field-include-block
$include-dense-icons

Boolean if the dense icons styles should be included.

Boolean
$md-font-icon-include-dense

Examples

Example Usage SCSS

@media #{$md-desktop-media} {
  @include react-md-text-field-inline-indicator-desktop;
}
Sass (Scss)

Used by

react-md-text-field-inline-indicator-media
@mixin react-md-text-field-inline-indicator-media($include-floating-label: $md-text-field-include-floating-label, $include-block: $md-text-field-include-block) {}
Sass (Scss)
Click to expand

Description

Includes the media queries for showing inline indicators in text fields.

Parameters

NameDescriptionTypeDefault value
$include-floating-label

Boolean if the floating label styles for inline indicators should be included.

Boolean
$md-text-field-include-floating-label
$include-block

Boolean if the block styles should be included

Boolean
$md-text-field-include-block

Examples

Example Usage SCSS

@include react-md-text-field-inline-indicator-media;
Sass (Scss)

Requires

react-md-text-field-custom-size-mobile
@mixin react-md-text-field-custom-size-mobile($name, $list, $include-floating-label: $md-text-field-include-floating-label) {}
Sass (Scss)
Click to expand

Description

Creates the styles for a custom sized text field for mobile devices. This should normally be used within the react-md-text-field-custom-sizes-mobile mixin.

Parameters

NameDescriptionTypeDefault value
$name

The custom size name.

String
$list

A list containing the font size, the transition-time, the mobile y position and the desktop y position.

List
$include-floating-label

Boolean if floating label styles should be included.

Boolean
$md-text-field-include-floating-label

Examples

Example usage SCSS

@media #{$md-mobile-media} {
  @include react-md-text-field-custom-size-mobile('title', (34px, .25s, 46px, 34px));
Sass (Scss)

Used by

See

react-md-text-field-custom-size-desktop
@mixin react-md-text-field-custom-size-desktop($name, $list, $include-floating-label: $md-text-field-include-floating-label) {}
Sass (Scss)
Click to expand

Description

Creates the styles for a custom sized text field for desktop screens. This should normally be used within the react-md-text-field-custom-sizes-desktop mixin.

Parameters

NameDescriptionTypeDefault value
$name

The custom size name.

String
$list

A list containing the font size, the transition-time, the mobile y position and the desktop y position.

List
$include-floating-label

Boolean if floating label styles should be included.

Boolean
$md-text-field-include-floating-label

Examples

Example usage SCSS

@media #{$md-desktop-media} {
  @include react-md-text-field-custom-size-desktop('title', (34px, .25s, 46px, 34px));
Sass (Scss)

Used by

See

react-md-text-field-custom-sizes-mobile
@mixin react-md-text-field-custom-sizes-mobile($custom-sizes: $md-text-field-custom-sizes, $include-floating-label: $md-text-field-include-floating-label) {}
Sass (Scss)
Click to expand

Description

Creates all the styles for all the custom sizes for text fields for mobile devices. This should normally be used in a media query or the react-md-text-fields mixin.

Parameters

NameDescriptionTypeDefault value
$custom-sizes

A map of custom sizes to use

Map
$md-text-field-custom-sizes
$include-floating-label

Boolean if floating label styles should be included.

Boolean
$md-text-field-include-floating-label

Examples

Example Usage SCSS

@media #{$md-mobile-media} {
  @include react-md-text-field-custom-sizes-mobile($md-text-field-custom-sizes);
}
Sass (Scss)

Requires

Used by

See

react-md-text-field-custom-sizes-desktop
@mixin react-md-text-field-custom-sizes-desktop($custom-sizes: $md-text-field-custom-sizes, $include-floating-label: $md-text-field-include-floating-label) {}
Sass (Scss)
Click to expand

Description

Creates all the styles for all the custom sizes for text fields for desktop screens. This should normally be used in a media query or the react-md-text-fields mixin.

Parameters

NameDescriptionTypeDefault value
$custom-sizes

A map of custom sizes to use

Map
$md-text-field-custom-sizes
$include-floating-label

Boolean if floating label styles should be included.

Boolean
$md-text-field-include-floating-label

Examples

Example Usage SCSS

@media #{$md-desktop-media} {
  @include react-md-text-field-custom-sizes-desktop($md-text-field-custom-sizes);
}
Sass (Scss)

Requires

Used by

See

react-md-theme-text-fields
@mixin react-md-theme-text-fields($primary-color, $light-theme: $md-light-theme, $error-color: $md-red-500, $include-multiline: $md-text-field-include-multiline, $include-floating-label: $md-text-field-include-floating-label, $include-block: $md-text-field-include-block, $include-icon: $md-text-field-include-icon, $include-message: $md-text-field-include-message, $include-password: $md-text-field-include-password) {}
Sass (Scss)
Click to expand

Description

Themes all parts of the text fields if they are included.

Parameters

NameDescriptionTypeDefault value
$primary-color

The primary color to theme text fields with.

Color
$light-theme

Boolean if the text fields should be styled for the light or dark theme.

Boolean
$md-light-theme
$error-color

The error color to use with text fields.

Color
$md-red-500
$include-multiline

Boolean if the multiline styling of text fields should be included.

Boolean
$md-text-field-include-multiline
$include-floating-label

Boolean if the floating label styles should be included.

Boolean
$md-text-field-include-floating-label
$include-block

Boolean if the block styling should be included.

Boolean
$md-text-field-include-block
$include-icon

Boolean if the minimal styling for using icons should be included.

Boolean
$md-text-field-include-icon
$include-message

Boolean if the text field message styling should be included. This is the CSS for the counter and/or help/error text.

Boolean
$md-text-field-include-message
$include-password

Boolean if the styling for password text fields should be included.

Boolean
$md-text-field-include-password

Examples

Example Usage SCSS

.my-subtheme {
  @include react-md-theme-text-fields($md-blue-500);
}
Sass (Scss)

Requires

Used by

See

react-md-theme-text-field-divider
@mixin react-md-theme-text-field-divider($primary-color: $md-primary-color, $error-color: $md-error-color) {}
Sass (Scss)
Click to expand

Description

Modifies the styles of the text-field-divider ONLY if:

  • the $primary-color is different than $md-primary-color
  • the $error-color is different than $md-error-color.

In most cases, you should use the react-md-theme-text-fields mixin instead.

Parameters

NameDescriptionTypeDefault value
$primary-color

The primary color to use.

Color
$md-primary-color
$error-color

The error color to use.

Color
$md-error-color

Examples

Example Usage SCSS

.my-subsection-styling {
  @include react-md-theme-text-field-divider($md-light-blue-400, true, $md-orange-500);
}
Sass (Scss)

Requires

Used by

See

react-md-theme-text-field-password
@mixin react-md-theme-text-field-password($light-theme: $md-light-theme) {}
Sass (Scss)
Click to expand

Description

Modifies the styles of the text-field-password ONLY if the value of $light-theme is different than the $md-light-theme. This is only useful if you have a part of your app that is dark-theme while another section is not. In most cases, you should use the react-md-theme-text-fields mixin instead.

Parameters

NameDescriptionTypeDefault value
$light-theme

Boolean if using the light theme.

Boolean
$md-light-theme

Examples

Example Usage SCSS

.my-subsection-styling {
  @include react-md-theme-text-field-password(true);
}
Sass (Scss)

Requires

See

react-md-theme-placeholders
@mixin react-md-theme-placeholders($color) {}
Sass (Scss)
Click to expand

Description

Applies a color to all the browser placeholder pseudo elements.

Parameters

NameDescriptionTypeDefault value
$color

The placeholder color to use

Color

Examples

Basic Usage SCSS

.md-primary.md-toolbar {
  @include md-theme-placeholders($md-dark-theme-help-text-color);
}
Sass (Scss)

Basic Usage CSS Output

.md-primary.md-toolbar {
  :-moz-placeholder {
    color: $color;
  }

  ::-moz-placeholder {
    color: $color;
  }

  :-ms-input-placeholder {
    color: $color;
  }

  ::-webkit-input-placeholder {
    color: $color;
  }
}
Sass (Scss)

Requires

Used by

See