kwikid-components-react/shared/styles/Input.style.js

KwikID's Component Library in React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.KwikUIStyleInputSuccess = exports.KwikUIStyleInputStatus = exports.KwikUIStyleInputSize = exports.KwikUIStyleInputShape = exports.KwikUIStyleInputReset = exports.KwikUIStyleInputPrefix = exports.KwikUIStyleInputPostfix = exports.KwikUIStyleInputPlaceholder = exports.KwikUIStyleInputMessagesContainer = exports.KwikUIStyleInputLabel = exports.KwikUIStyleInputFocused = exports.KwikUIStyleInputError = exports.KwikUIStyleInputContainerSize = exports.KwikUIStyleInputContainerShape = exports.KwikUIStyleInputContainerDisabled = exports.KwikUIStyleInputContainerBase = exports.KwikUIStyleInputClearable = exports.KwikUIStyleInputBase = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _Shape = require("../definitions/Shape");
var _Size = require("../definitions/Size");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const KwikUIStyleInputReset = exports.KwikUIStyleInputReset = (0, _styledComponents.css)`
  /* Initial Reset of Styles START */
  /* Chrome, Safari, Edge, Opera */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
  }
  /* Firefox */
  input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
  }
  /* Chrome, Safari, Edge, Opera, Firefox */
  input[type="date"]::-webkit-calendar-picker-indicator {
    height: 1em;
  }
  /* Initial Reset of Styles END */

  /* Base Component Styles START */
  transition: margin-bottom 0.1s linear;
  width: 100%;
  /* Base Component Styles END */
`;
const KwikUIStyleInputBase = exports.KwikUIStyleInputBase = (0, _styledComponents.css)`
  border: none;
  outline: none;
  width: 100%;
  padding: 0rem;
`;
const KwikUIStyleInputLabel = exports.KwikUIStyleInputLabel = (0, _styledComponents.css)`
  background-color: var(--kwikui-color-white);
  color: var(--kwikui-color-black);
  width: fit-content;
  z-index: 1;

  ${_ref => {
  let {
    disabled
  } = _ref;
  return disabled && (0, _styledComponents.css)`
      color: var(--kwikui-color-disabled-active);
    `;
}}

  ${_ref2 => {
  let {
    size
  } = _ref2;
  switch (size) {
    case _Size.IKwikUISize.XS:
      return (0, _styledComponents.css)`
          font-size: calc(var(--kwikui-font-size-xxs));
          line-height: var(--kwikui-font-size-xxs);
          height: var(--kwikui-font-size-xxs);
          border-radius: var(--kwikui-radius-xxs);
          padding: 0rem var(--kwikui-space-xxs);
        `;
    case _Size.IKwikUISize.S:
      return (0, _styledComponents.css)`
          font-size: calc(var(--kwikui-font-size-xs));
          line-height: var(--kwikui-font-size-xs);
          height: var(--kwikui-font-size-xs);
          border-radius: var(--kwikui-radius-xs);
          padding: 0rem var(--kwikui-space-xxs);
        `;
    case _Size.IKwikUISize.M:
      return (0, _styledComponents.css)`
          font-size: calc(var(--kwikui-font-size-s));
          line-height: var(--kwikui-font-size-s);
          height: var(--kwikui-font-size-s);
          border-radius: var(--kwikui-radius-s);
          padding: 0rem var(--kwikui-space-xxs);
        `;
    case _Size.IKwikUISize.L:
      return (0, _styledComponents.css)`
          font-size: calc(var(--kwikui-font-size-m));
          line-height: var(--kwikui-font-size-m);
          height: var(--kwikui-font-size-m);
          border-radius: var(--kwikui-radius-m);
          padding: 0rem var(--kwikui-space-xxs);
        `;
    case _Size.IKwikUISize.XL:
      return (0, _styledComponents.css)`
          font-size: calc(var(--kwikui-font-size-l));
          line-height: var(--kwikui-font-size-l);
          height: var(--kwikui-font-size-l);
          border-radius: var(--kwikui-radius-l);
          padding: 0rem var(--kwikui-space-xxs);
        `;
    case _Size.IKwikUISize.XXL:
      return (0, _styledComponents.css)`
          font-size: calc(var(--kwikui-font-size-xl));
          line-height: var(--kwikui-font-size-xl);
          height: var(--kwikui-font-size-xl);
          border-radius: var(--kwikui-radius-xl);
          padding: 0rem var(--kwikui-space-xxs);
        `;
  }
}}
`;
const KwikUIStyleInputPrefix = exports.KwikUIStyleInputPrefix = (0, _styledComponents.css)`
  width: fit-content;
  white-space: nowrap;

  ${_ref3 => {
  let {
    size
  } = _ref3;
  switch (size) {
    case _Size.IKwikUISize.XS:
      return (0, _styledComponents.css)`
          font-size: var(--kwikui-font-size-xs);
          line-height: var(--kwikui-font-size-xs);
          height: var(--kwikui-font-size-xs);
        `;
    case _Size.IKwikUISize.S:
      return (0, _styledComponents.css)`
          font-size: var(--kwikui-font-size-s);
          line-height: var(--kwikui-font-size-s);
          height: var(--kwikui-font-size-s);
        `;
    case _Size.IKwikUISize.M:
      return (0, _styledComponents.css)`
          font-size: var(--kwikui-font-size-m);
          line-height: var(--kwikui-font-size-m);
          height: var(--kwikui-font-size-m);
        `;
    case _Size.IKwikUISize.L:
      return (0, _styledComponents.css)`
          font-size: var(--kwikui-font-size-l);
          line-height: var(--kwikui-font-size-l);
          height: var(--kwikui-font-size-l);
        `;
    case _Size.IKwikUISize.XL:
      return (0, _styledComponents.css)`
          font-size: var(--kwikui-font-size-xl);
          line-height: var(--kwikui-font-size-xl);
          height: var(--kwikui-font-size-xl);
        `;
    case _Size.IKwikUISize.XXL:
      return (0, _styledComponents.css)`
          font-size: var(--kwikui-font-size-xxl);
          line-height: var(--kwikui-font-size-xxl);
          height: var(--kwikui-font-size-xxl);
        `;
  }
}}
`;
const KwikUIStyleInputPostfix = exports.KwikUIStyleInputPostfix = (0, _styledComponents.css)`
  width: fit-content;
  white-space: nowrap;

  ${_ref4 => {
  let {
    size
  } = _ref4;
  switch (size) {
    case _Size.IKwikUISize.XS:
      return (0, _styledComponents.css)`
          font-size: var(--kwikui-font-size-xs);
          line-height: var(--kwikui-font-size-xs);
          height: var(--kwikui-font-size-xs);
        `;
    case _Size.IKwikUISize.S:
      return (0, _styledComponents.css)`
          font-size: var(--kwikui-font-size-s);
          line-height: var(--kwikui-font-size-s);
          height: var(--kwikui-font-size-s);
        `;
    case _Size.IKwikUISize.M:
      return (0, _styledComponents.css)`
          font-size: var(--kwikui-font-size-m);
          line-height: var(--kwikui-font-size-m);
          height: var(--kwikui-font-size-m);
        `;
    case _Size.IKwikUISize.L:
      return (0, _styledComponents.css)`
          font-size: var(--kwikui-font-size-l);
          line-height: var(--kwikui-font-size-l);
          height: var(--kwikui-font-size-l);
        `;
    case _Size.IKwikUISize.XL:
      return (0, _styledComponents.css)`
          font-size: var(--kwikui-font-size-xl);
          line-height: var(--kwikui-font-size-xl);
          height: var(--kwikui-font-size-xl);
        `;
    case _Size.IKwikUISize.XXL:
      return (0, _styledComponents.css)`
          font-size: var(--kwikui-font-size-xxl);
          line-height: var(--kwikui-font-size-xxl);
          height: var(--kwikui-font-size-xxl);
        `;
  }
}}
`;
const KwikUIStyleInputPlaceholder = exports.KwikUIStyleInputPlaceholder = (0, _styledComponents.css)`
  color: var(--kwikui-color-disabled);

  ${_ref5 => {
  let {
    disabled
  } = _ref5;
  return disabled && (0, _styledComponents.css)`
      color: var(--kwikui-color-disabled-text);
    `;
}}

  ${_ref6 => {
  let {
    size
  } = _ref6;
  switch (size) {
    case _Size.IKwikUISize.XS:
      return (0, _styledComponents.css)`
          font-size: var(--kwikui-font-size-xs);
          line-height: var(--kwikui-font-size-xs);
          height: calc(1.5 * var(--kwikui-font-size-xs));
        `;
    case _Size.IKwikUISize.S:
      return (0, _styledComponents.css)`
          font-size: var(--kwikui-font-size-s);
          line-height: var(--kwikui-font-size-s);
          height: calc(1.5 * var(--kwikui-font-size-s));
        `;
    case _Size.IKwikUISize.M:
      return (0, _styledComponents.css)`
          font-size: var(--kwikui-font-size-m);
          line-height: var(--kwikui-font-size-m);
          height: calc(1.5 * var(--kwikui-font-size-m));
        `;
    case _Size.IKwikUISize.L:
      return (0, _styledComponents.css)`
          font-size: var(--kwikui-font-size-l);
          line-height: var(--kwikui-font-size-l);
          height: calc(1.5 * var(--kwikui-font-size-l));
        `;
    case _Size.IKwikUISize.XL:
      return (0, _styledComponents.css)`
          font-size: var(--kwikui-font-size-xl);
          line-height: var(--kwikui-font-size-xl);
          height: calc(1.5 * var(--kwikui-font-size-xl));
        `;
    case _Size.IKwikUISize.XXL:
      return (0, _styledComponents.css)`
          font-size: var(--kwikui-font-size-xxl);
          line-height: var(--kwikui-font-size-xxl);
          height: calc(1.5 * var(--kwikui-font-size-xxl));
        `;
  }
}}
`;
const KwikUIStyleInputSize = exports.KwikUIStyleInputSize = (0, _styledComponents.css)`
  ${_ref7 => {
  let {
    size
  } = _ref7;
  switch (size) {
    case _Size.IKwikUISize.XS:
      return (0, _styledComponents.css)`
          font-size: var(--kwikui-font-size-xs);
          line-height: var(--kwikui-font-size-xs);
          height: calc(1.5 * var(--kwikui-font-size-xs));
        `;
    case _Size.IKwikUISize.S:
      return (0, _styledComponents.css)`
          font-size: var(--kwikui-font-size-s);
          line-height: var(--kwikui-font-size-s);
          height: calc(1.5 * var(--kwikui-font-size-s));
        `;
    case _Size.IKwikUISize.M:
      return (0, _styledComponents.css)`
          font-size: var(--kwikui-font-size-m);
          line-height: var(--kwikui-font-size-m);
          height: calc(1.5 * var(--kwikui-font-size-m));
        `;
    case _Size.IKwikUISize.L:
      return (0, _styledComponents.css)`
          font-size: var(--kwikui-font-size-l);
          line-height: var(--kwikui-font-size-l);
          height: calc(1.5 * var(--kwikui-font-size-l));
        `;
    case _Size.IKwikUISize.XL:
      return (0, _styledComponents.css)`
          font-size: var(--kwikui-font-size-xl);
          line-height: var(--kwikui-font-size-xl);
          height: calc(1.5 * var(--kwikui-font-size-xl));
        `;
    case _Size.IKwikUISize.XXL:
      return (0, _styledComponents.css)`
          font-size: var(--kwikui-font-size-xxl);
          line-height: var(--kwikui-font-size-xxl);
          height: calc(1.5 * var(--kwikui-font-size-xxl));
        `;
  }
}}
`;
const KwikUIStyleInputShape = exports.KwikUIStyleInputShape = (0, _styledComponents.css)`
  ${_ref8 => {
  let {
    shape
  } = _ref8;
  switch (shape) {
    case _Shape.IKwikUIShape.ROUNDED:
      return (0, _styledComponents.css)`
          border-radius: 2rem;
        `;
    case _Shape.IKwikUIShape.CURVED:
      return (0, _styledComponents.css)`
          border-radius: 0.5rem;
        `;
    case _Shape.IKwikUIShape.RECTANGLE:
      return (0, _styledComponents.css)`
          border-radius: 0rem;
        `;
  }
}}
`;
const KwikUIStyleInputSuccess = exports.KwikUIStyleInputSuccess = (0, _styledComponents.css)`
  outline-color: transparent;
  border-color: var(--kwikui-color-success) !important;
  box-shadow: 0px 0px 5px -2px var(--kwikui-color-success) !important;

  label {
    color: var(--kwikui-color-success);
  }
`;
const KwikUIStyleInputError = exports.KwikUIStyleInputError = (0, _styledComponents.css)`
  outline-color: transparent;
  border-color: var(--kwikui-color-error) !important;
  box-shadow: 0px 0px 5px -2px var(--kwikui-color-error) !important;

  label {
    color: var(--kwikui-color-error);
    font-weight: bold;
  }
`;
const KwikUIStyleInputFocused = exports.KwikUIStyleInputFocused = (0, _styledComponents.css)`
  outline-color: transparent;
  border-color: var(--kwikui-color-primary) !important;
  box-shadow: 0px 0px 5px -2px var(--kwikui-color-primary) !important;

  label {
    color: var(--kwikui-color-primary);
  }
`;
const KwikUIStyleInputStatus = exports.KwikUIStyleInputStatus = (0, _styledComponents.css)`
  &.input-success {
    ${KwikUIStyleInputSuccess}
  }
  &.input-error {
    ${KwikUIStyleInputError}
  }
  &.input-focused {
    ${KwikUIStyleInputFocused}
  }
`;
const KwikUIStyleInputContainerBase = exports.KwikUIStyleInputContainerBase = (0, _styledComponents.css)`
  position: relative;
  display: flex;
  flex-direction: row;
  align-content: flex-start;
  justify-content: space-between;
  align-items: center;
  width: 100%;

  outline: none;
  color: var(--kwikui-color-black);
  width: 100%;
  border-width: 2px;
  border-style: solid;
  border-color: transparent;
  outline-width: 1px;
  outline-style: solid;
  outline-color: var(--kwikui-color-disabled);
  box-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);
  background-color: var(--kwikui-color-white);
  padding: var(--kwikui-space-m);
  font-size: var(--kwikui-font-size-m);

  &:hover {
    cursor: text;
    // border-color: var(--kwikui-color-disabled-active);
    box-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.16);
  }
  &:focus,
  &:focus-within {
    border-color: var(--kwikui-color-primary);
    background-color: var(--kwikui-color-white);
    box-shadow: 0 0 8px -3px var(--kwikui-color-primary);
  }

  & > *:not(:last-child) {
    margin-right: 0.5rem;
  }
`;
const KwikUIStyleInputContainerDisabled = exports.KwikUIStyleInputContainerDisabled = (0, _styledComponents.css)`
  ${_ref9 => {
  let {
    disabled
  } = _ref9;
  return disabled && (0, _styledComponents.css)`
      cursor: not-allowed !important;
      background-color: var(--kwikui-color-disabled-hover) !important;
      color: var(--kwikui-color-disabled-text) !important;
      outline-color: transparent;
      border-color: var(--kwikui-color-disabled) !important;
      box-shadow: 0px 0px 5px -2px var(--kwikui-color-disabled) !important;

      input,
      textarea {
        cursor: not-allowed !important;
      }

      &:hover {
        box-shadow: none !important;
      }
    `;
}}
`;
const KwikUIStyleInputContainerSize = exports.KwikUIStyleInputContainerSize = (0, _styledComponents.css)`
  ${_ref10 => {
  let {
    size
  } = _ref10;
  switch (size) {
    case _Size.IKwikUISize.XS:
      return (0, _styledComponents.css)`
          border-radius: var(--kwikui-radius-xs);
          padding: calc(var(--kwikui-space-xxs));
        `;
    case _Size.IKwikUISize.S:
      return (0, _styledComponents.css)`
          border-radius: var(--kwikui-radius-s);
          padding: var(--kwikui-space-xs);
        `;
    case _Size.IKwikUISize.M:
      return (0, _styledComponents.css)`
          border-radius: var(--kwikui-radius-m);
          padding: var(--kwikui-space-s);
        `;
    case _Size.IKwikUISize.L:
      return (0, _styledComponents.css)`
          border-radius: var(--kwikui-radius-l);
          padding: calc(var(--kwikui-space-m));
        `;
    case _Size.IKwikUISize.XL:
      return (0, _styledComponents.css)`
          border-radius: var(--kwikui-radius-xl);
          padding: calc(var(--kwikui-space-l));
        `;
    case _Size.IKwikUISize.XXL:
      return (0, _styledComponents.css)`
          border-radius: var(--kwikui-radius-xxl);
          padding: calc(var(--kwikui-space-xl));
        `;
  }
}}
`;
const KwikUIStyleInputContainerShape = exports.KwikUIStyleInputContainerShape = (0, _styledComponents.css)`
  ${_ref11 => {
  let {
    shape
  } = _ref11;
  switch (shape) {
    case _Shape.IKwikUIShape.ROUNDED:
      return (0, _styledComponents.css)`
          border-radius: 2rem;
        `;
    case _Shape.IKwikUIShape.CURVED:
      return (0, _styledComponents.css)`
          border-radius: 0.5rem;
        `;
    case _Shape.IKwikUIShape.RECTANGLE:
      return (0, _styledComponents.css)`
          border-radius: 0rem;
        `;
  }
}}
`;
const KwikUIStyleInputMessagesContainer = exports.KwikUIStyleInputMessagesContainer = _styledComponents.default.div`
  width: 100%;
  margin-left: 0.25rem;
  font-size: 0.9rem;
`;
const KwikUIStyleInputClearable = exports.KwikUIStyleInputClearable = _styledComponents.default.div`
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  ${_ref12 => {
  let {
    size
  } = _ref12;
  switch (size) {
    case _Size.IKwikUISize.XXS:
      return (0, _styledComponents.css)`
          font-size: var(--kwikui-font-size-xxs);
          line-height: var(--kwikui-font-size-xxs);
          height: calc(1.5 * var(--kwikui-font-size-xxs));
        `;
    case _Size.IKwikUISize.XS:
      return (0, _styledComponents.css)`
          font-size: var(--kwikui-font-size-xs);
          line-height: var(--kwikui-font-size-xs);
          height: calc(1.5 * var(--kwikui-font-size-xs));
        `;
    case _Size.IKwikUISize.S:
      return (0, _styledComponents.css)`
          font-size: var(--kwikui-font-size-s);
          line-height: var(--kwikui-font-size-s);
          height: calc(1.5 * var(--kwikui-font-size-s));
        `;
    case _Size.IKwikUISize.M:
      return (0, _styledComponents.css)`
          font-size: var(--kwikui-font-size-m);
          line-height: var(--kwikui-font-size-m);
          height: calc(1.5 * var(--kwikui-font-size-m));
        `;
    case _Size.IKwikUISize.L:
      return (0, _styledComponents.css)`
          font-size: var(--kwikui-font-size-l);
          line-height: var(--kwikui-font-size-l);
          height: calc(1.5 * var(--kwikui-font-size-l));
        `;
    case _Size.IKwikUISize.XL:
      return (0, _styledComponents.css)`
          font-size: var(--kwikui-font-size-xl);
          line-height: var(--kwikui-font-size-xl);
          height: calc(1.5 * var(--kwikui-font-size-xl));
        `;
    case _Size.IKwikUISize.XXL:
      return (0, _styledComponents.css)`
          font-size: var(--kwikui-font-size-xxl);
          line-height: var(--kwikui-font-size-xxl);
          height: calc(1.5 * var(--kwikui-font-size-xxl));
        `;
  }
}};
`;