diff --git a/packages/default/scss/tabstrip/_layout.scss b/packages/default/scss/tabstrip/_layout.scss index 1f77c357bd3..c0656b7ee38 100644 --- a/packages/default/scss/tabstrip/_layout.scss +++ b/packages/default/scss/tabstrip/_layout.scss @@ -281,6 +281,10 @@ .k-item { @include border-top-radius( $kendo-tabstrip-item-border-radius ); border-bottom-width: 0; + + .k-link { + justify-content: center; + } } .k-item:active, .k-item.k-active { @@ -304,6 +308,10 @@ .k-item { @include border-bottom-radius( $kendo-tabstrip-item-border-radius ); border-top-width: 0; + + .k-link { + justify-content: center; + } } .k-item:active, .k-item.k-active { diff --git a/packages/default/scss/tabstrip/_theme.scss b/packages/default/scss/tabstrip/_theme.scss index fbdf9b6acec..d01a89cd02d 100644 --- a/packages/default/scss/tabstrip/_theme.scss +++ b/packages/default/scss/tabstrip/_theme.scss @@ -129,21 +129,21 @@ } } } -} - -// 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); + // 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/toolbar/_layout.scss b/packages/default/scss/toolbar/_layout.scss index 8ef6de8ea6c..2edd1b469ab 100644 --- a/packages/default/scss/toolbar/_layout.scss +++ b/packages/default/scss/toolbar/_layout.scss @@ -42,32 +42,31 @@ &.k-toolbar-scrollable { flex-wrap: nowrap; position: relative; + } + + &.k-toolbar-scrollable-overlay { + + &::before, + &::after { + content: ''; + height: 100%; + aspect-ratio: 1; + position: absolute; + z-index: 3; + } - &.k-toolbar-scrollable-overlay { - &::before { - content: ''; - height: 100%; - aspect-ratio: 1; - position: absolute; - inset-inline-start: 0; - z-index: 3; - } - - &::after { - content: ''; - height: 100%; - aspect-ratio: 1; - position: absolute; - inset-inline-end: 0; - z-index: 3; - } - - &.k-toolbar-scrollable-start::before, - &.k-toolbar-scrollable-end::after { - display: none; - } + &::before { + inset-inline-start: 0; + } + + &::after { + inset-inline-end: 0; } + &.k-toolbar-scrollable-start::before, + &.k-toolbar-scrollable-end::after { + display: none; + } } > * { diff --git a/packages/fluent/scss/tabstrip/_layout.scss b/packages/fluent/scss/tabstrip/_layout.scss index 0d4281ffd10..9d3ad8fa59a 100644 --- a/packages/fluent/scss/tabstrip/_layout.scss +++ b/packages/fluent/scss/tabstrip/_layout.scss @@ -271,6 +271,10 @@ .k-item { margin-block-end: calc( var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} ) * -1 ); + + .k-link { + justify-content: center; + } } } @@ -282,8 +286,11 @@ .k-item { margin-block-start: calc( var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} ) * -1 ); - } + .k-link { + justify-content: center; + } + } } } .k-tabstrip-left { @@ -338,7 +345,6 @@ flex: 1 0 0; } - // Selected indicator @if ($kendo-tabstrip-indicator-size) { diff --git a/packages/fluent/scss/toolbar/_layout.scss b/packages/fluent/scss/toolbar/_layout.scss index ccdc720a7c9..e093591f124 100644 --- a/packages/fluent/scss/toolbar/_layout.scss +++ b/packages/fluent/scss/toolbar/_layout.scss @@ -43,30 +43,30 @@ flex-wrap: nowrap; position: relative; margin-inline-start: calc( var( --INTERNAL--kendo-toolbar-spacing, 0 ) * -1 ); + } + + &.k-toolbar-scrollable-overlay { + + &::before, + &::after { + content: ''; + height: 100%; + aspect-ratio: 1; + position: absolute; + z-index: 3; + } + + &::before { + inset-inline-start: var( --INTERNAL--kendo-toolbar-spacing, 0 ); + } + + &::after { + inset-inline-end: 0; + } - &.k-toolbar-scrollable-overlay { - &::before { - content: ''; - height: 100%; - aspect-ratio: 1; - position: absolute; - inset-inline-start: 0; - z-index: 3; - } - - &::after { - content: ''; - height: 100%; - aspect-ratio: 1; - position: absolute; - inset-inline-end: 0; - z-index: 3; - } - - &.k-toolbar-scrollable-start::before, - &.k-toolbar-scrollable-end::after { - display: none; - } + &.k-toolbar-scrollable-start::before, + &.k-toolbar-scrollable-end::after { + display: none; } } diff --git a/packages/html/src/toolbar/tests/toolbar-adaptive.tsx b/packages/html/src/toolbar/tests/toolbar-adaptive.tsx deleted file mode 100644 index 832d4008ab7..00000000000 --- a/packages/html/src/toolbar/tests/toolbar-adaptive.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { Button } from '../../button'; -import { ButtonGroup } from '../../button-group'; -import { ActionSheet, ActionSheetHeader } from '../../action-sheet'; -import { MenuItem, MenuSeparator, MenuList } from '../../menu'; -import { ToolbarResizable, ToolbarSeparator } from '..'; - -const styles = ` - #test-area { - --kendo-actionsheet-height: 300px; - --kendo-actionsheet-max-height: 300px; - - width: 500px; - } - - #test-area > section { - height: 600px; - transform: translateZ(0); - } -`; - -export default () =>( - <> - -
- - Screen width <= 500px -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- -
- -); diff --git a/tests/_output/bootstrap/tabstrip/tabstrip-alignment.png b/tests/_output/bootstrap/tabstrip/tabstrip-alignment.png index 2d79ef3dca9..309a4525715 100644 Binary files a/tests/_output/bootstrap/tabstrip/tabstrip-alignment.png and b/tests/_output/bootstrap/tabstrip/tabstrip-alignment.png differ diff --git a/tests/_output/bootstrap/toolbar/toolbar-adaptive.png b/tests/_output/bootstrap/toolbar/toolbar-adaptive.png deleted file mode 100644 index 8e4b5c787c6..00000000000 Binary files a/tests/_output/bootstrap/toolbar/toolbar-adaptive.png and /dev/null differ diff --git a/tests/_output/bootstrap/toolbar/toolbar-fill-modes.png b/tests/_output/bootstrap/toolbar/toolbar-fill-modes.png index fdfe843fa71..51ebc112a95 100644 Binary files a/tests/_output/bootstrap/toolbar/toolbar-fill-modes.png and b/tests/_output/bootstrap/toolbar/toolbar-fill-modes.png differ diff --git a/tests/_output/bootstrap/toolbar/toolbar-scrollable-buttons-hidden.png b/tests/_output/bootstrap/toolbar/toolbar-scrollable-buttons-hidden.png index 8b146efa961..e16dfbf035e 100644 Binary files a/tests/_output/bootstrap/toolbar/toolbar-scrollable-buttons-hidden.png and b/tests/_output/bootstrap/toolbar/toolbar-scrollable-buttons-hidden.png differ diff --git a/tests/_output/classic/tabstrip/tabstrip-alignment.png b/tests/_output/classic/tabstrip/tabstrip-alignment.png index 858fa2b6528..cb378f63c05 100644 Binary files a/tests/_output/classic/tabstrip/tabstrip-alignment.png and b/tests/_output/classic/tabstrip/tabstrip-alignment.png differ diff --git a/tests/_output/classic/toolbar/toolbar-adaptive.png b/tests/_output/classic/toolbar/toolbar-adaptive.png deleted file mode 100644 index 3776962dca7..00000000000 Binary files a/tests/_output/classic/toolbar/toolbar-adaptive.png and /dev/null differ diff --git a/tests/_output/classic/toolbar/toolbar-fill-modes.png b/tests/_output/classic/toolbar/toolbar-fill-modes.png index 2c268a27a9e..feae392cf65 100644 Binary files a/tests/_output/classic/toolbar/toolbar-fill-modes.png and b/tests/_output/classic/toolbar/toolbar-fill-modes.png differ diff --git a/tests/_output/classic/toolbar/toolbar-scrollable-buttons-hidden.png b/tests/_output/classic/toolbar/toolbar-scrollable-buttons-hidden.png index 6ec088c1851..ca56c0aca98 100644 Binary files a/tests/_output/classic/toolbar/toolbar-scrollable-buttons-hidden.png and b/tests/_output/classic/toolbar/toolbar-scrollable-buttons-hidden.png differ diff --git a/tests/_output/default/tabstrip/tabstrip-alignment.png b/tests/_output/default/tabstrip/tabstrip-alignment.png index 43eef2033c7..01051480ed7 100644 Binary files a/tests/_output/default/tabstrip/tabstrip-alignment.png and b/tests/_output/default/tabstrip/tabstrip-alignment.png differ diff --git a/tests/_output/default/toolbar/toolbar-adaptive.png b/tests/_output/default/toolbar/toolbar-adaptive.png deleted file mode 100644 index 5697de1d4c7..00000000000 Binary files a/tests/_output/default/toolbar/toolbar-adaptive.png and /dev/null differ diff --git a/tests/_output/default/toolbar/toolbar-fill-modes.png b/tests/_output/default/toolbar/toolbar-fill-modes.png index b4f73d0210d..813087f120c 100644 Binary files a/tests/_output/default/toolbar/toolbar-fill-modes.png and b/tests/_output/default/toolbar/toolbar-fill-modes.png differ diff --git a/tests/_output/default/toolbar/toolbar-scrollable-buttons-hidden.png b/tests/_output/default/toolbar/toolbar-scrollable-buttons-hidden.png index 3e1e210c3fa..c19574768c7 100644 Binary files a/tests/_output/default/toolbar/toolbar-scrollable-buttons-hidden.png and b/tests/_output/default/toolbar/toolbar-scrollable-buttons-hidden.png differ diff --git a/tests/_output/fluent/tabstrip/tabstrip-alignment.png b/tests/_output/fluent/tabstrip/tabstrip-alignment.png index 5e2efb32f14..79134a32936 100644 Binary files a/tests/_output/fluent/tabstrip/tabstrip-alignment.png and b/tests/_output/fluent/tabstrip/tabstrip-alignment.png differ diff --git a/tests/_output/fluent/toolbar/toolbar-adaptive.png b/tests/_output/fluent/toolbar/toolbar-adaptive.png deleted file mode 100644 index ecdf92424af..00000000000 Binary files a/tests/_output/fluent/toolbar/toolbar-adaptive.png and /dev/null differ diff --git a/tests/_output/fluent/toolbar/toolbar-fill-modes.png b/tests/_output/fluent/toolbar/toolbar-fill-modes.png index 1195a94e22a..6b378ee3520 100644 Binary files a/tests/_output/fluent/toolbar/toolbar-fill-modes.png and b/tests/_output/fluent/toolbar/toolbar-fill-modes.png differ diff --git a/tests/_output/fluent/toolbar/toolbar-scrollable-buttons-hidden.png b/tests/_output/fluent/toolbar/toolbar-scrollable-buttons-hidden.png index aa9c9ef2b8b..c4caf598195 100644 Binary files a/tests/_output/fluent/toolbar/toolbar-scrollable-buttons-hidden.png and b/tests/_output/fluent/toolbar/toolbar-scrollable-buttons-hidden.png differ diff --git a/tests/_output/material/tabstrip/tabstrip-alignment.png b/tests/_output/material/tabstrip/tabstrip-alignment.png index 568e0450827..dc54a9e248d 100644 Binary files a/tests/_output/material/tabstrip/tabstrip-alignment.png and b/tests/_output/material/tabstrip/tabstrip-alignment.png differ diff --git a/tests/_output/material/toolbar/toolbar-adaptive.png b/tests/_output/material/toolbar/toolbar-adaptive.png deleted file mode 100644 index 90d9e0c8567..00000000000 Binary files a/tests/_output/material/toolbar/toolbar-adaptive.png and /dev/null differ diff --git a/tests/_output/material/toolbar/toolbar-fill-modes.png b/tests/_output/material/toolbar/toolbar-fill-modes.png index 2a4a1c8cad9..1fcb9924b27 100644 Binary files a/tests/_output/material/toolbar/toolbar-fill-modes.png and b/tests/_output/material/toolbar/toolbar-fill-modes.png differ diff --git a/tests/_output/material/toolbar/toolbar-scrollable-buttons-hidden.png b/tests/_output/material/toolbar/toolbar-scrollable-buttons-hidden.png index 4147fa47468..86f293ea100 100644 Binary files a/tests/_output/material/toolbar/toolbar-scrollable-buttons-hidden.png and b/tests/_output/material/toolbar/toolbar-scrollable-buttons-hidden.png differ diff --git a/tests/_output/nouvelle/toolbar/toolbar-adaptive.png b/tests/_output/nouvelle/toolbar/toolbar-adaptive.png deleted file mode 100644 index eb6d1e6a34f..00000000000 Binary files a/tests/_output/nouvelle/toolbar/toolbar-adaptive.png and /dev/null differ diff --git a/tests/_output/nouvelle/toolbar/toolbar-angular.png b/tests/_output/nouvelle/toolbar/toolbar-angular.png deleted file mode 100644 index 2d279880657..00000000000 Binary files a/tests/_output/nouvelle/toolbar/toolbar-angular.png and /dev/null differ diff --git a/tests/toolbar/toolbar-adaptive.html b/tests/toolbar/toolbar-adaptive.html deleted file mode 100644 index cf70c15d476..00000000000 --- a/tests/toolbar/toolbar-adaptive.html +++ /dev/null @@ -1,159 +0,0 @@ - - - - Document - - - - - - - - - -
- Screen width <= 500px -
-
-
- - - -
-
- -
-
-
-
-
-
-
-
-
Toolbar title
-
-
-
-
-
-
    -
  • - - - - - Left - -
    • -
  • - - - - - Center - -
    • -
  • - - - - - Right - -
    • -
  • - - - - - Justify - -
    • -
  • -
  • - - Font color - -
    • -
  • -
  • - - - - - Cut - -
    • -
  • - - - - - Copy - -
    • -
  • - - Paste - -
    • -
-
-
-
-
-
-
-
- -