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

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

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