kwikid-components-react/components/kwikui/button/Button.style.js

KwikID's Component Library in React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.KwikUIStyleLoadingAnimation = exports.KwikUIStyleButtonChildren = exports.KwikUIStyleButton = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _Button = require("./Button.definition");
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32;
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
const KwikUIStyleButton = exports.KwikUIStyleButton = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-content: center;\n  align-items: center;\n  cursor: ", ";\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  transition: transform 0.3s;\n  border-width: 2px;\n  border-style: solid;\n  border-color: transparent;\n  box-shadow: none;\n  background-color: transparent;\n\n  & > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), _ref => {
  let {
    disabled
  } = _ref;
  return disabled ? "not-allowed" : "pointer";
}, _ref2 => {
  let {
    appearance,
    disabled,
    disableHover
  } = _ref2;
  switch (appearance) {
    case _Button.IKwikUIButtonAppearance.PRIMARY:
      return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n\n          ", "\n        "])), disabled ? "var(--kwikui-color-disabled)" : "var(--kwikui-color-primary)", disabled ? "var(--kwikui-color-disabled)" : "var(--kwikui-color-primary)", disabled ? "var(--kwikui-color-disabled-text)" : "var(--kwikui-color-primary-text)", !disabled && !disableHover && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            &:hover {\n              background-color: var(--kwikui-color-primary-hover);\n              border-color: var(--kwikui-color-primary-hover);\n            }\n            &:active {\n              background-color: var(--kwikui-color-primary-active);\n              border-color: var(--kwikui-color-primary-active);\n            }\n          "]))));
    case _Button.IKwikUIButtonAppearance.SECONDARY:
      return (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n\n          ", "\n        "])), disabled ? "var(--kwikui-color-disabled)" : "var(--kwikui-color-secondary)", disabled ? "var(--kwikui-color-disabled)" : "var(--kwikui-color-secondary)", disabled ? "var(--kwikui-color-disabled-text)" : "var(--kwikui-color-secondary-text)", !disabled && !disableHover && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n            &:hover {\n              background-color: var(--kwikui-color-secondary-hover);\n              border-color: var(--kwikui-color-secondary-hover);\n            }\n            &:active {\n              background-color: var(--kwikui-color-secondary-active);\n              border-color: var(--kwikui-color-secondary-active);\n            }\n          "]))));
    case _Button.IKwikUIButtonAppearance.OUTLINED:
      return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          border-color: ", ";\n          color: ", ";\n\n          ", "\n        "])), disabled ? "var(--kwikui-color-disabled)" : "var(--kwikui-color-primary)", disabled ? "var(--kwikui-color-disabled)" : "var(--kwikui-color-primary)", !disabled && !disableHover && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n            &:hover {\n              border-color: var(--kwikui-color-primary-hover);\n            }\n            &:active {\n              border-color: var(--kwikui-color-primary-active);\n            }\n          "]))));
    case _Button.IKwikUIButtonAppearance.LINK:
      return (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n          color: ", ";\n\n          ", "\n        "])), disabled ? "var(--kwikui-color-disabled)" : "var(--kwikui-color-primary)", !disabled && !disableHover && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n            &:hover {\n              border-color: var(--kwikui-color-primary-hover);\n            }\n            &:active {\n              border-color: var(--kwikui-color-primary-active);\n            }\n          "]))));
  }
}, _ref3 => {
  let {
    size
  } = _ref3;
  switch (size) {
    case _Button.IKwikUIButtonSize.XS:
      return (0, _styledComponents.css)(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n          padding: var(--kwikui-space-xxs) var(--kwikui-space-xs);\n          font-size: var(--kwikui-font-size-xs);\n          line-height: var(--kwikui-font-size-xs);\n        "])));
    case _Button.IKwikUIButtonSize.S:
      return (0, _styledComponents.css)(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n          padding: var(--kwikui-space-xs) var(--kwikui-space-s);\n          font-size: var(--kwikui-font-size-s);\n          line-height: var(--kwikui-font-size-s);\n        "])));
    case _Button.IKwikUIButtonSize.M:
      return (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          padding: var(--kwikui-space-s) var(--kwikui-space-m);\n          font-size: var(--kwikui-font-size-m);\n          line-height: var(--kwikui-font-size-m);\n        "])));
    case _Button.IKwikUIButtonSize.L:
      return (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n          padding: var(--kwikui-space-m) var(--kwikui-space-l);\n          font-size: var(--kwikui-font-size-l);\n          line-height: var(--kwikui-font-size-l);\n        "])));
    case _Button.IKwikUIButtonSize.XL:
      return (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n          padding: var(--kwikui-space-l) var(--kwikui-space-xl);\n          font-size: var(--kwikui-font-size-xl);\n          line-height: var(--kwikui-font-size-xl);\n        "])));
  }
}, _ref4 => {
  let {
    shape
  } = _ref4;
  switch (shape) {
    case _Button.IKwikUIButtonShape.ROUNDED:
      return (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n          border-radius: 2rem;\n        "])));
    case _Button.IKwikUIButtonShape.CURVED:
      return (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n          border-radius: 0.5rem;\n        "])));
    case _Button.IKwikUIButtonShape.RECTANGLE:
      return (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n          border-radius: 0rem;\n        "])));
  }
});
const KwikUIStyleButtonChildren = exports.KwikUIStyleButtonChildren = _styledComponents.default.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n\n  ", "\n"])), _ref5 => {
  let {
    size
  } = _ref5;
  switch (size) {
    case _Button.IKwikUIButtonSize.XS:
      return (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n          font-size: var(--kwikui-font-size-xs);\n          line-height: var(--kwikui-font-size-xs);\n          height: calc(1.5 * var(--kwikui-font-size-xs));\n        "])));
    case _Button.IKwikUIButtonSize.S:
      return (0, _styledComponents.css)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n          font-size: var(--kwikui-font-size-s);\n          line-height: var(--kwikui-font-size-s);\n          height: calc(1.5 * var(--kwikui-font-size-s));\n        "])));
    case _Button.IKwikUIButtonSize.M:
      return (0, _styledComponents.css)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n          font-size: var(--kwikui-font-size-m);\n          line-height: var(--kwikui-font-size-m);\n          height: calc(1.5 * var(--kwikui-font-size-m));\n        "])));
    case _Button.IKwikUIButtonSize.L:
      return (0, _styledComponents.css)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n          font-size: var(--kwikui-font-size-l);\n          line-height: var(--kwikui-font-size-l);\n          height: calc(1.5 * var(--kwikui-font-size-l));\n        "])));
    case _Button.IKwikUIButtonSize.XL:
      return (0, _styledComponents.css)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n          font-size: var(--kwikui-font-size-xl);\n          line-height: var(--kwikui-font-size-xl);\n          height: calc(1.5 * var(--kwikui-font-size-xl));\n        "])));
  }
});
const spinAnimation = (0, _styledComponents.keyframes)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n"])));
const KwikUIStyleLoadingAnimation = exports.KwikUIStyleLoadingAnimation = _styledComponents.default.div(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  border-radius: 100%;\n  animation: ", " 1s linear infinite;\n\n  ", "\n\n  ", "\n"])), spinAnimation, _ref6 => {
  let {
    appearance
  } = _ref6;
  switch (appearance) {
    case _Button.IKwikUIButtonAppearance.PRIMARY:
      return (0, _styledComponents.css)(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n          border-bottom: 2px solid var(--kwikui-color-disabled-text);\n          border-left: 2px solid transparent;\n          border-right: 2px solid transparent;\n          border-top: 2px solid transparent;\n        "])));
    case _Button.IKwikUIButtonAppearance.SECONDARY:
      return (0, _styledComponents.css)(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n          border-bottom: 2px solid var(--kwikui-color-disabled-text);\n          border-left: 2px solid transparent;\n          border-right: 2px solid transparent;\n          border-top: 2px solid transparent;\n        "])));
    case _Button.IKwikUIButtonAppearance.OUTLINED:
      return (0, _styledComponents.css)(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n          border-bottom: 2px solid var(--kwikui-color-disabled);\n          border-left: 2px solid transparent;\n          border-right: 2px solid transparent;\n          border-top: 2px solid transparent;\n        "])));
    case _Button.IKwikUIButtonAppearance.LINK:
      return (0, _styledComponents.css)(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n          border-bottom: 2px solid var(--kwikui-color-disabled);\n          border-left: 2px solid transparent;\n          border-right: 2px solid transparent;\n          border-top: 2px solid transparent;\n        "])));
  }
}, _ref7 => {
  let {
    size
  } = _ref7;
  switch (size) {
    case _Button.IKwikUIButtonSize.XS:
      return (0, _styledComponents.css)(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n          width: calc(1.5 * var(--kwikui-font-size-xs));\n          height: calc(1.5 * var(--kwikui-font-size-xs));\n          line-height: calc(1.5 * var(--kwikui-font-size-xs));\n        "])));
    case _Button.IKwikUIButtonSize.S:
      return (0, _styledComponents.css)(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n          width: calc(1.5 * var(--kwikui-font-size-s));\n          height: calc(1.5 * var(--kwikui-font-size-s));\n          line-height: calc(1.5 * var(--kwikui-font-size-s));\n        "])));
    case _Button.IKwikUIButtonSize.M:
      return (0, _styledComponents.css)(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n          width: calc(1.5 * var(--kwikui-font-size-m));\n          height: calc(1.5 * var(--kwikui-font-size-m));\n          line-height: calc(1.5 * var(--kwikui-font-size-m));\n        "])));
    case _Button.IKwikUIButtonSize.L:
      return (0, _styledComponents.css)(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n          width: calc(1.5 * var(--kwikui-font-size-l));\n          height: calc(1.5 * var(--kwikui-font-size-l));\n          line-height: calc(1.5 * var(--kwikui-font-size-l));\n        "])));
    case _Button.IKwikUIButtonSize.XL:
      return (0, _styledComponents.css)(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n          width: calc(1.5 * var(--kwikui-font-size-xl));\n          height: calc(1.5 * var(--kwikui-font-size-xl));\n          line-height: calc(1.5 * var(--kwikui-font-size-xl));\n        "])));
  }
});