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

ActiveCollab Components

import styled, { css } from "styled-components";
import { BoxSizingStyle } from "../BoxSizingStyle";
import { FontStyle } from "../FontStyle";
export const StyledLinkElement = styled.div.withConfig({
  displayName: "Styles__StyledLinkElement",
  componentId: "sc-1c1jdox-0"
})([""]);
export const StyledLink = styled.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, 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"
}, props => props.disabled && css(["cursor:default;opacity:50%;pointer-events:none;"]), props => props.size === "small" && css(["height:24px;"]), props => props.size === "big" && css(["height:40px;"]), props => (props.variant === "primary" || props.variant === "contained") && 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);}"]), props => (props.variant === "secondary" || props.variant === "outlined") && 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);}"]), props => (props.variant === "tertiary" || props.variant === "text colored") && 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);}"]), props => (props.variant === "option" || props.variant === "text gray") && 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);}"]), props => props.variant === "dark transparent" && 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);}"]), props => props.variant === "circle raised" && 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);}"]), props => props.variant === "text link-primary" && 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;}"]), props => props.variant === "text link-gray" && 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;}"]), props => props.$iconOnly && css(["padding:0;width:32px;", " ", ""], props.size === "small" && css(["radius:16px;width:24px;"]), props.size === "big" && css(["radius:20px;width:40px;"])), props => (props.variant === "primary" || props.variant === "contained" || props.variant === "secondary" || props.variant === "outlined") && css(["", ":first-child svg{margin-left:-6px;}", ":last-child svg{margin-right:-6px;}", " ", ""], StyledLinkElement, StyledLinkElement, props.size === "small" && css(["radius:16px;"]), props.size === "big" && css(["radius:20px;"])), props => (props.variant === "tertiary" || props.variant === "text colored" || props.variant === "option" || props.variant === "text gray" || props.variant === "dark transparent") && css(["", ":first-child svg{margin-left:-4px;}", ":last-child svg{margin-right:-4px;}", " ", ""], StyledLinkElement, StyledLinkElement, props.size === "small" && css(["radius:4px;"]), props.size === "big" && css(["radius:8px;"])));
export const StyledLinkElements = styled.div.withConfig({
  displayName: "Styles__StyledLinkElements",
  componentId: "sc-1c1jdox-2"
})(["display:flex;align-items:center;", "{display:inline-flex;svg{margin:0 4px;}}"], StyledLinkElement);
export const StyledBackLink = styled.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, 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