From ac4f9668cadc24d9e3c97174eb518a8dce2da8d5 Mon Sep 17 00:00:00 2001 From: Iliyana Dyankova Date: Tue, 10 Dec 2024 16:03:03 +0200 Subject: [PATCH] chore(tabstrip): add styles for different sizes --- .../bootstrap/scss/tabstrip/_variables.scss | 71 ++++++++++++++++++ .../classic/scss/tabstrip/_variables.scss | 71 ++++++++++++++++++ packages/default/scss/tabstrip/_layout.scss | 18 +++++ .../default/scss/tabstrip/_variables.scss | 60 ++++++++++++++++ packages/fluent/scss/tabstrip/_layout.scss | 19 +++++ packages/fluent/scss/tabstrip/_variables.scss | 65 ++++++++++++++++- .../material/scss/tabstrip/_variables.scss | 72 +++++++++++++++++++ 7 files changed, 375 insertions(+), 1 deletion(-) diff --git a/packages/bootstrap/scss/tabstrip/_variables.scss b/packages/bootstrap/scss/tabstrip/_variables.scss index b8702b6c280..7e1ec38437c 100644 --- 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 index 2f3022da0c6..adce9b6859d 100644 --- 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 index a969635dd06..2d06c0b2713 100644 --- 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 index b498c85c8ce..ad17be2f6db 100644 --- 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 index cd23027c584..926f6f383f2 100644 --- 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; + } + } + } + } diff --git a/packages/fluent/scss/tabstrip/_variables.scss b/packages/fluent/scss/tabstrip/_variables.scss index b5e890f21ec..03105be4374 100644 --- a/packages/fluent/scss/tabstrip/_variables.scss +++ b/packages/fluent/scss/tabstrip/_variables.scss @@ -34,6 +34,26 @@ $kendo-tabstrip-line-height: var( --kendo-line-height, normal ) !default; /// The border width around the TabStrip. /// @group tabstrip $kendo-tabstrip-border-width: 0px !default; + +/// The font size of the small TabStrip. +/// @group tabstrip +$kendo-tabstrip-sm-font-size: $kendo-tabstrip-font-size !default; +/// The line height of the small TabStrip. +/// @group tabstrip +$kendo-tabstrip-sm-line-height: $kendo-tabstrip-line-height !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: $kendo-tabstrip-font-size !default; +/// The line height of the large TabStrip. +/// @group tabstrip +$kendo-tabstrip-lg-line-height: $kendo-tabstrip-line-height !default; + /// The background color of the TabStrip. /// @group tabstrip $kendo-tabstrip-bg: transparent !default; @@ -49,7 +69,7 @@ $kendo-tabstrip-border: transparent !default; $kendo-tabstrip-item-padding-x: k-spacing(2) !default; /// The vertical padding of the TabStrip items. /// @group tabstrip -$kendo-tabstrip-item-padding-y: calc( #{k-spacing(2)} + #{k-spacing(1)} ) !default; +$kendo-tabstrip-item-padding-y: k-spacing(3) !default; /// The border width around the TabStrip items. /// @group tabstrip $kendo-tabstrip-item-border-width: 0px !default; @@ -59,6 +79,26 @@ $kendo-tabstrip-item-border-radius: k-border-radius(md) !default; /// The gap between the TabStrip items. /// @group tabstrip $kendo-tabstrip-item-gap: k-spacing(2) !default; + +/// The horizontal padding of the small TabStrip items. +/// @group tabstrip +$kendo-tabstrip-sm-item-padding-x: k-spacing(2) !default; +/// The vertical padding of the small TabStrip items. +/// @group tabstrip +$kendo-tabstrip-sm-item-padding-y: k-spacing(2.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(2) !default; +/// The vertical padding of the large TabStrip items. +/// @group tabstrip +$kendo-tabstrip-lg-item-padding-y: k-spacing(3.5) !default; + /// The background color of the TabStrip items. /// @group tabstrip $kendo-tabstrip-item-bg: transparent !default; @@ -149,3 +189,26 @@ $kendo-tabstrip-scrollable-button-padding-x: k-spacing(1) !default; // The vertical button padding of the scrollable TabStrip. /// @group tabstrip $kendo-tabstrip-scrollable-button-padding-y: k-spacing(1) !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/material/scss/tabstrip/_variables.scss b/packages/material/scss/tabstrip/_variables.scss index faf335f03af..8628f827a83 100644 --- a/packages/material/scss/tabstrip/_variables.scss +++ b/packages/material/scss/tabstrip/_variables.scss @@ -29,6 +29,25 @@ $kendo-tabstrip-line-height: math.div( 20, 14 ) !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: $kendo-tabstrip-line-height !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: $kendo-tabstrip-font-size !default; +/// The line height of the large TabStrip. +/// @group tabstrip +$kendo-tabstrip-lg-line-height: $kendo-tabstrip-line-height !default; + /// The background color of the TabStrip wrapper. /// @group tabstrip $kendo-tabstrip-wrapper-bg: null !default; @@ -64,6 +83,24 @@ $kendo-tabstrip-item-border-radius: 0px !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(6) !default; +/// The vertical padding of the small TabStrip items. +/// @group tabstrip +$kendo-tabstrip-sm-item-padding-y: k-spacing(3) !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(6) !default; +/// The vertical padding of the large TabStrip items. +/// @group tabstrip +$kendo-tabstrip-lg-item-padding-y: k-spacing(4) !default; /// The background color of the TabStrip items. /// @group tabstrip @@ -164,6 +201,29 @@ $kendo-tabstrip-content-border: unset !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, $kendo-tabstrip-wrapper-padding-y: $kendo-tabstrip-wrapper-padding-y, @@ -172,6 +232,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, @@ -184,6 +250,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,