[libadwaita/wip/exalm/stylesheet2: 93/97] stylesheet: Split view switcher styles into a separate file

[Alexander Mikhaylenko <alexm src gnome org>]

commit be71d62f8bb6a93dfefc2766cd4fc824799b6588
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Fri Apr 9 16:44:39 2021 +0500

    stylesheet: Split view switcher styles into a separate file

 src/stylesheet/_custom.scss                | 149 ----------------------------
 src/stylesheet/_widgets.scss               |   1 +
 src/stylesheet/meson.build                 |   1 +
 src/stylesheet/widgets/_view-switcher.scss | 150 +++++++++++++++++++++++++++++
 4 files changed, 152 insertions(+), 149 deletions(-)
---
diff --git a/src/stylesheet/_custom.scss b/src/stylesheet/_custom.scss
index 882de72..f9cec07 100644
--- a/src/stylesheet/_custom.scss
+++ b/src/stylesheet/_custom.scss
@@ -9,155 +9,6 @@ $leaflet_outline: rgba(255, 255, 255, if($variant == 'light', 0.2, 0.05));
   $leaflet_outline: transparent;
 }
 
-// AdwViewSwitcher
-
-viewswitcher {
-  &, & button {
-    margin: 0;
-    padding: 0;
-  }
-
-  button {
-    border-radius: 0;
-    border-top: 0;
-    border-bottom: 0;
-    box-shadow: none;
-    font-size: 1rem;
-
-    &:not(:checked):not(:hover) {
-      background: transparent;
-    }
-
-    &:not(:only-child):not(:last-child) {
-      border-right-width: 0px;
-    }
-
-    &:not(only-child):first-child:not(:checked):not(:hover),
-    &:not(:checked):not(:hover) + button:not(:checked):not(:hover) {
-      border-left-color: transparent;
-    }
-
-    &:not(only-child):last-child:not(:checked):not(:hover) {
-      border-right-color: transparent;
-    }
-
-    &:not(:checked):hover:not(:backdrop) {
-      background-image: image(lighter($bg_color));
-    }
-
-    &:not(only-child):first-child:not(:checked):hover,
-    &:not(:checked):hover + button:not(:checked):not(:hover),
-    &:not(:checked):not(:hover) + button:not(:checked):hover {
-      border-left-color: shade($borders_color, 1.15);
-    }
-
-    &:not(only-child):last-child:not(:checked):hover {
-      border-right-color: shade($borders_color, 1.15);
-    }
-
-    &:not(:checked):hover:backdrop {
-      background-image: image($bg_color);
-    }
-
-    // View switcher in a header bar
-    headerbar &:not(:checked) {
-      &:hover:not(:backdrop) {
-        // Reimplementation of $button_fill from Adwaita. The colors are made
-        // only 70% visible to avoid the highlight to be too strong.
-        $c: transparentize($bg_color, 0.3);
-        $button_fill: if($variant == 'light', linear-gradient(to top, shade($c, 0.96) 2px, $c),
-                                              linear-gradient(to top, shade($c, 0.99) 2px, $c)) !global;
-        background-image: $button_fill;
-      }
-
-      &:not(only-child):first-child:hover,
-      &:hover + button:not(:checked):not(:hover),
-      &:not(:hover) + button:not(:checked):hover {
-        border-left-color: $borders_color;
-      }
-
-      &:not(only-child):last-child:hover {
-        border-right-color: $borders_color;
-      }
-
-      &:hover:backdrop {
-        background-image: image($bg_color);
-      }
-    }
-
-    // View switcher button
-    > stack > box {
-      &.narrow {
-        font-size: 0.75rem;
-        padding-top: 7px;
-        padding-bottom: 5px;
-
-        image,
-        label {
-          padding-left: 8px;
-          padding-right: 8px;
-        }
-      }
-
-      &.wide {
-        padding: 8px 12px;
-
-        label {
-          &:dir(ltr) {
-            padding-right: 7px;
-          }
-
-          &:dir(rtl) {
-            padding-left: 7px;
-          }
-        }
-      }
-
-      label.active {
-        font-weight: bold;
-      }
-    }
-
-    &.needs-attention {
-      &:active > stack > box label,
-      &:checked > stack > box label {
-        animation: none;
-        background-image: none;
-      }
-
-      > stack > box label {
-        animation: needs_attention 150ms ease-in;
-        background-image: radial-gradient(#3584e4 50%, transparent),
-                          radial-gradient(rgba(255, 255, 255, 0.769231) 50%, transparent);
-        background-size: 6px 6px, 6px 6px;
-        background-repeat: no-repeat;
-        background-position: right 0px, right 1px;
-
-        &:backdrop {
-          background-size: 6px 6px, 0 0;
-        }
-
-        &:dir(rtl) {
-          background-position: left 0px, left 1px;
-        }
-      }
-    }
-  }
-}
-
-// AdwViewSwitcherBar
-
-viewswitcherbar actionbar > revealer > box {
-  padding: 0;
-}
-
-// AdwViewSwitcherTitle
-
-viewswitchertitle viewswitcher {
-  margin-left: 12px;
-  margin-right: 12px;
-}
-
 // AdwStatusPage
 
 statuspage > scrolledwindow > viewport > box {
diff --git a/src/stylesheet/_widgets.scss b/src/stylesheet/_widgets.scss
index 26057c3..5ce5d4b 100644
--- a/src/stylesheet/_widgets.scss
+++ b/src/stylesheet/_widgets.scss
@@ -31,4 +31,5 @@
 @import 'widgets/tooltip';
 @import 'widgets/trees';
 @import 'widgets/views';
+@import 'widgets/view-switcher';
 @import 'widgets/window';
diff --git a/src/stylesheet/meson.build b/src/stylesheet/meson.build
index d1b6915..ddcde35 100644
--- a/src/stylesheet/meson.build
+++ b/src/stylesheet/meson.build
@@ -53,6 +53,7 @@ if not fs.exists('Adwaita-light.css')
       'widgets/_tooltip.scss',
       'widgets/_trees.scss',
       'widgets/_views.scss',
+      'widgets/_view-switcher.scss',
       'widgets/_window.scss',
     ])
 
diff --git a/src/stylesheet/widgets/_view-switcher.scss b/src/stylesheet/widgets/_view-switcher.scss
new file mode 100644
index 0000000..a0c67aa
--- /dev/null
+++ b/src/stylesheet/widgets/_view-switcher.scss
@@ -0,0 +1,150 @@
+viewswitcher {
+  &, & button {
+    margin: 0;
+    padding: 0;
+  }
+
+  button {
+    border-radius: 0;
+    border-top: 0;
+    border-bottom: 0;
+    box-shadow: none;
+    font-size: 1rem;
+
+    &:not(:checked):not(:hover) {
+      background: transparent;
+    }
+
+    &:not(:only-child):not(:last-child) {
+      border-right-width: 0px;
+    }
+
+    &:not(only-child):first-child:not(:checked):not(:hover),
+    &:not(:checked):not(:hover) + button:not(:checked):not(:hover) {
+      border-left-color: transparent;
+    }
+
+    &:not(only-child):last-child:not(:checked):not(:hover) {
+      border-right-color: transparent;
+    }
+
+    &:not(:checked):hover:not(:backdrop) {
+      background-image: image(lighter($bg_color));
+    }
+
+    &:not(only-child):first-child:not(:checked):hover,
+    &:not(:checked):hover + button:not(:checked):not(:hover),
+    &:not(:checked):not(:hover) + button:not(:checked):hover {
+      border-left-color: shade($borders_color, 1.15);
+    }
+
+    &:not(only-child):last-child:not(:checked):hover {
+      border-right-color: shade($borders_color, 1.15);
+    }
+
+    &:not(:checked):hover:backdrop {
+      background-image: image($bg_color);
+    }
+
+    // View switcher in a header bar
+    headerbar &:not(:checked) {
+      &:hover:not(:backdrop) {
+        // Reimplementation of $button_fill from Adwaita. The colors are made
+        // only 70% visible to avoid the highlight to be too strong.
+        $c: transparentize($bg_color, 0.3);
+        $button_fill: if($variant == 'light', linear-gradient(to top, shade($c, 0.96) 2px, $c),
+                                              linear-gradient(to top, shade($c, 0.99) 2px, $c));
+        background-image: $button_fill;
+      }
+
+      &:not(only-child):first-child:hover,
+      &:hover + button:not(:checked):not(:hover),
+      &:not(:hover) + button:not(:checked):hover {
+        border-left-color: $borders_color;
+      }
+
+      &:not(only-child):last-child:hover {
+        border-right-color: $borders_color;
+      }
+
+      &:hover:backdrop {
+        background-image: image($bg_color);
+      }
+    }
+
+    // View switcher button
+    > stack > box {
+      &.narrow {
+        font-size: 0.75rem;
+        padding-top: 7px;
+        padding-bottom: 5px;
+
+        image,
+        label {
+          padding-left: 8px;
+          padding-right: 8px;
+        }
+      }
+
+      &.wide {
+        padding: 8px 12px;
+
+        label {
+          &:dir(ltr) {
+            padding-right: 7px;
+          }
+
+          &:dir(rtl) {
+            padding-left: 7px;
+          }
+        }
+      }
+
+      label.active {
+        font-weight: bold;
+      }
+    }
+
+    &.needs-attention {
+      &:active > stack > box label,
+      &:checked > stack > box label {
+        animation: none;
+        background-image: none;
+      }
+
+      > stack > box label {
+        animation: needs_attention 150ms ease-in;
+        background-image: radial-gradient(#3584e4 50%, transparent),
+                          radial-gradient(rgba(255, 255, 255, 0.769231) 50%, transparent);
+        background-size: 6px 6px, 6px 6px;
+        background-repeat: no-repeat;
+        background-position: right 0px, right 1px;
+
+        &:backdrop {
+          background-size: 6px 6px, 0 0;
+        }
+
+        &:dir(rtl) {
+          background-position: left 0px, left 1px;
+        }
+      }
+    }
+  }
+}
+
+/**********************
+ * AdwViewSwitcherBar *
+ **********************/
+
+viewswitcherbar actionbar > revealer > box {
+  padding: 0;
+}
+
+/************************
+ * AdwViewSwitcherTitle *
+ ************************/
+
+viewswitchertitle viewswitcher {
+  margin-left: 12px;
+  margin-right: 12px;
+}