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.

VariableDefault ValueDescription
$dropdown-icon-color#333Icon color used in Dropdown arrow
$dropdown-search-icon-color#fffIcon color of search field
$dropdown-loading-animation-color#333Icon color of dropdown loading spinner animation
$delete-color#d32f2fIcon color of remove search criteria in Dropdown search field
$dropdown-selector-background#fffDropdown selector box background color
$dropdown-selector-border#dddDropdown selector box border color
$dropdown-selector-border-radius-value0Specify the radius of the outer-edge of dropdown selector box
$dropdown-selector-text-color#333Dropdown selector text color
$dropdown-selector-selected-background#f1f5f5Background color of the selected value of dropdown color
$dropdown-selector-selected-color#333Box shadow value of the data table column selector menu
$dropdown-selector-search-icon-background#3b78e7Background color of the search icon container
$dropdown-selector-search-icon-border-radius0Specify the radius of the outer-edge of the search icon container
$dropdown-selector-search-input-background#fffBackground color of the search input field
$dropdown-selector-search-input-border#dddBorder color of the search input field
$dropdown-selector-search-input-border-radius0Specify the radius of the outer-edge of the search input field
$dropdown-selector-search-input-text-color#333Text color of the search input field
$dropdown-item-wrapper-border-radius-value0Specify the radius of the outer-edge of dropdown item wrapper
$dropdown-item-wrapper-box-shadow2px 2px 10px rgba(0, 0, 0, .2)Specify the shadow amount and color of the dropdown item wrapper
$dropdown-item-wrapper-background#fffBackground color of the dropdown item wrapper
$dropdown-item-wrapper-border#dddBorder color of the dropdown item wrapper
$dropdown-item-wrapper-text-color#333text color of the dropdown item wrapper
$dropdown-item-wrapper-divider-border#dddborder color of the divider between the search input field and item container
$dropdown-no-data-message-text-color#3b78e7Text color of the no results available message
$dropdown-item-container-border-radius-value0Specify the radius of the outer-edge of dropdown item container
$dropdown-item-container-wrapper-border#dddBorder color of the dropdown item container
$dropdown-item-container-item-background#fffBackground color of the searched items in the item container
$dropdown-item-container-item-text-color#333Text color of the searched items in the item container
$dropdown-item-container-item-bordertransparentBorder color of the searched items in the item container
$dropdown-item-container-item-hover-background#dddMouse over background color of the searched items in the item container
$dropdown-item-container-item-hover-text-color#333Mouse over text color of the searched items in the item container
$dropdown-item-container-selected-item-background#3b78e7Background color of the selected searched items in the item container
$dropdown-item-container-selected-item-text-color#fffText color of the selected searched items in the item container
$dropdown-item-container-selected-item-hover-text-color#fffMouse over text color of the selected searched items in the item container
$dropdown-item-container-selected-item-hover-background#333Mouse over background color of the selected searched items in the item container
$dropdown-item-container-group-heading-background#fffBackground color of the group heading in the item container
$dropdown-item-container-group-heading-border#dddBackground color of the group heading in the item container
$dropdown-item-container-group-heading-color#333Text color of the group heading in the item container
$dropdown-item-container-group-heading-hover-background#dddMouse over background color of the group heading in the item container
$dropdown-item-container-group-heading-hover-border#dddMouse over border color of the group heading in the item container
$dropdown-item-container-group-heading-hover-color#333Mouse over text color of the group heading in the item container
Themes
API Doc for Dropdown Custom Theming
  • Content