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

Improve checkbox and radio button

Browse Source 
- increase line thickness
- add hover effect
This commit is contained in:
mkpaz 2023-02-08 21:16:11 +04:00
parent ae41f89023
commit c707ec5230
2 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,8 @@
@use "../settings/config" as cfg; @use "../settings/config" as cfg;
@use "../settings/icons"; @use "../settings/icons";
$thickness: 1.3333 !default;
.check-box { .check-box {
// applied to label // applied to label
@ -11,7 +13,7 @@
>.box { >.box {
-fx-background-color: -color-fg-default, -color-bg-default; -fx-background-color: -color-fg-default, -color-bg-default;
-fx-background-insets: 0, cfg.$border-width; -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;
-fx-alignment: CENTER; -fx-alignment: CENTER;
@ -24,12 +26,16 @@
-fx-min-width: cfg.$checkbox-mark-size; -fx-min-width: cfg.$checkbox-mark-size;
-fx-max-width: cfg.$checkbox-mark-size; -fx-max-width: cfg.$checkbox-mark-size;
} }
&:hover {
-fx-background-color: -color-fg-muted, -color-bg-subtle;
}
} }
&:indeterminate { &:indeterminate {
>.box { >.box {
>.mark { >.mark {
-fx-background-color: -color-fg-muted; -fx-background-color: -color-fg-default;
@include icons.get("minus", false); @include icons.get("minus", false);
} }
} }

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

@ -2,6 +2,8 @@
@use "../settings/config" as cfg; @use "../settings/config" as cfg;
$thickness: 1.3333 !default;
.radio-button { .radio-button {
// applied to label // applied to label
@ -11,20 +13,24 @@
>.radio { >.radio {
-fx-background-color: -color-fg-default, -color-bg-default; -fx-background-color: -color-fg-default, -color-bg-default;
-fx-background-insets: 0, cfg.$border-width; -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;
-fx-alignment: CENTER; -fx-alignment: CENTER;
>.dot { >.dot {
-fx-background-color: transparent, transparent; -fx-background-color: transparent, transparent;
-fx-background-insets: 0, 1px; -fx-background-insets: 0, 1;
-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-min-height: cfg.$checkbox-mark-size; -fx-min-height: cfg.$checkbox-mark-size;
-fx-max-height: cfg.$checkbox-mark-size; -fx-max-height: cfg.$checkbox-mark-size;
-fx-min-width: cfg.$checkbox-mark-size; -fx-min-width: cfg.$checkbox-mark-size;
-fx-max-width: cfg.$checkbox-mark-size; -fx-max-width: cfg.$checkbox-mark-size;
} }
&:hover {
-fx-background-color: -color-fg-muted, -color-bg-subtle;
}
} }
&:disabled { &:disabled {