Add menu/menubar paddings

This commit is contained in:
mkpaz 2023-02-08 19:17:03 +04:00
parent 033b2d0053
commit 2bade687f7
4 changed files with 17 additions and 6 deletions

@ -3,6 +3,7 @@
@use "../settings/config" as cfg; @use "../settings/config" as cfg;
@use "../settings/effects"; @use "../settings/effects";
@use "../settings/icons"; @use "../settings/icons";
@use "sass:math";
/////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////
// MenuBar // // MenuBar //
@ -14,6 +15,8 @@ $color-menuitem-bg: -color-bg-default !default;
$color-menuitem-bg-hover: if(cfg.$darkMode, -color-base-7, -color-base-1) !default; $color-menuitem-bg-hover: if(cfg.$darkMode, -color-base-7, -color-base-1) !default;
$separator-padding: map-get(cfg.$separators, "small") !default; $separator-padding: map-get(cfg.$separators, "small") !default;
$menu-button-padding-x: cfg.$menu-padding-x - math.div(cfg.$menubar-padding-x, 2) !default;
$menu-button-padding-y: cfg.$menu-padding-y - math.div(cfg.$menubar-padding-y, 2) !default;
.menu-bar { .menu-bar {
@ -23,11 +26,13 @@ $separator-padding: map-get(cfg.$separators, "small") !default;
-fx-padding: 0; -fx-padding: 0;
>.container { >.container {
-fx-padding: cfg.$menubar-padding-y cfg.$menubar-padding-x cfg.$menubar-padding-y cfg.$menubar-padding-x;
>.menu-button { >.menu-button {
-fx-background-color: transparent; -fx-background-color: transparent;
-fx-background-insets: 0 0 cfg.$border-width 0; -fx-background-insets: 0 0 cfg.$border-width 0;
-fx-background-radius: 0; -fx-background-radius: cfg.$popup-radius;
-fx-padding: cfg.$menu-padding-y cfg.$menu-padding-x cfg.$menu-padding-y cfg.$menu-padding-x; -fx-padding: $menu-button-padding-y $menu-button-padding-x $menu-button-padding-y $menu-button-padding-x;
// reset padding of menu buttons when in menu bar // reset padding of menu buttons when in menu bar
>.label { >.label {
@ -91,6 +96,7 @@ $separator-padding: map-get(cfg.$separators, "small") !default;
.menu-item { .menu-item {
-fx-background-color: $color-menuitem-bg; -fx-background-color: $color-menuitem-bg;
-fx-padding: cfg.$menu-padding-y cfg.$menu-padding-x cfg.$menu-padding-y cfg.$menu-padding-x; -fx-padding: cfg.$menu-padding-y cfg.$menu-padding-x cfg.$menu-padding-y cfg.$menu-padding-x;
-fx-background-radius: cfg.$popup-radius;
>.graphic-container { >.graphic-container {
-fx-padding: 0 cfg.$graphic-gap 0 0; -fx-padding: 0 cfg.$graphic-gap 0 0;

@ -130,7 +130,8 @@ $nord16: #B48EAD; // hsl(311, 20.2, 63.1)
@forward "settings/config" with ( @forward "settings/config" with (
$darkMode: true, $darkMode: true,
$border-radius: 1, $border-radius: 1,
$opacity-disabled: 0.55 $opacity-disabled: 0.55,
$popup-radius: 0
); );
@use "general"; @use "general";

@ -133,7 +133,8 @@ $nord16: #B48EAD; // hsl(311, 20.2, 63.1)
@forward "settings/config" with ( @forward "settings/config" with (
$darkMode: false, $darkMode: false,
$border-radius: 1, $border-radius: 1,
$opacity-disabled: 0.6 $opacity-disabled: 0.6,
$popup-radius: 0
); );
@use "general"; @use "general";

@ -50,10 +50,13 @@ $checkbox-mark-padding-x: 4px !default;
$checkbox-label-padding: 2px !default; $checkbox-label-padding: 2px !default;
// menu // menu
$popup-padding-x: 2px !default; $popup-padding-x: 5px !default;
$popup-padding-y: 2px !default; $popup-padding-y: 5px !default;
$popup-shadow-radius: if($darkMode, 8px, 6px) !default; $popup-shadow-radius: if($darkMode, 8px, 6px) !default;
$popup-shadow-spread: if($darkMode, 0.6, 0.3) !default; $popup-shadow-spread: if($darkMode, 0.6, 0.3) !default;
$popup-radius: 5px !default;
$menubar-padding-x: 4px !default;
$menubar-padding-y: 4px !default;
$menu-padding-x: $padding-x !default; $menu-padding-x: $padding-x !default;
$menu-padding-y: $padding-y !default; $menu-padding-y: $padding-y !default;