callisto-debian/gtk3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adwaita: Improve dropdown menu buttons

Browse Source 
Improve overflow arrow buttons drawing on a scrollable dropdown menu:
reduce top button's margin-top to match size of a bottom button, add
margin-top for bottom button to compensate bottom margin (otherwise
button overlaps with menu content).

Closes https://gitlab.gnome.org/GNOME/gtk/issues/1539
This commit is contained in:
Alex Monday
2018-12-22 14:04:13 +05:00
committed by Jakub Steiner
parent b522c59880
commit 7395160e5b
3 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2204,7 +2204,7 @@ menu,
border-radius: 0;
&.top {
margin-top: -6px;
margin-top: -2px;
border-bottom: 1px solid mix($fg_color, $base_color, 10%);
border-top-right-radius: $menu_radius;
border-top-left-radius: $menu_radius;
@ -2212,6 +2212,7 @@ menu,
}
&.bottom {
margin-top: 4px;
margin-bottom: -6px;
border-top: 1px solid mix($fg_color, $base_color, 10%);
border-bottom-right-radius: $menu_radius;

4
gtk/theme/Adwaita/gtk-contained-dark.css
View File

@ -839,9 +839,9 @@ menu menuitem label:dir(rtl), menu menuitem label:dir(ltr), .menu menuitem label
menu > arrow, .menu > arrow, .context-menu > arrow { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; min-height: 16px; min-width: 16px; padding: 4px; background-color: #2f2f2f; border-radius: 0; }
menu > arrow.top, .menu > arrow.top, .context-menu > arrow.top { margin-top: -6px; border-bottom: 1px solid #404040; border-top-right-radius: 5px; border-top-left-radius: 5px; -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
menu > arrow.top, .menu > arrow.top, .context-menu > arrow.top { margin-top: -2px; border-bottom: 1px solid #404040; border-top-right-radius: 5px; border-top-left-radius: 5px; -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
menu > arrow.bottom, .menu > arrow.bottom, .context-menu > arrow.bottom { margin-bottom: -6px; border-top: 1px solid #404040; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
menu > arrow.bottom, .menu > arrow.bottom, .context-menu > arrow.bottom { margin-top: 4px; margin-bottom: -6px; border-top: 1px solid #404040; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
menu > arrow:hover, .menu > arrow:hover, .context-menu > arrow:hover { background-color: #404040; }

4
gtk/theme/Adwaita/gtk-contained.css
View File

@ -847,9 +847,9 @@ menu menuitem label:dir(rtl), menu menuitem label:dir(ltr), .menu menuitem label
menu > arrow, .menu > arrow, .context-menu > arrow { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; min-height: 16px; min-width: 16px; padding: 4px; background-color: #ffffff; border-radius: 0; }
menu > arrow.top, .menu > arrow.top, .context-menu > arrow.top { margin-top: -6px; border-bottom: 1px solid #eaebeb; border-top-right-radius: 5px; border-top-left-radius: 5px; -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
menu > arrow.top, .menu > arrow.top, .context-menu > arrow.top { margin-top: -2px; border-bottom: 1px solid #eaebeb; border-top-right-radius: 5px; border-top-left-radius: 5px; -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
menu > arrow.bottom, .menu > arrow.bottom, .context-menu > arrow.bottom { margin-bottom: -6px; border-top: 1px solid #eaebeb; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
menu > arrow.bottom, .menu > arrow.bottom, .context-menu > arrow.bottom { margin-top: 4px; margin-bottom: -6px; border-top: 1px solid #eaebeb; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
menu > arrow:hover, .menu > arrow:hover, .context-menu > arrow:hover { background-color: #eaebeb; }