Add support for libhandy v1 viewswitcher

src/gtk3/widgets/_libhandy.scss

@@ -64,3 +64,97 @@ headerbar hdyviewswitcher > button:checked > stack {
   border-top: 3px solid transparent;
   border-bottom: 3px solid gtk("@theme_button_decoration_focus");
 }
+viewswitcher {
+  border-radius: 0;
+  margin: 0;
+  padding: 0;
+  background-color: transparent;
+  button {
+    border-radius: 0;
+    margin: 0;
+    padding: 0;
+    background-color: transparent;
+    border: 0;
+    box-shadow: none;
+    > stack {
+      color: gtk("@theme_button_foreground_normal");
+      > box label.active {
+        font-weight: bold;
+      }
+      > box.narrow {
+        font-size: 0.75rem; padding-top: 7px; padding-bottom: 5px;
+        image, label {
+          padding-left: 8px; padding-right: 8px;
+        }
+      }
+      > box.wide {
+        padding: 8px 12px;
+        label:dir(ltr) {
+          padding-right: 7px;
+        }
+        label:dir(rtl) {
+          padding-left: 7px;
+        }
+      }
+    }
+    &:backdrop,
+    &:active,
+    &:active:focus,
+    &:checked:hover,
+    &:checked:focus:hover,
+    &:backdrop:checked:hover,
+    &:focus {
+      background-color: transparent;
+    }
+    &:hover,
+    &:focus:hover,
+    &:backdrop:hover,
+    &:backdrop:focus:hover {
+      background-color: gtk("@insensitive_borders");
+    }
+    &:checked,
+    &:checked:backdrop,
+    label:backdrop viewswitcher > selection:checked {
+      border-top: 0;
+      border-left: 0;
+      border-right: 0;
+      background-color: transparent;
+      > stack {
+        border-bottom: 3px solid transparent;
+        border-top: 3px solid gtk("@theme_button_decoration_focus");
+      }
+    }
+    &.needs-attention {
+      > stack > box label {
+        animation: needs_attention 150ms ease-in;
+        background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(gtk("@theme_button_decoration_focus")), to(transparent));
+        background-size: 6px 6px, 6px 6px;
+        background-repeat: no-repeat;
+        background-position: right 0px, right 1px;
+      }
+      &:checked > stack > box label {
+        animation: needs_attention 150ms ease-out;
+        background-image: none;
+      }
+    }
+  }
+}
+headerbar viewswitcher button:checked {
+  > stack {
+    border-top: 3px solid transparent;
+    border-bottom: 3px solid gtk("@theme_button_decoration_focus");
+    > box label {
+      font-weight: bold;
+    }
+  }
+  > stack:backdrop {
+    border-top: 3px solid transparent;
+    border-bottom: 3px solid gtk("@theme_button_decoration_focus");
+  }
+}
+viewswitcherbar {
+  actionbar > revealer > box {
+    margin: 0;
+    padding: 0;
+  }
+}