fix(splitbutton): move delimiter to k-button-icon element in fluent t…

…heme
telerik · Sep 30, 2022 · 8336e56 · 8336e56
1 parent 3badb52
commit 8336e56
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 27 deletions.
diff --git a/packages/fluent/scss/split-button/_layout.scss b/packages/fluent/scss/split-button/_layout.scss
@@ -21,38 +21,32 @@
         aspect-ratio: auto;
         flex: none;
 
-        &::before {
-            content:"";
-            width: var( --kendo-split-button-arrow-delimiter-line-size, #{$kendo-split-button-arrow-delimiter-line-size} );
-            height: var( --kendo-split-button-arrow-delimiter-size, #{$kendo-split-button-arrow-delimiter-size} );
-            position: absolute;
-            top: calc( ( 100% - #{$kendo-split-button-arrow-delimiter-size} ) / 2 );
-            left: 0;
-            background: var( --kendo-split-button-arrow-delimiter-bg, #{$kendo-split-button-arrow-delimiter-bg} );
-            z-index: 2;
-        }
-
-        [dir="rtl"] &::before,
-        .k-rtl &::before {
-            right: 0;
-            left: auto;
-        }
+        .k-button-icon {
+            min-width: 0;
 
-        &.k-button-sm {
-            padding: var( --kendo-split-button-arrow-padding-y-sm, #{$kendo-split-button-arrow-padding-y-sm} );
+            &::after {
+                content:"";
+                width: var( --kendo-split-button-arrow-delimiter-line-size, #{$kendo-split-button-arrow-delimiter-line-size} );
+                height: var( --kendo-split-button-arrow-delimiter-size, #{$kendo-split-button-arrow-delimiter-size} );
+                position: absolute;
+                top: calc( ( 100% - #{$kendo-split-button-arrow-delimiter-size} ) / 2 );
+                background: var( --kendo-split-button-arrow-delimiter-bg, #{$kendo-split-button-arrow-delimiter-bg} );
+                z-index: 2;
+            }
         }
 
-        &.k-button-md {
-            padding: var( --kendo-split-button-arrow-padding-y-md, #{$kendo-split-button-arrow-padding-y-md} );
-        }
+        // Sizes
+        @each $size, $size-props in $kendo-split-button-sizes {
 
-        &.k-button-lg {
-            padding: var( --kendo-split-button-arrow-padding-y-lg, #{$kendo-split-button-arrow-padding-y-lg} );
-        }
+            &.k-button-#{$size} {
+                padding: var( --kendo-split-button-arrow-padding-y-#{$size}, #{$size-props} );
 
-        .k-button-icon {
-            min-width: 0;
+                .k-button-icon {
+                    &::after {
+                        inset-inline-start: calc( var( --kendo-split-button-delimiter-offset-#{$size}, #{$size-props} ) * -1 );
+                    }
+                }
+            }
         }
     }
-
 }
diff --git a/packages/fluent/scss/split-button/_variables.scss b/packages/fluent/scss/split-button/_variables.scss
@@ -22,3 +22,11 @@ $kendo-split-button-arrow-delimiter-line-size: 1px !default;
 /// Background color of the split button arrow delimiter.
 /// @group split-button
 $kendo-split-button-arrow-delimiter-bg: get-theme-color-var( neutral-60 ) !default;
+
+/// Sizes map for the split button.
+/// @group split-button
+$kendo-split-button-sizes: (
+    sm: $kendo-split-button-arrow-padding-y-sm,
+    md: $kendo-split-button-arrow-padding-y-md,
+    lg: $kendo-split-button-arrow-padding-y-lg
+) !default;