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

Add inner border radius config (#24)

Browse Source
This commit is contained in:
mimoguz 2022-10-27 20:08:21 +03:00 committed by GitHub
parent 6342b3f166
commit 5d2e39b9a4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 26 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
styles/src/components/_button.scss
View File

@ -120,7 +120,7 @@ $opacity-hover: 0.9 !default;
-fx-background-color: -color-button-border, -color-button-bg; -fx-background-color: -color-button-border, -color-button-bg;
-fx-background-insets: 0, cfg.$border-width; -fx-background-insets: 0, cfg.$border-width;
-fx-background-radius: cfg.$border-radius; -fx-background-radius: cfg.$border-radius, cfg.$inner-border-radius;
-fx-graphic-text-gap: cfg.$graphic-gap; -fx-graphic-text-gap: cfg.$graphic-gap;
-fx-text-fill: -color-button-fg; -fx-text-fill: -color-button-fg;
-fx-alignment: CENTER; -fx-alignment: CENTER;
@ -168,7 +168,7 @@ $opacity-hover: 0.9 !default;
// toggle button // toggle button
&.left-pill { &.left-pill {
-fx-background-radius: cfg.$border-radius 0 0 cfg.$border-radius; -fx-background-radius: cfg.$border-radius 0 0 cfg.$border-radius, cfg.$inner-border-radius 0 0 cfg.$inner-border-radius;
-fx-background-insets: 0, cfg.$border-width 0 cfg.$border-width cfg.$border-width; -fx-background-insets: 0, cfg.$border-width 0 cfg.$border-width cfg.$border-width;
&:hover, &:hover,
@ -188,7 +188,7 @@ $opacity-hover: 0.9 !default;
} }
&.right-pill { &.right-pill {
-fx-background-radius: 0 cfg.$border-radius cfg.$border-radius 0; -fx-background-radius: 0 cfg.$border-radius cfg.$border-radius 0, 0 cfg.$inner-border-radius cfg.$inner-border-radius 0;
-fx-background-insets: 0, cfg.$border-width cfg.$border-width cfg.$border-width 0; -fx-background-insets: 0, cfg.$border-width cfg.$border-width cfg.$border-width 0;
&:hover, &:hover,

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

@ -12,7 +12,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, cfg.$border-width;
-fx-background-radius: cfg.$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;

4
styles/src/components/_color-picker.scss
View File

@ -32,7 +32,7 @@
.color-palette { .color-palette {
-fx-background-color: -color-border-default, -color-bg-default; -fx-background-color: -color-border-default, -color-bg-default;
-fx-background-insets: 0, cfg.$border-width; -fx-background-insets: 0, cfg.$border-width;
-fx-background-radius: cfg.$border-radius; -fx-background-radius: cfg.$border-radius, cfg.$inner-border-radius;
-fx-spacing: 10px; -fx-spacing: 10px;
-fx-padding: 1em; -fx-padding: 1em;
@ -162,7 +162,7 @@
-fx-background-color: -color-border-default, -color-bg-default; -fx-background-color: -color-border-default, -color-bg-default;
-fx-background-insets: calc(14px - cfg.$border-width) 0 calc(6px - cfg.$border-width) 0, -fx-background-insets: calc(14px - cfg.$border-width) 0 calc(6px - cfg.$border-width) 0,
14px cfg.$border-width 6px cfg.$border-width; 14px cfg.$border-width 6px cfg.$border-width;
-fx-background-radius: cfg.$border-radius; -fx-background-radius: cfg.$border-radius, cfg.$inner-border-radius;
} }
>.settings-label { >.settings-label {

10
styles/src/components/_combo-box.scss
View File

@ -20,7 +20,7 @@ $color-list-bg-selected: if(cfg.$darkMode, -color-base-6, -color-base-2) !defaul
@mixin _combo-box-base() { @mixin _combo-box-base() {
-fx-background-color: -color-border-default, -color-bg-default; -fx-background-color: -color-border-default, -color-bg-default;
-fx-background-insets: 0, 1; -fx-background-insets: 0, 1;
-fx-background-radius: cfg.$border-radius; -fx-background-radius: cfg.$border-radius, cfg.$inner-border-radius;
-fx-text-fill: -color-fg-default; -fx-text-fill: -color-fg-default;
-fx-alignment: CENTER; -fx-alignment: CENTER;
-fx-content-display: LEFT; -fx-content-display: LEFT;
@ -45,7 +45,7 @@ $color-list-bg-selected: if(cfg.$darkMode, -color-base-6, -color-base-2) !defaul
// input group // input group
&.left-pill { &.left-pill {
-fx-background-radius: cfg.$border-radius 0 0 cfg.$border-radius; -fx-background-radius: cfg.$border-radius 0 0 cfg.$border-radius, cfg.$inner-border-radius 0 0 cfg.$inner-border-radius;
-fx-background-insets: 0, cfg.$border-width 0 cfg.$border-width cfg.$border-width; -fx-background-insets: 0, cfg.$border-width 0 cfg.$border-width cfg.$border-width;
&:focused { &:focused {
@ -63,7 +63,7 @@ $color-list-bg-selected: if(cfg.$darkMode, -color-base-6, -color-base-2) !defaul
} }
&.right-pill { &.right-pill {
-fx-background-radius: 0 cfg.$border-radius cfg.$border-radius 0; -fx-background-radius: 0 cfg.$border-radius cfg.$border-radius 0, 0 cfg.$inner-border-radius cfg.$inner-border-radius 0;
-fx-background-insets: 0, cfg.$border-width cfg.$border-width cfg.$border-width 0; -fx-background-insets: 0, cfg.$border-width cfg.$border-width cfg.$border-width 0;
&:focused { &:focused {
@ -92,7 +92,7 @@ $color-list-bg-selected: if(cfg.$darkMode, -color-base-6, -color-base-2) !defaul
>.text-field { >.text-field {
-fx-background-insets: 0, 1 0 1 1; -fx-background-insets: 0, 1 0 1 1;
-fx-background-radius: cfg.$border-radius 0 0 cfg.$border-radius; -fx-background-radius: cfg.$border-radius 0 0 cfg.$border-radius, cfg.$inner-border-radius 0 0 cfg.$inner-border-radius;
} }
&:success { &:success {
@ -138,7 +138,7 @@ $color-list-bg-selected: if(cfg.$darkMode, -color-base-6, -color-base-2) !defaul
>.list-view { >.list-view {
-fx-background-color: -color-border-default, $color-list-bg; -fx-background-color: -color-border-default, $color-list-bg;
-fx-background-insets: 0, 1; -fx-background-insets: 0, 1;
-fx-background-radius: cfg.$border-radius; -fx-background-radius: cfg.$border-radius, cfg.$inner-border-radius;
>.virtual-flow { >.virtual-flow {
>.clipped-container { >.clipped-container {

4
styles/src/components/_label.scss
View File

@ -22,7 +22,7 @@
} }
&.left-pill { &.left-pill {
-fx-background-radius: cfg.$border-radius 0 0 cfg.$border-radius; -fx-background-radius: cfg.$border-radius 0 0 cfg.$border-radius, cfg.$inner-border-radius 0 0 cfg.$inner-border-radius;
} }
&.center-pill { &.center-pill {
@ -30,6 +30,6 @@
} }
&.right-pill { &.right-pill {
-fx-background-radius: 0 cfg.$border-radius cfg.$border-radius 0; -fx-background-radius: 0 cfg.$border-radius cfg.$border-radius 0, 0 cfg.$inner-border-radius cfg.$inner-border-radius 0;
} }
} }

4
styles/src/components/_menu-button.scss
View File

@ -151,7 +151,7 @@ $separator-width: 0.75px !default;
>.arrow-button { >.arrow-button {
-fx-background-color: -color-neutral-emphasis-plus; -fx-background-color: -color-neutral-emphasis-plus;
-fx-background-insets: cfg.$border-width; -fx-background-insets: cfg.$border-width;
-fx-background-radius: cfg.$border-radius; -fx-background-radius: cfg.$inner-border-radius;
-fx-border-color: transparent; -fx-border-color: transparent;
-fx-opacity: 0.75; -fx-opacity: 0.75;
@ -184,7 +184,7 @@ $separator-width: 0.75px !default;
>.arrow-button { >.arrow-button {
-fx-padding: cfg.$padding-y cfg.$padding-x cfg.$padding-y cfg.$padding-x; -fx-padding: cfg.$padding-y cfg.$padding-x cfg.$padding-y cfg.$padding-x;
-fx-background-radius: 0 cfg.$border-radius cfg.$border-radius 0; -fx-background-radius: 0 cfg.$inner-border-radius cfg.$inner-border-radius 0;
-fx-border-color: -color-button-fg; -fx-border-color: -color-button-fg;
-fx-border-width: 0 0 0 $separator-width; -fx-border-width: 0 0 0 $separator-width;
-fx-border-insets: calc(cfg.$border-width + 6px) 0 calc(cfg.$border-width + 6px) 0; -fx-border-insets: calc(cfg.$border-width + 6px) 0 calc(cfg.$border-width + 6px) 0;

2
styles/src/components/_menu.scss
View File

@ -157,7 +157,7 @@ $separator-padding: map-get(cfg.$separators, "small") !default;
-fx-background-color: -color-border-muted, $color-menuitem-bg; -fx-background-color: -color-border-muted, $color-menuitem-bg;
-fx-background-insets: 0, 1; -fx-background-insets: 0, 1;
-fx-padding: cfg.$popup-padding-y cfg.$popup-padding-x cfg.$popup-padding-y cfg.$popup-padding-x; -fx-padding: cfg.$popup-padding-y cfg.$popup-padding-x cfg.$popup-padding-y cfg.$popup-padding-x;
-fx-background-radius: cfg.$border-radius; -fx-background-radius: cfg.$border-radius, cfg.$inner-border-radius;
@include effects.shadow(-color-shadow-default, cfg.$popup-shadow-radius, cfg.$popup-shadow-spread); @include effects.shadow(-color-shadow-default, cfg.$popup-shadow-radius, cfg.$popup-shadow-spread);
// no idea what's that thing and how to trigger its appearance // no idea what's that thing and how to trigger its appearance

6
styles/src/components/_text-input.scss
View File

@ -38,7 +38,7 @@ $color-fg-password: -color-fg-muted !default;
-fx-background-color: -color-input-border, -color-input-bg; -fx-background-color: -color-input-border, -color-input-bg;
-fx-background-insets: 0, cfg.$border-width; -fx-background-insets: 0, cfg.$border-width;
-fx-background-radius: cfg.$border-radius; -fx-background-radius: cfg.$border-radius, cfg.$inner-border-radius;
-fx-text-fill: -color-input-fg; -fx-text-fill: -color-input-fg;
-fx-highlight-fill: -color-input-bg-highlight; -fx-highlight-fill: -color-input-bg-highlight;
@ -78,7 +78,7 @@ $color-fg-password: -color-fg-muted !default;
// input group // input group
&.left-pill { &.left-pill {
-fx-background-radius: cfg.$border-radius 0 0 cfg.$border-radius; -fx-background-radius: cfg.$border-radius 0 0 cfg.$border-radius, cfg.$inner-border-radius 0 0 cfg.$inner-border-radius;
-fx-background-insets: 0, cfg.$border-width 0 cfg.$border-width cfg.$border-width; -fx-background-insets: 0, cfg.$border-width 0 cfg.$border-width cfg.$border-width;
&:focused { &:focused {
@ -96,7 +96,7 @@ $color-fg-password: -color-fg-muted !default;
} }
&.right-pill { &.right-pill {
-fx-background-radius: 0 cfg.$border-radius cfg.$border-radius 0; -fx-background-radius: 0 cfg.$border-radius cfg.$border-radius 0, 0 cfg.$inner-border-radius cfg.$inner-border-radius 0;
-fx-background-insets: 0, cfg.$border-width cfg.$border-width cfg.$border-width 0; -fx-background-insets: 0, cfg.$border-width cfg.$border-width cfg.$border-width 0;
&:focused { &:focused {

4
styles/src/components/_titled-pane.scss
View File

@ -77,7 +77,7 @@ $margin-content-dense: 10px !default;
// and '.content' and then remove one of those adjacent borders. // and '.content' and then remove one of those adjacent borders.
&:expanded { &:expanded {
>.title { >.title {
-fx-background-radius: cfg.$border-radius cfg.$border-radius 0 0; -fx-background-radius: cfg.$border-radius cfg.$border-radius 0 0, cfg.$inner-border-radius cfg.$inner-border-radius 0 0;
-fx-background-insets: 0, cfg.$border-width cfg.$border-width 0 cfg.$border-width; -fx-background-insets: 0, cfg.$border-width cfg.$border-width 0 cfg.$border-width;
} }
} }
@ -85,7 +85,7 @@ $margin-content-dense: 10px !default;
&:collapsed { &:collapsed {
>.title { >.title {
-fx-background-insets: 0, cfg.$border-width; -fx-background-insets: 0, cfg.$border-width;
-fx-background-radius: cfg.$border-radius; -fx-background-radius: cfg.$border-radius, cfg.$inner-border-radius;
} }
} }

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

@ -15,7 +15,7 @@ $padding-y: cfg.$padding-y !default;
-fx-background-color: $color-border, $color-bg; -fx-background-color: $color-border, $color-bg;
-fx-background-insets: 0, cfg.$border-width; -fx-background-insets: 0, cfg.$border-width;
-fx-text-fill: $color-fg; -fx-text-fill: $color-fg;
-fx-background-radius: cfg.$border-radius; -fx-background-radius: cfg.$border-radius, cfg.$inner-border-radius;
-fx-padding: $padding-y $padding-x $padding-y $padding-x; -fx-padding: $padding-y $padding-x $padding-y $padding-x;
-fx-opacity: $opacity; -fx-opacity: $opacity;
@include effects.shadow(-color-shadow-default, cfg.$popup-shadow-radius, cfg.$popup-shadow-spread); @include effects.shadow(-color-shadow-default, cfg.$popup-shadow-radius, cfg.$popup-shadow-spread);

6
styles/src/settings/_config.scss
View File

@ -1,5 +1,7 @@
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
@use "sass:math";
$darkMode: false !default; $darkMode: false !default;
$font-default: 14px !default; // ~= 11pt $font-default: 14px !default; // ~= 11pt
@ -21,10 +23,10 @@ $padding-y-large: calc($padding-y * 1.4) !default;
$graphic-gap: 6px !default; $graphic-gap: 6px !default;
// Most components use background insets to draw its borders due to // Most components use background insets to draw its borders due to
// performance reasons. On border radius > 2px corners may look rather ugly. // performance reasons.
// They're thicker than border width and sometimes a bit blurry.
$border-width: 1px !default; $border-width: 1px !default;
$border-radius: 4px !default; $border-radius: 4px !default;
$inner-border-radius: math.max($border-radius - $border-width, 0) !default;
$opacity-disabled: 0.4 !default; $opacity-disabled: 0.4 !default;