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

Expose Slider looked-up color variables

Browse Source
This commit is contained in:
mkpaz 2022-09-05 15:48:20 +04:00
parent 90fbbd35c6
commit 3d88ea0805
2 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
sampler/src/main/resources/assets/styles/scss/widgets/_contrast-checker.scss
View File

@ -50,11 +50,12 @@
.slider { .slider {
>.thumb { >.thumb {
-fx-background-color: -color-contrast-checker-fg; -color-slider-thumb: -color-contrast-checker-fg;
-color-slider-thumb-border: -color-contrast-checker-fg;
} }
>.track { >.track {
-fx-background-color: transparent, -color-contrast-checker-fg; -color-slider-track: -color-contrast-checker-fg;
-fx-opacity: 0.5; -fx-opacity: 0.5;
} }
} }

16
styles/src/components/_slider.scss
View File

@ -3,8 +3,7 @@
@use "../settings/config" as cfg; @use "../settings/config" as cfg;
@use "sass:math"; @use "sass:math";
// use borderless slider for dark mode by default $thumb-color: if(cfg.$darkMode, -color-fg-default, -color-accent-emphasis) !default;
$thumb-color: if(cfg.$darkMode, -color-fg-default, -color-bg-default) !default;
$thumb-color-border: if(cfg.$darkMode, -color-fg-default, -color-accent-emphasis) !default; $thumb-color-border: if(cfg.$darkMode, -color-fg-default, -color-accent-emphasis) !default;
$thumb-size: 8px !default; $thumb-size: 8px !default;
$thumb-border-width: 2px !default; $thumb-border-width: 2px !default;
@ -21,8 +20,13 @@ $_track-padding: math.div($track-size + $track-margin, 2);
.slider { .slider {
-color-slider-thumb: $thumb-color;
-color-slider-thumb-border: $thumb-color-border;
-color-slider-track: $track-color;
-color-slider-tick: $tick-color;
>.thumb { >.thumb {
-fx-background-color: $thumb-color-border, $thumb-color; -fx-background-color: -color-slider-thumb-border, -color-slider-thumb;
-fx-background-insets: 0, 2px; -fx-background-insets: 0, 2px;
-fx-background-radius: 50; -fx-background-radius: 50;
-fx-padding: $thumb-size; -fx-padding: $thumb-size;
@ -31,7 +35,7 @@ $_track-padding: math.div($track-size + $track-margin, 2);
>.track { >.track {
// transparent background increases clickable track area without increasing visual track height, // transparent background increases clickable track area without increasing visual track height,
// it's also used to center track with thumb // it's also used to center track with thumb
-fx-background-color: transparent, $track-color; -fx-background-color: transparent, -color-slider-track;
-fx-background-radius: cfg.$border-radius; -fx-background-radius: cfg.$border-radius;
} }
@ -54,13 +58,13 @@ $_track-padding: math.div($track-size + $track-margin, 2);
// there's slightly noticable difference between axis length and track length, // there's slightly noticable difference between axis length and track length,
// wontfix this via CSS, because it's probably JavaFX calc problem // wontfix this via CSS, because it's probably JavaFX calc problem
>.axis { >.axis {
-fx-tick-label-fill: $tick-color; -fx-tick-label-fill: -color-slider-tick;
-fx-tick-length: $tick-major-size; -fx-tick-length: $tick-major-size;
-fx-minor-tick-length: $tick-minor-size; -fx-minor-tick-length: $tick-minor-size;
>.axis-tick-mark, >.axis-tick-mark,
>.axis-minor-tick-mark { >.axis-minor-tick-mark {
-fx-stroke: $tick-color; -fx-stroke: -color-slider-tick;
} }
} }