Skip to content

Commit

Permalink
TabPanel: support focused but not selected state in Generic
Browse files Browse the repository at this point in the history
  • Loading branch information
@EugeniyKiyashko
EugeniyKiyashko committed Sep 4, 2024
1 parent 536fcb8 commit 6e86fd2
Show file tree
Hide file tree
Showing 7 changed files with 385 additions and 378 deletions.
10 changes: 5 additions & 5 deletions packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
// }
// }
}
32 changes: 16 additions & 16 deletions packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-top.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
6 changes: 3 additions & 3 deletions packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
178 changes: 90 additions & 88 deletions packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-bottom.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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;
// }
// }
}
Loading

0 comments on commit 6e86fd2

Please sign in to comment.