[libadwaita/wip/exalm/stylesheet2: 77/97] stylesheet: Split list styles into a separate file

[Alexander Mikhaylenko <alexm src gnome org>]

commit 249fa1640094c65821b2650af979079e926439b0
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Fri Apr 9 13:42:11 2021 +0500

    stylesheet: Split list styles into a separate file

 src/stylesheet/_common.scss        |  72 ---------
 src/stylesheet/_custom.scss        | 229 ----------------------------
 src/stylesheet/_widgets.scss       |   1 +
 src/stylesheet/meson.build         |   1 +
 src/stylesheet/widgets/_lists.scss | 304 +++++++++++++++++++++++++++++++++++++
 5 files changed, 306 insertions(+), 301 deletions(-)
---
diff --git a/src/stylesheet/_common.scss b/src/stylesheet/_common.scss
index 1e447bf..ffb5ac5 100644
--- a/src/stylesheet/_common.scss
+++ b/src/stylesheet/_common.scss
@@ -282,78 +282,6 @@ separator {
 }
 
 
-/*********
- * Lists *
- *********/
-listview,
-list {
-  color: $text_color;
-  background-color: $base_color;
-  border-color: $borders_color;
-
-  &:backdrop {
-    color: $backdrop_text_color;
-    background-color: $backdrop_base_color;
-    border-color: $backdrop_borders_color;
-  }
-
-  > row { padding: 2px; }
-  > row.expander { padding: 0px; }
-  > row.expander .row-header { padding: 2px; }
-
-  &.horizontal row.separator,
-  &.separators.horizontal > row:not(.separator) {
-    border-left: 1px solid $treeview_borders_color;
-  }
-  &:not(.horizontal) row.separator,
-  &.separators:not(.horizontal) > row:not(.separator) {
-    border-bottom: 1px solid $treeview_borders_color;
-  }
-}
-
-row {
-  @include focus-ring();
-
-  &.activatable {
-    &.has-open-popup, // this is for indicathing which row generated a popover see 
https://bugzilla.gnome.org/show_bug.cgi?id=754411
-
-    &:hover { background-color: if(variant == light, transparentize($fg_color, 0.9), 
transparentize($fg_color, 0.95)); }
-
-    &:active { box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); }
-
-    &:selected {
-      &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
-
-      &.has-open-popup,
-      &:hover { background-color: mix($fg_color, $selected_bg_color, 10%); }
-    }
-  }
-
-  &:selected {
-    outline-color: $alt_focus_border_color;
-
-    @extend %selected_items;
-  }
-}
-
-/*******************************************************
- * Rich Lists                                          *
- * Large list usually containing lots of widgets       *
- * https://gitlab.gnome.org/GNOME/gtk/-/issues/3073    *
- *******************************************************/
-
-
-.rich-list { /* rich lists usually containing other widgets than just labels/text */
-  & > row {
-    padding: 8px 12px;
-    min-height: 32px; /* should be tall even when only containing a label */
-
-    & > box {
-      border-spacing: 12px;
-    }
-  }
-}
-
 /*********************
  * App Notifications *
  *********************/
diff --git a/src/stylesheet/_custom.scss b/src/stylesheet/_custom.scss
index ce1266e..882de72 100644
--- a/src/stylesheet/_custom.scss
+++ b/src/stylesheet/_custom.scss
@@ -9,127 +9,6 @@ $leaflet_outline: rgba(255, 255, 255, if($variant == 'light', 0.2, 0.05));
   $leaflet_outline: transparent;
 }
 
-// AdwActionRow
-
-row {
-  label.subtitle {
-    font-size: smaller;
-    @extend .dim-label;
-  }
-
-  > box.header {
-    margin-left: 12px;
-    margin-right: 12px;
-    min-height: 50px;
-
-    > box.title {
-      margin-top: 8px;
-      margin-bottom: 8px;
-    }
-  }
-}
-
-// AdwComboRow
-
-popover.combo > contents {
-  padding: 0px;
-
-  list, listview {
-    border-style: none;
-    background-color: transparent;
-    min-width: 200px;
-
-    & > row {
-      padding: 0px 12px 0px 12px;
-      min-height: 50px;
-      border-bottom: 1px solid transparentize($borders_color, 0.5);
-
-      &:selected {
-        outline-color: $alt_focus_border_color;
-        color: $text-color;
-        background-color: $menu_selected_color;
-      }
-
-      &:first-child {
-        border-top-left-radius: $popover_radius - 2;
-        border-top-right-radius: $popover_radius - 2;
-      }
-
-      &:last-child {
-        border-bottom-left-radius: $popover_radius - 2;
-        border-bottom-right-radius: $popover_radius - 2;
-        border-bottom: none;
-      }
-    }
-  }
-
-  scrollbar.vertical {
-    padding-top: 2px;
-    padding-bottom: 2px;
-  }
-}
-
-listview.inline {
-  background: none;
-}
-
-// AdwExpanderRow
-
-@mixin margin-start($margin) {
-  &:dir(ltr) {
-    margin-left: $margin;
-  }
-
-  &:dir(rtl) {
-    margin-right: $margin;
-  }
-}
-
-row.expander {
-  // Drop transparent background on expander rows to let nested rows handle it,
-  // avoiding double highlights.
-  background-color: transparent;
-  padding: 0px;
-
-  list.nested > row {
-    background-color: transparentize($bg_color, 0.5);
-    border-color: transparentize($borders_color, 0.3);
-    border-style: solid;
-    border-width: 1px 0px 0px 0px;
-  }
-
-  // AdwExpanderRow arrow rotation
-
-  image.expander-row-arrow {
-    transition: 200ms $ease-out-quad;
-    @include margin-start(6px);
-  }
-
-  &:checked image.expander-row-arrow {
-    -gtk-icon-transform: rotate(0turn);
-  }
-
-  &:not(:checked) image.expander-row-arrow {
-    @extend .dim-label;
-
-    &:dir(ltr) {
-      -gtk-icon-transform: rotate(-0.25turn);
-    }
-
-    &:dir(rtl) {
-      -gtk-icon-transform: rotate(0.25turn);
-    }
-  }
-
-  &:checked image.expander-row-arrow:not(:disabled) {
-    color: $selected_bg_color;
-  }
-
-  & image.expander-row-arrow:disabled {
-    color: $insensitive_fg_color;
-  }
-}
-
 // AdwViewSwitcher
 
 viewswitcher {
@@ -279,114 +158,6 @@ viewswitchertitle viewswitcher {
   margin-right: 12px;
 }
 
-// Content list
-
-// 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;
-  }
-
-  // Nested rows background
-  list.nested > row:not(:active) {
-    &:not(:hover):not(:selected),
-    &:hover:not(.activatable):not(:selected) {
-      background-color: mix($bg_color, $base_color, 0.5);
-    }
-
-    &:hover.activatable:not(:selected) {
-      background-color: mix($fg_color, $base_color, 0.95);
-    }
-  }
-
-  > row {
-    // Regular rows and expander header rows background
-    &:not(.expander):not(:active):not(:hover):not(:selected),
-    &:not(.expander):not(:active):hover:not(.activatable):not(:selected),
-    &.expander row.header:not(:active):not(:hover):not(:selected),
-    &.expander row.header:not(:active):hover:not(.activatable):not(:selected) {
-      background-color: $base_color;
-    }
-
-    &:not(.expander):not(:active):hover.activatable:not(:selected),
-    &.expander row.header:not(:active):hover.activatable:not(:selected) {
-      background-color: mix($fg_color, $base_color, 0.95);
-    }
-
-    &,
-    list > row {
-      border-color: transparentize($borders_color, 0.3);
-      border-style: solid;
-      transition: 200ms $ease-out-quad;
-    }
-
-    // Top border
-    &:not(:last-child) {
-      border-width: 1px 1px 0px 1px;
-    }
-
-    // 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);
-    }
-
-    // Bottom border
-    &:last-child,
-    &.checked-expander-row-previous-sibling,
-    &.expander:checked {
-      border-width: 1px;
-    }
-
-    // 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;
-    }
-  }
-}
-
 // AdwStatusPage
 
 statuspage > scrolledwindow > viewport > box {
diff --git a/src/stylesheet/_widgets.scss b/src/stylesheet/_widgets.scss
index 7a74f55..33524e6 100644
--- a/src/stylesheet/_widgets.scss
+++ b/src/stylesheet/_widgets.scss
@@ -5,6 +5,7 @@
 @import 'widgets/header-bar';
 @import 'widgets/level-bar';
 @import 'widgets/links';
+@import 'widgets/lists';
 @import 'widgets/menus';
 @import 'widgets/notebook';
 @import 'widgets/popovers';
diff --git a/src/stylesheet/meson.build b/src/stylesheet/meson.build
index 07a7895..12ff40a 100644
--- a/src/stylesheet/meson.build
+++ b/src/stylesheet/meson.build
@@ -27,6 +27,7 @@ if not fs.exists('Adwaita-light.css')
       'widgets/_header-bar.scss',
       'widgets/_level-bar.scss',
       'widgets/_links.scss',
+      'widgets/_lists.scss',
       'widgets/_menus.scss',
       'widgets/_notebook.scss',
       'widgets/_popovers.scss',
diff --git a/src/stylesheet/widgets/_lists.scss b/src/stylesheet/widgets/_lists.scss
new file mode 100644
index 0000000..3a41862
--- /dev/null
+++ b/src/stylesheet/widgets/_lists.scss
@@ -0,0 +1,304 @@
+listview,
+list {
+  color: $text_color;
+  background-color: $base_color;
+  border-color: $borders_color;
+
+  &:backdrop {
+    color: $backdrop_text_color;
+    background-color: $backdrop_base_color;
+    border-color: $backdrop_borders_color;
+  }
+
+  > row { padding: 2px; }
+  > row.expander { padding: 0px; }
+  > row.expander .row-header { padding: 2px; }
+
+  &.horizontal row.separator,
+  &.separators.horizontal > row:not(.separator) {
+    border-left: 1px solid $treeview_borders_color;
+  }
+  &:not(.horizontal) row.separator,
+  &.separators:not(.horizontal) > row:not(.separator) {
+    border-bottom: 1px solid $treeview_borders_color;
+  }
+}
+
+row {
+  @include focus-ring();
+
+  &.activatable {
+    &.has-open-popup, // this is for indicathing which row generated a popover see 
https://bugzilla.gnome.org/show_bug.cgi?id=754411
+
+    &:hover { background-color: if(variant == light, transparentize($fg_color, 0.9), 
transparentize($fg_color, 0.95)); }
+
+    &:active { box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); }
+
+    &:selected {
+      &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
+
+      &.has-open-popup,
+      &:hover { background-color: mix($fg_color, $selected_bg_color, 10%); }
+    }
+  }
+
+  &:selected {
+    outline-color: $alt_focus_border_color;
+
+    @extend %selected_items;
+  }
+}
+
+/*******************************************************
+ * Rich Lists                                          *
+ * Large list usually containing lots of widgets       *
+ * https://gitlab.gnome.org/GNOME/gtk/-/issues/3073    *
+ *******************************************************/
+
+.rich-list { /* rich lists usually containing other widgets than just labels/text */
+  & > row {
+    padding: 8px 12px;
+    min-height: 32px; /* should be tall even when only containing a label */
+
+    & > box {
+      border-spacing: 12px;
+    }
+  }
+}
+
+/****************
+ * AdwActionRow *
+ ****************/
+
+row {
+  label.subtitle {
+    font-size: smaller;
+    @extend .dim-label;
+  }
+
+  > box.header {
+    margin-left: 12px;
+    margin-right: 12px;
+    min-height: 50px;
+
+    > box.title {
+      margin-top: 8px;
+      margin-bottom: 8px;
+    }
+  }
+}
+
+/***************
+ * AdwComboRow *
+ ***************/
+
+popover.combo > contents {
+  padding: 0px;
+
+  list, listview {
+    border-style: none;
+    background-color: transparent;
+    min-width: 200px;
+
+    & > row {
+      padding: 0px 12px 0px 12px;
+      min-height: 50px;
+      border-bottom: 1px solid transparentize($borders_color, 0.5);
+
+      &:selected {
+        outline-color: $alt_focus_border_color;
+        color: $text-color;
+        background-color: $menu_selected_color;
+      }
+
+      &:first-child {
+        border-top-left-radius: $popover_radius - 2;
+        border-top-right-radius: $popover_radius - 2;
+      }
+
+      &:last-child {
+        border-bottom-left-radius: $popover_radius - 2;
+        border-bottom-right-radius: $popover_radius - 2;
+        border-bottom: none;
+      }
+    }
+  }
+
+  scrollbar.vertical {
+    padding-top: 2px;
+    padding-bottom: 2px;
+  }
+}
+
+listview.inline {
+  background: none;
+}
+
+/******************
+ * AdwExpanderRow *
+ ******************/
+
+@mixin margin-start($margin) {
+  &:dir(ltr) {
+    margin-left: $margin;
+  }
+
+  &:dir(rtl) {
+    margin-right: $margin;
+  }
+}
+
+row.expander {
+  // Drop transparent background on expander rows to let nested rows handle it,
+  // avoiding double highlights.
+  background-color: transparent;
+  padding: 0px;
+
+  list.nested > row {
+    background-color: transparentize($bg_color, 0.5);
+    border-color: transparentize($borders_color, 0.3);
+    border-style: solid;
+    border-width: 1px 0px 0px 0px;
+  }
+
+  // AdwExpanderRow arrow rotation
+
+  image.expander-row-arrow {
+    transition: 200ms $ease-out-quad;
+    @include margin-start(6px);
+  }
+
+  &:checked image.expander-row-arrow {
+    -gtk-icon-transform: rotate(0turn);
+  }
+
+  &:not(:checked) image.expander-row-arrow {
+    @extend .dim-label;
+
+    &:dir(ltr) {
+      -gtk-icon-transform: rotate(-0.25turn);
+    }
+
+    &:dir(rtl) {
+      -gtk-icon-transform: rotate(0.25turn);
+    }
+  }
+
+  &:checked image.expander-row-arrow:not(:disabled) {
+    color: $selected_bg_color;
+  }
+
+  & image.expander-row-arrow:disabled {
+    color: $insensitive_fg_color;
+  }
+}
+
+/*****************
+ * 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;
+  }
+
+  // Nested rows background
+  list.nested > row:not(:active) {
+    &:not(:hover):not(:selected),
+    &:hover:not(.activatable):not(:selected) {
+      background-color: mix($bg_color, $base_color, 0.5);
+    }
+
+    &:hover.activatable:not(:selected) {
+      background-color: mix($fg_color, $base_color, 0.95);
+    }
+  }
+
+  > row {
+    // Regular rows and expander header rows background
+    &:not(.expander):not(:active):not(:hover):not(:selected),
+    &:not(.expander):not(:active):hover:not(.activatable):not(:selected),
+    &.expander row.header:not(:active):not(:hover):not(:selected),
+    &.expander row.header:not(:active):hover:not(.activatable):not(:selected) {
+      background-color: $base_color;
+    }
+
+    &:not(.expander):not(:active):hover.activatable:not(:selected),
+    &.expander row.header:not(:active):hover.activatable:not(:selected) {
+      background-color: mix($fg_color, $base_color, 0.95);
+    }
+
+    &,
+    list > row {
+      border-color: transparentize($borders_color, 0.3);
+      border-style: solid;
+      transition: 200ms $ease-out-quad;
+    }
+
+    // Top border
+    &:not(:last-child) {
+      border-width: 1px 1px 0px 1px;
+    }
+
+    // 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);
+    }
+
+    // Bottom border
+    &:last-child,
+    &.checked-expander-row-previous-sibling,
+    &.expander:checked {
+      border-width: 1px;
+    }
+
+    // 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;
+    }
+  }
+}