docs: add suggested links and slug
This commit is contained in:
dmihaylo
Alex Gyoshev
Родитель
f2c39c463d
Коммит
e528d7ed8d
|
|
@ -1,12 +1,13 @@
|
|||
---
|
||||
title: Customization
|
||||
description: "The available variables for customization of the Kendo UI theme."
|
||||
description: "Refer to the list of the Kendo UI Default theme variables available for customization."
|
||||
slug: variables_kendothemedefault_kendouiforangular
|
||||
position: 9
|
||||
---
|
||||
|
||||
# Customization
|
||||
|
||||
Description of the theme variables which are available for adjustment.
|
||||
The following list describes the theme variables available for adjustment in the Kendo UI Default theme for Angular.
|
||||
|
||||
<style>
|
||||
.theme-variables th,
|
||||
|
|
@ -69,3 +70,9 @@ Description of the theme variables which are available for adjustment.
|
|||
{{/if}}
|
||||
|
||||
{{/each}}
|
||||
|
||||
## Suggested Links
|
||||
|
||||
* [Styling Overview]({% slug themesandstyles_kendouiforangular %})
|
||||
* [Web Font Icons]({% slug icons_kendouiforangular %})
|
||||
* [Preview of the Themed Components]({% slug preview_kendothemedefault_kendouiforangular %})
|
||||
|
|
|
|||
|
|
@ -44,46 +44,46 @@ The following list describes the theme variables available for adjustment in the
|
|||
<tr>
|
||||
<td>$font-size</td>
|
||||
<td>
|
||||
|
||||
|
||||
14px
|
||||
</td>
|
||||
<td>Base font size across all components
|
||||
<td>Base font size across all components.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$font-family</td>
|
||||
<td>
|
||||
|
||||
|
||||
inherit
|
||||
</td>
|
||||
<td>Font family across all components
|
||||
<td>Font family across all components.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$font-family-monospace</td>
|
||||
<td>
|
||||
|
||||
|
||||
Consolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace
|
||||
</td>
|
||||
<td>Font family for monospaced text, used for styling code
|
||||
<td>Font family for monospaced text. Used for styling the code.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$line-height</td>
|
||||
<td>
|
||||
|
||||
|
||||
(20 / 14)
|
||||
</td>
|
||||
<td>Line height used along with $font-size
|
||||
<td>Line height used along with $font-size.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$border-radius</td>
|
||||
<td>
|
||||
|
||||
|
||||
2px
|
||||
</td>
|
||||
<td>Border radius for all components
|
||||
<td>Border radius for all components.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -92,8 +92,8 @@ The following list describes the theme variables available for adjustment in the
|
|||
<span class="color-preview" style="background-color: #ff6358"></span>
|
||||
#ff6358
|
||||
</td>
|
||||
<td>Color that focuses the user attention<br/>
|
||||
Used for primary buttons and for elements of primary importance across the theme
|
||||
<td>The color that focuses the user attention.<br/>
|
||||
Used for primary buttons and for elements of primary importance across the theme.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -102,8 +102,8 @@ Used for primary buttons and for elements of primary importance across the theme
|
|||
<span class="color-preview" style="background-color: #ffffff"></span>
|
||||
#ffffff
|
||||
</td>
|
||||
<td>Color used along with the accent color denoted by $accent.<br/>
|
||||
Used to provide contrast between the background and foreground color
|
||||
<td>The color used along with the accent color denoted by $accent.<br/>
|
||||
Used to provide contrast between the background and foreground colors.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -112,7 +112,7 @@ Used to provide contrast between the background and foreground color
|
|||
<span class="color-preview" style="background-color: #656565"></span>
|
||||
#656565
|
||||
</td>
|
||||
<td>Text color of components' chrome area
|
||||
<td>The text color of the components' chrome area.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -121,25 +121,25 @@ Used to provide contrast between the background and foreground color
|
|||
<span class="color-preview" style="background-color: #f6f6f6"></span>
|
||||
#f6f6f6
|
||||
</td>
|
||||
<td>Background of chrome area of components
|
||||
<td>The background of the components' chrome area.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$base-border</td>
|
||||
<td>
|
||||
|
||||
|
||||
rgba( black, .08 )
|
||||
</td>
|
||||
<td>Border color of the components' chrome area
|
||||
<td>The border color of the components' chrome area.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$base-gradient</td>
|
||||
<td>
|
||||
|
||||
|
||||
$base-bg, darken( $base-bg, 2% )
|
||||
</td>
|
||||
<td>Gradient background of components' chrome area
|
||||
<td>The gradient background of the components' chrome area.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -148,7 +148,7 @@ Used to provide contrast between the background and foreground color
|
|||
<span class="color-preview" style="background-color: #656565"></span>
|
||||
#656565
|
||||
</td>
|
||||
<td>Text color of hovered items
|
||||
<td>The text color of hovered items.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -157,61 +157,61 @@ Used to provide contrast between the background and foreground color
|
|||
<span class="color-preview" style="background-color: #ededed"></span>
|
||||
#ededed
|
||||
</td>
|
||||
<td>Background of hovered items
|
||||
<td>The background of hovered items.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$hovered-border</td>
|
||||
<td>
|
||||
|
||||
|
||||
rgba( black, .15 )
|
||||
</td>
|
||||
<td>Border color of hovered items
|
||||
<td>The border color of hovered items.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$hovered-gradient</td>
|
||||
<td>
|
||||
|
||||
|
||||
$hovered-bg, darken( $hovered-bg, 2% )
|
||||
</td>
|
||||
<td>Gradient background of hovered items
|
||||
<td>The gradient background of hovered items.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$selected-text</td>
|
||||
<td>
|
||||
|
||||
|
||||
$accent-contrast
|
||||
</td>
|
||||
<td>Text color of selected items
|
||||
<td>The text color of selected items.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$selected-bg</td>
|
||||
<td>
|
||||
|
||||
|
||||
$accent
|
||||
</td>
|
||||
<td>Background of selected items
|
||||
<td>The background of selected items.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$selected-border</td>
|
||||
<td>
|
||||
|
||||
|
||||
rgba( black, .1 )
|
||||
</td>
|
||||
<td>Border color of selected items
|
||||
<td>The border color of selected items.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$selected-gradient</td>
|
||||
<td>
|
||||
|
||||
|
||||
none
|
||||
</td>
|
||||
<td>Gradient background of selected items
|
||||
<td>The gradient background of selected items.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -220,7 +220,7 @@ Used to provide contrast between the background and foreground color
|
|||
<span class="color-preview" style="background-color: #f5503e"></span>
|
||||
#f5503e
|
||||
</td>
|
||||
<td>Color for error messages and states
|
||||
<td>The color for error messages and states.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -229,7 +229,7 @@ Used to provide contrast between the background and foreground color
|
|||
<span class="color-preview" style="background-color: #fdce3e"></span>
|
||||
#fdce3e
|
||||
</td>
|
||||
<td>Color for warning messages and states
|
||||
<td>The color for warning messages and states.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -238,7 +238,7 @@ Used to provide contrast between the background and foreground color
|
|||
<span class="color-preview" style="background-color: #5ec232"></span>
|
||||
#5ec232
|
||||
</td>
|
||||
<td>Color for success messages and states
|
||||
<td>The color for success messages and states.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -247,7 +247,7 @@ Used to provide contrast between the background and foreground color
|
|||
<span class="color-preview" style="background-color: #3e80ed"></span>
|
||||
#3e80ed
|
||||
</td>
|
||||
<td>Color for informational messages and states
|
||||
<td>The color for informational messages and states.
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -269,118 +269,118 @@ Used to provide contrast between the background and foreground color
|
|||
<tr>
|
||||
<td>$button-text</td>
|
||||
<td>
|
||||
|
||||
|
||||
$base-text
|
||||
</td>
|
||||
<td>The text color of the buttons
|
||||
<td>The text color of the buttons.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$button-bg</td>
|
||||
<td>
|
||||
|
||||
|
||||
$base-bg
|
||||
</td>
|
||||
<td>The background of the buttons
|
||||
<td>The background of the buttons.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$button-border</td>
|
||||
<td>
|
||||
|
||||
|
||||
$base-border
|
||||
</td>
|
||||
<td>The border color of the buttons
|
||||
<td>The border color of the buttons.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$button-gradient</td>
|
||||
<td>
|
||||
|
||||
|
||||
$base-gradient
|
||||
</td>
|
||||
<td>The background gradient of the buttons
|
||||
<td>The background gradient of the buttons.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$button-hovered-text</td>
|
||||
<td>
|
||||
|
||||
|
||||
$hovered-text
|
||||
</td>
|
||||
<td>The text color of hovered buttons
|
||||
<td>The text color of hovered buttons.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$button-hovered-bg</td>
|
||||
<td>
|
||||
|
||||
|
||||
$hovered-bg
|
||||
</td>
|
||||
<td>The background of hovered buttons
|
||||
<td>The background of hovered buttons.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$button-hovered-border</td>
|
||||
<td>
|
||||
|
||||
|
||||
$hovered-border
|
||||
</td>
|
||||
<td>The border color of hovered buttons
|
||||
<td>The border color of hovered buttons.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$button-hovered-gradient</td>
|
||||
<td>
|
||||
|
||||
|
||||
$hovered-gradient
|
||||
</td>
|
||||
<td>The background gradient of hovered buttons
|
||||
<td>The background gradient of hovered buttons.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$button-pressed-text</td>
|
||||
<td>
|
||||
|
||||
|
||||
$selected-text
|
||||
</td>
|
||||
<td>The text color of pressed buttons
|
||||
<td>The text color of pressed buttons.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$button-pressed-bg</td>
|
||||
<td>
|
||||
|
||||
|
||||
$selected-bg
|
||||
</td>
|
||||
<td>The background color of pressed buttons
|
||||
<td>The background color of pressed buttons.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$button-pressed-border</td>
|
||||
<td>
|
||||
|
||||
|
||||
$selected-border
|
||||
</td>
|
||||
<td>The border color of pressed buttons
|
||||
<td>The border color of pressed buttons.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$button-pressed-gradient</td>
|
||||
<td>
|
||||
|
||||
|
||||
none
|
||||
</td>
|
||||
<td>The background gradient of pressed buttons
|
||||
<td>The background gradient of pressed buttons.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$button-focused-shadow</td>
|
||||
<td>
|
||||
|
||||
|
||||
0 3px 4px 0 rgba(0, 0, 0, .06)
|
||||
</td>
|
||||
<td>The shadow of focused buttons
|
||||
<td>The shadow of focused buttons.
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -405,7 +405,7 @@ Used to provide contrast between the background and foreground color
|
|||
<span class="color-preview" style="background-color: #ff6358"></span>
|
||||
#ff6358
|
||||
</td>
|
||||
<td>Color of first series
|
||||
<td>The color of the first series.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -414,7 +414,7 @@ Used to provide contrast between the background and foreground color
|
|||
<span class="color-preview" style="background-color: #ffd246"></span>
|
||||
#ffd246
|
||||
</td>
|
||||
<td>Color of second series
|
||||
<td>The clor of the second series.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -423,7 +423,7 @@ Used to provide contrast between the background and foreground color
|
|||
<span class="color-preview" style="background-color: #78d237"></span>
|
||||
#78d237
|
||||
</td>
|
||||
<td>Color of third series
|
||||
<td>The color of the third series.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -432,7 +432,7 @@ Used to provide contrast between the background and foreground color
|
|||
<span class="color-preview" style="background-color: #28b4c8"></span>
|
||||
#28b4c8
|
||||
</td>
|
||||
<td>Color of fourth series
|
||||
<td>The color of the fourth series.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -441,7 +441,7 @@ Used to provide contrast between the background and foreground color
|
|||
<span class="color-preview" style="background-color: #2d73f5"></span>
|
||||
#2d73f5
|
||||
</td>
|
||||
<td>Color of fifth series
|
||||
<td>The color of the fifth series.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -450,25 +450,25 @@ Used to provide contrast between the background and foreground color
|
|||
<span class="color-preview" style="background-color: #aa46be"></span>
|
||||
#aa46be
|
||||
</td>
|
||||
<td>Color of sixth series
|
||||
<td>The color of the sixth series.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$chart-major-lines</td>
|
||||
<td>
|
||||
|
||||
|
||||
rgba(0, 0, 0, .08)
|
||||
</td>
|
||||
<td>The color of the chart grid lines (major)
|
||||
<td>The color of the Chart grid lines (major).
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$chart-minor-lines</td>
|
||||
<td>
|
||||
|
||||
|
||||
rgba(0, 0, 0, .04)
|
||||
</td>
|
||||
<td>The color of the chart grid lines (minor)
|
||||
<td>The color of the Chart grid lines (minor).
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -490,19 +490,19 @@ Used to provide contrast between the background and foreground color
|
|||
<tr>
|
||||
<td>$toolbar-padding-x</td>
|
||||
<td>
|
||||
|
||||
|
||||
$padding-x
|
||||
</td>
|
||||
<td>Horizontal padding of container
|
||||
<td>The horizontal padding of the container.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$toolbar-padding-y</td>
|
||||
<td>
|
||||
|
||||
|
||||
$padding-x
|
||||
</td>
|
||||
<td>Vertical padding of container
|
||||
<td>The vertical padding of the container.
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -516,3 +516,10 @@ Outputs a module once, no matter how many times it is included.
|
|||
|
||||
#### Parameters
|
||||
- name : `String` - Name of exported module
|
||||
|
||||
|
||||
## Suggested Links
|
||||
|
||||
* [Styling Overview]({% slug themesandstyles_kendouiforangular %})
|
||||
* [Web Font Icons]({% slug icons_kendouiforangular %})
|
||||
* [Preview of the Themed Components]({% slug preview_kendothemedefault_kendouiforangular %})
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче