Customizing Common
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $border-radius | 2px | 2px | |
|
Description
Border radius for all components.
|
|||
| $base-bg | #f6f6f6 | #f6f6f6 | |
|
Description
The background of the components' chrome area.
|
|||
| $base-text | #656565 | #656565 | |
|
Description
The text color of the components' chrome area.
|
|||
| $base-border | rgba( black, .08 ) | rgba( black, .08 ) | |
|
Description
The border color of the components' chrome area.
|
|||
| $base-gradient | $base-bg, darken( $base-bg, 2% ) | $base-bg, darken( $base-bg, 2% ) | |
|
Description
The gradient background of the components' chrome area.
|
|||
| $hovered-bg | #ededed | #ededed | |
|
Description
The background of hovered items.
|
|||
| $hovered-text | $base-text | #656565 | |
|
Description
The text color of hovered items.
|
|||
| $hovered-border | rgba( black, .15 ) | rgba( black, .15 ) | |
|
Description
The border color of hovered items.
|
|||
| $hovered-gradient | $hovered-bg, darken( $hovered-bg, 2% ) | $hovered-bg, darken( $hovered-bg, 2% ) | |
|
Description
The gradient background of hovered items.
|
|||
| $selected-bg | $primary | #ff6358 | |
|
Description
The background of selected items.
|
|||
| $selected-text | contrast-wcag( $selected-bg ) | contrast-wcag( $selected-bg ) | |
|
Description
The text color of selected items.
|
|||
| $selected-border | rgba( black, .1 ) | rgba( black, .1 ) | |
|
Description
The border color of selected items.
|
|||
| $selected-gradient | none | none | |
|
Description
The gradient background of selected items.
|
|||