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

Use border color for checkbox and radio button

Browse Source 
Font color looks a bit to bright. Also add border thickness to compensate color contrast.
This commit is contained in:
mkpaz 2023-02-11 09:54:52 +04:00
parent 4499668b35
commit ab0c6a5012
2 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
styles/src/components/_checkbox.scss
View File

@ -3,7 +3,9 @@
@use "../settings/config" as cfg; @use "../settings/config" as cfg;
@use "../settings/icons"; @use "../settings/icons";
$thickness: 1.3333 !default; $border-color: -color-border-default !default;
$indeterminate-color: -color-fg-muted !default;
$thickness: 1.5px !default;
.check-box { .check-box {
@ -12,7 +14,7 @@ $thickness: 1.3333 !default;
-fx-label-padding: cfg.$checkbox-label-padding cfg.$checkbox-label-padding 0 cfg.$graphic-gap; -fx-label-padding: cfg.$checkbox-label-padding cfg.$checkbox-label-padding 0 cfg.$graphic-gap;
>.box { >.box {
-fx-background-color: -color-fg-default, -color-bg-default; -fx-background-color: $border-color, -color-bg-default;
-fx-background-insets: 0, $thickness; -fx-background-insets: 0, $thickness;
-fx-background-radius: cfg.$border-radius, cfg.$inner-border-radius; -fx-background-radius: cfg.$border-radius, cfg.$inner-border-radius;
-fx-padding: cfg.$checkbox-mark-padding-y cfg.$checkbox-mark-padding-x cfg.$checkbox-mark-padding-y cfg.$checkbox-mark-padding-x; -fx-padding: cfg.$checkbox-mark-padding-y cfg.$checkbox-mark-padding-x cfg.$checkbox-mark-padding-y cfg.$checkbox-mark-padding-x;
@ -35,7 +37,7 @@ $thickness: 1.3333 !default;
&:indeterminate { &:indeterminate {
>.box { >.box {
>.mark { >.mark {
-fx-background-color: -color-fg-default; -fx-background-color: $indeterminate-color;
@include icons.get("minus", false); @include icons.get("minus", false);
} }
} }
@ -60,6 +62,6 @@ $thickness: 1.3333 !default;
} }
&:show-mnemonics>.mnemonic-underline { &:show-mnemonics>.mnemonic-underline {
-fx-stroke: -color-fg-default; -fx-stroke: $border-color;
} }
} }

7
styles/src/components/_radio.scss
View File

@ -2,7 +2,8 @@
@use "../settings/config" as cfg; @use "../settings/config" as cfg;
$thickness: 1.3333 !default; $border-color: -color-border-default !default;
$thickness: 1.5px !default;
.radio-button { .radio-button {
@ -12,7 +13,7 @@ $thickness: 1.3333 !default;
-fx-label-padding: cfg.$checkbox-label-padding cfg.$checkbox-label-padding 0 cfg.$graphic-gap; -fx-label-padding: cfg.$checkbox-label-padding cfg.$checkbox-label-padding 0 cfg.$graphic-gap;
>.radio { >.radio {
-fx-background-color: -color-fg-default, -color-bg-default; -fx-background-color: $border-color, -color-bg-default;
-fx-background-insets: 0, $thickness; -fx-background-insets: 0, $thickness;
-fx-background-radius: 1em; // large value to make sure this remains circular -fx-background-radius: 1em; // large value to make sure this remains circular
-fx-padding: cfg.$checkbox-mark-padding-y; -fx-padding: cfg.$checkbox-mark-padding-y;
@ -52,6 +53,6 @@ $thickness: 1.3333 !default;
} }
&:show-mnemonics>.mnemonic-underline { &:show-mnemonics>.mnemonic-underline {
-fx-stroke: -color-fg-default; -fx-stroke: $border-color;
} }
} }