@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
171 lines (169 loc) • 9.15 kB
CSS
@charset "UTF-8";
/*
* 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%;
}