diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css index b214a9870..3521f9c2d 100644 --- 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, @@ -1486,6 +1487,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; @@ -1763,6 +1766,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 index cb6607a04..b3e491c22 100644 --- 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 */