Select Sass API

Variables

select-disable-everything

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

select-disable-option

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

Used By

• @mixin select-styles

select-disable-native-select

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

select-disable-native-select-multiple

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

Used By

• @mixin select-native-select-styles

select-native-select-addon-top

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

Used By

• @mixin select-native-select-styles

select-native-select-multiple-padding

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

Used By

• @mixin select-native-select-styles

select-native-select-multiple-underline-padding

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

Used By

• @mixin select-native-select-styles

select-option-selected-icon-size

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

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;

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;

Used By

• @mixin select-option-styles

select-option-selected-icon-spacing

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

Used By

• @mixin select-option-styles

Mixins

select-option-styles

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

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) { … }

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) { … }

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) { … }

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

Set to true to disable the Select styles.

Set to true to disable the Option styles.

Set to true to disable the NativeSelect styles.

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

The addon position within a NativeSelect.

The padding to apply to a multiselect NativeSelect.

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

The default icon size for a selected Option.

The default Option styles while selected.

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

The spacing between the selected icon and the Option content.

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