kitchn/next-recipes/components/Forms/forms.module.css

.input label {
  @apply font-display font-bold;
}

.input+.input {
  @apply mt-4;
}

.checkbox+.checkbox,
.radio+.radio {
  @apply mt-2;
}

.textInput {
  @apply bg-grey-50 text-sm px-2 w-full text-black tracking-wide;
  min-height: 2.25rem;
}

.textInput::placeholder {
  @apply italic;
}

.textInput:focus {
  @apply outline-default shadow-strong-primary;
}

textarea.textInput {
  @apply pt-2;
}

.input.checkbox label,
.input.radio label {
  @apply flex items-center;
}

.checkbox input,
.radio input {
  @apply appearance-none h-6 w-6 border-black border-2 mr-2;
}

.radio input {
  @apply rounded-full;
}

.checkbox input:checked,
.radio input:checked {
  @apply bg-primary;
}

.checkbox input:focus {
  @apply outline-default-small;
}

.checkbox input:focus+span,
.radio input:focus+span {
  text-shadow: 1px 1px rgb(250, 204, 21);
}

.radio input:focus {
  @apply outline-none border-3;
}

.chipGroup {
  @apply flex flex-wrap -mx-2;
}

.chipGroup .chip {
  @apply m-2;
}

.chip input {
  @apply appearance-none;
}

.chip label {
  @apply text-xs uppercase font-semibold tracking-widest px-2 py-1.5 cursor-pointer select-none;
}

.chip input:focus:not(:checked)+label {
  @apply outline-black;
}

.chip.defaultColor label {
  @apply bg-grey-100;
}

.chip.primaryColor label {
  @apply bg-primary-100;
}

.chip.secondaryColor label {
  @apply bg-secondary-100;
}

.chip.defaultColor:hover label {
  @apply bg-grey-200;
}

.chip.primaryColor:hover label {
  @apply bg-primary-200;
}

.chip.secondaryColor:hover label {
  @apply bg-secondary-200;
}

.chip.defaultColor input:checked+label {
  @apply bg-grey-300;
}

.chip.primaryColor input:checked+label {
  @apply bg-primary-300;
}

.chip.secondaryColor input:checked+label {
  @apply bg-secondary-300 text-white;
}