[libadwaita/wip/exalm/exclusive-toggles: 1/2] stylesheet: Add .exclusive style

[Alexander Mikhaylenko <alexm src gnome org>]

commit 543fc7a216f586b7c31574a4e1075ea9481dc833
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Sat Sep 11 18:46:57 2021 +0500

    stylesheet: Add .exclusive style
    
    Adjust stack switcher to use it as well, even though it's .linked
    internally.
    
    Fixes https://gitlab.gnome.org/GNOME/libadwaita/-/issues/212

 src/stylesheet/_widgets.scss                   |   1 +
 src/stylesheet/meson.build                     |   1 +
 src/stylesheet/widgets/_exclusive-toggles.scss | 129 +++++++++++++++++++++++++
 src/stylesheet/widgets/_toolbars.scss          |  13 ++-
 4 files changed, 143 insertions(+), 1 deletion(-)
---
diff --git a/src/stylesheet/_widgets.scss b/src/stylesheet/_widgets.scss
index fbf00430..ea3ec960 100644
--- a/src/stylesheet/_widgets.scss
+++ b/src/stylesheet/_widgets.scss
@@ -7,6 +7,7 @@
 @import 'widgets/dropdowns';
 @import 'widgets/emoji-chooser';
 @import 'widgets/entries';
+@import 'widgets/exclusive-toggles';
 @import 'widgets/expanders';
 @import 'widgets/file-chooser';
 @import 'widgets/header-bar';
diff --git a/src/stylesheet/meson.build b/src/stylesheet/meson.build
index 4dbbfa9b..95919eff 100644
--- a/src/stylesheet/meson.build
+++ b/src/stylesheet/meson.build
@@ -31,6 +31,7 @@ if not fs.exists('Adwaita-light.css')
       'widgets/_dropdowns.scss',
       'widgets/_emoji-chooser.scss',
       'widgets/_entries.scss',
+      'widgets/_exclusive-toggles.scss',
       'widgets/_expanders.scss',
       'widgets/_file-chooser.scss',
       'widgets/_header-bar.scss',
diff --git a/src/stylesheet/widgets/_exclusive-toggles.scss b/src/stylesheet/widgets/_exclusive-toggles.scss
new file mode 100644
index 00000000..ef4f62d9
--- /dev/null
+++ b/src/stylesheet/widgets/_exclusive-toggles.scss
@@ -0,0 +1,129 @@
+.exclusive {
+  $_exclusive_toggle_padding: 3px;
+  $_separator_gradient: transparent    5px,
+                        $borders_color 5px,
+                        $borders_color #{"calc(100% - 5px)"},
+                        transparent    #{"calc(100% - 5px)"};
+
+  background: gtkalpha(currentColor, .1);
+  padding: $_exclusive_toggle_padding;
+  border-radius: $button_radius + $_exclusive_toggle_padding;
+  border-spacing: 0;
+
+  @if $contrast == 'high' {
+    box-shadow: inset 0 0 0 1px $borders_color;
+  }
+
+  &:not(.vertical) > button {
+    border-image: linear-gradient(to top, $_separator_gradient) 1;
+
+    &:dir(ltr) { border-image-width: 0 0 0 1px; }
+    &:dir(rtl) { border-image-width: 0 1px 0 0; }
+  }
+
+  &.vertical > button {
+    border-image: linear-gradient(to left, $_separator_gradient) 1;
+    border-image-width: 1px 0 0 0;
+  }
+
+  > button {
+    @extend %undecorated_button;
+    box-shadow: none;
+
+    padding: 2px 8px;
+    font-weight: normal;
+
+    &.image-button {
+      padding-left: 3px;
+      padding-right: 3px;
+    }
+
+    &.text-button {
+      padding-left: 15px;
+      padding-right: 15px;
+    }
+
+    &.text-button.image-button,
+    &.image-text-button,
+    &.arrow-button {
+      padding-left: 7px;
+      padding-right: 7px;
+    }
+
+    &:hover {
+      background-color: gtkalpha(currentColor, .075);
+    }
+
+    &.keyboard-activating,
+    &:active {
+      background-color: gtkalpha(currentColor, .15);
+    }
+
+    @if $contrast == 'high' {
+      &:hover,
+      &:active,
+      &.keyboard-activating {
+        box-shadow: inset 0 0 0 1px $borders_color;
+      }
+    }
+
+    &:checked {
+      &, &:hover, &:active, &.keyboard-activating {
+        background-color: $slider_color; /*alpha(white, .2);*/
+        color: $light_fg;
+        box-shadow: 0 2px 4px transparentize(black, .8);
+
+        @if $contrast == 'high' {
+          box-shadow: 0 0 0 1px transparentize(black, .5),
+                      0 2px 4px transparentize(black, .8);
+        }
+      }
+    }
+
+    &:first-child {
+      &:dir(ltr), &:dir(rtl) {
+        border-image-width: 0;
+      }
+    }
+
+    &:checked,
+    &:hover,
+    &:active,
+    &.keyboard-activating,
+    &:focus-visible:focus-within {
+      &, + button {
+        &:dir(ltr), &:dir(rtl) {
+          border-image-width: 0;
+        }
+      }
+    }
+  }
+}
+
+// stack switchers are linked, but we're making them look as if they weren't.
+// This involves some ugly specificity bumps.
+stackswitcher.linked {
+  @extend .exclusive;
+
+  &:not(.vertical) > button {
+    &:dir(ltr), &:dir(rtl) {
+      &:not(:first-child),
+      &:not(:last-child) {
+        border-radius: $button_radius;
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &.vertical {
+    &:dir(ltr), &:dir(rtl) {
+      &:not(:first-child),
+      &:not(:last-child) {
+        border-radius: $button_radius;
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+    }
+  }
+}
diff --git a/src/stylesheet/widgets/_toolbars.scss b/src/stylesheet/widgets/_toolbars.scss
index c47aaca0..3593ce26 100644
--- a/src/stylesheet/widgets/_toolbars.scss
+++ b/src/stylesheet/widgets/_toolbars.scss
@@ -66,6 +66,16 @@
     margin-bottom: 10px;
   }
 
+  .exclusive {
+    margin-top: 6px;
+    margin-bottom: 6px;
+
+    > button {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
   // Reset styles for popovers
   popover {
     button:not(.raised):not(.suggested-action):not(.destructive-action) {
@@ -88,7 +98,8 @@
     separator:not(.sidebar),
     button,
     menubutton,
-    switch {
+    switch,
+    .exclusive {
       margin-top: 0;
       margin-bottom: 0;
     }