From 5be1b1805657d9e93d210e7aa28455be3e901611 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marker=20dao=20=C2=AE=20=7C=20Roman=20Ty?= Date: Mon, 4 Sep 2023 18:02:12 +0400 Subject: [PATCH] fix(tabs && tabPanel): Fix indicator position --- .../scss/widgets/base/_tabPanel.scss | 8 ++++ .../widgets/material/tabPanel/_index.scss | 41 ++++++++++++++----- .../layout/tab/styling-mode/_primary.scss | 16 ++++---- .../widgets/material/tabs/mixins/_index.scss | 8 ++++ 4 files changed, 56 insertions(+), 17 deletions(-) diff --git a/packages/devextreme/scss/widgets/base/_tabPanel.scss b/packages/devextreme/scss/widgets/base/_tabPanel.scss index 265bb8f90b08..75735ec55b15 100644 --- a/packages/devextreme/scss/widgets/base/_tabPanel.scss +++ b/packages/devextreme/scss/widgets/base/_tabPanel.scss @@ -18,6 +18,10 @@ .dx-tabpanel-tabs-position-right { flex-direction: row-reverse; + + &.dx-rtl { + flex-direction: row; + } } .dx-tabpanel-tabs-position-bottom { @@ -26,6 +30,10 @@ .dx-tabpanel-tabs-position-left { flex-direction: row; + + &.dx-rtl { + flex-direction: row-reverse; + } } .dx-tabpanel-tabs { diff --git a/packages/devextreme/scss/widgets/material/tabPanel/_index.scss b/packages/devextreme/scss/widgets/material/tabPanel/_index.scss index 49a4c15ad91e..eaaf843d4899 100644 --- a/packages/devextreme/scss/widgets/material/tabPanel/_index.scss +++ b/packages/devextreme/scss/widgets/material/tabPanel/_index.scss @@ -4,6 +4,7 @@ @use "sizes" as *; @use "../sizes" as *; @use "../tabs/variables/colors" as *; +@use "../tabs/mixins" as *; @use "../../base/tabPanel"; // adduse @@ -21,20 +22,20 @@ .dx-tabpanel-tabs-position-top { .dx-tabs { - border-block-end: 1px solid $base-border-color; + border-bottom: 1px solid $base-border-color; @at-root #{selector-append(".dx-empty-collection", &)} { - border-block-end: none; + border-bottom: none; } } } .dx-tabpanel-tabs-position-bottom { .dx-tabs { - border-block-start: 1px solid $base-border-color; + border-top: 1px solid $base-border-color; @at-root #{selector-append(".dx-empty-collection", &)} { - border-block-start: none; + border-top: none; } } @@ -42,29 +43,49 @@ top: 0; bottom: unset; } + + .dx-tabs-styling-mode-secondary:not(.dx-tabs-vertical) { + .dx-tab-selected .dx-tab-content { + @include dx-tabs-indicator-secondary-base-mixin(top, $tabs-selected-tab-border-color); + + &.dx-state-disabled .dx-tab-content { + @include dx-tabs-indicator-secondary-base-mixin(top, $tabs-disabled-tab-border-color); + } + } + } } .dx-tabpanel-tabs-position-left { .dx-tabs { - border-inline-end: 1px solid $base-border-color; + border-right: 1px solid $base-border-color; @at-root #{selector-append(".dx-empty-collection", &)} { - border-inline-end: none; + border-right: none; } } } .dx-tabpanel-tabs-position-right { .dx-tabs { - border-inline-start: 1px solid $base-border-color; + border-left: 1px solid $base-border-color; @at-root #{selector-append(".dx-empty-collection", &)} { - border-inline-start: none; + border-left: none; } } .dx-tabpanel-tab.dx-tab-selected::after { - right: 0; - left: unset; + left: 0; + right: unset; + } + + .dx-tabs-styling-mode-secondary { + .dx-tab-selected { + @include dx-tabs-indicator-secondary-vertical-mixin(left, $tabs-selected-tab-border-color); + + &.dx-state-disabled { + @include dx-tabs-indicator-secondary-vertical-mixin(left, $tabs-disabled-tab-border-color); + } + } } } diff --git a/packages/devextreme/scss/widgets/material/tabs/layout/tab/styling-mode/_primary.scss b/packages/devextreme/scss/widgets/material/tabs/layout/tab/styling-mode/_primary.scss index 616200bc0753..da10094c2f88 100644 --- a/packages/devextreme/scss/widgets/material/tabs/layout/tab/styling-mode/_primary.scss +++ b/packages/devextreme/scss/widgets/material/tabs/layout/tab/styling-mode/_primary.scss @@ -15,20 +15,22 @@ .dx-tabs-styling-mode-primary { - .dx-tab.dx-tab-selected { - @include dx-tabs-indicator-primary-mixin(bottom, $tabs-selected-tab-border-color); - - &.dx-state-disabled { - @include dx-tabs-indicator-primary-mixin(bottom, $tabs-disabled-tab-border-color); + &:not(.dx-tabs-vertical) { + .dx-tab-selected { + @include dx-tabs-indicator-primary-mixin(bottom, $tabs-selected-tab-border-color); + + &.dx-state-disabled { + @include dx-tabs-indicator-primary-mixin(bottom, $tabs-disabled-tab-border-color); + } } } &.dx-tabs-vertical { .dx-tab-selected { - @include dx-tabs-indicator-primary-mixin(left, $tabs-selected-tab-border-color); + @include dx-tabs-indicator-primary-mixin(right, $tabs-selected-tab-border-color); &.dx-state-disabled { - @include dx-tabs-indicator-primary-mixin(left, $tabs-disabled-tab-border-color); + @include dx-tabs-indicator-primary-mixin(right, $tabs-disabled-tab-border-color); } } } diff --git a/packages/devextreme/scss/widgets/material/tabs/mixins/_index.scss b/packages/devextreme/scss/widgets/material/tabs/mixins/_index.scss index 3951e386029e..c7d48c6db3a1 100644 --- a/packages/devextreme/scss/widgets/material/tabs/mixins/_index.scss +++ b/packages/devextreme/scss/widgets/material/tabs/mixins/_index.scss @@ -51,10 +51,14 @@ top: -$material-tabs-item-padding-horizontal; border-bottom-right-radius: $material-indicator-border-radius-secondary; border-bottom-left-radius: $material-indicator-border-radius-secondary; + border-top-right-radius: unset; + border-top-left-radius: unset; } @else if $position == bottom { bottom: -$material-tabs-item-padding-horizontal; border-top-right-radius: $material-indicator-border-radius-secondary; border-top-left-radius: $material-indicator-border-radius-secondary; + border-bottom-right-radius: unset; + border-bottom-left-radius: unset; } } } @@ -72,10 +76,14 @@ right: 0; border-top-left-radius: $material-indicator-border-radius-secondary; border-bottom-left-radius: $material-indicator-border-radius-secondary; + border-top-right-radius: unset; + border-bottom-right-radius: unset; } @else if $position == left { left: 0; border-top-right-radius: $material-indicator-border-radius-secondary; border-bottom-right-radius: $material-indicator-border-radius-secondary; + border-top-left-radius: unset; + border-bottom-left-radius: unset; } } }