diff --git a/packages/bootstrap/docs/customization-button.md b/packages/bootstrap/docs/customization-button.md
index e6e0592193c..fa883075742 100644
--- a/packages/bootstrap/docs/customization-button.md
+++ b/packages/bootstrap/docs/customization-button.md
@@ -639,6 +639,126 @@ The following table lists the available variables for customization.
DescriptionThe color transition of the Button.
|
+
+ $kendo-otp-gap |
+ String |
+ k-spacing(1.5) |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe gap between the items in the OTP.
+ |
+
+
+ $kendo-otp-sm-gap |
+ String |
+ k-spacing(1) |
+ var(--kendo-spacing-1, 0.25rem) |
+
+
+ DescriptionThe gap between the items in the small OTP.
+ |
+
+
+ $kendo-otp-md-gap |
+ String |
+ $kendo-otp-gap |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe gap between the items in the medium OTP.
+ |
+
+
+ $kendo-otp-lg-gap |
+ String |
+ k-spacing(2) |
+ var(--kendo-spacing-2, 0.5rem) |
+
+
+ DescriptionThe gap between the items in the large OTP.
+ |
+
+
+ $kendo-otp-separator-padding-x |
+ String |
+ $kendo-otp-gap |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe horizontal padding of the OTP separator.
+ |
+
+
+ $kendo-otp-separator-sm-padding-x |
+ String |
+ $kendo-otp-sm-gap |
+ var(--kendo-spacing-1, 0.25rem) |
+
+
+ DescriptionThe horizontal padding of the small OTP separator.
+ |
+
+
+ $kendo-otp-separator-md-padding-x |
+ String |
+ $kendo-otp-separator-padding-x |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe horizontal padding of the medium OTP separator.
+ |
+
+
+ $kendo-otp-separator-lg-padding-x |
+ String |
+ $kendo-otp-lg-gap |
+ var(--kendo-spacing-2, 0.5rem) |
+
+
+ DescriptionThe horizontal padding of the large OTP separator.
+ |
+
+
+ $kendo-otp-input-width |
+ Calculation |
+ $kendo-input-calc-size |
+ calc(1.5 * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the OTP separator.
+ |
+
+
+ $kendo-otp-input-sm-width |
+ Calculation |
+ $kendo-input-sm-calc-size |
+ calc(1.4285714286 * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the small OTP separator.
+ |
+
+
+ $kendo-otp-input-md-width |
+ Calculation |
+ $kendo-otp-input-width |
+ calc(1.5 * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the medium OTP separator.
+ |
+
+
+ $kendo-otp-input-lg-width |
+ Calculation |
+ $kendo-input-lg-calc-size |
+ calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the large OTP separator.
+ |
+
diff --git a/packages/bootstrap/docs/customization-floating-label.md b/packages/bootstrap/docs/customization-floating-label.md
index e8b9fbd4f14..38ece9cd4db 100644
--- a/packages/bootstrap/docs/customization-floating-label.md
+++ b/packages/bootstrap/docs/customization-floating-label.md
@@ -81,7 +81,7 @@ The following table lists the available variables for customization.
$kendo-floating-label-offset-x |
Calculation |
calc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} ) |
- calc(var(--kendo-spacing-3, 0.75rem) + var(--kendo-spacing-1px, 1px)) |
+ calc(var(--kendo-spacing-3, 0.75rem) + 1px) |
DescriptionThe horizontal offset of the Floating Label.
@@ -91,7 +91,7 @@ The following table lists the available variables for customization.
| $kendo-floating-label-offset-y |
Calculation |
calc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-padding-y} ) |
- calc(calc(1.5 * var(--kendo-font-size, inherit)) + var(--kendo-spacing-1px, 1px) + var(--kendo-spacing-1\.5, 0.375rem)) |
+ calc(calc(1.5 * var(--kendo-font-size, inherit)) + 1px + var(--kendo-spacing-1\.5, 0.375rem)) |
DescriptionThe vertical offset of the Floating Label.
diff --git a/packages/bootstrap/docs/customization-form.md b/packages/bootstrap/docs/customization-form.md
index 661369c2014..98b2ab74881 100644
--- a/packages/bootstrap/docs/customization-form.md
+++ b/packages/bootstrap/docs/customization-form.md
@@ -361,7 +361,7 @@ The following table lists the available variables for customization.
| $kendo-inline-form-field-padding-y |
Calculation |
calc( #{k-spacing(2)} + #{$kendo-input-border-width} ) |
- calc(var(--kendo-spacing-2, 0.5rem) + var(--kendo-spacing-1px, 1px)) |
+ calc(var(--kendo-spacing-2, 0.5rem) + 1px) |
DescriptionThe vertical padding of the inline Form field.
diff --git a/packages/bootstrap/docs/customization-input.md b/packages/bootstrap/docs/customization-input.md
index 5fe2861c799..93387da3d2b 100644
--- a/packages/bootstrap/docs/customization-input.md
+++ b/packages/bootstrap/docs/customization-input.md
@@ -39,9 +39,9 @@ The following table lists the available variables for customization.
|
$kendo-input-border-width |
- String |
- k-spacing(1px) |
- var(--kendo-spacing-1px, 1px) |
+ Number |
+ 1px |
+ 1px |
DescriptionThe border width of the Input components.
@@ -227,6 +227,16 @@ The following table lists the available variables for customization.
| DescriptionThe line height of the large Input components.
|
+
+ $kendo-input-calc-size |
+ Calculation |
+ calc( calc( #{$kendo-input-line-height} * 1em ) + calc( #{$kendo-input-padding-y} * 2 ) + #{$kendo-input-border-width * 2} ) |
+ calc(1.5 * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 2px) |
+
+
+ DescriptionThe calculated height of the Input.
+ |
+
$kendo-input-sizes |
Map |
diff --git a/packages/bootstrap/docs/customization.md b/packages/bootstrap/docs/customization.md
index dde80a33b8c..868b5fb6ee5 100644
--- a/packages/bootstrap/docs/customization.md
+++ b/packages/bootstrap/docs/customization.md
@@ -2393,6 +2393,126 @@ The following table lists the available variables for customizing the Bootstrap
DescriptionThe color transition of the Button.
|
+
+ $kendo-otp-gap |
+ String |
+ k-spacing(1.5) |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe gap between the items in the OTP.
+ |
+
+
+ $kendo-otp-sm-gap |
+ String |
+ k-spacing(1) |
+ var(--kendo-spacing-1, 0.25rem) |
+
+
+ DescriptionThe gap between the items in the small OTP.
+ |
+
+
+ $kendo-otp-md-gap |
+ String |
+ $kendo-otp-gap |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe gap between the items in the medium OTP.
+ |
+
+
+ $kendo-otp-lg-gap |
+ String |
+ k-spacing(2) |
+ var(--kendo-spacing-2, 0.5rem) |
+
+
+ DescriptionThe gap between the items in the large OTP.
+ |
+
+
+ $kendo-otp-separator-padding-x |
+ String |
+ $kendo-otp-gap |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe horizontal padding of the OTP separator.
+ |
+
+
+ $kendo-otp-separator-sm-padding-x |
+ String |
+ $kendo-otp-sm-gap |
+ var(--kendo-spacing-1, 0.25rem) |
+
+
+ DescriptionThe horizontal padding of the small OTP separator.
+ |
+
+
+ $kendo-otp-separator-md-padding-x |
+ String |
+ $kendo-otp-separator-padding-x |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe horizontal padding of the medium OTP separator.
+ |
+
+
+ $kendo-otp-separator-lg-padding-x |
+ String |
+ $kendo-otp-lg-gap |
+ var(--kendo-spacing-2, 0.5rem) |
+
+
+ DescriptionThe horizontal padding of the large OTP separator.
+ |
+
+
+ $kendo-otp-input-width |
+ Calculation |
+ $kendo-input-calc-size |
+ calc(1.5 * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the OTP separator.
+ |
+
+
+ $kendo-otp-input-sm-width |
+ Calculation |
+ $kendo-input-sm-calc-size |
+ calc(1.4285714286 * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the small OTP separator.
+ |
+
+
+ $kendo-otp-input-md-width |
+ Calculation |
+ $kendo-otp-input-width |
+ calc(1.5 * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the medium OTP separator.
+ |
+
+
+ $kendo-otp-input-lg-width |
+ Calculation |
+ $kendo-input-lg-calc-size |
+ calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the large OTP separator.
+ |
+
@@ -10750,7 +10870,7 @@ The following table lists the available variables for customizing the Bootstrap
$kendo-floating-label-offset-x |
Calculation |
calc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} ) |
- calc(var(--kendo-spacing-3, 0.75rem) + var(--kendo-spacing-1px, 1px)) |
+ calc(var(--kendo-spacing-3, 0.75rem) + 1px) |
DescriptionThe horizontal offset of the Floating Label.
@@ -10760,7 +10880,7 @@ The following table lists the available variables for customizing the Bootstrap
| $kendo-floating-label-offset-y |
Calculation |
calc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-padding-y} ) |
- calc(calc(1.5 * var(--kendo-font-size, inherit)) + var(--kendo-spacing-1px, 1px) + var(--kendo-spacing-1\.5, 0.375rem)) |
+ calc(calc(1.5 * var(--kendo-font-size, inherit)) + 1px + var(--kendo-spacing-1\.5, 0.375rem)) |
DescriptionThe vertical offset of the Floating Label.
@@ -11200,7 +11320,7 @@ The following table lists the available variables for customizing the Bootstrap
| $kendo-inline-form-field-padding-y |
Calculation |
calc( #{k-spacing(2)} + #{$kendo-input-border-width} ) |
- calc(var(--kendo-spacing-2, 0.5rem) + var(--kendo-spacing-1px, 1px)) |
+ calc(var(--kendo-spacing-2, 0.5rem) + 1px) |
DescriptionThe vertical padding of the inline Form field.
@@ -12668,9 +12788,9 @@ The following table lists the available variables for customizing the Bootstrap
|
$kendo-input-border-width |
- String |
- k-spacing(1px) |
- var(--kendo-spacing-1px, 1px) |
+ Number |
+ 1px |
+ 1px |
DescriptionThe border width of the Input components.
@@ -12856,6 +12976,16 @@ The following table lists the available variables for customizing the Bootstrap
| DescriptionThe line height of the large Input components.
|
+
+ $kendo-input-calc-size |
+ Calculation |
+ calc( calc( #{$kendo-input-line-height} * 1em ) + calc( #{$kendo-input-padding-y} * 2 ) + #{$kendo-input-border-width * 2} ) |
+ calc(1.5 * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 2px) |
+
+
+ DescriptionThe calculated height of the Input.
+ |
+
$kendo-input-sizes |
Map |
diff --git a/packages/classic/docs/customization-button.md b/packages/classic/docs/customization-button.md
index 0c0a30c62c4..557899d6f7e 100644
--- a/packages/classic/docs/customization-button.md
+++ b/packages/classic/docs/customization-button.md
@@ -639,6 +639,126 @@ The following table lists the available variables for customization.
DescriptionThe color transition of the flat Button.
|
+
+ $kendo-otp-gap |
+ String |
+ k-spacing(1.5) |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe gap between the items in the OTP.
+ |
+
+
+ $kendo-otp-sm-gap |
+ String |
+ k-spacing(1) |
+ var(--kendo-spacing-1, 0.25rem) |
+
+
+ DescriptionThe gap between the items in the small OTP.
+ |
+
+
+ $kendo-otp-md-gap |
+ String |
+ $kendo-otp-gap |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe gap between the items in the medium OTP.
+ |
+
+
+ $kendo-otp-lg-gap |
+ String |
+ k-spacing(2) |
+ var(--kendo-spacing-2, 0.5rem) |
+
+
+ DescriptionThe gap between the items in the large OTP.
+ |
+
+
+ $kendo-otp-separator-padding-x |
+ String |
+ $kendo-otp-gap |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe horizontal padding of the OTP separator.
+ |
+
+
+ $kendo-otp-separator-sm-padding-x |
+ String |
+ $kendo-otp-sm-gap |
+ var(--kendo-spacing-1, 0.25rem) |
+
+
+ DescriptionThe horizontal padding of the small OTP separator.
+ |
+
+
+ $kendo-otp-separator-md-padding-x |
+ String |
+ $kendo-otp-separator-padding-x |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe horizontal padding of the medium OTP separator.
+ |
+
+
+ $kendo-otp-separator-lg-padding-x |
+ String |
+ $kendo-otp-lg-gap |
+ var(--kendo-spacing-2, 0.5rem) |
+
+
+ DescriptionThe horizontal padding of the large OTP separator.
+ |
+
+
+ $kendo-otp-input-width |
+ Calculation |
+ $kendo-input-calc-size |
+ calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the OTP separator.
+ |
+
+
+ $kendo-otp-input-sm-width |
+ Calculation |
+ $kendo-input-sm-calc-size |
+ calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the small OTP separator.
+ |
+
+
+ $kendo-otp-input-md-width |
+ Calculation |
+ $kendo-otp-input-width |
+ calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the medium OTP separator.
+ |
+
+
+ $kendo-otp-input-lg-width |
+ Calculation |
+ $kendo-input-lg-calc-size |
+ calc(var(--kendo-line-height-lg, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the large OTP separator.
+ |
+
diff --git a/packages/classic/docs/customization-input.md b/packages/classic/docs/customization-input.md
index 0a665891e5c..8228a09b599 100644
--- a/packages/classic/docs/customization-input.md
+++ b/packages/classic/docs/customization-input.md
@@ -227,6 +227,16 @@ The following table lists the available variables for customization.
DescriptionThe line height of the large Input components.
|
+
+ $kendo-input-calc-size |
+ Calculation |
+ calc( calc( #{$kendo-input-line-height} * 1em ) + calc( #{$kendo-input-padding-y} * 2 ) + #{$kendo-input-border-width * 2} ) |
+ calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px) |
+
+
+ DescriptionThe calculated height of the Input.
+ |
+
$kendo-input-sizes |
Map |
diff --git a/packages/classic/docs/customization.md b/packages/classic/docs/customization.md
index 38668e5553c..815a1efd4fb 100644
--- a/packages/classic/docs/customization.md
+++ b/packages/classic/docs/customization.md
@@ -2434,6 +2434,126 @@ The following table lists the available variables for customizing the Classic th
DescriptionThe color transition of the flat Button.
|
+
+ $kendo-otp-gap |
+ String |
+ k-spacing(1.5) |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe gap between the items in the OTP.
+ |
+
+
+ $kendo-otp-sm-gap |
+ String |
+ k-spacing(1) |
+ var(--kendo-spacing-1, 0.25rem) |
+
+
+ DescriptionThe gap between the items in the small OTP.
+ |
+
+
+ $kendo-otp-md-gap |
+ String |
+ $kendo-otp-gap |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe gap between the items in the medium OTP.
+ |
+
+
+ $kendo-otp-lg-gap |
+ String |
+ k-spacing(2) |
+ var(--kendo-spacing-2, 0.5rem) |
+
+
+ DescriptionThe gap between the items in the large OTP.
+ |
+
+
+ $kendo-otp-separator-padding-x |
+ String |
+ $kendo-otp-gap |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe horizontal padding of the OTP separator.
+ |
+
+
+ $kendo-otp-separator-sm-padding-x |
+ String |
+ $kendo-otp-sm-gap |
+ var(--kendo-spacing-1, 0.25rem) |
+
+
+ DescriptionThe horizontal padding of the small OTP separator.
+ |
+
+
+ $kendo-otp-separator-md-padding-x |
+ String |
+ $kendo-otp-separator-padding-x |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe horizontal padding of the medium OTP separator.
+ |
+
+
+ $kendo-otp-separator-lg-padding-x |
+ String |
+ $kendo-otp-lg-gap |
+ var(--kendo-spacing-2, 0.5rem) |
+
+
+ DescriptionThe horizontal padding of the large OTP separator.
+ |
+
+
+ $kendo-otp-input-width |
+ Calculation |
+ $kendo-input-calc-size |
+ calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the OTP separator.
+ |
+
+
+ $kendo-otp-input-sm-width |
+ Calculation |
+ $kendo-input-sm-calc-size |
+ calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the small OTP separator.
+ |
+
+
+ $kendo-otp-input-md-width |
+ Calculation |
+ $kendo-otp-input-width |
+ calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the medium OTP separator.
+ |
+
+
+ $kendo-otp-input-lg-width |
+ Calculation |
+ $kendo-input-lg-calc-size |
+ calc(var(--kendo-line-height-lg, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the large OTP separator.
+ |
+
@@ -13127,6 +13247,16 @@ The following table lists the available variables for customizing the Classic th
DescriptionThe line height of the large Input components.
|
+
+ $kendo-input-calc-size |
+ Calculation |
+ calc( calc( #{$kendo-input-line-height} * 1em ) + calc( #{$kendo-input-padding-y} * 2 ) + #{$kendo-input-border-width * 2} ) |
+ calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px) |
+
+
+ DescriptionThe calculated height of the Input.
+ |
+
$kendo-input-sizes |
Map |
diff --git a/packages/default/docs/customization-button.md b/packages/default/docs/customization-button.md
index 90eddb42408..faf916a1ffc 100644
--- a/packages/default/docs/customization-button.md
+++ b/packages/default/docs/customization-button.md
@@ -639,6 +639,126 @@ The following table lists the available variables for customization.
DescriptionThe color transition of the flat Button.
|
+
+ $kendo-otp-gap |
+ String |
+ k-spacing(1.5) |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe gap between the items in the OTP.
+ |
+
+
+ $kendo-otp-sm-gap |
+ String |
+ k-spacing(1) |
+ var(--kendo-spacing-1, 0.25rem) |
+
+
+ DescriptionThe gap between the items in the small OTP.
+ |
+
+
+ $kendo-otp-md-gap |
+ String |
+ $kendo-otp-gap |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe gap between the items in the medium OTP.
+ |
+
+
+ $kendo-otp-lg-gap |
+ String |
+ k-spacing(2) |
+ var(--kendo-spacing-2, 0.5rem) |
+
+
+ DescriptionThe gap between the items in the large OTP.
+ |
+
+
+ $kendo-otp-separator-padding-x |
+ String |
+ $kendo-otp-gap |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe horizontal padding of the OTP separator.
+ |
+
+
+ $kendo-otp-separator-sm-padding-x |
+ String |
+ $kendo-otp-sm-gap |
+ var(--kendo-spacing-1, 0.25rem) |
+
+
+ DescriptionThe horizontal padding of the small OTP separator.
+ |
+
+
+ $kendo-otp-separator-md-padding-x |
+ String |
+ $kendo-otp-separator-padding-x |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe horizontal padding of the medium OTP separator.
+ |
+
+
+ $kendo-otp-separator-lg-padding-x |
+ String |
+ $kendo-otp-lg-gap |
+ var(--kendo-spacing-2, 0.5rem) |
+
+
+ DescriptionThe horizontal padding of the large OTP separator.
+ |
+
+
+ $kendo-otp-input-width |
+ Calculation |
+ $kendo-input-calc-size |
+ calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the OTP separator.
+ |
+
+
+ $kendo-otp-input-sm-width |
+ Calculation |
+ $kendo-input-sm-calc-size |
+ calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the small OTP separator.
+ |
+
+
+ $kendo-otp-input-md-width |
+ Calculation |
+ $kendo-otp-input-width |
+ calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the medium OTP separator.
+ |
+
+
+ $kendo-otp-input-lg-width |
+ Calculation |
+ $kendo-input-lg-calc-size |
+ calc(var(--kendo-line-height-lg, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the large OTP separator.
+ |
+
diff --git a/packages/default/docs/customization-input.md b/packages/default/docs/customization-input.md
index 2dc23427d5d..8746dde5529 100644
--- a/packages/default/docs/customization-input.md
+++ b/packages/default/docs/customization-input.md
@@ -227,6 +227,16 @@ The following table lists the available variables for customization.
DescriptionThe line height of the large Input components.
|
+
+ $kendo-input-calc-size |
+ Calculation |
+ calc( calc( #{$kendo-input-line-height} * 1em ) + calc( #{$kendo-input-padding-y} * 2 ) + #{$kendo-input-border-width * 2} ) |
+ calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px) |
+
+
+ DescriptionThe calculated height of the Input.
+ |
+
$kendo-input-sizes |
Map |
diff --git a/packages/default/docs/customization.md b/packages/default/docs/customization.md
index 2a6e4aa5f7d..68169f3a3d2 100644
--- a/packages/default/docs/customization.md
+++ b/packages/default/docs/customization.md
@@ -2333,6 +2333,126 @@ The following table lists the available variables for customizing the Default th
DescriptionThe color transition of the flat Button.
|
+
+ $kendo-otp-gap |
+ String |
+ k-spacing(1.5) |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe gap between the items in the OTP.
+ |
+
+
+ $kendo-otp-sm-gap |
+ String |
+ k-spacing(1) |
+ var(--kendo-spacing-1, 0.25rem) |
+
+
+ DescriptionThe gap between the items in the small OTP.
+ |
+
+
+ $kendo-otp-md-gap |
+ String |
+ $kendo-otp-gap |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe gap between the items in the medium OTP.
+ |
+
+
+ $kendo-otp-lg-gap |
+ String |
+ k-spacing(2) |
+ var(--kendo-spacing-2, 0.5rem) |
+
+
+ DescriptionThe gap between the items in the large OTP.
+ |
+
+
+ $kendo-otp-separator-padding-x |
+ String |
+ $kendo-otp-gap |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe horizontal padding of the OTP separator.
+ |
+
+
+ $kendo-otp-separator-sm-padding-x |
+ String |
+ $kendo-otp-sm-gap |
+ var(--kendo-spacing-1, 0.25rem) |
+
+
+ DescriptionThe horizontal padding of the small OTP separator.
+ |
+
+
+ $kendo-otp-separator-md-padding-x |
+ String |
+ $kendo-otp-separator-padding-x |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe horizontal padding of the medium OTP separator.
+ |
+
+
+ $kendo-otp-separator-lg-padding-x |
+ String |
+ $kendo-otp-lg-gap |
+ var(--kendo-spacing-2, 0.5rem) |
+
+
+ DescriptionThe horizontal padding of the large OTP separator.
+ |
+
+
+ $kendo-otp-input-width |
+ Calculation |
+ $kendo-input-calc-size |
+ calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the OTP separator.
+ |
+
+
+ $kendo-otp-input-sm-width |
+ Calculation |
+ $kendo-input-sm-calc-size |
+ calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the small OTP separator.
+ |
+
+
+ $kendo-otp-input-md-width |
+ Calculation |
+ $kendo-otp-input-width |
+ calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the medium OTP separator.
+ |
+
+
+ $kendo-otp-input-lg-width |
+ Calculation |
+ $kendo-input-lg-calc-size |
+ calc(var(--kendo-line-height-lg, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the large OTP separator.
+ |
+
@@ -12686,6 +12806,16 @@ The following table lists the available variables for customizing the Default th
DescriptionThe line height of the large Input components.
|
+
+ $kendo-input-calc-size |
+ Calculation |
+ calc( calc( #{$kendo-input-line-height} * 1em ) + calc( #{$kendo-input-padding-y} * 2 ) + #{$kendo-input-border-width * 2} ) |
+ calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px) |
+
+
+ DescriptionThe calculated height of the Input.
+ |
+
$kendo-input-sizes |
Map |
diff --git a/packages/fluent/docs/customization-button.md b/packages/fluent/docs/customization-button.md
index b9e668b9aac..7d9dd51fe1f 100644
--- a/packages/fluent/docs/customization-button.md
+++ b/packages/fluent/docs/customization-button.md
@@ -326,6 +326,126 @@ The following table lists the available variables for customization.
DescriptionThe theme colors map for the Button.
|
+
+ $kendo-otp-gap |
+ String |
+ k-spacing(1.5) |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe gap between the items in the OTP.
+ |
+
+
+ $kendo-otp-sm-gap |
+ String |
+ k-spacing(1) |
+ var(--kendo-spacing-1, 0.25rem) |
+
+
+ DescriptionThe gap between the items in the small OTP.
+ |
+
+
+ $kendo-otp-md-gap |
+ String |
+ $kendo-otp-gap |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe gap between the items in the medium OTP.
+ |
+
+
+ $kendo-otp-lg-gap |
+ String |
+ k-spacing(2) |
+ var(--kendo-spacing-2, 0.5rem) |
+
+
+ DescriptionThe gap between the items in the large OTP.
+ |
+
+
+ $kendo-otp-separator-padding-x |
+ String |
+ $kendo-otp-gap |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe horizontal padding of the OTP separator.
+ |
+
+
+ $kendo-otp-separator-sm-padding-x |
+ String |
+ $kendo-otp-sm-gap |
+ var(--kendo-spacing-1, 0.25rem) |
+
+
+ DescriptionThe horizontal padding of the small OTP separator.
+ |
+
+
+ $kendo-otp-separator-md-padding-x |
+ String |
+ $kendo-otp-separator-padding-x |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe horizontal padding of the medium OTP separator.
+ |
+
+
+ $kendo-otp-separator-lg-padding-x |
+ String |
+ $kendo-otp-lg-gap |
+ var(--kendo-spacing-2, 0.5rem) |
+
+
+ DescriptionThe horizontal padding of the large OTP separator.
+ |
+
+
+ $kendo-otp-input-width |
+ Calculation |
+ $kendo-input-calc-size |
+ calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the OTP separator.
+ |
+
+
+ $kendo-otp-input-sm-width |
+ Calculation |
+ $kendo-input-sm-calc-size |
+ calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the small OTP separator.
+ |
+
+
+ $kendo-otp-input-md-width |
+ Calculation |
+ $kendo-otp-input-width |
+ calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the medium OTP separator.
+ |
+
+
+ $kendo-otp-input-lg-width |
+ Calculation |
+ $kendo-input-lg-calc-size |
+ calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the large OTP separator.
+ |
+
diff --git a/packages/fluent/docs/customization-input.md b/packages/fluent/docs/customization-input.md
index c46e5f486dc..e8a99d13d58 100644
--- a/packages/fluent/docs/customization-input.md
+++ b/packages/fluent/docs/customization-input.md
@@ -1157,6 +1157,16 @@ The following table lists the available variables for customization.
DescriptionThe border color of the disabled flat Picker components.
|
+
+ $kendo-input-calc-size |
+ Calculation |
+ calc( calc( #{$kendo-input-md-line-height} * 1em ) + calc( #{$kendo-input-md-padding-y} * 2 ) + #{$kendo-input-border-width * 2} ) |
+ calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 2px) |
+
+
+ DescriptionThe calculated height of the Input.
+ |
+
$kendo-input-sizes |
Map |
diff --git a/packages/fluent/docs/customization.md b/packages/fluent/docs/customization.md
index cb277e67790..6939f83d23a 100644
--- a/packages/fluent/docs/customization.md
+++ b/packages/fluent/docs/customization.md
@@ -2968,6 +2968,126 @@ The following table lists the available variables for customizing the Fluent the
DescriptionThe theme colors map for the Button.
|
+
+ $kendo-otp-gap |
+ String |
+ k-spacing(1.5) |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe gap between the items in the OTP.
+ |
+
+
+ $kendo-otp-sm-gap |
+ String |
+ k-spacing(1) |
+ var(--kendo-spacing-1, 0.25rem) |
+
+
+ DescriptionThe gap between the items in the small OTP.
+ |
+
+
+ $kendo-otp-md-gap |
+ String |
+ $kendo-otp-gap |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe gap between the items in the medium OTP.
+ |
+
+
+ $kendo-otp-lg-gap |
+ String |
+ k-spacing(2) |
+ var(--kendo-spacing-2, 0.5rem) |
+
+
+ DescriptionThe gap between the items in the large OTP.
+ |
+
+
+ $kendo-otp-separator-padding-x |
+ String |
+ $kendo-otp-gap |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe horizontal padding of the OTP separator.
+ |
+
+
+ $kendo-otp-separator-sm-padding-x |
+ String |
+ $kendo-otp-sm-gap |
+ var(--kendo-spacing-1, 0.25rem) |
+
+
+ DescriptionThe horizontal padding of the small OTP separator.
+ |
+
+
+ $kendo-otp-separator-md-padding-x |
+ String |
+ $kendo-otp-separator-padding-x |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe horizontal padding of the medium OTP separator.
+ |
+
+
+ $kendo-otp-separator-lg-padding-x |
+ String |
+ $kendo-otp-lg-gap |
+ var(--kendo-spacing-2, 0.5rem) |
+
+
+ DescriptionThe horizontal padding of the large OTP separator.
+ |
+
+
+ $kendo-otp-input-width |
+ Calculation |
+ $kendo-input-calc-size |
+ calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the OTP separator.
+ |
+
+
+ $kendo-otp-input-sm-width |
+ Calculation |
+ $kendo-input-sm-calc-size |
+ calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the small OTP separator.
+ |
+
+
+ $kendo-otp-input-md-width |
+ Calculation |
+ $kendo-otp-input-width |
+ calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the medium OTP separator.
+ |
+
+
+ $kendo-otp-input-lg-width |
+ Calculation |
+ $kendo-input-lg-calc-size |
+ calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the large OTP separator.
+ |
+
@@ -17046,6 +17166,16 @@ The following table lists the available variables for customizing the Fluent the
DescriptionThe border color of the disabled flat Picker components.
|
+
+ $kendo-input-calc-size |
+ Calculation |
+ calc( calc( #{$kendo-input-md-line-height} * 1em ) + calc( #{$kendo-input-md-padding-y} * 2 ) + #{$kendo-input-border-width * 2} ) |
+ calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 2px) |
+
+
+ DescriptionThe calculated height of the Input.
+ |
+
$kendo-input-sizes |
Map |
diff --git a/packages/material/docs/customization-button.md b/packages/material/docs/customization-button.md
index 684cbd5fb00..329c7457320 100644
--- a/packages/material/docs/customization-button.md
+++ b/packages/material/docs/customization-button.md
@@ -639,6 +639,126 @@ The following table lists the available variables for customization.
DescriptionThe box-shadow transition of the Button.
|
+
+ $kendo-otp-gap |
+ String |
+ k-spacing(1.5) |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe gap between the items in the OTP.
+ |
+
+
+ $kendo-otp-sm-gap |
+ String |
+ k-spacing(1) |
+ var(--kendo-spacing-1, 0.25rem) |
+
+
+ DescriptionThe gap between the items in the small OTP.
+ |
+
+
+ $kendo-otp-md-gap |
+ String |
+ $kendo-otp-gap |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe gap between the items in the medium OTP.
+ |
+
+
+ $kendo-otp-lg-gap |
+ String |
+ k-spacing(2) |
+ var(--kendo-spacing-2, 0.5rem) |
+
+
+ DescriptionThe gap between the items in the large OTP.
+ |
+
+
+ $kendo-otp-separator-padding-x |
+ String |
+ $kendo-otp-gap |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe horizontal padding of the OTP separator.
+ |
+
+
+ $kendo-otp-separator-sm-padding-x |
+ String |
+ $kendo-otp-sm-gap |
+ var(--kendo-spacing-1, 0.25rem) |
+
+
+ DescriptionThe horizontal padding of the small OTP separator.
+ |
+
+
+ $kendo-otp-separator-md-padding-x |
+ String |
+ $kendo-otp-separator-padding-x |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe horizontal padding of the medium OTP separator.
+ |
+
+
+ $kendo-otp-separator-lg-padding-x |
+ String |
+ $kendo-otp-lg-gap |
+ var(--kendo-spacing-2, 0.5rem) |
+
+
+ DescriptionThe horizontal padding of the large OTP separator.
+ |
+
+
+ $kendo-otp-input-width |
+ Calculation |
+ $kendo-input-calc-size |
+ calc(1.25 * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the OTP separator.
+ |
+
+
+ $kendo-otp-input-sm-width |
+ Calculation |
+ $kendo-input-sm-calc-size |
+ calc(1.25 * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the small OTP separator.
+ |
+
+
+ $kendo-otp-input-md-width |
+ Calculation |
+ $kendo-otp-input-width |
+ calc(1.25 * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the medium OTP separator.
+ |
+
+
+ $kendo-otp-input-lg-width |
+ Calculation |
+ $kendo-input-lg-calc-size |
+ calc(1.5 * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the large OTP separator.
+ |
+
diff --git a/packages/material/docs/customization-input.md b/packages/material/docs/customization-input.md
index 34dda3fb53a..1c65d79eb23 100644
--- a/packages/material/docs/customization-input.md
+++ b/packages/material/docs/customization-input.md
@@ -227,6 +227,16 @@ The following table lists the available variables for customization.
DescriptionThe line height of the large Input components.
|
+
+ $kendo-input-calc-size |
+ Calculation |
+ calc( calc( #{$kendo-input-line-height} * 1em ) + calc( #{$kendo-input-padding-y} * 2 ) + #{$kendo-input-border-width * 2} ) |
+ calc(1.25 * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px) |
+
+
+ DescriptionThe calculated height of the Input.
+ |
+
$kendo-input-sizes |
Map |
diff --git a/packages/material/docs/customization.md b/packages/material/docs/customization.md
index b92fc64a27a..5c89f1856c8 100644
--- a/packages/material/docs/customization.md
+++ b/packages/material/docs/customization.md
@@ -2373,6 +2373,126 @@ The following table lists the available variables for customizing the Material t
DescriptionThe box-shadow transition of the Button.
|
+
+ $kendo-otp-gap |
+ String |
+ k-spacing(1.5) |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe gap between the items in the OTP.
+ |
+
+
+ $kendo-otp-sm-gap |
+ String |
+ k-spacing(1) |
+ var(--kendo-spacing-1, 0.25rem) |
+
+
+ DescriptionThe gap between the items in the small OTP.
+ |
+
+
+ $kendo-otp-md-gap |
+ String |
+ $kendo-otp-gap |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe gap between the items in the medium OTP.
+ |
+
+
+ $kendo-otp-lg-gap |
+ String |
+ k-spacing(2) |
+ var(--kendo-spacing-2, 0.5rem) |
+
+
+ DescriptionThe gap between the items in the large OTP.
+ |
+
+
+ $kendo-otp-separator-padding-x |
+ String |
+ $kendo-otp-gap |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe horizontal padding of the OTP separator.
+ |
+
+
+ $kendo-otp-separator-sm-padding-x |
+ String |
+ $kendo-otp-sm-gap |
+ var(--kendo-spacing-1, 0.25rem) |
+
+
+ DescriptionThe horizontal padding of the small OTP separator.
+ |
+
+
+ $kendo-otp-separator-md-padding-x |
+ String |
+ $kendo-otp-separator-padding-x |
+ var(--kendo-spacing-1\.5, 0.375rem) |
+
+
+ DescriptionThe horizontal padding of the medium OTP separator.
+ |
+
+
+ $kendo-otp-separator-lg-padding-x |
+ String |
+ $kendo-otp-lg-gap |
+ var(--kendo-spacing-2, 0.5rem) |
+
+
+ DescriptionThe horizontal padding of the large OTP separator.
+ |
+
+
+ $kendo-otp-input-width |
+ Calculation |
+ $kendo-input-calc-size |
+ calc(1.25 * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the OTP separator.
+ |
+
+
+ $kendo-otp-input-sm-width |
+ Calculation |
+ $kendo-input-sm-calc-size |
+ calc(1.25 * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the small OTP separator.
+ |
+
+
+ $kendo-otp-input-md-width |
+ Calculation |
+ $kendo-otp-input-width |
+ calc(1.25 * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the medium OTP separator.
+ |
+
+
+ $kendo-otp-input-lg-width |
+ Calculation |
+ $kendo-input-lg-calc-size |
+ calc(1.5 * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px) |
+
+
+ DescriptionThe horizontal padding of the large OTP separator.
+ |
+
@@ -12656,6 +12776,16 @@ The following table lists the available variables for customizing the Material t
DescriptionThe line height of the large Input components.
|
+
+ $kendo-input-calc-size |
+ Calculation |
+ calc( calc( #{$kendo-input-line-height} * 1em ) + calc( #{$kendo-input-padding-y} * 2 ) + #{$kendo-input-border-width * 2} ) |
+ calc(1.25 * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px) |
+
+
+ DescriptionThe calculated height of the Input.
+ |
+
$kendo-input-sizes |
Map |