When you add a C1ToolBarDropDownList to the C1ToolBar you can style the C1ToolBarDropDownList and its nested toolbar items using its CSS selectors.
In each type of toolbar item there are additional classes based on the state of the item. These include the following for the C1ToolBarDropDownList element: .c1tbDropDownList-Hover, .c1tbDropDownList-Selected, .c1tbDropDownList-Selected,-Hover, .c1tbListItem-Selected-Hover
The following table describes the different CSS selectors used to style the C1ToolBarDropDownList element.
|
CSS Selector |
Property Value Example |
Description |
|
.C1tbDropDownList-Hover |
{ color: #000; } |
Applies the style to the hover item for the C1ToolBarDropDownList element of the C1ToolBar. |
|
.C1tbDropDownList-Selected-Hover |
{ color: #000; } |
Applies the style to the selected-hover item for the C1ToolBarDropDownList element of the C1ToolBar. |
|
.C1ToolBar_ArcticFox .C1tbDropDownList .C1tbTextNode |
{ color: #000; } |
Applies the style to the text items in the C1ToolBarDropDownList element of the C1ToolBar. |
|
.C1ToolBar_ArcticFox .C1tbDropDownList .C1tbLink |
{ color: #000; } |
Applies the style to the link items in the C1ToolBarDropDownList element of the C1ToolBar. |
|
.C1ToolBar_ArcticFox .C1tbDropDownList-Selected .C1tbNestedList .C1tbTextNode |
{ color: #000; } |
Applies the style to the selected nested text items in the C1ToolBarDropDownList element of the C1ToolBar. |
|
.C1ToolBar_ArcticFox .C1tbDropDownList-Selected .C1tbTextNode |
{ color: #fff; } |
Applies the style to the selected text items in the C1ToolBarDropDownList element of the C1ToolBar. |
|
.C1ToolBar_ArcticFox .C1tbListItem .C1tbDropDown-NestedList .C1tbContainer .C1tbTextNode |
{ background: none; border: none; padding: 3px 0 3px 28px; } |
Applies the style to the nested list text item of the C1ToolBarDropDownList element of the C1Toolbar. |
|
