From 550a36da6af1b530b61624965a4e88d64aa73ade Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marker=20dao=20=C2=AE?= Date: Fri, 8 Sep 2023 15:41:13 +0400 Subject: [PATCH] Tabs/TabPanel: Add stylingMode, iconPosition in Fluent --- .../scss/widgets/fluent/tabPanel/_index.scss | 43 +++-- .../scss/widgets/fluent/tabs/_index.scss | 177 +----------------- .../tabs/layout/navigation-button/_base.scss | 68 +++++++ .../widgets/fluent/tabs/layout/tab/_base.scss | 74 ++++++++ .../layout/tab/styling-mode/_primary.scss | 37 ++++ .../layout/tab/styling-mode/_secondary.scss | 47 +++++ .../fluent/tabs/layout/tabs/_index.scss | 28 +++ .../widgets/fluent/tabs/mixins/_index.scss | 89 +++++++++ .../fluent/tabs/{ => variables}/_colors.scss | 4 +- .../fluent/tabs/{ => variables}/_sizes.scss | 29 ++- 10 files changed, 403 insertions(+), 193 deletions(-) create mode 100644 packages/devextreme/scss/widgets/fluent/tabs/layout/navigation-button/_base.scss create mode 100644 packages/devextreme/scss/widgets/fluent/tabs/layout/tab/_base.scss create mode 100644 packages/devextreme/scss/widgets/fluent/tabs/layout/tab/styling-mode/_primary.scss create mode 100644 packages/devextreme/scss/widgets/fluent/tabs/layout/tab/styling-mode/_secondary.scss create mode 100644 packages/devextreme/scss/widgets/fluent/tabs/layout/tabs/_index.scss create mode 100644 packages/devextreme/scss/widgets/fluent/tabs/mixins/_index.scss rename packages/devextreme/scss/widgets/fluent/tabs/{ => variables}/_colors.scss (96%) rename packages/devextreme/scss/widgets/fluent/tabs/{ => variables}/_sizes.scss (58%) diff --git a/packages/devextreme/scss/widgets/fluent/tabPanel/_index.scss b/packages/devextreme/scss/widgets/fluent/tabPanel/_index.scss index a641e5580f9c..eaaf843d4899 100644 --- a/packages/devextreme/scss/widgets/fluent/tabPanel/_index.scss +++ b/packages/devextreme/scss/widgets/fluent/tabPanel/_index.scss @@ -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 @@ -21,20 +22,20 @@ .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; } } @@ -42,29 +43,49 @@ 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); + } + } } } diff --git a/packages/devextreme/scss/widgets/fluent/tabs/_index.scss b/packages/devextreme/scss/widgets/fluent/tabs/_index.scss index 90557ab5c122..fa099b6e8420 100644 --- a/packages/devextreme/scss/widgets/fluent/tabs/_index.scss +++ b/packages/devextreme/scss/widgets/fluent/tabs/_index.scss @@ -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; - } -} diff --git a/packages/devextreme/scss/widgets/fluent/tabs/layout/navigation-button/_base.scss b/packages/devextreme/scss/widgets/fluent/tabs/layout/navigation-button/_base.scss new file mode 100644 index 000000000000..e22dd395044a --- /dev/null +++ b/packages/devextreme/scss/widgets/fluent/tabs/layout/navigation-button/_base.scss @@ -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; + } +} diff --git a/packages/devextreme/scss/widgets/fluent/tabs/layout/tab/_base.scss b/packages/devextreme/scss/widgets/fluent/tabs/layout/tab/_base.scss new file mode 100644 index 000000000000..839a8aa03c57 --- /dev/null +++ b/packages/devextreme/scss/widgets/fluent/tabs/layout/tab/_base.scss @@ -0,0 +1,74 @@ +@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"; +@import "styling-mode/primary"; +@import "styling-mode/secondary"; + + +.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; + + .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 { + 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-icon-position-start .dx-tab .dx-icon { + @include dx-icon-margin($fluent-base-icon-margin, start); +} + +.dx-tabs-icon-position-end .dx-tab .dx-icon { + @include dx-icon-margin($fluent-base-icon-margin, end); +} diff --git a/packages/devextreme/scss/widgets/fluent/tabs/layout/tab/styling-mode/_primary.scss b/packages/devextreme/scss/widgets/fluent/tabs/layout/tab/styling-mode/_primary.scss new file mode 100644 index 000000000000..da10094c2f88 --- /dev/null +++ b/packages/devextreme/scss/widgets/fluent/tabs/layout/tab/styling-mode/_primary.scss @@ -0,0 +1,37 @@ +@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-styling-mode-primary { + &:not(.dx-tabs-vertical) { + .dx-tab-selected { + @include dx-tabs-indicator-primary-mixin(bottom, $tabs-selected-tab-border-color); + + &.dx-state-disabled { + @include dx-tabs-indicator-primary-mixin(bottom, $tabs-disabled-tab-border-color); + } + } + } + + &.dx-tabs-vertical { + .dx-tab-selected { + @include dx-tabs-indicator-primary-mixin(right, $tabs-selected-tab-border-color); + + &.dx-state-disabled { + @include dx-tabs-indicator-primary-mixin(right, $tabs-disabled-tab-border-color); + } + } + } +} diff --git a/packages/devextreme/scss/widgets/fluent/tabs/layout/tab/styling-mode/_secondary.scss b/packages/devextreme/scss/widgets/fluent/tabs/layout/tab/styling-mode/_secondary.scss new file mode 100644 index 000000000000..a139818fe8a6 --- /dev/null +++ b/packages/devextreme/scss/widgets/fluent/tabs/layout/tab/styling-mode/_secondary.scss @@ -0,0 +1,47 @@ +@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-styling-mode-secondary { + .dx-tab .dx-tab-text { + text-transform: initial; + } + + .dx-tab-content { + position: relative; + } +} + +.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-tab.dx-state-disabled .dx-tab-content { + @include dx-tabs-indicator-secondary-base-mixin(bottom, $tabs-disabled-tab-border-color); + } +} + +.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-tab-selected.dx-state-disabled { + @include dx-tabs-indicator-secondary-vertical-mixin(right, $tabs-disabled-tab-border-color); + } + } +} diff --git a/packages/devextreme/scss/widgets/fluent/tabs/layout/tabs/_index.scss b/packages/devextreme/scss/widgets/fluent/tabs/layout/tabs/_index.scss new file mode 100644 index 000000000000..ff371a3f2c8e --- /dev/null +++ b/packages/devextreme/scss/widgets/fluent/tabs/layout/tabs/_index.scss @@ -0,0 +1,28 @@ +@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 { + padding: 0; + background-color: $tabs-tab-background; + + .dx-inkripple { + overflow: hidden; + } + + .dx-scrollable { + flex-basis: 100%; + } +} diff --git a/packages/devextreme/scss/widgets/fluent/tabs/mixins/_index.scss b/packages/devextreme/scss/widgets/fluent/tabs/mixins/_index.scss new file mode 100644 index 000000000000..b261e9695e1b --- /dev/null +++ b/packages/devextreme/scss/widgets/fluent/tabs/mixins/_index.scss @@ -0,0 +1,89 @@ +@use "../variables/sizes" as *; + +// adduse + + +@mixin dx-tabs-indicator-primary-mixin($position, $color) { + &::after { + content: ""; + position: absolute; + background-color: $color; + + @if $position == top { + top: 0; + right: 0; + left: 0; + width: $fluent-indicator-length-primary; + height: $fluent-indicator-thickness-primary; + } @else if $position == right { + top: 0; + right: 0; + bottom: 0; + height: $fluent-indicator-length-primary; + width: $fluent-indicator-thickness-primary; + } @else if $position == bottom { + right: 0; + bottom: 0; + left: 0; + width: $fluent-indicator-length-primary; + height: $fluent-indicator-thickness-primary; + } @else if $position == left { + top: 0; + bottom: 0; + left: 0; + height: $fluent-indicator-length-primary; + width: $fluent-indicator-thickness-primary; + } + } +} + +@mixin dx-tabs-indicator-secondary-base-mixin($position, $color) { + &::after { + content: ""; + position: absolute; + right: 0; + left: 0; + width: $fluent-indicator-length-secondary; + height: $fluent-indicator-thickness-secondary; + background-color: $color; + + @if $position == top { + top: -$fluent-tabs-item-padding-horizontal; + border-bottom-right-radius: $fluent-indicator-border-radius-secondary; + border-bottom-left-radius: $fluent-indicator-border-radius-secondary; + border-top-right-radius: unset; + border-top-left-radius: unset; + } @else if $position == bottom { + bottom: -$fluent-tabs-item-padding-horizontal; + border-top-right-radius: $fluent-indicator-border-radius-secondary; + border-top-left-radius: $fluent-indicator-border-radius-secondary; + border-bottom-right-radius: unset; + border-bottom-left-radius: unset; + } + } +} + +@mixin dx-tabs-indicator-secondary-vertical-mixin($position, $color) { + &::after { + content: ""; + position: absolute; + top: $fluent-tabs-item-padding-horizontal; + width: $fluent-indicator-thickness-secondary; + height: calc($fluent-indicator-length-secondary - 2 * $fluent-tabs-item-padding-horizontal); + background-color: $color; + + @if $position == right { + right: 0; + border-top-left-radius: $fluent-indicator-border-radius-secondary; + border-bottom-left-radius: $fluent-indicator-border-radius-secondary; + border-top-right-radius: unset; + border-bottom-right-radius: unset; + } @else if $position == left { + left: 0; + border-top-right-radius: $fluent-indicator-border-radius-secondary; + border-bottom-right-radius: $fluent-indicator-border-radius-secondary; + border-top-left-radius: unset; + border-bottom-left-radius: unset; + } + } +} diff --git a/packages/devextreme/scss/widgets/fluent/tabs/_colors.scss b/packages/devextreme/scss/widgets/fluent/tabs/variables/_colors.scss similarity index 96% rename from packages/devextreme/scss/widgets/fluent/tabs/_colors.scss rename to packages/devextreme/scss/widgets/fluent/tabs/variables/_colors.scss index 12f7a1d99558..5fd67f8484b4 100644 --- a/packages/devextreme/scss/widgets/fluent/tabs/_colors.scss +++ b/packages/devextreme/scss/widgets/fluent/tabs/variables/_colors.scss @@ -1,6 +1,6 @@ @use "sass:color"; -@use "../colors" as *; -@use "../button/colors" as *; +@use "../../colors" as *; +@use "../../button/colors" as *; // adduse diff --git a/packages/devextreme/scss/widgets/fluent/tabs/_sizes.scss b/packages/devextreme/scss/widgets/fluent/tabs/variables/_sizes.scss similarity index 58% rename from packages/devextreme/scss/widgets/fluent/tabs/_sizes.scss rename to packages/devextreme/scss/widgets/fluent/tabs/variables/_sizes.scss index eca0ba649b53..170dfd737ed2 100644 --- a/packages/devextreme/scss/widgets/fluent/tabs/_sizes.scss +++ b/packages/devextreme/scss/widgets/fluent/tabs/variables/_sizes.scss @@ -1,15 +1,16 @@ -@use "../sizes" as *; +@use "../../sizes" as *; // adduse $fluent-tabs-item-padding: null !default; +$fluent-tabs-item-padding-horizontal: null !default; +$fluent-tabs-item-padding-vertical: null !default; $fluent-tab-height: null !default; $fluent-tab-min-width: null !default; $fluent-tab-text-line-height: null !default; -$fluent-base-icon-margin-right: null !default; -$fluent-base-icon-margin-bottom: null !default; +$fluent-base-icon-margin: null !default; $fluent-tab-nav-button-icon-width: null !default; $fluent-tab-nav-button-icon-height: null !default; @@ -18,12 +19,21 @@ $fluent-tab-nav-button-content-padding: null !default; $fluent-tab-vertical-nav-button-content-padding: null !default; +$fluent-indicator-thickness-primary: 2px !default; +$fluent-indicator-thickness-secondary: 3px !default; + +$fluent-indicator-length-primary: 100% !default; +$fluent-indicator-length-secondary: 100% !default; + +$fluent-indicator-border-radius-secondary: 8px !default; + @if $size == "default" { - $fluent-tabs-item-padding: 12px 16px !default; + $fluent-tabs-item-padding-horizontal: 12px !default; + $fluent-tabs-item-padding-vertical: 16px !default; + $fluent-tabs-item-padding: $fluent-tabs-item-padding-horizontal $fluent-tabs-item-padding-vertical !default; $fluent-tab-height: auto !default; $fluent-tab-min-width: 90px !default; - $fluent-base-icon-margin-right: 8px !default; - $fluent-base-icon-margin-bottom: 4px !default; + $fluent-base-icon-margin: 8px !default; $fluent-tab-text-line-height: 24px !default; $fluent-tab-nav-button-icon-width: 24px !default; $fluent-tab-nav-button-icon-height: 24px !default; @@ -33,11 +43,12 @@ $fluent-tab-vertical-nav-button-content-padding: null !default; } @else if $size == "compact" { - $fluent-tabs-item-padding: 6px 12px !default; + $fluent-tabs-item-padding-horizontal: 6px !default; + $fluent-tabs-item-padding-vertical: 12px !default; + $fluent-tabs-item-padding: $fluent-tabs-item-padding-horizontal $fluent-tabs-item-padding-vertical !default; $fluent-tab-height: auto !default; $fluent-tab-min-width: 82px !default; - $fluent-base-icon-margin-right: 8px !default; - $fluent-base-icon-margin-bottom: 4px !default; + $fluent-base-icon-margin: 8px !default; $fluent-tab-text-line-height: 24px !default; $fluent-tab-nav-button-icon-width: 24px !default; $fluent-tab-nav-button-icon-height: 24px !default;