feat(toolbar): add adaptive styles

telerik · Dec 18, 2024 · c814565 · c814565
1 parent aeb3e53
commit c814565
Show file tree

Hide file tree

Showing 11 changed files with 516 additions and 49 deletions.
diff --git a/packages/bootstrap/scss/toolbar/_variables.scss b/packages/bootstrap/scss/toolbar/_variables.scss
@@ -43,6 +43,19 @@ $kendo-toolbar-md-spacing: k-spacing(2) !default;
 /// @group toolbar
 $kendo-toolbar-lg-spacing: k-spacing(2.5) !default;
 
+/// The height of the Toolbar button separator.
+/// @group toolbar
+$kendo-toolbar-separator-height: null !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-button-md-calc-size !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,10 @@ $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 +108,10 @@ $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 +128,10 @@ $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
@@ -126,17 +151,20 @@ $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;
 

diff --git a/packages/classic/scss/toolbar/_variables.scss b/packages/classic/scss/toolbar/_variables.scss
@@ -42,6 +42,19 @@ $kendo-toolbar-md-spacing: k-spacing(2) !default;
 /// @group toolbar
 $kendo-toolbar-lg-spacing: k-spacing(2.5) !default;
 
+/// The height of the Toolbar button separator.
+/// @group toolbar
+$kendo-toolbar-separator-height: null !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-button-md-calc-size !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;
@@ -74,6 +87,10 @@ $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
@@ -90,6 +107,10 @@ $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
@@ -106,6 +127,10 @@ $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
@@ -125,17 +150,20 @@ $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;
 

diff --git a/packages/default/scss/toolbar/_layout.scss b/packages/default/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;