@harvest-profit/npk/src/BaseInput/BaseInput.module.css

NPK UI Design System

.BaseInputPlaceholder {
  height: var(--control-size);

  &[data-size="sm"] {
    height: var(--control-small-size);
  }
  
  &[data-size="lg"] {
    height: var(--control-large-size);
  }
}

.Label {
  display: flex;
  flex-direction: column;
  gap: var(--control-gap);

  [data-component="label-contents"] {
    display: flex;
    flex-direction: column;
    font-size: var(--control-label-font-size);
    font-weight: var(--control-label-weight);

    h1,h2,h3,h4,h5,h6 {
      margin: 0;
      font-size: var(--control-font-size);
      font-weight: var(--control-label-weight);
    }

    p {
      font-weight: normal;
      font-size: calc(var(--control-label-font-size) - 1px);
      line-height: var(--control-label-font-size);
      margin-top: calc(var(--control-gap) / 2);
      margin-bottom: var(--control-gap);
    }
  }

  [data-component="label-description"] {
    margin-top: calc(var(--control-gap) / 2 * -1);
    margin-bottom: var(--control-gap);
    font-size: calc(var(--control-label-font-size) - 1px);
    line-height: var(--control-label-font-size);
  }

  [data-component="label-info"] {
    margin-top: calc(var(--control-gap) / 2 * -1);
    margin-bottom: var(--control-gap);
    color: var(--color-fg-muted);
    font-size: calc(var(--control-label-font-size) - 2px);
    line-height: var(--control-label-font-size);

    &[data-error="true"] {
      color: var(--color-fg-danger);
    }
  }
}

.BaseInput {
  border: 1px solid var(--control-border-color);
  background-color: var(--control-bg-color);
  color: var(--control-fg-color);
  height: var(--input-height, var(--control-size));
  border-radius: var(--control-radius);
  font-size: var(--control-font-size);
  padding: 0 var(--input-padding, var(--control-padding));
  align-items: center;
  align-content: center;
  display: grid;
  grid-template-areas: "leadingVisual input trailingVisual";
  grid-template-columns: min-content minmax(0px, auto) min-content;
  box-shadow: inset 0px 1px 0px 0px var(--control-inset-shadow-color);
  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
  transition-property: color,background-color,box-shadow,border-color;

  width: fit-content;
  &[data-block="true"] {
    width: 100%;
  }

  &[data-textarea="true"] {
    height: auto;
    padding-top: calc(var(--input-padding, var(--control-padding)) / 2);
    padding-bottom: calc(var(--input-padding, var(--control-padding)) / 2);
    min-height: var(--input-height, var(--control-size));
  }

  &:not(.SegmentedInput) >[data-component="contents"] {
    gap: var(--control-gap)
  }

  &>[data-component="contents"] {
    grid-row: input;
    grid-column: input;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-weight: normal;

    .BaseInput:not(.SegmentedInput),
    .SegmentedInput [data-component="input-segment"],
    &>[data-component="input-segment"] {
      padding: 0 2px;
      font-variant-numeric: tabular-nums;
      transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
      transition-property: color,background-color,box-shadow,border-color;
  
      &[aria-valuetext="Empty"],
      &[data-placeholder="true"],
      input::placeholder {
        color: var(--control-fg-color--placeholder);
        opacity: 1;
      }
  
      &:focus-within {
        background: var(--control-bg-color--active);
        outline: none;
        border-radius: var(--control-segment-radius);

        &[aria-valuetext="Empty"],
        &[data-placeholder="true"] {
          color: var(--control-fg-color--placeholder--active);
        }

        input::placeholder {
          color: var(--control-fg-color--placeholder--active);
          opacity: 1;
        }
      }
    }

    & > [data-component="button"] {
      margin-left: calc(var(--control-padding) * -1);
      margin-right: calc(var(--control-padding) * -1);
      margin-top: -1px;
    }
  }

  &>[data-component="leadingVisual"] {
    grid-row: leadingVisual;
    grid-column: leadingVisual;
    margin-right: var(--control-gap);

    [data-component="button"] {
      margin-left: calc(var(--control-padding) * -1);
      margin-top: -1px;
    }
  }

  &>[data-component="trailingVisual"] {
    grid-row: trailingVisual;
    grid-column: trailingVisual;
    margin-left: var(--control-gap);

    [data-component="button"] {
      margin-right: calc(var(--control-padding) * -1);
      margin-top: -1px;
    }
  }

  [data-component="leadingVisual"],
  [data-component="trailingVisual"] {
    color: var(--control-icon-color);

    &[data-visual="visual"] {
      line-height: 0.9;

      svg {
        display: inline-block;
        vertical-align: text-bottom;
        overflow: visible;
      }
    }
  }

  /* Variants */
  &[data-variant="plain"] {
    border: none;
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    height: auto;
  }

  &[data-variant="invisible"] {
    background-color: transparent;
  }

  /* Alignments */
  &[data-align="center"] {
    justify-content: center;

    &>[data-component="contents"] {
      text-align: center;
    }
  }

  &[data-align="end"] {
    justify-content: flex-end;
    &>[data-component="contents"] {
      text-align: right;
    }
  }

  /* Sizes */
  &[data-size="sm"] {
    --input-height: var(--control-small-size);
    --input-padding: var(--control-small-padding);
    font-size: var(--control-small-font-size);
  }
  
  &[data-size="lg"] {
    --input-height: var(--control-large-size);
  }


  /* States */
  &[aria-disabled="true"] {
    color: var(--control-fg-color--disabled);
    background-color: var(--control-bg-color--disabled);
    border-color: var(--control-border-color--disabled);
    cursor: not-allowed;
  }

  &:focus-within:not([data-variant="plain"]) {
    border-color: var(--control-focus-color);
    outline: 0.125rem solid var(--control-focus-color);
    outline-offset: -1px;
    background-color: var(--control-focus-bg-color);
  }
}