Merge Wagtail customisations into Streamfield SCSS

client/src/components/StreamField/StreamField.scss

@@ -1,60 +1,4 @@
-$header-padding-vertical: 6px;
-$action-font-size: 18px;
-
 @use './scss/index' with (
     $teal: $color-teal,
     $error-color: $color-red,
 );
-
-
-.c-sf-container {
-    // TODO: #CSSoverhaul the bse icon style here - the margin - should be reconsidered when
-    // re-building the icon component as part of the CSS  These styles come from global
-    // label styles in css/mixins/_general.scss -@jonnyscholes
-    .c-sf-button__icon {
-        .icon::before {
-            margin: unset;
-        }
-    }
-
-    // TODO: #CSSoverhaul global label styles need to be removed. These styles come from global
-    // label styles in css/_grid.scss -@jonnyscholes
-    .field label {
-        float: unset; // LEGIT
-        width: unset; // LEGIT
-        max-width: unset; // LEGIT
-        padding: 0; // LEGIT
-
-        &::after {
-            content: ''; // LEGIT
-        }
-
-        input[type='radio'] {
-            margin-bottom: 1.1em;
-            vertical-align: middle;
-
-            &::before {
-                top: unset;
-            }
-        }
-    }
-
-    // TODO: #CSSoverhaul This should be fixed as part of Wagtail CSS overhaul. The default
-    // `.field`/`.field-componet` (or whatever they become) should be full width by default.
-    // -@jonnyscholes
-    .field-content {
-        float: unset;
-        display: block;
-        width: unset;
-
-        textarea {
-            max-width: 100%;
-        }
-    }
-
-    // TODO: #CSSoverhaul This should be fixed as part of Wagtail CSS overhaul. Whatever we do with
-    // `.field`/`.field-content` should take into account help text -@jonnyscholes
-    .help {
-        margin: 8px 0;
-    }
-}

client/src/components/StreamField/scss/_variables.scss

@@ -1,6 +1,6 @@
 $grid-gutter-width: 30px !default;
 $header-padding-horizontal: 4px !default;
-$header-padding-vertical: 4px !default;
+$header-padding-vertical: 6px;
 $header-gutter: 8px !default;
 $block-margin-vertical: 4px !default;
 $block-margin-horizontal: 0 !default;
@@ -11,7 +11,7 @@ $type-button-padding-horizontal: 10px !default;
 $children-container-padding: $add-button-size / 2 !default;
 $content-padding-horizontal: 24px !default;
 $content-padding-vertical: 16px !default;
-$action-font-size: 15px !default;
+$action-font-size: 18px;
 $add-transition-duration: 0.3s !default;
 $hover-transition-duration: 0.3s !default;
 $bounce-transition-timing: cubic-bezier(0.175, 0.885, 0.32, 1.275) !default;

client/src/components/StreamField/scss/components/c-sf-container.scss

@@ -5,6 +5,15 @@
     padding: $children-container-padding 0;
     transition: padding $hover-transition-duration ease-in-out;
 
+    // TODO: #CSSoverhaul the bse icon style here - the margin - should be reconsidered when
+    // re-building the icon component as part of the CSS  These styles come from global
+    // label styles in css/mixins/_general.scss -@jonnyscholes
+    .c-sf-button__icon {
+        .icon::before {
+            margin: unset;
+        }
+    }
+
     &__block-container {
         position: relative;
         display: flex;
@@ -31,6 +40,28 @@
             padding-top: $grid-gutter-width / 2;
         }
 
+        // TODO: #CSSoverhaul global label styles need to be removed. These styles come from global
+        // label styles in css/_grid.scss -@jonnyscholes
+        label {
+            float: unset; // LEGIT
+            width: unset; // LEGIT
+            max-width: unset; // LEGIT
+            padding: 0; // LEGIT
+
+            &::after {
+                content: ''; // LEGIT
+            }
+
+            input[type='radio'] {
+                margin-bottom: 1.1em;
+                vertical-align: middle;
+
+                &::before {
+                    top: unset;
+                }
+            }
+        }
+
         &__label {
             display: block;
             font-weight: bold;
@@ -47,4 +78,23 @@
             font-size: 13px;
         }
     }
+
+    // TODO: #CSSoverhaul This should be fixed as part of Wagtail CSS overhaul. The default
+    // `.field`/`.field-componet` (or whatever they become) should be full width by default.
+    // -@jonnyscholes
+    .field-content {
+        float: unset;
+        display: block;
+        width: unset;
+
+        textarea {
+            max-width: 100%;
+        }
+    }
+
+    // TODO: #CSSoverhaul This should be fixed as part of Wagtail CSS overhaul. Whatever we do with
+    // `.field`/`.field-content` should take into account help text -@jonnyscholes
+    .help {
+        margin: 8px 0;
+    }
 }