Tidy up alerts stylesheet

mysociety · Jan 21, 2025 · 7f597d4 · 7f597d4
1 parent ebf71b1
commit 7f597d4
Show file tree

Hide file tree

Showing 6 changed files with 373 additions and 393 deletions.
diff --git a/www/docs/style/sass/pages/_alert.scss b/www/docs/style/sass/pages/_alert.scss
@@ -87,48 +87,34 @@
   }
 }
 
-.alerts-form {
-  max-width: 14em;
-  margin: 0 auto;
-
-  label {
-    width: 100%;
-    text-align: left;
-    color: inherit;
-    font-size: 0.8em;
-    margin-bottom: 0.4em;
-  }
-
-  .button {
-    margin: 0;
-  }
-
-  input[type="text"] {
-    border-color: #999;
-    margin: 0;
-    height: auto; // allow input to be sized by content's default height
-    font-size: 1.4em;
-    line-height: 1em;
-    padding: 0.2em 0.4em;
-    border-radius: 3px;
+// Alert form
+.alert-form__section {
+  margin-bottom: 2.5rem;
+  :last-child {
+      margin-bottom: 0;
   }
+}
 
-  @media (min-width: $medium-screen) {
-    max-width: none; // let the form fill the whole width of the parent
+.alert-form__subtitle {
+  margin-bottom: 0.5rem;
+}
 
-    p {
-      display: inline-block;
-      vertical-align: bottom; // line up the bottom of the three inputs
-      margin: 0;
-    }
+.alert-form__label {
+  display: inline;
+  margin-left: 0.5em;
+}
 
-    p + p {
-      margin-left: 1em;
-    }
+.alert__controls {
+  margin-bottom: 2rem;
+  form {
+      display: inline;
+  }
 
-    .button {
-      vertical-align: bottom; // line up with bottom of parent
-    }
+  button {
+      margin-bottom: 0;
+      span {
+          margin-right: 0.2rem;
+      }
   }
 }
 
@@ -187,6 +173,51 @@
   padding: 2em 0;
 }
 
+.alerts-form {
+  label {
+      color: $body-font-color;
+      font-size: 1.1rem;
+      line-height: 1.2;
+      margin-bottom: 0.75rem;
+  }
+
+  input[type="checkbox"], input[type="radio"] {
+      display: inline-block;
+      height: 1.5rem;
+      width: 1.5rem;
+      margin: 0 0.25rem 0 0;
+      vertical-align: middle;
+
+       + label {
+           display: inline-block;
+           margin-bottom: 0;
+           line-height: 1.5rem;
+           vertical-align: middle;
+       }
+  }
+
+  input[type="text"], select {
+      max-width: 400px;
+      height: 40px;
+      border-color: $body-font-color;
+  }
+
+  .checkbox-wrapper {
+      display: flex;
+      flex-direction: row;
+
+      input[type="checkbox"], input[type="radio"] {
+          flex-shrink: 0;
+      }
+  }
+
+  .checkbox-group  {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 1rem;
+  }
+}
+
 // If browser supports background-size,
 // and we have space, give the message an icon
 @media (min-width: $medium-screen) {
@@ -224,6 +255,25 @@
     background-color: white;
 }
 
+.alert-section__header {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+
+  button, h2 {
+      margin-bottom: 0;
+      margin-top: 0;
+  }
+}
+
+.alert-section__message {
+  background-color: #FFFCD9; // very light yellow
+  padding: 1rem;
+}
+
 .alert-section__primary {
     @include grid-column(12, $collapse: true);
     padding: 1.5em;
@@ -283,11 +333,6 @@
     }
 }
 
-.alert-section--message {
-  background-color: #FFFCD9; // very light yellow
-  padding: 1rem;
-}
-
 .alert-section--disambiguation {
     li {
         margin: 1em 0;
@@ -305,54 +350,6 @@
     }
 }
 
-.alert-page-main-inputs {
-    font-size: 1.2em;
-    @include clearfix();
-    margin: 0.5em 0;
-
-    input[type="text"],
-    input[type="email"] {
-        width: 100%;
-        height: 2.49em;
-        padding-left: 0.8em;
-        padding-right: 0.8em;
-    }
-
-    input[type="text"] {
-        float: left;
-        width: 60%;
-        @include border-radius(3px 0 0 3px);
-    }
-
-    .button {
-        float: left;
-        height: 2.8em;
-        width: 40%;
-        @include border-radius(0 3px 3px 0);
-        margin-bottom: 0;
-        padding-left: 0;
-        padding-right: 0;
-    }
-
-    @media (min-width: 24em) {
-        input[type="text"] {
-            width: 70%;
-        }
-        .button {
-            width: 30%;
-        }
-    }
-
-    @media (min-width: 36em) {
-        input[type="text"] {
-            width: 80%;
-        }
-        .button {
-            width: 20%;
-        }
-    }
-}
-
 .alert-page-error {
     display: block;
     color: $colour_pale_red;
@@ -407,20 +404,6 @@
     }
 }
 
-.alert-section__page-header {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.5rem;
-
-  button, h2 {
-      margin-bottom: 0;
-      margin-top: 0;
-  }
-}
-
 .alert-meta {
   .alert-meta__results {
       display: flex;
@@ -477,7 +460,7 @@
 }
 
 .keyword-alert-accordion__keyword-list,
-.alert-creation-steps {
+.keyword-list {
   margin-bottom: 2.5rem;
   ul {
       list-style: none;