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-item-wrapper-border-radius-value | 0 | Specify the radius of the outer-edge of dropdown item wrapper |
$dropdown-item-wrapper-box-shadow | 2px 2px 10px rgba(0, 0, 0, .2) | Specify the shadow amount and color of the dropdown item wrapper |
$dropdown-item-wrapper-background | #fff | Background color of the dropdown item wrapper |
$dropdown-item-wrapper-border | #ddd | Border color of the dropdown item wrapper |
$dropdown-item-wrapper-text-color | #333 | text color of the dropdown item wrapper |
$dropdown-item-wrapper-divider-border | #ddd | border color of the divider between the search input field and item container |
$dropdown-no-data-message-text-color | #3b78e7 | Text color of the no results available message |
$dropdown-item-container-border-radius-value | 0 | Specify the radius of the outer-edge of dropdown item container |
$dropdown-item-container-wrapper-border | #ddd | Border color of the dropdown item container |
$dropdown-item-container-item-background | #fff | Background color of the searched items in the item container |
$dropdown-item-container-item-text-color | #333 | Text color of the searched items in the item container |
$dropdown-item-container-item-border | transparent | Border color of the searched items in the item container |
$dropdown-item-container-item-hover-background | #ddd | Mouse over background color of the searched items in the item container |
$dropdown-item-container-item-hover-text-color | #333 | Mouse over text color of the searched items in the item container |
$dropdown-item-container-selected-item-background | #3b78e7 | Background color of the selected searched items in the item container |
$dropdown-item-container-selected-item-text-color | #fff | Text color of the selected searched items in the item container |
$dropdown-item-container-selected-item-hover-text-color | #fff | Mouse over text color of the selected searched items in the item container |
$dropdown-item-container-selected-item-hover-background | #333 | Mouse over background color of the selected searched items in the item container |
$dropdown-item-container-group-heading-background | #fff | Background color of the group heading in the item container |
$dropdown-item-container-group-heading-border | #ddd | Background color of the group heading in the item container |
$dropdown-item-container-group-heading-color | #333 | Text color of the group heading in the item container |
$dropdown-item-container-group-heading-hover-background | #ddd | Mouse over background color of the group heading in the item container |
$dropdown-item-container-group-heading-hover-border | #ddd | Mouse over border color of the group heading in the item container |
$dropdown-item-container-group-heading-hover-color | #333 | Mouse over text color of the group heading in the item container |
Suggested Links
ThemesAPI Doc for Dropdown Custom Theming