diff options
Diffstat (limited to 'examples/js/simple-bar')
| -rw-r--r-- | examples/js/simple-bar/style.scss | 14 | ||||
| -rw-r--r-- | examples/js/simple-bar/widget/Bar.tsx | 6 |
2 files changed, 11 insertions, 9 deletions
diff --git a/examples/js/simple-bar/style.scss b/examples/js/simple-bar/style.scss index f98286e..1dcf729 100644 --- a/examples/js/simple-bar/style.scss +++ b/examples/js/simple-bar/style.scss @@ -1,3 +1,5 @@ +@use "sass:color"; + $bg: #212223; $fg: #f1f1f1; $accent: #378DF7; @@ -16,12 +18,12 @@ window.Bar { background-color: transparent; &:hover label { - background-color: transparentize($fg, 0.84); - border-color: transparentize($accent, 0.8); + background-color: color.adjust($fg, $alpha: -0.84); + border-color: color.adjust($accent, $alpha: -0.8); } &:active label { - background-color: transparentize($fg, 0.8) + background-color: color.adjust($fg, $alpha: -0.8) } } @@ -64,10 +66,12 @@ window.Bar { margin-right: .6em; } - margin: 0 1em; + & { + margin: 0 1em; + } trough { - background-color: transparentize($fg, 0.8); + background-color: color.adjust($fg, $alpha: -0.8); border-radius: $radius; } diff --git a/examples/js/simple-bar/widget/Bar.tsx b/examples/js/simple-bar/widget/Bar.tsx index 029aca1..f5e96cb 100644 --- a/examples/js/simple-bar/widget/Bar.tsx +++ b/examples/js/simple-bar/widget/Bar.tsx @@ -128,15 +128,13 @@ function Time({ format = "%H:%M - %A %e." }) { } export default function Bar(monitor: Gdk.Monitor) { - const anchor = Astal.WindowAnchor.TOP - | Astal.WindowAnchor.LEFT - | Astal.WindowAnchor.RIGHT + const { TOP, LEFT, RIGHT } = Astal.WindowAnchor return <window className="Bar" gdkmonitor={monitor} exclusivity={Astal.Exclusivity.EXCLUSIVE} - anchor={anchor}> + anchor={TOP | LEFT | RIGHT}> <centerbox> <box hexpand halign={Gtk.Align.START}> <Workspaces /> |