fix(tabs && tabPanel): Fix indicator position

DevExpress · Sep 7, 2023 · 5be1b18 · 5be1b18
1 parent 91253da
commit 5be1b18
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 17 deletions.
diff --git 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
@@ -4,6 +4,7 @@
 @use "sizes" as *;
 @use "../sizes" as *;
 @use "../tabs/variables/colors" as *;
+@use "../tabs/mixins" as *;
 @use "../../base/tabPanel";
 
 // adduse
@@ -21,50 +22,70 @@
 
 .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;
     }
   }
 
   .dx-tabpanel-tab.dx-tab-selected::after {
     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
@@ -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
@@ -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;
     }
   }
 }