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

NPK UI Design System

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

.BaseInputPlaceholder[data-size="sm"] {
    height: var(--control-small-size);
  }

.BaseInputPlaceholder[data-size="lg"] {
    height: var(--control-large-size);
  }

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

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

:is(.Label [data-component="label-contents"]) h1,:is(.Label [data-component="label-contents"]) h2,:is(.Label [data-component="label-contents"]) h3,:is(.Label [data-component="label-contents"]) h4,:is(.Label [data-component="label-contents"]) h5,:is(.Label [data-component="label-contents"]) h6 {
      margin: 0;
      font-size: var(--control-font-size);
      font-weight: var(--control-label-weight);
    }

:is(.Label [data-component="label-contents"]) 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);
    }

.Label [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);
  }

.Label [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"]:is(.Label [data-component="label-info"]) {
      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: -moz-fit-content;

  width: fit-content;
}

.BaseInput[data-block="true"] {
    width: 100%;
  }

.BaseInput[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));
  }

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

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

:is(.BaseInput > [data-component="contents"]) .BaseInput:not(.SegmentedInput),:is(.BaseInput > [data-component="contents"]) .SegmentedInput [data-component="input-segment"],:is(.BaseInput > [data-component="contents"]) > [data-component="input-segment"] {
      padding: 0 2px;
      font-feature-settings: "tnum";
      font-variant-numeric: tabular-nums;
      transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
      transition-property: color,background-color,box-shadow,border-color;
    }

:is(:is(.BaseInput > [data-component="contents"]) .BaseInput:not(.SegmentedInput),:is(.BaseInput > [data-component="contents"]) .SegmentedInput [data-component="input-segment"],:is(.BaseInput > [data-component="contents"]) > [data-component="input-segment"]) input::-moz-placeholder {
        color: var(--control-fg-color--placeholder);
        opacity: 1;
      }

[aria-valuetext="Empty"]:is(:is(.BaseInput > [data-component="contents"]) .BaseInput:not(.SegmentedInput),:is(.BaseInput > [data-component="contents"]) .SegmentedInput [data-component="input-segment"],:is(.BaseInput > [data-component="contents"]) > [data-component="input-segment"]),[data-placeholder="true"]:is(:is(.BaseInput > [data-component="contents"]) .BaseInput:not(.SegmentedInput),:is(.BaseInput > [data-component="contents"]) .SegmentedInput [data-component="input-segment"],:is(.BaseInput > [data-component="contents"]) > [data-component="input-segment"]),:is(:is(.BaseInput > [data-component="contents"]) .BaseInput:not(.SegmentedInput),:is(.BaseInput > [data-component="contents"]) .SegmentedInput [data-component="input-segment"],:is(.BaseInput > [data-component="contents"]) > [data-component="input-segment"]) input::placeholder {
        color: var(--control-fg-color--placeholder);
        opacity: 1;
      }

:is(:is(.BaseInput > [data-component="contents"]) .BaseInput:not(.SegmentedInput),:is(.BaseInput > [data-component="contents"]) .SegmentedInput [data-component="input-segment"],:is(.BaseInput > [data-component="contents"]) > [data-component="input-segment"]):focus-within {
        background: var(--control-bg-color--active);
        outline: none;
        border-radius: var(--control-segment-radius);
      }

[aria-valuetext="Empty"]:is(:is(.BaseInput > [data-component="contents"]) .BaseInput:not(.SegmentedInput),:is(.BaseInput > [data-component="contents"]) .SegmentedInput [data-component="input-segment"],:is(.BaseInput > [data-component="contents"]) > [data-component="input-segment"]):focus-within,[data-placeholder="true"]:is(:is(.BaseInput > [data-component="contents"]) .BaseInput:not(.SegmentedInput),:is(.BaseInput > [data-component="contents"]) .SegmentedInput [data-component="input-segment"],:is(.BaseInput > [data-component="contents"]) > [data-component="input-segment"]):focus-within {
          color: var(--control-fg-color--placeholder--active);
        }

:is(:is(.BaseInput > [data-component="contents"]) .BaseInput:not(.SegmentedInput),:is(.BaseInput > [data-component="contents"]) .SegmentedInput [data-component="input-segment"],:is(.BaseInput > [data-component="contents"]) > [data-component="input-segment"]):focus-within input::-moz-placeholder {
          color: var(--control-fg-color--placeholder--active);
          opacity: 1;
        }

:is(:is(.BaseInput > [data-component="contents"]) .BaseInput:not(.SegmentedInput),:is(.BaseInput > [data-component="contents"]) .SegmentedInput [data-component="input-segment"],:is(.BaseInput > [data-component="contents"]) > [data-component="input-segment"]):focus-within input::placeholder {
          color: var(--control-fg-color--placeholder--active);
          opacity: 1;
        }

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

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

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

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

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

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

[data-visual="visual"]:is(.BaseInput [data-component="leadingVisual"],.BaseInput [data-component="trailingVisual"]) {
      line-height: 0.9;
    }

[data-visual="visual"]:is(.BaseInput [data-component="leadingVisual"],.BaseInput [data-component="trailingVisual"]) svg {
        display: inline-block;
        vertical-align: text-bottom;
        overflow: visible;
      }

/* Variants */

.BaseInput[data-variant="plain"] {
    border: none;
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    height: auto;
  }

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

/* Alignments */

.BaseInput[data-align="center"] {
    justify-content: center;
  }

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

.BaseInput[data-align="end"] {
    justify-content: flex-end;
  }

.BaseInput[data-align="end"] > [data-component="contents"] {
      text-align: right;
    }

/* Sizes */

.BaseInput[data-size="sm"] {
    --input-height: var(--control-small-size);
    --input-padding: var(--control-small-padding);
    font-size: var(--control-small-font-size);
  }

.BaseInput[data-size="lg"] {
    --input-height: var(--control-large-size);
  }

/* States */

.BaseInput[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;
  }

.BaseInput: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);
  }