[libadwaita/wip/exalm/stylesheet2: 64/97] stylesheet: Split toolbar-like styles into a separate file

[Alexander Mikhaylenko <alexm src gnome org>]

commit b5c3bdccabbc2f4b6e65b5a54da22da0a86dfe2e
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Fri Apr 9 12:53:13 2021 +0500

    stylesheet: Split toolbar-like styles into a separate file

 src/stylesheet/_common.scss           | 110 ----------------------------------
 src/stylesheet/_widgets.scss          |   1 +
 src/stylesheet/meson.build            |   1 +
 src/stylesheet/widgets/_toolbars.scss | 105 ++++++++++++++++++++++++++++++++
 4 files changed, 107 insertions(+), 110 deletions(-)
---
diff --git a/src/stylesheet/_common.scss b/src/stylesheet/_common.scss
index c7f3b0a..f154449 100644
--- a/src/stylesheet/_common.scss
+++ b/src/stylesheet/_common.scss
@@ -234,116 +234,6 @@ editablelabel > stack > text {
 }
 
 
-/************
- * Toolbars *
- ************/
-.toolbar {
-  padding: 4px;
-  border-spacing: 4px;
-  background-color: $bg_color;
-
-  // on OSD
-  .osd & { background-color: transparent; }
-
-  // stand-alone OSD toolbars
-  &.osd {
-    padding: 13px;
-    border: none;
-    border-radius: 5px;
-    background-color: $osd_bg_color;
-
-    &.left,
-    &.right,
-    &.top,
-    &.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
-  }
-
-  // toolbar separators
-  &.horizontal > separator { margin: 4px 0; }
-  &.vertical > separator { margin: 0 4px; }
-}
-
-
-/****************
- * GtkSearchBar *
- ****************/
-searchbar > revealer > box {
-  padding: 6px;
-  border-spacing: 6px;
-
-  @extend %darkbar;
-
-  border-width: 0 0 1px;
-
- .close {
-    min-width: 16px;
-    min-height: 16px;
-    padding: 4px;
-    border-radius: 50%;
-    @extend %button_basic_flat;
-  }
-}
-
-%darkbar {
-  border-style: solid;
-  border-color: $borders_color;
-  $_bg: mix($bg_color, $borders_color, 70%);
-  background-color: $_bg;
-
-  &:backdrop {
-    border-color: $backdrop_borders_color;
-    background-color: $backdrop_dark_fill;
-    box-shadow: none;
-    transition: $backdrop_transition;
-  }
-}
-
-
-/****************
- * GtkActionBar *
- ****************/
-actionbar > revealer > box {
-  padding: 6px;
-  border-spacing: 6px;
-  border-top: 1px solid $borders_color;
-}
-
-
-/**************
- * GtkInfoBar *
- **************/
-infobar {
-  > revealer > box {
-    padding: 8px;
-    border-spacing: 12px;
-  }
-
-  &.action:hover > revealer > box {
-    background-color: if($variant == 'light', desaturate(lighten(invert($selected_bg_color), 47%), 30%),
-                      desaturate(darken(invert($selected_bg_color), 42%), 70%));
-  }
-
-  &.info,
-  &.question,
-  &.warning,
-  &.error {
-    > revealer > box {
-      border-bottom: 1px solid lighten($borders_color, 5%);
-      background-color: if($variant == 'light', desaturate(lighten(invert($selected_bg_color), 45%), 30%),
-                        desaturate(darken(invert($selected_bg_color), 40%), 70%));
-    }
-  }
-
- .close {
-    min-width: 16px;
-    min-height: 16px;
-    padding: 4px;
-    border-radius: 50%;
-    @extend %button_basic_flat;
-  }
-}
-
-
 /*****************
  * Title buttons *
  *****************/
diff --git a/src/stylesheet/_widgets.scss b/src/stylesheet/_widgets.scss
index 4947f2b..41b308c 100644
--- a/src/stylesheet/_widgets.scss
+++ b/src/stylesheet/_widgets.scss
@@ -4,3 +4,4 @@
 @import 'widgets/links';
 @import 'widgets/spinner';
 @import 'widgets/spin-button';
+@import 'widgets/toolbars';
diff --git a/src/stylesheet/meson.build b/src/stylesheet/meson.build
index 0a8c7ae..da96c6f 100644
--- a/src/stylesheet/meson.build
+++ b/src/stylesheet/meson.build
@@ -26,6 +26,7 @@ if not fs.exists('Adwaita-light.css')
       'widgets/_links.scss',
       'widgets/_spinner.scss',
       'widgets/_spin-button.scss',
+      'widgets/_toolbars.scss',
     ])
 
     theme_variants = [
diff --git a/src/stylesheet/widgets/_toolbars.scss b/src/stylesheet/widgets/_toolbars.scss
new file mode 100644
index 0000000..366fdb5
--- /dev/null
+++ b/src/stylesheet/widgets/_toolbars.scss
@@ -0,0 +1,105 @@
+.toolbar {
+  padding: 4px;
+  border-spacing: 4px;
+  background-color: $bg_color;
+
+  // on OSD
+  .osd & { background-color: transparent; }
+
+  // stand-alone OSD toolbars
+  &.osd {
+    padding: 13px;
+    border: none;
+    border-radius: 5px;
+    background-color: $osd_bg_color;
+
+    &.left,
+    &.right,
+    &.top,
+    &.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
+  }
+
+  // toolbar separators
+  &.horizontal > separator { margin: 4px 0; }
+  &.vertical > separator { margin: 0 4px; }
+}
+
+/****************
+ * GtkSearchBar *
+ ****************/
+
+searchbar > revealer > box {
+  padding: 6px;
+  border-spacing: 6px;
+
+  @extend %darkbar;
+
+  border-width: 0 0 1px;
+
+ .close {
+    min-width: 16px;
+    min-height: 16px;
+    padding: 4px;
+    border-radius: 50%;
+    @extend %button_basic_flat;
+  }
+}
+
+%darkbar {
+  border-style: solid;
+  border-color: $borders_color;
+  $_bg: mix($bg_color, $borders_color, 70%);
+  background-color: $_bg;
+
+  &:backdrop {
+    border-color: $backdrop_borders_color;
+    background-color: $backdrop_dark_fill;
+    box-shadow: none;
+    transition: $backdrop_transition;
+  }
+}
+
+/****************
+ * GtkActionBar *
+ ****************/
+
+actionbar > revealer > box {
+  padding: 6px;
+  border-spacing: 6px;
+  border-top: 1px solid $borders_color;
+}
+
+/**************
+ * GtkInfoBar *
+ **************/
+
+infobar {
+  > revealer > box {
+    padding: 8px;
+    border-spacing: 12px;
+  }
+
+  &.action:hover > revealer > box {
+    background-color: if($variant == 'light', desaturate(lighten(invert($selected_bg_color), 47%), 30%),
+                      desaturate(darken(invert($selected_bg_color), 42%), 70%));
+  }
+
+  &.info,
+  &.question,
+  &.warning,
+  &.error {
+    > revealer > box {
+      border-bottom: 1px solid lighten($borders_color, 5%);
+      background-color: if($variant == 'light', desaturate(lighten(invert($selected_bg_color), 45%), 30%),
+                        desaturate(darken(invert($selected_bg_color), 40%), 70%));
+    }
+  }
+
+ .close {
+    min-width: 16px;
+    min-height: 16px;
+    padding: 4px;
+    border-radius: 50%;
+    @extend %button_basic_flat;
+  }
+}