chore(tabstrip): add styles for different sizes

telerik · Dec 10, 2024 · ac4f966 · ac4f966
1 parent 0cfbc5d
commit ac4f966
Show file tree

Hide file tree

Showing 7 changed files with 375 additions and 1 deletion.
diff --git a/packages/bootstrap/scss/tabstrip/_variables.scss b/packages/bootstrap/scss/tabstrip/_variables.scss
@@ -27,6 +27,25 @@ $kendo-tabstrip-line-height: var( --kendo-line-height, normal ) !default;
 /// @group tabstrip
 $kendo-tabstrip-border-width: 1px !default;
 
+/// The font size of the small TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-sm-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// The line height of the small TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-sm-line-height: var( --kendo-line-height, normal ) !default;
+/// The font size of the medium TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-md-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the medium TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-md-line-height: $kendo-tabstrip-line-height !default;
+/// The font size of the large TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-lg-font-size: $kendo-tabstrip-md-font-size !default;
+/// The line height of the large TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-lg-line-height: $kendo-tabstrip-md-line-height !default;
+
 /// The background color of the TabStrip wrapper.
 /// @group tabstrip
 $kendo-tabstrip-wrapper-bg: null !default;
@@ -62,6 +81,24 @@ $kendo-tabstrip-item-border-radius: k-spacing(1) !default;
 /// The gap between the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-gap: k-spacing(0) !default;
+/// The horizontal padding of the small TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-sm-item-padding-x: k-spacing(3) !default;
+/// The vertical padding of the small TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-sm-item-padding-y: k-spacing(1.5) !default;
+/// The horizontal padding of the medium TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-md-item-padding-x: $kendo-tabstrip-item-padding-x !default;
+/// The vertical padding of the medium TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-md-item-padding-y: $kendo-tabstrip-item-padding-y !default;
+/// The horizontal padding of the large TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-lg-item-padding-x: k-spacing(5) !default;
+/// The vertical padding of the large TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-lg-item-padding-y: k-spacing(2.5) !default;
 
 ///  The background color of the TabStrip items.
 /// @group tabstrip
@@ -162,6 +199,28 @@ $kendo-tabstrip-content-border: $kendo-component-border !default;
 /// @group tabstrip
 $kendo-tabstrip-content-focus-border: $kendo-component-text !default;
 
+/// The size map of the TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-sizes: (
+    sm: (
+        font-size: $kendo-tabstrip-sm-font-size,
+        line-height: $kendo-tabstrip-sm-line-height,
+        item-padding-x: $kendo-tabstrip-sm-item-padding-x,
+        item-padding-y: $kendo-tabstrip-sm-item-padding-y
+    ),
+    md: (
+        font-size: $kendo-tabstrip-font-size,
+        line-height: $kendo-tabstrip-line-height,
+        item-padding-x: $kendo-tabstrip-item-padding-x,
+        item-padding-y: $kendo-tabstrip-item-padding-y
+    ),
+    lg: (
+        font-size: $kendo-tabstrip-lg-font-size,
+        line-height: $kendo-tabstrip-lg-line-height,
+        item-padding-x: $kendo-tabstrip-lg-item-padding-x,
+        item-padding-y: $kendo-tabstrip-lg-item-padding-y
+    )
+) !default;
 
 @forward "@progress/kendo-theme-default/scss/tabstrip/_variables.scss" with (
     $kendo-tabstrip-wrapper-padding-x: $kendo-tabstrip-wrapper-padding-x,
@@ -171,6 +230,12 @@ $kendo-tabstrip-content-focus-border: $kendo-component-text !default;
     $kendo-tabstrip-font-size: $kendo-tabstrip-font-size,
     $kendo-tabstrip-line-height: $kendo-tabstrip-line-height,
     $kendo-tabstrip-border-width: $kendo-tabstrip-border-width,
+    $kendo-tabstrip-sm-font-size: $kendo-tabstrip-sm-font-size,
+    $kendo-tabstrip-sm-line-height: $kendo-tabstrip-sm-line-height,
+    $kendo-tabstrip-md-font-size: $kendo-tabstrip-md-font-size,
+    $kendo-tabstrip-md-line-height: $kendo-tabstrip-md-line-height,
+    $kendo-tabstrip-lg-font-size: $kendo-tabstrip-lg-font-size,
+    $kendo-tabstrip-lg-line-height: $kendo-tabstrip-lg-line-height,
     $kendo-tabstrip-wrapper-bg: $kendo-tabstrip-wrapper-bg,
     $kendo-tabstrip-wrapper-text: $kendo-tabstrip-wrapper-text,
     $kendo-tabstrip-wrapper-border: $kendo-tabstrip-wrapper-border,
@@ -182,6 +247,12 @@ $kendo-tabstrip-content-focus-border: $kendo-component-text !default;
     $kendo-tabstrip-item-border-width: $kendo-tabstrip-item-border-width,
     $kendo-tabstrip-item-border-radius: $kendo-tabstrip-item-border-radius,
     $kendo-tabstrip-item-gap: $kendo-tabstrip-item-gap,
+    $kendo-tabstrip-sm-item-padding-x: $kendo-tabstrip-sm-item-padding-x,
+    $kendo-tabstrip-sm-item-padding-y: $kendo-tabstrip-sm-item-padding-y,
+    $kendo-tabstrip-md-item-padding-x: $kendo-tabstrip-md-item-padding-x,
+    $kendo-tabstrip-md-item-padding-y: $kendo-tabstrip-md-item-padding-y,
+    $kendo-tabstrip-lg-item-padding-x: $kendo-tabstrip-lg-item-padding-x,
+    $kendo-tabstrip-lg-item-padding-y: $kendo-tabstrip-lg-item-padding-y,
     $kendo-tabstrip-item-bg: $kendo-tabstrip-item-bg,
     $kendo-tabstrip-item-text: $kendo-tabstrip-item-text,
     $kendo-tabstrip-item-border: $kendo-tabstrip-item-border,

diff --git a/packages/classic/scss/tabstrip/_variables.scss b/packages/classic/scss/tabstrip/_variables.scss
@@ -27,6 +27,25 @@ $kendo-tabstrip-line-height: var( --kendo-line-height, normal )!default;
 /// @group tabstrip
 $kendo-tabstrip-border-width: 1px !default;
 
+/// The font size of the small TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-sm-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the small TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-sm-line-height: var( --kendo-line-height, normal ) !default;
+/// The font size of the medium TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-md-font-size: $kendo-tabstrip-font-size !default;
+/// The line height of the medium TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-md-line-height: $kendo-tabstrip-line-height !default;
+/// The font size of the large TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
+/// The line height of the large TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
+
 /// The background color of the TabStrip wrapper.
 /// @group tabstrip
 $kendo-tabstrip-wrapper-bg: null !default;
@@ -62,6 +81,24 @@ $kendo-tabstrip-item-border-radius: k-border-radius(md) !default;
 /// The gap between the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-gap: k-spacing(0) !default;
+/// The horizontal padding of the small TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-sm-item-padding-x: k-spacing(3) !default;
+/// The vertical padding of the small TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-sm-item-padding-y: k-spacing(1) !default;
+/// The horizontal padding of the medium TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-md-item-padding-x: $kendo-tabstrip-item-padding-x !default;
+/// The vertical padding of the medium TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-md-item-padding-y: $kendo-tabstrip-item-padding-y !default;
+/// The horizontal padding of the large TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-lg-item-padding-x: k-spacing(3) !default;
+/// The vertical padding of the large TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-lg-item-padding-y: k-spacing(2.5) !default;
 
 ///  The background color of the TabStrip items.
 /// @group tabstrip
@@ -162,6 +199,28 @@ $kendo-tabstrip-content-border: $kendo-component-border !default;
 /// @group tabstrip
 $kendo-tabstrip-content-focus-border: $kendo-component-text !default;
 
+/// The size map of the TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-sizes: (
+    sm: (
+        font-size: $kendo-tabstrip-sm-font-size,
+        line-height: $kendo-tabstrip-sm-line-height,
+        item-padding-x: $kendo-tabstrip-sm-item-padding-x,
+        item-padding-y: $kendo-tabstrip-sm-item-padding-y
+    ),
+    md: (
+        font-size: $kendo-tabstrip-font-size,
+        line-height: $kendo-tabstrip-line-height,
+        item-padding-x: $kendo-tabstrip-item-padding-x,
+        item-padding-y: $kendo-tabstrip-item-padding-y
+    ),
+    lg: (
+        font-size: $kendo-tabstrip-lg-font-size,
+        line-height: $kendo-tabstrip-lg-line-height,
+        item-padding-x: $kendo-tabstrip-lg-item-padding-x,
+        item-padding-y: $kendo-tabstrip-lg-item-padding-y
+    )
+) !default;
 
 @forward "@progress/kendo-theme-default/scss/tabstrip/_variables.scss" with (
     $kendo-tabstrip-wrapper-padding-x: $kendo-tabstrip-wrapper-padding-x,
@@ -171,6 +230,12 @@ $kendo-tabstrip-content-focus-border: $kendo-component-text !default;
     $kendo-tabstrip-font-size: $kendo-tabstrip-font-size,
     $kendo-tabstrip-line-height: $kendo-tabstrip-line-height,
     $kendo-tabstrip-border-width: $kendo-tabstrip-border-width,
+    $kendo-tabstrip-sm-font-size: $kendo-tabstrip-sm-font-size,
+    $kendo-tabstrip-sm-line-height: $kendo-tabstrip-sm-line-height,
+    $kendo-tabstrip-md-font-size: $kendo-tabstrip-md-font-size,
+    $kendo-tabstrip-md-line-height: $kendo-tabstrip-md-line-height,
+    $kendo-tabstrip-lg-font-size: $kendo-tabstrip-lg-font-size,
+    $kendo-tabstrip-lg-line-height: $kendo-tabstrip-lg-line-height,
     $kendo-tabstrip-wrapper-bg: $kendo-tabstrip-wrapper-bg,
     $kendo-tabstrip-wrapper-text: $kendo-tabstrip-wrapper-text,
     $kendo-tabstrip-wrapper-border: $kendo-tabstrip-wrapper-border,
@@ -183,6 +248,12 @@ $kendo-tabstrip-content-focus-border: $kendo-component-text !default;
     $kendo-tabstrip-item-border-radius: $kendo-tabstrip-item-border-radius,
     $kendo-tabstrip-item-gap: $kendo-tabstrip-item-gap,
     $kendo-tabstrip-item-bg: $kendo-tabstrip-item-bg,
+    $kendo-tabstrip-sm-item-padding-x: $kendo-tabstrip-sm-item-padding-x,
+    $kendo-tabstrip-sm-item-padding-y: $kendo-tabstrip-sm-item-padding-y,
+    $kendo-tabstrip-md-item-padding-x: $kendo-tabstrip-md-item-padding-x,
+    $kendo-tabstrip-md-item-padding-y: $kendo-tabstrip-md-item-padding-y,
+    $kendo-tabstrip-lg-item-padding-x: $kendo-tabstrip-lg-item-padding-x,
+    $kendo-tabstrip-lg-item-padding-y: $kendo-tabstrip-lg-item-padding-y,
     $kendo-tabstrip-item-text: $kendo-tabstrip-item-text,
     $kendo-tabstrip-item-border: $kendo-tabstrip-item-border,
     $kendo-tabstrip-item-gradient: $kendo-tabstrip-item-gradient,

diff --git a/packages/default/scss/tabstrip/_layout.scss b/packages/default/scss/tabstrip/_layout.scss
@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "../core/_index.scss" as *;
 @use "../icons/_variables.scss" as *;
 @use "./variables.scss" as *;
@@ -375,6 +376,23 @@
 
     }
 
+     // TabStrip sizes
+     @each $size, $size-props in $kendo-tabstrip-sizes {
+        $_font-size: map.get( $size-props, font-size );
+        $_line-height: map.get( $size-props, line-height );
+        $_item-padding-x: map.get( $size-props, item-padding-x );
+        $_item-padding-y: map.get( $size-props, item-padding-y );
+
+        .k-tabstrip-#{$size} {
+            .k-tabstrip-items .k-link {
+                font-size: $_font-size;
+                line-height: $_line-height;
+                padding-block: $_item-padding-y;
+                padding-inline: $_item-padding-x;
+            }
+        }
+    }
+
 }
 
 

diff --git a/packages/default/scss/tabstrip/_variables.scss b/packages/default/scss/tabstrip/_variables.scss
@@ -27,6 +27,25 @@ $kendo-tabstrip-line-height: var( --kendo-line-height, normal ) !default;
 /// @group tabstrip
 $kendo-tabstrip-border-width: 1px !default;
 
+/// The font size of the small TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-sm-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the small TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-sm-line-height: var( --kendo-line-height, normal ) !default;
+/// The font size of the medium TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-md-font-size: $kendo-tabstrip-font-size !default;
+/// The line height of the medium TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-md-line-height: $kendo-tabstrip-line-height !default;
+/// The font size of the large TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
+/// The line height of the large TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
+
 /// The background color of the TabStrip wrapper.
 /// @group tabstrip
 $kendo-tabstrip-wrapper-bg: null !default;
@@ -62,6 +81,24 @@ $kendo-tabstrip-item-border-radius: k-border-radius(md) !default;
 /// The gap between the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-gap: k-spacing(0) !default;
+/// The horizontal padding of the small TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-sm-item-padding-x: k-spacing(3) !default;
+/// The vertical padding of the small TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-sm-item-padding-y: k-spacing(1) !default;
+/// The horizontal padding of the medium TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-md-item-padding-x: $kendo-tabstrip-item-padding-x !default;
+/// The vertical padding of the medium TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-md-item-padding-y: $kendo-tabstrip-item-padding-y !default;
+/// The horizontal padding of the large TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-lg-item-padding-x: k-spacing(3) !default;
+/// The vertical padding of the large TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-lg-item-padding-y: k-spacing(2.5) !default;
 
 ///  The background color of the TabStrip items.
 /// @group tabstrip
@@ -162,3 +199,26 @@ $kendo-tabstrip-content-border: $kendo-component-border !default;
 /// The border color of the focused TabStrip content.
 /// @group tabstrip
 $kendo-tabstrip-content-focus-border: $kendo-component-text !default;
+
+/// The size map of the TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-sizes: (
+    sm: (
+        font-size: $kendo-tabstrip-sm-font-size,
+        line-height: $kendo-tabstrip-sm-line-height,
+        item-padding-x: $kendo-tabstrip-sm-item-padding-x,
+        item-padding-y: $kendo-tabstrip-sm-item-padding-y
+    ),
+    md: (
+        font-size: $kendo-tabstrip-font-size,
+        line-height: $kendo-tabstrip-line-height,
+        item-padding-x: $kendo-tabstrip-item-padding-x,
+        item-padding-y: $kendo-tabstrip-item-padding-y
+    ),
+    lg: (
+        font-size: $kendo-tabstrip-lg-font-size,
+        line-height: $kendo-tabstrip-lg-line-height,
+        item-padding-x: $kendo-tabstrip-lg-item-padding-x,
+        item-padding-y: $kendo-tabstrip-lg-item-padding-y
+    )
+) !default;
diff --git a/packages/fluent/scss/tabstrip/_layout.scss b/packages/fluent/scss/tabstrip/_layout.scss
@@ -1,3 +1,5 @@
+
+@use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
 
@@ -330,4 +332,21 @@
 
     }
 
+     // TabStrip sizes
+     @each $size, $size-props in $kendo-tabstrip-sizes {
+        $_font-size: map.get( $size-props, font-size );
+        $_line-height: map.get( $size-props, line-height );
+        $_item-padding-x: map.get( $size-props, item-padding-x );
+        $_item-padding-y: map.get( $size-props, item-padding-y );
+
+        .k-tabstrip-#{$size} {
+            .k-tabstrip-items .k-link {
+                font-size: $_font-size;
+                line-height: $_line-height;
+                padding-block: $_item-padding-y;
+                padding-inline: $_item-padding-x;
+            }
+        }
+    }
+
 }