Tabs: orientation selector was simplified from :not(.dx-tabs-vertical) to .dx-tabs-horizontal (#30150)

pharret31 · web-flow · commit 4f2e2b8f2622 · 2025-06-17T15:38:27.000+04:00
diff --git a/packages/devextreme-scss/scss/widgets/base/_tabs.scss b/packages/devextreme-scss/scss/widgets/base/_tabs.scss
@@ -75,7 +75,7 @@
   }
 }
 
-.dx-tabs:not(.dx-tabs-vertical) .dx-tabs-scrollable .dx-tab {
+.dx-tabs.dx-tabs-horizontal .dx-tabs-scrollable .dx-tab {
   flex-basis: 100%;
   min-width: max-content;
 }
@@ -125,7 +125,7 @@
 }
 
 .dx-rtl {
-  &.dx-tabs:not(.dx-tabs-vertical) {
+  &.dx-tabs.dx-tabs-horizontal{
     flex-direction: row-reverse;
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_base.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_base.scss
@@ -24,13 +24,13 @@
   }
 }
 
-.dx-tabpanel-tabs .dx-tabs:not(.dx-tabs-vertical) {
+.dx-tabpanel-tabs .dx-tabs.dx-tabs-horizontal {
   .dx-tabpanel-tab {
     max-width: $generic-tabpanel-tabs-item-width;
   }
 }
 
-.dx-tabs-nav-buttons:not(.dx-tabs-vertical) {
+.dx-tabs-nav-buttons.dx-tabs-horizontal {
   .dx-tabpanel-tab {
     width: $generic-tabpanel-tabs-item-width;
     max-width: unset;
diff --git a/packages/devextreme-scss/scss/widgets/material/tabs/layout/tab/styling-mode/_primary.scss b/packages/devextreme-scss/scss/widgets/material/tabs/layout/tab/styling-mode/_primary.scss
@@ -15,7 +15,7 @@
 
 
 .dx-tabs-styling-mode-primary {
-  &.dx-tabs:not(.dx-tabs-vertical) .dx-tabs-scrollable .dx-tab {
+  &.dx-tabs.dx-tabs-horizontal .dx-tabs-scrollable .dx-tab {
     flex-basis: auto;
     min-width: $material-tab-min-width;
   }

Original file line number	Diff line number	Diff line change
`@@ -75,7 +75,7 @@`
`75`	`75`	`}`
`76`	`76`	`}`
`77`	`77`
`78`		`-.dx-tabs:not(.dx-tabs-vertical) .dx-tabs-scrollable .dx-tab {`
	`78`	`+.dx-tabs.dx-tabs-horizontal .dx-tabs-scrollable .dx-tab {`
`79`	`79`	`flex-basis: 100%;`
`80`	`80`	`min-width: max-content;`
`81`	`81`	`}`
`@@ -125,7 +125,7 @@`
`125`	`125`	`}`
`126`	`126`
`127`	`127`	`.dx-rtl {`
`128`		`- &.dx-tabs:not(.dx-tabs-vertical) {`
	`128`	`+ &.dx-tabs.dx-tabs-horizontal{`
`129`	`129`	`flex-direction: row-reverse;`
`130`	`130`	`}`
`131`	`131`	`}`
Original file line number	Diff line number	Diff line change
`@@ -24,13 +24,13 @@`
`24`	`24`	`}`
`25`	`25`	`}`
`26`	`26`
`27`		`-.dx-tabpanel-tabs .dx-tabs:not(.dx-tabs-vertical) {`
	`27`	`+.dx-tabpanel-tabs .dx-tabs.dx-tabs-horizontal {`
`28`	`28`	`.dx-tabpanel-tab {`
`29`	`29`	`max-width: $generic-tabpanel-tabs-item-width;`
`30`	`30`	`}`
`31`	`31`	`}`
`32`	`32`
`33`		`-.dx-tabs-nav-buttons:not(.dx-tabs-vertical) {`
	`33`	`+.dx-tabs-nav-buttons.dx-tabs-horizontal {`
`34`	`34`	`.dx-tabpanel-tab {`
`35`	`35`	`width: $generic-tabpanel-tabs-item-width;`
`36`	`36`	`max-width: unset;`
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@`
`15`	`15`
`16`	`16`
`17`	`17`	`.dx-tabs-styling-mode-primary {`
`18`		`- &.dx-tabs:not(.dx-tabs-vertical) .dx-tabs-scrollable .dx-tab {`
	`18`	`+ &.dx-tabs.dx-tabs-horizontal .dx-tabs-scrollable .dx-tab {`
`19`	`19`	`flex-basis: auto;`
`20`	`20`	`min-width: $material-tab-min-width;`
`21`	`21`	`}`