@progress/kendo-theme-default 10.1.0-dev.4 → 10.1.0-dev.6

package/scss/toolbar/_layout.scss

@@ -39,6 +39,37 @@
             flex-wrap: nowrap;
         }
 
+        &.k-toolbar-scrollable {
+            flex-wrap: nowrap;
+            position: relative;
+
+            &.k-toolbar-scrollable-overlay {
+                &::before {
+                    content: '';
+                    height: 100%;
+                    aspect-ratio: 1;
+                    position: absolute;
+                    inset-inline-start: 0;
+                    z-index: 3;
+                }
+
+                &::after {
+                    content: '';
+                    height: 100%;
+                    aspect-ratio: 1;
+                    position: absolute;
+                    inset-inline-end: 0;
+                    z-index: 3;
+                }
+
+                &.k-toolbar-scrollable-start::before,
+                &.k-toolbar-scrollable-end::after {
+                    display: none;
+                }
+            }
+
+        }
+
         > * {
             flex-shrink: 0;
             display: inline-flex;
@@ -77,23 +108,22 @@
             width: min-content;
         }
 
+
         // Overflow anchor
         .k-toolbar-overflow-button {
             margin-inline-start: auto;
         }
 
+        // Overflow separator
+        .k-toolbar-button-separator {
+            height: $kendo-toolbar-separator-height;
+            margin-inline-start: auto;
 
-        // Separator
-        .k-separator,
-        .k-toolbar-separator {
-            width: 0;
-            height: $kendo-line-height-em;
-            border-width: 0 0 0 1px;
-            border-style: solid;
-            align-self: center;
+            + .k-toolbar-overflow-button {
+                margin-inline-start: 0;
+            }
         }
 
-
         // Spacer
         .k-toolbar-spacer {
             height: $kendo-line-height-em;
@@ -109,6 +139,45 @@
         }
     }
 
+    // Separator
+    .k-toolbar .k-separator,
+    .k-toolbar-separator {
+        width: 0;
+        height: $kendo-line-height-em;
+        border-width: 0 0 0 1px;
+        border-style: solid;
+        align-self: center;
+    }
+
+    .k-toolbar-items {
+        display: flex;
+        flex-flow: row nowrap;
+        gap: $kendo-toolbar-spacing;
+        align-items: center;
+        justify-content: flex-start;
+        flex: 1 1 auto;
+        overflow: hidden;
+    }
+
+    .k-toolbar-items-scroll {
+        overflow-x: auto;
+        scrollbar-width: none;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
+
+    .k-toolbar-items-list {
+        display: flex;
+        flex-flow: row wrap;
+        gap: $kendo-toolbar-spacing;
+        align-items: center;
+        justify-content: flex-start;
+        flex: 1 1 auto;
+        overflow: hidden;
+    }
+
     // Outline Toolbar
     .k-toolbar-outline {
         border-width: $kendo-toolbar-outline-border-width;
@@ -137,6 +206,7 @@
         $_padding-x: map.get( $size-props, padding-x );
         $_padding-y: map.get( $size-props, padding-y );
         $_spacing: map.get( $size-props, spacing );
+        $_separator-height: map.get( $size-props, separator-height );
 
         .k-toolbar-#{$size} {
             padding-block: $_padding-y;
@@ -148,11 +218,31 @@
                 margin-inline-start: calc( #{$_spacing} * -1 );
             }
 
+            &.k-toolbar-scrollable-overlay::before {
+                inset-inline-start: $_spacing;
+            }
+
             > * > label {
                 margin-inline-end: $_spacing;
             }
+
+            .k-toolbar-items {
+                gap: $_spacing;
+            }
+
+            .k-toolbar-button-separator {
+                height: $_separator-height;
+            }
+
+        }
+
+        .k-toolbar-items-list-#{$size} {
+            padding-block: $_padding-y;
+            padding-inline: $_padding-x;
+            gap: $_spacing;
         }
     }
+
     // Remove once we decide to not size empty containers
     .k-toolbar-sm::before {
         height: $kendo-button-sm-calc-size;

package/scss/toolbar/_theme.scss

@@ -6,13 +6,6 @@
 
     // Theme
     .k-toolbar {
-        // Separator
-        .k-separator,
-        .k-toolbar-separator {
-            border-color: $kendo-toolbar-separator-border;
-        }
-
-
         // Template item
         .k-toolbar-item:focus,
         .k-toolbar-item.k-focus {
@@ -25,6 +18,16 @@
 
     }
 
+    .k-toolbar-items {
+        border-color: inherit;
+    }
+
+    // Separator
+    .k-toolbar .k-separator,
+    .k-toolbar-separator {
+        border-color: $kendo-toolbar-separator-border;
+    }
+
     // Solid Toolbar
     .k-toolbar-solid {
         @include fill(
@@ -34,6 +37,20 @@
             $kendo-toolbar-gradient
         );
         @include box-shadow( $kendo-toolbar-shadow );
+
+        &.k-toolbar-scrollable-overlay {
+            &::before {
+                background: linear-gradient(90deg, $kendo-toolbar-scroll-overlay);
+            }
+
+            &::after {
+                background: linear-gradient(270deg, $kendo-toolbar-scroll-overlay);
+            }
+        }
+    }
+
+    .k-toolbar-items-list-solid {
+        border-color: $kendo-toolbar-border;
     }
 
     // Outline Toolbar
@@ -43,6 +60,20 @@
             $border: $kendo-toolbar-outline-border
         );
         @include box-shadow( $kendo-toolbar-outline-shadow );
+
+        &.k-toolbar-scrollable-overlay {
+            &::before {
+                background: linear-gradient(90deg, $kendo-toolbar-outline-scroll-overlay);
+            }
+
+            &::after {
+                background: linear-gradient(270deg, $kendo-toolbar-outline-scroll-overlay);
+            }
+        }
+    }
+
+    .k-toolbar-items-list-outline {
+        border-color: $kendo-toolbar-outline-border;
     }
 
     // Flat Toolbar
@@ -53,9 +84,25 @@
         );
         @include box-shadow( $kendo-toolbar-flat-shadow );
 
-        > .k-separator {
+
+        > .k-separator,
+        .k-toolbar-separator {
             border-inline-color: $kendo-toolbar-flat-border;
         }
+
+        &.k-toolbar-scrollable-overlay {
+            &::before {
+                background: linear-gradient(90deg, $kendo-toolbar-flat-scroll-overlay);
+            }
+
+            &::after {
+                background: linear-gradient(270deg, $kendo-toolbar-flat-scroll-overlay);
+            }
+        }
+    }
+
+    .k-toolbar-items-list-flat {
+        border-color: $kendo-toolbar-flat-border;
     }
 
     .k-floating-toolbar,
@@ -108,6 +155,40 @@
 
     }
 
+    // RTL
+    .k-rtl,
+    [dir="rtl"] {
+        .k-toolbar-scrollable-overlay {
+            &::before {
+                background: linear-gradient(270deg, $kendo-toolbar-scroll-overlay);
+            }
+
+            &::after {
+                background: linear-gradient(90deg, $kendo-toolbar-scroll-overlay);
+            }
+
+            &.k-toolbar-outline {
+                &::before {
+                    background: linear-gradient(270deg, $kendo-toolbar-outline-scroll-overlay);
+                }
+
+                &::after {
+                    background: linear-gradient(90deg, $kendo-toolbar-outline-scroll-overlay);
+                }
+            }
+
+            &.k-toolbar-flat {
+                &::before {
+                    background: linear-gradient(270deg, $kendo-toolbar-flat-scroll-overlay);
+                }
+
+                &::after {
+                    background: linear-gradient(90deg, $kendo-toolbar-flat-scroll-overlay);
+                }
+            }
+        }
+    }
+
 }
 
 

package/scss/toolbar/_variables.scss

@@ -6,43 +6,56 @@
 
 /// The horizontal padding of the Toolbar.
 /// @group toolbar
-$kendo-toolbar-padding-x: null !default;
+$kendo-toolbar-padding-x: k-spacing(2) !default;
 /// The horizontal padding of the small Toolbar.
 /// @group toolbar
 $kendo-toolbar-sm-padding-x: k-spacing(1) !default;
 /// The horizontal padding of the medium Toolbar.
 /// @group toolbar
-$kendo-toolbar-md-padding-x: k-spacing(2) !default;
+$kendo-toolbar-md-padding-x: $kendo-toolbar-padding-x !default;
 /// The horizontal padding of the large Toolbar.
 /// @group toolbar
 $kendo-toolbar-lg-padding-x: k-spacing(2.5) !default;
 
 /// The vertical padding of the Toolbar.
 /// @group toolbar
-$kendo-toolbar-padding-y: null !default;
+$kendo-toolbar-padding-y: k-spacing(2) !default;
 /// The vertical padding of the small Toolbar.
 /// @group toolbar
 $kendo-toolbar-sm-padding-y: k-spacing(1) !default;
 /// The vertical padding of the medium Toolbar.
 /// @group toolbar
-$kendo-toolbar-md-padding-y: k-spacing(2) !default;
+$kendo-toolbar-md-padding-y: $kendo-toolbar-padding-y !default;
 /// The vertical padding of the large Toolbar.
 /// @group toolbar
 $kendo-toolbar-lg-padding-y: k-spacing(2.5) !default;
 
 /// The spacing between the Toolbar tools.
 /// @group toolbar
-$kendo-toolbar-spacing: null !default;
+$kendo-toolbar-spacing: k-spacing(2) !default;
 /// The spacing between the tools of the small Toolbar.
 /// @group toolbar
 $kendo-toolbar-sm-spacing: k-spacing(1.5) !default;
 /// The spacing between the tools of the medium Toolbar.
 /// @group toolbar
-$kendo-toolbar-md-spacing: k-spacing(2) !default;
+$kendo-toolbar-md-spacing: $kendo-toolbar-spacing !default;
 /// The spacing between the tools of the large Toolbar.
 /// @group toolbar
 $kendo-toolbar-lg-spacing: k-spacing(2.5) !default;
 
+/// The height of the Toolbar button separator.
+/// @group toolbar
+$kendo-toolbar-separator-height: $kendo-button-md-calc-size !default;
+/// The height of the small Toolbar button separator.
+/// @group toolbar
+$kendo-toolbar-sm-separator-height: $kendo-button-sm-calc-size !default;
+/// The height of the medium Toolbar button separator.
+/// @group toolbar
+$kendo-toolbar-md-separator-height: $kendo-toolbar-separator-height !default;
+/// The height of the large Toolbar button separator.
+/// @group toolbar
+$kendo-toolbar-lg-separator-height: $kendo-button-lg-calc-size !default;
+
 /// The width of the border around the Toolbar.
 /// @group toolbar
 $kendo-toolbar-border-width: 1px !default;
@@ -75,6 +88,9 @@ $kendo-toolbar-gradient: null !default;
 /// The box shadow of the Toolbar.
 /// @group toolbar
 $kendo-toolbar-shadow: null !default;
+/// The left and right scroll overlay of the Toolbar.
+/// @group toolbar
+$kendo-toolbar-scroll-overlay: $kendo-toolbar-bg, if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) !default;
 
 /// The text color of the outline Toolbar.
 /// @group toolbar
@@ -91,6 +107,9 @@ $kendo-toolbar-outline-shadow: null !default;
 /// The width of the border around the outline Toolbar.
 /// @group toolbar
 $kendo-toolbar-outline-border-width: $kendo-toolbar-border-width !default;
+/// The left and right scroll overlay of the outline Toolbar.
+/// @group toolbar
+$kendo-toolbar-outline-scroll-overlay: 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)) !default;
 
 /// The text color of the flat Toolbar.
 /// @group toolbar
@@ -107,6 +126,9 @@ $kendo-toolbar-flat-shadow: null !default;
 /// Border width of the flat Toolbar.
 /// @group toolbar
 $kendo-toolbar-flat-border-width: 1px !default;
+/// The left and right scroll overlay of the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-scroll-overlay: 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)) !default;
 
 /// The color of the separator border of the Toolbar.
 /// @group toolbar
@@ -139,16 +161,19 @@ $kendo-toolbar-sizes: (
     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-toolbar-sm-separator-height
     ),
     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-toolbar-md-separator-height
     ),
     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-toolbar-lg-separator-height
     )
 ) !default;