src/platform/forms/sass/_m-schemaform.scss
// Style for schemaform
.va-growable-background {
padding: 1em;
margin-bottom: 1em;
background-color: var(--vads-color-base-lightest);
}
.progress-box .va-growable button {
width: auto;
margin-right: 0;
@media screen and (max-width: 340px) {
padding-left: 10px;
padding-right: 10px;
}
}
.float-right {
float: right;
}
.float-left {
float: left;
}
legend {
color: var(--vads-color-base-darker);
font-size: 1.35em;
font-weight: 700;
line-height: 1.5;
margin: 0;
padding: 0 0 0.5em 0;
}
// IE
fieldset {
display: inline-block;
width: 100%;
max-width: 750px;
.form-review-panel & {
width: 100%;
}
}
@media (max-width: 40.063em) {
.progress-box {
border: none;
padding: 0;
}
}
// Overriding a way too broad style in the base va sass
.form-review-panel {
ul li p {
margin-top: 16px;
margin-bottom: 16px;
}
}
.va-nav-breadcrumbs-list,
legend,
.nav-header > h4,
.nav-header > h2,
.nav-header,
.usa-input-error,
.input-error-date,
.usa-alert {
&:focus {
outline: none;
}
}
.form-error-date .input-date-label {
font-weight: bold;
font-size: 1.0625rem;
font-weight: 700;
}
dl.review {
.review-row {
display: flex;
justify-content: space-between;
flex-direction: column;
border-top: 1px solid var(--vads-color-base-light);
padding: 0.9375rem;
padding-left: 0;
column-gap: 0.9375rem;
> dd {
font-weight: bold;
@media (min-width: $xsmall-screen) {
text-align: right;
}
}
> dt > p {
margin-top: 0;
margin-bottom: 0;
}
@media (min-width: $xsmall-screen) {
flex-direction: row;
}
}
border-bottom: 1px solid var(--vads-color-base-light);
}
// MBMS-51921 remove this and update dl.review when the prod flag removal story is ready
dl.review-auto-margin {
margin: 16px auto;
.review-row {
display: flex;
justify-content: space-between;
flex-direction: column;
border-top: 1px solid var(--vads-color-base-light);
padding: 0.9375rem;
padding-left: 0;
> dd {
font-weight: bold;
text-align: right;
}
> dt > p {
margin-top: 0;
margin-bottom: 0;
}
@media (min-width: $small-screen) {
flex-direction: row;
> dd {
padding-left: 5px;
min-width: 100px;
}
> dt {
max-width: 60%;
min-width: 40%;
}
}
}
border-bottom: 1px solid var(--vads-color-base-light);
}
form.rjsf {
max-width: 100%;
}
.va-growable-review {
margin-top: 16px;
}
// Even up the spacing between multi-line labels and their respective elements
label {
+ div {
// Space above the date fields
.form-datefield-month, .form-datefield-day, .usa-form-group-year,
// And the inputs uswds sets a top margin for
input:not([type="radio"]),
input[type="text"], input[type="email"],
input[type="password"], input[type="url"],
input[type="tel"], input[type="number"],
input[type="search"], input[type="file"],
input[type="date"], input[type="datetime-local"],
input[type="month"], input[type="time"],
input[type="week"], textarea, select {
margin-top: 0.5em;
}
}
}
.usa-alert ul:first-child {
margin-top: 0;
}
.schemaform-buttons {
[type="submit"] {
margin-top: 0.5em;
margin-right: 0.5em;
}
}
.schemaform-back-buttons {
margin-bottom: 4.375rem !important;
}
.schemaform-block {
margin-top: 2em;
}
.progress-box-schemaform {
margin-top: 0;
padding-top: 0;
border: none;
}
.schemaform-chapter-progress {
padding-left: 1.25rem;
padding-right: 1.25rem;
margin-bottom: 1.5em;
@media (max-width: 40.063em) {
padding-left: 1.25rem - 0.5859375rem;
padding-right: 1.25rem - 0.5859375rem;
}
> h4 {
padding-bottom: 0 !important;
}
}
.schemaform-title {
display: flex;
flex-wrap: wrap;
align-items: baseline;
> h1 {
margin-bottom: 0;
padding-right: 10px;
}
> .schemaform-subtitle {
font-size: 1.25rem;
}
margin-bottom: 1.85rem;
}
.schemaform-required-span {
color: var(--vads-color-secondary-dark);
margin: 0 0.35em;
}
.schemaform-intro {
padding-bottom: 0.625rem;
margin-bottom: 4.375rem;
}
// Align the process ol with the title
.schemaform-process {
ol {
margin-left: -0.5em;
}
}
.schemaform-array-row-title:focus {
@include focus-gold-light-outline;
display: inline-block;
}
.schemaform-array-row {
outline: none;
}
.schemaform-block-header {
margin-bottom: 0.7em;
> legend,
> h5,
> p {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
> p {
margin-top: 0;
}
> .schemaform-block-title + p {
margin-top: 0.5em;
}
}
.schemaform-block-title {
font-family: $font-serif;
font-size: 1.125rem;
}
.schemaform-block-subtitle {
font-size: 0.9375rem;
font-weight: 700;
}
.schemaform-first-field {
.schemaform-label,
> .usa-input-error {
margin-top: 0;
}
}
legend.schemaform-label {
font-weight: inherit;
font-size: inherit;
color: inherit;
line-height: inherit;
max-width: 28.75rem;
padding-bottom: 0;
}
fieldset.schemaform-field-template {
margin-top: 1.875rem;
&.schemaform-first-field {
margin-top: 0;
}
}
.schemaform-warning-header {
margin-top: 9px;
}
.schemaform-failure-alert {
margin-bottom: 1.5em;
}
.schemaform-radio-indent {
margin-left: 27px;
}
.schemaform-expandUnder-indent {
margin-left: 29px;
}
.schemaform-currency-input .schemaform-widget-wrapper {
position: relative;
&:before {
content: "$";
display: block;
position: absolute;
top: 9px;
left: 10px;
}
> input {
padding-left: 25px !important;
}
}
//duplicated from claims-status.scss
.help-talk {
margin: 0.5em 0;
padding: 0;
}
.help-phone-number {
margin: 0.5em 0 2em;
}
.help-phone-number-link {
font-weight: bold;
text-decoration: none;
margin: 0.5em 0;
white-space: nowrap;
}
//duplicated/renamed from claims-status.scss
.help-footer-box {
padding: 2em 0;
@include media($medium-screen) {
padding-top: 0.6em;
// padding-left: inherit;
}
}
//duplicated/renamed from claims-status.scss
.help-footer-box {
padding-top: 0.3em;
}
//duplicated/renamed from claims-status.scss
.help-heading {
border-bottom: 3px solid var(--vads-color-primary);
margin: 0.3em 0;
font-size: 1.35em;
line-height: 1.5;
font-weight: bold;
}
.usa-button.schemaform-file-remove-button {
width: auto;
}
.schemaform-file-list {
list-style: none;
padding-left: 0;
overflow-wrap: break-word;
word-break: break-word;
> li {
list-style: none;
}
}
.usa-input-error .schemaform-upload-label {
margin-top: 0.5em;
}
.schemaform-file-upload > div > .schemaform-label {
font-weight: bold;
}
.schemaform-file-error.usa-input-error {
// border size is 4px
right: 4px;
width: calc(100% + 4px);
margin-top: inherit;
}
legend.schemaform-label.schemaform-file-label {
font-weight: bold;
}
.schemaform-file-attachment {
margin-top: 1em;
margin-bottom: 1em;
.usa-input-error {
margin-top: 0;
}
}
.schemaform-file-list-buttons-editing > .usa-button {
margin: 0.5em 0.5em 0.5em 0;
}
.schemaform-file-upload-review {
margin-bottom: 1.5em;
}
.va-growable-background:focus {
outline: none;
}
.schemaform-save-error {
margin-top: 0;
margin-bottom: 1em;
}
.schemaform-address-view {
white-space: pre-wrap;
p {
margin-bottom: 0;
}
p:not(:first-child) {
margin-top: 0;
}
}
.schemaform-array-readonly-header {
padding-bottom: 0.9375rem;
}
.schemaform-prefill-message {
margin-top: 0;
margin-bottom: 0.625rem;
min-height: auto;
}
.schemaform-process-sip {
padding-bottom: 0;
}
.schemaform-sip-alert {
margin-top: 0;
}
.schemaform-label-no-top-margin {
> .schemaform-label {
margin-top: 0.625rem;
}
}
.schemaform-file-uploading {
width: 100%;
}
/* hide outline on focused <p> inside review form; recommendation from:
* https://github.com/department-of-veterans-affairs/vets-website/pull/11847#discussion_r391864665
*/
.form-review-panel-page p[tabIndex],
.form-review-panel-page legend[tabIndex],
.form-review-panel-page label[tabIndex] {
outline: none;
}
.form-review-panel-page-header {
padding-right: 0.625rem;
padding-top: 0.625rem;
line-height: 1.5625rem;
}
.form-review-panel-page-header-row {
align-items: flex-start;
justify-content: flex-end; /* ensures edit is on right side */
}
.schemaform-review-array-error {
margin: -1em -0.8em 0;
border: 2px solid var(--vads-color-gold-lightest);
> .form-review-panel-page-header-row {
padding: 1em 0.8em;
background-color: var(--vads-color-gold-lightest);
}
> .va-growable-review {
padding: 0 1em 1em 1em;
}
}
.schemaform-review-array-error-icon {
background-image: url("~uswds/dist/img/alerts/error.png");
background-image: url("~uswds/dist/img/alerts/error.svg");
width: 2em;
height: 1.4em;
background-size: 2em;
margin-right: 1em;
}
.schemaform-review-page-error {
margin-bottom: 3.125rem;
.form-review-panel-page-header-row {
padding: 1em 0.5em;
margin: -1em -1.2em 0 -1.2em;
background-color: var(--vads-color-error-lighter);
&:before {
display: block;
content: " ";
background-image: url("~uswds/dist/img/alerts/error.png");
background-image: url("~uswds/dist/img/alerts/error.svg");
width: 2em;
height: 1.3em;
background-size: 2em;
margin-right: 0.5em;
margin-top: 0.625rem;
}
}
dl.review {
padding: 0 1em;
margin-top: 0;
margin-bottom: 0;
border-bottom: none;
.review-row {
border-top: none;
}
}
}
/* Highlight accordion item with content that needs attention */
va-accordion-item[data-unviewed-pages="true"] {
&::part(accordion-header) {
background-color: #{var(--vads-color-error-lighter)};
}
&::part(accordion-content) {
border-color: #{var(--vads-color-error-lighter)};
}
}
.usa-alert-no-color {
background-color: transparent;
}
.usa-alert-mini {
margin-top: 0;
margin-bottom: 1em;
background-size: 1.875rem;
background-position: 0.625rem 1.375rem;
> .usa-alert-body {
padding-left: 1.875rem;
}
&::before {
display: none;
}
}
.expires-container {
margin-top: 8px;
margin-bottom: 8px;
}
.expires {
font-weight: bold;
}
.saved-form-metadata-container {
margin-bottom: 16px;
}
.saved-form-metadata {
display: block;
}
.saved-form-autosaving {
font-style: italic;
padding: 1em 0;
margin-top: 0;
margin-bottom: 1.5em;
}
.confirmation-guidance-container {
margin-top: 16px;
}
.confirmation-guidance-heading {
padding-bottom: 0;
padding-top: 16px;
}
.confirmation-guidance-message {
margin-top: 0;
}
.autosuggest-container {
position: relative;
}
.autosuggest-input {
// override accordion styles, which are the bane of our existence
background-image: none !important;
}
.autosuggest-list {
background: var(--vads-color-white);
border: 1px solid var(--vads-color-base-dark);
// Box shadow only sides and bottom of suggestion list.
box-shadow: 3px 3px 3px -3px var(--vads-color-action-focus-on-light),
-3px 3px 3px -3px var(--vads-color-action-focus-on-light),
7px 7px 7px -7px var(--vads-color-action-focus-on-light),
-7px 7px 7px -7px var(--vads-color-action-focus-on-light);
list-style: none;
margin-top: -0.3125rem;
max-width: 28.75rem;
max-height: 28.75rem;
overflow: auto;
padding: 0;
position: absolute;
width: 100%;
top: 46px;
left: 0;
z-index: 1;
@include media-maxwidth($small-screen) {
font-size: 0.8125rem;
}
}
.usa-input-error
> .schemaform-widget-wrapper
> .autosuggest-container
> .autosuggest-list {
width: calc(100% + 1.1875rem);
}
.autosuggest-item {
padding: 0.3125rem 0.625rem;
list-style-type: none;
&-highlighted {
background-color: var(--vads-color-primary-alt-light);
cursor: pointer;
}
&-selected {
font-weight: bold;
}
}
// More correcting of overly broad uswds accordion styles
.react-autosuggest__input[aria-expanded="false"] {
background-image: inherit !important;
background-repeat: inherit !important;
background-size: inherit !important;
}
.schemaform-confirmation-section-header {
font-size: $h3-font-size;
}
.schemaform-confirmation-claim-header {
font-size: $h4-font-size;
margin-top: 1em;
}
.schemaform-title-underline {
border-bottom: 3px solid var(--vads-color-primary);
}
.schemaform-downtime-after-steps {
margin-top: 0;
margin-bottom: 1em;
}
// highlighted outlines for accessibility
[role="button"]:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
outline: 2px solid var(--vads-color-action-focus-on-light);
outline-offset: 2px;
}
.form-checkbox > input[type="checkbox"] + .schemaform-label {
line-height: 1.5rem;
}
.form-checkbox > input[type="checkbox"] + label:before {
margin-right: 0.6em;
}
.editable-row {
position: relative;
.edit-button {
position: absolute;
top: 1em;
right: 1em;
}
}
.resize-y {
resize: vertical;
}
.blue-bar-block {
border-left: 7px solid var(--vads-color-primary);
padding-left: 1em;
p {
margin: 0.5em 0;
}
}
select:disabled {
background-color: var(--vads-color-base-lighter);
}
va-checkbox.statement-of-truth-va-checkbox::part(checkbox) {
max-width: 100%;
}
.action-bar-arrow {
position: relative;
max-width: 75%;
@media (max-width: 767px) {
max-width: 90%;
}
}
.action-bar-arrow::after {
content: "";
position: absolute;
top: 0;
right: -24px;
width: 0;
height: 0;
border-top: 24px solid transparent;
border-bottom: 24px solid transparent;
border-left: 24px solid var(--vads-color-primary);
}
/* Add space above */
.rjsf-web-component-field[error]:not([error=""]) {
margin-top: 1.5rem;
}
.usa-hint {
color: var(--vads-color-gray-medium);
}
@mixin header-style($element, $desktop-font-size, $mobile-font-size) {
.rjsf-web-component-field.#{$element}::part(header) {
font-size: $desktop-font-size;
@media (max-width: $small-screen) {
font-size: $mobile-font-size;
}
}
}
@include header-style("rjsf-wc-header--h1", $h1-font-size, $h2-font-size);
@include header-style("rjsf-wc-header--h2", $h2-font-size, $h3-font-size);
@include header-style("rjsf-wc-header--h3", $h3-font-size, $h4-font-size);
@include header-style("rjsf-wc-header--h4", $h4-font-size, $h5-font-size);