[libhandy] preferences-page: Tweak margins and spacing

[Adrien Plazas <aplazas src gnome org>]

commit 1415b56c971f21f47a9caf193d15f38388c68f81
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Tue Feb 9 18:44:29 2021 +0500

    preferences-page: Tweak margins and spacing
    
    Use 18px for small clamp, 24px for medium, 30px for large.
    
    Fixes https://gitlab.gnome.org/GNOME/libhandy/-/issues/410

 src/hdy-preferences-page.ui        |  1 -
 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     | 18 +++++++++++++++++-
 src/themes/fallback.css            | 16 +++++++++++++++-
 7 files changed, 92 insertions(+), 7 deletions(-)
---
diff --git a/src/hdy-preferences-page.ui b/src/hdy-preferences-page.ui
index 8e53e006..b0f0b255 100644
--- a/src/hdy-preferences-page.ui
+++ b/src/hdy-preferences-page.ui
@@ -13,7 +13,6 @@
             <child>
               <object class="GtkBox" id="box">
                 <property name="orientation">vertical</property>
-                <property name="spacing">30</property>
                 <property name="visible">True</property>
               </object>
             </child>
diff --git a/src/themes/Adwaita-dark.css b/src/themes/Adwaita-dark.css
index 86ad0f53..ca64ccd4 100644
--- a/src/themes/Adwaita-dark.css
+++ b/src/themes/Adwaita-dark.css
@@ -83,7 +83,21 @@ statuspage > scrolledwindow > viewport > box > clamp > box > .title { margin-bot
 
 statuspage > scrolledwindow > viewport > box > clamp > box > .description { margin-bottom: 36px; }
 
-preferencespage > scrolledwindow > viewport > clamp { margin: 18px 12px; }
+preferencespage > scrolledwindow > viewport > clamp { margin: 0 12px; transition: margin-bottom 200ms ease; }
+
+preferencespage > scrolledwindow > viewport > clamp > box > preferencesgroup { transition: margin-top 200ms 
ease; }
+
+preferencespage > scrolledwindow > viewport > clamp.small { margin-bottom: 18px; }
+
+preferencespage > scrolledwindow > viewport > clamp.small > box > preferencesgroup { margin-top: 18px; }
+
+preferencespage > scrolledwindow > viewport > clamp.medium { margin-bottom: 24px; }
+
+preferencespage > scrolledwindow > viewport > clamp.medium > box > preferencesgroup { margin-top: 24px; }
+
+preferencespage > scrolledwindow > viewport > clamp.large { margin-bottom: 30px; }
+
+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 4bd7dc3b..fc0844bc 100644
--- a/src/themes/Adwaita.css
+++ b/src/themes/Adwaita.css
@@ -83,7 +83,21 @@ statuspage > scrolledwindow > viewport > box > clamp > box > .title { margin-bot
 
 statuspage > scrolledwindow > viewport > box > clamp > box > .description { margin-bottom: 36px; }
 
-preferencespage > scrolledwindow > viewport > clamp { margin: 18px 12px; }
+preferencespage > scrolledwindow > viewport > clamp { margin: 0 12px; transition: margin-bottom 200ms ease; }
+
+preferencespage > scrolledwindow > viewport > clamp > box > preferencesgroup { transition: margin-top 200ms 
ease; }
+
+preferencespage > scrolledwindow > viewport > clamp.small { margin-bottom: 18px; }
+
+preferencespage > scrolledwindow > viewport > clamp.small > box > preferencesgroup { margin-top: 18px; }
+
+preferencespage > scrolledwindow > viewport > clamp.medium { margin-bottom: 24px; }
+
+preferencespage > scrolledwindow > viewport > clamp.medium > box > preferencesgroup { margin-top: 24px; }
+
+preferencespage > scrolledwindow > viewport > clamp.large { margin-bottom: 30px; }
+
+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 b3717c97..bd7bdbf1 100644
--- a/src/themes/HighContrast.css
+++ b/src/themes/HighContrast.css
@@ -83,7 +83,21 @@ statuspage > scrolledwindow > viewport > box > clamp > box > .title { margin-bot
 
 statuspage > scrolledwindow > viewport > box > clamp > box > .description { margin-bottom: 36px; }
 
-preferencespage > scrolledwindow > viewport > clamp { margin: 18px 12px; }
+preferencespage > scrolledwindow > viewport > clamp { margin: 0 12px; transition: margin-bottom 200ms ease; }
+
+preferencespage > scrolledwindow > viewport > clamp > box > preferencesgroup { transition: margin-top 200ms 
ease; }
+
+preferencespage > scrolledwindow > viewport > clamp.small { margin-bottom: 18px; }
+
+preferencespage > scrolledwindow > viewport > clamp.small > box > preferencesgroup { margin-top: 18px; }
+
+preferencespage > scrolledwindow > viewport > clamp.medium { margin-bottom: 24px; }
+
+preferencespage > scrolledwindow > viewport > clamp.medium > box > preferencesgroup { margin-top: 24px; }
+
+preferencespage > scrolledwindow > viewport > clamp.large { margin-bottom: 30px; }
+
+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 a4e038ed..f6420744 100644
--- a/src/themes/HighContrastInverse.css
+++ b/src/themes/HighContrastInverse.css
@@ -83,7 +83,21 @@ statuspage > scrolledwindow > viewport > box > clamp > box > .title { margin-bot
 
 statuspage > scrolledwindow > viewport > box > clamp > box > .description { margin-bottom: 36px; }
 
-preferencespage > scrolledwindow > viewport > clamp { margin: 18px 12px; }
+preferencespage > scrolledwindow > viewport > clamp { margin: 0 12px; transition: margin-bottom 200ms ease; }
+
+preferencespage > scrolledwindow > viewport > clamp > box > preferencesgroup { transition: margin-top 200ms 
ease; }
+
+preferencespage > scrolledwindow > viewport > clamp.small { margin-bottom: 18px; }
+
+preferencespage > scrolledwindow > viewport > clamp.small > box > preferencesgroup { margin-top: 18px; }
+
+preferencespage > scrolledwindow > viewport > clamp.medium { margin-bottom: 24px; }
+
+preferencespage > scrolledwindow > viewport > clamp.medium > box > preferencesgroup { margin-top: 24px; }
+
+preferencespage > scrolledwindow > viewport > clamp.large { margin-bottom: 30px; }
+
+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 3ade8c08..5b86ed0a 100644
--- a/src/themes/_fallback-base.scss
+++ b/src/themes/_fallback-base.scss
@@ -171,7 +171,23 @@ statuspage > scrolledwindow > viewport > box {
 // Preferences
 
 preferencespage > scrolledwindow > viewport > clamp {
-  margin: 18px 12px;
+  margin: 0 12px;
+
+  transition: margin-bottom 200ms ease;
+
+  > box > preferencesgroup {
+    transition: margin-top 200ms ease;
+  }
+
+  $sizes: ("small": 18px, "medium": 24px, "large": 30px);
+
+  @each $name, $size in $sizes {
+    &.#{$name} {
+      margin-bottom: $size;
+
+      > box > preferencesgroup { margin-top: $size; }
+    }
+  }
 }
 
 preferencesgroup > box {
diff --git a/src/themes/fallback.css b/src/themes/fallback.css
index 8638fc6a..288acd3f 100644
--- a/src/themes/fallback.css
+++ b/src/themes/fallback.css
@@ -83,7 +83,21 @@ statuspage > scrolledwindow > viewport > box > clamp > box > .title { margin-bot
 
 statuspage > scrolledwindow > viewport > box > clamp > box > .description { margin-bottom: 36px; }
 
-preferencespage > scrolledwindow > viewport > clamp { margin: 18px 12px; }
+preferencespage > scrolledwindow > viewport > clamp { margin: 0 12px; transition: margin-bottom 200ms ease; }
+
+preferencespage > scrolledwindow > viewport > clamp > box > preferencesgroup { transition: margin-top 200ms 
ease; }
+
+preferencespage > scrolledwindow > viewport > clamp.small { margin-bottom: 18px; }
+
+preferencespage > scrolledwindow > viewport > clamp.small > box > preferencesgroup { margin-top: 18px; }
+
+preferencespage > scrolledwindow > viewport > clamp.medium { margin-bottom: 24px; }
+
+preferencespage > scrolledwindow > viewport > clamp.medium > box > preferencesgroup { margin-top: 24px; }
+
+preferencespage > scrolledwindow > viewport > clamp.large { margin-bottom: 30px; }
+
+preferencespage > scrolledwindow > viewport > clamp.large > box > preferencesgroup { margin-top: 30px; }
 
 preferencesgroup > box > label:not(:first-child) { margin-top: 6px; }