[libhandy/wip/exalm/clamp: 2/2] themes: Use 30px as default margin for preferences page

[Alexander Mikhaylenko <alexm src gnome org>]

commit 5c0d04fc7ad69f731a9d8218a74b81577c3ef8ae
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Fri Aug 13 17:24:19 2021 +0500

    themes: Use 30px as default margin for preferences page
    
    We currently set the margin dependign on clamp size. However, we need it
    before it's sized to measure it. There's no good way to fix that without
    essentially reinventing GtkBox and having dynamic spacing as part of a
    height-for-width sizing, but we don't have that currently.

 src/themes/Adwaita-dark.css        | 2 +-
 src/themes/Adwaita.css             | 2 +-
 src/themes/HighContrast.css        | 2 +-
 src/themes/HighContrastInverse.css | 2 +-
 src/themes/_fallback-base.scss     | 5 +++++
 src/themes/fallback.css            | 2 +-
 6 files changed, 10 insertions(+), 5 deletions(-)
---
diff --git a/src/themes/Adwaita-dark.css b/src/themes/Adwaita-dark.css
index 1b969c0e..8292efe3 100644
--- a/src/themes/Adwaita-dark.css
+++ b/src/themes/Adwaita-dark.css
@@ -85,7 +85,7 @@ statuspage > scrolledwindow > viewport > box > clamp > box > .title:not(:last-ch
 
 window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp, preferencespage 
> scrolledwindow > viewport > clamp { margin: 0 12px; transition: margin-bottom 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; }
+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 { margin-top: 30px; transition: margin-top 200ms 
ease; }
 
 window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.small, 
preferencespage > scrolledwindow > viewport > clamp.small { margin-bottom: 18px; }
 
diff --git a/src/themes/Adwaita.css b/src/themes/Adwaita.css
index 34b553ce..604b32a3 100644
--- a/src/themes/Adwaita.css
+++ b/src/themes/Adwaita.css
@@ -85,7 +85,7 @@ statuspage > scrolledwindow > viewport > box > clamp > box > .title:not(:last-ch
 
 window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp, preferencespage 
> scrolledwindow > viewport > clamp { margin: 0 12px; transition: margin-bottom 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; }
+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 { margin-top: 30px; transition: margin-top 200ms 
ease; }
 
 window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.small, 
preferencespage > scrolledwindow > viewport > clamp.small { margin-bottom: 18px; }
 
diff --git a/src/themes/HighContrast.css b/src/themes/HighContrast.css
index 30584398..2b7ef82c 100644
--- a/src/themes/HighContrast.css
+++ b/src/themes/HighContrast.css
@@ -85,7 +85,7 @@ statuspage > scrolledwindow > viewport > box > clamp > box > .title:not(:last-ch
 
 window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp, preferencespage 
> scrolledwindow > viewport > clamp { margin: 0 12px; transition: margin-bottom 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; }
+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 { margin-top: 30px; transition: margin-top 200ms 
ease; }
 
 window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.small, 
preferencespage > scrolledwindow > viewport > clamp.small { margin-bottom: 18px; }
 
diff --git a/src/themes/HighContrastInverse.css b/src/themes/HighContrastInverse.css
index ac0bda3e..7a15caef 100644
--- a/src/themes/HighContrastInverse.css
+++ b/src/themes/HighContrastInverse.css
@@ -85,7 +85,7 @@ statuspage > scrolledwindow > viewport > box > clamp > box > .title:not(:last-ch
 
 window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp, preferencespage 
> scrolledwindow > viewport > clamp { margin: 0 12px; transition: margin-bottom 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; }
+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 { margin-top: 30px; transition: margin-top 200ms 
ease; }
 
 window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.small, 
preferencespage > scrolledwindow > viewport > clamp.small { margin-bottom: 18px; }
 
diff --git a/src/themes/_fallback-base.scss b/src/themes/_fallback-base.scss
index 3b107979..fc4968f3 100644
--- a/src/themes/_fallback-base.scss
+++ b/src/themes/_fallback-base.scss
@@ -180,6 +180,11 @@ preferencespage > scrolledwindow > viewport > clamp {
 
   > list,
   > box > preferencesgroup {
+    // We need this value to be correct for measuring the natural height.
+    // Natural height when the widget is not mapped means size for natural
+    // width, which corresponds to the `large` style class. So use the large
+    // margin by default.
+    margin-top: 30px;
     transition: margin-top 200ms ease;
   }
 
diff --git a/src/themes/fallback.css b/src/themes/fallback.css
index b55d3c42..bb3e9d05 100644
--- a/src/themes/fallback.css
+++ b/src/themes/fallback.css
@@ -85,7 +85,7 @@ statuspage > scrolledwindow > viewport > box > clamp > box > .title:not(:last-ch
 
 window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp, preferencespage 
> scrolledwindow > viewport > clamp { margin: 0 12px; transition: margin-bottom 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; }
+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 { margin-top: 30px; transition: margin-top 200ms 
ease; }
 
 window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.small, 
preferencespage > scrolledwindow > viewport > clamp.small { margin-bottom: 18px; }