[gtk/wip/otte/css: 294/307] gtk-demo: Modernize accordion demo

[Benjamin Otte <otte src gnome org>]

commit 45d83f71233adbd2de3bfcab1ae80dd115c20a9b
Author: Benjamin Otte <otte redhat com>
Date:   Sat Feb 8 03:25:18 2020 +0100

    gtk-demo: Modernize accordion demo

 demos/gtk-demo/css_accordion.c    | 23 +++++++++++++++--------
 demos/gtk-demo/css_accordion.css  | 20 ++++++++++----------
 demos/gtk-demo/demo.gresource.xml |  1 -
 3 files changed, 25 insertions(+), 19 deletions(-)
---
diff --git a/demos/gtk-demo/css_accordion.c b/demos/gtk-demo/css_accordion.c
index 648393a506..ef87550c11 100644
--- a/demos/gtk-demo/css_accordion.c
+++ b/demos/gtk-demo/css_accordion.c
@@ -7,11 +7,10 @@
 #include <gtk/gtk.h>
 
 static void
-apply_css (GtkWidget *widget, GtkStyleProvider *provider)
+destroy_provider (GtkWidget      *window,
+                  GtkCssProvider *provider)
 {
-  gtk_style_context_add_provider (gtk_widget_get_style_context (widget), provider, G_MAXUINT);
-  if (GTK_IS_CONTAINER (widget))
-    gtk_container_forall (GTK_CONTAINER (widget), (GtkCallback) apply_css, provider);
+  gtk_style_context_remove_provider_for_display (gtk_widget_get_display (window), GTK_STYLE_PROVIDER 
(provider));
 }
 
 GtkWidget *
@@ -21,7 +20,7 @@ do_css_accordion (GtkWidget *do_widget)
 
   if (!window)
     {
-      GtkWidget *container, *child;
+      GtkWidget *container, *styled_box, *child;
       GtkStyleProvider *provider;
 
       window = gtk_window_new ();
@@ -30,11 +29,14 @@ do_css_accordion (GtkWidget *do_widget)
       gtk_window_set_default_size (GTK_WINDOW (window), 600, 300);
       g_signal_connect (window, "destroy",
                         G_CALLBACK (gtk_widget_destroyed), &window);
-
+      
+      styled_box = gtk_frame_new (NULL);
+      gtk_container_add (GTK_CONTAINER (window), styled_box);
+      gtk_widget_add_css_class (styled_box, "accordion");
       container = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 0);
       gtk_widget_set_halign (container, GTK_ALIGN_CENTER);
       gtk_widget_set_valign (container, GTK_ALIGN_CENTER);
-      gtk_container_add (GTK_CONTAINER (window), container);
+      gtk_container_add (GTK_CONTAINER (styled_box), container);
 
       child = gtk_button_new_with_label ("This");
       gtk_container_add (GTK_CONTAINER (container), child);
@@ -57,7 +59,12 @@ do_css_accordion (GtkWidget *do_widget)
       provider = GTK_STYLE_PROVIDER (gtk_css_provider_new ());
       gtk_css_provider_load_from_resource (GTK_CSS_PROVIDER (provider), "/css_accordion/css_accordion.css");
 
-      apply_css (window, provider);
+      gtk_style_context_add_provider_for_display (gtk_widget_get_display (window),
+                                                  GTK_STYLE_PROVIDER (provider),
+                                                  GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
+      g_signal_connect (window, "destroy",
+                        G_CALLBACK (destroy_provider), provider);
+      g_object_unref (provider);
     }
 
   if (!gtk_widget_get_visible (window))
diff --git a/demos/gtk-demo/css_accordion.css b/demos/gtk-demo/css_accordion.css
index ce3346d78e..5d219da998 100644
--- a/demos/gtk-demo/css_accordion.css
+++ b/demos/gtk-demo/css_accordion.css
@@ -1,13 +1,13 @@
-@import url("resource://css_accordion/reset.css");
+.accordion, .accordion * {
+    all: unset;
 
-* {
     transition-property: color, background-color, border-color, background-image, padding, border-width;
     transition-duration: 1s;
 
     font: 20px Cantarell;
 }
 
-window {
+.accordion {
     background: linear-gradient(153deg, #151515, #151515 5px, transparent 5px) 0 0,
                 linear-gradient(333deg, #151515, #151515 5px, transparent 5px) 10px 5px,
                 linear-gradient(153deg, #222, #222 5px, transparent 5px) 0 5px,
@@ -18,7 +18,7 @@ window {
     background-size: 20px 20px;
 }
 
-button {
+.accordion button {
     color: black;
     background-color: #bbb;
     border-style: solid;
@@ -28,25 +28,25 @@ button {
     padding: 12px 4px;
 }
 
-button:first-child {
+.accordion button:first-child {
     border-radius: 5px 0 0 5px;
 }
 
-button:last-child {
+.accordion button:last-child {
     border-radius: 0 5px 5px 0;
     border-width: 2px;
 }
 
-button:hover {
+.accordion button:hover {
     padding: 12px 48px;
     background-color: #4870bc;
 }
 
-button *:hover {
+.accordion button *:hover {
     color: white;
 }
 
-button:hover:active,
-button:active {
+.accordion button:hover:active,
+.accordion button:active {
     background-color: #993401;
 }
diff --git a/demos/gtk-demo/demo.gresource.xml b/demos/gtk-demo/demo.gresource.xml
index a60a21721b..d354b10eb5 100644
--- a/demos/gtk-demo/demo.gresource.xml
+++ b/demos/gtk-demo/demo.gresource.xml
@@ -14,7 +14,6 @@
   </gresource>
   <gresource prefix="/css_accordion">
     <file>css_accordion.css</file>
-    <file>reset.css</file>
   </gresource>
   <gresource prefix="/css_basics">
     <file>css_basics.css</file>