@dnb/eufemia/extensions/forms/Form/Section/style/dnb-form-section.css

DNB Eufemia Design System UI Library

.dnb-forms-section-block {
  --block-outline-color: var(--color-black-8);
  --block-outline-width: var(--card-outline-width);
}
.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;
}
.dnb-forms-section-block:not(.dnb-height-animation--hidden) {
  display: flex;
  flex-direction: column;
}
.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);
}
.dnb-forms-section-block__inner .dnb-dl .dnb-dd {
  margin-bottom: 0;
}
.dnb-forms-section-block--variant-basic {
  --border-color: transparent;
  --block-outline-color: transparent;
}
.dnb-forms-section-block--variant-filled .dnb-forms-section-block__inner {
  --space: var(--spacing-small);
}
.dnb-forms-section-block--no-animation .dnb-forms-section-block__inner {
  transform: translateY(0);
}
.dnb-forms-section-block.dnb-height-animation--is-visible .dnb-forms-section-block__inner {
  transform: translateY(-0.5rem);
}
.dnb-forms-section-block.dnb-height-animation--parallax .dnb-forms-section-block__inner {
  transform: translateY(0);
}
.dnb-forms-section-block .dnb-card, .dnb-card .dnb-forms-section-block .dnb-card {
  --card-outline-color: var(--block-outline-color);
  --card-outline-width: var(--block-outline-width);
}
.dnb-forms-section-block .dnb-card--filled.dnb-section, .dnb-card .dnb-forms-section-block .dnb-card--filled.dnb-section {
  --background-color: var(--color-lavender);
}