Customizing Button
The following table lists the available variables for customization.
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-button-border-width | Number |
|
|
Description
Width of the border around the button. | |||
$kendo-button-border-radius | Null |
|
|
Description
Border radius of the button. | |||
$kendo-button-padding-x | Number |
|
|
Description
Horizontal padding of the button. | |||
$kendo-button-padding-y | Number |
|
|
Description
Vertical padding of the button. | |||
$kendo-button-font-family | List |
|
|
Description
Font family of the button. | |||
$kendo-button-font-size | Number |
|
|
Description
Font sizes of the button. | |||
$kendo-button-line-height | Number |
|
|
Description
Line heights used along with $kendo-font-size. | |||
$kendo-button-calc-size | Calculation |
|
|
Description
Calculated height of the button. | |||
$kendo-button-inner-calc-size | Calculation |
|
|
Description
Calculated inner height of the button. Without the border width. | |||
$kendo-button-theme-colors | Map |
|
|
Description
Theme colors map for the button. | |||
$kendo-button-bg | Color |
|
|
Description
The base background of the button. | |||
$kendo-button-text | Color |
|
|
Description
The base text color of the button. | |||
$kendo-button-border | Color |
|
|
Description
The base border color of the button. | |||
$kendo-button-gradient | Null |
|
|
Description
The base background gradient of the button. | |||
$kendo-button-shadow | Null |
|
|
Description
The base shadow of the button. | |||
$kendo-button-hover-bg | Color |
|
|
Description
The base background of hovered button. | |||
$kendo-button-hover-text | Null |
|
|
Description
The base text color of hovered button. | |||
$kendo-button-hover-border | Color |
|
|
Description
The base border color of hovered button. | |||
$kendo-button-hover-gradient | Null |
|
|
Description
The base background gradient of hovered button. | |||
$kendo-button-hover-shadow | Null |
|
|
Description
The base shadow of hovered button. | |||
$kendo-button-active-bg | Color |
|
|
Description
The base background color of active button. | |||
$kendo-button-active-text | Null |
|
|
Description
The base text color of active button. | |||
$kendo-button-active-border | Color |
|
|
Description
The base border color of active button. | |||
$kendo-button-active-gradient | Null |
|
|
Description
The base background gradient of active button. | |||
$kendo-button-active-shadow | Null |
|
|
Description
The base shadow of active button. | |||
$kendo-button-selected-bg | Color |
|
|
Description
The base background color of selected button. | |||
$kendo-button-selected-text | Color |
|
|
Description
The text color of selected buttons. | |||
$kendo-button-selected-border | Color |
|
|
Description
The border color of selected buttons. | |||
$kendo-button-selected-gradient | Null |
|
|
Description
The background gradient of selected buttons. | |||
$kendo-button-selected-shadow | Null |
|
|
Description
The base shadow of selected button. | |||
$kendo-button-focus-bg | Color |
|
|
Description
The base background of focused button. | |||
$kendo-button-focus-text | Null |
|
|
Description
The base text color of focused button. | |||
$kendo-button-focus-border | Color |
|
|
Description
The base border color of focused button. | |||
$kendo-button-focus-gradient | Null |
|
|
Description
The base background gradient of focused button. | |||
$kendo-button-focus-shadow | List |
|
|
Description
The base shadow of focused button. | |||
$kendo-button-disabled-bg | Null |
|
|
Description
The base background of disabled button. | |||
$kendo-button-disabled-text | Null |
|
|
Description
The base text color of disabled button. | |||
$kendo-button-disabled-border | Null |
|
|
Description
The base border color of disabled buttons. | |||
$kendo-button-disabled-gradient | Null |
|
|
Description
The base background gradient of disabled button. | |||
$kendo-button-disabled-shadow | Null |
|
|
Description
The base shadow of disabled button. | |||
$kendo-flat-button-hover-opacity | Number |
|
|
Description
The overlay opacity of hovered flat button. Used to create background for the flat button. | |||
$kendo-flat-button-focus-opacity | Null |
|
|
Description
The overlay opacity of focused flat button. Used to create background for the flat button. | |||
$kendo-flat-button-active-opacity | Number |
|
|
Description
The overlay opacity of active flat button. Used to create background for the flat button. | |||
$kendo-flat-button-selected-opacity | Number |
|
|
Description
The overlay opacity of selected flat button. Used to create background for the flat button. | |||
$kendo-flat-button-focus-ring-opacity | Number |
|
|
Description
The opacity of the flat button focus ring. Used to create border for the flat button. | |||
$kendo-button-transition | List |
|
|
Description
The color transition of the button. |