From 06ae107d920c2094e6b6c69da0da163cc6f92cc7 Mon Sep 17 00:00:00 2001
From: Csaba Jakosa <megax@yeahunter.hu>
Date: Sun, 10 Apr 2016 14:32:37 +0200
Subject: [PATCH] gtk 3.20: Menu and paned fix. (#311)

* * Menu and paned fix.

* * popover menu transition fix.

* * popover and menuitem separator fix.

* * Re-enabled code.

* * Menu list (gedit) fix style. Other fix.

* * Text warning fix.

* * Text warning fix. Space fix...
---
 gtk-3.20/scss/widgets/_menu.scss    | 234 ++++++++++++++++------------
 gtk-3.20/scss/widgets/_sidebar.scss |  90 +++++++----
 gtk-3.20/scss/widgets/_view.scss    |   4 +
 3 files changed, 202 insertions(+), 126 deletions(-)

diff --git a/gtk-3.20/scss/widgets/_menu.scss b/gtk-3.20/scss/widgets/_menu.scss
index 2f15ea1..cd863de 100755
--- a/gtk-3.20/scss/widgets/_menu.scss
+++ b/gtk-3.20/scss/widgets/_menu.scss
@@ -6,30 +6,32 @@
 **********/
 
 @include exports("menubar") {
-    .menubar, menubar {
+    menubar, .menubar {
         -GtkWidget-window-dragging: true;
 
+        padding: 0;
         border: 0;
         background-color: $menubar_bg_color;
         background-image: none;
+        //box-shadow: inset 0 -1px shade($menubar_bg_color, .9);
         color: $menubar_fg_color;
 
-
-        &.menuitem, .menuitem, menuitem {
+        > menuitem {
+            min-height: 16px;
             padding: $spacing ($spacing * 2);
             border: 1px solid transparent;
             background-color: transparent;
             background-image: none;
-            color: $menu_fg_color;
+            color: $menubar_fg_color;
 
             &:hover {
-                border-color: mix($menu_bg_color, $menu_fg_color, .21);
-                background-color: mix($menu_bg_color, $menu_fg_color, .21);
+                border-color: mix($menubar_bg_color, $menubar_fg_color, .21);
+                background-color: mix($menubar_bg_color, $menubar_fg_color, .21);
                 background-image: none;
-                color: shade($menu_fg_color, 1.08);
+                color: shade($menubar_fg_color, 1.08);
             }
 
-            *:hover { color: shade($menu_fg_color, 1.08); }
+            *:hover { color: shade($menubar_fg_color, 1.08); }
         }
     }
 }
@@ -40,58 +42,28 @@
 *******/
 
 @include exports("menu") {
-    * {
-        padding: 0;
-    }
-
-    combobox {
-        &.menu, .menu, menu {
-            background-color: $menu_bg_color;
-            margin: $spacing;
-        }
-    }
-
-    #toolbar-popup, menu {
+    menu, .menu {
         padding: 0;
         border-radius: 0;
         border: 0;
         background-color: $menu_bg_color;
         color: $menu_fg_color;
 
-        &:checked { background-color: $selected_bg_color; }
+        .csd & { border: 0; }  // axes borders in a composited env
 
-        button {
-            &, &:hover, &:active, &:active *:disabled, &:disabled {
-                border-width: 0;
-                background-color: transparent;
-                background-image: none;
-            }
+        &:selected { background-color: $selected_bg_color; }
+
+        separator {
+            padding: 0;
+            border-style: none;
+            background-color: shade($menu_bg_color, ($contrast + .1));
         }
-    }
 
-    menuitem window decoration {
-        box-shadow: 0 2px 3px rgba(0,0,0,.2);
-    }
-
-    .context-menu { font: initial; }
-
-    .menuitem, menuitem {
-        &, menu & {
-            margin: $spacing;
-            padding: $spacing 8px;
-            border: 0;
+        menuitem {
+            min-height: 16px;
+            min-width: 40px;
+            padding: $spacing;
             border-radius: 0;
-            background-color: transparent;
-            background-image: none;
-
-            -GtkMenuItem-arrow-scaling: .5;
-
-            menu &:last-child {
-                padding-bottom: 8px;
-            }
-            menu &:first-child {
-                padding-top: 8px;
-            }
 
             &:active, &:hover {
                 border: 0;
@@ -103,51 +75,88 @@
             *:active, *:hover { color: $selected_fg_color; }
 
             &:disabled, *:disabled { color: mix($menu_fg_color, $menu_bg_color, .5); }
+
+            // submenu indicators
+            arrow {
+                min-height: 16px;
+                min-width: 16px;
+
+                &:dir(ltr) {
+                    -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
+                    margin-left: 10px;
+                }
+
+                &:dir(rtl) {
+                    -gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
+                    margin-right: 10px;
+                }
+            }
+
+            &.button, &.button.flat {
+                &, &:focus, &:active, &:disabled, &:active:disabled {
+                    background-color: transparent;
+                    background-image: none;
+                    border: 0;
+                    box-shadow: none;
+                    color: currentColor;
+                }
+
+                &:hover, &:focus:hover, &:active:hover, &:selected {
+                    background-image: none;
+                    background-color: $selected_bg_color;
+                    color: $selected_fg_color;
+                }
+            }
+
+            calendar {
+                &:inconsistent { color: mix($menu_fg_color, $menu_bg_color, .5); }
+
+                .button {
+                    border-style: none;
+                    background-color: transparent;
+                    background-image: none;
+                }
+            }
         }
 
-        &.check, &.radio {
-            &, &:focus, &:hover, &:disabled { background-image: none; }
+        // overflow arrows
+        > arrow {
+            //@include button(undecorated);
 
-            &, &:focus, &:hover, &:active, &:disabled {
-                border-style: none;
+            min-height: 16px;
+            min-width: 16px;
+            padding: $spacing;
+            background-color: $menu_bg_color;
+            border-radius: 0;
+
+            &.top {
+                margin-top: -6px;
+                border-bottom: 1px solid mix($fg_color, $base_color, .1);
+                -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
+            }
+
+            &.bottom {
+                margin-bottom: -6px;
+                border-top: 1px solid mix($fg_color, $base_color, .1);
+                -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+            }
+
+            &:hover { background-color: mix($fg_color, $base_color, .1); }
+
+            &:backdrop { background-color: $backdrop_menu_color; }
+
+            &:disabled {
+                color: transparent;
                 background-color: transparent;
+                border-color: transparent;
             }
         }
+    }
 
-        &.separator {
-            padding: 0;
+    .context-menu { font: initial; }
 
-            border-style: none;
-            color: shade($menu_bg_color, ($contrast + .1));
-        }
-
-        &.button, &.button.flat {
-            &, &:focus, &:active, &:disabled, &:active:disabled {
-                background-color: transparent;
-                background-image: none;
-                border: 0;
-                box-shadow: none;
-                color: currentColor;
-            }
-
-            &:hover, &:focus:hover, &:active:hover, &:selected {
-                background-image: none;
-                background-color: $selected_bg_color;
-                color: $selected_fg_color;
-            }
-        }
-
-        calendar {
-            &:indeterminate { color: mix($menu_fg_color, $menu_bg_color, .5); }
-
-            .button {
-                border-style: none;
-                background-color: transparent;
-                background-image: none;
-            }
-        }
-
-        .accelerator {
+    menuitem {
+        accelerator {
             color: alpha($menu_fg_color, .6);
 
             &:hover { color: alpha($selected_fg_color, .8); }
@@ -155,6 +164,18 @@
             &:disabled { color: alpha(mix($menu_fg_color, $menu_bg_color, .5), .4); }
         }
 
+        check, radio {
+            min-height: 16px;
+            min-width: 16px;
+
+            &:dir(ltr) { margin-right: 7px; }
+            &:dir(rtl) { margin-left: 7px; }
+        }
+
+        window decoration {
+            box-shadow: 0 2px 3px alpha($black, .2);
+        }
+
         entry { @include entry($menu_bg_color, $menu_fg_color); }
     }
 }
@@ -204,13 +225,28 @@
             }
         }
 
-        view, .view, list {
-            background-color: shade($menu_bg_color, ($contrast + .5));
-            background-image: none;
-            color: $menu_fg_color;
+        treeview.view {
+            &:hover, &:selected, &:selected:focus, &:backdrop:selected, &:backdrop:selected:focus { border-top-color: $selected_bg_color; }
+
+            &, &:backdrop { border-top-color: shade($menu_bg_color, ($contrast + .4)); }
         }
 
-        .list-row, list row {
+        view, .view, list {
+            &:hover {
+                background-image: none;
+                background-color: $selected_bg_color;
+                color: $selected_fg_color;
+            }
+
+            &, &:backdrop {
+                background-color: shade($menu_bg_color, ($contrast + .5));
+                background-image: none;
+                color: $menu_fg_color;
+                border-color: border_normal($menu_bg_color);
+            }
+        }
+
+        list row {
             &, & .button {
                 background-color: transparent;
                 background-image: none;
@@ -234,14 +270,6 @@
         button { @include button($menu_bg_color, $menu_fg_color);  }
 
         > list, > view, > toolbar { background-color: transparent; }
-
-        separator {
-            border: 0;
-            background-color: transparent;
-            color: alpha($menu_bg_color, .5);
-            font-size: 80%;
-            font-weight: bold;
-        }
     }
 
     modelbutton {
@@ -269,5 +297,11 @@
                 &.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
             }
         }
+
+        &.flat {
+            &, &:hover {
+                transition: none;
+            }
+        }
     }
 }
diff --git a/gtk-3.20/scss/widgets/_sidebar.scss b/gtk-3.20/scss/widgets/_sidebar.scss
index 61b7a0a..18e5963 100755
--- a/gtk-3.20/scss/widgets/_sidebar.scss
+++ b/gtk-3.20/scss/widgets/_sidebar.scss
@@ -86,32 +86,70 @@
 
 @include exports("paned") {
     paned {
-        -GtkPaned-handle-size: 1;
-        -gtk-icon-source: none;
+        > separator {
+            min-width: 1px;
+            min-height: 1px;
+            -gtk-icon-source: none; // defeats the ugly default handle decoration
+            border-style: none; // just to be sure
+            background-color: transparent;
+            // workaround, using background istead of a border since the border will get rendered twice (?)
+            background-image: image(shade($bg_color, .9));
+            background-size: 1px 1px;
 
-        margin: 0 $spacing;
+            &:selected { background-image: image($selected_bg_color); } // FIXME is this needed?
+
+            &:backdrop { background-image: image($backdrop_borders_color); }
+
+            &.wide {
+                min-width: 5px;
+                min-height: 5px;
+                background-color: $bg_color;
+                background-image: image(border_normal($bg_color)), image(border_normal($bg_color));
+                background-size: 1px 1px, 1px 1px;
+
+                &:backdrop {
+                    background-color: $backdrop_bg_color;
+                    background-image: image($backdrop_borders_color),
+                                      image($backdrop_borders_color);
+              }
+           }
+        }
+
+        &.horizontal > separator {
+            background-repeat: repeat-y;
+
+            &:dir(ltr) {
+                margin: 0 -8px 0 0;
+                padding: 0 8px 0 0;
+                background-position: left;
+            }
+
+            &:dir(rtl) {
+                margin: 0 0 0 -8px;
+                padding: 0 0 0 8px;
+                background-position: right;
+            }
+
+            &.wide {
+                margin: 0;
+                padding: 0;
+                background-repeat: repeat-y, repeat-y;
+                background-position: left, right;
+            }
+        }
+
+        &.vertical > separator {
+            margin: 0 0 -8px 0;
+            padding: 0 0 8px 0;
+            background-repeat: repeat-x;
+            background-position: top;
+
+            &.wide {
+                margin: 0;
+                padding: 0;
+                background-repeat: repeat-x, repeat-x;
+                background-position: bottom, top;
+            }
+        }
     }
-
-
-    paned:dir(rtl) {
-        margin-right: 0;
-        margin-left: $spacing;
-    }
-
-    paned .pane-separator { background-color: shade($bg_color, .9); }
-
-    paned.wide {
-        -GtkPaned-handle-size: 4;
-
-        margin: 0;
-    }
-
-    paned.wide .pane-separator {
-        background-color: transparent;
-        border-style: none solid;
-        border-color: shade($bg_color, .9);
-        border-width: 1px;
-    }
-
-    paned.wide.vertical .pane-separator { border-style: solid none; }
 }
diff --git a/gtk-3.20/scss/widgets/_view.scss b/gtk-3.20/scss/widgets/_view.scss
index 0e144b0..5fc50e0 100644
--- a/gtk-3.20/scss/widgets/_view.scss
+++ b/gtk-3.20/scss/widgets/_view.scss
@@ -47,6 +47,7 @@
         border: 1px solid darken($selected_bg_color, 10%);
         background-color: transparentize(darken($selected_bg_color, 10%), 0.8);
     }
+
     treeview entry {
         &.flat, & {
             border-radius: 0;
@@ -56,6 +57,7 @@
             &:focus { border-color: $selected_bg_color; }
         }
     }
+
     %column_header_button {
         padding: 0 6px;
         border-radius: 0;
@@ -82,6 +84,7 @@
             }
         }
     }
+
     treeview.view {
         -GtkTreeView-grid-line-width: 1;
         -GtkTreeView-grid-line-pattern: '';
@@ -127,6 +130,7 @@
             border-left-color: mix($backdrop_fg_color, $backdrop_bg_color, .5);
             border-top: $backdrop_bg_color;
         }
+
         &:drop(active) {
             border-style: solid none;
             border-width: 1px;