UNPKG

@dnb/eufemia

Version:

DNB Eufemia Design System UI Library

1,025 lines (997 loc) 47.2 kB
@charset "UTF-8"; /** * ATTENTION: This file is auto generated by using "styleFactory". * Do not change the content! * */ /* * Utilities */ /* * Utilities */ .eufemia-scope--10_104_0 .dnb-forms-field-array-selection { --row-gap: var(--spacing-x-small); } .eufemia-scope--10_104_0 .dnb-forms-field-array-selection--variant-button { --row-gap: var(--spacing-small); } .eufemia-scope--10_104_0 .dnb-forms-field-array-selection--options-layout--vertical .dnb-forms-field-array-selection__options { display: flex; flex-flow: column; row-gap: var(--row-gap); } .eufemia-scope--10_104_0 .dnb-forms-field-array-selection--options-layout--vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label { align-items: flex-start; } .eufemia-scope--10_104_0 .dnb-forms-field-array-selection--variant-button.dnb-forms-field-array-selection--options-layout--vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label { line-height: 2.5rem; } .eufemia-scope--10_104_0 .dnb-forms-field-array-selection--options-layout--horizontal .dnb-forms-field-array-selection__options { display: flex; flex-flow: row wrap; column-gap: var(--spacing-small); row-gap: var(--row-gap); } @media screen and (min-width: 40.00625em) { .eufemia-scope--10_104_0 .dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label { margin-bottom: 0; } } /* * Utilities */ .eufemia-scope--10_104_0 .dnb-forms-field-date-of-birth__month .dnb-forms-field-block__contents { width: 10.75rem; } @media screen and (max-width: 40em) { .eufemia-scope--10_104_0 .dnb-forms-field-date-of-birth__month .dnb-forms-field-block__contents { width: 8rem; } } .eufemia-scope--10_104_0 .dnb-forms-field-expiry .dnb-multi-input-mask { width: var(--forms-field-width--small); } .eufemia-scope--10_104_0 .dnb-forms-field-expiry .dnb-multi-input-mask .dnb-input__shell { justify-content: center; } /* * Utilities */ .eufemia-scope--10_104_0 .dnb-forms-field-number { --number-control-button-border-color: black; --number-control-button-border-color--hover: darkgrey; --number-control-button-border-color--focus: darkgrey; --number-control-button-border-width--focus: 0.125rem; --number-control-button-background-color--hover: grey; --number-control-button-color--hover: black; --number-control-button-background-color--active: black; --number-control-button-color--active: lightgrey; --number-control-button--error: red; --number-control-button--error-contrast: white; --number-control-button-width--small: 2rem; --number-control-button-width--medium: 2.5rem; --number-control-button-width--large: 3rem; --forms-field-block--number-control-buttons-width--small: calc( var(--number-control-button-width--small) * 2 ); --forms-field-block--number-control-buttons-width--medium: calc( var(--number-control-button-width--medium) * 2 ); --forms-field-block--number-control-buttons-width--large: calc( var(--number-control-button-width--large) * 2 ); } .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-input__input { align-items: center; } .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border { border-radius: 0; } .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border, .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border:hover, .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border:focus-within, html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border:focus-within { box-shadow: none; } .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls > .dnb-input__border--root { --input-border-inset: ; --input-border-inset--hover: ; --input-border-inset--active: ; --input-border-inset--focus: ; --input-border-inset--disabled: ; } html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover[disabled] { cursor: not-allowed; } html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover:not([disabled]) { background-color: var(--number-control-button-background-color--hover); color: var(--number-control-button-color--hover); } .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled], .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled] { cursor: not-allowed; } .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]), .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]) { background-color: var(--number-control-button-background-color--active); color: var(--number-control-button-color--active); } .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before, .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after { color: var(--number-control-button--error); } html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:hover[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:hover[disabled] { cursor: not-allowed; } html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:hover:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:hover:not([disabled]) { background-color: var(--number-control-button--error-contrast); color: var(--number-control-button--error); } .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active[disabled], .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active[disabled] { cursor: not-allowed; } .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active:not([disabled]), .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active:not([disabled]) { background-color: var(--number-control-button--error); color: var(--number-control-button--error-contrast); } .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before[disabled], .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after[disabled] { color: var(--number-control-button--error-contrast); } .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input--disabled .dnb-button--control-before[disabled], .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input--disabled .dnb-button--control-after[disabled] { background-color: var(--color-black-3); color: var(--color-black-20); } .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small { --field-block-content-width: calc( var(--forms-field-width--small) + var(--forms-field-block--number-control-buttons-width--small) ); } .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-before, .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-after { width: var(--number-control-button-width--small); } .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium { --field-block-content-width: calc( var(--forms-field-width--medium) + var(--forms-field-block--number-control-buttons-width--medium) ); } .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-before, .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-after { width: var(--number-control-button-width--medium); } .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large { --field-block-content-width: calc( var(--forms-field-width--large) + var(--forms-field-block--number-control-buttons-width--large) ); } .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-before, .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-after { width: var(--number-control-button-width--large); } .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-stretch .dnb-button--control-before, .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-stretch .dnb-button--control-after { width: var(--number-control-button-width--large); } .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-stretch { /* stylelint-disable-next-line no-descending-specificity */ } .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-stretch .dnb-input__border { flex-grow: 1; } @media screen and (max-width: 15em) { .eufemia-scope--10_104_0 .dnb-forms-field-number .dnb-input__shell { width: 90%; } } .eufemia-scope--10_104_0 .dnb-forms-field-password .dnb-input__status--error .dnb-input__submit-button__button { color: var(--color-fire-red); } .eufemia-scope--10_104_0 .dnb-forms-field-password .dnb-input__status--error .dnb-input__submit-button__button:hover { color: var(--color-white); } .eufemia-scope--10_104_0 .dnb-forms-field-phone-number__country-code { width: calc(var(--forms-field-width--medium) - 2rem); } .eufemia-scope--10_104_0 .dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell { width: calc(var(--forms-field-width--medium) - 2rem); } .eufemia-scope--10_104_0 .dnb-forms-field-phone-number__number { flex: 1; } .eufemia-scope--10_104_0 .dnb-forms-field-phone-number .dnb-form-label { max-width: 14ch; } /* * Utilities */ .eufemia-scope--10_104_0 .dnb-forms-field-postal-code-and-city__postal-code { flex: 0 5rem; } .eufemia-scope--10_104_0 .dnb-forms-field-postal-code-and-city__city { flex: 1; } /* * Utilities */ .eufemia-scope--10_104_0 .dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label { align-self: center; } .eufemia-scope--10_104_0 .dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label, .eufemia-scope--10_104_0 .dnb-forms-field-selection__options-layout--horizontal .dnb-forms-field-block--layout-horizontal .dnb-form-label { margin-bottom: 0; } .eufemia-scope--10_104_0 .dnb-forms-field-selection--options-layout--vertical.dnb-forms-field-selection--layout-horizontal .dnb-forms-field-block__label { align-items: flex-start; } .eufemia-scope--10_104_0 .dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label { line-height: 2.5rem; } .eufemia-scope--10_104_0 .dnb-forms-field-selection__variant--radio-list { --outline-color: var(--color-black-8); --outline-width: 0.0625rem; --list-padding: 1rem; --list-height: 4rem; } .eufemia-scope--10_104_0 .dnb-forms-field-selection__variant--radio-list .dnb-radio-group__shell { row-gap: 0; } .eufemia-scope--10_104_0 .dnb-forms-field-selection__variant--radio-list .dnb-radio-group__fieldset { border-radius: 0.5rem; --border-color: var(--outline-color); --border-width: var(--outline-width); box-shadow: 0 0 0 var(--border-width) var(--border-color); border-color: transparent; background-color: var(--color-white); } .eufemia-scope--10_104_0 .dnb-forms-field-selection__variant--radio-list .dnb-radio { justify-content: center; padding: calc((var(--list-height) - 1.5rem) / 2) var(--list-padding); overflow: clip; } .eufemia-scope--10_104_0 .dnb-forms-field-selection__variant--radio-list .dnb-radio .dnb-radio__input { -webkit-appearance: none; appearance: none; transform: none; left: calc(var(--list-padding) * -1); width: 100vw; height: var(--list-height); } .eufemia-scope--10_104_0 .dnb-forms-field-selection__variant--radio-list .dnb-radio .dnb-form-label { padding-left: var(--list-padding); } .eufemia-scope--10_104_0 .dnb-forms-field-selection__variant--radio-list .dnb-radio { position: relative; } .eufemia-scope--10_104_0 .dnb-forms-field-selection__variant--radio-list .dnb-radio:not(:first-of-type)::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--outline-color); height: var(--outline-width); } .eufemia-scope--10_104_0 .dnb-forms-field-selection .dnb-forms-field-block__contents { display: flex; } .eufemia-scope--10_104_0 .dnb-forms-field-selection .dnb-radio-group .dnb-height-animation, .eufemia-scope--10_104_0 .dnb-forms-field-selection .dnb-radio-group > .dnb-flex-container, .eufemia-scope--10_104_0 .dnb-forms-field-selection .dnb-toggle-button-group .dnb-height-animation, .eufemia-scope--10_104_0 .dnb-forms-field-selection .dnb-toggle-button-group > .dnb-flex-container { width: 100%; flex-grow: 1; } /* * Utilities */ .eufemia-scope--10_104_0 .dnb-forms-field-string .dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__label.dnb-form-label { align-items: baseline; } @media screen and (max-width: 15em) { .eufemia-scope--10_104_0 .dnb-forms-field-string .dnb-input__shell { width: 90%; } } .eufemia-scope--10_104_0 .dnb-forms-field-upload .dnb-help-button__content .dnb-section { --outset-left: calc(var(--spacing-medium)); --outset-right: calc(var(--spacing-medium)); margin-left: var(--upload-border-width); margin-right: var(--upload-border-width); } .eufemia-scope--10_104_0 .dnb-forms-field-upload .dnb-help-button__content .dnb-section::before { z-index: 0; } /* * Utilities */ .eufemia-scope--10_104_0 { --forms-field-width--small: 5rem; --forms-field-width--medium: 11rem; --forms-field-width--large: 21rem; --forms-field-label-max-width--large: var(--prose-max-width); } .eufemia-scope--10_104_0 fieldset.dnb-forms-field-block:not([class*=space__top]) { margin-top: 0; } .eufemia-scope--10_104_0 fieldset.dnb-forms-field-block:not([class*=space__bottom]) { margin-bottom: 0; } .eufemia-scope--10_104_0 fieldset.dnb-forms-field-block:not([class*=space__left]) { margin-left: 0; } .eufemia-scope--10_104_0 fieldset.dnb-forms-field-block:not([class*=space__right]) { margin-right: 0; } .eufemia-scope--10_104_0 fieldset.dnb-forms-field-block { padding: 0; border: none; } .eufemia-scope--10_104_0 .dnb-forms-field-block__grid { display: grid; grid-template-columns: minmax(-webkit-min-content, var(--block-content-width, auto)); grid-template-columns: minmax(min-content, var(--block-content-width, auto)); grid-template-areas: "label" "help" "contents" "indicator" "status"; } .eufemia-scope--10_104_0 .dnb-forms-field-block { --label-margin: 0.25rem; } .eufemia-scope--10_104_0 .dnb-forms-field-block--label-height-small { --label-margin: 0; } .eufemia-scope--10_104_0 .dnb-forms-field-block--label-height-medium { --label-margin: 0.5rem; } .eufemia-scope--10_104_0 .dnb-forms-field-block--label-height-large { --label-margin: 0.7rem; } .eufemia-scope--10_104_0 .dnb-forms-field-block--width-stretch { flex-grow: 1; } .eufemia-scope--10_104_0 .dnb-forms-field-block--width-stretch label.dnb-form-label { max-width: none; } @media screen and (min-width: 25.00625em) { .eufemia-scope--10_104_0 .dnb-forms-field-block--width-custom { width: calc(var(--dnb-forms-field-block-width)); } .eufemia-scope--10_104_0 .dnb-forms-field-block--width-small { width: var(--forms-field-width--small); } .eufemia-scope--10_104_0 .dnb-forms-field-block--width-medium { width: var(--forms-field-width--medium); } .eufemia-scope--10_104_0 .dnb-forms-field-block--width-large { width: var(--forms-field-width--large); } } .eufemia-scope--10_104_0 .dnb-forms-field-block:not([class*="--content-width"]) { --max-width: var(--forms-field-label-max-width--large); } .eufemia-scope--10_104_0 .dnb-forms-field-block__label, .eufemia-scope--10_104_0 .dnb-forms-field-block__label.dnb-form-label { grid-area: label; display: flex; max-width: var(--forms-field-label-max-width--large); align-items: center; margin-right: 0; } .eufemia-scope--10_104_0 .dnb-forms-field-block__label__description, .eufemia-scope--10_104_0 .dnb-forms-field-block__label.dnb-form-label__description { vertical-align: top; } .eufemia-scope--10_104_0 .dnb-forms-field-block__label__content:has(+ .dnb-help-button), .eufemia-scope--10_104_0 .dnb-forms-field-block__label__description:has(+ .dnb-help-button), .eufemia-scope--10_104_0 .dnb-forms-field-block__label.dnb-form-label__content:has(+ .dnb-help-button), .eufemia-scope--10_104_0 .dnb-forms-field-block__label.dnb-form-label__description:has(+ .dnb-help-button) { margin-right: 0.5rem; } .eufemia-scope--10_104_0 .dnb-forms-field-block__label:has(.dnb-forms-field-block__label__description, .dnb-forms-field-block__label.dnb-form-label__description) .dnb-help-button, .eufemia-scope--10_104_0 .dnb-forms-field-block__label:has(.dnb-forms-field-block__label__description, .dnb-forms-field-block__label.dnb-form-label__description):not(.dnb-forms-field-block__label:has(+ .dnb-help-button), .dnb-forms-field-block__label.dnb-form-label:has(+ .dnb-help-button)) .dnb-forms-field-block__label__content, .eufemia-scope--10_104_0 .dnb-forms-field-block__label.dnb-form-label:has(.dnb-forms-field-block__label__description, .dnb-forms-field-block__label.dnb-form-label__description) .dnb-help-button, .eufemia-scope--10_104_0 .dnb-forms-field-block__label:has(.dnb-forms-field-block__label__description, .dnb-forms-field-block__label.dnb-form-label__description):not(.dnb-forms-field-block__label:has(+ .dnb-help-button), .dnb-forms-field-block__label.dnb-form-label:has(+ .dnb-help-button)) .dnb-forms-field-block__label.dnb-form-label__content, .eufemia-scope--10_104_0 .dnb-forms-field-block__label.dnb-form-label:has(.dnb-forms-field-block__label__description, .dnb-forms-field-block__label.dnb-form-label__description):not(.dnb-forms-field-block__label:has(+ .dnb-help-button), .dnb-forms-field-block__label.dnb-form-label:has(+ .dnb-help-button)) .dnb-forms-field-block__label__content, .eufemia-scope--10_104_0 .dnb-forms-field-block__label.dnb-form-label:has(.dnb-forms-field-block__label__description, .dnb-forms-field-block__label.dnb-form-label__description):not(.dnb-forms-field-block__label:has(+ .dnb-help-button), .dnb-forms-field-block__label.dnb-form-label:has(+ .dnb-help-button)) .dnb-forms-field-block__label.dnb-form-label__content { margin-right: 0.3em; } .eufemia-scope--10_104_0 .dnb-forms-field-block__label .dnb-help-button__word-joiner, .eufemia-scope--10_104_0 .dnb-forms-field-block__label.dnb-form-label .dnb-help-button__word-joiner { margin-left: 0.45em; white-space: nowrap; } .eufemia-scope--10_104_0 .dnb-forms-field-block__label .dnb-help-button__word-joiner::before, .eufemia-scope--10_104_0 .dnb-forms-field-block__label.dnb-form-label .dnb-help-button__word-joiner::before { content: "⁠"; } .eufemia-scope--10_104_0 .dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical { flex-wrap: wrap; } .eufemia-scope--10_104_0 .dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical > .dnb-form-label { margin-bottom: 0.5rem; } .eufemia-scope--10_104_0 .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__label { margin-right: 1rem; } .eufemia-scope--10_104_0 .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal > .dnb-form-label { margin-top: var(--label-margin); margin-bottom: var(--label-margin); } @media screen and (max-width: 40em) { .eufemia-scope--10_104_0 .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal > .dnb-form-label { margin-bottom: calc(var(--label-margin) + 0.5rem); } } @media screen and (min-width: 40.00625em) { .eufemia-scope--10_104_0 .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal { grid-template-columns: minmax(var(--dnb-forms-field-block-layout-width-min, -webkit-min-content), var(--dnb-forms-field-block-layout-width-max, -webkit-max-content)) auto; grid-template-columns: minmax(var(--dnb-forms-field-block-layout-width-min, min-content), var(--dnb-forms-field-block-layout-width-max, max-content)) auto; grid-template-areas: "label contents" ". help" ". indicator" ". status"; } .eufemia-scope--10_104_0 .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-help-button__content { --help-button-indent-width: 0; } .eufemia-scope--10_104_0 .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-help-button__content .dnb-section { --rounded-corner: 0.25rem; align-self: flex-start; } .eufemia-scope--10_104_0 .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__contents { align-self: end; } } .eufemia-scope--10_104_0 .dnb-forms-field-block__indicator { grid-area: indicator; position: relative; } .eufemia-scope--10_104_0 .dnb-forms-field-block__indicator .dnb-forms-submit-indicator__content { position: absolute; } .eufemia-scope--10_104_0 .dnb-forms-field-block__help { grid-area: help; display: flex; flex-flow: column; } .eufemia-scope--10_104_0 .dnb-forms-field-block__help .dnb-section { margin-bottom: 1rem; } .eufemia-scope--10_104_0 .dnb-forms-field-block__help .dnb-section > .dnb-p--lead { margin-bottom: 0.5rem; } @media screen and (min-width: 40.00625em) { .eufemia-scope--10_104_0 .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__help .dnb-section { margin-top: 0.5rem; margin-bottom: 0; } } .eufemia-scope--10_104_0 .dnb-forms-field-block__status { grid-area: status; } .eufemia-scope--10_104_0 .dnb-forms-field-block__status .dnb-form-status__shell { margin-top: var(--field-block-status-margin-top, 0.5rem); margin-bottom: var(--field-block-status-margin-bottom, 0); max-width: var(--prose-max-width); } @media screen and (max-width: 15em) { .eufemia-scope--10_104_0 .dnb-forms-field-block__status { width: 90%; } } .eufemia-scope--10_104_0 .dnb-forms-field-block--status-position-above .dnb-forms-field-block__grid { grid-template-areas: "label" "help" "status" "contents" "indicator"; } .eufemia-scope--10_104_0 .dnb-forms-field-block--status-position-above { --field-block-status-margin-top: 0; --field-block-status-margin-bottom: 0.5rem; } @media screen and (min-width: 40.00625em) { .eufemia-scope--10_104_0 .dnb-forms-field-block--status-position-above .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal { grid-template-areas: "label status" ". contents" ". help" ". indicator"; } } .eufemia-scope--10_104_0 .dnb-forms-field-block__contents { grid-area: contents; display: flex; width: 100%; } .eufemia-scope--10_104_0 .dnb-forms-field-block__contents--width-stretch { width: 100%; } .eufemia-scope--10_104_0 .dnb-forms-field-block__contents--width-custom { --field-block-content-width: calc( var(--dnb-forms-field-block-content-width) ); } .eufemia-scope--10_104_0 .dnb-forms-field-block__contents--width-small { --field-block-content-width: var(--forms-field-width--small); } .eufemia-scope--10_104_0 .dnb-forms-field-block__contents--width-medium { --field-block-content-width: var(--forms-field-width--medium); } .eufemia-scope--10_104_0 .dnb-forms-field-block__contents--width-large { --field-block-content-width: var(--forms-field-width--large); } @media screen and (min-width: 25.00625em) { .eufemia-scope--10_104_0 .dnb-forms-field-block__contents--width-custom, .eufemia-scope--10_104_0 .dnb-forms-field-block__contents--width-small, .eufemia-scope--10_104_0 .dnb-forms-field-block__contents--width-medium, .eufemia-scope--10_104_0 .dnb-forms-field-block__contents--width-large { max-width: var(--field-block-content-width, none); } } @media screen and (min-width: 40.00625em) { .eufemia-scope--10_104_0 .dnb-forms-field-block__contents--width-custom, .eufemia-scope--10_104_0 .dnb-forms-field-block__contents--width-small, .eufemia-scope--10_104_0 .dnb-forms-field-block__contents--width-medium, .eufemia-scope--10_104_0 .dnb-forms-field-block__contents--width-large { width: var(--field-block-content-width, -webkit-max-content); width: var(--field-block-content-width, max-content); } } .eufemia-scope--10_104_0 .dnb-forms-field-block__composition--vertical .dnb-forms-field-block__contents { display: flex; flex-flow: column; row-gap: var(--spacing-x-small); } .eufemia-scope--10_104_0 .dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents { display: flex; flex-flow: row; column-gap: var(--spacing-small); flex-wrap: wrap; row-gap: var(--spacing-small); } .eufemia-scope--10_104_0 .dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents > .dnb-forms-field-block--width-stretch { flex: 1; } @media screen and (min-width: 25.00625em) { .eufemia-scope--10_104_0 .dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents { align-items: flex-end; } .eufemia-scope--10_104_0 .dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents[class*=align-center] { align-items: center; } } @media screen and (max-width: 25em) { .eufemia-scope--10_104_0 .dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents { row-gap: var(--spacing-x-small); flex-flow: column; } } @media screen and (max-width: 25em) { .eufemia-scope--10_104_0 .dnb-forms-field-block__composition > .dnb-forms-field-block__grid > .dnb-forms-submit-indicator { display: none; } } @media screen and (min-width: 25.00625em) { .eufemia-scope--10_104_0 .dnb-forms-field-block__composition > .dnb-forms-field-block__grid > .dnb-forms-field-block__contents .dnb-forms-submit-indicator { display: none; } } /* * Utilities */ .eufemia-scope--10_104_0 .dnb-forms-button-row { display: flex; flex-flow: row; flex-wrap: wrap; gap: var(--spacing-small); } .eufemia-scope--10_104_0 .dnb-card + .dnb-forms-button-row:not([class*=space__top]), .eufemia-scope--10_104_0 .dnb-card + .dnb-button--primary:not([class*=space__top]) { margin-top: var(--spacing-small); } .eufemia-scope--10_104_0 .dnb-card + .dnb-forms-button-row:not([class*=space__top]) .dnb-button[class*=space__top], .eufemia-scope--10_104_0 .dnb-card + .dnb-button--primary:not([class*=space__top]) .dnb-button[class*=space__top] { margin-top: 0; } @media screen and (min-width: 40.00625em) { .eufemia-scope--10_104_0 .dnb-card:not([style*="--outset"]) + .dnb-forms-button-row:not([class*=space__left]), .eufemia-scope--10_104_0 .dnb-card:not([style*="--outset"]) + .dnb-button--primary:not([class*=space__left]) { margin-left: var(--spacing-medium); } } /* * Utilities */ .eufemia-scope--10_104_0 .dnb-spacing .dnb-forms-main-heading.dnb-h--large:not([class*=space__]) { margin: 0; } .eufemia-scope--10_104_0 .dnb-forms-main-heading + .dnb-help-button__content .dnb-section { margin-top: 1rem; } .eufemia-scope--10_104_0 .dnb-forms-section-block { --block-outline-color: var(--color-black-8); --block-outline-width: var(--card-outline-width); } .eufemia-scope--10_104_0 .dnb-forms-section-block--error:has(.dnb-form-status--error):not(.dnb-forms-section-block--variant-basic) { --block-outline-color: var(--color-fire-red); --block-outline-width: 0.0625rem; } .eufemia-scope--10_104_0 .dnb-forms-section-block:not(.dnb-height-animation--hidden) { display: flex; flex-direction: column; } .eufemia-scope--10_104_0 .dnb-forms-section-block__inner { flex: 1; outline: none; transition: transform 400ms var(--easing-default) 50ms, box-shadow 0.8s var(--easing-default); transform: translateY(-2.5rem); } .eufemia-scope--10_104_0 .dnb-forms-section-block__inner .dnb-dl .dnb-dd { margin-bottom: 0; } .eufemia-scope--10_104_0 .dnb-forms-section-block--variant-basic { --border-color: transparent; --block-outline-color: transparent; } .eufemia-scope--10_104_0 .dnb-forms-section-block--variant-filled .dnb-forms-section-block__inner { --space: var(--spacing-small); } .eufemia-scope--10_104_0 .dnb-forms-section-block--no-animation .dnb-forms-section-block__inner { transform: translateY(0); } .eufemia-scope--10_104_0 .dnb-forms-section-block.dnb-height-animation--is-visible .dnb-forms-section-block__inner { transform: translateY(-0.5rem); } .eufemia-scope--10_104_0 .dnb-forms-section-block.dnb-height-animation--parallax .dnb-forms-section-block__inner { transform: translateY(0); } .eufemia-scope--10_104_0 .dnb-forms-section-block .dnb-card, .eufemia-scope--10_104_0 .dnb-card .dnb-forms-section-block .dnb-card { --card-outline-color: var(--block-outline-color); --card-outline-width: var(--block-outline-width); } .eufemia-scope--10_104_0 .dnb-forms-section-block .dnb-card--filled.dnb-section, .eufemia-scope--10_104_0 .dnb-card .dnb-forms-section-block .dnb-card--filled.dnb-section { --background-color: var(--color-lavender); } /* * Utilities */ .eufemia-scope--10_104_0 .dnb-spacing .dnb-forms-sub-heading.dnb-h--medium:not([class*=space__]) { margin: 0; } .eufemia-scope--10_104_0 .dnb-forms-sub-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__bottom]) { margin-bottom: var(--spacing-small); } .eufemia-scope--10_104_0 .dnb-forms-sub-heading + .dnb-help-button__content .dnb-section { margin-top: 1rem; } /* * Utilities */ .eufemia-scope--10_104_0 .dnb-forms-submit-indicator { --padding-left: 0.5em; --font-animation: font-size var(--font-animation-duration, 400ms) var(--easing-default); --opacity-animation: opacity var(--opacity-animation-duration, 0ms) var(--easing-default) var(--opacity-animation-delay, 0ms); } .eufemia-scope--10_104_0 .dnb-forms-submit-indicator:has(.dnb-forms-submit-indicator__label) { --font-animation-duration: 400ms; --opacity-animation-duration: 400ms; --opacity-animation-delay: 250ms; } .eufemia-scope--10_104_0 .dnb-forms-submit-indicator { display: inline; } .eufemia-scope--10_104_0 .dnb-forms-submit-indicator__label { padding: 0.5em 0; } .eufemia-scope--10_104_0 .dnb-forms-submit-indicator__content { align-items: center; font-size: 0; opacity: 0; line-height: 1em; will-change: font-size opacity; transition: var(--font-animation), var(--opacity-animation); } .eufemia-scope--10_104_0 .dnb-forms-submit-indicator__content b { padding-left: 0.125em; color: var(--dots-color, currentColor); } .eufemia-scope--10_104_0 .dnb-forms-submit-indicator__content b:nth-of-type(1) { padding-left: var(--padding-left); animation-delay: 50ms; } .eufemia-scope--10_104_0 .dnb-forms-submit-indicator__content b:nth-of-type(2) { animation-delay: 200ms; } .eufemia-scope--10_104_0 .dnb-forms-submit-indicator__content b:nth-of-type(3) { animation-delay: 400ms; } .eufemia-scope--10_104_0 .dnb-forms-submit-indicator__content b { opacity: 0.2; animation-name: submit-indicator-dot; animation-iteration-count: infinite; animation-duration: 1.3s; animation-delay: 200ms; } html[data-visual-test] .eufemia-scope--10_104_0 .dnb-forms-submit-indicator__content b { animation: none; } .eufemia-scope--10_104_0 .dnb-forms-submit-indicator__content b { font-weight: var(--font-weight-bold); } .eufemia-scope--10_104_0 .dnb-forms-submit-indicator--state-pending .dnb-forms-submit-indicator__content { font-size: 1em; opacity: 1; } .eufemia-scope--10_104_0 .dnb-forms-submit-indicator--inline-wrap .dnb-forms-submit-indicator__content { display: flex; --padding-left: 0.25em; } .eufemia-scope--10_104_0 .dnb-button .dnb-forms-submit-indicator__content { cursor: inherit; } @keyframes submit-indicator-dot { 0% { opacity: 0.2; } 15% { opacity: 1; } 50% { opacity: 1; } 60% { opacity: 0.3; } 100% { opacity: 0.2; } } @keyframes submit-indicator-success { 0% { opacity: 0.2; font-size: 1em; } 20% { opacity: 1; font-size: 1em; } 80% { opacity: 1; } 85% { opacity: 0.3; font-size: 1em; } 90% { opacity: 0; } 100% { opacity: 0; font-size: 0; } } .eufemia-scope--10_104_0 .dnb-forms-iterate__element { outline: none; } .eufemia-scope--10_104_0 .dnb-forms-iterate:has(.dnb-forms-iterate__element.dnb-space__top--small) { --block-gap: var(--spacing-small); } .eufemia-scope--10_104_0 .dnb-forms-iterate:has(.dnb-forms-iterate__element.dnb-space__top--medium) { --block-gap: var(--spacing-medium); } .eufemia-scope--10_104_0 .dnb-forms-iterate:has(.dnb-forms-iterate__element.dnb-space__top--large) { --block-gap: var(--spacing-large); } .eufemia-scope--10_104_0 .dnb-forms-iterate > .dnb-forms-iterate__element:has(> .dnb-forms-section-block) { margin-top: 0; } .eufemia-scope--10_104_0 .dnb-forms-iterate > .dnb-forms-iterate__element:has(> .dnb-forms-section-block) .dnb-forms-section-block__inner { margin-bottom: var(--block-gap, var(--spacing-large)); } .eufemia-scope--10_104_0 .dnb-forms-iterate > .dnb-forms-iterate__element:has(> .dnb-forms-section-block):has(~ .dnb-forms-iterate__element) ~ .dnb-hr { margin-top: 0; margin-bottom: var(--block-gap); } .eufemia-scope--10_104_0 .dnb-forms-value-upload__item .dnb-progress-indicator { display: inline-flex; vertical-align: middle; } /* * Utilities */ .eufemia-scope--10_104_0 { --forms-value-width--small: 30ch; --forms-value-width--medium: 40ch; --forms-value-width--large: var(--prose-max-width); --forms-value-label-max-width--large: var(--prose-max-width); } .eufemia-scope--10_104_0 .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) .dnb-dt, .eufemia-scope--10_104_0 .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) > .dnb-dd > .dnb-dl, .eufemia-scope--10_104_0 .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not([class*=dnb-space]) > .dnb-dd > .dnb-dl { margin: 0; } .eufemia-scope--10_104_0 .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) .dnb-dt:empty, .eufemia-scope--10_104_0 .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) .dnb-dd:empty { display: none; } .eufemia-scope--10_104_0 .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not(.dnb-dl__layout--grid) > .dnb-dd { margin-bottom: var(--spacing-medium); transition: margin-bottom 300ms var(--easing-default); } .eufemia-scope--10_104_0 .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not(.dnb-dl__layout--grid) > .dnb-dd:last-of-type, .eufemia-scope--10_104_0 .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not(.dnb-dl__layout--grid) > .dnb-dd:has(~ .dnb-dt:empty ~ .dnb-dd:empty) { margin-bottom: 0; } .eufemia-scope--10_104_0 .dnb-forms-value-block { display: block; font-size: var(--font-size-basis); } .eufemia-scope--10_104_0 .dnb-forms-value-block:not(.dnb-forms-value-block__composition--horizontal) .dnb-forms-value-block__content { display: block; } .eufemia-scope--10_104_0 .dnb-forms-value-block--inline:not([class*=__composition]) { display: inline-block; font-size: inherit; } .eufemia-scope--10_104_0 .dnb-forms-value-block__label, .eufemia-scope--10_104_0 .dnb-forms-value-block__label strong { font-weight: var(--font-weight-medium); } .eufemia-scope--10_104_0 .dnb-forms-value-block__label { max-width: var(--forms-value-label-max-width--large); } .eufemia-scope--10_104_0 .dnb-forms-value-block__label .dnb-help-button__word-joiner { margin-left: 0.45em; white-space: nowrap; } .eufemia-scope--10_104_0 .dnb-forms-value-block__label .dnb-help-button__word-joiner::before { content: "⁠"; } .eufemia-scope--10_104_0 .dnb-forms-value-block__label:empty { margin-bottom: 0; } .eufemia-scope--10_104_0 .dnb-forms-value-block__help { display: flex; flex-flow: column; } .eufemia-scope--10_104_0 .dnb-card .dnb-forms-value-block__help { flex-grow: 1; } .eufemia-scope--10_104_0 .dnb-forms-value-block__help .dnb-section { margin-bottom: 0.5rem; } .eufemia-scope--10_104_0 .dnb-forms-value-block__help .dnb-section > .dnb-p--lead { margin-bottom: 0.5rem; } .eufemia-scope--10_104_0 .dnb-forms-value-block__placeholder { color: var(--color-black-80); } .eufemia-scope--10_104_0 .dnb-forms-value-block__content--max-width-stretch { width: 100%; } @media screen and (min-width: 25.00625em) { .eufemia-scope--10_104_0 .dnb-forms-value-block__content--max-width-small { max-width: var(--forms-value-width--small); } .eufemia-scope--10_104_0 .dnb-forms-value-block__content--max-width-medium { max-width: var(--forms-value-width--medium); } .eufemia-scope--10_104_0 .dnb-forms-value-block__content--max-width-large { max-width: var(--forms-value-width--large); } } .eufemia-scope--10_104_0 .dnb-forms-value-block span.dnb-height-animation { display: flex; } .eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content { display: flex; flex-flow: row; flex-wrap: wrap; row-gap: var(--row-gap, var(--spacing-medium)); column-gap: var(--column-gap, 0); } .eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-none { --column-gap: 0; } .eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-xx-small { --column-gap: var(--spacing-xx-small); } .eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-x-small { --column-gap: var(--spacing-x-small); } .eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-small { --column-gap: var(--spacing-small); } .eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-medium { --column-gap: var(--spacing-medium); } .eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-large { --column-gap: var(--spacing-large); } @media screen and (min-width: 25.00625em) { .eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content { align-items: flex-start; } } @media screen and (max-width: 25em) { .eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not(:has(.dnb-forms-value-block__label)) { --row-gap: var(--spacing-x-small); flex-flow: row wrap; } .eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content { flex-flow: column; } } .eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content { /* stylelint-disable */ } .eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content > .dnb-dl, .eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not([class*=dnb-space]) > .dnb-dl { margin: 0; } .eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content > .dnb-dl > .dnb-dd, .eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not([class*=dnb-space]) > .dnb-dl > .dnb-dd { margin-bottom: 0; } .eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content .dnb-dt:empty ~ .dnb-dd { margin-top: 0; } .eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content { /* stylelint-enable */ } .eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block { display: flex; } .eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__label:not(.dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__label__content) { margin-right: 0.5rem; } .eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block:not(.dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__label__content):has(> .dnb-forms-value-block__label:not(.dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content)):has(.dnb-forms-value-block__content) { flex-direction: row-reverse; } .eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block:not(.dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__label__content):has(> .dnb-forms-value-block__label:not(.dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content)):has(.dnb-forms-value-block__content) > .dnb-forms-value-block__label { margin-left: 0.5rem; } .eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content { /* stylelint-disable */ } .eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content > .dnb-dl .dnb-forms-value-block__help .dnb-section, .eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not([class*=dnb-space]) > .dnb-dl .dnb-forms-value-block__help .dnb-section { margin-top: 0.5rem; } .eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content > .dnb-dl > .dnb-dt, .eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not([class*=dnb-space]) > .dnb-dl > .dnb-dt { display: inline; } .eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content > .dnb-dl > .dnb-dd, .eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not([class*=dnb-space]) > .dnb-dl > .dnb-dd { width: 100%; } .eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content { /* stylelint-enable */ } .eufemia-scope--10_104_0 .dnb-forms-value-block__help--next-line { display: flex; flex-basis: 100%; } /* * Utilities */ .eufemia-scope--10_104_0 .dnb-forms-wizard-layout { display: flex; flex-flow: column wrap; justify-content: stretch; align-items: stretch; column-gap: var(--spacing-x-large); } .eufemia-scope--10_104_0 .dnb-forms-wizard-layout__indicator { flex: 0; margin-bottom: 2rem; } .eufemia-scope--10_104_0 .dnb-forms-wizard-layout__contents { flex: 1; } .eufemia-scope--10_104_0 .dnb-forms-wizard-layout__contents .dnb-forms-step { outline: none; } .eufemia-scope--10_104_0 .dnb-forms-wizard-layout__contents .dnb-forms-step > .appear-fx, .eufemia-scope--10_104_0 .dnb-forms-wizard-layout__contents .dnb-forms-button-row > .appear-fx { --appear-opacity: 0; --appear-offset: -0.25rem; opacity: var(--appear-opacity); transform: translate3d(var(--appear-offset), 0, 0); animation: appear 600ms var(--easing-default) forwards; animation-delay: calc(var(--element-index, 0) * 30ms); } @keyframes appear { 0% { opacity: var(--appear-opacity); transform: translate3d(var(--appear-offset), 0, 0); } 80% { opacity: 1; } 100% { opacity: 1; transform: translate3d(0, 0, 0); } } @media screen and (max-width: 60em) { .eufemia-scope--10_104_0 .dnb-forms-wizard-layout { flex-direction: column; justify-content: stretch; align-items: stretch; } .eufemia-scope--10_104_0 .dnb-forms-wizard-layout__contents { flex-basis: auto; } } .eufemia-scope--10_104_0 .dnb-forms-test-element { display: flex; width: 100%; border: 1px dashed #808080; border-radius: 0.5rem; color: #909090; padding: 0.5rem 1rem; }