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-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-text-fill: -color-button-fg;
-fx-alignment: CENTER;
@ -168,7 +168,7 @@ $opacity-hover: 0.9 !default;
// toggle button
&.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;
&:hover,
@ -188,7 +188,7 @@ $opacity-hover: 0.9 !default;
}
&.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;
&:hover,

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

@ -12,7 +12,7 @@
>.box {
-fx-background-color: -color-fg-default, -color-bg-default;
-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-alignment: CENTER;

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

@ -32,7 +32,7 @@
.color-palette {
-fx-background-color: -color-border-default, -color-bg-default;
-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-padding: 1em;
@ -162,7 +162,7 @@
-fx-background-color: -color-border-default, -color-bg-default;
-fx-background-insets: calc(14px - cfg.$border-width) 0 calc(6px - cfg.$border-width) 0,
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 {

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() {
-fx-background-color: -color-border-default, -color-bg-default;
-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-alignment: CENTER;
-fx-content-display: LEFT;
@ -45,7 +45,7 @@ $color-list-bg-selected: if(cfg.$darkMode, -color-base-6, -color-base-2) !defaul
// input group
&.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;
&:focused {
@ -63,7 +63,7 @@ $color-list-bg-selected: if(cfg.$darkMode, -color-base-6, -color-base-2) !defaul
}
&.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;
&:focused {
@ -92,7 +92,7 @@ $color-list-bg-selected: if(cfg.$darkMode, -color-base-6, -color-base-2) !defaul
>.text-field {
-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 {
@ -138,7 +138,7 @@ $color-list-bg-selected: if(cfg.$darkMode, -color-base-6, -color-base-2) !defaul
>.list-view {
-fx-background-color: -color-border-default, $color-list-bg;
-fx-background-insets: 0, 1;
-fx-background-radius: cfg.$border-radius;
-fx-background-radius: cfg.$border-radius, cfg.$inner-border-radius;
>.virtual-flow {
>.clipped-container {

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

@ -22,7 +22,7 @@
}
&.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 {
@ -30,6 +30,6 @@
}
&.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 {
-fx-background-color: -color-neutral-emphasis-plus;
-fx-background-insets: cfg.$border-width;
-fx-background-radius: cfg.$border-radius;
-fx-background-radius: cfg.$inner-border-radius;
-fx-border-color: transparent;
-fx-opacity: 0.75;
@ -184,7 +184,7 @@ $separator-width: 0.75px !default;
>.arrow-button {
-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-width: 0 0 0 $separator-width;
-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-insets: 0, 1;
-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);
// 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-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-highlight-fill: -color-input-bg-highlight;
@ -78,7 +78,7 @@ $color-fg-password: -color-fg-muted !default;
// input group
&.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;
&:focused {
@ -96,7 +96,7 @@ $color-fg-password: -color-fg-muted !default;
}
&.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;
&: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.
&:expanded {
>.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;
}
}
@ -85,7 +85,7 @@ $margin-content-dense: 10px !default;
&:collapsed {
>.title {
-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-insets: 0, cfg.$border-width;
-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-opacity: $opacity;
@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
@use "sass:math";
$darkMode: false !default;
$font-default: 14px !default; // ~= 11pt
@ -21,10 +23,10 @@ $padding-y-large: calc($padding-y * 1.4) !default;
$graphic-gap: 6px !default;
// Most components use background insets to draw its borders due to
// performance reasons. On border radius > 2px corners may look rather ugly.
// They're thicker than border width and sometimes a bit blurry.
// performance reasons.
$border-width: 1px !default;
$border-radius: 4px !default;
$inner-border-radius: math.max($border-radius - $border-width, 0) !default;
$opacity-disabled: 0.4 !default;