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

Improve tooltip/popover borders

Browse Source 
* uniform tooltip and popover border styling
* expose SASS variables
This commit is contained in:
mkpaz 2022-08-31 14:09:21 +04:00
parent de5a5795a6
commit f4cfb094c4
2 changed files with 17 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
styles/src/components/_popover.scss
View File

@ -3,16 +3,19 @@
@use "../settings/config" as cfg;
@use "../settings/effects";
$padding-x: 1em !default;
$padding-y: 1em !default;
$color-bg: -color-bg-overlay !default;
$color-fg: -color-fg-default !default;
$color-border: -color-border-default !default;
$padding-x: 10px !default;
$padding-y: 10px !default;
.popover {
-fx-background-color: -color-bg-overlay;
-fx-background-color: $color-bg;
>.border {
-fx-stroke: -color-border-default;
-fx-stroke: $color-border;
-fx-stroke-width: cfg.$border-width;
@include effects.shadow(-color-bg-inset, cfg.$popup-shadow);
@include effects.shadow($color-bg, cfg.$popup-shadow);
}
>.content {
@ -22,7 +25,7 @@ $padding-y: 1em !default;
-fx-padding: 0 0 1em 0;
>.text {
-fx-text-fill: -color-fg-default;
-fx-text-fill: $color-fg;
-fx-font-size: cfg.$font-title-4;
-fx-alignment: CENTER_LEFT;
}
@ -34,7 +37,7 @@ $padding-y: 1em !default;
}
>.line {
-fx-stroke: -color-fg-default;
-fx-stroke: $color-fg;
-fx-stroke-width: cfg.$border-width;
}
}

8
styles/src/components/_tooltip.scss
View File

@ -5,18 +5,18 @@
$color-bg: -color-bg-overlay !default;
$color-fg: -color-fg-default !default;
$color-shadow: -color-bg-overlay !default;
$color-border: -color-border-default !default;
$opacity: 0.85 !default;
$padding-x: cfg.$padding-x !default;
$padding-y: cfg.$padding-y !default;
.tooltip {
-fx-background-color: $color-bg;
-fx-background-insets: 0;
-fx-background-color: $color-border, $color-bg;
-fx-background-insets: 0, cfg.$border-width;
-fx-text-fill: $color-fg;
-fx-background-radius: cfg.$border-radius;
-fx-padding: $padding-y $padding-x $padding-y $padding-x;
-fx-opacity: $opacity;
@include effects.shadow(-color-bg-inset, 8);
@include effects.shadow($color-bg, cfg.$popup-shadow);
}