Commit 7395160e authored by monday's avatar monday Committed by Jakub Steiner

Adwaita: Improve dropdown menu buttons

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 #1539
parent b522c598
Pipeline #55053 passed with stage
in 11 minutes and 47 seconds
......@@ -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;
......
......@@ -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; }
......
......@@ -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; }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment