diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_base.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_base.scss index 736ad32a8ec0..b32e9c10e05b 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_base.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_base.scss @@ -33,9 +33,9 @@ border: $generic-tabs-border; } - &.dx-state-focused { - .dx-multiview-wrapper.dx-state-focused { - border-color: $tabs-focused-border-color; - } - } + // &.dx-state-focused { + // .dx-multiview-wrapper.dx-state-focused { + // border-color: $tabs-focused-border-color; + // } + // } } diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-top.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-top.scss index dc542ef3e73e..69411834e996 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-top.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-top.scss @@ -39,25 +39,25 @@ } } - &.dx-state-focused { - &.dx-disabled-focused-tab { - .dx-tabs-wrapper { - border-block-end: $generic-tabs-border; - } + // &.dx-state-focused { + // &.dx-disabled-focused-tab { + // .dx-tabs-wrapper { + // border-block-end: $generic-tabs-border; + // } - .dx-tabs-nav-button { - border-block-end: $generic-tabs-border; - } - } + // .dx-tabs-nav-button { + // border-block-end: $generic-tabs-border; + // } + // } - .dx-tabs-wrapper { - border-block-end: $generic-tabs-border-focus; - } + // .dx-tabs-wrapper { + // border-block-end: $generic-tabs-border-focus; + // } - .dx-tabs-nav-button { - border-block-end: $generic-tabs-border-focus; - } - } + // .dx-tabs-nav-button { + // border-block-end: $generic-tabs-border-focus; + // } + // } &:not(.dx-empty-collection) { .dx-multiview-wrapper { 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 index 6184d5d5379a..2eea943ee5bf 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_base.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_base.scss @@ -17,9 +17,9 @@ .dx-tabpanel-tab { padding: $generic-tabpanel-tabs-item-padding; - &.dx-state-focused::after { - border-color: $tabs-border-color; - } + // &.dx-state-focused::after { + // border-color: $tabs-border-color; + // } &.dx-state-disabled { &::after { diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-bottom.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-bottom.scss index c503a6e504f8..e51025aa0eec 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-bottom.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-bottom.scss @@ -14,36 +14,36 @@ .dx-tabpanel-tabs-position-bottom { .dx-tabpanel-tab { - &:first-child:not(.dx-state-focused, .dx-tab-selected) { - &.dx-state-hover { - @include dx-tabs-border-mixin( - $generic-tabpanel-tab-border-hover-bottom, - null, - null, - $generic-tabs-border-transparent, - ); - } - } + // &:first-child:not(.dx-state-focused, .dx-tab-selected) { + // &.dx-state-hover { + // @include dx-tabs-border-mixin( + // $generic-tabpanel-tab-border-hover-bottom, + // null, + // null, + // $generic-tabs-border-transparent, + // ); + // } + // } - &:last-child:not(.dx-state-focused, .dx-tab-selected) { - &.dx-state-hover { - @include dx-tabs-border-mixin( - $generic-tabpanel-tab-border-hover-bottom, - $generic-tabs-border-transparent, - null, - null, - ); - } - } + // &:last-child:not(.dx-state-focused, .dx-tab-selected) { + // &.dx-state-hover { + // @include dx-tabs-border-mixin( + // $generic-tabpanel-tab-border-hover-bottom, + // $generic-tabs-border-transparent, + // null, + // null, + // ); + // } + // } - &.dx-state-hover { - @include dx-tabs-border-mixin( - $generic-tabpanel-tab-border-hover-bottom, - null, - null, - null, - ); - } + // &.dx-state-hover { + // @include dx-tabs-border-mixin( + // $generic-tabpanel-tab-border-hover-bottom, + // null, + // null, + // null, + // ); + // } &.dx-tab-selected { @include dx-tabs-border-mixin( @@ -56,78 +56,80 @@ border-block-start: $generic-tabpanel-tab-border-selected-bottom; } - &.dx-state-active { - @include dx-tabs-border-mixin( - $generic-tabpanel-tab-border-active-bottom, - null, - null, - null, - ); - } + // &.dx-state-active { + // @include dx-tabs-border-mixin( + // $generic-tabpanel-tab-border-active-bottom, + // null, + // null, + // null, + // ); + // } - &.dx-state-focused:not(.dx-state-disabled) { - @include dx-tabs-border-mixin( - none, - null, - null, - null, - ); + // &.dx-state-focused:not(.dx-state-disabled) { + // @include dx-tabs-border-mixin( + // none, + // null, + // null, + // null, + // ); - border-block-start: $generic-tabpanel-tab-border-focused-bottom; - } + // border-block-start: $generic-tabpanel-tab-border-focused-bottom; + // } - &.dx-state-disabled:not(.dx-state-focused) { - @include dx-tabs-border-mixin( - null, - none, - null, - null, - ); + // &.dx-state-disabled:not(.dx-state-focused) { + // @include dx-tabs-border-mixin( + // null, + // none, + // null, + // null, + // ); - border-block-start: $generic-tabs-border; - } + // border-block-start: $generic-tabs-border; + // } - &.dx-state-disabled.dx-state-focused { - @include dx-tabs-border-mixin( - none, - null, - null, - null, - ); + // &.dx-state-disabled.dx-state-focused { + // @include dx-tabs-border-mixin( + // none, + // null, + // null, + // null, + // ); - border-block-start: $generic-tabs-border-focused-disabled-bottom; - } + // border-block-start: $generic-tabs-border-focused-disabled-bottom; + // } - &.dx-tab-selected, - &.dx-state-focused, - &.dx-state-disabled { + &.dx-tab-selected + // , + // &.dx-state-focused, + // &.dx-state-disabled + { margin-block-start: -$generic-tabs-border-width; } } - &.dx-state-focused { - &.dx-disabled-focused-tab { - .dx-tabpanel-tab.dx-state-disabled:not(.dx-state-focused) { - @include dx-tabs-border-mixin( - none, - null, - null, - null, - ); + // &.dx-state-focused { + // &.dx-disabled-focused-tab { + // .dx-tabpanel-tab.dx-state-disabled:not(.dx-state-focused) { + // @include dx-tabs-border-mixin( + // none, + // null, + // null, + // null, + // ); - border-block-start: $generic-tabs-border; - } - } + // border-block-start: $generic-tabs-border; + // } + // } - .dx-tabpanel-tab.dx-state-disabled:not(.dx-state-focused) { - @include dx-tabs-border-mixin( - null, - none, - null, - null, - ); + // .dx-tabpanel-tab.dx-state-disabled:not(.dx-state-focused) { + // @include dx-tabs-border-mixin( + // null, + // none, + // null, + // null, + // ); - border-block-start: $generic-tabs-border-focus; - } - } + // border-block-start: $generic-tabs-border-focus; + // } + // } } diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-left.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-left.scss index 5118c927a73c..8bac0d1d543e 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-left.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-left.scss @@ -14,36 +14,36 @@ .dx-tabpanel-tabs-position-left { .dx-tabpanel-tab { - &:first-child:not(.dx-state-focused, .dx-tab-selected) { - &.dx-state-hover { - @include dx-tabs-border-mixin( - null, - $generic-tabpanel-tab-border-hover-bottom, - $generic-tabs-border-transparent, - null, - ); - } - } + // &:first-child:not(.dx-state-focused, .dx-tab-selected) { + // &.dx-state-hover { + // @include dx-tabs-border-mixin( + // null, + // $generic-tabpanel-tab-border-hover-bottom, + // $generic-tabs-border-transparent, + // null, + // ); + // } + // } - &:last-child:not(.dx-state-focused, .dx-tab-selected) { - &.dx-state-hover { - @include dx-tabs-border-mixin( - $generic-tabs-border-transparent, - $generic-tabpanel-tab-border-hover-bottom, - null, - null, - ); - } - } + // &:last-child:not(.dx-state-focused, .dx-tab-selected) { + // &.dx-state-hover { + // @include dx-tabs-border-mixin( + // $generic-tabs-border-transparent, + // $generic-tabpanel-tab-border-hover-bottom, + // null, + // null, + // ); + // } + // } - &.dx-state-hover { - @include dx-tabs-border-mixin( - null, - $generic-tabpanel-tab-border-hover-bottom, - null, - null, - ); - } + // &.dx-state-hover { + // @include dx-tabs-border-mixin( + // null, + // $generic-tabpanel-tab-border-hover-bottom, + // null, + // null, + // ); + // } &.dx-tab-selected { @include dx-tabs-border-mixin( @@ -56,82 +56,83 @@ border-inline-end: $generic-tabpanel-tab-border-selected-bottom; } - &.dx-state-active { - @include dx-tabs-border-mixin( - null, - $generic-tabpanel-tab-border-active-bottom, - null, - null, - ); - } + // &.dx-state-active { + // @include dx-tabs-border-mixin( + // null, + // $generic-tabpanel-tab-border-active-bottom, + // null, + // null, + // ); + // } - &.dx-state-focused:not(.dx-state-disabled) { - @include dx-tabs-border-mixin( - null, - none, - null, - null, - ); + // &.dx-state-focused:not(.dx-state-disabled) { + // @include dx-tabs-border-mixin( + // null, + // none, + // null, + // null, + // ); - border-inline-end: $generic-tabpanel-tab-border-focused-bottom; - } + // border-inline-end: $generic-tabpanel-tab-border-focused-bottom; + // } - &.dx-state-disabled:not(.dx-state-focused) { - @include dx-tabs-border-mixin( - none, - null, - null, - null, - ); + // &.dx-state-disabled:not(.dx-state-focused) { + // @include dx-tabs-border-mixin( + // none, + // null, + // null, + // null, + // ); - border-inline-end: $generic-tabs-border; - } + // border-inline-end: $generic-tabs-border; + // } - &.dx-state-disabled.dx-state-focused { - @include dx-tabs-border-mixin( - null, - none, - null, - null, - ); + // &.dx-state-disabled.dx-state-focused { + // @include dx-tabs-border-mixin( + // null, + // none, + // null, + // null, + // ); - border-inline-end: $generic-tabs-border-focused-disabled-bottom; - } + // border-inline-end: $generic-tabs-border-focused-disabled-bottom; + // } - &.dx-tab-selected, - &.dx-state-focused, - &.dx-state-disabled { + &.dx-tab-selected + // &.dx-state-focused, + // &.dx-state-disabled + { margin-inline-end: -$generic-tabs-border-width; } } - &.dx-state-focused { - &.dx-disabled-focused-tab { - .dx-tabpanel-tab.dx-state-disabled:not(.dx-state-focused) { - @include dx-tabs-border-mixin( - null, - none, - null, - null, - ); + // &.dx-state-focused { + // &.dx-disabled-focused-tab { + // .dx-tabpanel-tab.dx-state-disabled:not(.dx-state-focused) { + // @include dx-tabs-border-mixin( + // null, + // none, + // null, + // null, + // ); - border-inline-end: $generic-tabs-border; - } - } + // border-inline-end: $generic-tabs-border; + // } + // } - .dx-tabpanel-tab.dx-state-disabled:not(.dx-state-focused) { - @include dx-tabs-border-mixin( - none, - null, - null, - null, - ); + // .dx-tabpanel-tab.dx-state-disabled:not(.dx-state-focused) { + // @include dx-tabs-border-mixin( + // none, + // null, + // null, + // null, + // ); - border-inline-end: $generic-tabs-border-focus; - } + // border-inline-end: $generic-tabs-border-focus; + // } - .dx-tabpanel-tab.dx-focused-disabled-next-tab::after { - border-inline-end: none; - } - } + // .dx-tabpanel-tab.dx-focused-disabled-next-tab::after { + // border-inline-end: none; + // } + // } } diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-right.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-right.scss index 9d771e6ba126..0063316f726f 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-right.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-right.scss @@ -14,36 +14,36 @@ .dx-tabpanel-tabs-position-right { .dx-tabpanel-tab { - &:first-child:not(.dx-state-focused, .dx-tab-selected) { - &.dx-state-hover { - @include dx-tabs-border-mixin( - null, - null, - $generic-tabs-border-transparent, - $generic-tabpanel-tab-border-hover-bottom, - ); - } - } + // &:first-child:not(.dx-state-focused, .dx-tab-selected) { + // &.dx-state-hover { + // @include dx-tabs-border-mixin( + // null, + // null, + // $generic-tabs-border-transparent, + // $generic-tabpanel-tab-border-hover-bottom, + // ); + // } + // } - &:last-child:not(.dx-state-focused, .dx-tab-selected) { - &.dx-state-hover { - @include dx-tabs-border-mixin( - $generic-tabs-border-transparent, - null, - null, - $generic-tabpanel-tab-border-hover-bottom, - ); - } - } + // &:last-child:not(.dx-state-focused, .dx-tab-selected) { + // &.dx-state-hover { + // @include dx-tabs-border-mixin( + // $generic-tabs-border-transparent, + // null, + // null, + // $generic-tabpanel-tab-border-hover-bottom, + // ); + // } + // } - &.dx-state-hover { - @include dx-tabs-border-mixin( - null, - null, - null, - $generic-tabpanel-tab-border-hover-bottom, - ); - } + // &.dx-state-hover { + // @include dx-tabs-border-mixin( + // null, + // null, + // null, + // $generic-tabpanel-tab-border-hover-bottom, + // ); + // } &.dx-tab-selected { @include dx-tabs-border-mixin( @@ -56,82 +56,83 @@ border-inline-start: $generic-tabpanel-tab-border-selected-bottom; } - &.dx-state-active { - @include dx-tabs-border-mixin( - null, - null, - null, - $generic-tabpanel-tab-border-active-bottom, - ); - } + // &.dx-state-active { + // @include dx-tabs-border-mixin( + // null, + // null, + // null, + // $generic-tabpanel-tab-border-active-bottom, + // ); + // } - &.dx-state-focused:not(.dx-state-disabled) { - @include dx-tabs-border-mixin( - null, - null, - null, - none, - ); + // &.dx-state-focused:not(.dx-state-disabled) { + // @include dx-tabs-border-mixin( + // null, + // null, + // null, + // none, + // ); - border-inline-start: $generic-tabpanel-tab-border-focused-bottom; - } + // border-inline-start: $generic-tabpanel-tab-border-focused-bottom; + // } - &.dx-state-disabled:not(.dx-state-focused) { - @include dx-tabs-border-mixin( - none, - null, - null, - null, - ); + // &.dx-state-disabled:not(.dx-state-focused) { + // @include dx-tabs-border-mixin( + // none, + // null, + // null, + // null, + // ); - border-inline-start: $generic-tabs-border; - } + // border-inline-start: $generic-tabs-border; + // } - &.dx-state-disabled.dx-state-focused { - @include dx-tabs-border-mixin( - null, - null, - null, - none, - ); + // &.dx-state-disabled.dx-state-focused { + // @include dx-tabs-border-mixin( + // null, + // null, + // null, + // none, + // ); - border-inline-start: $generic-tabs-border-focused-disabled-bottom; - } + // border-inline-start: $generic-tabs-border-focused-disabled-bottom; + // } - &.dx-tab-selected, - &.dx-state-focused, - &.dx-state-disabled { + &.dx-tab-selected { + // &.dx-state-focused, + // &.dx-state-disabled + margin-inline-start: -$generic-tabs-border-width; } } - &.dx-state-focused { - &.dx-disabled-focused-tab { - .dx-tabpanel-tab.dx-state-disabled:not(.dx-state-focused) { - @include dx-tabs-border-mixin( - null, - null, - null, - none, - ); + // &.dx-state-focused { + // &.dx-disabled-focused-tab { + // .dx-tabpanel-tab.dx-state-disabled:not(.dx-state-focused) { + // @include dx-tabs-border-mixin( + // null, + // null, + // null, + // none, + // ); - border-inline-start: $generic-tabs-border; - } - } + // border-inline-start: $generic-tabs-border; + // } + // } - .dx-tabpanel-tab.dx-state-disabled:not(.dx-state-focused) { - @include dx-tabs-border-mixin( - none, - null, - null, - null, - ); + // .dx-tabpanel-tab.dx-state-disabled:not(.dx-state-focused) { + // @include dx-tabs-border-mixin( + // none, + // null, + // null, + // null, + // ); - border-inline-start: $generic-tabs-border-focus; - } + // border-inline-start: $generic-tabs-border-focus; + // } - .dx-tabpanel-tab.dx-focused-disabled-next-tab::after { - border-inline-start: none; - } - } + // .dx-tabpanel-tab.dx-focused-disabled-next-tab::after { + // border-inline-start: none; + // } + // } } diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-top.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-top.scss index 60baae3d6460..69e54bb0285b 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-top.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-top.scss @@ -16,118 +16,121 @@ .dx-tabpanel-tab { &:first-child:not(.dx-state-focused, .dx-tab-selected) { &.dx-state-hover { - @include dx-tabs-border-mixin( - null, - null, - $generic-tabpanel-tab-border-hover-bottom, - $generic-tabs-border-transparent, - ); + // @include dx-tabs-border-mixin( + // null, + // null, + // $generic-tabpanel-tab-border-hover-bottom, + // $generic-tabs-border-transparent, + // ); } } - &:last-child:not(.dx-state-focused, .dx-tab-selected) { - &.dx-state-hover { - @include dx-tabs-border-mixin( - null, - $generic-tabs-border-transparent, - $generic-tabpanel-tab-border-hover-bottom, - null, - ); - } - } + // &:last-child:not(.dx-state-focused, .dx-tab-selected) { + // &.dx-state-hover { + // @include dx-tabs-border-mixin( + // null, + // $generic-tabs-border-transparent, + // $generic-tabpanel-tab-border-hover-bottom, + // null, + // ); + // } + // } - &.dx-state-hover { - @include dx-tabs-border-mixin( - null, - null, - $generic-tabpanel-tab-border-hover-bottom, - null, - ); - } + // &.dx-state-hover { + // @include dx-tabs-border-mixin( + // null, + // null, + // $generic-tabpanel-tab-border-hover-bottom, + // null, + // ); + // } &.dx-tab-selected { @include dx-tabs-border-mixin( null, null, - none, + $generic-tabpanel-tab-border-hover-bottom, null, ); border-block-end: $generic-tabpanel-tab-border-selected-bottom; } - &.dx-state-active { - @include dx-tabs-border-mixin( - null, - null, - $generic-tabpanel-tab-border-active-bottom, - null, - ); - } + // &.dx-state-active { + // @include dx-tabs-border-mixin( + // null, + // null, + // $generic-tabpanel-tab-border-active-bottom, + // null, + // ); + // } - &.dx-state-focused:not(.dx-state-disabled) { - @include dx-tabs-border-mixin( - null, - null, - none, - null, - ); + // &.dx-state-focused:not(.dx-state-disabled) { + // @include dx-tabs-border-mixin( + // null, + // null, + // null, + // null, + // ); - border-block-end: $generic-tabpanel-tab-border-focused-bottom; - } + // // border-block-end: $generic-tabpanel-tab-border-focused-bottom; + // } - &.dx-state-disabled:not(.dx-state-focused) { - @include dx-tabs-border-mixin( - null, - none, - null, - null, - ); + // &.dx-state-disabled:not(.dx-state-focused) { + // // @include dx-tabs-border-mixin( + // // null, + // // none, + // // null, + // // null, + // // ); - border-block-end: $generic-tabs-border; - } + // border-block-end: $generic-tabs-border; + // } - &.dx-state-disabled.dx-state-focused { - @include dx-tabs-border-mixin( - null, - null, - none, - null, - ); + // &.dx-state-disabled.dx-state-focused { + // // @include dx-tabs-border-mixin( + // // null, + // // null, + // // none, + // // null, + // // ); - border-block-end: $generic-tabs-border-focused-disabled-bottom; - } + // border-block-end: $generic-tabs-border-focused-disabled-bottom; + // } &.dx-tab-selected, - &.dx-state-focused, - &.dx-state-disabled { + // &.dx-state-focused, + // &.dx-state-disabled + { margin-bottom: -$generic-tabs-border-width; } + + } - &.dx-state-focused { - &.dx-disabled-focused-tab { - .dx-tabpanel-tab.dx-state-disabled:not(.dx-state-focused) { - @include dx-tabs-border-mixin( - null, - null, - none, - null, - ); + // &.dx-state-focused { + // &.dx-disabled-focused-tab { + // .dx-tabpanel-tab.dx-state-disabled:not(.dx-state-focused) { + // @include dx-tabs-border-mixin( + // null, + // null, + // none, + // null, + // ); - border-block-end: $generic-tabs-border; - } - } + // border-block-end: $generic-tabs-border; + // } + // } - .dx-tabpanel-tab.dx-state-disabled:not(.dx-state-focused) { - @include dx-tabs-border-mixin( - null, - none, - null, - null, - ); + // .dx-tabpanel-tab.dx-state-disabled:not(.dx-state-focused) { + // @include dx-tabs-border-mixin( + // null, + // none, + // null, + // null, + // ); - border-block-end: $generic-tabs-border-focus; - } - } + // border-block-end: $generic-tabs-border-focus; + // } + // } }