@activecollab/components
Version:
ActiveCollab Components
56 lines • 2.66 kB
JavaScript
import styled, { css } from "styled-components";
import { Button } from "../Button/Button";
export const StyledNavBarButton = styled(Button).withConfig({
displayName: "Styles__StyledNavBarButton",
componentId: "sc-1owijsg-0"
})(["position:absolute;margin-top:1px;cursor:pointer;z-index:2;background-image:none;", " ", ""], props => props.$direction === "previous" && css(["right:auto;left:1px;"]), props => props.$direction === "next" && css(["right:1px;"]));
export const StyledMonths = styled.div.withConfig({
displayName: "Styles__StyledMonths",
componentId: "sc-1owijsg-1"
})(["top:30px;height:230px;", ""], {
"position": "absolute",
"left": "0px",
"zIndex": "10",
"display": "flex",
"flexWrap": "wrap",
"backgroundColor": "var(--page-paper-main)",
"padding": "1.25rem"
});
export const StyledMonth = styled.div.withConfig({
displayName: "Styles__StyledMonth",
componentId: "sc-1owijsg-2"
})(["width:26%;transition-duration:0.3s;", " ", " ", " ", " ", ""], {
"margin": "auto",
"cursor": "pointer",
"borderRadius": "1rem",
"fontSize": "0.875rem",
"lineHeight": "1.25rem",
"fontWeight": "700"
}, props => !props.$isSelected ? css(["&:hover{background-color:var(--color-primary-300);}"]) : css(["", " background-color:var(--color-primary);"], {
"color": "var(--color-theme-100)"
}), props => props.$isCurrent && !props.$isSelected && css(["", ""], {
"color": "var(--color-primary)"
}), props => props.$isCurrent && props.$isSelected && css(["color:var(--color-theme-100);"]), props => props.$isCurrentQuarter && css(["background-color:var(--color-primary-300);"]));
export const StyledYearMonthPicker = styled.div.withConfig({
displayName: "Styles__StyledYearMonthPicker",
componentId: "sc-1owijsg-3"
})(["display:table-caption;margin-bottom:0.5rem;padding:0 0.5rem;", " &> div{font-weight:500;font-size:1.15rem;}"], {
"textAlign": "center",
"color": "var(--color-theme-900)"
});
export const StyledYearMonthPickerNavBar = styled.div.withConfig({
displayName: "Styles__StyledYearMonthPickerNavBar",
componentId: "sc-1owijsg-4"
})(["width:auto;margin:0 auto;"]);
export const StyledYearMonthPickerNavBarItem = styled.span.withConfig({
displayName: "Styles__StyledYearMonthPickerNavBarItem",
componentId: "sc-1owijsg-5"
})(["", " transition-duration:0.3s;display:inline-block;&:hover{background-color:var(--color-primary-300);border-radius:15px;}"], {
"cursor": "pointer",
"paddingLeft": "1rem",
"paddingRight": "1rem"
});
StyledNavBarButton.displayName = "StyledNavBarButton";
StyledMonths.displayName = "StyledMonths";
StyledMonth.displayName = "StyledMonth";
//# sourceMappingURL=Styles.js.map