[libhandy] preferences-window: Make the search result margin adaptive

[Alexander Mikhaylenko <alexm src gnome org>]

commit 6a7783ff693ffa1d8bfd98e42b7a4e3ff2eaad4b
Author: Adrien Plazas <kekun plazas laposte net>
Date:   Fri Apr 2 14:57:04 2021 +0200

    preferences-window: Make the search result margin adaptive
    
    This makes the top and bottom margins of the search results match the
    ones of preference pages, which depends of their clamp's width. This
    also avoids hardcoding the margins as properties.

 src/hdy-preferences-window.c       |  5 +++++
 src/hdy-preferences-window.ui      |  7 +++----
 src/themes/Adwaita-dark.css        | 16 ++++++++--------
 src/themes/Adwaita.css             | 16 ++++++++--------
 src/themes/HighContrast.css        | 16 ++++++++--------
 src/themes/HighContrastInverse.css | 16 ++++++++--------
 src/themes/_fallback-base.scss     |  3 +++
 src/themes/fallback.css            | 16 ++++++++--------
 8 files changed, 51 insertions(+), 44 deletions(-)
---
diff --git a/src/hdy-preferences-window.c b/src/hdy-preferences-window.c
index 640e4ab4..84180140 100644
--- a/src/hdy-preferences-window.c
+++ b/src/hdy-preferences-window.c
@@ -26,6 +26,11 @@
  * The #HdyPreferencesWindow widget presents an application's preferences
  * gathered into pages and groups. The preferences are searchable by the user.
  *
+ * # CSS nodes
+ *
+ * #HdyPreferencesWindow has a main CSS node with the name window and the style
+ * class .preferences.
+ *
  * Since: 0.0.10
  */
 
diff --git a/src/hdy-preferences-window.ui b/src/hdy-preferences-window.ui
index 7827400a..73d20e1e 100644
--- a/src/hdy-preferences-window.ui
+++ b/src/hdy-preferences-window.ui
@@ -11,6 +11,9 @@
     <property name="default-width">640</property>
     <property name="default-height">576</property>
     <signal name="key-press-event" handler="key_press_event_cb" after="yes" swapped="no"/>
+    <style>
+      <class name="preferences"/>
+    </style>
     <child>
       <object class="HdyDeck" id="subpages_deck">
         <property name="can-swipe-back" bind-source="HdyPreferencesWindow" bind-property="can-swipe-back" 
bind-flags="sync-create"/>
@@ -138,10 +141,6 @@
                         <property name="visible">True</property>
                         <child>
                           <object class="HdyClamp">
-                            <property name="margin_bottom">18</property>
-                            <property name="margin_end">12</property>
-                            <property name="margin_start">12</property>
-                            <property name="margin_top">18</property>
                             <property name="visible">True</property>
                             <child>
                               <object class="GtkListBox" id="search_results">
diff --git a/src/themes/Adwaita-dark.css b/src/themes/Adwaita-dark.css
index 973ff2a3..1b969c0e 100644
--- a/src/themes/Adwaita-dark.css
+++ b/src/themes/Adwaita-dark.css
@@ -83,21 +83,21 @@ statuspage > scrolledwindow > viewport > box > clamp > box > .icon:not(:last-chi
 
 statuspage > scrolledwindow > viewport > box > clamp > box > .title:not(:last-child) { margin-bottom: 12px; }
 
-preferencespage > scrolledwindow > viewport > clamp { margin: 0 12px; transition: margin-bottom 200ms ease; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp, preferencespage 
> scrolledwindow > viewport > clamp { margin: 0 12px; transition: margin-bottom 200ms ease; }
 
-preferencespage > scrolledwindow > viewport > clamp > box > preferencesgroup { transition: margin-top 200ms 
ease; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp > list, 
window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp > box > 
preferencesgroup, preferencespage > scrolledwindow > viewport > clamp > list, preferencespage > 
scrolledwindow > viewport > clamp > box > preferencesgroup { transition: margin-top 200ms ease; }
 
-preferencespage > scrolledwindow > viewport > clamp.small { margin-bottom: 18px; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.small, 
preferencespage > scrolledwindow > viewport > clamp.small { margin-bottom: 18px; }
 
-preferencespage > scrolledwindow > viewport > clamp.small > box > preferencesgroup { margin-top: 18px; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.small > list, 
window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.small > box > 
preferencesgroup, preferencespage > scrolledwindow > viewport > clamp.small > list, preferencespage > 
scrolledwindow > viewport > clamp.small > box > preferencesgroup { margin-top: 18px; }
 
-preferencespage > scrolledwindow > viewport > clamp.medium { margin-bottom: 24px; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.medium, 
preferencespage > scrolledwindow > viewport > clamp.medium { margin-bottom: 24px; }
 
-preferencespage > scrolledwindow > viewport > clamp.medium > box > preferencesgroup { margin-top: 24px; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.medium > list, 
window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.medium > box > 
preferencesgroup, preferencespage > scrolledwindow > viewport > clamp.medium > list, preferencespage > 
scrolledwindow > viewport > clamp.medium > box > preferencesgroup { margin-top: 24px; }
 
-preferencespage > scrolledwindow > viewport > clamp.large { margin-bottom: 30px; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.large, 
preferencespage > scrolledwindow > viewport > clamp.large { margin-bottom: 30px; }
 
-preferencespage > scrolledwindow > viewport > clamp.large > box > preferencesgroup { margin-top: 30px; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.large > list, 
window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.large > box > 
preferencesgroup, preferencespage > scrolledwindow > viewport > clamp.large > list, preferencespage > 
scrolledwindow > viewport > clamp.large > box > preferencesgroup { margin-top: 30px; }
 
 preferencesgroup > box > label:not(:first-child) { margin-top: 6px; }
 
diff --git a/src/themes/Adwaita.css b/src/themes/Adwaita.css
index 3c43bde6..34b553ce 100644
--- a/src/themes/Adwaita.css
+++ b/src/themes/Adwaita.css
@@ -83,21 +83,21 @@ statuspage > scrolledwindow > viewport > box > clamp > box > .icon:not(:last-chi
 
 statuspage > scrolledwindow > viewport > box > clamp > box > .title:not(:last-child) { margin-bottom: 12px; }
 
-preferencespage > scrolledwindow > viewport > clamp { margin: 0 12px; transition: margin-bottom 200ms ease; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp, preferencespage 
> scrolledwindow > viewport > clamp { margin: 0 12px; transition: margin-bottom 200ms ease; }
 
-preferencespage > scrolledwindow > viewport > clamp > box > preferencesgroup { transition: margin-top 200ms 
ease; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp > list, 
window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp > box > 
preferencesgroup, preferencespage > scrolledwindow > viewport > clamp > list, preferencespage > 
scrolledwindow > viewport > clamp > box > preferencesgroup { transition: margin-top 200ms ease; }
 
-preferencespage > scrolledwindow > viewport > clamp.small { margin-bottom: 18px; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.small, 
preferencespage > scrolledwindow > viewport > clamp.small { margin-bottom: 18px; }
 
-preferencespage > scrolledwindow > viewport > clamp.small > box > preferencesgroup { margin-top: 18px; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.small > list, 
window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.small > box > 
preferencesgroup, preferencespage > scrolledwindow > viewport > clamp.small > list, preferencespage > 
scrolledwindow > viewport > clamp.small > box > preferencesgroup { margin-top: 18px; }
 
-preferencespage > scrolledwindow > viewport > clamp.medium { margin-bottom: 24px; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.medium, 
preferencespage > scrolledwindow > viewport > clamp.medium { margin-bottom: 24px; }
 
-preferencespage > scrolledwindow > viewport > clamp.medium > box > preferencesgroup { margin-top: 24px; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.medium > list, 
window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.medium > box > 
preferencesgroup, preferencespage > scrolledwindow > viewport > clamp.medium > list, preferencespage > 
scrolledwindow > viewport > clamp.medium > box > preferencesgroup { margin-top: 24px; }
 
-preferencespage > scrolledwindow > viewport > clamp.large { margin-bottom: 30px; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.large, 
preferencespage > scrolledwindow > viewport > clamp.large { margin-bottom: 30px; }
 
-preferencespage > scrolledwindow > viewport > clamp.large > box > preferencesgroup { margin-top: 30px; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.large > list, 
window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.large > box > 
preferencesgroup, preferencespage > scrolledwindow > viewport > clamp.large > list, preferencespage > 
scrolledwindow > viewport > clamp.large > box > preferencesgroup { margin-top: 30px; }
 
 preferencesgroup > box > label:not(:first-child) { margin-top: 6px; }
 
diff --git a/src/themes/HighContrast.css b/src/themes/HighContrast.css
index c5b1f1a3..30584398 100644
--- a/src/themes/HighContrast.css
+++ b/src/themes/HighContrast.css
@@ -83,21 +83,21 @@ statuspage > scrolledwindow > viewport > box > clamp > box > .icon:not(:last-chi
 
 statuspage > scrolledwindow > viewport > box > clamp > box > .title:not(:last-child) { margin-bottom: 12px; }
 
-preferencespage > scrolledwindow > viewport > clamp { margin: 0 12px; transition: margin-bottom 200ms ease; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp, preferencespage 
> scrolledwindow > viewport > clamp { margin: 0 12px; transition: margin-bottom 200ms ease; }
 
-preferencespage > scrolledwindow > viewport > clamp > box > preferencesgroup { transition: margin-top 200ms 
ease; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp > list, 
window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp > box > 
preferencesgroup, preferencespage > scrolledwindow > viewport > clamp > list, preferencespage > 
scrolledwindow > viewport > clamp > box > preferencesgroup { transition: margin-top 200ms ease; }
 
-preferencespage > scrolledwindow > viewport > clamp.small { margin-bottom: 18px; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.small, 
preferencespage > scrolledwindow > viewport > clamp.small { margin-bottom: 18px; }
 
-preferencespage > scrolledwindow > viewport > clamp.small > box > preferencesgroup { margin-top: 18px; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.small > list, 
window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.small > box > 
preferencesgroup, preferencespage > scrolledwindow > viewport > clamp.small > list, preferencespage > 
scrolledwindow > viewport > clamp.small > box > preferencesgroup { margin-top: 18px; }
 
-preferencespage > scrolledwindow > viewport > clamp.medium { margin-bottom: 24px; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.medium, 
preferencespage > scrolledwindow > viewport > clamp.medium { margin-bottom: 24px; }
 
-preferencespage > scrolledwindow > viewport > clamp.medium > box > preferencesgroup { margin-top: 24px; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.medium > list, 
window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.medium > box > 
preferencesgroup, preferencespage > scrolledwindow > viewport > clamp.medium > list, preferencespage > 
scrolledwindow > viewport > clamp.medium > box > preferencesgroup { margin-top: 24px; }
 
-preferencespage > scrolledwindow > viewport > clamp.large { margin-bottom: 30px; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.large, 
preferencespage > scrolledwindow > viewport > clamp.large { margin-bottom: 30px; }
 
-preferencespage > scrolledwindow > viewport > clamp.large > box > preferencesgroup { margin-top: 30px; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.large > list, 
window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.large > box > 
preferencesgroup, preferencespage > scrolledwindow > viewport > clamp.large > list, preferencespage > 
scrolledwindow > viewport > clamp.large > box > preferencesgroup { margin-top: 30px; }
 
 preferencesgroup > box > label:not(:first-child) { margin-top: 6px; }
 
diff --git a/src/themes/HighContrastInverse.css b/src/themes/HighContrastInverse.css
index e43782c8..ac0bda3e 100644
--- a/src/themes/HighContrastInverse.css
+++ b/src/themes/HighContrastInverse.css
@@ -83,21 +83,21 @@ statuspage > scrolledwindow > viewport > box > clamp > box > .icon:not(:last-chi
 
 statuspage > scrolledwindow > viewport > box > clamp > box > .title:not(:last-child) { margin-bottom: 12px; }
 
-preferencespage > scrolledwindow > viewport > clamp { margin: 0 12px; transition: margin-bottom 200ms ease; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp, preferencespage 
> scrolledwindow > viewport > clamp { margin: 0 12px; transition: margin-bottom 200ms ease; }
 
-preferencespage > scrolledwindow > viewport > clamp > box > preferencesgroup { transition: margin-top 200ms 
ease; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp > list, 
window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp > box > 
preferencesgroup, preferencespage > scrolledwindow > viewport > clamp > list, preferencespage > 
scrolledwindow > viewport > clamp > box > preferencesgroup { transition: margin-top 200ms ease; }
 
-preferencespage > scrolledwindow > viewport > clamp.small { margin-bottom: 18px; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.small, 
preferencespage > scrolledwindow > viewport > clamp.small { margin-bottom: 18px; }
 
-preferencespage > scrolledwindow > viewport > clamp.small > box > preferencesgroup { margin-top: 18px; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.small > list, 
window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.small > box > 
preferencesgroup, preferencespage > scrolledwindow > viewport > clamp.small > list, preferencespage > 
scrolledwindow > viewport > clamp.small > box > preferencesgroup { margin-top: 18px; }
 
-preferencespage > scrolledwindow > viewport > clamp.medium { margin-bottom: 24px; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.medium, 
preferencespage > scrolledwindow > viewport > clamp.medium { margin-bottom: 24px; }
 
-preferencespage > scrolledwindow > viewport > clamp.medium > box > preferencesgroup { margin-top: 24px; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.medium > list, 
window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.medium > box > 
preferencesgroup, preferencespage > scrolledwindow > viewport > clamp.medium > list, preferencespage > 
scrolledwindow > viewport > clamp.medium > box > preferencesgroup { margin-top: 24px; }
 
-preferencespage > scrolledwindow > viewport > clamp.large { margin-bottom: 30px; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.large, 
preferencespage > scrolledwindow > viewport > clamp.large { margin-bottom: 30px; }
 
-preferencespage > scrolledwindow > viewport > clamp.large > box > preferencesgroup { margin-top: 30px; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.large > list, 
window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.large > box > 
preferencesgroup, preferencespage > scrolledwindow > viewport > clamp.large > list, preferencespage > 
scrolledwindow > viewport > clamp.large > box > preferencesgroup { margin-top: 30px; }
 
 preferencesgroup > box > label:not(:first-child) { margin-top: 6px; }
 
diff --git a/src/themes/_fallback-base.scss b/src/themes/_fallback-base.scss
index dc9a47b2..3b107979 100644
--- a/src/themes/_fallback-base.scss
+++ b/src/themes/_fallback-base.scss
@@ -172,11 +172,13 @@ statuspage > scrolledwindow > viewport > box {
 
 // Preferences
 
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp,
 preferencespage > scrolledwindow > viewport > clamp {
   margin: 0 12px;
 
   transition: margin-bottom 200ms ease;
 
+  > list,
   > box > preferencesgroup {
     transition: margin-top 200ms ease;
   }
@@ -187,6 +189,7 @@ preferencespage > scrolledwindow > viewport > clamp {
     &.#{$name} {
       margin-bottom: $size;
 
+      > list,
       > box > preferencesgroup { margin-top: $size; }
     }
   }
diff --git a/src/themes/fallback.css b/src/themes/fallback.css
index d2587b17..b55d3c42 100644
--- a/src/themes/fallback.css
+++ b/src/themes/fallback.css
@@ -83,21 +83,21 @@ statuspage > scrolledwindow > viewport > box > clamp > box > .icon:not(:last-chi
 
 statuspage > scrolledwindow > viewport > box > clamp > box > .title:not(:last-child) { margin-bottom: 12px; }
 
-preferencespage > scrolledwindow > viewport > clamp { margin: 0 12px; transition: margin-bottom 200ms ease; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp, preferencespage 
> scrolledwindow > viewport > clamp { margin: 0 12px; transition: margin-bottom 200ms ease; }
 
-preferencespage > scrolledwindow > viewport > clamp > box > preferencesgroup { transition: margin-top 200ms 
ease; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp > list, 
window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp > box > 
preferencesgroup, preferencespage > scrolledwindow > viewport > clamp > list, preferencespage > 
scrolledwindow > viewport > clamp > box > preferencesgroup { transition: margin-top 200ms ease; }
 
-preferencespage > scrolledwindow > viewport > clamp.small { margin-bottom: 18px; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.small, 
preferencespage > scrolledwindow > viewport > clamp.small { margin-bottom: 18px; }
 
-preferencespage > scrolledwindow > viewport > clamp.small > box > preferencesgroup { margin-top: 18px; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.small > list, 
window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.small > box > 
preferencesgroup, preferencespage > scrolledwindow > viewport > clamp.small > list, preferencespage > 
scrolledwindow > viewport > clamp.small > box > preferencesgroup { margin-top: 18px; }
 
-preferencespage > scrolledwindow > viewport > clamp.medium { margin-bottom: 24px; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.medium, 
preferencespage > scrolledwindow > viewport > clamp.medium { margin-bottom: 24px; }
 
-preferencespage > scrolledwindow > viewport > clamp.medium > box > preferencesgroup { margin-top: 24px; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.medium > list, 
window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.medium > box > 
preferencesgroup, preferencespage > scrolledwindow > viewport > clamp.medium > list, preferencespage > 
scrolledwindow > viewport > clamp.medium > box > preferencesgroup { margin-top: 24px; }
 
-preferencespage > scrolledwindow > viewport > clamp.large { margin-bottom: 30px; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.large, 
preferencespage > scrolledwindow > viewport > clamp.large { margin-bottom: 30px; }
 
-preferencespage > scrolledwindow > viewport > clamp.large > box > preferencesgroup { margin-top: 30px; }
+window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.large > list, 
window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.large > box > 
preferencesgroup, preferencespage > scrolledwindow > viewport > clamp.large > list, preferencespage > 
scrolledwindow > viewport > clamp.large > box > preferencesgroup { margin-top: 30px; }
 
 preferencesgroup > box > label:not(:first-child) { margin-top: 6px; }