AuroraMiddleware/gtk2
1
0
Fork 0
forked from AuroraMiddleware/gtk
Code Issues Pull Requests Projects Releases Wiki Activity

Menu border-radius and bos-shadow changes

Browse Source 
- 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
This commit is contained in:
frederik.feichtmeier 2018-12-06 22:49:38 +01:00
parent 9b9b15c1a0
commit 1d90c72f44
1 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
gtk/theme/Adwaita/_common.scss
View File

@ -6,6 +6,7 @@ $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
$asset_suffix: if($variant=='dark', '-dark', ''); $asset_suffix: if($variant=='dark', '-dark', '');
$backdrop_transition: 200ms ease-out; $backdrop_transition: 200ms ease-out;
$button_transition: all 200ms $ease-out-quad; $button_transition: all 200ms $ease-out-quad;
$menu_radius: 5px;
* { * {
padding: 0; padding: 0;
@ -2072,6 +2073,11 @@ menubar,
min-height: 16px; min-height: 16px;
padding: 4px 8px; 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 &:hover { //Seems like it :hover even with keyboard focus
box-shadow: inset 0 -3px $selected_bg_color; box-shadow: inset 0 -3px $selected_bg_color;
color: $link_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,
.menu, .menu,
.context-menu { .context-menu {
margin: 4px; // see https://bugzilla.gnome.org/show_bug.cgi?id=591258 margin: 4px; // see https://bugzilla.gnome.org/show_bug.cgi?id=591258
padding: 2px 0px; padding: 8px 0px;
background-color: $menu_color; background-color: $menu_color;
border: 1px solid $borders_color; // adds borders in a non composited env 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 .csd & { border: none; } // axes borders in a composited env
@ -2152,12 +2163,16 @@ menu,
&.top { &.top {
margin-top: -6px; margin-top: -6px;
border-bottom: 1px solid mix($fg_color, $base_color, 10%); 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'); -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
} }
&.bottom { &.bottom {
margin-bottom: -6px; margin-bottom: -6px;
border-top: 1px solid mix($fg_color, $base_color, 10%); 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'); -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 .ssd & { box-shadow: 0 0 0 1px $_wm_border; } //just doing borders, wm draws actual shadows
.csd.popup & { .csd.popup & {
border-radius: 0; border-radius: $menu_radius;
box-shadow: 0 1px 2px transparentize(black, 0.8), box-shadow: 0 1px 2px transparentize(black, 0.8),
0 0 0 1px transparentize($_wm_border, 0.1); 0 0 0 1px transparentize($_wm_border, 0.1);
} }
@ -4649,4 +4664,4 @@ popover.emoji-completion contents row box {
popover.emoji-completion .emoji:hover { popover.emoji-completion .emoji:hover {
background: $popover_hover_color; background: $popover_hover_color;
} }