Select Sass API

Variables

select-disable-everything

$select-disable-everything: text-field.$disable-everything !default;

Set to true to disable the Select styles.

select-disable-option

$select-disable-option: $disable-everything !default;

Set to true to disable the Option styles.

Used By

• @mixin select-styles

select-disable-native-select

$select-disable-native-select: base.$form-disable-everything !default;

Set to true to disable the NativeSelect styles.

select-disable-native-select-multiple

$select-disable-native-select-multiple: base.$form-disable-everything !default;

Set to true to disable the multiselect styles for the NativeSelect.

Used By

• @mixin select-native-select-styles

select-native-select-addon-top

$select-native-select-addon-top: 1rem !default;

The addon position within a NativeSelect.

Used By

• @mixin select-native-select-styles

select-native-select-multiple-padding

$select-native-select-multiple-padding: 0.75rem !default;

The padding to apply to a multiselect NativeSelect.

Used By

• @mixin select-native-select-styles

select-native-select-multiple-underline-padding

$select-native-select-multiple-underline-padding: 1.5rem !default;

The padding to apply to a multiselect NativeSelect when the theme="underline".

Used By

• @mixin select-native-select-styles

select-option-selected-icon-size

$select-option-selected-icon-size: 1rem !default;

The default icon size for a selected Option.

Used By

• @mixin select-option-styles

select-option-selected-styles

$select-option-selected-styles: (
  --rmd-icon-color: currentcolor,
  --rmd-mark-color: currentcolor,
  background-color: colors.$blue-900,
  color: colors.$white,
) !default;

The default Option styles while selected.

Used By

• @mixin select-option-styles

select-option-padding-left

$select-option-padding-left: calc(
  list.$item-horizontal-padding -
    #{math.div(icon.$size - $option-selected-icon-size, 2)}
) !default;

The padding-left to apply to an Option when the disableSelectedIcon prop has not been enabled.

Used By

• @mixin select-option-styles

select-option-selected-icon-spacing

$select-option-selected-icon-spacing: $option-padding-left !default;

The spacing between the selected icon and the Option content.

Used By

• @mixin select-option-styles

Mixins

select-option-styles

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

Generates all the styles based on feature flags.

Used By

• @mixin select-styles

Requires

• $select-option-padding-left
• $select-option-selected-styles
• $select-option-selected-icon-spacing
• $select-option-selected-icon-size

select-native-select-styles

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

Generates all the styles based on feature flags.

Used By

• @mixin select-styles

Requires

• $select-disable-native-select-multiple
• $select-native-select-addon-top
• $select-native-select-multiple-padding
• $form-disable-filled-theme
• $form-disable-underlined-theme
• $select-native-select-multiple-underline-padding

select-select-styles

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

Generates all the styles based on feature flags.

Used By

• @mixin select-styles

Requires

• $form-disable-underlined-theme
• $form-disable-outlined-theme
• $form-disable-filled-theme

select-styles

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

Generates all the styles based on feature flags.

Requires

• @mixin select-select-styles
• @mixin select-option-styles
• @mixin select-native-select-styles
• $app-bar-disable-everything
• $select-disable-option
• $label-disable-native-select