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

[Alexander Mikhaylenko <alexm src gnome org>]

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

    stylesheet: Add .exclusive style
    
    Fixes https://gitlab.gnome.org/GNOME/libadwaita/-/issues/212

 src/stylesheet/_colors.scss                    |  2 +
 src/stylesheet/_widgets.scss                   |  1 +
 src/stylesheet/meson.build                     |  1 +
 src/stylesheet/widgets/_exclusive-toggles.scss | 51 ++++++++++++++++++++++++++
 src/stylesheet/widgets/_toolbars.scss          | 23 +++++++++++-
 5 files changed, 77 insertions(+), 1 deletion(-)
---
diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index 255c0cf4..903d7437 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -57,6 +57,8 @@ $fill_active_color: gtkmix($accent_bg_color, black, 80%);
 $slider_color: mix(white, $base_color, 80%);
 $slider_hover_color: white;
 
+$card_bg_color: if($variant == 'light', white, transparentize(white, .8));
+
 $scrollbar_bg_color: if($variant == 'light', mix($bg_color, $fg_color, 80%), mix($base_color, $bg_color, 
50%));
 $scrollbar_slider_color: mix($fg_color, $bg_color, 60%);
 $scrollbar_slider_hover_color: mix($fg_color, $bg_color, 80%);
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..4ec5b14c
--- /dev/null
+++ b/src/stylesheet/widgets/_exclusive-toggles.scss
@@ -0,0 +1,51 @@
+.exclusive {
+  background-color: gtkalpha(currentColor, .1);
+  padding: 3px;
+  border-radius: $button_radius + 3px;
+  border-spacing: 3px;
+
+  @if $contrast == 'high' {
+    box-shadow: inset 0 0 0 1px $borders_color;
+  }
+
+  button.toggle,
+  %exclusive_button {
+    @extend %button_basic_flat;
+
+    @include focus-ring($offset: 0px);
+    transition: $button_transition;
+
+    padding: 2px 10px;
+    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;
+    }
+
+    &:checked {
+      &, &:hover, &:active, &.keyboard-activating {
+        background: $card_bg_color;
+      }
+
+      box-shadow: 0 2px 4px transparentize(black, .8);
+
+      @if $contrast == 'high' {
+        box-shadow: inset 0 0 0 1px $borders_color,
+                    0 2px 4px transparentize(black, .8);
+      }
+    }
+  }
+}
diff --git a/src/stylesheet/widgets/_toolbars.scss b/src/stylesheet/widgets/_toolbars.scss
index acbc83c3..bbb78720 100644
--- a/src/stylesheet/widgets/_toolbars.scss
+++ b/src/stylesheet/widgets/_toolbars.scss
@@ -24,6 +24,16 @@
     }
   }
 
+  .exclusive {
+    button:not(.raised):not(.suggested-action):not(.destructive-action).toggle {
+      &.arrow-button,
+      &.image-button,
+      &.image-text-button {
+        @extend %exclusive_button;
+      }
+    }
+  }
+
   menubutton.raised > button:not(.raised):not(.suggested-action):not(.destructive-action) {
     &.arrow-button,
     &.image-button,
@@ -69,6 +79,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) {
@@ -91,7 +111,8 @@
     separator:not(.sidebar),
     button,
     menubutton,
-    switch {
+    switch,
+    .exclusive {
       margin-top: 0;
       margin-bottom: 0;
     }