kwikid-components-react/components/kwikui/inputs/input-radio/InputRadio.style.js

KwikID's Component Library in React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.KwikUIStyleInputRadioWrapper = exports.KwikUIStyleInputRadioMessagesContainer = exports.KwikUIStyleInputRadioLabel = exports.KwikUIStyleInputRadioItemsContainer = exports.KwikUIStyleInputRadioItemLabelContainer = exports.KwikUIStyleInputRadioItemLabel = exports.KwikUIStyleInputRadioItemContainer = exports.KwikUIStyleInputRadioContainer = exports.KwikUIStyleInputRadio = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _Shape = require("../../../../shared/definitions/Shape");
var _Size = require("../../../../shared/definitions/Size");
var _Input = require("../../../../shared/styles/Input.style");
var _InputRadio = require("./InputRadio.definition");
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 KwikUIStyleInputRadioWrapper = exports.KwikUIStyleInputRadioWrapper = _styledComponents.default.div`
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;

  & > *:not(:last-child) {
    margin-bottom: 0.5rem;
  }
`;
const KwikUIStyleInputRadioContainer = exports.KwikUIStyleInputRadioContainer = _styledComponents.default.div`
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;

  & > *:not(:last-child) {
    margin-bottom: 0.25rem;
    margin-right: 0.25rem;
  }
`;
const KwikUIStyleInputRadio = exports.KwikUIStyleInputRadio = _styledComponents.default.input`
  outline: none;
  padding: 10px;
  border-radius: 5px;
  font-size: 16px;
  transition: all 0.3s ease;
  width: 100%;
  background-color: var(--kwikui-color-white);
  color: #333;
  border: 2px solid var(--kwikui-color-disabled);

  &:hover,
  &:focus {
    border-color: #66afe9;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(102, 175, 233, 0.6);
  }

  &::placeholder {
    color: var(--kwikui-color-disabled);
  }

  &:disabled {
    background-color: var(--kwikui-color-disabled-hover);
    color: var(--kwikui-color-disabled);
  }
`;
const KwikUIStyleInputRadioItemContainer = exports.KwikUIStyleInputRadioItemContainer = _styledComponents.default.div`
  display: grid;
  grid-template-areas:
    ". ."
    ". .";
  justify-items: start;
  align-items: center;
  justify-content: start;
  column-gap: 0.5rem;

  &:hover * {
    ${_ref => {
  let {
    disabled
  } = _ref;
  return !disabled && (0, _styledComponents.css)`
        cursor: pointer;
      `;
}}
    ${_ref2 => {
  let {
    disabled
  } = _ref2;
  return disabled && (0, _styledComponents.css)`
        cursor: not-allowed;
      `;
}}
  }

  & > input[type="radio"] {
    appearance: none;
    border: 2px solid var(--kwikui-color-white);
    outline: 2px solid var(--kwikui-color-primary);
    width: var(--kwikui-font-size-m);
    min-width: var(--kwikui-font-size-m);
    max-width: var(--kwikui-font-size-m);
    height: var(--kwikui-font-size-m);
    min-height: var(--kwikui-font-size-m);
    max-height: var(--kwikui-font-size-m);
    margin: 0px;
    border-radius: 50%;
    background-color: transparent;
    transition: 1s linear ease;

    ${_ref3 => {
  let {
    shape
  } = _ref3;
  switch (shape) {
    case _Shape.IKwikUIShape.ROUNDED:
      return (0, _styledComponents.css)`
            border-radius: 2rem;
          `;
    case _Shape.IKwikUIShape.CURVED:
      return (0, _styledComponents.css)`
            border-radius: 0.25rem;
          `;
    case _Shape.IKwikUIShape.RECTANGLE:
      return (0, _styledComponents.css)`
            border-radius: 0rem;
          `;
    default:
      return (0, _styledComponents.css)`
            border-radius: 0.25rem;
          `;
  }
}}

    ${_ref4 => {
  let {
    size
  } = _ref4;
  switch (size) {
    case _Size.IKwikUISize.S:
      return (0, _styledComponents.css)`
            border-width: 1px;
            outline-width: 1px;
            width: var(--kwikui-font-size-s);
            min-width: var(--kwikui-font-size-s);
            max-width: var(--kwikui-font-size-s);
            height: var(--kwikui-font-size-s);
            min-height: var(--kwikui-font-size-s);
            max-height: var(--kwikui-font-size-s);
            font-size: var(--kwikui-font-size-s);
          `;
    case _Size.IKwikUISize.M:
      return (0, _styledComponents.css)`
            border-width: 2px;
            outline-width: 2px;
            width: var(--kwikui-font-size-m);
            min-width: var(--kwikui-font-size-m);
            max-width: var(--kwikui-font-size-m);
            height: var(--kwikui-font-size-m);
            min-height: var(--kwikui-font-size-m);
            max-height: var(--kwikui-font-size-m);
            font-size: var(--kwikui-font-size-m);
          `;
    case _Size.IKwikUISize.L:
      return (0, _styledComponents.css)`
            border-width: 3px;
            outline-width: 3px;
            width: var(--kwikui-font-size-l);
            min-width: var(--kwikui-font-size-l);
            max-width: var(--kwikui-font-size-l);
            height: var(--kwikui-font-size-l);
            min-height: var(--kwikui-font-size-l);
            max-height: var(--kwikui-font-size-l);
            font-size: var(--kwikui-font-size-l);
          `;
    default:
      return (0, _styledComponents.css)`
            border-width: 2px;
            outline-width: 2px;
            width: var(--kwikui-font-size-m);
            min-width: var(--kwikui-font-size-m);
            max-width: var(--kwikui-font-size-m);
            height: var(--kwikui-font-size-m);
            min-height: var(--kwikui-font-size-m);
            max-height: var(--kwikui-font-size-m);
            font-size: var(--kwikui-font-size-m);
          `;
  }
}}

    &:checked {
      transition: 1s linear ease;
      border-color: white;
      outline-color: var(--kwikui-color-primary);
      background-color: var(--kwikui-color-primary);
    }

    &:disabled {
      transition: 1s linear ease;
      border-color: var(--kwikui-color-white);
      outline-color: var(--kwikui-color-disabled-active);

      &:checked {
        background-color: var(--kwikui-color-disabled-active);
        outline-color: var(--kwikui-color-disabled-active);
      }
      &:not(:checked) {
        background-color: transparent;
      }
    }
  }

  ${_ref5 => {
  let {
    size
  } = _ref5;
  switch (size) {
    case _Size.IKwikUISize.S:
      return (0, _styledComponents.css)`
          font-size: var(--kwikui-font-size-s);
          gap: calc(var(--kwikui-font-size-s) / 2);
        `;
    case _Size.IKwikUISize.M:
      return (0, _styledComponents.css)`
          font-size: var(--kwikui-font-size-m);
          gap: calc(var(--kwikui-font-size-m) / 2);
        `;
    case _Size.IKwikUISize.L:
      return (0, _styledComponents.css)`
          font-size: var(--kwikui-font-size-l);
          gap: calc(var(--kwikui-font-size-l) / 2);
        `;
  }
}}
`;
const KwikUIStyleInputRadioItemLabelContainer = exports.KwikUIStyleInputRadioItemLabelContainer = _styledComponents.default.div`
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;

  & > *:not(:last-child) {
    margin-bottom: 0.25rem;
  }
`;
const KwikUIStyleInputRadioItemLabel = exports.KwikUIStyleInputRadioItemLabel = _styledComponents.default.label`
  margin-top: 0rem;
  width: max-content;

  ${_ref6 => {
  let {
    size
  } = _ref6;
  switch (size) {
    case _Size.IKwikUISize.S:
      return (0, _styledComponents.css)`
          line-height: var(--kwikui-font-size-s);
        `;
    case _Size.IKwikUISize.M:
      return (0, _styledComponents.css)`
          line-height: var(--kwikui-font-size-m);
        `;
    case _Size.IKwikUISize.L:
      return (0, _styledComponents.css)`
          line-height: var(--kwikui-font-size-l);
        `;
  }
}}
`;
const KwikUIStyleInputRadioLabel = exports.KwikUIStyleInputRadioLabel = _styledComponents.default.label`
  ${_Input.KwikUIStyleInputLabel}

  ${_ref7 => {
  let {
    size
  } = _ref7;
  switch (size) {
    case _Size.IKwikUISize.S:
      return (0, _styledComponents.css)`
          margin-bottom: 0.25rem !important;
        `;
    case _Size.IKwikUISize.M:
      return (0, _styledComponents.css)`
          margin-bottom: 0.5rem !important;
        `;
    case _Size.IKwikUISize.L:
      return (0, _styledComponents.css)`
          margin-bottom: 0.5rem !important;
        `;
  }
}}
`;
const KwikUIStyleInputRadioMessagesContainer = exports.KwikUIStyleInputRadioMessagesContainer = _styledComponents.default.div`
  width: 100%;
  margin-left: 0.25rem;
`;
const KwikUIStyleInputRadioItemsContainer = exports.KwikUIStyleInputRadioItemsContainer = _styledComponents.default.div`
  margin: 0.25rem 0rem 0rem 0.25rem;

  ${_ref8 => {
  let {
    orientation
  } = _ref8;
  switch (orientation) {
    case _InputRadio.IKwikUIInputRadioOrientation.VERTICAL:
      return (0, _styledComponents.css)`
          display: flex;
          flex-direction: column;
          align-items: stretch;
          justify-content: flex-start;
          margin-left: 0.25rem;
          margin-top: 0.25rem;

          & > * {
            margin-bottom: 0.5rem;
          }
        `;
    case _InputRadio.IKwikUIInputRadioOrientation.HORIZONTAL:
      return (0, _styledComponents.css)`
          display: flex;
          flex-direction: row;
          align-items: flex-start;
          justify-content: flex-start;
          margin-left: 0.25rem;
          margin-top: 0.25rem;

          & > * {
            margin-right: 0.5rem;
          }
        `;
    case _InputRadio.IKwikUIInputRadioOrientation.WRAPPED:
      return (0, _styledComponents.css)`
          display: flex;
          flex-direction: row;
          align-items: flex-start;
          justify-content: flex-start;
          margin-left: 0.25rem;
          margin-top: 0.25rem;
          flex-wrap: wrap;

          & > * {
            margin-bottom: 0.5rem;
            margin-right: 0.5rem;
          }
        `;
  }
}}
`;