From 1d90c72f4409211097333eb53933668dfd4f87ff Mon Sep 17 00:00:00 2001 From: "frederik.feichtmeier" Date: Thu, 6 Dec 2018 22:49:38 +0100 Subject: [PATCH] Menu border-radius and bos-shadow changes - introduce $menu_radius - use it for menus and context-menus - use the popover box-shadow also for menus - use padding for menus to avoid edge overlapping - remove the background for menus to avoid bleeding out of the round edges --- gtk/theme/Adwaita/_common.scss | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index 2b2ff007aa..03df0f56bb 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -6,6 +6,7 @@ $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); $asset_suffix: if($variant=='dark', '-dark', ''); $backdrop_transition: 200ms ease-out; $button_transition: all 200ms $ease-out-quad; +$menu_radius: 5px; * { padding: 0; @@ -2072,6 +2073,11 @@ menubar, min-height: 16px; padding: 4px 8px; + menu { + border-radius: 0 0 $menu_radius $menu_radius; + menu { border-radius: $menu_radius; } + } + &:hover { //Seems like it :hover even with keyboard focus box-shadow: inset 0 -3px $selected_bg_color; color: $link_color; @@ -2084,13 +2090,18 @@ menubar, } } +// Needed to make the border-radius of menus work +// otherwise the background bleeds out of the menu edges +.background.popup { background-color: transparent; } + menu, .menu, .context-menu { margin: 4px; // see https://bugzilla.gnome.org/show_bug.cgi?id=591258 - padding: 2px 0px; + padding: 8px 0px; background-color: $menu_color; border: 1px solid $borders_color; // adds borders in a non composited env + border-radius: $menu_radius; .csd & { border: none; } // axes borders in a composited env @@ -2152,12 +2163,16 @@ menu, &.top { margin-top: -6px; border-bottom: 1px solid mix($fg_color, $base_color, 10%); + border-top-right-radius: $menu_radius; + border-top-left-radius: $menu_radius; -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); } &.bottom { margin-bottom: -6px; border-top: 1px solid mix($fg_color, $base_color, 10%); + border-bottom-right-radius: $menu_radius; + border-bottom-left-radius: $menu_radius; -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } @@ -4420,7 +4435,7 @@ decoration { .ssd & { box-shadow: 0 0 0 1px $_wm_border; } //just doing borders, wm draws actual shadows .csd.popup & { - border-radius: 0; + border-radius: $menu_radius; box-shadow: 0 1px 2px transparentize(black, 0.8), 0 0 0 1px transparentize($_wm_border, 0.1); } @@ -4649,4 +4664,4 @@ popover.emoji-completion contents row box { popover.emoji-completion .emoji:hover { background: $popover_hover_color; -} +} \ No newline at end of file