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

ActiveCollab Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledLinkElements = exports.StyledLinkElement = exports.StyledLink = exports.StyledBackLink = 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 StyledLinkElement = exports.StyledLinkElement = _styledComponents.default.div.withConfig({
  displayName: "Styles__StyledLinkElement",
  componentId: "sc-1c1jdox-0"
})([""]);
var StyledLink = exports.StyledLink = _styledComponents.default.a.withConfig({
  displayName: "Styles__StyledLink",
  componentId: "sc-1c1jdox-1"
})(["", " ", " ", " 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;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:hover{text-decoration:none;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, {
  "margin": "0px",
  "display": "inline-flex",
  "cursor": "pointer",
  "userSelect": "none",
  "alignItems": "center",
  "justifyContent": "center",
  "fontSize": "0.875rem",
  "lineHeight": "1",
  "fontWeight": "500",
  "textDecorationLine": "none",
  "WebkitFontSmoothing": "antialiased",
  "MozOsxFontSmoothing": "grayscale"
}, function (props) {
  return props.disabled && (0, _styledComponents.css)(["cursor:default;opacity:50%;pointer-events:none;"]);
}, 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:16px;color:var(--color-theme-100);&:focus,&:hover{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:16px;border:solid 1px var(--color-theme-600);color:var(--color-theme-600);&:focus,&:hover{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 === "tertiary" || props.variant === "text colored") && (0, _styledComponents.css)(["padding:0 8px;background-color:transparent;border-radius:6px;color:var(--color-primary);&:focus,&:hover{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:6px;color:var(--color-theme-600);&:focus,&:hover{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 === "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{background-color:rgba(0,0,0,0.85);}&:active{background-color:var(--only-black);}"]);
}, 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);transition:ease 0.3s all;&:hover{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.variant === "text link-primary" && (0, _styledComponents.css)(["line-height:14px;letter-spacing:0.25px;color:var(--color-primary);text-decoration:underline var(--color-primary);text-underline-offset:3px;height:fit-content;&:hover{text-decoration:none;}&:focus{text-decoration:none;outline:1px solid var(--color-primary);outline-offset:2px;border-radius:2px;}"]);
}, function (props) {
  return props.variant === "text link-gray" && (0, _styledComponents.css)(["line-height:14px;letter-spacing:0.25px;color:var(--color-theme-700);text-decoration:underline var(--color-theme-700);text-underline-offset:3px;height:fit-content;&:hover{text-decoration:none;}&:focus{text-decoration:none;outline:1px solid var(--color-primary);outline-offset:2px;border-radius:2px;}"]);
}, function (props) {
  return props.$iconOnly && (0, _styledComponents.css)(["padding:0;width:32px;", " ", ""], props.size === "small" && (0, _styledComponents.css)(["radius:16px;width:24px;"]), props.size === "big" && (0, _styledComponents.css)(["radius:20px;width:40px;"]));
}, function (props) {
  return (props.variant === "primary" || props.variant === "contained" || props.variant === "secondary" || props.variant === "outlined") && (0, _styledComponents.css)(["", ":first-child svg{margin-left:-6px;}", ":last-child svg{margin-right:-6px;}", " ", ""], StyledLinkElement, StyledLinkElement, props.size === "small" && (0, _styledComponents.css)(["radius:16px;"]), props.size === "big" && (0, _styledComponents.css)(["radius:20px;"]));
}, function (props) {
  return (props.variant === "tertiary" || props.variant === "text colored" || props.variant === "option" || props.variant === "text gray" || props.variant === "dark transparent") && (0, _styledComponents.css)(["", ":first-child svg{margin-left:-4px;}", ":last-child svg{margin-right:-4px;}", " ", ""], StyledLinkElement, StyledLinkElement, props.size === "small" && (0, _styledComponents.css)(["radius:4px;"]), props.size === "big" && (0, _styledComponents.css)(["radius:8px;"]));
});
var StyledLinkElements = exports.StyledLinkElements = _styledComponents.default.div.withConfig({
  displayName: "Styles__StyledLinkElements",
  componentId: "sc-1c1jdox-2"
})(["display:flex;align-items:center;", "{display:inline-flex;svg{margin:0 4px;}}"], StyledLinkElement);
var StyledBackLink = exports.StyledBackLink = _styledComponents.default.a.withConfig({
  displayName: "Styles__StyledBackLink",
  componentId: "sc-1c1jdox-3"
})(["", " ", " ", " text-decoration:none;border:transparent 1px solid;border-radius:20px;height:32px;font-size:10px;font-weight:500;display:table-cell;vertical-align:middle;&:before,&:after{content:\"\";", " border-width:0 1px 1px 0;position:absolute;left:0;transition:all ease 0.3s;}&:before{", " transform:translateX(1rem) translateY(0.1rem) rotate(135deg);}&:after{", " transform:translateX(2rem) translateY(0.1rem) rotate(135deg);}&:hover{text-decoration:none;border-color:var(--border-primary);&:before{", " transform:translateX(0rem) translateY(0.1rem) rotate(135deg);}&:after{", " transform:translateX(1rem) translateY(0.1rem) rotate(135deg);}}"], _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, {
  "display": "inline-flex",
  "cursor": "pointer",
  "paddingLeft": "2rem",
  "paddingRight": "1rem",
  "verticalAlign": "middle",
  "fontSize": "0.6875rem",
  "textTransform": "uppercase",
  "color": "var(--color-theme-600)"
}, {
  "display": "inline-block",
  "height": "0.5rem",
  "width": "0.5rem",
  "borderStyle": "solid",
  "backgroundRepeat": "no-repeat",
  "padding": "0px",
  "color": "var(--color-theme-700)"
}, {
  "opacity": "1"
}, {
  "opacity": "0"
}, {
  "opacity": "0"
}, {
  "opacity": "1"
});
StyledBackLink.displayName = "StyledBackLink";
StyledLinkElement.displayName = "StyledLinkElement";
StyledLinkElements.displayName = "StyledLinkElements";
StyledLink.displayName = "StyledLink";
//# sourceMappingURL=Styles.js.map