Commit 4c270791 authored by nana-4's avatar nana-4

Adwaita: Improve popover.menu styling

Based on the mockup:
https://gitlab.gnome.org/Teams/Design/os-mockups/blob/master/menus/menu-design-patterns.png

- Remove horizontal padding from popover.menu contents
- Remove roundness from modelbutton
- Adjust sizing to match the mockup
- Fix visual glitches on button.image-button.model
- Add missing mergin to arrow icons
- Fix accelerator position in rtl direction
- Fix accelerator color

#1824
parent ab32b1bb
......@@ -4865,28 +4865,29 @@ menubar {
popover.menu {
padding: 0px;
& button.image-button.model {
padding: 0;
border: none;
background: none;
box-shadow: none;
}
& button.image-button.model:selected {
border: none;
color: $selected_fg_color;
background: $selected_bg_color;
}
& box.inline-buttons {
border-radius: 5px;
border-style: none;
border-width: 0;
border-image-source: none;
border-image-width: 1px;
padding: 0 20px;
button.image-button.model {
@include button(undecorated);
min-height: 30px;
min-width: 30px;
padding: 0;
border: none;
outline: none;
transition: none;
&:selected { @extend %selected_items; }
}
}
& box.circular-buttons {
padding-bottom: 5px;
padding: 6px 0;
button.circular.image-button.model {
padding: 11px;
}
}
& > arrow,
......@@ -4894,38 +4895,42 @@ popover.menu {
background-color: $menu_color;
}
&.background > contents {
padding: 8px 0;
}
&.background separator {
margin: 5px 0px;
margin: 6px 0;
}
& accelerator {
margin-left: 20px;
color: gray;
}
color: gtkalpha(currentColor,0.55);
& box.inline-buttons {
padding: 0 5px;
&:dir(ltr) { margin-left: 20px; }
&:dir(rtl) { margin-right: 20px; }
}
& arrow.left,
& radio.left,
& check.left {
margin-left: 0;
margin-right: 12px;
margin-right: 8px;
}
& arrow.right,
& radio.right,
& check.right {
margin-left: 12px;
margin-left: 8px;
margin-right: 0;
}
& modelbutton:selected {
color: $selected_fg_color;
background-color: $selected_bg_color;
}
& modelbutton {
min-height: 30px;
min-width: 40px;
padding: 0 20px;
border-radius: 0;
& modelbutton:selected accelerator {
color: mix($selected_fg_color, gray, 50%);
&:selected { @extend %selected_items; }
}
}
......
......@@ -1905,15 +1905,15 @@ button.titlebutton:backdrop { -gtk-icon-shadow: none; }
.selection-mode headerbar button.titlebutton:backdrop, .selection-mode .titlebar button.titlebutton:backdrop, headerbar.selection-mode button.titlebutton:backdrop, .titlebar.selection-mode button.titlebutton:backdrop { -gtk-icon-shadow: none; }
.view:selected:focus, .view:selected, iconview:selected, textview > text:selected, textview > text selection:focus, textview > text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, spinbutton.vertical text selection, entry selection, modelbutton.flat:selected, .menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, calendar:selected { background-color: #15539e; }
.view:selected:focus, .view:selected, iconview:selected, textview > text:selected, textview > text selection:focus, textview > text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, spinbutton.vertical text selection, entry selection, modelbutton.flat:selected, .menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, calendar:selected, popover.menu box.inline-buttons button.image-button.model:selected, popover.menu modelbutton:selected { background-color: #15539e; }
label:selected, .selection-mode button.titlebutton, .view:selected:focus, .view:selected, iconview:selected, textview > text:selected, textview > text selection:focus, textview > text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, spinbutton.vertical text selection, entry selection, modelbutton.flat:selected, .menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, calendar:selected { color: #ffffff; }
label:selected, .selection-mode button.titlebutton, .view:selected:focus, .view:selected, iconview:selected, textview > text:selected, textview > text selection:focus, textview > text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, spinbutton.vertical text selection, entry selection, modelbutton.flat:selected, .menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, calendar:selected, popover.menu box.inline-buttons button.image-button.model:selected, popover.menu modelbutton:selected { color: #ffffff; }
label:disabled selection, label:disabled:selected, .selection-mode button.titlebutton:disabled, iconview:disabled:selected:focus, .view:disabled:selected, iconview:disabled:selected, textview > text:disabled:selected:focus, textview > text:disabled:selected, textview > text selection:disabled, flowbox flowboxchild:disabled:selected, spinbutton:not(.vertical) selection:disabled, spinbutton.vertical text selection:disabled, entry selection:disabled, modelbutton.flat:disabled:selected, .menuitem.button.flat:disabled:selected, row:disabled:selected, calendar:disabled:selected { color: #8aa9ce; }
label:disabled selection, label:disabled:selected, .selection-mode button.titlebutton:disabled, iconview:disabled:selected:focus, .view:disabled:selected, iconview:disabled:selected, textview > text:disabled:selected:focus, textview > text:disabled:selected, textview > text selection:disabled, flowbox flowboxchild:disabled:selected, spinbutton:not(.vertical) selection:disabled, spinbutton.vertical text selection:disabled, entry selection:disabled, modelbutton.flat:disabled:selected, .menuitem.button.flat:disabled:selected, row:disabled:selected, calendar:disabled:selected, popover.menu box.inline-buttons button.image-button.model:disabled:selected, popover.menu modelbutton:disabled:selected { color: #8aa9ce; }
label:backdrop selection, label:backdrop:selected, .selection-mode button.titlebutton:backdrop, iconview:backdrop:selected:focus, .view:backdrop:selected, iconview:backdrop:selected, textview > text:backdrop:selected:focus, textview > text:backdrop:selected, textview > text selection:backdrop, flowbox flowboxchild:backdrop:selected, spinbutton:not(.vertical) selection:backdrop, spinbutton.vertical text selection:backdrop, entry selection:backdrop, modelbutton.flat:backdrop:selected, .menuitem.button.flat:backdrop:selected, row:backdrop:selected, calendar:backdrop:selected { color: #d6d6d6; }
label:backdrop selection, label:backdrop:selected, .selection-mode button.titlebutton:backdrop, iconview:backdrop:selected:focus, .view:backdrop:selected, iconview:backdrop:selected, textview > text:backdrop:selected:focus, textview > text:backdrop:selected, textview > text selection:backdrop, flowbox flowboxchild:backdrop:selected, spinbutton:not(.vertical) selection:backdrop, spinbutton.vertical text selection:backdrop, entry selection:backdrop, modelbutton.flat:backdrop:selected, .menuitem.button.flat:backdrop:selected, row:backdrop:selected, calendar:backdrop:selected, popover.menu box.inline-buttons button.image-button.model:backdrop:selected, popover.menu modelbutton:backdrop:selected { color: #d6d6d6; }
label:backdrop selection:disabled, label:backdrop:disabled:selected, .selection-mode button.titlebutton:backdrop:disabled, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, textview > text:backdrop:disabled:selected, textview > text selection:backdrop:disabled, flowbox flowboxchild:backdrop:disabled:selected, spinbutton:not(.vertical) selection:backdrop:disabled, spinbutton.vertical text selection:backdrop:disabled, entry selection:backdrop:disabled, modelbutton.flat:backdrop:disabled:selected, .menuitem.button.flat:backdrop:disabled:selected, row:backdrop:disabled:selected, calendar:backdrop:disabled:selected { color: #4f7aaf; }
label:backdrop selection:disabled, label:backdrop:disabled:selected, .selection-mode button.titlebutton:backdrop:disabled, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, textview > text:backdrop:disabled:selected, textview > text selection:backdrop:disabled, flowbox flowboxchild:backdrop:disabled:selected, spinbutton:not(.vertical) selection:backdrop:disabled, spinbutton.vertical text selection:backdrop:disabled, entry selection:backdrop:disabled, modelbutton.flat:backdrop:disabled:selected, .menuitem.button.flat:backdrop:disabled:selected, row:backdrop:disabled:selected, calendar:backdrop:disabled:selected, popover.menu box.inline-buttons button.image-button.model:backdrop:disabled:selected, popover.menu modelbutton:backdrop:disabled:selected { color: #4f7aaf; }
.monospace { font-family: monospace; }
......@@ -2012,29 +2012,31 @@ menubar .csd.popup decoration { border-radius: 0; }
popover.menu { padding: 0px; }
popover.menu button.image-button.model { padding: 0; border: none; background: none; box-shadow: none; }
popover.menu box.inline-buttons { padding: 0 20px; }
popover.menu button.image-button.model:selected { border: none; color: #ffffff; background: #15539e; }
popover.menu box.inline-buttons button.image-button.model { 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: 30px; min-width: 30px; padding: 0; border: none; outline: none; transition: none; }
popover.menu box.inline-buttons { border-radius: 5px; border-style: none; border-width: 0; border-image-source: none; border-image-width: 1px; }
popover.menu box.circular-buttons { padding: 6px 0; }
popover.menu box.circular-buttons { padding-bottom: 5px; }
popover.menu box.circular-buttons button.circular.image-button.model { padding: 11px; }
popover.menu > arrow, popover.menu.background > contents { background-color: #2f2f2f; }
popover.menu.background separator { margin: 5px 0px; }
popover.menu.background > contents { padding: 8px 0; }
popover.menu accelerator { margin-left: 20px; color: gray; }
popover.menu.background separator { margin: 6px 0; }
popover.menu box.inline-buttons { padding: 0 5px; }
popover.menu accelerator { color: alpha(currentColor,0.55); }
popover.menu radio.left, popover.menu check.left { margin-left: 0; margin-right: 12px; }
popover.menu accelerator:dir(ltr) { margin-left: 20px; }
popover.menu radio.right, popover.menu check.right { margin-left: 12px; margin-right: 0; }
popover.menu accelerator:dir(rtl) { margin-right: 20px; }
popover.menu modelbutton:selected { color: #ffffff; background-color: #15539e; }
popover.menu arrow.left, popover.menu radio.left, popover.menu check.left { margin-left: 0; margin-right: 8px; }
popover.menu modelbutton:selected accelerator { color: silver; }
popover.menu arrow.right, popover.menu radio.right, popover.menu check.right { margin-left: 8px; margin-right: 0; }
popover.menu modelbutton { min-height: 30px; min-width: 40px; padding: 0 20px; border-radius: 0; }
statusbar { padding: 6px 10px 6px 10px; }
......
......@@ -1921,15 +1921,15 @@ button.titlebutton:backdrop { -gtk-icon-shadow: none; }
.selection-mode headerbar button.titlebutton:backdrop, .selection-mode .titlebar button.titlebutton:backdrop, headerbar.selection-mode button.titlebutton:backdrop, .titlebar.selection-mode button.titlebutton:backdrop { -gtk-icon-shadow: none; }
.view:selected:focus, .view:selected, iconview:selected, textview > text:selected, textview > text selection:focus, textview > text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, spinbutton.vertical text selection, entry selection, modelbutton.flat:selected, .menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, calendar:selected { background-color: #3584e4; }
.view:selected:focus, .view:selected, iconview:selected, textview > text:selected, textview > text selection:focus, textview > text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, spinbutton.vertical text selection, entry selection, modelbutton.flat:selected, .menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, calendar:selected, popover.menu box.inline-buttons button.image-button.model:selected, popover.menu modelbutton:selected { background-color: #3584e4; }
label:selected, .selection-mode button.titlebutton, .view:selected:focus, .view:selected, iconview:selected, textview > text:selected, textview > text selection:focus, textview > text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, spinbutton.vertical text selection, entry selection, modelbutton.flat:selected, .menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, calendar:selected { color: #ffffff; }
label:selected, .selection-mode button.titlebutton, .view:selected:focus, .view:selected, iconview:selected, textview > text:selected, textview > text selection:focus, textview > text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, spinbutton.vertical text selection, entry selection, modelbutton.flat:selected, .menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, calendar:selected, popover.menu box.inline-buttons button.image-button.model:selected, popover.menu modelbutton:selected { color: #ffffff; }
label:disabled selection, label:disabled:selected, .selection-mode button.titlebutton:disabled, iconview:disabled:selected:focus, .view:disabled:selected, iconview:disabled:selected, textview > text:disabled:selected:focus, textview > text:disabled:selected, textview > text selection:disabled, flowbox flowboxchild:disabled:selected, spinbutton:not(.vertical) selection:disabled, spinbutton.vertical text selection:disabled, entry selection:disabled, modelbutton.flat:disabled:selected, .menuitem.button.flat:disabled:selected, row:disabled:selected, calendar:disabled:selected { color: #9ac2f2; }
label:disabled selection, label:disabled:selected, .selection-mode button.titlebutton:disabled, iconview:disabled:selected:focus, .view:disabled:selected, iconview:disabled:selected, textview > text:disabled:selected:focus, textview > text:disabled:selected, textview > text selection:disabled, flowbox flowboxchild:disabled:selected, spinbutton:not(.vertical) selection:disabled, spinbutton.vertical text selection:disabled, entry selection:disabled, modelbutton.flat:disabled:selected, .menuitem.button.flat:disabled:selected, row:disabled:selected, calendar:disabled:selected, popover.menu box.inline-buttons button.image-button.model:disabled:selected, popover.menu modelbutton:disabled:selected { color: #9ac2f2; }
label:backdrop selection, label:backdrop:selected, .selection-mode button.titlebutton:backdrop, iconview:backdrop:selected:focus, .view:backdrop:selected, iconview:backdrop:selected, textview > text:backdrop:selected:focus, textview > text:backdrop:selected, textview > text selection:backdrop, flowbox flowboxchild:backdrop:selected, spinbutton:not(.vertical) selection:backdrop, spinbutton.vertical text selection:backdrop, entry selection:backdrop, modelbutton.flat:backdrop:selected, .menuitem.button.flat:backdrop:selected, row:backdrop:selected, calendar:backdrop:selected { color: #fcfcfc; }
label:backdrop selection, label:backdrop:selected, .selection-mode button.titlebutton:backdrop, iconview:backdrop:selected:focus, .view:backdrop:selected, iconview:backdrop:selected, textview > text:backdrop:selected:focus, textview > text:backdrop:selected, textview > text selection:backdrop, flowbox flowboxchild:backdrop:selected, spinbutton:not(.vertical) selection:backdrop, spinbutton.vertical text selection:backdrop, entry selection:backdrop, modelbutton.flat:backdrop:selected, .menuitem.button.flat:backdrop:selected, row:backdrop:selected, calendar:backdrop:selected, popover.menu box.inline-buttons button.image-button.model:backdrop:selected, popover.menu modelbutton:backdrop:selected { color: #fcfcfc; }
label:backdrop selection:disabled, label:backdrop:disabled:selected, .selection-mode button.titlebutton:backdrop:disabled, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, textview > text:backdrop:disabled:selected, textview > text selection:backdrop:disabled, flowbox flowboxchild:backdrop:disabled:selected, spinbutton:not(.vertical) selection:backdrop:disabled, spinbutton.vertical text selection:backdrop:disabled, entry selection:backdrop:disabled, modelbutton.flat:backdrop:disabled:selected, .menuitem.button.flat:backdrop:disabled:selected, row:backdrop:disabled:selected, calendar:backdrop:disabled:selected { color: #71a8eb; }
label:backdrop selection:disabled, label:backdrop:disabled:selected, .selection-mode button.titlebutton:backdrop:disabled, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, textview > text:backdrop:disabled:selected, textview > text selection:backdrop:disabled, flowbox flowboxchild:backdrop:disabled:selected, spinbutton:not(.vertical) selection:backdrop:disabled, spinbutton.vertical text selection:backdrop:disabled, entry selection:backdrop:disabled, modelbutton.flat:backdrop:disabled:selected, .menuitem.button.flat:backdrop:disabled:selected, row:backdrop:disabled:selected, calendar:backdrop:disabled:selected, popover.menu box.inline-buttons button.image-button.model:backdrop:disabled:selected, popover.menu modelbutton:backdrop:disabled:selected { color: #71a8eb; }
.monospace { font-family: monospace; }
......@@ -2028,29 +2028,31 @@ menubar .csd.popup decoration { border-radius: 0; }
popover.menu { padding: 0px; }
popover.menu button.image-button.model { padding: 0; border: none; background: none; box-shadow: none; }
popover.menu box.inline-buttons { padding: 0 20px; }
popover.menu button.image-button.model:selected { border: none; color: #ffffff; background: #3584e4; }
popover.menu box.inline-buttons button.image-button.model { 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: 30px; min-width: 30px; padding: 0; border: none; outline: none; transition: none; }
popover.menu box.inline-buttons { border-radius: 5px; border-style: none; border-width: 0; border-image-source: none; border-image-width: 1px; }
popover.menu box.circular-buttons { padding: 6px 0; }
popover.menu box.circular-buttons { padding-bottom: 5px; }
popover.menu box.circular-buttons button.circular.image-button.model { padding: 11px; }
popover.menu > arrow, popover.menu.background > contents { background-color: #ffffff; }
popover.menu.background separator { margin: 5px 0px; }
popover.menu.background > contents { padding: 8px 0; }
popover.menu accelerator { margin-left: 20px; color: gray; }
popover.menu.background separator { margin: 6px 0; }
popover.menu box.inline-buttons { padding: 0 5px; }
popover.menu accelerator { color: alpha(currentColor,0.55); }
popover.menu radio.left, popover.menu check.left { margin-left: 0; margin-right: 12px; }
popover.menu accelerator:dir(ltr) { margin-left: 20px; }
popover.menu radio.right, popover.menu check.right { margin-left: 12px; margin-right: 0; }
popover.menu accelerator:dir(rtl) { margin-right: 20px; }
popover.menu modelbutton:selected { color: #ffffff; background-color: #3584e4; }
popover.menu arrow.left, popover.menu radio.left, popover.menu check.left { margin-left: 0; margin-right: 8px; }
popover.menu modelbutton:selected accelerator { color: silver; }
popover.menu arrow.right, popover.menu radio.right, popover.menu check.right { margin-left: 8px; margin-right: 0; }
popover.menu modelbutton { min-height: 30px; min-width: 40px; padding: 0 20px; border-radius: 0; }
statusbar { padding: 6px 10px 6px 10px; }
......
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