@activecollab/components/dist/cjs/components/Button/Styles.js

ActiveCollab Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledButtonElements = exports.StyledButtonElement = exports.StyledButton = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _BoxSizingStyle = require("../BoxSizingStyle");
var _FontStyle = require("../FontStyle");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 && Object.prototype.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; }
var StyledButton = exports.StyledButton = _styledComponents.default.button.withConfig({
  displayName: "Styles__StyledButton",
  componentId: "sc-vi1kcr-0"
})(["", " ", " -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;vertical-align:middle;font-weight:500;display:inline-block;line-height:1;margin:0;text-decoration:none;font-size:0.875rem;user-select:none;cursor:pointer;text-align:center;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:288px;border:none;height:32px;transition:background-color 0.3s ease,box-shadow 0.3s ease,color 0.3s ease,border-color 0.3s ease;svg{fill:currentColor;}&:focus{outline:none;}&:hover{text-decoration:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, function (props) {
  return props.size === "small" && (0, _styledComponents.css)(["height:24px;"]);
}, function (props) {
  return props.size === "big" && (0, _styledComponents.css)(["height:40px;"]);
}, function (props) {
  return (props.variant === "primary" || props.variant === "contained") && (0, _styledComponents.css)(["padding:0 16px;background-color:var(--color-primary);border-radius:var(--ac-br-rounded);color:var(--page-paper-main);&:hover,&:focus-visible{box-shadow:0 3px 6px -2px var(--color-primary-500);background-color:var(--color-primary-800);}&:active{box-shadow:0 4px 10px -2px var(--color-primary-600);background-color:var(--color-primary-800);}"]);
}, function (props) {
  return (props.variant === "secondary" || props.variant === "outlined") && (0, _styledComponents.css)(["padding:0 16px;background-color:transparent;border-radius:var(--ac-br-rounded);border:solid 1px var(--color-theme-700);color:var(--color-theme-700);&:hover,&:focus-visible{border-color:var(--color-primary);color:var(--color-primary);}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"]);
}, function (props) {
  return props.variant === "dark transparent" && (0, _styledComponents.css)(["padding:0 8px;background-color:rgba(0,0,0,0.5);border-radius:var(--ac-br-6);color:var(--only-white);&:hover,&:focus-visible{background-color:rgba(0,0,0,0.85);}&:active{background-color:var(--only-black);}"]);
}, function (props) {
  return (props.variant === "tertiary" || props.variant === "text colored") && (0, _styledComponents.css)(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-primary);&:hover,&:focus-visible{background-color:var(--color-primary-200);}&:active{background-color:var(--color-primary-300);}"]);
}, function (props) {
  return (props.variant === "option" || props.variant === "text gray") && (0, _styledComponents.css)(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-theme-700);&:hover,&:focus-visible{background-color:var(--color-theme-300);color:var(--color-theme-900);}&:active{background-color:var(--color-theme-400);color:var(--color-theme-900);}"]);
}, function (props) {
  return props.variant === "circle raised" && (0, _styledComponents.css)(["padding:0 6px;background-color:transparent;border-radius:var(--ac-br-rounded);color:var(--color-theme-700);&:hover,&:focus-visible{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary);}&:active{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);}"]);
}, function (props) {
  return props.iconOnly && (0, _styledComponents.css)(["display:inline-flex;justify-content:center;align-items:center;padding:0;width:32px;", ";", " ", ""], (props.size === "small" || props.size === "big") && (0, _styledComponents.css)(["border-radius:var(--ac-br-rounded);"]), props.size === "small" && (0, _styledComponents.css)(["width:24px;"]), props.size === "big" && (0, _styledComponents.css)(["width:40px;"]));
}, function (props) {
  return (props.variant === "primary" || props.variant === "contained" || props.variant === "secondary" || props.variant === "outlined") && (0, _styledComponents.css)([".c-btn__elements__element:first-child svg{margin-left:-6px;}.c-btn__elements__element:last-child svg{margin-right:-6px;}", ""], (props.size === "small" || props.size === "big") && (0, _styledComponents.css)(["border-radius:var(--ac-br-rounded);"]));
}, function (props) {
  return (props.variant === "tertiary" || props.variant === "text colored" || props.variant === "option" || props.variant === "text gray" || props.variant === "dark transparent") && (0, _styledComponents.css)([".c-btn__elements__element:first-child svg{margin-left:-4px;}.c-btn__elements__element:last-child svg{margin-right:-4px;}", " ", ""], props.size === "small" && (0, _styledComponents.css)(["border-radius:var(--ac-br-4);"]), props.size === "big" && (0, _styledComponents.css)(["border-radius:var(--ac-br-8);"]));
}, function (props) {
  return props.active && (0, _styledComponents.css)(["", " ", " ", " ", " ", " ", ""], (props.variant === "primary" || props.variant === "contained") && (0, _styledComponents.css)(["background-color:var(--color-primary-800);"]), (props.variant === "secondary" || props.variant === "outlined") && (0, _styledComponents.css)(["border-color:var(--color-primary);color:var(--color-primary);"]), props.variant === "dark transparent" && (0, _styledComponents.css)(["background-color:var(--only-black);"]), props.variant === "circle raised" && (0, _styledComponents.css)(["background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);"]), (props.variant === "tertiary" || props.variant === "text colored") && (0, _styledComponents.css)(["background-color:var(--color-primary-200);"]), (props.variant === "option" || props.variant === "text gray") && (0, _styledComponents.css)(["color:var(--color-primary);&:hover,&:focus-visible{color:var(--color-primary);}", ""], props.children instanceof Array && (0, _styledComponents.css)(["background-color:var(--color-theme-300);"])));
});
StyledButton.displayName = "StyledButton";
var StyledButtonElements = exports.StyledButtonElements = _styledComponents.default.span.withConfig({
  displayName: "Styles__StyledButtonElements",
  componentId: "sc-vi1kcr-1"
})(["display:flex;align-items:center;"]);
StyledButtonElements.displayName = "StyledButtonElements";
var StyledButtonElement = exports.StyledButtonElement = _styledComponents.default.span.withConfig({
  displayName: "Styles__StyledButtonElement",
  componentId: "sc-vi1kcr-2"
})(["display:inline-flex;svg{margin:0 4px;}"]);
StyledButtonElement.displayName = "StyledButtonElement";
//# sourceMappingURL=Styles.js.map