[gnome-themes-standard/wip/sass] radio, checkboxes: almost perfect asset based implementation ; )

[Jakub Steiner <jimmac src gnome org>]

commit c38aa7e52ac093ea5712237c6caaedd57dd35208
Author: Jakub Steiner <jimmac gmail com>
Date:   Thu May 29 18:37:47 2014 +0200

    radio,checkboxes: almost perfect asset based implementation ;)

 themes/Adwaita/gtk-3.0/_common.scss           |   41 +++
 themes/Adwaita/gtk-3.0/gtk-contained-dark.css |  367 +++++++++++++++++++++++++
 themes/Adwaita/gtk-3.0/gtk-contained.css      |  367 +++++++++++++++++++++++++
 3 files changed, 775 insertions(+), 0 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/_common.scss b/themes/Adwaita/gtk-3.0/_common.scss
index c8ba938..b99ff7c 100644
--- a/themes/Adwaita/gtk-3.0/_common.scss
+++ b/themes/Adwaita/gtk-3.0/_common.scss
@@ -764,6 +764,47 @@ GtkSwitch {
     }
 }
 
+/*************************
+ * Check and Radio items *
+ *************************/
+
+// draw regular check and radio items using our PNG assets
+// all assets are rendered from assets.svg. never add pngs directly
+
+$asset_suffix: if($variant=='dark', '-dark', '');
+ each $w,$a in ('check', 'checkbox'), 
+               ('radio','radio') {
+  @each $s,$as in ('','-unchecked'), 
+                  (':hover', '-unchecked-hover'),
+                  (':insensitive','-unchecked-insensitive'),
+                  (':backdrop', '-unchecked-backdrop'),
+                  (':backdrop:insensitive', '-unchecked-backdrop-insensitive'),
+                  (':inconsistent', '-mixed'),
+                  (':inconsistent:backdrop', '-mixed-backdrop'),
+                  (':inconsistent:insensitive', '-mixed-insensitive'),
+                  (':inconsistent:insensitive:backdrop', '-mixed-backdrop-insensitive'),                  
+                  (':active', '-checked'),
+                  (':active:insensitive','-checked-insensitive'),
+                  (':hover:active', '-checked-hover'),
+                  (':backdrop:active', '-checked-backdrop'),
+                  (':backdrop:active:insensitive', '-checked-backdrop-insensitive') {
+    .#{$w}#{$s} {
+      background-image: -gtk-scaled(url("assets/#{$a}#{$as}#{$asset_suffix}.png"),
+                                    url("assets/#{$a}#{$as}#{$asset_suffix} 2 png"));
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+    /* FIMXE gotta figure this out
+    GtkPopover GtkModelButton.button.#{$w}#{$s} {
+      @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+        background-image: -gtk-scaled(url("assets/#{$a}#{$as}#{$asset_suffix}-popover.png"),
+                                      url("assets/#{$a}#{$as}#{$asset_suffix}-popover 2 png"));
+      }
+    }
+    */
+  }
+}
+
 /************
  * GtkScale *
  ************/
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
index b455606..6d67d50 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
@@ -857,6 +857,373 @@ GtkSwitch {
       border-color: #1c1f1f;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
+/*************************
+ * Check and Radio items *
+ *************************/
+.check {
+  background-image: -gtk-scaled(url("assets/checkbox-unchecked-dark.png"), 
url("assets/checkbox-unchecked-dark 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.check {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/checkbox-unchecked-dark-popover.png"),
+                                  url("assets/checkbox-unchecked-dark-popover 2 png"));
+  }
+}
+*/
+.check:hover {
+  background-image: -gtk-scaled(url("assets/checkbox-unchecked-hover-dark.png"), 
url("assets/checkbox-unchecked-hover-dark 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.check:hover {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/checkbox-unchecked-hover-dark-popover.png"),
+                                  url("assets/checkbox-unchecked-hover-dark-popover 2 png"));
+  }
+}
+*/
+.check:insensitive {
+  background-image: -gtk-scaled(url("assets/checkbox-unchecked-insensitive-dark.png"), 
url("assets/checkbox-unchecked-insensitive-dark 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.check:insensitive {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/checkbox-unchecked-insensitive-dark-popover.png"),
+                                  url("assets/checkbox-unchecked-insensitive-dark-popover 2 png"));
+  }
+}
+*/
+.check:backdrop {
+  background-image: -gtk-scaled(url("assets/checkbox-unchecked-backdrop-dark.png"), 
url("assets/checkbox-unchecked-backdrop-dark 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.check:backdrop {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/checkbox-unchecked-backdrop-dark-popover.png"),
+                                  url("assets/checkbox-unchecked-backdrop-dark-popover 2 png"));
+  }
+}
+*/
+.check:backdrop:insensitive {
+  background-image: -gtk-scaled(url("assets/checkbox-unchecked-backdrop-insensitive-dark.png"), 
url("assets/checkbox-unchecked-backdrop-insensitive-dark 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.check:backdrop:insensitive {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/checkbox-unchecked-backdrop-insensitive-dark-popover.png"),
+                                  url("assets/checkbox-unchecked-backdrop-insensitive-dark-popover 2 png"));
+  }
+}
+*/
+.check:inconsistent {
+  background-image: -gtk-scaled(url("assets/checkbox-mixed-dark.png"), url("assets/checkbox-mixed-dark 2 
png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.check:inconsistent {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/checkbox-mixed-dark-popover.png"),
+                                  url("assets/checkbox-mixed-dark-popover 2 png"));
+  }
+}
+*/
+.check:inconsistent:backdrop {
+  background-image: -gtk-scaled(url("assets/checkbox-mixed-backdrop-dark.png"), 
url("assets/checkbox-mixed-backdrop-dark 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.check:inconsistent:backdrop {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/checkbox-mixed-backdrop-dark-popover.png"),
+                                  url("assets/checkbox-mixed-backdrop-dark-popover 2 png"));
+  }
+}
+*/
+.check:inconsistent:insensitive {
+  background-image: -gtk-scaled(url("assets/checkbox-mixed-insensitive-dark.png"), 
url("assets/checkbox-mixed-insensitive-dark 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.check:inconsistent:insensitive {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/checkbox-mixed-insensitive-dark-popover.png"),
+                                  url("assets/checkbox-mixed-insensitive-dark-popover 2 png"));
+  }
+}
+*/
+.check:inconsistent:insensitive:backdrop {
+  background-image: -gtk-scaled(url("assets/checkbox-mixed-backdrop-insensitive-dark.png"), 
url("assets/checkbox-mixed-backdrop-insensitive-dark 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.check:inconsistent:insensitive:backdrop {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/checkbox-mixed-backdrop-insensitive-dark-popover.png"),
+                                  url("assets/checkbox-mixed-backdrop-insensitive-dark-popover 2 png"));
+  }
+}
+*/
+.check:active {
+  background-image: -gtk-scaled(url("assets/checkbox-checked-dark.png"), url("assets/checkbox-checked-dark 2 
png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.check:active {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/checkbox-checked-dark-popover.png"),
+                                  url("assets/checkbox-checked-dark-popover 2 png"));
+  }
+}
+*/
+.check:active:insensitive {
+  background-image: -gtk-scaled(url("assets/checkbox-checked-insensitive-dark.png"), 
url("assets/checkbox-checked-insensitive-dark 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.check:active:insensitive {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/checkbox-checked-insensitive-dark-popover.png"),
+                                  url("assets/checkbox-checked-insensitive-dark-popover 2 png"));
+  }
+}
+*/
+.check:hover:active {
+  background-image: -gtk-scaled(url("assets/checkbox-checked-hover-dark.png"), 
url("assets/checkbox-checked-hover-dark 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.check:hover:active {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/checkbox-checked-hover-dark-popover.png"),
+                                  url("assets/checkbox-checked-hover-dark-popover 2 png"));
+  }
+}
+*/
+.check:backdrop:active {
+  background-image: -gtk-scaled(url("assets/checkbox-checked-backdrop-dark.png"), 
url("assets/checkbox-checked-backdrop-dark 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.check:backdrop:active {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/checkbox-checked-backdrop-dark-popover.png"),
+                                  url("assets/checkbox-checked-backdrop-dark-popover 2 png"));
+  }
+}
+*/
+.check:backdrop:active:insensitive {
+  background-image: -gtk-scaled(url("assets/checkbox-checked-backdrop-insensitive-dark.png"), 
url("assets/checkbox-checked-backdrop-insensitive-dark 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.check:backdrop:active:insensitive {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/checkbox-checked-backdrop-insensitive-dark-popover.png"),
+                                  url("assets/checkbox-checked-backdrop-insensitive-dark-popover 2 png"));
+  }
+}
+*/
+.radio {
+  background-image: -gtk-scaled(url("assets/radio-unchecked-dark.png"), url("assets/radio-unchecked-dark 2 
png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.radio {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/radio-unchecked-dark-popover.png"),
+                                  url("assets/radio-unchecked-dark-popover 2 png"));
+  }
+}
+*/
+.radio:hover {
+  background-image: -gtk-scaled(url("assets/radio-unchecked-hover-dark.png"), 
url("assets/radio-unchecked-hover-dark 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.radio:hover {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/radio-unchecked-hover-dark-popover.png"),
+                                  url("assets/radio-unchecked-hover-dark-popover 2 png"));
+  }
+}
+*/
+.radio:insensitive {
+  background-image: -gtk-scaled(url("assets/radio-unchecked-insensitive-dark.png"), 
url("assets/radio-unchecked-insensitive-dark 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.radio:insensitive {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/radio-unchecked-insensitive-dark-popover.png"),
+                                  url("assets/radio-unchecked-insensitive-dark-popover 2 png"));
+  }
+}
+*/
+.radio:backdrop {
+  background-image: -gtk-scaled(url("assets/radio-unchecked-backdrop-dark.png"), 
url("assets/radio-unchecked-backdrop-dark 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.radio:backdrop {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/radio-unchecked-backdrop-dark-popover.png"),
+                                  url("assets/radio-unchecked-backdrop-dark-popover 2 png"));
+  }
+}
+*/
+.radio:backdrop:insensitive {
+  background-image: -gtk-scaled(url("assets/radio-unchecked-backdrop-insensitive-dark.png"), 
url("assets/radio-unchecked-backdrop-insensitive-dark 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.radio:backdrop:insensitive {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/radio-unchecked-backdrop-insensitive-dark-popover.png"),
+                                  url("assets/radio-unchecked-backdrop-insensitive-dark-popover 2 png"));
+  }
+}
+*/
+.radio:inconsistent {
+  background-image: -gtk-scaled(url("assets/radio-mixed-dark.png"), url("assets/radio-mixed-dark 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.radio:inconsistent {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/radio-mixed-dark-popover.png"),
+                                  url("assets/radio-mixed-dark-popover 2 png"));
+  }
+}
+*/
+.radio:inconsistent:backdrop {
+  background-image: -gtk-scaled(url("assets/radio-mixed-backdrop-dark.png"), 
url("assets/radio-mixed-backdrop-dark 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.radio:inconsistent:backdrop {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/radio-mixed-backdrop-dark-popover.png"),
+                                  url("assets/radio-mixed-backdrop-dark-popover 2 png"));
+  }
+}
+*/
+.radio:inconsistent:insensitive {
+  background-image: -gtk-scaled(url("assets/radio-mixed-insensitive-dark.png"), 
url("assets/radio-mixed-insensitive-dark 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.radio:inconsistent:insensitive {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/radio-mixed-insensitive-dark-popover.png"),
+                                  url("assets/radio-mixed-insensitive-dark-popover 2 png"));
+  }
+}
+*/
+.radio:inconsistent:insensitive:backdrop {
+  background-image: -gtk-scaled(url("assets/radio-mixed-backdrop-insensitive-dark.png"), 
url("assets/radio-mixed-backdrop-insensitive-dark 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.radio:inconsistent:insensitive:backdrop {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/radio-mixed-backdrop-insensitive-dark-popover.png"),
+                                  url("assets/radio-mixed-backdrop-insensitive-dark-popover 2 png"));
+  }
+}
+*/
+.radio:active {
+  background-image: -gtk-scaled(url("assets/radio-checked-dark.png"), url("assets/radio-checked-dark 2 
png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.radio:active {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/radio-checked-dark-popover.png"),
+                                  url("assets/radio-checked-dark-popover 2 png"));
+  }
+}
+*/
+.radio:active:insensitive {
+  background-image: -gtk-scaled(url("assets/radio-checked-insensitive-dark.png"), 
url("assets/radio-checked-insensitive-dark 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.radio:active:insensitive {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/radio-checked-insensitive-dark-popover.png"),
+                                  url("assets/radio-checked-insensitive-dark-popover 2 png"));
+  }
+}
+*/
+.radio:hover:active {
+  background-image: -gtk-scaled(url("assets/radio-checked-hover-dark.png"), 
url("assets/radio-checked-hover-dark 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.radio:hover:active {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/radio-checked-hover-dark-popover.png"),
+                                  url("assets/radio-checked-hover-dark-popover 2 png"));
+  }
+}
+*/
+.radio:backdrop:active {
+  background-image: -gtk-scaled(url("assets/radio-checked-backdrop-dark.png"), 
url("assets/radio-checked-backdrop-dark 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.radio:backdrop:active {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/radio-checked-backdrop-dark-popover.png"),
+                                  url("assets/radio-checked-backdrop-dark-popover 2 png"));
+  }
+}
+*/
+.radio:backdrop:active:insensitive {
+  background-image: -gtk-scaled(url("assets/radio-checked-backdrop-insensitive-dark.png"), 
url("assets/radio-checked-backdrop-insensitive-dark 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.radio:backdrop:active:insensitive {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/radio-checked-backdrop-insensitive-dark-popover.png"),
+                                  url("assets/radio-checked-backdrop-insensitive-dark-popover 2 png"));
+  }
+}
+*/
 /************
  * GtkScale *
  ************/
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained.css b/themes/Adwaita/gtk-3.0/gtk-contained.css
index 22298b3..0d99e8f 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained.css
@@ -857,6 +857,373 @@ GtkSwitch {
       border-color: #a1a1a1;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
+/*************************
+ * Check and Radio items *
+ *************************/
+.check {
+  background-image: -gtk-scaled(url("assets/checkbox-unchecked.png"), url("assets/checkbox-unchecked 2 
png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.check {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/checkbox-unchecked-popover.png"),
+                                  url("assets/checkbox-unchecked-popover 2 png"));
+  }
+}
+*/
+.check:hover {
+  background-image: -gtk-scaled(url("assets/checkbox-unchecked-hover.png"), 
url("assets/checkbox-unchecked-hover 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.check:hover {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/checkbox-unchecked-hover-popover.png"),
+                                  url("assets/checkbox-unchecked-hover-popover 2 png"));
+  }
+}
+*/
+.check:insensitive {
+  background-image: -gtk-scaled(url("assets/checkbox-unchecked-insensitive.png"), 
url("assets/checkbox-unchecked-insensitive 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.check:insensitive {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/checkbox-unchecked-insensitive-popover.png"),
+                                  url("assets/checkbox-unchecked-insensitive-popover 2 png"));
+  }
+}
+*/
+.check:backdrop {
+  background-image: -gtk-scaled(url("assets/checkbox-unchecked-backdrop.png"), 
url("assets/checkbox-unchecked-backdrop 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.check:backdrop {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/checkbox-unchecked-backdrop-popover.png"),
+                                  url("assets/checkbox-unchecked-backdrop-popover 2 png"));
+  }
+}
+*/
+.check:backdrop:insensitive {
+  background-image: -gtk-scaled(url("assets/checkbox-unchecked-backdrop-insensitive.png"), 
url("assets/checkbox-unchecked-backdrop-insensitive 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.check:backdrop:insensitive {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/checkbox-unchecked-backdrop-insensitive-popover.png"),
+                                  url("assets/checkbox-unchecked-backdrop-insensitive-popover 2 png"));
+  }
+}
+*/
+.check:inconsistent {
+  background-image: -gtk-scaled(url("assets/checkbox-mixed.png"), url("assets/checkbox-mixed 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.check:inconsistent {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/checkbox-mixed-popover.png"),
+                                  url("assets/checkbox-mixed-popover 2 png"));
+  }
+}
+*/
+.check:inconsistent:backdrop {
+  background-image: -gtk-scaled(url("assets/checkbox-mixed-backdrop.png"), 
url("assets/checkbox-mixed-backdrop 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.check:inconsistent:backdrop {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/checkbox-mixed-backdrop-popover.png"),
+                                  url("assets/checkbox-mixed-backdrop-popover 2 png"));
+  }
+}
+*/
+.check:inconsistent:insensitive {
+  background-image: -gtk-scaled(url("assets/checkbox-mixed-insensitive.png"), 
url("assets/checkbox-mixed-insensitive 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.check:inconsistent:insensitive {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/checkbox-mixed-insensitive-popover.png"),
+                                  url("assets/checkbox-mixed-insensitive-popover 2 png"));
+  }
+}
+*/
+.check:inconsistent:insensitive:backdrop {
+  background-image: -gtk-scaled(url("assets/checkbox-mixed-backdrop-insensitive.png"), 
url("assets/checkbox-mixed-backdrop-insensitive 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.check:inconsistent:insensitive:backdrop {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/checkbox-mixed-backdrop-insensitive-popover.png"),
+                                  url("assets/checkbox-mixed-backdrop-insensitive-popover 2 png"));
+  }
+}
+*/
+.check:active {
+  background-image: -gtk-scaled(url("assets/checkbox-checked.png"), url("assets/checkbox-checked 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.check:active {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/checkbox-checked-popover.png"),
+                                  url("assets/checkbox-checked-popover 2 png"));
+  }
+}
+*/
+.check:active:insensitive {
+  background-image: -gtk-scaled(url("assets/checkbox-checked-insensitive.png"), 
url("assets/checkbox-checked-insensitive 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.check:active:insensitive {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/checkbox-checked-insensitive-popover.png"),
+                                  url("assets/checkbox-checked-insensitive-popover 2 png"));
+  }
+}
+*/
+.check:hover:active {
+  background-image: -gtk-scaled(url("assets/checkbox-checked-hover.png"), url("assets/checkbox-checked-hover 
2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.check:hover:active {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/checkbox-checked-hover-popover.png"),
+                                  url("assets/checkbox-checked-hover-popover 2 png"));
+  }
+}
+*/
+.check:backdrop:active {
+  background-image: -gtk-scaled(url("assets/checkbox-checked-backdrop.png"), 
url("assets/checkbox-checked-backdrop 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.check:backdrop:active {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/checkbox-checked-backdrop-popover.png"),
+                                  url("assets/checkbox-checked-backdrop-popover 2 png"));
+  }
+}
+*/
+.check:backdrop:active:insensitive {
+  background-image: -gtk-scaled(url("assets/checkbox-checked-backdrop-insensitive.png"), 
url("assets/checkbox-checked-backdrop-insensitive 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.check:backdrop:active:insensitive {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/checkbox-checked-backdrop-insensitive-popover.png"),
+                                  url("assets/checkbox-checked-backdrop-insensitive-popover 2 png"));
+  }
+}
+*/
+.radio {
+  background-image: -gtk-scaled(url("assets/radio-unchecked.png"), url("assets/radio-unchecked 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.radio {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/radio-unchecked-popover.png"),
+                                  url("assets/radio-unchecked-popover 2 png"));
+  }
+}
+*/
+.radio:hover {
+  background-image: -gtk-scaled(url("assets/radio-unchecked-hover.png"), url("assets/radio-unchecked-hover 2 
png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.radio:hover {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/radio-unchecked-hover-popover.png"),
+                                  url("assets/radio-unchecked-hover-popover 2 png"));
+  }
+}
+*/
+.radio:insensitive {
+  background-image: -gtk-scaled(url("assets/radio-unchecked-insensitive.png"), 
url("assets/radio-unchecked-insensitive 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.radio:insensitive {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/radio-unchecked-insensitive-popover.png"),
+                                  url("assets/radio-unchecked-insensitive-popover 2 png"));
+  }
+}
+*/
+.radio:backdrop {
+  background-image: -gtk-scaled(url("assets/radio-unchecked-backdrop.png"), 
url("assets/radio-unchecked-backdrop 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.radio:backdrop {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/radio-unchecked-backdrop-popover.png"),
+                                  url("assets/radio-unchecked-backdrop-popover 2 png"));
+  }
+}
+*/
+.radio:backdrop:insensitive {
+  background-image: -gtk-scaled(url("assets/radio-unchecked-backdrop-insensitive.png"), 
url("assets/radio-unchecked-backdrop-insensitive 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.radio:backdrop:insensitive {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/radio-unchecked-backdrop-insensitive-popover.png"),
+                                  url("assets/radio-unchecked-backdrop-insensitive-popover 2 png"));
+  }
+}
+*/
+.radio:inconsistent {
+  background-image: -gtk-scaled(url("assets/radio-mixed.png"), url("assets/radio-mixed 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.radio:inconsistent {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/radio-mixed-popover.png"),
+                                  url("assets/radio-mixed-popover 2 png"));
+  }
+}
+*/
+.radio:inconsistent:backdrop {
+  background-image: -gtk-scaled(url("assets/radio-mixed-backdrop.png"), url("assets/radio-mixed-backdrop 2 
png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.radio:inconsistent:backdrop {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/radio-mixed-backdrop-popover.png"),
+                                  url("assets/radio-mixed-backdrop-popover 2 png"));
+  }
+}
+*/
+.radio:inconsistent:insensitive {
+  background-image: -gtk-scaled(url("assets/radio-mixed-insensitive.png"), 
url("assets/radio-mixed-insensitive 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.radio:inconsistent:insensitive {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/radio-mixed-insensitive-popover.png"),
+                                  url("assets/radio-mixed-insensitive-popover 2 png"));
+  }
+}
+*/
+.radio:inconsistent:insensitive:backdrop {
+  background-image: -gtk-scaled(url("assets/radio-mixed-backdrop-insensitive.png"), 
url("assets/radio-mixed-backdrop-insensitive 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.radio:inconsistent:insensitive:backdrop {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/radio-mixed-backdrop-insensitive-popover.png"),
+                                  url("assets/radio-mixed-backdrop-insensitive-popover 2 png"));
+  }
+}
+*/
+.radio:active {
+  background-image: -gtk-scaled(url("assets/radio-checked.png"), url("assets/radio-checked 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.radio:active {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/radio-checked-popover.png"),
+                                  url("assets/radio-checked-popover 2 png"));
+  }
+}
+*/
+.radio:active:insensitive {
+  background-image: -gtk-scaled(url("assets/radio-checked-insensitive.png"), 
url("assets/radio-checked-insensitive 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.radio:active:insensitive {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/radio-checked-insensitive-popover.png"),
+                                  url("assets/radio-checked-insensitive-popover 2 png"));
+  }
+}
+*/
+.radio:hover:active {
+  background-image: -gtk-scaled(url("assets/radio-checked-hover.png"), url("assets/radio-checked-hover 2 
png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.radio:hover:active {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/radio-checked-hover-popover.png"),
+                                  url("assets/radio-checked-hover-popover 2 png"));
+  }
+}
+*/
+.radio:backdrop:active {
+  background-image: -gtk-scaled(url("assets/radio-checked-backdrop.png"), url("assets/radio-checked-backdrop 
2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.radio:backdrop:active {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/radio-checked-backdrop-popover.png"),
+                                  url("assets/radio-checked-backdrop-popover 2 png"));
+  }
+}
+*/
+.radio:backdrop:active:insensitive {
+  background-image: -gtk-scaled(url("assets/radio-checked-backdrop-insensitive.png"), 
url("assets/radio-checked-backdrop-insensitive 2 png"));
+  background-repeat: no-repeat;
+  background-position: center; }
+
+/* FIMXE gotta figure this out
+GtkPopover GtkModelButton.button.radio:backdrop:active:insensitive {
+  @if str-index('-unchecked',$as) gt 0 { //nothing for unchecked
+    background-image: -gtk-scaled(url("assets/radio-checked-backdrop-insensitive-popover.png"),
+                                  url("assets/radio-checked-backdrop-insensitive-popover 2 png"));
+  }
+}
+*/
 /************
  * GtkScale *
  ************/