@stokr/components-library/dist/components/Button/Button.styles.js

STOKR - Components Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Button = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _theme = _interopRequireDefault(require("../../styles/theme"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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); }
const Button = exports.Button = _styledComponents.default.button.attrs(props => ({
  type: props.type || 'button'
})).withConfig({
  displayName: "Buttonstyles__Button",
  componentId: "sc-1bxw8qq-0"
})(["display:inline-block;height:auto;min-height:40px;max-width:100%;background-color:", ";border:1px solid ", ";font-weight:bold;font-size:12px;line-height:16px;color:", ";text-transform:uppercase;text-align:center;letter-spacing:2px;border-radius:28px;padding:11px 32px;margin:0;outline:0;vertical-align:baseline;text-shadow:none;user-select:none;cursor:pointer;transition:color 0.2s,background-color 0.2s,border-color 0.2s;", " ", " ", " ", " ", " ", " &:hover,&:focus,&:active{background-color:", ";border-color:", ";color:", ";}", " ", " ", " ", " ", " ", " ", " ", " ", ""], props => _theme.default.cPrimary, props => _theme.default.cPrimary, props => _theme.default.cWhite, _ref => {
  let {
    isUpdates,
    isCancel
  } = _ref;
  return isUpdates && isCancel && (0, _styledComponents.css)(["padding:11px 0;margin-left:32px;"]);
}, _ref2 => {
  let {
    isUpdates,
    isDone
  } = _ref2;
  return isUpdates && isDone && (0, _styledComponents.css)(["margin-left:32px;@media screen and (max-width:850px){padding:11px 20px;}"]);
}, _ref3 => {
  let {
    withMarginBottom
  } = _ref3;
  return withMarginBottom && (0, _styledComponents.css)(["margin-bottom:32px;"]);
}, props => props.minWidth && (0, _styledComponents.css)(["min-width:", ";"], props.minWidth), props => props.fluid && (0, _styledComponents.css)(["display:block;width:100%;padding:11px 12px;"]), props => props.center && (0, _styledComponents.css)(["margin-left:auto;margin-right:auto;"]), props => _theme.default.cPrimaryDark, props => _theme.default.cPrimaryDark, props => _theme.default.cWhite, props => props.secondary && (0, _styledComponents.css)(["background-color:", ";color:", ";&:hover,&:focus,&:active{background-color:", ";border-color:", ";color:", ";}"], _theme.default.cWhite, _theme.default.cPrimary, _theme.default.cPrimary, _theme.default.cPrimary, _theme.default.cWhite), props => props.onlyText && (0, _styledComponents.css)(["border-color:transparent;background-color:transparent;color:", ";&:hover,&:focus,&:active{background-color:transparent;border-color:transparent;color:", ";}"], _theme.default.cBlack, _theme.default.cPrimary), props => props.disabled && (0, _styledComponents.css)(["border-color:", ";background-color:", ";color:", ";opacity:0.2;cursor:default;box-shadow:none !important;pointer-events:none !important;&:hover,&:focus,&:active{background-color:", ";border-color:", ";color:", ";}"], _theme.default.cBlack, _theme.default.cWhite, _theme.default.cBlack, _theme.default.cPrimary, _theme.default.cPrimary, _theme.default.cWhite), props => props.negative && (0, _styledComponents.css)(["border-color:", ";background-color:", ";color:", ";&:hover,&:focus,&:active{background-color:", ";border-color:", ";color:", ";}"], _theme.default.cWarning, _theme.default.cWhite, _theme.default.cWarning, _theme.default.cWhite, _theme.default.cWarningDark, _theme.default.cWarningDark), props => props.outline && (0, _styledComponents.css)(["border-color:", ";background-color:transparent;color:", ";&:hover,&:focus,&:active{background-color:", ";border-color:", ";color:", ";}"], _theme.default.cWhite, _theme.default.cWhite, _theme.default.cWhite, _theme.default.cWhite, _theme.default.cWarning), props => props.outlineBlack && (0, _styledComponents.css)(["border-color:", ";background-color:", ";color:", ";&:hover,&:focus,&:active{background-color:", ";border-color:", ";color:", ";}"], _theme.default.grey4, _theme.default.cWhite, _theme.default.cBlack, _theme.default.cPrimary, _theme.default.cPrimary, _theme.default.cWhite), props => props.marginTop && (0, _styledComponents.css)(["margin-top:", ";"], props.marginTop), props => props.marginRight && (0, _styledComponents.css)(["margin-right:", ";"], props.marginRight), props => props.isLoginMobile && "\n     margin-bottom: 20px;\n  width: 163.94px;\n    ");
Button.propTypes = {
  secondary: _propTypes.default.bool,
  disabled: _propTypes.default.bool,
  negative: _propTypes.default.bool,
  center: _propTypes.default.bool,
  outline: _propTypes.default.bool,
  outlineBlack: _propTypes.default.bool
};
Button.defaultProps = {
  secondary: false,
  disabled: false,
  negative: false,
  center: false,
  outline: false,
  outlineBlack: false
};
var _default = exports.default = Button;