chore: update docs

telerik · Dec 16, 2024 · a84b32e · a84b32e
1 parent 6b0dbea
commit a84b32e
Show file tree

Hide file tree

Showing 10 changed files with 328 additions and 16 deletions.
diff --git a/packages/bootstrap/docs/customization-toolbar.md b/packages/bootstrap/docs/customization-toolbar.md
@@ -247,6 +247,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 box shadow of the Toolbar.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-toolbar-scroll-overlay</td>
+    <td>List</td>
+    <td><code>$kendo-toolbar-bg, if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0))</code></td>
+    <td><code>(var(--kendo-color-surface, #f8f9fa), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent))</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The left and right scroll overlay of the Toolbar.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-toolbar-outline-text</td>
     <td>String</td>
@@ -297,6 +307,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 width of the border around the outline Toolbar.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-toolbar-outline-scroll-overlay</td>
+    <td>List</td>
+    <td><code>if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0))</code></td>
+    <td><code>(var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent))</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The left and right scroll overlay of the outline Toolbar.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-toolbar-flat-text</td>
     <td>Null</td>
@@ -347,6 +367,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">Border width of the flat Toolbar.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-toolbar-flat-scroll-overlay</td>
+    <td>List</td>
+    <td><code>if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0))</code></td>
+    <td><code>(var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent))</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The left and right scroll overlay of the flat Toolbar.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-toolbar-separator-border</td>
     <td>String</td>

diff --git a/packages/bootstrap/docs/customization.md b/packages/bootstrap/docs/customization.md
@@ -27931,6 +27931,16 @@ The following table lists the available variables for customizing the Bootstrap
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The box shadow of the Toolbar.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-toolbar-scroll-overlay</td>
+    <td>List</td>
+    <td><code>$kendo-toolbar-bg, if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0))</code></td>
+    <td><code>(var(--kendo-color-surface, #f8f9fa), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent))</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The left and right scroll overlay of the Toolbar.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-toolbar-outline-text</td>
     <td>String</td>
@@ -27981,6 +27991,16 @@ The following table lists the available variables for customizing the Bootstrap
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the border around the outline Toolbar.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-toolbar-outline-scroll-overlay</td>
+    <td>List</td>
+    <td><code>if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0))</code></td>
+    <td><code>(var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent))</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The left and right scroll overlay of the outline Toolbar.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-toolbar-flat-text</td>
     <td>Null</td>
@@ -28031,6 +28051,16 @@ The following table lists the available variables for customizing the Bootstrap
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">Border width of the flat Toolbar.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-toolbar-flat-scroll-overlay</td>
+    <td>List</td>
+    <td><code>if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0))</code></td>
+    <td><code>(var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent))</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The left and right scroll overlay of the flat Toolbar.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-toolbar-separator-border</td>
     <td>String</td>

diff --git a/packages/classic/docs/customization-toolbar.md b/packages/classic/docs/customization-toolbar.md
@@ -247,6 +247,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 box shadow of the Toolbar.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-toolbar-scroll-overlay</td>
+    <td>List</td>
+    <td><code>$kendo-toolbar-bg, if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0))</code></td>
+    <td><code>(var(--kendo-color-surface, #f0f0f0), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent))</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The left and right scroll overlay of the Toolbar.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-toolbar-outline-text</td>
     <td>String</td>
@@ -297,6 +307,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 width of the border around the outline Toolbar.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-toolbar-outline-scroll-overlay</td>
+    <td>List</td>
+    <td><code>if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0))</code></td>
+    <td><code>(var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent))</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The left and right scroll overlay of the outline Toolbar.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-toolbar-flat-text</td>
     <td>Null</td>
@@ -347,6 +367,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">Border width of the flat Toolbar.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-toolbar-flat-scroll-overlay</td>
+    <td>List</td>
+    <td><code>if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0))</code></td>
+    <td><code>(var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent))</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The left and right scroll overlay of the flat Toolbar.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-toolbar-separator-border</td>
     <td>String</td>

diff --git a/packages/classic/docs/customization.md b/packages/classic/docs/customization.md
@@ -28312,6 +28312,16 @@ The following table lists the available variables for customizing the Classic th
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The box shadow of the Toolbar.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-toolbar-scroll-overlay</td>
+    <td>List</td>
+    <td><code>$kendo-toolbar-bg, if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0))</code></td>
+    <td><code>(var(--kendo-color-surface, #f0f0f0), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent))</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The left and right scroll overlay of the Toolbar.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-toolbar-outline-text</td>
     <td>String</td>
@@ -28362,6 +28372,16 @@ The following table lists the available variables for customizing the Classic th
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the border around the outline Toolbar.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-toolbar-outline-scroll-overlay</td>
+    <td>List</td>
+    <td><code>if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0))</code></td>
+    <td><code>(var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent))</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The left and right scroll overlay of the outline Toolbar.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-toolbar-flat-text</td>
     <td>Null</td>
@@ -28412,6 +28432,16 @@ The following table lists the available variables for customizing the Classic th
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">Border width of the flat Toolbar.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-toolbar-flat-scroll-overlay</td>
+    <td>List</td>
+    <td><code>if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0))</code></td>
+    <td><code>(var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent))</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The left and right scroll overlay of the flat Toolbar.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-toolbar-separator-border</td>
     <td>String</td>

diff --git a/packages/default/docs/customization-toolbar.md b/packages/default/docs/customization-toolbar.md
@@ -247,6 +247,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 box shadow of the Toolbar.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-toolbar-scroll-overlay</td>
+    <td>List</td>
+    <td><code>$kendo-toolbar-bg, if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0))</code></td>
+    <td><code>(var(--kendo-color-surface, #fafafa), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent))</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The left and right scroll overlay of the Toolbar.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-toolbar-outline-text</td>
     <td>String</td>
@@ -297,6 +307,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 width of the border around the outline Toolbar.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-toolbar-outline-scroll-overlay</td>
+    <td>List</td>
+    <td><code>if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0))</code></td>
+    <td><code>(var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent))</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The left and right scroll overlay of the outline Toolbar.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-toolbar-flat-text</td>
     <td>Null</td>
@@ -347,6 +367,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">Border width of the flat Toolbar.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-toolbar-flat-scroll-overlay</td>
+    <td>List</td>
+    <td><code>if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0))</code></td>
+    <td><code>(var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent))</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The left and right scroll overlay of the flat Toolbar.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-toolbar-separator-border</td>
     <td>String</td>
@@ -424,20 +454,23 @@ The following table lists the available variables for customization.
     sm: (
         padding-x: $kendo-toolbar-sm-padding-x,
         padding-y: $kendo-toolbar-sm-padding-y,
-        spacing: $kendo-toolbar-sm-spacing
+        spacing: $kendo-toolbar-sm-spacing,
+        separator-height: $kendo-button-sm-calc-size
     ),
     md: (
         padding-x: $kendo-toolbar-md-padding-x,
         padding-y: $kendo-toolbar-md-padding-y,
-        spacing: $kendo-toolbar-md-spacing
+        spacing: $kendo-toolbar-md-spacing,
+        separator-height: $kendo-button-md-calc-size
     ),
     lg: (
         padding-x: $kendo-toolbar-lg-padding-x,
         padding-y: $kendo-toolbar-lg-padding-y,
-        spacing: $kendo-toolbar-lg-spacing
+        spacing: $kendo-toolbar-lg-spacing,
+        separator-height: $kendo-button-lg-calc-size
     )
 )</code></td>
-    <td><ul><li>sm: "padding-x":"var(--kendo-spacing-1, 0.25rem)","padding-y":"var(--kendo-spacing-1, 0.25rem)","spacing":"var(--kendo-spacing-1\\.5, 0.375rem)"</li><li>md: "padding-x":"var(--kendo-spacing-2, 0.5rem)","padding-y":"var(--kendo-spacing-2, 0.5rem)","spacing":"var(--kendo-spacing-2, 0.5rem)"</li><li>lg: "padding-x":"var(--kendo-spacing-2\\.5, 0.625rem)","padding-y":"var(--kendo-spacing-2\\.5, 0.625rem)","spacing":"var(--kendo-spacing-2\\.5, 0.625rem)"</li></ul></td>
+    <td><ul><li>sm: "padding-x":"var(--kendo-spacing-1, 0.25rem)","padding-y":"var(--kendo-spacing-1, 0.25rem)","spacing":"var(--kendo-spacing-1\\.5, 0.375rem)","separator-height":"calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-0\\.5, 0.125rem) * 2 + 2px)"</li><li>md: "padding-x":"var(--kendo-spacing-2, 0.5rem)","padding-y":"var(--kendo-spacing-2, 0.5rem)","spacing":"var(--kendo-spacing-2, 0.5rem)","separator-height":"calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px)"</li><li>lg: "padding-x":"var(--kendo-spacing-2\\.5, 0.625rem)","padding-y":"var(--kendo-spacing-2\\.5, 0.625rem)","spacing":"var(--kendo-spacing-2\\.5, 0.625rem)","separator-height":"calc(var(--kendo-line-height-lg, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px)"</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 for the Toolbar.</div></div>