Add an example to theme GdTaggedEntry

2 files changed, 37 insertions, 1 deletions

diff --git a/Makefile.am b/Makefile.am
index 8ccf38d..4a1be27 100644
--- a/Makefile.am
+++ b/Makefile.am
@@ -199,7 +199,7 @@ tagged_entry_sources =				\
 	$(NULL)
 
 nodist_libgd_la_SOURCES += $(tagged_entry_sources)
-EXTRA_DIST += $(tagged_entry_sources)
+EXTRA_DIST += $(tagged_entry_sources) libgd/gd-tagged-entry.example.css
 
 noinst_PROGRAMS += test-tagged-entry
 test_tagged_entry_SOURCES =				\
diff --git a/libgd/gd-tagged-entry.example.css b/libgd/gd-tagged-entry.example.css
new file mode 100644
index 0000000..1c7cade
--- /dev/null
+++ b/libgd/gd-tagged-entry.example.css
@@ -0,0 +1,36 @@
+/* This is an example of a snippet suitable to theme GdTaggedEntry */
+
+@define-color entry_tag_bg #3465a4;
+@define-color entry_tag_fg #ffffff;
+
+.documents-entry-tag {
+    background-image: none;
+    background-color: @entry_tag_bg;
+    color: @entry_tag_fg;
+
+    border-radius: 4px;
+    border-width: 0;
+
+    margin: 2px;
+    padding: 4px;
+}
+
+.documents-entry-tag:hover {
+    background-color: shade(@entry_tag_bg, 1.10);
+    color: @entry_tag_fg;
+}
+
+.documents-entry-tag.button,
+.documents-entry-tag.button:hover,
+.documents-entry-tag.button:active,
+.documents-entry-tag.button:active:hover {
+    background-color: transparent;
+    background-image: none;
+    box-shadow: none;
+    border-image: none;
+    border-width: 0;
+}
+
+.documents-entry-tag.button:hover {
+    color: shade(@entry_tag_bg, 2.10);
+}