[libadwaita/wip/exalm/background-colors2: 2/17] stylesheet: Remove .sidebar border

[Alexander Mikhaylenko <alexm src gnome org>]

commit d8b9cf1090b66e8611b8e79c5cc98225bcccd1ee
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Fri Oct 1 13:25:04 2021 +0500

    stylesheet: Remove .sidebar border
    
    It's been a problem for a long time, and now that designers want consistent
    sidebar colors it's gonna get in the way even more as if you just ignore it
    and use a plain listbox/listview as a sidebar it will have the wrong color.
    
    So just remove that border and tell people to use manual separators
    instead.
    
    Keep an explicit border in GtkAssistant. Inspector and gtk demos will be
    missing borders, but not much we can do here.
    
    Update migration guide.

 doc/migrating-libhandy-1-4-to-libadwaita.md |  5 +++++
 src/stylesheet/widgets/_dialogs.scss        |  1 +
 src/stylesheet/widgets/_sidebars.scss       | 25 +++++++++----------------
 3 files changed, 15 insertions(+), 16 deletions(-)
---
diff --git a/doc/migrating-libhandy-1-4-to-libadwaita.md b/doc/migrating-libhandy-1-4-to-libadwaita.md
index f49ac2f1..a6360dd5 100644
--- a/doc/migrating-libhandy-1-4-to-libadwaita.md
+++ b/doc/migrating-libhandy-1-4-to-libadwaita.md
@@ -338,6 +338,11 @@ If you were using `@theme_selected_bg_color` as a text color, use
 `@accent_color` instead to make sure the text is readable. You can also use the
 `.accent` style class to apply the correct color.
 
+#### Make sure your sidebars have borders
+
+The `.sidebar` style class doesn't provide a border by default. Instead, use a
+[class@Gtk.Separator] with the style class `.sidebar` manually.
+
 #### Adapt to Header Bar, Action Bar and Toolbar Style Changes
 
 When possible, buttons in [class@Gtk.HeaderBar] and [class@Gtk.ActionBar] will
diff --git a/src/stylesheet/widgets/_dialogs.scss b/src/stylesheet/widgets/_dialogs.scss
index 7616f8f4..ba713886 100644
--- a/src/stylesheet/widgets/_dialogs.scss
+++ b/src/stylesheet/widgets/_dialogs.scss
@@ -31,6 +31,7 @@ window.assistant {
   .sidebar {
     padding: $menu-margin;
     background-clip: padding-box;
+    @extend %sidebar_border;
 
     > label {
       padding: 6px 12px;
diff --git a/src/stylesheet/widgets/_sidebars.scss b/src/stylesheet/widgets/_sidebars.scss
index 1774b5a8..fd5653ae 100644
--- a/src/stylesheet/widgets/_sidebars.scss
+++ b/src/stylesheet/widgets/_sidebars.scss
@@ -2,25 +2,18 @@
   background-color: mix($bg_color, $base_color, 50%);
   background-clip: padding-box;
 
-  &:not(separator) {
-    &:dir(ltr),
-    &.left,
-    &.left:dir(rtl) {
-      border-right: 1px solid $borders_color;
-      border-left-style: none;
-    }
-
-    &:dir(rtl),
-    &.right {
-      border-left: 1px solid $borders_color;
-      border-right-style: none;
-    }
-  }
-
   listview.view,
   list { background-color: transparent; }
+}
+
+%sidebar_border {
+  &:dir(ltr) {
+    border-right: 1px solid $borders_color;
+  }
 
-  paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
+  &:dir(rtl) {
+    border-left: 1px solid $borders_color;
+  }
 }
 
 stacksidebar row {