[libadwaita/wip/snwh/checks: 1/4] checkbox experiments

[Sam Hewitt <snwh src gnome org>]

commit 39bd4eb5ab89ad40190813ef76037876b3dcd1f7
Author: Sam Hewitt <sam snwh org>
Date:   Thu Dec 2 15:40:48 2021 -0330

    checkbox experiments

 src/stylesheet/widgets/_checks.scss | 51 ++++++++++++++++++++-----------------
 1 file changed, 27 insertions(+), 24 deletions(-)
---
diff --git a/src/stylesheet/widgets/_checks.scss b/src/stylesheet/widgets/_checks.scss
index 262602c3..05f5ff0c 100644
--- a/src/stylesheet/widgets/_checks.scss
+++ b/src/stylesheet/widgets/_checks.scss
@@ -17,24 +17,41 @@ checkbutton {
 
 check,
 radio {
-  min-height: 20px;
-  min-width: 20px;
-  -gtk-icon-size: 20px;
-  background-color: $trough_color;
+  min-height: 16px;
+  min-width: 16px;
+  -gtk-icon-size: 16px;
+
+  background: none;
+  border-width: 2px;
+  border-style: solid;
+  border-color: $trough_color;
 
   @if $contrast == "high" {
     box-shadow: inset 0 0 0 1px $border_color;
   }
 
-  &:hover:not(:checked):not(:indeterminate) {
-    background-color: $trough_hover_color;
+  &:not(:checked):not(:indeterminate),
+  &:not(:checked):not(:indeterminate) {
+    background: none;
+    border-color:$trough_color;
+    -gtk-icon-source: none;
+
+    &:hover {
+      border-color:$trough_hover_color;
+      background-image: image(gtkalpha(currentColor, .05));
 
-    &:active { background-color: $trough_active_color; }
+      &:active {
+        background: $trough_active_color;
+        border-color: $trough_active_color
+      }
+    }
   }
 
+
   &:checked,
   &:indeterminate {
     background-color: $fill_color;
+    border-color: $fill_color;
     color: $fill_text_color;
 
     @if $contrast == "high" {
@@ -43,6 +60,7 @@ radio {
 
     &:hover {
       background-image: image(gtkalpha(currentColor, .1));
+      border-image: image(gtkalpha(currentColor, .1));
 
       &:active { background-image: image(transparentize(black, .8)); }
     }
@@ -62,7 +80,8 @@ radio {
 }
 
 check {
-  border-radius: $button_radius;
+  // border-radius: $button_radius;
+  border-radius: 100%;
 
   &:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/check-symbolic.symbolic.png")),
                                             -gtk-recolor(url("assets/check 2-symbolic symbolic png"))); }
@@ -91,22 +110,6 @@ checkbutton.selection-mode {
     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"))); }