From 4e0cbf35e2757d1c4e5040cd60f41e800448931c Mon Sep 17 00:00:00 2001 From: mkpaz Date: Tue, 14 Mar 2023 20:26:51 +0400 Subject: [PATCH] Expose selected Tab looked-up color variables --- CHANGELOG.md | 1 + docs/docs/reference/controls.md | 14 ++++++ styles/src/components/_tab-pane.scss | 67 +++++++++++++++++++++------- 3 files changed, 66 insertions(+), 16 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1e1cd12..4d5a608 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,7 @@ - (CSS) `Button` shadow support (`-color-button-shadow`). Only for themes compiled with the `button.$use-shadow` flag enabled. - (CSS) Looked-up color variables support: `Separator`. - (CSS) Added border radius/shadow to popup menu for `ComboBox` (and all `ComboBox`-based) controls. +- (CSS) Looked-up colors to style selected `TabPane` tab. ### Bugfixes diff --git a/docs/docs/reference/controls.md b/docs/docs/reference/controls.md index 1a926fd..657fc35 100644 --- a/docs/docs/reference/controls.md +++ b/docs/docs/reference/controls.md @@ -250,6 +250,20 @@ CSS classes: Floating and classic styles are mutually exclusive. +Color variables: + +* `-color-tab-bg-selected` +* `-color-tab-fg-selected` +* `-color-tab-border-selected` + +To apply these variables ensure that your custom CSS rule has more specificity, e.g.: + +```css +.my-tab-pane.floating { + -color-tab-fg-selected: red; +} +``` + ## Titled Pane Also applied to the Accordion. diff --git a/styles/src/components/_tab-pane.scss b/styles/src/components/_tab-pane.scss index 85d883e..9d16938 100755 --- a/styles/src/components/_tab-pane.scss +++ b/styles/src/components/_tab-pane.scss @@ -50,6 +50,7 @@ $color-float-bg: -color-bg-inset !default; $color-float-border: -color-border-default !default; $color-float-bg-selected: -color-bg-default !default; +$color-float-fg-selected: -color-fg-default !default; $color-float-border-selected: -color-border-default !default; $tab-float-label-padding-x: 0.6em !default; @@ -62,13 +63,20 @@ $tab-float-spacing: 3px !default; $tab-float-width: 150px !default; // classic tabs -$color-classic-bg: -color-bg-subtle !default; -$color-classic-bg-selected: -color-bg-default !default; -$color-classic-border: -color-border-muted !default; +$color-classic-bg: -color-bg-subtle !default; +$color-classic-border: -color-border-muted !default; + +$color-classic-bg-selected: -color-bg-default !default; +$color-classic-fg-selected: -color-fg-default !default; +$color-classic-border-selected: -color-border-muted !default; + $header-classic-padding-x: 5px !default; $header-classic-padding-y: 5px !default; .tab-pane { + -color-tab-bg-selected: $color-tb-bg-selected; + -color-tab-fg-selected: $color-tb-fg-selected; + -color-tab-border-selected: $color-tb-border-selected; >.tab-header-area { -fx-background-insets: 0; @@ -120,21 +128,21 @@ $header-classic-padding-y: 5px !default; &:top:selected, &:bottom:selected { - -fx-background-color: $color-tb-border-selected, $color-tb-bg-selected; + -fx-background-color: -color-tab-border-selected, -color-tab-bg-selected; >.tab-container { >.tab-label { - -fx-fill: $color-tb-fg-selected; - -fx-text-fill: $color-tb-fg-selected; + -fx-fill: -color-tab-fg-selected; + -fx-text-fill: -color-tab-fg-selected; >* { - -fx-fill: $color-tb-fg-selected; - -fx-icon-color: $color-tb-fg-selected; + -fx-fill: -color-tab-fg-selected; + -fx-icon-color: -color-tab-fg-selected; } } >.tab-close-button { - -fx-background-color: $color-tb-fg-selected; + -fx-background-color: -color-tab-fg-selected; } } } @@ -173,15 +181,21 @@ $header-classic-padding-y: 5px !default; } &:selected { - -fx-background-color: $color-lr-border-selected, $color-lr-bg-selected; + -fx-background-color: -color-tab-border-selected, -color-tab-bg-selected; >.tab-container { >.tab-label { - -fx-text-fill: $color-lr-fg-selected; + -fx-fill: -color-tab-fg-selected; + -fx-text-fill: -color-tab-fg-selected; + + >* { + -fx-fill: -color-tab-fg-selected; + -fx-icon-color: -color-tab-fg-selected; + } } >.tab-close-button { - -fx-background-color: $color-lr-fg-selected; + -fx-background-color: -color-tab-fg-selected; } } } @@ -236,6 +250,9 @@ $header-classic-padding-y: 5px !default; // TabPane.STYLE_CLASS_FLOATING or Styles.TABS_FLOATING &.floating { + -color-tab-bg-selected: $color-float-bg-selected; + -color-tab-fg-selected: $color-float-fg-selected; + -color-tab-border-selected: $color-float-border-selected; >.tab-header-area { -fx-background-color: $color-float-border, $color-float-header-area; @@ -270,8 +287,22 @@ $header-classic-padding-y: 5px !default; &:hover, &:selected { >.tab-container { - -fx-background-color: $color-float-bg-selected; - -fx-border-color: $color-float-border-selected, transparent; + -fx-background-color: -color-tab-bg-selected; + -fx-border-color: -color-tab-border-selected, transparent; + + >.tab-label { + -fx-fill: -color-tab-fg-selected; + -fx-text-fill: -color-tab-fg-selected; + + >* { + -fx-fill: -color-tab-fg-selected; + -fx-icon-color: -color-tab-fg-selected; + } + } + + >.tab-close-button { + -fx-background-color: -color-tab-fg-selected; + } } } } @@ -297,6 +328,10 @@ $header-classic-padding-y: 5px !default; // Styles.TABS_CLASSIC &.classic { + -color-tab-bg-selected: $color-classic-bg-selected; + -color-tab-fg-selected: $color-classic-fg-selected; + -color-tab-border-selected: $color-classic-border-selected; + >.tab-header-area { -fx-padding: $header-classic-padding-y 0 0 $header-classic-padding-x; @@ -317,13 +352,13 @@ $header-classic-padding-y: 5px !default; &:top:selected, &:bottom:selected { -fx-background-insets: 0 0 0 0, $header-border-width $header-border-width 0 $header-border-width; - -fx-background-color: $color-classic-border, $color-classic-bg-selected; + -fx-background-color: -color-tab-border-selected, -color-tab-bg-selected; } &:left:selected, &:right:selected { -fx-background-insets: 0 0 0 0, $header-border-width $header-border-width 0 $header-border-width; - -fx-background-color: $color-classic-border, $color-classic-bg-selected; + -fx-background-color: -color-tab-border-selected, -color-tab-bg-selected; } &:hover,