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) 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

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

@ -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.

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-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,