Styled GtkScale, using SVG graphics for the slider

Added an assets directory for the SVG assets.  This directory is
copied to in the share/themes/sugar-72 and themes/sugar-100
directories.

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

6 files changed, 89 insertions, 0 deletions

diff --git a/configure.ac b/configure.ac
index 3ca4462..17f1509 100644
--- a/configure.ac
+++ b/configure.ac
@@ -69,4 +69,5 @@ gtk/engine/Makefile
 gtk/theme/Makefile
 gtk3/Makefile
 gtk3/theme/Makefile
+gtk3/theme/assets/Makefile
 ])
diff --git a/gtk3/theme/Makefile.am b/gtk3/theme/Makefile.am
index 13d393a..c350da1 100644
--- a/gtk3/theme/Makefile.am
+++ b/gtk3/theme/Makefile.am
@@ -1,3 +1,5 @@
+SUBDIRS = assets
+
 gtk-widgets-72.css: gtk-widgets.css.em
 	$(srcdir)/em.py -p $$ -D scaling=\'72\' $(srcdir)/gtk-widgets.css.em > \
 		$(top_builddir)/gtk3/theme/gtk-widgets-72.css
diff --git a/gtk3/theme/assets/Makefile.am b/gtk3/theme/assets/Makefile.am
new file mode 100644
index 0000000..661dbc9
--- /dev/null
+++ b/gtk3/theme/assets/Makefile.am
@@ -0,0 +1,9 @@
+assets =			\
+	scale-slider.svg	\
+	scale-slider-active.svg
+
+sugar72dir = $(datadir)/themes/sugar-72/gtk-3.0/assets
+sugar100dir = $(datadir)/themes/sugar-100/gtk-3.0/assets
+
+dist_sugar72_DATA = $(assets)
+dist_sugar100_DATA = $(assets)
diff --git a/gtk3/theme/assets/scale-slider-active.svg b/gtk3/theme/assets/scale-slider-active.svg
new file mode 100644
index 0000000..63fcb51
--- /dev/null
+++ b/gtk3/theme/assets/scale-slider-active.svg
@@ -0,0 +1,29 @@
+<?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 "#808080">
+]>
+<svg
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   width="32"
+   height="32"
+   id="svg5980">
+  <g
+     id="layer1">
+    <g
+       transform="matrix(1.9661528,0,0,1.9661528,0.27077716,-27.255355)"
+       id="g5104">
+      <path
+         d="m 319.25,290.25 a 6.875,6.875 0 1 1 -13.75,0 6.875,6.875 0 1 1 13.75,0 z"
+         transform="matrix(1.0909091,0,0,1.0909091,-332.77273,-294.63637)"
+         id="path5387"
+         style="color:#000000;fill:&fill_color;;fill-opacity:1;fill-rule:nonzero;stroke:&stroke_color;;stroke-width:0.91666669;stroke-linecap:round;stroke-linejoin:round;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 319.25,290.25 a 6.875,6.875 0 1 1 -13.75,0 6.875,6.875 0 1 1 13.75,0 z"
+         transform="matrix(0.6088795,0,0,0.6088795,-182.19873,-154.72728)"
+         id="path5102"
+         style="color:#000000;fill:&stroke_color;;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.91666669;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+    </g>
+  </g>
+</svg>
diff --git a/gtk3/theme/assets/scale-slider.svg b/gtk3/theme/assets/scale-slider.svg
new file mode 100644
index 0000000..9dbcacd
--- /dev/null
+++ b/gtk3/theme/assets/scale-slider.svg
@@ -0,0 +1,29 @@
+<?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 "#808080">
+]>
+<svg
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   width="32"
+   height="32"
+   id="svg5980">
+  <g
+     id="layer1">
+    <g
+       transform="matrix(1.9661528,0,0,1.9661528,0.27077716,-27.255355)"
+       id="g5104">
+      <path
+         d="m 319.25,290.25 a 6.875,6.875 0 1 1 -13.75,0 6.875,6.875 0 1 1 13.75,0 z"
+         transform="matrix(1.0909091,0,0,1.0909091,-332.77273,-294.63637)"
+         id="path5387"
+         style="color:#000000;fill:&fill_color;;fill-opacity:1;fill-rule:nonzero;stroke:&stroke_color;;stroke-width:0.91666669;stroke-linecap:round;stroke-linejoin:round;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 319.25,290.25 a 6.875,6.875 0 1 1 -13.75,0 6.875,6.875 0 1 1 13.75,0 z"
+         transform="matrix(0.6088795,0,0,0.6088795,-182.19873,-154.72728)"
+         id="path5102"
+         style="color:#000000;fill:&stroke_color;;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.91666669;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+    </g>
+  </g>
+</svg>
diff --git a/gtk3/theme/gtk-widgets.css.em b/gtk3/theme/gtk-widgets.css.em
index e15cfa1..ea439e7 100644
--- a/gtk3/theme/gtk-widgets.css.em
+++ b/gtk3/theme/gtk-widgets.css.em
@@ -455,3 +455,22 @@ GtkVSeparator, GtkHSeparator,
 .toolbar GtkToolButton .button:prelight {
     background-color: @black;
 }
+
+GtkScale {
+    -GtkScale-slider-length: $scale_slider_width;
+    -GtkRange-slider-width: $scale_slider_width;
+}
+
+GtkScale.trough {
+    border-radius: 30;
+}
+
+GtkScale.slider {
+    color: alpha(@theme_base_color, 0.0);
+    background-image: url("assets/scale-slider.svg");
+}
+
+GtkScale.slider:active {
+    color: alpha(@theme_base_color, 0.0);
+    background-image: url("assets/scale-slider-active.svg");
+}