From 4499668b359e0b335e69b364d7780d74561e30b7 Mon Sep 17 00:00:00 2001 From: mkpaz Date: Sat, 11 Feb 2023 09:11:26 +0400 Subject: [PATCH] Add hover effect for tab pane close button --- CHANGELOG.md | 1 + styles/src/components/_tab-pane.scss | 9 +++++++++ 2 files changed, 10 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6377a95..7bba9c3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,7 @@ This is a bugfix/maintenance release that also contains a few style improvements - (Build) SceneBuilder theme pack generation (#28) (thanks to **ennerf**). - (CSS) Add inner border radius to improve controls border corners (#24) (thanks to **mimoguz**). - (CSS) Hover effect for `CheckBox` and `RadioButton`. +- (CSS) Hover effect for `TabPane` close button. - (CSS) Setting `Label` color via pseudo-classes support. - (CSS) Setting `FontIcon` color support. - (CSS) Increased `Menu`/`Menubar` paddings. diff --git a/styles/src/components/_tab-pane.scss b/styles/src/components/_tab-pane.scss index 5cac93a..de89588 100755 --- a/styles/src/components/_tab-pane.scss +++ b/styles/src/components/_tab-pane.scss @@ -93,6 +93,15 @@ $tab-float-width: 150px !default; -fx-background-color: $color-fg; -fx-shape: "M 0,0 H1 L 4,3 7,0 H8 V1 L 5,4 8,7 V8 H7 L 4,5 1,8 H0 V7 L 3,4 0,1 Z"; -fx-scale-shape: false; + + // Close button implemented as a single StackPane that transformed to the close icon via SVG path. + // Since there's no any wrapper around it, it's impossible to create background color hover effect. + // We can only manipulate icon color or scale or cursor. + &:hover { + -fx-cursor: hand; + -fx-scale-x: 1.1; + -fx-scale-y: 1.1; + } } }