[libadwaita/wip/exalm/background-colors: 49/54] Rework .content list style

[Alexander Mikhaylenko <alexm src gnome org>]

commit 6f16c4afeb94bb5abaea5f7b4e0ae241339f76e5
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Thu Sep 2 18:34:26 2021 +0500

    Rework .content list style
    
    - Remove expander row margins
    - Move the list background and borders to the list instead of rows
    - Use transparency for hover/active states and expander inner list

 src/adw-expander-row.c             |  28 +------
 src/stylesheet/widgets/_lists.scss | 157 +++++++++++++------------------------
 2 files changed, 59 insertions(+), 126 deletions(-)
---
diff --git a/src/adw-expander-row.c b/src/adw-expander-row.c
index efab0122..3bc794d1 100644
--- a/src/adw-expander-row.c
+++ b/src/adw-expander-row.c
@@ -37,10 +37,6 @@
  * `list.nested` for the list it can expand, and `image.expander-row-arrow` for
  * its arrow.
  *
- * When expanded, `AdwExpanderRow` will add the
- * `.checked-expander-row-previous-sibling` style class to its previous sibling,
- * and remove it when retracted.
- *
  * Since: 1.0
  */
 
@@ -81,25 +77,6 @@ enum {
 
 static GParamSpec *props[LAST_PROP];
 
-static void
-update_arrow (AdwExpanderRow *self)
-{
-  AdwExpanderRowPrivate *priv = adw_expander_row_get_instance_private (self);
-  GtkWidget *previous_sibling = gtk_widget_get_prev_sibling (GTK_WIDGET (self));
-
-  if (priv->expanded)
-    gtk_widget_set_state_flags (GTK_WIDGET (self), GTK_STATE_FLAG_CHECKED, FALSE);
-  else
-    gtk_widget_unset_state_flags (GTK_WIDGET (self), GTK_STATE_FLAG_CHECKED);
-
-  if (previous_sibling) {
-    if (priv->expanded)
-      gtk_widget_add_css_class (previous_sibling, "checked-expander-row-previous-sibling");
-    else
-      gtk_widget_remove_css_class (previous_sibling, "checked-expander-row-previous-sibling");
-  }
-}
-
 static void
 adw_expander_row_get_property (GObject    *object,
                                guint       prop_id,
@@ -529,7 +506,10 @@ adw_expander_row_set_expanded (AdwExpanderRow *self,
 
   priv->expanded = expanded;
 
-  update_arrow (self);
+  if (expanded)
+    gtk_widget_set_state_flags (GTK_WIDGET (self), GTK_STATE_FLAG_CHECKED, FALSE);
+  else
+    gtk_widget_unset_state_flags (GTK_WIDGET (self), GTK_STATE_FLAG_CHECKED);
 
   g_object_notify_by_pspec (G_OBJECT (self), props[PROP_EXPANDED]);
 }
diff --git a/src/stylesheet/widgets/_lists.scss b/src/stylesheet/widgets/_lists.scss
index d5fdc7a7..a26c201c 100644
--- a/src/stylesheet/widgets/_lists.scss
+++ b/src/stylesheet/widgets/_lists.scss
@@ -127,6 +127,9 @@ popover.background.combo > contents {
 
 listview.inline {
   background: none;
+  border: none;
+  box-shadow: none;
+  color: inherit;
 }
 
 /******************
@@ -143,17 +146,40 @@ listview.inline {
   }
 }
 
+%boxed_list_row {
+  transition: 200ms $ease-out-quad;
+    border-top: 1px solid $borders_color;
+
+  &:not(:selected).activatable {
+    &.has-open-popup,
+    &:hover {
+      background-color: gtkalpha(currentColor, .03);
+    }
+
+    &:active {
+      background-color: gtkalpha(currentColor, .08);
+    }
+  }
+}
+
 row.expander {
   // Drop transparent background on expander rows to let nested rows handle it,
   // avoiding double highlights.
-  background-color: transparent;
+  background: none;
   padding: 0px;
 
+  > box > list {
+    background: none;
+    color: inherit;
+  }
+
+  list.nested {
+    background-color: gtkalpha(currentColor, .03);
+    color: inherit;
+  }
+
   list.nested > row {
-    background-color: transparentize($bg_color, 0.5);
-    border-color: $borders_color;
-    border-style: solid;
-    border-width: 1px 0px 0px 0px;
+    @extend %boxed_list_row;
   }
 
   // AdwExpanderRow arrow rotation
@@ -192,98 +218,30 @@ row.expander {
  * Content Lists *
  *****************/
 
-// Makes the corners of the given border rounded.
-// $border must be top, bottom, left, or right.
-@mixin rounded-border($border) {
-  // The floors (top, bottom) and walls (left, right) of the corners matching
-  // $border. This is needed to easily form floor-wall pairs regardless of
-  // whether $border is a floor or a wall.
-  $corners: (
-    'top': (('top'), ('left', 'right')),
-    'bottom': (('bottom'), ('left', 'right')),
-    'left': (('top', 'bottom'), ('left')),
-    'right': (('top', 'bottom'), ('right')),
-  );
-
-  @if not map-get($corners, $border) {
-    @error "Unknown border type: #{$border}";
-  }
-
-  // Loop through the floors and walls of the corners of $border.
-  @each $floor in nth(map-get($corners, $border), 1) {
-    @each $wall in nth(map-get($corners, $border), 2) {
-      border-#{$floor}-#{$wall}-radius: 8px;
-    }
-  }
-}
-
 list.content,
 listview.content {
-  &,
-  list {
-    background-color: transparent;
-  }
+  background-color: $base_color;
+  color: $text_color;
+  border: 1px solid $borders_color;
+  border-radius: 8px;
 
   > row {
-    &:not(:selected) {
-      // Regular rows and expander header rows background
-      &, &.expander row.header {
-        background-color: $base_color;
-
-        &.activatable {
-          &.has-open-popup,
-          &:hover {
-            background-color: gtkmix(currentColor, $base_color, 3%);
-          }
-
-          &:active {
-            background-color: gtkmix(currentColor, $base_color, 8%);
-          }
-        }
-      }
-
-      &.expander {
-        background: none;
-
-        // Nested rows background
-        list.nested > row:not(:selected) {
-          $_nested_row_bg: mix($bg_color, $base_color, 50%);
-          background-color: $_nested_row_bg;
-
-          &.activatable {
-            &.has-open-popup,
-            &:hover {
-              background-color: gtkmix(currentColor, $_nested_row_bg, 3%);
-            }
-
-            &:active {
-              background-color: gtkmix(currentColor, $_nested_row_bg, 8%);
-            }
-          }
-        }
-      }
+    // Regular rows and expander header rows background
+    &, &.expander row.header {
+      @extend %boxed_list_row;
     }
 
-    &,
-    list > row {
-      border-color: $borders_color;
-      border-style: solid;
-      transition: 200ms $ease-out-quad;
-    }
-
-    // Top border
-    &:not(:last-child) {
-      border-width: 1px 1px 0px 1px;
+    &.expander {
+      border: none;
     }
 
     // Rounded top
-    &:first-child,
-    &.expander:first-child row.header,
-    &.expander:checked,
-    &.expander:checked row.header,
-    &.expander:checked + row,
-    &.expander:checked + row.expander row.header {
-      @include rounded-border(top);
+    &:first-child {
+      &, &.expander row.header {
+        border-top-left-radius: 8px;
+        border-top-right-radius: 8px;
+        border-top: none;
+      }
     }
 
     // Bottom border
@@ -294,20 +252,15 @@ listview.content {
     }
 
     // Rounded bottom
-    &:last-child,
-    &.checked-expander-row-previous-sibling,
-    &.expander:checked,
-    &.expander:not(:checked):last-child row.header,
-    &.expander:not(:checked).checked-expander-row-previous-sibling row.header,
-    &.expander.empty:checked row.header,
-    &.expander list.nested > row:last-child {
-      @include rounded-border(bottom);
-    }
-
-    // Add space around expanded rows
-    &.expander:checked:not(:first-child),
-    &.expander:checked + row {
-      margin-top: 6px;
+    &:last-child {
+      &,
+      &.expander:not(:checked),
+      &.expander:not(:checked) row.header,
+      &.expander:checked list.nested,
+      &.expander:checked list.nested > row:last-child {
+        border-bottom-left-radius: 8px;
+        border-bottom-right-radius: 8px;
+      }
     }
   }
 }