@dnb/eufemia/components/form-row/style/dnb-form-row.css

DNB Eufemia Design System UI Library

/*
 * FormRow component
 *
 */
/*
 * Utilities
 */
.dnb-form-row, .dnb-form-row.dnb-section {
  display: flex;
}
.dnb-form-row {
  align-items: baseline;
}
.dnb-form-row__content {
  display: inline-flex;
  flex: 1;
  width: 100%;
}
.dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-row__content {
  align-items: baseline;
}
.dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-row__content .dnb-form-label {
  white-space: nowrap;
}
.dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-row__content--wrap {
  display: block;
}
@media screen and (max-width: 40em) {
  .dnb-form-row:not(.dnb-form-row--vertical) {
    flex-direction: column;
    align-items: flex-start;
  }
  .dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-label {
    margin-bottom: 0.5rem;
  }
  .dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-row__content {
    flex-direction: column;
  }
  .dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-row__content > .dnb-form-label {
    margin-top: 1rem;
  }
}
@media screen and (min-width: 40.00625em) {
  .dnb-form-row--centered.dnb-form-row:not(.dnb-form-row--vertical) .dnb-form-row__content {
    align-items: center;
  }
}
.dnb-form-row--vertical > .dnb-form-row__label {
  margin-bottom: 0.5rem;
}
.dnb-form-row--vertical > .dnb-form-row__content, .dnb-form-row--vertical.dnb-form-row:not(.dnb-form-row--nested) {
  flex-direction: column;
}
.dnb-form-row--vertical-label {
  flex-direction: column;
}
.dnb-form-row > .dnb-form-status {
  margin: 0.5rem 0;
}
.dnb-form-row > .dnb-form-row__label--vertical {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.dnb-form-row > .dnb-form-row__label--vertical ~ .dnb-form-row__content {
  grid-column: column1-start/column1-end;
}
.dnb-form-row__label-dummy {
  margin: 0;
}
.dnb-form-row__fieldset:not([class*=space__top]), .dnb-core-style .dnb-form-row__fieldset:not([class*=space__top]) {
  margin-top: 0;
}
.dnb-form-row__fieldset:not([class*=space__bottom]), .dnb-core-style .dnb-form-row__fieldset:not([class*=space__bottom]) {
  margin-bottom: 0;
}
.dnb-form-row__fieldset:not([class*=space__left]), .dnb-core-style .dnb-form-row__fieldset:not([class*=space__left]) {
  margin-left: 0;
}
.dnb-form-row__fieldset:not([class*=space__right]), .dnb-core-style .dnb-form-row__fieldset:not([class*=space__right]) {
  margin-right: 0;
}
.dnb-form-row__fieldset, .dnb-core-style .dnb-form-row__fieldset {
  padding: 0;
  border: none;
  width: 100%;
}