Skip to content

Commit

Permalink
Merge branch 'develop' into toolbar-adaptive
Browse files Browse the repository at this point in the history
  • Loading branch information
TeyaVes authored Dec 20, 2024
2 parents 071369f + 45fc20c commit cbeec80
Show file tree
Hide file tree
Showing 128 changed files with 7,804 additions and 107 deletions.
6 changes: 3 additions & 3 deletions packages/bootstrap/docs/customization-button.md
Original file line number Diff line number Diff line change
Expand Up @@ -220,8 +220,8 @@ The following table lists the available variables for customization.
<tr>
<td>$kendo-button-calc-size</td>
<td>Calculation</td>
<td><code>calc( calc( #{$kendo-button-line-height} * 1em ) + calc( #{$kendo-button-padding-y} * 2 ) + #{$kendo-button-border-width * 2} )</code></td>
<td><code>calc(1.5 * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 2px)</code></td>
<td><code>calc( ( #{$kendo-button-line-height} * 1em ) + ( #{$kendo-button-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) )</code></td>
<td><code>calc(1.5 * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 1px * 2)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The calculated height of the Button.</div></div>
Expand All @@ -230,7 +230,7 @@ The following table lists the available variables for customization.
<tr>
<td>$kendo-button-inner-calc-size</td>
<td>Calculation</td>
<td><code>calc( calc( #{$kendo-button-line-height} * 1em ) + calc( #{$kendo-button-padding-y} * 2 ) )</code></td>
<td><code>calc( ( #{$kendo-button-line-height} * 1em ) + ( #{$kendo-button-padding-y} * 2 ) )</code></td>
<td><code>calc(1.5 * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2)</code></td>
</tr>
<tr>
Expand Down
4 changes: 2 additions & 2 deletions packages/bootstrap/docs/customization-floating-label.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ The following table lists the available variables for customization.
<td>$kendo-floating-label-offset-x</td>
<td>Calculation</td>
<td><code>calc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} )</code></td>
<td><code>calc(var(--kendo-spacing-3, 0.75rem) + var(--kendo-spacing-1px, 1px))</code></td>
<td><code>calc(var(--kendo-spacing-3, 0.75rem) + 1px)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal offset of the Floating Label.</div></div>
Expand All @@ -91,7 +91,7 @@ The following table lists the available variables for customization.
<td>$kendo-floating-label-offset-y</td>
<td>Calculation</td>
<td><code>calc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-padding-y} )</code></td>
<td><code>calc(calc(1.5 * var(--kendo-font-size, inherit)) + var(--kendo-spacing-1px, 1px) + var(--kendo-spacing-1\.5, 0.375rem))</code></td>
<td><code>calc(calc(1.5 * var(--kendo-font-size, inherit)) + 1px + var(--kendo-spacing-1\.5, 0.375rem))</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical offset of the Floating Label.</div></div>
Expand Down
2 changes: 1 addition & 1 deletion packages/bootstrap/docs/customization-form.md
Original file line number Diff line number Diff line change
Expand Up @@ -361,7 +361,7 @@ The following table lists the available variables for customization.
<td>$kendo-inline-form-field-padding-y</td>
<td>Calculation</td>
<td><code>calc( #{k-spacing(2)} + #{$kendo-input-border-width} )</code></td>
<td><code>calc(var(--kendo-spacing-2, 0.5rem) + var(--kendo-spacing-1px, 1px))</code></td>
<td><code>calc(var(--kendo-spacing-2, 0.5rem) + 1px)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the inline Form field.</div></div>
Expand Down
16 changes: 13 additions & 3 deletions packages/bootstrap/docs/customization-input.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,9 @@ The following table lists the available variables for customization.
</tr>
<tr>
<td>$kendo-input-border-width</td>
<td>String</td>
<td><code>k-spacing(1px)</code></td>
<td><code>var(--kendo-spacing-1px, 1px)</code></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 Input components.</div></div>
Expand Down Expand Up @@ -227,6 +227,16 @@ The following table lists the available variables for customization.
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line height of the large Input components.</div></div>
</td>
</tr>
<tr>
<td>$kendo-input-calc-size</td>
<td>Calculation</td>
<td><code>calc( ( #{$kendo-input-line-height} * 1em ) + ( #{$kendo-input-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) )</code></td>
<td><code>calc(1.5 * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + (2px))</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The calculated height of the Input.</div></div>
</td>
</tr>
<tr>
<td>$kendo-input-sizes</td>
<td>Map</td>
Expand Down
158 changes: 158 additions & 0 deletions packages/bootstrap/docs/customization-one-time-password.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
---
title: Customizing OneTimePassword
description: "Refer to the list of the Kendo UI Bootstrap theme variables available for customization."
slug: variables_kendothemebootstrap_one-time-password
position: 9
---

# Customizing OneTimePassword

## 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-otp-gap</td>
<td>String</td>
<td><code>k-spacing(1.5)</code></td>
<td><code>var(--kendo-spacing-1\.5, 0.375rem)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The gap between the items in the OTP.</div></div>
</td>
</tr>
<tr>
<td>$kendo-otp-sm-gap</td>
<td>String</td>
<td><code>k-spacing(1)</code></td>
<td><code>var(--kendo-spacing-1, 0.25rem)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The gap between the items in the small OTP.</div></div>
</td>
</tr>
<tr>
<td>$kendo-otp-md-gap</td>
<td>String</td>
<td><code>$kendo-otp-gap</code></td>
<td><code>var(--kendo-spacing-1\.5, 0.375rem)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The gap between the items in the medium OTP.</div></div>
</td>
</tr>
<tr>
<td>$kendo-otp-lg-gap</td>
<td>String</td>
<td><code>k-spacing(2)</code></td>
<td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The gap between the items in the large OTP.</div></div>
</td>
</tr>
<tr>
<td>$kendo-otp-separator-padding-x</td>
<td>String</td>
<td><code>$kendo-otp-gap</code></td>
<td><code>var(--kendo-spacing-1\.5, 0.375rem)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the OTP separator.</div></div>
</td>
</tr>
<tr>
<td>$kendo-otp-sm-separator-padding-x</td>
<td>String</td>
<td><code>$kendo-otp-sm-gap</code></td>
<td><code>var(--kendo-spacing-1, 0.25rem)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small OTP separator.</div></div>
</td>
</tr>
<tr>
<td>$kendo-otp-md-separator-padding-x</td>
<td>String</td>
<td><code>$kendo-otp-separator-padding-x</code></td>
<td><code>var(--kendo-spacing-1\.5, 0.375rem)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium OTP separator.</div></div>
</td>
</tr>
<tr>
<td>$kendo-otp-lg-separator-padding-x</td>
<td>String</td>
<td><code>$kendo-otp-lg-gap</code></td>
<td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large OTP separator.</div></div>
</td>
</tr>
<tr>
<td>$kendo-otp-input-width</td>
<td>Calculation</td>
<td><code>$kendo-input-calc-size</code></td>
<td><code>calc(1.5 * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + (2px))</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the OTP separator.</div></div>
</td>
</tr>
<tr>
<td>$kendo-otp-sm-input-width</td>
<td>Calculation</td>
<td><code>$kendo-input-sm-calc-size</code></td>
<td><code>calc(1.4285714286 * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + (2px))</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small OTP separator.</div></div>
</td>
</tr>
<tr>
<td>$kendo-otp-md-input-width</td>
<td>Calculation</td>
<td><code>$kendo-otp-input-width</code></td>
<td><code>calc(1.5 * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + (2px))</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium OTP separator.</div></div>
</td>
</tr>
<tr>
<td>$kendo-otp-lg-input-width</td>
<td>Calculation</td>
<td><code>$kendo-input-lg-calc-size</code></td>
<td><code>calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + (2px))</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large OTP separator.</div></div>
</td>
</tr>
</tbody>
</table>

## Suggested Links

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

8 changes: 4 additions & 4 deletions packages/bootstrap/docs/customization-pager.md
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ The following table lists the available variables for customization.
<td>$kendo-pager-sm-item-min-width</td>
<td>Calculation</td>
<td><code>$kendo-button-sm-calc-size</code></td>
<td><code>calc(1.4285714286 * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px)</code></td>
<td><code>calc(1.4285714286 * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the items in the small Pager.</div></div>
Expand All @@ -121,7 +121,7 @@ The following table lists the available variables for customization.
<td>$kendo-pager-md-item-min-width</td>
<td>Calculation</td>
<td><code>$kendo-button-md-calc-size</code></td>
<td><code>calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 2px)</code></td>
<td><code>calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 1px * 2)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the items in the medium Pagers.</div></div>
Expand All @@ -131,7 +131,7 @@ The following table lists the available variables for customization.
<td>$kendo-pager-lg-item-min-width</td>
<td>Calculation</td>
<td><code>$kendo-button-lg-calc-size</code></td>
<td><code>calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px)</code></td>
<td><code>calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 1px * 2)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the items in the large Pagers.</div></div>
Expand Down Expand Up @@ -493,7 +493,7 @@ The following table lists the available variables for customization.
pager-dropdown-width: $kendo-pager-lg-dropdown-width
)
)</code></td>
<td><ul><li>sm: "padding-x":"var(--kendo-spacing-1, 0.25rem)","padding-y":"var(--kendo-spacing-1, 0.25rem)","item-group-spacing":"var(--kendo-spacing-3\\.5, 0.875rem)","item-min-width":"calc(1.4285714286 * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px)","pager-dropdown-width":"5em"</li><li>md: "padding-x":"var(--kendo-spacing-2, 0.5rem)","padding-y":"var(--kendo-spacing-2, 0.5rem)","item-group-spacing":"var(--kendo-spacing-4, 1rem)","item-min-width":"calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\\.5, 0.375rem) * 2 + 2px)","pager-dropdown-width":"5em"</li><li>lg: "padding-x":"var(--kendo-spacing-2\\.5, 0.625rem)","padding-y":"var(--kendo-spacing-2\\.5, 0.625rem)","item-group-spacing":"var(--kendo-spacing-4\\.5, 1.125rem)","item-min-width":"calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px)","pager-dropdown-width":"6em"</li></ul></td>
<td><ul><li>sm: "padding-x":"var(--kendo-spacing-1, 0.25rem)","padding-y":"var(--kendo-spacing-1, 0.25rem)","item-group-spacing":"var(--kendo-spacing-3\\.5, 0.875rem)","item-min-width":"calc(1.4285714286 * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2)","pager-dropdown-width":"5em"</li><li>md: "padding-x":"var(--kendo-spacing-2, 0.5rem)","padding-y":"var(--kendo-spacing-2, 0.5rem)","item-group-spacing":"var(--kendo-spacing-4, 1rem)","item-min-width":"calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\\.5, 0.375rem) * 2 + 1px * 2)","pager-dropdown-width":"5em"</li><li>lg: "padding-x":"var(--kendo-spacing-2\\.5, 0.625rem)","padding-y":"var(--kendo-spacing-2\\.5, 0.625rem)","item-group-spacing":"var(--kendo-spacing-4\\.5, 1.125rem)","item-min-width":"calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 1px * 2)","pager-dropdown-width":"6em"</li></ul></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The sizes map of the Pager.</div></div>
Expand Down
Loading

0 comments on commit cbeec80

Please sign in to comment.