Skip to content

Commit

Permalink
refactor(tabs: styles)
Browse files Browse the repository at this point in the history
  • Loading branch information
@marker-dao
marker-dao committed Sep 4, 2023
1 parent 1df1200 commit 27d3e23
Show file tree
Hide file tree
Showing 4 changed files with 87 additions and 93 deletions.
8 changes: 4 additions & 4 deletions packages/devextreme/scss/widgets/material/tabs/layout/tab/styling-mode/_primary.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,19 +16,19 @@

.dx-tabs-styling-mode-primary {
.dx-tab.dx-tab-selected {
@include dx-tabs-border-mixin(bottom, $tabs-selected-tab-border-color);
@include dx-tabs-indicator-primary-mixin(bottom, $tabs-selected-tab-border-color);

&.dx-state-disabled {
@include dx-tabs-border-mixin(bottom, $tabs-disabled-tab-border-color);
@include dx-tabs-indicator-primary-mixin(bottom, $tabs-disabled-tab-border-color);
}
}

&.dx-tabs-vertical {
.dx-tab-selected {
@include dx-tabs-border-mixin(left, $tabs-selected-tab-border-color);
@include dx-tabs-indicator-primary-mixin(left, $tabs-selected-tab-border-color);

&.dx-state-disabled {
@include dx-tabs-border-mixin(left, $tabs-disabled-tab-border-color);
@include dx-tabs-indicator-primary-mixin(left, $tabs-disabled-tab-border-color);
}
}
}
Expand Down
50 changes: 16 additions & 34 deletions packages/devextreme/scss/widgets/material/tabs/layout/tab/styling-mode/_secondary.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,50 +16,32 @@

.dx-tabs-styling-mode-secondary {
.dx-tab .dx-tab-text {
text-transform: none;
text-transform: initial;
}

&.dx-tabs-vertical:not(.dx-rtl) {
.dx-tab-selected .dx-tab-content {
@include dx-tabs-border-mixin(right, $tabs-selected-tab-border-color, true);

&::after {
border-top-left-radius: unset;
top: $material-tabs-item-padding-horizontal;
height: calc(100% - 2 * $material-tabs-item-padding-horizontal);
right: 0;
}
}

.dx-tab-selected.dx-state-disabled .dx-tab-content {
@include dx-tabs-border-mixin(right, $tabs-disabled-tab-border-color, true);
}
.dx-tab-content {
position: relative;
}
}

.dx-rtl.dx-tabs-styling-mode-secondary.dx-tabs-vertical {
.dx-tab-selected .dx-tab-content {
@include dx-tabs-border-mixin(left, $tabs-selected-tab-border-color, true);

&::after {
border-top-left-radius: unset;
top: $material-tabs-item-padding-horizontal;
height: calc(100% - 2 * $material-tabs-item-padding-horizontal);
left: 0;
}
.dx-tabs-styling-mode-secondary:not(.dx-tabs-vertical) {
.dx-tab.dx-tab-selected .dx-tab-content {
@include dx-tabs-indicator-secondary-base-mixin(bottom, $tabs-selected-tab-border-color);
}
}

.dx-tabs-styling-mode-secondary:not(.dx-tabs-vertical) {
.dx-tab-content {
position: relative;
.dx-tab.dx-state-disabled .dx-tab-content {
@include dx-tabs-indicator-secondary-base-mixin(bottom, $tabs-disabled-tab-border-color);
}
}

.dx-tab.dx-tab-selected .dx-tab-content {
@include dx-tabs-border-mixin(bottom, $tabs-selected-tab-border-color, true);
.dx-tabs-vertical {
&.dx-tabs-styling-mode-secondary {
.dx-tab-selected {
@include dx-tabs-indicator-secondary-vertical-mixin(right, $tabs-selected-tab-border-color);
}

&.dx-state-disabled .dx-tab-content {
@include dx-tabs-border-mixin(bottom, $tabs-disabled-tab-border-color, true);
.dx-tab-selected.dx-state-disabled {
@include dx-tabs-indicator-secondary-vertical-mixin(right, $tabs-disabled-tab-border-color);
}
}
}
114 changes: 59 additions & 55 deletions packages/devextreme/scss/widgets/material/tabs/mixins/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,75 +3,79 @@
// adduse


@mixin dx-tabs-border-mixin($position, $color, $expanded: false) {
@mixin dx-tabs-indicator-primary-mixin($position, $color) {
&::after {
content: "";
position: absolute;
background-color: $color;

@if $position == bottom {
left: 0;
width: 100%;

@if $expanded {
bottom: -$material-tabs-item-padding-horizontal;
height: 3px;

// TODO: Move to variable
border-top-right-radius: 8px;
border-top-left-radius: 8px;
} @else {
bottom: 0;
height: 2px;
}
} @else if $position == top {
@if $position == top {
top: 0;
right: 0;
left: 0;
width: $material-indicator-length-primary;
height: $material-indicator-thickness-primary;
} @else if $position == right {
top: 0;
right: 0;
width: 100%;

@if $expanded {
top: -$material-tabs-item-padding-horizontal;
height: 3px;

// TODO: Move to variable
border-top-right-radius: 8px;
border-top-left-radius: 8px;
} @else {
top: 0;
height: 2px;
}
bottom: 0;
height: $material-indicator-length-primary;
width: $material-indicator-thickness-primary;
} @else if $position == bottom {
right: 0;
bottom: 0;
left: 0;
width: $material-indicator-length-primary;
height: $material-indicator-thickness-primary;
} @else if $position == left {
top: 0;
bottom: 0;
height: 100%;
left: 0;
height: $material-indicator-length-primary;
width: $material-indicator-thickness-primary;
}
}
}

@if $expanded {
left: -$material-tabs-item-padding-vertical;
width: 3px;
@mixin dx-tabs-indicator-secondary-base-mixin($position, $color) {
&::after {
content: "";
position: absolute;
right: 0;
left: 0;
width: $material-indicator-length-secondary;
height: $material-indicator-thickness-secondary;
background-color: $color;

// TODO: Move to variable
border-top-right-radius: 8px !important;
border-bottom-right-radius: 8px !important;
} @else {
left: 0;
width: 2px;
}
} @else if $position == right {
top: 0;
bottom: 0;
height: 100%;
@if $position == top {
top: -$material-tabs-item-padding-horizontal;
border-bottom-right-radius: $material-indicator-border-radius-secondary;
border-bottom-left-radius: $material-indicator-border-radius-secondary;
} @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;
}
}
}

@if $expanded {
right: -$material-tabs-item-padding-vertical;
width: 3px;
@mixin dx-tabs-indicator-secondary-vertical-mixin($position, $color) {
&::after {
content: "";
position: absolute;
top: $material-tabs-item-padding-horizontal;
width: $material-indicator-thickness-secondary;
height: calc($material-indicator-length-secondary - 2 * $material-tabs-item-padding-horizontal);
background-color: $color;

// TODO: Move to variable
border-top-left-radius: 8px !important;
border-bottom-left-radius: 8px !important;
} @else {
right: 0;
width: 2px;
}
@if $position == right {
right: 0;
border-top-left-radius: $material-indicator-border-radius-secondary;
border-bottom-left-radius: $material-indicator-border-radius-secondary;
} @else if $position == left {
left: 0;
border-top-right-radius: $material-indicator-border-radius-secondary;
border-bottom-right-radius: $material-indicator-border-radius-secondary;
}
}
}
8 changes: 8 additions & 0 deletions packages/devextreme/scss/widgets/material/tabs/variables/_sizes.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,14 @@ $material-tab-nav-button-content-padding: null !default;

$material-tab-vertical-nav-button-content-padding: null !default;

$material-indicator-thickness-primary: 2px !default;
$material-indicator-thickness-secondary: 3px !default;

$material-indicator-length-primary: 100% !default;
$material-indicator-length-secondary: 100% !default;

$material-indicator-border-radius-secondary: 8px !default;

@if $size == "default" {
$material-tabs-item-padding: 10px 16px !default;
$material-tab-height: auto !default;
Expand Down

0 comments on commit 27d3e23

Please sign in to comment.