Skip to content

Commit

Permalink
Tabs/TabPanel: Add stylingMode, iconPosition in Fluent
Browse files Browse the repository at this point in the history
  • Loading branch information
@marker-dao
marker-dao authored Sep 8, 2023
1 parent 8a4fca7 commit 550a36d
Show file tree
Hide file tree
Showing 10 changed files with 403 additions and 193 deletions.
43 changes: 32 additions & 11 deletions packages/devextreme/scss/widgets/fluent/tabPanel/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
@use "../colors" as *;
@use "sizes" as *;
@use "../sizes" as *;
@use "../tabs/colors" as *;
@use "../tabs/variables/colors" as *;
@use "../tabs/mixins" as *;
@use "../../base/tabPanel";

// adduse
Expand All @@ -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);
}
}
}
}
177 changes: 6 additions & 171 deletions packages/devextreme/scss/widgets/fluent/tabs/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,178 +5,13 @@
@use "../button/mixins" as *;
@use "../../base/icons" as *;
@use "../../base/tabs";
@use "colors" as *;
@use "sizes" as *;
@use "variables/colors" as *;
@use "variables/sizes" as *;
@use "mixins" as *;
@use "layout/tabs" as *;
@use "layout/tab/base" as *;
@use "layout/navigation-button/base" as *;

// adduse
@use "../scrollable";
@use "../badge";


@mixin dx-tabs-border-mixin($position, $color) {
&::after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: $color;

@if $position == bottom {
top: unset;
height: 2px;
width: auto;
} @else if $position == top {
bottom: unset;
height: 2px;
width: auto;
} @else if $position == left {
right: unset;
width: 2px;
height: auto;
} @else if $position == right {
left: unset;
width: 2px;
height: auto;
}
}
}

.dx-tab {
padding: $fluent-tabs-item-padding;
min-width: $fluent-tab-min-width;
background-color: $tabs-tab-background;
color: $tabs-tab-color;

&.dx-state-hover {
background-color: $tabs-hovered-tab-bg-color;
}

&.dx-tab-selected {
color: $tabs-tab-selected-color;

@include dx-tabs-border-mixin(bottom, $tabs-selected-tab-border-color);

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

.dx-icon {
color: $tabs-tab-icon-selected-color;
}
}

&.dx-state-focused {
background-color: $tabs-focused-tab-bg-color;
}


&.dx-state-disabled {
color: $tabs-tab-disabled-color;

.dx-icon {
color: $tabs-tab-icon-disabled-color;
}
}

&.dx-state-active,
&.dx-state-active .dx-inkripple-wave {
background-color: $tabs-active-tab-bg-color;
}

.dx-tab-text {
flex-direction: column;
text-transform: uppercase;
line-height: $fluent-tab-text-line-height;
font-weight: 500;
}

.dx-icon {
color: $tabs-tab-icon-color;

@include dx-icon-sizing($fluent-base-icon-size);
}
}

.dx-tabs {
padding: 0;
background-color: $tabs-tab-background;

.dx-inkripple {
overflow: hidden;
}

.dx-scrollable {
flex-basis: 100%;
}
}

.dx-tabs-nav-button {
border: none;
background-color: $tabs-tab-background;
height: $fluent-tab-height;
border-radius: 0;
box-shadow: none;

&.dx-button.dx-tabs-nav-button.dx-button-has-icon:not(.dx-button-has-text) {
@include dx-button-flat-color-styling(
$base-icon-color,
$fluent-tabs-nav-button-background,
$fluent-tabs-nav-button-background,
$fluent-tabs-nav-button-background,
);

border-radius: 0;

.dx-inkripple-wave {
background-color: $fluent-tabs-nav-button-background;
}
}

&.dx-button-has-icon .dx-icon {
width: $fluent-tab-nav-button-icon-width;
height: $fluent-tab-nav-button-icon-height;
font-size: $fluent-tab-nav-button-icon-font-size;
}

&.dx-state-active {
border: none;
}

&.dx-state-disabled {
opacity: 1;
background-color: $tabs-tab-background;

.dx-button-content {
opacity: $tabs-tab-button-disabled-opacity;
}
}

.dx-button-content {
flex: unset;
padding: $fluent-tab-nav-button-content-padding;
}
}

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

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

.dx-tab-text {
flex-direction: row;

.dx-icon {
@include dx-icon-margin($fluent-base-icon-margin-right);
}
}

.dx-tabs-nav-button {
padding: $fluent-tab-vertical-nav-button-content-padding;
}
}
68 changes: 68 additions & 0 deletions packages/devextreme/scss/widgets/fluent/tabs/layout/navigation-button/_base.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
@use "sass:color";
@use "../../../colors" as *;
@use "../../../sizes" as *;
@use "../../../button/colors" as *;
@use "../../../button/mixins" as *;
@use "../../../../base/icons" as *;
@use "../../../../base/tabs";
@use "../../variables/colors" as *;
@use "../../variables/sizes" as *;
@use "../../mixins" as *;

// adduse
@use "../../../scrollable";
@use "../../../badge";


.dx-tabs-nav-button {
border: none;
background-color: $tabs-tab-background;
height: $fluent-tab-height;
border-radius: 0;
box-shadow: none;

&.dx-button.dx-tabs-nav-button.dx-button-has-icon:not(.dx-button-has-text) {
@include dx-button-flat-color-styling(
$base-icon-color,
$fluent-tabs-nav-button-background,
$fluent-tabs-nav-button-background,
$fluent-tabs-nav-button-background,
);

border-radius: 0;

.dx-inkripple-wave {
background-color: $fluent-tabs-nav-button-background;
}
}

&.dx-button-has-icon .dx-icon {
width: $fluent-tab-nav-button-icon-width;
height: $fluent-tab-nav-button-icon-height;
font-size: $fluent-tab-nav-button-icon-font-size;
}

&.dx-state-active {
border: none;
}

&.dx-state-disabled {
opacity: 1;
background-color: $tabs-tab-background;

.dx-button-content {
opacity: $tabs-tab-button-disabled-opacity;
}
}

.dx-button-content {
flex: unset;
padding: $fluent-tab-nav-button-content-padding;
}
}

.dx-tabs-vertical {
.dx-tabs-nav-button {
padding: $fluent-tab-vertical-nav-button-content-padding;
}
}
Loading

0 comments on commit 550a36d

Please sign in to comment.