oui-kit/lib/basic/oui-form-item.styl

🎯 *UI toolkit with a French touch* 🇫🇷

@require "../../stylus/index.styl";

.oui-form-item {
  margin-top: 8;
  margin-bottom: 16;

  label {
    display: block;
  }

  &-title {
    display: block;
    font-size: 13;
    font-weight: 500;
    padding-left: 0;
    margin-bottom: 3;
    color: var(--s2-fg);

    &._disabled {
      color: var(--s2-fg);
      cursor: not-allowed;
    }
  }

  &-description {
    display: block;
    font-size: 13;
    font-weight: 400;
    margin-top: 4;
    color: var(--t3-fg);
    padding-left: 0;

    &._disabled {
      cursor: not-allowed;
    }
  }

  .oui-select {
    min-width: min(100%, 12ch);
  }

  .oui-input-string, .oui-textarea, .oui-password {
    width: 100%;
  }
}

/* .oui-input-string, .oui-select, .oui-password {
  height: fit-content;
} */
.oui-select-container {
  position: relative;
  display: inline-flex;

  .oui-select-invisible {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    // width: 100%;
    height: 100%;
    opacity: 0;
  }
}