gtk3.20: Sidebar fix. (#330)

* * Sidebar fix.

* * Sidebar background color fix.

gtk-3.20/scss/_global.scss

@@ -113,6 +113,8 @@ $backdrop_scrollbar_slider_color: mix($backdrop_fg_color, $backdrop_bg_color, .4
 
 $backdrop_menu_color: if($variant == 'light', $backdrop_base_color, mix($backdrop_bg_color, $backdrop_base_color, .2));
 
+$drop_target_color: #4e9a06;
+
 // widget styles
 $roundness: 2px;
 $spacing: 5px;

gtk-3.20/scss/widgets/_base.scss

@@ -128,5 +128,5 @@ assistant {
 
     .sidebar label { padding: 6px 12px; }
 
-    .sidebar label.highlight { background-color: mix($bg_color, $fg_color, .8); }
+    .sidebar label.highlight { background-color: mix($fg_color, $bg_color, .8); }
 }

gtk-3.20/scss/widgets/_button.scss

@@ -3,6 +3,47 @@
 **********/
 
 @include exports("button_extends") {
+    // stuff for .needs-attention
+    $_dot_color: if($variant=='light', $selected_bg_color, lighten($selected_bg_color, .15));
+
+    @keyframes needs_attention {
+        from {
+            background-image: -gtk-gradient(radial, center center, 0, center center, .01, to($_dot_color), to(transparent));
+        }
+
+        to {
+            background-image: -gtk-gradient(radial, center center, 0, center center, .5, to($selected_bg_color), to(transparent));
+        }
+    }
+
+    %needs_attention {
+        animation: needs_attention 150ms ease-in;
+        $_dot_shadow: _text_shadow_color();
+        $_dot_shadow_r: if($variant=='light', .5, .45);
+        background-image: -gtk-gradient(radial, center center, 0, center center, .5, to($_dot_color), to(transparent)),
+                          -gtk-gradient(radial, center center, 0, center center, $_dot_shadow_r, to($_dot_shadow), to(transparent));
+        background-size: 6px 6px, 6px 6px;
+        background-repeat: no-repeat;
+
+        @if $variant == 'light' {
+            background-position: right 3px, right 4px;
+        }
+        @else {
+            background-position: right 3px, right 2px;
+        }
+
+        &:backdrop { background-size: 6px 6px, 0 0; }
+
+        &:dir(rtl) {
+            @if $variant == 'light' {
+                background-position: left 3px, left 4px;
+            }
+            @else {
+                background-position: left 3px, left 2px;
+            }
+        }
+    }
+
     %button {
         padding: $spacing ($spacing + 2px);
         border-width: 1px;

gtk-3.20/scss/widgets/_misc.scss

@@ -232,7 +232,7 @@
         @at-root %nobg_selected_items, & {
             color: $selected_fg_color;
 
-            @if $variant == 'light' { outline-color: transparentize($selected_fg_color, 0.7); }
+            @if $variant == 'light' { outline-color: transparentize($selected_fg_color, .7); }
 
             &:disabled { color: mix($selected_fg_color, $selected_bg_color, .5); }
 

gtk-3.20/scss/widgets/_sidebar.scss

@@ -4,78 +4,151 @@
 
 @include exports("sidebar") {
     .sidebar {
-        &, &.view, .view, view, scrolledwindow {
+        border-style: none;
+        background-color: mix($bg_color, $base_color, .5);
+
+        .view { // .view, nemo sidebar fix.
             background-color: $bg_color;
             color: mix($fg_color, $bg_color, .1);
-
-            &.separator, separator {
-                &, &:hover, &:focus {
-                    border-width: 1px;
-                    border-style: solid;
-                    border-color: shade($bg_color, .9);
-                    color: shade($bg_color, .9);
-                }
-            }
         }
 
-        row, .view row, view row {
+        @at-root %sidebar_left,
-            &:selected {
+        &:dir(ltr),
-                &, &:hover, &:focus {
+        &.left,
-                    border: 0;
+        &.left:dir(rtl) {
-                    background-image: none;
+            border-right: 1px solid $borders_color;
-                    background-color: $selected_bg_color;
+            border-left-style: none;
-                    color: $selected_fg_color;
         }
 
-                &:hover {
+        @at-root %sidebar_right
-                    border: 0;
+        &:dir(rtl),
-                    background-image: none;
+        &.right {
-                    background-color: shade($selected_bg_color, 1.05);
+            border-left: 1px solid $borders_color;
-                    color: $selected_fg_color;
+            border-right-style: none;
-                }
         }
 
-            &:hover {
+        &:backdrop {
-                border: 0;
+            background-color: $backdrop_sidebar_bg_color;
-                background-image: none;
+            border-color: $backdrop_borders_color;
-                background-color: shade($bg_color, 1.05);
+            transition: $backdrop_transition;
-            }
-        }
-
-        .sidebar-label {
-            padding-left: $spacing;
-            padding-right: $spacing;
         }
 
         .frame, frame { border-width: 0; }
 
-        .sidebar-icon {
+        list { background-color: transparent; }
-              padding-left: $spacing * 2;
+
-              padding-right: $spacing * 2;
+        paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; } }
     }
 
-        assistant & {
+    stacksidebar {
-            padding: $spacing;
+        &.sidebar {
-            border-width: 0 1px 0 0;
+            &:dir(ltr),
-            border-style: solid;
+            &.left,
-            border-right-color: border_normal($bg_color);
+            &.left:dir(rtl) {
-            border-radius: 0;
+                list { @extend %sidebar_left; }
-            background-color: $bg_color;
-            color: mix($fg_color, $bg_color, .1);
-
-            &:dir(ltr) { border-width: 0 1px 0 0; }
-
-            &:dir(rtl) { border-width: 0 0 0 1px; }
-
-            label {
-                padding: $spacing ($spacing * 2);
-
-                &.highlight { background-color: mix($bg_color, $fg_color, .8); }
             }
 
-            &.csd .sidebar { border-top-style: none; }
+            &:dir(rtl),
+            &.right {
+                list { @extend %sidebar_right; }
+            }
+        }
 
-            .highlight { font: bold; }
+        row {
+            padding: $spacing * 2 $spacing;
+
+            > label {
+                padding-left: $spacing;
+                padding-right: $spacing;
+            }
+
+            &.needs-attention > label {
+                @extend %needs_attention;
+
+                background-size: 6px 6px, 0 0;
+            }
+        }
+    }
+
+    $_placesidebar_icons_opacity: 0.7;
+
+    placessidebar {
+        > viewport.frame { border-style: none; }
+
+        row {
+            // Needs overriding of the GtkListBoxRow padding
+            min-height: 36px;
+            padding: 0px;
+
+            // Using margins/padding directly in the SidebarRow
+            // will make the animation of the new bookmark row jump
+            > revealer { padding: 0 14px; }
+
+            &:selected { color: $selected_fg_color; }
+
+            &:disabled { color: $insensitive_fg_color; }
+
+            &:backdrop {
+                color: $backdrop_fg_color;
+
+                &:selected { color: $backdrop_selected_fg_color; }
+
+                &:disabled { color: $backdrop_insensitive_color; }
+            }
+
+            image.sidebar-icon {
+                opacity: $_placesidebar_icons_opacity; // dim the device icons
+
+                &:dir(ltr) { padding-right: 8px; }
+                &:dir(rtl) { padding-left: 8px; }
+            }
+
+            label.sidebar-label {
+                &:dir(ltr) { padding-right: 2px; }
+                &:dir(rtl) { padding-left: 2px; }
+            }
+
+            @at-root button.sidebar-button {
+                //@extend %button_basic.flat;
+
+                //@extend %button_selected.flat;
+
+                min-height: 26px;
+                min-width: 26px;
+                margin-top: 3px;
+                margin-bottom: 3px;
+                padding: 0;
+                border-radius: 100%;
+                -gtk-outline-radius: 100%;
+
+                &:not(:hover):not(:active),
+                &:backdrop {
+                    > image { opacity: $_placesidebar_icons_opacity; }
+                }
+            }
+
+            // in the sidebar case it makes no sense to click the selected row
+            &:selected:active { box-shadow: none; }
+
+            &.sidebar-placeholder-row {
+                padding: 0 8px;
+                min-height: 2px;
+                background-image: image($drop_target_color);
+                background-clip: content-box;
+            }
+
+            &.sidebar-new-bookmark-row { color: $selected_bg_color; }
+
+            &:drop(active):not(:disabled) {
+                color: $drop_target_color;
+                box-shadow: inset 0 1px $drop_target_color,
+                            inset 0 -1px $drop_target_color;
+
+                &:selected {
+                    color: $selected_fg_color;
+                    background-color: $drop_target_color;
+                }
+            }
         }
     }
 }

gtk-3.20/scss/widgets/_view.scss

@@ -27,7 +27,7 @@
         text {
             @extend %view;
 
-            selection { &:focus, & { @extend %selected_items; }}
+            selection { &:focus, & { @extend %selected_items; } }
         }
     }
 
@@ -350,3 +350,30 @@
     scrolledwindow viewport.frame { border: 0; }
 }
 
+
+/***************
+ ! Places view *
+****************/
+
+@include exports("placesview") {
+    placesview {
+        .server-list-button > image {
+            transition: 200ms $ease-out-quad;
+            -gtk-icon-transform: rotate(0turn);
+        }
+
+        .server-list-button:checked > image {
+            transition: 200ms $ease-out-quad;
+            -gtk-icon-transform: rotate(-0.5turn);
+        }
+
+        row.activatable:hover { background-color: transparent; }
+
+        // this selects the "connect to server" label
+        > actionbar > revealer > box > label {
+            padding-left: 8px;
+            padding-right: 8px;
+        }
+    }
+}
+