diff --git a/packages/default/scss/tabstrip/_layout.scss b/packages/default/scss/tabstrip/_layout.scss index 5f62ca3bcaa..bf150efefb4 100644 --- a/packages/default/scss/tabstrip/_layout.scss +++ b/packages/default/scss/tabstrip/_layout.scss @@ -172,7 +172,7 @@ } - // Tabstrip variants + // Tabstrip position .k-tabstrip-top { > .k-tabstrip-items-wrapper { border-bottom-width: $tabstrip-border-width; @@ -268,6 +268,24 @@ } + // Tabstrip align + .k-tabstrip-items-start { + justify-content: flex-start; + } + .k-tabstrip-items-center { + justify-content: center; + } + .k-tabstrip-items-end { + justify-content: flex-end; + } + .k-tabstrip-items-justify { + justify-content: space-between; + } + .k-tabstrip-items-stretched > * { + flex: 1 0 0; + } + + // Selected indicator @if ($tabstrip-indicator-size) { diff --git a/packages/fluent/scss/tabstrip/_layout.scss b/packages/fluent/scss/tabstrip/_layout.scss index 2954a3e6669..827b83cd3d2 100644 --- a/packages/fluent/scss/tabstrip/_layout.scss +++ b/packages/fluent/scss/tabstrip/_layout.scss @@ -176,7 +176,7 @@ } - // Tabstrip variants + // Tabstrip position .k-tabstrip-top { > .k-tabstrip-items-wrapper { border-bottom-width: var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} ); @@ -229,6 +229,25 @@ } } + + // Tabstrip align + .k-tabstrip-items-start { + justify-content: flex-start; + } + .k-tabstrip-items-center { + justify-content: center; + } + .k-tabstrip-items-end { + justify-content: flex-end; + } + .k-tabstrip-items-justify { + justify-content: space-between; + } + .k-tabstrip-items-stretched > * { + flex: 1 0 0; + } + + // Selected indicator @if ($kendo-tabstrip-indicator-size) {