@dnb/eufemia/cjs/extensions/forms/FieldBlock/style/dnb-field-block.css

DNB Eufemia Design System UI Library

@charset "UTF-8";
/*
 * Utilities
 */
:root {
  --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);
}

fieldset.dnb-forms-field-block:not([class*=space__top]) {
  margin-top: 0;
}
fieldset.dnb-forms-field-block:not([class*=space__bottom]) {
  margin-bottom: 0;
}
fieldset.dnb-forms-field-block:not([class*=space__left]) {
  margin-left: 0;
}
fieldset.dnb-forms-field-block:not([class*=space__right]) {
  margin-right: 0;
}
fieldset.dnb-forms-field-block {
  padding: 0;
  border: none;
}

.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";
}
.dnb-forms-field-block {
  --label-margin: 0.25rem;
}
.dnb-forms-field-block--label-height-small {
  --label-margin: 0;
}
.dnb-forms-field-block--label-height-medium {
  --label-margin: 0.5rem;
}
.dnb-forms-field-block--label-height-large {
  --label-margin: 0.7rem;
}
.dnb-forms-field-block--width-stretch {
  flex-grow: 1;
}
.dnb-forms-field-block--width-stretch label.dnb-form-label {
  max-width: none;
}
@media screen and (min-width: 25.00625em) {
  .dnb-forms-field-block--width-custom {
    width: calc(var(--dnb-forms-field-block-width));
  }
  .dnb-forms-field-block--width-small {
    width: var(--forms-field-width--small);
  }
  .dnb-forms-field-block--width-medium {
    width: var(--forms-field-width--medium);
  }
  .dnb-forms-field-block--width-large {
    width: var(--forms-field-width--large);
  }
}
.dnb-forms-field-block:not([class*="--content-width"]) {
  --max-width: var(--forms-field-label-max-width--large);
}
.dnb-forms-field-block__label, .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;
}
.dnb-forms-field-block__label__description, .dnb-forms-field-block__label.dnb-form-label__description {
  vertical-align: top;
}
.dnb-forms-field-block__label__content:has(+ .dnb-help-button), .dnb-forms-field-block__label__description:has(+ .dnb-help-button), .dnb-forms-field-block__label.dnb-form-label__content:has(+ .dnb-help-button), .dnb-forms-field-block__label.dnb-form-label__description:has(+ .dnb-help-button) {
  margin-right: 0.5rem;
}
.dnb-forms-field-block__label:has(.dnb-forms-field-block__label__description, .dnb-forms-field-block__label.dnb-form-label__description) .dnb-help-button, .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, .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, .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, .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, .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;
}
.dnb-forms-field-block__label .dnb-help-button__word-joiner, .dnb-forms-field-block__label.dnb-form-label .dnb-help-button__word-joiner {
  margin-left: 0.45em;
  white-space: nowrap;
}
.dnb-forms-field-block__label .dnb-help-button__word-joiner::before, .dnb-forms-field-block__label.dnb-form-label .dnb-help-button__word-joiner::before {
  content: "⁠";
}
.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical {
  flex-wrap: wrap;
}
.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical > .dnb-form-label {
  margin-bottom: 0.5rem;
}
.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__label {
  margin-right: 1rem;
}
.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) {
  .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) {
  .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";
  }
  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-help-button__content {
    --help-button-indent-width: 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;
  }
  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__contents {
    align-self: end;
  }
}
.dnb-forms-field-block__indicator {
  grid-area: indicator;
  position: relative;
}
.dnb-forms-field-block__indicator .dnb-forms-submit-indicator__content {
  position: absolute;
}
.dnb-forms-field-block__help {
  grid-area: help;
  display: flex;
  flex-flow: column;
}
.dnb-forms-field-block__help .dnb-section {
  margin-bottom: 1rem;
}
.dnb-forms-field-block__help .dnb-section > .dnb-p--lead {
  margin-bottom: 0.5rem;
}
@media screen and (min-width: 40.00625em) {
  .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;
  }
}
.dnb-forms-field-block__status {
  grid-area: status;
}
.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) {
  .dnb-forms-field-block__status {
    width: 90%;
  }
}
.dnb-forms-field-block--status-position-above .dnb-forms-field-block__grid {
  grid-template-areas: "label" "help" "status" "contents" "indicator";
}
.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) {
  .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";
  }
}
.dnb-forms-field-block__contents {
  grid-area: contents;
  display: flex;
  width: 100%;
}
.dnb-forms-field-block__contents--width-stretch {
  width: 100%;
}
.dnb-forms-field-block__contents--width-custom {
  --field-block-content-width: calc(
    var(--dnb-forms-field-block-content-width)
  );
}
.dnb-forms-field-block__contents--width-small {
  --field-block-content-width: var(--forms-field-width--small);
}
.dnb-forms-field-block__contents--width-medium {
  --field-block-content-width: var(--forms-field-width--medium);
}
.dnb-forms-field-block__contents--width-large {
  --field-block-content-width: var(--forms-field-width--large);
}
@media screen and (min-width: 25.00625em) {
  .dnb-forms-field-block__contents--width-custom, .dnb-forms-field-block__contents--width-small, .dnb-forms-field-block__contents--width-medium, .dnb-forms-field-block__contents--width-large {
    max-width: var(--field-block-content-width, none);
  }
}
@media screen and (min-width: 40.00625em) {
  .dnb-forms-field-block__contents--width-custom, .dnb-forms-field-block__contents--width-small, .dnb-forms-field-block__contents--width-medium, .dnb-forms-field-block__contents--width-large {
    width: var(--field-block-content-width, -webkit-max-content);
    width: var(--field-block-content-width, max-content);
  }
}
.dnb-forms-field-block__composition--vertical .dnb-forms-field-block__contents {
  display: flex;
  flex-flow: column;
  row-gap: var(--spacing-x-small);
}
.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);
}
.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) {
  .dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents {
    align-items: flex-end;
  }
  .dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents[class*=align-center] {
    align-items: center;
  }
}
@media screen and (max-width: 25em) {
  .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) {
  .dnb-forms-field-block__composition > .dnb-forms-field-block__grid > .dnb-forms-submit-indicator {
    display: none;
  }
}
@media screen and (min-width: 25.00625em) {
  .dnb-forms-field-block__composition > .dnb-forms-field-block__grid > .dnb-forms-field-block__contents .dnb-forms-submit-indicator {
    display: none;
  }
}