Initial theme commit for Enrollment Flow Attribute Collector (CFM-31) (…

…#242)
COmanage · Dec 15, 2024 · 018b096 · 018b096
1 parent 7fb0393
commit 018b096
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 0 deletions.
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
@@ -666,6 +666,7 @@ ul.form-list li.alert-banner .co-alert {
   line-height: 1.2em;
 }
 .page-title h2.flow-step-description {
+  font-size: 1.4em;
   margin: 0.5em 0 0.25em;
 }
 .page-title .deleted,
@@ -1558,6 +1559,8 @@ ul.form-list textarea {
   font-size: 0.9em;
   width: 100%;
   height: 4em;
+  border: 1px solid var(--cmg-color-bg-007);
+  padding: 0.5em;
 }
 ul.form-list li.field-stack textarea {
   margin: 0;
@@ -1838,6 +1841,52 @@ li[data-pc-section="emptymessage"] {
   color: var(--cmg-color-txt-soft);
   background-color: unset;
 }
+/* ENROLLMENT FLOWS: ATTRIBUTE COLLECTOR */
+body.attributecollectors main {
+  max-width: 800px;
+  margin: 0 auto;
+}
+body.attributecollectors form {
+  margin-top: 1em;
+}
+body.attributecollectors .submit {
+  width: 100%;
+  text-align: right;
+}
+#dispatch_AttributeCollectors li {
+  border: none;
+}
+#dispatch_AttributeCollectors .field,
+#dispatch_AttributeCollectors fieldset {
+  display: block;
+  padding: 0.75em 1em 1.5em;
+}
+#dispatch_AttributeCollectors .fieldset-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  padding: 1em;
+  border: 1px solid var(--cmg-color-bg-006);
+}
+#dispatch_AttributeCollectors li.fields-submit .field {
+  display: grid;
+}
+#dispatch_AttributeCollectors .field-name,
+#dispatch_AttributeCollectors .field-desc {
+  padding: 0;
+}
+#dispatch_AttributeCollectors .field-title,
+#dispatch_AttributeCollectors legend {
+  font-size: 1.05rem;
+  margin-bottom: 0;
+}
+#dispatch_AttributeCollectors .field-info {
+  padding-top: 0.5em;
+}
+#dispatch_AttributeCollectors input[type='text'],
+#dispatch_AttributeCollectors textarea {
+  padding: 0.5rem;
+}
 /* DIALOG BOX */
 #dialog .modal-header {
   background-color: var(--cmg-color-bg-004);

diff --git a/app/webroot/css/co-responsive.css b/app/webroot/css/co-responsive.css
@@ -467,6 +467,43 @@
   #view-external-identity-source-record td:first-child {
     white-space: nowrap;
   }
+  /* ENROLLMENT FLOWS: ATTRIBUTE COLLECTOR */
+  #dispatch_AttributeCollectors .fieldset-info {
+    flex-direction: row;
+    padding: 0;
+    border: none;
+  }
+  #dispatch_AttributeCollectors .fieldset-subgroup {
+    display: flex;
+    width: 100%;
+    gap: 1em;
+  }
+  #dispatch_AttributeCollectors .fieldset-subgroup .fieldset-field {
+    flex-grow: 1;
+  }
+  /* Attribute Specific Styles */
+  /* addresses */
+  #dispatch_AttributeCollectors .attribute-address .fieldset-info {
+    /* Retain the mobile style for addresses */
+    flex-direction: column;
+    padding: 1em;
+    border: 1px solid var(--cmg-color-bg-006);
+  }
+  #dispatch_AttributeCollectors .attribute-address .fieldset-info .fieldset-subgroup:first-child .fieldset-field:last-child {
+    flex-grow: 0;
+  }
+  #dispatch_AttributeCollectors .attribute-address .fieldset-info .fieldset-subgroup:first-child .fieldset-field:last-child input {
+    width: 12.4rem;
+  }
+  /* names */
+  #dispatch_AttributeCollectors .attribute-name .fieldset-info .fieldset-field:first-child input,
+  #dispatch_AttributeCollectors .attribute-name .fieldset-info .fieldset-field:last-child input {
+    width: 5em;
+  }
+  /* telephone numbers */
+  #dispatch_AttributeCollectors .attribute-telephone-number .fieldset-info .fieldset-field:nth-child(3) input {
+    width: 24em;
+  }
   /* FOOTER */
   #co-footer {
     position: static;
@@ -525,6 +562,21 @@
   .config-menu {
     column-count: 3;
   }
+  /* ENROLLMENT FLOWS */
+  .page-title h2.flow-step-description {
+    font-size: 1.7em;
+    margin: 0.5em 0 0.25em;
+  }
+  body.attributecollectors #main-wrapper {
+    background-color: var(--cmg-color-bg-003);
+  }
+  body.attributecollectors #main {
+    background-color: var(--cmg-color-body-bg);
+    margin: 4em auto;
+    padding: 0 2em;
+    border: 1px solid var(--cmg-color-bg-006);
+    border-radius: 1em;
+  }
 }
 
 /* EXTRA LARGE */