Fix layout issues

openstax · Oct 7, 2024 · 6c131f4 · 6c131f4
1 parent 9fb0343
commit 6c131f4
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 21 deletions.
diff --git a/src/app/pages/contact/embedded.scss b/src/app/pages/contact/embedded.scss
@@ -19,7 +19,7 @@
         }
     }
 
-    button {
+    button:not(.clear-file) {
         @include button();
 
         &.primary {

diff --git a/src/app/pages/contact/form.scss b/src/app/pages/contact/form.scss
@@ -1,4 +1,5 @@
 @import 'pattern-library/core/pattern-library/headers';
+@import '../errata-form/form/FileUploader';
 
 form {
     textarea {
@@ -17,6 +18,11 @@ form {
 
     }
 
+    .file-button {
+        @include file-button();
+        margin-bottom: $normal-margin;
+    }
+
     .label-text {
         @include set-font(h4);
         margin-bottom: 0.5rem;
@@ -25,7 +31,6 @@ form {
     .btn,
     .btn[type="submit"] {
         @include button();
-        margin-bottom: $normal-margin;
         width: 12rem;
         padding: 0;
 

diff --git a/src/app/pages/errata-form/form/FileUploader.scss b/src/app/pages/errata-form/form/FileUploader.scss
@@ -0,0 +1,22 @@
+@mixin file-button() {
+    align-items: center;
+    display: grid;
+    grid-gap: 1rem;
+    grid-template-columns: repeat(3, auto) 1fr;
+
+    &.empty {
+        order: 1;
+
+        + .file-button.empty {
+            display: none;
+        }
+    }
+
+    .clear-file {
+        appearance: none;
+        background-color: inherit;
+        color: inherit;
+        justify-self: left;
+
+    }
+}
diff --git a/src/app/pages/errata-form/form/form.scss b/src/app/pages/errata-form/form/form.scss
@@ -1,4 +1,5 @@
 @import 'pattern-library/core/pattern-library/headers';
+@import './FileUploader';
 
 .banned-notice {
     padding: $normal-margin;
@@ -87,8 +88,7 @@
         }
     }
 
-    .button-group,
-    .file-button {
+    .button-group {
         align-items: center;
         display: grid;
         grid-gap: 1rem;
@@ -99,23 +99,7 @@
     }
 
     .file-button {
-        grid-template-columns: auto auto 1fr;
-
-        &.empty {
-            order: 1;
-
-            + .file-button.empty {
-                display: none;
-            }
-        }
-    }
-
-    .clear-file {
-        appearance: none;
-        background-color: inherit;
-        color: inherit;
-        justify-self: left;
-
+        @include file-button();
     }
 
     .btn {