Dropdown List Custom Theming
The following SASS variables will describe their each responsibility and by overriding those variables, can be generate a new dropdown with different experience to match your preferences.
| Variable | Default Value | Description |
|---|---|---|
$dropdown-icon-color | #333 | Icon color used in Dropdown arrow |
$dropdown-search-icon-color | #fff | Icon color of search field |
$dropdown-loading-animation-color | #333 | Icon color of dropdown loading spinner animation |
$delete-color | #d32f2f | Icon color of remove search criteria in Dropdown search field |
$dropdown-selector-background | #fff | Dropdown selector box background color |
$dropdown-selector-border | #ddd | Dropdown selector box border color |
$dropdown-selector-border-radius-value | 0 | Specify the radius of the outer-edge of dropdown selector box |
$dropdown-selector-text-color | #333 | Dropdown selector text color |
$dropdown-selector-selected-background | #f1f5f5 | Background color of the selected value of dropdown color |
$dropdown-selector-selected-color | #333 | Box shadow value of the data table column selector menu |
$dropdown-selector-search-icon-background | #3b78e7 | Background color of the search icon container |
$dropdown-selector-search-icon-border-radius | 0 | Specify the radius of the outer-edge of the search icon container |
$dropdown-selector-search-input-background | #fff | Background color of the search input field |
$dropdown-selector-search-input-border | #ddd | Border color of the search input field |
$dropdown-selector-search-input-border-radius | 0 | Specify the radius of the outer-edge of the search input field |
$dropdown-selector-search-input-text-color | #333 | Text color of the search input field |
$dropdown-option-wrapper-border-radius-value | 0 | Specify the radius of the outer-edge of dropdown option wrapper |
$dropdown-option-wrapper-box-shadow | 2px 2px 10px rgba(0, 0, 0, .2) | Specify the shadow amount and color of the dropdown option wrapper |
$dropdown-option-wrapper-background | #fff | Background color of the dropdown option wrapper |
$dropdown-option-wrapper-border | #ddd | Border color of the dropdown option wrapper |
$dropdown-option-wrapper-text-color | #333 | text color of the dropdown option wrapper |
$dropdown-option-wrapper-divider-border | #ddd | border color of the divider between the search input field and option container |
$dropdown-no-data-message-text-color | #3b78e7 | Text color of the no results available message |
$dropdown-option-container-border-radius-value | 0 | Specify the radius of the outer-edge of dropdown option container |
$dropdown-option-container-wrapper-border | #ddd | Border color of the dropdown option container |
$dropdown-option-container-option-background | #fff | Background color of the searched options in the option container |
$dropdown-option-container-option-text-color | #333 | Text color of the searched options in the option container |
$dropdown-option-container-option-border | transparent | Border color of the searched options in the option container |
$dropdown-option-container-option-hover-background | #ddd | Mouse over background color of the searched options in the option container |
$dropdown-option-container-option-hover-text-color | #333 | Mouse over text color of the searched options in the option container |
$dropdown-option-container-selected-option-background | #3b78e7 | Background color of the selected searched options in the option container |
$dropdown-option-container-selected-option-text-color | #fff | Text color of the selected searched options in the option container |
$dropdown-option-container-selected-option-hover-text-color | #fff | Mouse over text color of the selected searched options in the option container |
$dropdown-option-container-selected-option-hover-background | #333 | Mouse over background color of the selected searched options in the option container |
$dropdown-option-container-group-heading-background | #fff | Background color of the group heading in the option container |
$dropdown-option-container-group-heading-border | #ddd | Background color of the group heading in the option container |
$dropdown-option-container-group-heading-color | #333 | Text color of the group heading in the option container |
$dropdown-option-container-group-heading-hover-background | #ddd | Mouse over background color of the group heading in the option container |
$dropdown-option-container-group-heading-hover-border | #ddd | Mouse over border color of the group heading in the option container |
$dropdown-option-container-group-heading-hover-color | #333 | Mouse over text color of the group heading in the option container |
Suggested Links
ThemesAPI Doc for Dropdown Custom Theming