@icoms-detection/ui/src/stitches/input.ts

This is the OFFICIAL UI library created by Icoms Detection to design their apps.

import { styled } from "../stitches.config";

export const StyledInputContainer = styled("div", {
  position: "relative",
  width: "100%",
  minWidth: "100px",
  maxWidth: "220px",
  display: "flex",
  flex: "1 1 0%",
  alignItems: "center",
});

export const StyledInput = styled("input", {
  display: "block",
  width: "100%",
  padding: "0.5rem 2.5rem 0.5rem 0.5rem",
  textAlign: "right",
  text: "sm",
  fontFamily: "$content",
  border: "1px solid $colors$neutral_200",
  borderRadius: "0.375rem",
  "&:focus": {
    outline: "none",
    border: "1px solid $colors$primary_500",
  },
  "&::placeholder": {
    color: "$neutral_300",
  },
  "&[type='file']": {
    display: "none",
  },
});

export const StyledSpan = styled("span", {
  fontFamily: "$content",
  color: "$neutral_500",
  text: "sm",
});

export const StyledLabel = styled("label", {
  fontFamily: "$content",
  text: "sm",
  border: "1px solid $colors$neutral_200",
  padding: "0.5rem 2rem",
  color: "$neutral_500",
  borderRadius: "5px",
  width: "100%",
  overflow: "scroll",
  textAlign: "center",
  "&:hover": {
    color: "$primary_500",
    backgroundColor: "$primary_50",
    border: "1px solid $colors$primary_500",
  },
});