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

[Alexander Mikhaylenko <alexm src gnome org>]

commit 77f6e1f3b4874c9afbe2b378b85dcd9a47e74f17
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Fri Apr 9 13:44:41 2021 +0500

    stylesheet: Split sidebar styles into a separate file

 src/stylesheet/_common.scss           | 163 ----------------------------------
 src/stylesheet/_widgets.scss          |   1 +
 src/stylesheet/meson.build            |   1 +
 src/stylesheet/widgets/_sidebars.scss | 162 +++++++++++++++++++++++++++++++++
 4 files changed, 164 insertions(+), 163 deletions(-)
---
diff --git a/src/stylesheet/_common.scss b/src/stylesheet/_common.scss
index ffb5ac5..f9393cf 100644
--- a/src/stylesheet/_common.scss
+++ b/src/stylesheet/_common.scss
@@ -431,174 +431,11 @@ window.dialog.message { // Message Dialog styling
   }
 }
 
-/***********
- * Sidebar *
- ***********/
-.sidebar {
-  background-color: mix($bg_color, $base_color, 50%);
-
-  &: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; }
-
-  paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
-}
-
-stacksidebar row {
-  padding: 10px 4px;
-  @include focus-ring();
-
-  > label {
-    padding-left: 6px;
-    padding-right: 6px;
-  }
-
-  &.needs-attention > label {
-    @extend %needs_attention;
-    background-size: 6px 6px, 0 0;
-  }
-
-  &:selected {
-    background-color: $menu_selected_color;
-    border-radius: $menu_radius;
-    color: $fg_color;
-
-    &:hover {
-      background-color: darken($menu_selected_color, 5%);
-    }
-  }
-
-  &.activatable:active,
-  &.activatable:selected:active {
-    box-shadow: none; // #3413
-  }
-}
-
-separator.sidebar {
-  background-color: $borders_color;
-}
-
-
-/**********************
- * Navigation Sidebar *
- **********************/
-
-.navigation-sidebar {
-  padding: $menu-margin 0; //only vertical padding. horizontal row size would clip
-
-  > separator {
-    margin: $menu-margin;
-  }
-
-  > row {
-    min-height: 36px;
-    padding: 0 8px;
-    border-radius: $menu-margin;
-    margin: 0 $menu-margin 2px;
-    @include focus-ring($focus-state: 'focus-visible:focus-within');
-
-    &:hover {
-      background-color: darken($menu_selected_color, 5%);
-    }
-
-    &:selected {
-      background-color: $menu_selected_color;
-      color: inherit;
-
-      &:hover {
-        background-color: darken($menu_selected_color,5%);
-      }
-    }
-
-    &:disabled { color: $insensitive_fg_color; }
-  }
-}
-
 
 /****************
  * File chooser *
  ****************/
 
-$_placesidebar_icons_opacity: 0.7;
-
-row image.sidebar-icon { opacity: $_placesidebar_icons_opacity; } // dim the sidebar icons
-                                                                  // see bug #786613 for details
-                                                                  // on this oddity
-
-/* this should be more generic, only using .navigation-sidebar
-   https://gitlab.gnome.org/GNOME/gtk/-/issues/2929
-*/
-
-placessidebar {
-  .navigation-sidebar > row {
-    // Needs overriding of the `.navigation-sidebar > row` padding
-    padding: 0;
-
-    // Using margins/padding directly in the SidebarRow
-    // will make the animation of the new bookmark row jump
-    > revealer { padding: 0 14px; }
-
-    image.sidebar-icon {
-      &: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%;
-    }
-
-    // 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;
-      }
-    }
-  }
-}
-
 placesview {
   .server-list-button > image {
     transition: 200ms $ease-out-quad;
diff --git a/src/stylesheet/_widgets.scss b/src/stylesheet/_widgets.scss
index 33524e6..4081137 100644
--- a/src/stylesheet/_widgets.scss
+++ b/src/stylesheet/_widgets.scss
@@ -12,6 +12,7 @@
 @import 'widgets/progress-bar';
 @import 'widgets/scale';
 @import 'widgets/scrolling';
+@import 'widgets/sidebars';
 @import 'widgets/spinner';
 @import 'widgets/spin-button';
 @import 'widgets/switch';
diff --git a/src/stylesheet/meson.build b/src/stylesheet/meson.build
index 12ff40a..b94599a 100644
--- a/src/stylesheet/meson.build
+++ b/src/stylesheet/meson.build
@@ -34,6 +34,7 @@ if not fs.exists('Adwaita-light.css')
       'widgets/_progress-bar.scss',
       'widgets/_scale.scss',
       'widgets/_scrolling.scss',
+      'widgets/_sidebars.scss',
       'widgets/_spinner.scss',
       'widgets/_spin-button.scss',
       'widgets/_switch.scss',
diff --git a/src/stylesheet/widgets/_sidebars.scss b/src/stylesheet/widgets/_sidebars.scss
new file mode 100644
index 0000000..f24f31d
--- /dev/null
+++ b/src/stylesheet/widgets/_sidebars.scss
@@ -0,0 +1,162 @@
+.sidebar {
+  background-color: mix($bg_color, $base_color, 50%);
+
+  &: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; }
+
+  paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
+}
+
+stacksidebar row {
+  padding: 10px 4px;
+  @include focus-ring();
+
+  > label {
+    padding-left: 6px;
+    padding-right: 6px;
+  }
+
+  &.needs-attention > label {
+    @extend %needs_attention;
+    background-size: 6px 6px, 0 0;
+  }
+
+  &:selected {
+    background-color: $menu_selected_color;
+    border-radius: $menu_radius;
+    color: $fg_color;
+
+    &:hover {
+      background-color: darken($menu_selected_color, 5%);
+    }
+  }
+
+  &.activatable:active,
+  &.activatable:selected:active {
+    box-shadow: none; // #3413
+  }
+}
+
+separator.sidebar {
+  background-color: $borders_color;
+}
+
+/**********************
+ * Navigation Sidebar *
+ **********************/
+
+.navigation-sidebar {
+  padding: $menu-margin 0; //only vertical padding. horizontal row size would clip
+
+  > separator {
+    margin: $menu-margin;
+  }
+
+  > row {
+    min-height: 36px;
+    padding: 0 8px;
+    border-radius: $menu-margin;
+    margin: 0 $menu-margin 2px;
+    @include focus-ring($focus-state: 'focus-visible:focus-within');
+
+    &:hover {
+      background-color: darken($menu_selected_color, 5%);
+    }
+
+    &:selected {
+      background-color: $menu_selected_color;
+      color: inherit;
+
+      &:hover {
+        background-color: darken($menu_selected_color,5%);
+      }
+    }
+
+    &:disabled { color: $insensitive_fg_color; }
+  }
+}
+
+/********************
+ * GtkPlacesSidebar *
+ ********************/
+
+$_placesidebar_icons_opacity: 0.7;
+
+row image.sidebar-icon { opacity: $_placesidebar_icons_opacity; } // dim the sidebar icons
+                                                                  // see bug #786613 for details
+                                                                  // on this oddity
+
+/* this should be more generic, only using .navigation-sidebar
+   https://gitlab.gnome.org/GNOME/gtk/-/issues/2929
+*/
+
+placessidebar {
+  .navigation-sidebar > row {
+    // Needs overriding of the `.navigation-sidebar > row` padding
+    padding: 0;
+
+    // Using margins/padding directly in the SidebarRow
+    // will make the animation of the new bookmark row jump
+    > revealer { padding: 0 14px; }
+
+    image.sidebar-icon {
+      &: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%;
+    }
+
+    // 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;
+      }
+    }
+  }
+}