Customizing Buttons
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $button-bg | $base-bg | map-get( $theme, base-bg ) | |
|
Description
The background of the buttons.
|
|||
| $button-text | $base-text | map-get($theme, component-text) | |
|
Description
The text color of the buttons.
|
|||
| $button-border | $button-bg | map-get( $theme, base-bg ) | |
|
Description
The border color of the buttons.
|
|||
| $button-gradient | null | null | |
|
Description
The background gradient of the buttons.
|
|||
| $button-hovered-bg | true-mix( $button-text, $button-bg, 12%) | true-mix( $button-text, $button-bg, 12%) | |
|
Description
The background of hovered buttons.
|
|||
| $button-hovered-text | null | null | |
|
Description
The text color of hovered buttons.
|
|||
| $button-hovered-border | $button-hovered-bg | true-mix( $button-text, $button-bg, 12%) | |
|
Description
The border color of hovered buttons.
|
|||
| $button-hovered-gradient | null | null | |
|
Description
The background gradient of hovered buttons.
|
|||
| $button-pressed-bg | true-mix( $button-text, $button-bg, 12%) | true-mix( $button-text, $button-bg, 12%) | |
|
Description
The background color of pressed buttons.
|
|||
| $button-pressed-text | null | null | |
|
Description
The text color of pressed buttons.
|
|||
| $button-pressed-border | $button-pressed-bg | true-mix( $button-text, $button-bg, 12%) | |
|
Description
The border color of pressed buttons.
|
|||
| $button-pressed-gradient | null | null | |
|
Description
The background gradient of pressed buttons.
|
|||
| $button-focused-shadow | null | null | |
|
Description
The shadow of focused buttons.
|
|||