Form Fields & Inputs

form

scss

form {
  [data-typeset] > & {
    margin-block: var(--gutter);
  }
}

textarea

scss

textarea {
  min-height: calc(6em + 4vw);
  resize: vertical;
}

select

scss

select {
  font: inherit;
  font-size: var(--xsmall);
  width: 100%;
}

fieldset

scss

fieldset {
  border-color: var(--border-fade);
  margin: 0 0 var(--newline);
  padding: var(--shim);
}

legend

scss

legend {
  font-size: var(--xsmall);
  padding: 0 var(--shim);
}

[data-field], [data-fieldset]

scss

[data-field],
[data-fieldset] {
  display: var(--ccs-custom-display, block);
  margin-bottom: var(--shim);
}

Form fields (using the label for markup) are set to block display, with a margin.

[data-label]

scss

[data-label] {
  @include config.font-family('alt');

  display: block;
}

Form label text uses a span inside the wrapper label and is displayed above the input.

[data-input*='text']

scss

[data-input*='text'] {
  --focus-ring: transparent;

  background-color: var(--bg-full);
  border: thin solid var(--input-border, var(--border));
  border-radius: 0;
  color: var(--text);
  display: block;
  font: inherit;
  font-size: var(--xsmall);
  padding: var(--half-shim);
  width: 100%;

  &:focus {
    border-color: var(--input-border-focus, var(--accent));
  }
}

Varioius input “types” all rely on the same basic text-input style.

.form-actions

scss

.form-actions {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--newline);
  margin-top: var(--newline);

  p {
    margin: unset;
  }
}

A wrapper element to provide layout and spacing of the actions at the end of a form.

[data-honey]

scss

[data-honey] {
  @include config.is-hidden;
}

Apply to honey-pot SPAM-protection fields…