CSS reference - Bifrost

Grouped fields styling

`.bf-fieldgroup`

<div class="bf-fieldgroup">
  <div class="bf-input-container">
    <input
      type="text"
      class="bf-input"
      aria-label="email name"
      placeholder="email"
    />
  </div>
  <div class="bf-input-container">
    <input
      type="text"
      class="bf-input"
      aria-label="email domain"
      placeholder="@example.com"
    />
  </div>
</div>
<div class="bf-fieldgroup">
  <div class="bf-input-container">
    <input
      type="text"
      class="bf-input"
      aria-label="email name"
      placeholder="email"
    />
  </div>
  <div class="bf-input-container">
    <input
      type="text"
      class="bf-input"
      aria-label="email domain"
      placeholder="@example.com"
    />
  </div>
</div>

`.bf-fieldgroup-alert`

Gives a red underline for the whole group

<div class="bf-fieldgroup bf-fieldgroup-alert">
  <div class="bf-input-container">
    <input
      type="text"
      class="bf-input"
      aria-label="email name"
      placeholder="email"
    />
  </div>
  <div class="bf-input-container">
    <input
      type="text"
      class="bf-input"
      aria-label="email domain"
      placeholder="@example.com"
    />
  </div>
</div>
<div class="bf-fieldgroup bf-fieldgroup-alert">
  <div class="bf-input-container">
    <input
      type="text"
      class="bf-input"
      aria-label="email name"
      placeholder="email"
    />
  </div>
  <div class="bf-input-container">
    <input
      type="text"
      class="bf-input"
      aria-label="email domain"
      placeholder="@example.com"
    />
  </div>
</div>

Labelling a fieldgroup

Since fieldgroup deals with multiple form fields, each of which should have their own label, we can mark up the grouped fields as a <fieldset> with a <legend> styled as a .bf-label.

<fieldset class="bf-fieldset">
  <legend class="bf-label">Label for grouped fields</legend>
  <div class="bf-fieldgroup">
    <div class="bf-input-container">
      <input
        type="text"
        class="bf-input"
        aria-label="email name"
        placeholder="email"
      />
    </div>
    <div class="bf-input-container">
      <input
        type="text"
        class="bf-input"
        aria-label="email domain"
        placeholder="@example.com"
      />
    </div>
  </div>
</fieldset>
<fieldset class="bf-fieldset">
  <legend class="bf-label">Label for grouped fields</legend>
  <div class="bf-fieldgroup">
    <div class="bf-input-container">
      <input
        type="text"
        class="bf-input"
        aria-label="email name"
        placeholder="email"
      />
    </div>
    <div class="bf-input-container">
      <input
        type="text"
        class="bf-input"
        aria-label="email domain"
        placeholder="@example.com"
      />
    </div>
  </div>
</fieldset>

Label for grouped fields