Display Admin section questions as accordions

See DOAJ/doajPM#3519
DOAJ · Nov 6, 2023 · 20baa39 · 20baa39
1 parent 6c85bda
commit 20baa39
Showing 1 changed file with 139 additions and 0 deletions.
diff --git a/cms/sass/themes/_dashboard.scss b/cms/sass/themes/_dashboard.scss
@@ -171,4 +171,143 @@
       padding: 40px;
     }
   }
+
+  // Application form styles — overrides
+  .form {
+    padding: $spacing-04 0;
+    background: rgba($salmon, .15);
+  }
+
+  .form--compact {
+    h1 {
+      margin: 0 (-$spacing-04) $spacing-04 (-$spacing-04);
+      padding: $spacing-04;
+      border-radius: $spacing-02 $spacing-02 0 0;
+      background: $warm-black;
+      color: $white;
+
+      + .form__header,
+      + details {
+        margin-top: -$spacing-04;
+      }
+
+      + .alert {
+        margin: 0 0 $spacing-04 0;
+        background-color: $light-grey;
+        border-radius: $spacing-02;
+        border-color: $mid-grey;
+        color: $warm-black;
+      }
+
+      + .form__question {
+        padding-top: 0;
+        border: 0;
+      }
+    }
+
+    .form__header {
+      margin: 0 (-$spacing-04);
+      padding: $spacing-03 $spacing-04;
+      width: auto;
+      border: 0;
+      border-top: 1px dotted $mid-grey;
+      background: $light-grey;
+    }
+
+    details {
+      cursor: pointer;
+    }
+
+    fieldset {
+      margin: 0 0 $spacing-04 0;
+      padding: 0 $spacing-04;
+      border-radius: $spacing-02;
+      border-bottom: 1px dotted $mid-grey;
+      background: $white;
+    }
+
+    .form__question {
+      padding: $spacing-04;
+      margin: 0;
+      margin-left: -$spacing-04;
+      margin-right: -$spacing-04;
+      border-top: 1px dotted $mid-grey;
+
+      input, select, textarea, .select2-container {
+        margin-bottom: $spacing-03;
+        width: 100% !important;
+        border-color: $mid-grey;
+      }
+
+      .removable-fields li {
+        display: flex;
+        justify-content: center;
+      }
+
+      .remove_field__button {
+        margin-bottom: $spacing-03;
+        white-space: nowrap;
+      }
+    }
+
+    .form__subquestion {
+      border-left-width: $spacing-01;
+    }
+
+    .form__short-help {
+      margin-bottom: $spacing-02;
+      font-size: smaller;
+    }
+
+    .icon-container {
+      display: inline-flex;
+      margin-bottom: $spacing-02;
+      padding: $spacing-01;
+      line-height: 1;
+      border-radius: 50%;
+      color: $white;
+    }
+
+    .icon-container--unable_to_access {
+      background: $grapefruit;
+    }
+
+    .icon-container--not_found,
+    .icon-container--not_validated,
+    .icon-container--missing,
+    .icon-container--outdated {
+      background: $sanguine;
+    }
+
+    .icon-container--fully_validated,
+    .icon-container--present {
+      background: $mid-green;
+    }
+
+    .parsley-errors-list {
+      padding: $spacing-03;
+      border-radius: $spacing-01;
+      background: rgba($grapefruit, .25);
+      font-weight: bold;
+
+      p {
+        margin: 0;
+      }
+    }
+
+    .formulaic-annotation-pissn-list, 
+    .formulaic-annotation-eissn-list, 
+    .formulaic-annotation-preservation_service-list {
+      margin: 0;
+      padding: $spacing-03;
+      border-radius: $spacing-02;
+      border: 1px dotted $mid-grey;
+      background: $light-grey;
+    }
+
+    .formulaic-clickableurl-visit {
+      margin: 0 0 0 $spacing-03;
+      white-space: nowrap;
+    }
+  }
 }