[libadwaita/wip/exalm/selection-mode-checks: 8/9] stylesheet: Redo selection mode checks

[Alexander Mikhaylenko <alexm src gnome org>]

commit 52a0fff3fddee25ffd41094f9b7cff243658e65d
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Fri Nov 26 23:10:05 2021 +0500

    stylesheet: Redo selection mode checks
    
    Refresh the style, replace the weird selectors with a simple style class.
    
    Fixes https://gitlab.gnome.org/GNOME/libadwaita/-/issues/177

 doc/migrating-between-development-versions.md      |   6 +++
 doc/migrating-libhandy-1-4-to-libadwaita.md        |   7 ++-
 src/stylesheet/adwaita-stylesheet.gresources.xml   |   3 ++
 src/stylesheet/assets/dash-small-symbolic.svg      |   1 +
 .../assets/dash-small-symbolic.symbolic.png        | Bin 0 -> 130 bytes
 .../assets/dash-small 2-symbolic symbolic png      | Bin 0 -> 183 bytes
 src/stylesheet/widgets/_checks.scss                |  53 ++++++++++++++++-----
 src/stylesheet/widgets/_menus.scss                 |  11 +++--
 8 files changed, 64 insertions(+), 17 deletions(-)
---
diff --git a/doc/migrating-between-development-versions.md b/doc/migrating-between-development-versions.md
index 8b54835f..4f932634 100644
--- a/doc/migrating-between-development-versions.md
+++ b/doc/migrating-between-development-versions.md
@@ -321,3 +321,9 @@ The `adw_ease_out_cubic()` function has been removed. Instead,
 
 The `.outline` style class has been removed with no replacement. The regular
 button style should be used instead.
+
+### Adapt to the `content-view` check button style removal
+
+The selection mode [class@Gtk.CheckButton] style, used inside views with the
+`.content-view` has been changed into a separate style class `.selection-mode`
+that can be applied directly onto check buttons.
diff --git a/doc/migrating-libhandy-1-4-to-libadwaita.md b/doc/migrating-libhandy-1-4-to-libadwaita.md
index c6105483..68397d98 100644
--- a/doc/migrating-libhandy-1-4-to-libadwaita.md
+++ b/doc/migrating-libhandy-1-4-to-libadwaita.md
@@ -412,8 +412,11 @@ button style should be used instead.
 
 ### Adapt to the `content-view` style removal
 
-The `.content-view` style class doesn't change background color anymore. The
-default background should be used instead.
+The `.content-view` style class has been removed. The selection mode
+[class@Gtk.CheckButton] style had inside content views has been split out into a
+separate style class `.selection-mode` that can be applied directly onto check
+buttons instead of the view. The unique background color has no replacement and
+the default background should be used instead.
 
 #### Adapt to Header Bar, Action Bar, Search Bar and Toolbar Style Changes
 
diff --git a/src/stylesheet/adwaita-stylesheet.gresources.xml 
b/src/stylesheet/adwaita-stylesheet.gresources.xml
index de729398..4a6d2fa0 100644
--- a/src/stylesheet/adwaita-stylesheet.gresources.xml
+++ b/src/stylesheet/adwaita-stylesheet.gresources.xml
@@ -17,6 +17,8 @@
     <file>assets/bullet-small 2-symbolic symbolic png</file>
     <file>assets/check-small-symbolic.symbolic.png</file>
     <file>assets/check-small 2-symbolic symbolic png</file>
+    <file>assets/dash-small-symbolic.symbolic.png</file>
+    <file>assets/dash-small 2-symbolic symbolic png</file>
 
     <file>assets/bullet-symbolic.svg</file>
     <file>assets/check-symbolic.svg</file>
@@ -24,6 +26,7 @@
 
     <file>assets/bullet-small-symbolic.svg</file>
     <file>assets/check-small-symbolic.svg</file>
+    <file>assets/dash-small-symbolic.svg</file>
 
     <file>assets/devel-symbolic.svg</file>
   </gresource>
diff --git a/src/stylesheet/assets/dash-small-symbolic.svg b/src/stylesheet/assets/dash-small-symbolic.svg
new file mode 100644
index 00000000..de3638dd
--- /dev/null
+++ b/src/stylesheet/assets/dash-small-symbolic.svg
@@ -0,0 +1 @@
+<svg height="14" width="14" xmlns="http://www.w3.org/2000/svg";><g style="display:inline"><path 
style="color:#000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000;solid-opacity:1;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
 d="M407 367h8c1.108 0 2 .892 2 2s-.892 2-2 2h-8c-1.108 0-2-.892-2-2s.892-2 2-2z" transform="translate(-404 
-362)"/></g></svg>
\ No newline at end of file
diff --git a/src/stylesheet/assets/dash-small-symbolic.symbolic.png 
b/src/stylesheet/assets/dash-small-symbolic.symbolic.png
new file mode 100644
index 00000000..3afcfd6f
Binary files /dev/null and b/src/stylesheet/assets/dash-small-symbolic.symbolic.png differ
diff --git a/src/stylesheet/assets/dash-small 2-symbolic symbolic png b/src/stylesheet/assets/dash-small 
2-symbolic symbolic png
new file mode 100644
index 00000000..9cb59945
Binary files /dev/null and b/src/stylesheet/assets/dash-small 2-symbolic symbolic png differ
diff --git a/src/stylesheet/widgets/_checks.scss b/src/stylesheet/widgets/_checks.scss
index 1389fa8e..8f0bd40d 100644
--- a/src/stylesheet/widgets/_checks.scss
+++ b/src/stylesheet/widgets/_checks.scss
@@ -54,9 +54,6 @@ check {
 
   &:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/check-symbolic.symbolic.png")),
                                             -gtk-recolor(url("assets/check 2-symbolic symbolic png"))); }
-
-  &:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/dash-symbolic.symbolic.png")),
-                                                  -gtk-recolor(url("assets/dash 2-symbolic symbolic png"))); 
}
 }
 
 radio {
@@ -64,18 +61,52 @@ radio {
 
   &:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/bullet-symbolic.symbolic.png")),
                                             -gtk-recolor(url("assets/bullet 2-symbolic symbolic png"))); }
+}
 
+check, radio {
   &:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/dash-symbolic.symbolic.png")),
                                                   -gtk-recolor(url("assets/dash 2-symbolic symbolic png"))); 
}
 }
 
-//selection-mode
-.view.content-view.check:not(list),
-.content-view .tile check:not(list) {
-  margin: 4px;
-  min-width: 32px;
-  min-height: 32px;
-  border-radius: $button_radius;
+checkbutton.selection-mode {
+  border-radius: 100px;
 
-  &:checked { -gtk-icon-source: -gtk-icontheme('object-select-symbolic'); }
+  check, radio {
+    padding: 7px;
+    min-width: 14px;
+    min-height: 14px;
+    -gtk-icon-size: 14px;
+    border-radius: 100px;
+  }
+
+  check:not(:checked):not(:indeterminate),
+  radio:not(:checked):not(:indeterminate) {
+    background: none;
+    box-shadow: inset 0 0 0 2px $trough_color;
+    -gtk-icon-source: none;
+
+    &:hover {
+      box-shadow: inset 0 0 0 2px $trough_hover_color;
+
+      &:active {
+        background: none;
+        box-shadow: inset 0 0 0 2px $trough_active_color;
+      }
+    }
+  }
+
+  check:checked  { -gtk-icon-source: 
-gtk-scaled(-gtk-recolor(url("assets/check-small-symbolic.symbolic.png")),
+                                                 -gtk-recolor(url("assets/check-small 2-symbolic symbolic 
png"))); }
+
+  radio:checked  { -gtk-icon-source: 
-gtk-scaled(-gtk-recolor(url("assets/bullet-small-symbolic.symbolic.png")),
+                                                 -gtk-recolor(url("assets/bullet-small 2-symbolic symbolic 
png"))); }
+
+  check:indeterminate,
+  radio:indeterminate { -gtk-icon-source: 
-gtk-scaled(-gtk-recolor(url("assets/dash-small-symbolic.symbolic.png")),
+                                                      -gtk-recolor(url("assets/dash-small 2-symbolic 
symbolic png"))); }
+
+  label {
+    &:dir(ltr) { margin-right: 6px; }
+    &:dir(rtl) { margin-left: 6px; }
+  }
 }
diff --git a/src/stylesheet/widgets/_menus.scss b/src/stylesheet/widgets/_menus.scss
index 2f1aabc0..aa53762f 100644
--- a/src/stylesheet/widgets/_menus.scss
+++ b/src/stylesheet/widgets/_menus.scss
@@ -88,10 +88,8 @@ popover.menu {
     }
   }
 
-  check {
-    &:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/check-small-symbolic.symbolic.png")),
-                                              -gtk-recolor(url("assets/check-small 2-symbolic symbolic 
png"))); }
-  }
+  check:checked { -gtk-icon-source: 
-gtk-scaled(-gtk-recolor(url("assets/check-small-symbolic.symbolic.png")),
+                                                -gtk-recolor(url("assets/check-small 2-symbolic symbolic 
png"))); }
 
   //only menu radios have a border
   radio {
@@ -103,6 +101,11 @@ popover.menu {
                                               -gtk-recolor(url("assets/bullet-small 2-symbolic symbolic 
png"))); }
   }
 
+  check, radio {
+    &:indeterminate { -gtk-icon-source: 
-gtk-scaled(-gtk-recolor(url("assets/dash-small-symbolic.symbolic.png")),
+                                                    -gtk-recolor(url("assets/dash-small 2-symbolic symbolic 
png"))); }
+  }
+
   check,
   radio,
   arrow {