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

ActiveCollab Components

import styled, { css } from "styled-components";
import { BoxSizingStyle } from "../BoxSizingStyle";
import { FontStyle } from "../FontStyle";
export const StyledButton = styled.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, BoxSizingStyle, 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: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);}"]), props => (props.variant === "secondary" || props.variant === "outlined") && 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);}"]), 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,&:focus-visible{background-color:rgba(0,0,0,0.85);}&:active{background-color:var(--only-black);}"]), props => (props.variant === "tertiary" || props.variant === "text colored") && 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);}"]), props => (props.variant === "option" || props.variant === "text gray") && 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);}"]), props => props.variant === "circle raised" && 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);}"]), props => props.iconOnly && css(["display:inline-flex;justify-content:center;align-items:center;padding:0;width:32px;", ";", " ", ""], (props.size === "small" || props.size === "big") && css(["border-radius:var(--ac-br-rounded);"]), props.size === "small" && css(["width:24px;"]), props.size === "big" && css(["width:40px;"])), props => (props.variant === "primary" || props.variant === "contained" || props.variant === "secondary" || props.variant === "outlined") && 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") && css(["border-radius:var(--ac-br-rounded);"])), props => (props.variant === "tertiary" || props.variant === "text colored" || props.variant === "option" || props.variant === "text gray" || props.variant === "dark transparent") && css([".c-btn__elements__element:first-child svg{margin-left:-4px;}.c-btn__elements__element:last-child svg{margin-right:-4px;}", " ", ""], props.size === "small" && css(["border-radius:var(--ac-br-4);"]), props.size === "big" && css(["border-radius:var(--ac-br-8);"])), props => props.active && css(["", " ", " ", " ", " ", " ", ""], (props.variant === "primary" || props.variant === "contained") && css(["background-color:var(--color-primary-800);"]), (props.variant === "secondary" || props.variant === "outlined") && css(["border-color:var(--color-primary);color:var(--color-primary);"]), props.variant === "dark transparent" && css(["background-color:var(--only-black);"]), props.variant === "circle raised" && css(["background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);"]), (props.variant === "tertiary" || props.variant === "text colored") && css(["background-color:var(--color-primary-200);"]), (props.variant === "option" || props.variant === "text gray") && css(["color:var(--color-primary);&:hover,&:focus-visible{color:var(--color-primary);}", ""], props.children instanceof Array && css(["background-color:var(--color-theme-300);"]))));
StyledButton.displayName = "StyledButton";
export const StyledButtonElements = styled.span.withConfig({
  displayName: "Styles__StyledButtonElements",
  componentId: "sc-vi1kcr-1"
})(["display:flex;align-items:center;"]);
StyledButtonElements.displayName = "StyledButtonElements";
export const StyledButtonElement = styled.span.withConfig({
  displayName: "Styles__StyledButtonElement",
  componentId: "sc-vi1kcr-2"
})(["display:inline-flex;svg{margin:0 4px;}"]);
StyledButtonElement.displayName = "StyledButtonElement";
//# sourceMappingURL=Styles.js.map