@activecollab/components
Version:
ActiveCollab Components
80 lines • 3.82 kB
JavaScript
import styled, { css } from "styled-components";
import { BoxSizingStyle } from "../../BoxSizingStyle";
import { ButtonGroup } from "../../ButtonGroup";
import { FontStyle } from "../../FontStyle";
import { IconButton } from "../../IconButton";
import { Menu } from "../../Menu";
export const StyledButton = styled.button.withConfig({
displayName: "Styles__StyledButton",
componentId: "sc-1v8h7mt-0"
})(["", " ", " ", " color:var(--color-theme-700);margin:0;padding:0;background:none;width:100%;height:auto;border:none;height:30px;line-height:1;transition:all 0.3s ease;svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:hover{text-decoration:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}"], FontStyle, BoxSizingStyle, {
"position": "relative",
"margin": "0px",
"display": "inline-block",
"cursor": "pointer",
"userSelect": "none",
"textAlign": "center",
"verticalAlign": "middle",
"fontSize": "0.875rem",
"lineHeight": "1",
"fontWeight": "500",
"textDecorationLine": "none",
"WebkitFontSmoothing": "antialiased",
"MozOsxFontSmoothing": "grayscale"
});
export const StyledMenu = styled(Menu).withConfig({
displayName: "Styles__StyledMenu",
componentId: "sc-1v8h7mt-1"
})(["", ""], {
"height": "auto",
"width": "auto",
"paddingLeft": "0.5rem",
"paddingRight": "0.5rem",
"paddingTop": "1rem",
"paddingBottom": "1rem"
});
export const StyledButtonGroup = styled(ButtonGroup).withConfig({
displayName: "Styles__StyledButtonGroup",
componentId: "sc-1v8h7mt-2"
})(["", " ", " button:hover{position:relative;z-index:1;}"], FontStyle, BoxSizingStyle);
export const StyledSpan = styled.span.withConfig({
displayName: "Styles__StyledSpan",
componentId: "sc-1v8h7mt-3"
})(["line-height:30px;color:var(--color-theme-700);"]);
export const StyledDiv = styled.div.withConfig({
displayName: "Styles__StyledDiv",
componentId: "sc-1v8h7mt-4"
})(["", " ", " ", " ", " height:32px;transition:all 0.3s ease;background-color:transparent;", " color:var(--color-theme-700);margin-right:-1px;display:block;", " svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}&:hover{", " color:var(--color-primary);text-decoration:none;}&:active{", " color:var(--color-primary);}"], props => props.$isTargetable && css(["", ""], {
"pointerEvents": "none"
}), props => props.$isRounded && css(["border-radius:var(--ac-br-rounded);"]), props => props.$mode !== "flat" ? {
"borderWidth": "1px",
"borderStyle": "solid"
} : {
"borderWidth": "0px"
}, {
"position": "relative",
"margin": "0px",
"display": "inline-block",
"cursor": "pointer",
"userSelect": "none",
"padding": "0px",
"textAlign": "center",
"verticalAlign": "middle",
"fontSize": "0.875rem",
"lineHeight": "1",
"fontWeight": "500",
"textDecorationLine": "none",
"WebkitFontSmoothing": "antialiased",
"MozOsxFontSmoothing": "grayscale"
}, props => props.$mode !== "flat" && css(["border:1px solid var(--color-theme-700);"]), props => !props.$alwaysShowDate && css(["@media (max-width:768px){display:none;}"]), props => props.$mode !== "flat" && css(["border-color:var(--color-primary);"]), props => props.$mode !== "flat" && css(["border-color:var(--color-primary);background-color:var(--color-primary-200);"]));
export const StyledControl = styled(IconButton).withConfig({
displayName: "Styles__StyledControl",
componentId: "sc-1v8h7mt-5"
})(["border-radius:var(--ac-br-8);"]);
StyledButtonGroup.displayName = "StyledButtonGroup";
StyledSpan.displayName = "StyledSpan";
StyledDiv.displayName = "StyledDiv";
StyledMenu.displayName = "StyledMenu";
StyledButton.displayName = "StyledButton";
StyledControl.displayName = "StyledControl";
//# sourceMappingURL=Styles.js.map