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 | String |
|
|
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 $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 | List |
|
|
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 | Null |
|
|
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 | Null |
|
|
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 | Null |
|
|
Description The base background of focused button. | |||
$kendo-button-focus-text | Null |
|
|
Description The base text color of focused button. | |||
$kendo-button-focus-border | Null |
|
|
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-button-transition | List |
|
|
Description The color transition of the flat button. |