Style checkboxes using SVG graphics

Signed-off-by: Manuel Quiñones <manuq@laptop.org>

6 files changed, 127 insertions, 1 deletions

diff --git a/gtk3/theme/assets/Makefile.am b/gtk3/theme/assets/Makefile.am
index c19ff4d..9691b72 100644
--- a/gtk3/theme/assets/Makefile.am
+++ b/gtk3/theme/assets/Makefile.am
@@ -4,7 +4,11 @@ assets =			\
 	radio.svg		\
 	radio-selected.svg	\
 	radio-active.svg	\
-	radio-active-selected.svg
+	radio-active-selected.svg	\
+	checkbox-unchecked.svg		\
+	checkbox-unchecked-selected.svg	\
+	checkbox-checked.svg		\
+	checkbox-checked-selected.svg
 
 sugar72dir = $(datadir)/themes/sugar-72/gtk-3.0/assets
 sugar100dir = $(datadir)/themes/sugar-100/gtk-3.0/assets
diff --git a/gtk3/theme/assets/checkbox-checked-selected.svg b/gtk3/theme/assets/checkbox-checked-selected.svg
new file mode 100644
index 0000000..8ec1223
--- /dev/null
+++ b/gtk3/theme/assets/checkbox-checked-selected.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+  <!ENTITY fill_color "#E5E5E5">
+  <!ENTITY stroke_color "#010101">
+]>
+<svg
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   width="26"
+   height="26"
+   id="svg814">
+  <g
+     transform="translate(0,-1026.3622)"
+     id="layer1">
+    <rect
+       width="23.999523"
+       height="23.999525"
+       x="1"
+       y="1027.3627"
+       id="rect3268"
+       style="color:&stroke_color;;fill:&fill_color;;fill-opacity:1;stroke:#808080;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+    <path
+       d="m 5.6810941,1039.239 4.7885489,4.7885 9.330512,-9.3305"
+       id="path3438"
+       style="fill:none;stroke:&stroke_color;;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+  </g>
+</svg>
diff --git a/gtk3/theme/assets/checkbox-checked.svg b/gtk3/theme/assets/checkbox-checked.svg
new file mode 100644
index 0000000..3cfce18
--- /dev/null
+++ b/gtk3/theme/assets/checkbox-checked.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+  <!ENTITY fill_color "#FFFFFF">
+  <!ENTITY stroke_color "#010101">
+]>
+<svg
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   width="26"
+   height="26"
+   id="svg814">
+  <g
+     transform="translate(0,-1026.3622)"
+     id="layer1">
+    <rect
+       width="23.999523"
+       height="23.999525"
+       x="1"
+       y="1027.3627"
+       id="rect3268"
+       style="color:&stroke_color;;fill:&fill_color;;fill-opacity:1;stroke:#808080;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+    <path
+       d="m 5.6810941,1039.239 4.7885489,4.7885 9.330512,-9.3305"
+       id="path3438"
+       style="fill:none;stroke:&stroke_color;;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+  </g>
+</svg>
diff --git a/gtk3/theme/assets/checkbox-unchecked-selected.svg b/gtk3/theme/assets/checkbox-unchecked-selected.svg
new file mode 100644
index 0000000..2263279
--- /dev/null
+++ b/gtk3/theme/assets/checkbox-unchecked-selected.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+  <!ENTITY fill_color "#E5E5E5">
+]>
+<svg
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   width="26"
+   height="26"
+   id="svg814">
+  <g
+     transform="translate(0,-1026.3622)"
+     id="layer1">
+    <rect
+       width="23.999523"
+       height="23.999525"
+       x="1"
+       y="1027.3627"
+       id="rect3268"
+       style="color:#000000;fill:&fill_color;;fill-opacity:1;stroke:#808080;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+  </g>
+</svg>
diff --git a/gtk3/theme/assets/checkbox-unchecked.svg b/gtk3/theme/assets/checkbox-unchecked.svg
new file mode 100644
index 0000000..0b1b781
--- /dev/null
+++ b/gtk3/theme/assets/checkbox-unchecked.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+  <!ENTITY fill_color "#FFFFFF">
+]>
+<svg
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   width="26"
+   height="26"
+   id="svg814">
+  <g
+     transform="translate(0,-1026.3622)"
+     id="layer1">
+    <rect
+       width="23.999523"
+       height="23.999525"
+       x="1"
+       y="1027.3627"
+       id="rect3268"
+       style="color:#000000;fill:&fill_color;;fill-opacity:1;stroke:#808080;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+  </g>
+</svg>
diff --git a/gtk3/theme/gtk-widgets.css.em b/gtk3/theme/gtk-widgets.css.em
index 2ef49f1..3d12890 100644
--- a/gtk3/theme/gtk-widgets.css.em
+++ b/gtk3/theme/gtk-widgets.css.em
@@ -518,3 +518,27 @@ GtkCheckButton:prelight {
 .radio:selected row:selected:focused:active {
     background-image: url("assets/radio-active-selected.svg");
 }
+
+.check,
+.check row:selected,
+.check row:selected:focused {
+    background-image: url("assets/checkbox-unchecked.svg");
+}
+
+.check:selected,
+.check:selected row:selected,
+.check:selected row:selected:focused {
+    background-image: url("assets/checkbox-unchecked-selected.svg");
+}
+
+.check:active,
+.check row:selected:active,
+.check row:selected:focused:active {
+    background-image: url("assets/checkbox-checked.svg");
+}
+
+.check:active:selected,
+.check:selected row:selected:active,
+.check:selected row:selected:focused:active {
+    background-image: url("assets/checkbox-checked-selected.svg");
+}