[libadwaita/wip/exalm/exclusive-toggles: 4/6] stylesheet: Add .toggle-group style

[Alexander Mikhaylenko <alexm src gnome org>]

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

    stylesheet: Add .toggle-group 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/_toggle-group.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..684dfcae 100644
--- a/src/stylesheet/_widgets.scss
+++ b/src/stylesheet/_widgets.scss
@@ -32,6 +32,7 @@
 @import 'widgets/switch';
 @import 'widgets/tab-view';
 @import 'widgets/text-selection';
+@import 'widgets/toggle-group';
 @import 'widgets/toolbars';
 @import 'widgets/tooltip';
 @import 'widgets/transition-shadow';
diff --git a/src/stylesheet/meson.build b/src/stylesheet/meson.build
index 4dbbfa9b..5272f690 100644
--- a/src/stylesheet/meson.build
+++ b/src/stylesheet/meson.build
@@ -56,6 +56,7 @@ if not fs.exists('Adwaita-light.css')
       'widgets/_switch.scss',
       'widgets/_tab-view.scss',
       'widgets/_text-selection.scss',
+      'widgets/_toggle-group.scss',
       'widgets/_toolbars.scss',
       'widgets/_tooltip.scss',
       'widgets/_transition-shadow.scss',
diff --git a/src/stylesheet/widgets/_toggle-group.scss b/src/stylesheet/widgets/_toggle-group.scss
new file mode 100644
index 00000000..584e2864
--- /dev/null
+++ b/src/stylesheet/widgets/_toggle-group.scss
@@ -0,0 +1,51 @@
+.toggle-group {
+  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,
+  %toggle_group_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..feba0e60 100644
--- a/src/stylesheet/widgets/_toolbars.scss
+++ b/src/stylesheet/widgets/_toolbars.scss
@@ -24,6 +24,16 @@
     }
   }
 
+  .toggle-group {
+    button:not(.raised):not(.suggested-action):not(.destructive-action).toggle {
+      &.arrow-button,
+      &.image-button,
+      &.image-text-button {
+        @extend %toggle_group_button;
+      }
+    }
+  }
+
   menubutton.raised > button:not(.raised):not(.suggested-action):not(.destructive-action) {
     &.arrow-button,
     &.image-button,
@@ -69,6 +79,16 @@
     margin-bottom: 10px;
   }
 
+  .toggle-group {
+    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,
+    .toggle-group {
       margin-top: 0;
       margin-bottom: 0;
     }