Use borders with color-*-on-*, not outlines

Since outlines don't take up space in the layout, but borders do.
This commit is contained in:
Abe Jellinek 2024-01-03 14:11:54 -08:00 committed by Dan Stillman
parent 691e5d8cc1
commit 9f8e3f1521
5 changed files with 9 additions and 4 deletions

View file

@ -34,8 +34,7 @@ context-notes-list {
> .more { > .more {
appearance: none; appearance: none;
border-radius: 5px; border-radius: 5px;
border: none; border: 1px solid var(--color-quinary-on-sidepane);
outline: 1px solid var(--fill-quinary);
background: var(--material-background); background: var(--material-background);
padding: 2px 8px; padding: 2px 8px;

View file

@ -3,7 +3,7 @@ annotation-row {
flex-direction: column; flex-direction: column;
border-radius: 5px; border-radius: 5px;
outline: 1px solid var(--fill-quinary); border: 1px solid var(--color-quinary-on-sidepane);
background: var(--material-background); background: var(--material-background);
.head { .head {

View file

@ -3,7 +3,7 @@ note-row {
flex-direction: column; flex-direction: column;
border-radius: 5px; border-radius: 5px;
outline: 1px solid var(--fill-quinary); border: 1px solid var(--color-quinary-on-sidepane);
background: var(--material-background); background: var(--material-background);
&:active { &:active {

View file

@ -63,6 +63,9 @@ $-colors: (
--color-quarternary-on-background: #{color.mix( --color-quarternary-on-background: #{color.mix(
map.get($-colors, "color-background"), color.change(map.get($-colors, "fill-quarternary"), $alpha: 1), 100% * (1 - color.alpha(map.get($-colors, "fill-quarternary"))) map.get($-colors, "color-background"), color.change(map.get($-colors, "fill-quarternary"), $alpha: 1), 100% * (1 - color.alpha(map.get($-colors, "fill-quarternary")))
)}; )};
--color-quinary-on-sidepane: #{color.mix(
map.get($-colors, "color-sidepane"), color.change(map.get($-colors, "fill-quinary"), $alpha: 1), 100% * (1 - color.alpha(map.get($-colors, "fill-quinary")))
)};
--color-quarternary-on-sidepane: #{color.mix( --color-quarternary-on-sidepane: #{color.mix(
map.get($-colors, "color-sidepane"), color.change(map.get($-colors, "fill-quarternary"), $alpha: 1), 100% * (1 - color.alpha(map.get($-colors, "fill-quarternary"))) map.get($-colors, "color-sidepane"), color.change(map.get($-colors, "fill-quarternary"), $alpha: 1), 100% * (1 - color.alpha(map.get($-colors, "fill-quarternary")))
)}; )};

View file

@ -63,6 +63,9 @@ $-colors: (
--color-quarternary-on-background: #{color.mix( --color-quarternary-on-background: #{color.mix(
map.get($-colors, "color-background"), color.change(map.get($-colors, "fill-quarternary"), $alpha: 1), 100% * (1 - color.alpha(map.get($-colors, "fill-quarternary"))) map.get($-colors, "color-background"), color.change(map.get($-colors, "fill-quarternary"), $alpha: 1), 100% * (1 - color.alpha(map.get($-colors, "fill-quarternary")))
)}; )};
--color-quinary-on-sidepane: #{color.mix(
map.get($-colors, "color-sidepane"), color.change(map.get($-colors, "fill-quinary"), $alpha: 1), 100% * (1 - color.alpha(map.get($-colors, "fill-quinary")))
)};
--color-quarternary-on-sidepane: #{color.mix( --color-quarternary-on-sidepane: #{color.mix(
map.get($-colors, "color-sidepane"), color.change(map.get($-colors, "fill-quarternary"), $alpha: 1), 100% * (1 - color.alpha(map.get($-colors, "fill-quarternary"))) map.get($-colors, "color-sidepane"), color.change(map.get($-colors, "fill-quarternary"), $alpha: 1), 100% * (1 - color.alpha(map.get($-colors, "fill-quarternary")))
)}; )};