[libhandy/wip/cdavis/remove-adaptive-css-margins] css: Remove adaptive margins for preferences

[Christopher Davis <christopherdavis src gnome org>]

commit 000cf82bd43250c409536e43a7f96e31246f75d3
Author: Christopher Davis <christopherdavis gnome org>
Date:   Sun Nov 7 15:12:51 2021 -0800

    css: Remove adaptive margins for preferences
    
    These adaptive margins interfere with measuring the
    default sizes, as the margins change the size. This
    causes weird things like content being inaccessible
    or content animating as soon as you open a PreferencesPage.
    
    For now, we should drop the adaptive margins. In the future
    we can implement this in the layout code.

 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 ++--------------
 6 files changed, 12 insertions(+), 86 deletions(-)
---
diff --git a/src/themes/Adwaita-dark.css b/src/themes/Adwaita-dark.css
index ed50472d..51a62937 100644
--- a/src/themes/Adwaita-dark.css
+++ b/src/themes/Adwaita-dark.css
@@ -83,21 +83,9 @@ statuspage > scrolledwindow > viewport > box > clamp > box > .icon:not(:last-chi
 
 statuspage > scrolledwindow > viewport > box > clamp > box > .title:not(:last-child) { margin-bottom: 12px; }
 
-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, preferencespage 
> scrolledwindow > viewport > clamp { margin: 0 12px; margin-bottom: 24px; }
 
-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.small, 
preferencespage > scrolledwindow > viewport > clamp.small { margin-bottom: 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; }
-
-window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.medium, 
preferencespage > scrolledwindow > viewport > clamp.medium { margin-bottom: 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; }
-
-window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.large, 
preferencespage > scrolledwindow > viewport > clamp.large { margin-bottom: 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; }
+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: 24px; }
 
 preferencesgroup > box > label:not(:first-child) { margin-top: 6px; }
 
diff --git a/src/themes/Adwaita.css b/src/themes/Adwaita.css
index 677d4d78..6bb32a88 100644
--- a/src/themes/Adwaita.css
+++ b/src/themes/Adwaita.css
@@ -83,21 +83,9 @@ statuspage > scrolledwindow > viewport > box > clamp > box > .icon:not(:last-chi
 
 statuspage > scrolledwindow > viewport > box > clamp > box > .title:not(:last-child) { margin-bottom: 12px; }
 
-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, preferencespage 
> scrolledwindow > viewport > clamp { margin: 0 12px; margin-bottom: 24px; }
 
-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.small, 
preferencespage > scrolledwindow > viewport > clamp.small { margin-bottom: 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; }
-
-window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.medium, 
preferencespage > scrolledwindow > viewport > clamp.medium { margin-bottom: 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; }
-
-window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.large, 
preferencespage > scrolledwindow > viewport > clamp.large { margin-bottom: 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; }
+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: 24px; }
 
 preferencesgroup > box > label:not(:first-child) { margin-top: 6px; }
 
diff --git a/src/themes/HighContrast.css b/src/themes/HighContrast.css
index 42633e0c..80d032b7 100644
--- a/src/themes/HighContrast.css
+++ b/src/themes/HighContrast.css
@@ -83,21 +83,9 @@ statuspage > scrolledwindow > viewport > box > clamp > box > .icon:not(:last-chi
 
 statuspage > scrolledwindow > viewport > box > clamp > box > .title:not(:last-child) { margin-bottom: 12px; }
 
-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, preferencespage 
> scrolledwindow > viewport > clamp { margin: 0 12px; margin-bottom: 24px; }
 
-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.small, 
preferencespage > scrolledwindow > viewport > clamp.small { margin-bottom: 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; }
-
-window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.medium, 
preferencespage > scrolledwindow > viewport > clamp.medium { margin-bottom: 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; }
-
-window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.large, 
preferencespage > scrolledwindow > viewport > clamp.large { margin-bottom: 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; }
+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: 24px; }
 
 preferencesgroup > box > label:not(:first-child) { margin-top: 6px; }
 
diff --git a/src/themes/HighContrastInverse.css b/src/themes/HighContrastInverse.css
index 864a0904..d76470b1 100644
--- a/src/themes/HighContrastInverse.css
+++ b/src/themes/HighContrastInverse.css
@@ -83,21 +83,9 @@ statuspage > scrolledwindow > viewport > box > clamp > box > .icon:not(:last-chi
 
 statuspage > scrolledwindow > viewport > box > clamp > box > .title:not(:last-child) { margin-bottom: 12px; }
 
-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, preferencespage 
> scrolledwindow > viewport > clamp { margin: 0 12px; margin-bottom: 24px; }
 
-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.small, 
preferencespage > scrolledwindow > viewport > clamp.small { margin-bottom: 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; }
-
-window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.medium, 
preferencespage > scrolledwindow > viewport > clamp.medium { margin-bottom: 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; }
-
-window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.large, 
preferencespage > scrolledwindow > viewport > clamp.large { margin-bottom: 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; }
+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: 24px; }
 
 preferencesgroup > box > label:not(:first-child) { margin-top: 6px; }
 
diff --git a/src/themes/_fallback-base.scss b/src/themes/_fallback-base.scss
index 3b107979..5727b0f0 100644
--- a/src/themes/_fallback-base.scss
+++ b/src/themes/_fallback-base.scss
@@ -175,24 +175,10 @@ statuspage > scrolledwindow > viewport > box {
 window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp,
 preferencespage > scrolledwindow > viewport > clamp {
   margin: 0 12px;
-
-  transition: margin-bottom 200ms ease;
+  margin-bottom: 24px;
 
   > list,
-  > box > preferencesgroup {
-    transition: margin-top 200ms ease;
-  }
-
-  $sizes: ("small": 18px, "medium": 24px, "large": 30px);
-
-  @each $name, $size in $sizes {
-    &.#{$name} {
-      margin-bottom: $size;
-
-      > list,
-      > box > preferencesgroup { margin-top: $size; }
-    }
-  }
+  > box > preferencesgroup { margin-top: 24px; }
 }
 
 preferencesgroup > box {
diff --git a/src/themes/fallback.css b/src/themes/fallback.css
index b55d3c42..7d29acea 100644
--- a/src/themes/fallback.css
+++ b/src/themes/fallback.css
@@ -83,21 +83,9 @@ statuspage > scrolledwindow > viewport > box > clamp > box > .icon:not(:last-chi
 
 statuspage > scrolledwindow > viewport > box > clamp > box > .title:not(:last-child) { margin-bottom: 12px; }
 
-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, preferencespage 
> scrolledwindow > viewport > clamp { margin: 0 12px; margin-bottom: 24px; }
 
-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.small, 
preferencespage > scrolledwindow > viewport > clamp.small { margin-bottom: 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; }
-
-window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.medium, 
preferencespage > scrolledwindow > viewport > clamp.medium { margin-bottom: 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; }
-
-window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.large, 
preferencespage > scrolledwindow > viewport > clamp.large { margin-bottom: 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; }
+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: 24px; }
 
 preferencesgroup > box > label:not(:first-child) { margin-top: 6px; }