Skip to content

Commit

Permalink
chore: regen docs
Browse files Browse the repository at this point in the history
  • Loading branch information
zhpenkov committed Jan 30, 2024
1 parent e3fba47 commit 2973711
Show file tree
Hide file tree
Showing 15 changed files with 12,105 additions and 4,841 deletions.
388 changes: 388 additions & 0 deletions packages/bootstrap/docs/customization-slider.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,388 @@
---
title: Customizing Slider
description: "Refer to the list of the Kendo UI Bootstrap theme variables available for customization."
slug: variables_kendothemebootstrap_slider
position: 9
---

# Customizing Slider

## Variables

The following table lists the available variables for customization.

<table class="theme-variables">
<colgroup>
<col style="width: 200px; white-space:nowrap;" />
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default value</th>
<th>Computed value</th>
</tr>
</thead>
<tbody>
<tr>
<td>$kendo-slider-size</td>
<td>Number</td>
<td><code>200px</code></td>
<td><code>200px</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The default size of the Slider.</div></div>
</td>
</tr>
<tr>
<td>$kendo-slider-tick-size</td>
<td>Null</td>
<td><code>null</code></td>
<td><code>null</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The default size of the Slider tick.</div></div>
</td>
</tr>
<tr>
<td>$kendo-slider-alt-size</td>
<td>Number</td>
<td><code>30px</code></td>
<td><code>30px</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The default size of the Slider's track wrap.</div></div>
</td>
</tr>
<tr>
<td>$kendo-slider-font-family</td>
<td>List</td>
<td><code>$kendo-font-family</code></td>
<td><code>system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font family of the Slider.</div></div>
</td>
</tr>
<tr>
<td>$kendo-slider-font-size</td>
<td>Number</td>
<td><code>$kendo-font-size-md</code></td>
<td><code>1rem</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the Slider.</div></div>
</td>
</tr>
<tr>
<td>$kendo-slider-line-height</td>
<td>Number</td>
<td><code>$kendo-line-height-md</code></td>
<td><code>1.5</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line height of the Slider.</div></div>
</td>
</tr>
<tr>
<td>$kendo-slider-button-offset</td>
<td>Number</td>
<td><code>10px</code></td>
<td><code>10px</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The offset of the Slider Buttons.</div></div>
</td>
</tr>
<tr>
<td>$kendo-slider-button-size</td>
<td>Number</td>
<td><code>($kendo-slider-alt-size - 2)</code></td>
<td><code>28px</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size of the Slider Buttons.</div></div>
</td>
</tr>
<tr>
<td>$kendo-slider-button-spacing</td>
<td>Number</td>
<td><code>($kendo-slider-button-size + $kendo-slider-button-offset)</code></td>
<td><code>38px</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the Slider Buttons.</div></div>
</td>
</tr>
<tr>
<td>$kendo-slider-button-focus-shadow</td>
<td>List</td>
<td><code>$kendo-button-focus-shadow</code></td>
<td><code>0 0 0 0.25rem rgba(228, 231, 235, 0.5)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The shadow of the focused Slider Buttons.</div></div>
</td>
</tr>
<tr>
<td>$kendo-slider-track-thickness</td>
<td>Number</td>
<td><code>4px</code></td>
<td><code>4px</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The thickness of the Slider track.</div></div>
</td>
</tr>
<tr>
<td>$kendo-slider-draghandle-size</td>
<td>Number</td>
<td><code>14px</code></td>
<td><code>14px</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size of the Slider drag handle.</div></div>
</td>
</tr>
<tr>
<td>$kendo-slider-draghandle-border-width</td>
<td>Number</td>
<td><code>1px</code></td>
<td><code>1px</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border width of the Slider drag handle.</div></div>
</td>
</tr>
<tr>
<td>$kendo-slider-draghandle-active-scale</td>
<td>Number</td>
<td><code>1</code></td>
<td><code>1</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The transition scale of the active Slider drag handle.</div></div>
</td>
</tr>
<tr>
<td>$kendo-slider-draghandle-active-size</td>
<td>Null</td>
<td><code>null</code></td>
<td><code>null</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size of the active Slider drag handle.</div></div>
</td>
</tr>
<tr>
<td>$kendo-slider-draghandle-bg</td>
<td>Color</td>
<td><code>$kendo-color-primary</code></td>
<td><span class="color-preview" style="background-color: #0d6efd"></span><code>#0d6efd</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the Slider drag handle.</div></div>
</td>
</tr>
<tr>
<td>$kendo-slider-draghandle-text</td>
<td>Color</td>
<td><code>if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-color-primary ))</code></td>
<td><span class="color-preview" style="background-color: white"></span><code>white</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the Slider drag handle.</div></div>
</td>
</tr>
<tr>
<td>$kendo-slider-draghandle-border</td>
<td>Color</td>
<td><code>$kendo-color-primary</code></td>
<td><span class="color-preview" style="background-color: #0d6efd"></span><code>#0d6efd</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the Slider drag handle.</div></div>
</td>
</tr>
<tr>
<td>$kendo-slider-draghandle-gradient</td>
<td>Null</td>
<td><code>null</code></td>
<td><code>null</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The gradient of the Slider drag handle.</div></div>
</td>
</tr>
<tr>
<td>$kendo-slider-draghandle-hover-bg</td>
<td>Color</td>
<td><code>if($kendo-enable-color-system, k-color( primary-hover ), k-try-darken( $kendo-color-primary, 7.5% ))</code></td>
<td><span class="color-preview" style="background-color: #025ce2"></span><code>#025ce2</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the hovered Slider drag handle.</div></div>
</td>
</tr>
<tr>
<td>$kendo-slider-draghandle-hover-text</td>
<td>Color</td>
<td><code>if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-color-primary ))</code></td>
<td><span class="color-preview" style="background-color: white"></span><code>white</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the hovered Slider drag handle.</div></div>
</td>
</tr>
<tr>
<td>$kendo-slider-draghandle-hover-border</td>
<td>Color</td>
<td><code>if($kendo-enable-color-system, k-color( primary-hover ), k-try-darken( $kendo-color-primary, 10% ))</code></td>
<td><span class="color-preview" style="background-color: #0257d5"></span><code>#0257d5</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the hovered Slider drag handle.</div></div>
</td>
</tr>
<tr>
<td>$kendo-slider-draghandle-hover-gradient</td>
<td>Null</td>
<td><code>null</code></td>
<td><code>null</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The gradient of the hovered Slider drag handle.</div></div>
</td>
</tr>
<tr>
<td>$kendo-slider-draghandle-pressed-bg</td>
<td>Color</td>
<td><code>if($kendo-enable-color-system, k-color( primary-active ), k-try-darken( $kendo-color-primary, 10% ))</code></td>
<td><span class="color-preview" style="background-color: #0257d5"></span><code>#0257d5</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the active Slider drag handle.</div></div>
</td>
</tr>
<tr>
<td>$kendo-slider-draghandle-pressed-text</td>
<td>Color</td>
<td><code>if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-color-primary ))</code></td>
<td><span class="color-preview" style="background-color: white"></span><code>white</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the active Slider drag handle.</div></div>
</td>
</tr>
<tr>
<td>$kendo-slider-draghandle-pressed-border</td>
<td>Color</td>
<td><code>if($kendo-enable-color-system, k-color( primary-active ), k-try-darken( $kendo-color-primary, 12.5% ))</code></td>
<td><span class="color-preview" style="background-color: #0252c9"></span><code>#0252c9</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the active Slider drag handle.</div></div>
</td>
</tr>
<tr>
<td>$kendo-slider-draghandle-pressed-gradient</td>
<td>Null</td>
<td><code>null</code></td>
<td><code>null</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The gradient of the active Slider drag handle.</div></div>
</td>
</tr>
<tr>
<td>$kendo-slider-draghandle-focus-shadow</td>
<td>List</td>
<td><code>0 0 0 3px if($kendo-enable-color-system, rgba( k-color( primary, true ), .5 ), rgba( $kendo-color-primary, .5 ))</code></td>
<td><code>0 0 0 3px rgba(13, 110, 253, 0.5)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The shadow of the focused Slider drag handle.</div></div>
</td>
</tr>
<tr>
<td>$kendo-slider-transition-speed</td>
<td>Number</td>
<td><code>.3s</code></td>
<td><code>0.3s</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The transition speed of the Slider.</div></div>
</td>
</tr>
<tr>
<td>$kendo-slider-transition-function</td>
<td>String</td>
<td><code>ease-out</code></td>
<td><code>ease-out</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The transition function of the Slider.</div></div>
</td>
</tr>
<tr>
<td>$kendo-slider-draghandle-transition-speed</td>
<td>Number</td>
<td><code>.4s</code></td>
<td><code>0.4s</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The transition speed of the Slider drag handle.</div></div>
</td>
</tr>
<tr>
<td>$kendo-slider-draghandle-transition-function</td>
<td>String</td>
<td><code>cubic-bezier(.25, .8, .25, 1)</code></td>
<td><code>cubic-bezier(0.25, 0.8, 0.25, 1)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The transition function of the Slider drag handle.</div></div>
</td>
</tr>
<tr>
<td>$kendo-slider-track-bg</td>
<td>Color</td>
<td><code>$gray-200</code></td>
<td><span class="color-preview" style="background-color: #e9ecef"></span><code>#e9ecef</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the Slider track.</div></div>
</td>
</tr>
<tr>
<td>$kendo-slider-selection-bg</td>
<td>Color</td>
<td><code>$kendo-selected-bg</code></td>
<td><span class="color-preview" style="background-color: #0d6efd"></span><code>#0d6efd</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the Slider's track selection.</div></div>
</td>
</tr>
<tr>
<td>$kendo-slider-disabled-opacity</td>
<td>Null</td>
<td><code>null</code></td>
<td><code>null</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container">
</td>
</tr>
</tbody>
</table>

## Suggested Links

* [Styling Overview]({% slug themesandstyles %})
* [Web Font Icons]({% slug icons %})
* [Preview of the Themed Components](../)

Loading

0 comments on commit 2973711

Please sign in to comment.