tablet/atlantafx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Expose selected Tab looked-up color variables

Browse Source
This commit is contained in:
mkpaz 2023-03-14 20:26:51 +04:00
parent 5e8a4d3547
commit 4e0cbf35e2
3 changed files with 66 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -19,6 +19,7 @@
- (CSS) `Button` shadow support (`-color-button-shadow`). Only for themes compiled with the `button.$use-shadow` flag enabled. - (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) Looked-up color variables support: `Separator`.
- (CSS) Added border radius/shadow to popup menu for `ComboBox` (and all `ComboBox`-based) controls. - (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 ### Bugfixes

14
docs/docs/reference/controls.md
View File

@ -250,6 +250,20 @@ CSS classes:
Floating and classic styles are mutually exclusive. 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 ## Titled Pane
Also applied to the Accordion. Also applied to the Accordion.

67
styles/src/components/_tab-pane.scss
View File

@ -50,6 +50,7 @@ $color-float-bg: -color-bg-inset !default;
$color-float-border: -color-border-default !default; $color-float-border: -color-border-default !default;
$color-float-bg-selected: -color-bg-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; $color-float-border-selected: -color-border-default !default;
$tab-float-label-padding-x: 0.6em !default; $tab-float-label-padding-x: 0.6em !default;
@ -62,13 +63,20 @@ $tab-float-spacing: 3px !default;
$tab-float-width: 150px !default; $tab-float-width: 150px !default;
// classic tabs // classic tabs
$color-classic-bg: -color-bg-subtle !default; $color-classic-bg: -color-bg-subtle !default;
$color-classic-bg-selected: -color-bg-default !default; $color-classic-border: -color-border-muted !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-x: 5px !default;
$header-classic-padding-y: 5px !default; $header-classic-padding-y: 5px !default;
.tab-pane { .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 { >.tab-header-area {
-fx-background-insets: 0; -fx-background-insets: 0;
@ -120,21 +128,21 @@ $header-classic-padding-y: 5px !default;
&:top:selected, &:top:selected,
&:bottom: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-container {
>.tab-label { >.tab-label {
-fx-fill: $color-tb-fg-selected; -fx-fill: -color-tab-fg-selected;
-fx-text-fill: $color-tb-fg-selected; -fx-text-fill: -color-tab-fg-selected;
>* { >* {
-fx-fill: $color-tb-fg-selected; -fx-fill: -color-tab-fg-selected;
-fx-icon-color: $color-tb-fg-selected; -fx-icon-color: -color-tab-fg-selected;
} }
} }
>.tab-close-button { >.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 { &: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-container {
>.tab-label { >.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 { >.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 // TabPane.STYLE_CLASS_FLOATING or Styles.TABS_FLOATING
&.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 { >.tab-header-area {
-fx-background-color: $color-float-border, $color-float-header-area; -fx-background-color: $color-float-border, $color-float-header-area;
@ -270,8 +287,22 @@ $header-classic-padding-y: 5px !default;
&:hover, &:hover,
&:selected { &:selected {
>.tab-container { >.tab-container {
-fx-background-color: $color-float-bg-selected; -fx-background-color: -color-tab-bg-selected;
-fx-border-color: $color-float-border-selected, transparent; -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 // Styles.TABS_CLASSIC
&.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 { >.tab-header-area {
-fx-padding: $header-classic-padding-y 0 0 $header-classic-padding-x; -fx-padding: $header-classic-padding-y 0 0 $header-classic-padding-x;
@ -317,13 +352,13 @@ $header-classic-padding-y: 5px !default;
&:top:selected, &:top:selected,
&:bottom:selected { &:bottom:selected {
-fx-background-insets: 0 0 0 0, $header-border-width $header-border-width 0 $header-border-width; -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, &:left:selected,
&:right:selected { &:right:selected {
-fx-background-insets: 0 0 0 0, $header-border-width $header-border-width 0 $header-border-width; -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, &:hover,