Boolean$autocomplete-disable-everything: false !default;Set to true to disable all the styles
Boolean$autocomplete-disable-clear-button: false !default;Set to true to disable the clear button styles
Boolean$autocomplete-disable-clear-button-display-none-query: false !default;The default behavior for the clear button is to become visible only when:
Set this to true to always show the clear button unless the
disableClearButton was enabled on the Autocomplete.
Boolean$autocomplete-disable-dropdown-button: false !default;Set to true to disable the dropdown button styles
Boolean$autocomplete-disable-circular-progress: false !default;Set to true to disable the circular progress styles
Boolean$autocomplete-disable-text-overflow-ellipsis: false !default;Set to true to disable setting text-overflow: ellipsis on the input
Boolean$autocomplete-disable-inline-chips: chip.$disable-everything !default;Set to true to disable the inline chip styles
Number$autocomplete-inline-min-width: 5rem !default;This is the min width for the input when there are inline chips. This causes the input to wrap to the next line.
Number$autocomplete-inline-chips-gap: icon.get-var(spacing) !default;The amount of spacing between each inline chip
Number$autocomplete-inline-outlined-vertical-padding: calc(
(text-field.get-var(height) - chip.get-var(height)) / 2 -
text-field.$border-width
) !default;The vertical padding to apply to the text field when using inline chips and the outline theme. This is used so that the chips and floating label look nice.
Number$autocomplete-inline-input-leading-padding: chip.get-var(horizontal-padding) !default;The amount of padding to apply to the text field when there is at least one chip visible. The default behavior makes it so the text in the input matches with a chip if they were stacked.
Number$autocomplete-button-size: button.$icon-small-size !default;Updates all the icon button sizes that appear within the autocomplete to use this new size
Number$autocomplete-circular-progress-size: button.$icon-small-size !default;The size of the circular progress and used to generate the correct padding for all the inline addons
Number$autocomplete-addon-gap: text-field.$addon-gap !default;The amount of gap between the circular progress, clear button, and dropdown button (when they exist).
Number$autocomplete-addon-spacing: text-field.get-var(addon-spacing) !default;The spacing between the input and the circular progress/clear button/dropdown button addons.
Number$autocomplete-clear-button-size: calc(button.get-var(icon-font-size) * 2) !default;The size of the clear button and used to generate the correct padding for all the inline addons
Number$autocomplete-dropdown-button-size: calc(button.get-var(icon-font-size) * 2) !default;The size of the dropdown button and used to generate the correct padding for all the inline addons
List$autocomplete-variables: (
clear-button-size,
dropdown-button-size,
circular-progress-size,
inline-gap,
inline-min-width,
addon-gap,
gap-count,
addon-spacing
);The available configurable css variables and mostly used internally for the
get-var, set-var, and use-var utils.
mixin@mixin set-var($name, $value) { … }| Name | Description | Type | Default Value |
|---|---|---|---|
$name | The supported variable name | String | — |
$value | The value to set the variable to. Supports | any | — |
mixin@mixin use-var($property, $name: $property, $fallback: null) { … }mixin@mixin variables { … }Conditionally applies the css variables based on feature flags
mixin@mixin styles($disable-layer: false) { … }Generates all the styles for the Autocomplete components based on feature flags.
| Name | Description | Type | Default Value |
|---|---|---|---|
$disable-layer | Set this to | Boolean | false |
function@function get-var($name, $fallback: null) { … }Stringa var() statement
| Name | Description | Type | Default Value |
|---|---|---|---|
$name | The supported variable name | String | — |
$fallback | An optional fallback value | any | null |