From 7603ff85e611ec4b621d3945388318f1d1df20cc Mon Sep 17 00:00:00 2001 From: Iliyana Dyankova Date: Tue, 10 Dec 2024 16:03:03 +0200 Subject: [PATCH] feat(tabstrip): add styles for different sizes and hidden scroll buttons --- .../bootstrap/scss/tabstrip/_variables.scss | 78 ++++++++++++- .../classic/scss/tabstrip/_variables.scss | 78 ++++++++++++- packages/default/scss/tabstrip/_layout.scss | 110 +++++++++++++++++- packages/default/scss/tabstrip/_theme.scss | 47 ++++++++ .../default/scss/tabstrip/_variables.scss | 64 ++++++++++ packages/fluent/scss/tabstrip/_layout.scss | 110 +++++++++++++++++- packages/fluent/scss/tabstrip/_theme.scss | 47 ++++++++ packages/fluent/scss/tabstrip/_variables.scss | 69 ++++++++++- .../material/scss/tabstrip/_variables.scss | 79 ++++++++++++- 9 files changed, 676 insertions(+), 6 deletions(-) diff --git a/packages/bootstrap/scss/tabstrip/_variables.scss b/packages/bootstrap/scss/tabstrip/_variables.scss index b8702b6c280..15e53357121 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: $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-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,32 @@ $kendo-tabstrip-content-border: $kendo-component-border !default; /// @group tabstrip $kendo-tabstrip-content-focus-border: $kendo-component-text !default; +/// The left and right scroll overlay of the TabStrip. +/// @group tabstrip +$kendo-tabstrip-scroll-overlay: if($kendo-enable-color-system, k-color( app-surface ), rgba( $kendo-color-white, 0)), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) !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-md-font-size, + line-height: $kendo-tabstrip-md-line-height, + item-padding-x: $kendo-tabstrip-md-item-padding-x, + item-padding-y: $kendo-tabstrip-md-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 +234,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 +251,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, @@ -211,5 +286,6 @@ $kendo-tabstrip-content-focus-border: $kendo-component-text !default; $kendo-tabstrip-content-bg: $kendo-tabstrip-content-bg, $kendo-tabstrip-content-text: $kendo-tabstrip-content-text, $kendo-tabstrip-content-border: $kendo-tabstrip-content-border, - $kendo-tabstrip-content-focus-border: $kendo-tabstrip-content-focus-border + $kendo-tabstrip-content-focus-border: $kendo-tabstrip-content-focus-border, + $kendo-tabstrip-scroll-overlay: $kendo-tabstrip-scroll-overlay ); diff --git a/packages/classic/scss/tabstrip/_variables.scss b/packages/classic/scss/tabstrip/_variables.scss index 2f3022da0c6..5a866938fc6 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: $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: 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(2) !default; +/// The vertical padding of the small TabStrip items. +/// @group tabstrip +$kendo-tabstrip-sm-item-padding-y: k-spacing(0.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(1.5) !default; /// The background color of the TabStrip items. /// @group tabstrip @@ -162,6 +199,32 @@ $kendo-tabstrip-content-border: $kendo-component-border !default; /// @group tabstrip $kendo-tabstrip-content-focus-border: $kendo-component-text !default; +/// The left and right scroll overlay of the TabStrip. +/// @group tabstrip +$kendo-tabstrip-scroll-overlay: if($kendo-enable-color-system, k-color( app-surface ), rgba( $kendo-color-white, 0)), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) !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-md-font-size, + line-height: $kendo-tabstrip-md-line-height, + item-padding-x: $kendo-tabstrip-md-item-padding-x, + item-padding-y: $kendo-tabstrip-md-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 +234,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 +252,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, @@ -211,5 +286,6 @@ $kendo-tabstrip-content-focus-border: $kendo-component-text !default; $kendo-tabstrip-content-bg: $kendo-tabstrip-content-bg, $kendo-tabstrip-content-text: $kendo-tabstrip-content-text, $kendo-tabstrip-content-border: $kendo-tabstrip-content-border, - $kendo-tabstrip-content-focus-border: $kendo-tabstrip-content-focus-border + $kendo-tabstrip-content-focus-border: $kendo-tabstrip-content-focus-border, + $kendo-tabstrip-scroll-overlay: $kendo-tabstrip-scroll-overlay ); diff --git a/packages/default/scss/tabstrip/_layout.scss b/packages/default/scss/tabstrip/_layout.scss index a969635dd06..1f77c357bd3 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 *; @@ -169,11 +170,94 @@ // Scrolling .k-tabstrip-scrollable { > .k-tabstrip-items-wrapper { - > .k-tabstrip-items { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; + + &.k-tabstrip-items-scroll { + scrollbar-width: none; + + &::-webkit-scrollbar { + display: none; + } + } + } + } + + &.k-tabstrip-top, + &.k-tabstrip-bottom { + .k-tabstrip-items.k-tabstrip-items-scroll { + overflow-x: auto; + } + } + + &.k-tabstrip-left, + &.k-tabstrip-right { + .k-tabstrip-items.k-tabstrip-items-scroll { + overflow-y: auto; + } + } + } + + .k-tabstrip-scrollable-overlay { + .k-tabstrip-items-wrapper { + &::before, + &::after { + content: ''; + position: absolute; + z-index: 3; + } + } + + &.k-tabstrip-top, + &.k-tabstrip-bottom { + .k-tabstrip-items-wrapper { + &::before, + &::after { + height: 100%; + aspect-ratio: 1; + } + &::before { + inset-inline-start: 0; + } + + &::after { + inset-inline-end: 0; + } + } + } + + &.k-tabstrip-left, + &.k-tabstrip-right { + .k-tabstrip-items-wrapper { + &::before, + &::after { + width: 100%; + } + &::before { + inset-block-start: 0; + } + + &::after { + inset-block-end: 0; + } + } + } + + &.k-tabstrip-scrollable-start { + .k-tabstrip-items-wrapper { + &::before { + display: none; + } + } + } + + &.k-tabstrip-scrollable-end { + .k-tabstrip-items-wrapper { + &::after { + display: none; + } } } } @@ -375,6 +459,30 @@ } + // 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; + } + + :is(&.k-tabstrip-left, &.k-tabstrip-right):is(.k-tabstrip-scrollable-overlay) :is(.k-tabstrip-items-wrapper){ + &::before, + &::after { + height: calc( ($_line-height * 1em) + ($kendo-tabstrip-border-width * 2) + ($_item-padding-y * 2) ); + } + } + } + } + } diff --git a/packages/default/scss/tabstrip/_theme.scss b/packages/default/scss/tabstrip/_theme.scss index ab1b573dbf6..fbdf9b6acec 100644 --- a/packages/default/scss/tabstrip/_theme.scss +++ b/packages/default/scss/tabstrip/_theme.scss @@ -101,6 +101,53 @@ } } + // Scrolling + .k-tabstrip-scrollable-overlay { + &.k-tabstrip-top, + &.k-tabstrip-bottom { + .k-tabstrip-items-wrapper { + &::before { + background: linear-gradient(90deg, $kendo-tabstrip-scroll-overlay); + } + + &::after { + background: linear-gradient(270deg, $kendo-tabstrip-scroll-overlay); + } + } + } + + &.k-tabstrip-left, + &.k-tabstrip-right { + .k-tabstrip-items-wrapper { + &::before { + background: linear-gradient(180deg, $kendo-tabstrip-scroll-overlay); + } + + &::after { + background: linear-gradient(360deg, $kendo-tabstrip-scroll-overlay); + } + } + } + } +} + +// RTL +.k-rtl, +[dir="rtl"] { + &.k-tabstrip-scrollable-overlay { + &.k-tabstrip-top, + &.k-tabstrip-bottom { + .k-tabstrip-items-wrapper { + &::before { + background: linear-gradient(270deg, $kendo-tabstrip-scroll-overlay); + } + + &::after { + background: linear-gradient(90deg, $kendo-tabstrip-scroll-overlay); + } + } + } + } } diff --git a/packages/default/scss/tabstrip/_variables.scss b/packages/default/scss/tabstrip/_variables.scss index b498c85c8ce..4ec0bc3ab91 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: $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: 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,30 @@ $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 left and right scroll overlay of the TabStrip. +/// @group tabstrip +$kendo-tabstrip-scroll-overlay: if($kendo-enable-color-system, k-color( app-surface ), rgba( $kendo-color-white, 0)), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) !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-md-font-size, + line-height: $kendo-tabstrip-md-line-height, + item-padding-x: $kendo-tabstrip-md-item-padding-x, + item-padding-y: $kendo-tabstrip-md-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..0d4281ffd10 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 *; @@ -160,15 +162,97 @@ // Scrolling .k-tabstrip-scrollable { > .k-tabstrip-items-wrapper { - > .k-tabstrip-items { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; + + &.k-tabstrip-items-scroll { + scrollbar-width: none; + + &::-webkit-scrollbar { + display: none; + } + } + } + + &.k-tabstrip-top, + &.k-tabstrip-bottom { + .k-tabstrip-items.k-tabstrip-items-scroll { + overflow-x: auto; + } + } + + &.k-tabstrip-left, + &.k-tabstrip-right { + .k-tabstrip-items.k-tabstrip-items-scroll { + overflow-y: auto; + } } } } + .k-tabstrip-scrollable-overlay { + .k-tabstrip-items-wrapper { + &::before, + &::after { + content: ''; + position: absolute; + z-index: 3; + } + } + + &.k-tabstrip-top, + &.k-tabstrip-bottom { + .k-tabstrip-items-wrapper { + &::before, + &::after { + height: 100%; + aspect-ratio: 1; + } + &::before { + inset-inline-start: 0; + } + + &::after { + inset-inline-end: 0; + } + } + } + + &.k-tabstrip-left, + &.k-tabstrip-right { + .k-tabstrip-items-wrapper { + &::before, + &::after { + width: 100%; + } + &::before { + inset-block-start: 0; + } + + &::after { + inset-block-end: 0; + } + } + } + + &.k-tabstrip-scrollable-start { + .k-tabstrip-items-wrapper { + &::before { + display: none; + } + } + } + + &.k-tabstrip-scrollable-end { + .k-tabstrip-items-wrapper { + &::after { + display: none; + } + } + } + } // Tabstrip orientation .k-tabstrip-horizontal { @@ -330,4 +414,28 @@ } + // 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; + } + + :is(&.k-tabstrip-left, &.k-tabstrip-right):is(.k-tabstrip-scrollable-overlay) :is(.k-tabstrip-items-wrapper){ + &::before, + &::after { + height: calc( ($_line-height * 1em) + ($kendo-tabstrip-border-width * 2) + ($_item-padding-y * 2) ); + } + } + } + } + } diff --git a/packages/fluent/scss/tabstrip/_theme.scss b/packages/fluent/scss/tabstrip/_theme.scss index 5250f5ab342..bab84c61cd1 100644 --- a/packages/fluent/scss/tabstrip/_theme.scss +++ b/packages/fluent/scss/tabstrip/_theme.scss @@ -99,4 +99,51 @@ } } + // Scrolling + .k-tabstrip-scrollable-overlay { + &.k-tabstrip-top, + &.k-tabstrip-bottom { + .k-tabstrip-items-wrapper { + &::before { + background: linear-gradient(90deg, $kendo-tabstrip-scroll-overlay); + } + + &::after { + background: linear-gradient(270deg, $kendo-tabstrip-scroll-overlay); + } + } + } + + &.k-tabstrip-left, + &.k-tabstrip-right { + .k-tabstrip-items-wrapper { + &::before { + background: linear-gradient(180deg, $kendo-tabstrip-scroll-overlay); + } + + &::after { + background: linear-gradient(360deg, $kendo-tabstrip-scroll-overlay); + } + } + } + } + + // RTL + .k-rtl, + [dir="rtl"] { + &.k-tabstrip-scrollable-overlay { + &.k-tabstrip-top, + &.k-tabstrip-bottom { + .k-tabstrip-items-wrapper { + &::before { + background: linear-gradient(270deg, $kendo-tabstrip-scroll-overlay); + } + + &::after { + background: linear-gradient(90deg, $kendo-tabstrip-scroll-overlay); + } + } + } + } + } } diff --git a/packages/fluent/scss/tabstrip/_variables.scss b/packages/fluent/scss/tabstrip/_variables.scss index b5e890f21ec..a842d3feb34 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,30 @@ $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 left and right scroll overlay of the TabStrip. +/// @group tabstrip +$kendo-tabstrip-scroll-overlay: if($kendo-enable-color-system, k-color( app-surface ), rgba( $kendo-color-white, 0)), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) !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-md-font-size, + line-height: $kendo-tabstrip-md-line-height, + item-padding-x: $kendo-tabstrip-md-item-padding-x, + item-padding-y: $kendo-tabstrip-md-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..43b37e4fa5c 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: $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 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,33 @@ $kendo-tabstrip-content-border: unset !default; /// @group tabstrip $kendo-tabstrip-content-focus-border: $kendo-component-text !default; +/// The left and right scroll overlay of the TabStrip. +/// @group tabstrip +$kendo-tabstrip-scroll-overlay: if($kendo-enable-color-system, k-color( app-surface ), rgba( $kendo-color-white, 0)), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) !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-md-font-size, + line-height: $kendo-tabstrip-md-line-height, + item-padding-x: $kendo-tabstrip-md-item-padding-x, + item-padding-y: $kendo-tabstrip-md-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 +236,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 +254,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, @@ -212,5 +288,6 @@ $kendo-tabstrip-content-focus-border: $kendo-component-text !default; $kendo-tabstrip-content-bg: $kendo-tabstrip-content-bg, $kendo-tabstrip-content-text: $kendo-tabstrip-content-text, $kendo-tabstrip-content-border: $kendo-tabstrip-content-border, - $kendo-tabstrip-content-focus-border: $kendo-tabstrip-content-focus-border + $kendo-tabstrip-content-focus-border: $kendo-tabstrip-content-focus-border, + $kendo-tabstrip-scroll-overlay: $kendo-tabstrip-scroll-overlay );