oui-kit/stylus/preset/form.styl

🎯 *UI toolkit with a French touch* 🇫🇷

@require "../ui/form.styl";

oui-form-defaults() {
  input[type=text], textarea {
    oui-input-text();
  }

  textarea {
    oui-input-textarea();
  }

  textarea._textarea_grow {
    oui-input-textarea-grow();
  }

  input[type=number] {
    oui-input-number();
  }

  input[type=checkbox]:not(.oui-switch) {
    oui-checkbox();
  }

  input[type=switch], input[type=checkbox].oui-switch {
    oui-switch();
  }

  input[type=radio] {
    oui-radio();
  }

  button, input[type="button"], input[type="reset"], input[type="submit"] {
    oui-button();
  }

  select {
    oui-select();
  }

  label {
    display: block;
    user-select: none;
  }

  label:has(input:not([type=checkbox]):not([type=radio])), label:has(select), label:has(textarea) {
    input, select, textarea {
      display: block !important;
      margin-top: 4 !important;
      max-width: 100%;
    }

    input, textarea {
      width: 100%;
      min-width: 100%;
    }
  }

  /* &, form {
      use: stack-y;
      gap: 16;
  
      section {
        use: stack-x;
        gap: 6;
      }
    }
    */
}

oui-form() {
  &-button {
    oui-button();
  }

  &-input {
    oui-input-text();
  }

  &-textarea {
    oui-input-textarea();
  }

  &-textarea-grow {
    oui-input-textarea-grow();
  }

  &-number {
    oui-input-number();
  }

  &-checkbox {
    oui-checkbox();
  }

  &-switch {
    oui-switch();
  }

  &-radio {
    oui-radio();
  }

  &-select {
    oui-select();
  }
}