@procore/core-react
Version:
React library of Procore Design Guidelines
66 lines (65 loc) • 4.56 kB
JavaScript
import styled, { css } from 'styled-components';
import { Button } from '../Button/Button';
import { getTypographyIntent, typographyWeights } from '../Typography/Typography.styles';
import { borderRadius } from '../_styles/borderRadius';
import { colors } from '../_styles/colors';
import { spacing } from '../_styles/spacing';
var cellSize = 36; // TODO one-off size
export var StyledContainer = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledContainer",
componentId: "core-12_44_0__sc-1kkl86t-0"
})(["", ";display:inline-flex;flex-direction:column;padding:", "px ", "px ", "px;"], getTypographyIntent('small'), spacing.lg, spacing.md, spacing.md);
export var StyledPaginator = /*#__PURE__*/styled(Button).withConfig({
displayName: "StyledPaginator",
componentId: "core-12_44_0__sc-1kkl86t-1"
})(["flex:0 0 auto;"]);
export var StyledSelect = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledSelect",
componentId: "core-12_44_0__sc-1kkl86t-2"
})(["display:inline-flex;flex:1 1 0;margin-left:", "px;> div{font-size:12px;}"], spacing.sm);
export var StyledNavigation = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledNavigation",
componentId: "core-12_44_0__sc-1kkl86t-3"
})(["display:inline-flex;margin-bottom:", "px;", " + ", ",", " + ", "{margin-left:", "px;}"], spacing.sm, StyledPaginator, StyledSelect, StyledSelect, StyledPaginator, spacing.sm);
export var StyledCell = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledCell",
componentId: "core-12_44_0__sc-1kkl86t-4"
})(["align-items:center;display:inline-flex;height:", "px;justify-content:center;width:", "px;"], cellSize, cellSize);
export var StyledDayHeaderCell = /*#__PURE__*/styled(StyledCell).withConfig({
displayName: "StyledDayHeaderCell",
componentId: "core-12_44_0__sc-1kkl86t-5"
})(["cursor:default;font-weight:", ";"], typographyWeights.semibold);
export var StyledCellButton = /*#__PURE__*/styled.button.attrs({
type: 'button'
}).withConfig({
displayName: "StyledCellButton",
componentId: "core-12_44_0__sc-1kkl86t-6"
})(["align-items:center;display:inline-flex;height:", "px;justify-content:center;width:", "px;cursor:pointer;border:none;background:none;padding:0;font:inherit;"], cellSize, cellSize);
export var StyledDayCell = /*#__PURE__*/styled(StyledCellButton).withConfig({
displayName: "StyledDayCell",
componentId: "core-12_44_0__sc-1kkl86t-7"
})(["", ""], function (_ref) {
var _ref$$disabled = _ref.$disabled,
$disabled = _ref$$disabled === void 0 ? false : _ref$$disabled,
_ref$$selected = _ref.$selected,
$selected = _ref$$selected === void 0 ? false : _ref$$selected,
_ref$$isCurrentMonth = _ref.$isCurrentMonth,
$isCurrentMonth = _ref$$isCurrentMonth === void 0 ? true : _ref$$isCurrentMonth,
_ref$$isToday = _ref.$isToday,
$isToday = _ref$$isToday === void 0 ? false : _ref$$isToday,
_ref$$isRangeStart = _ref.$isRangeStart,
$isRangeStart = _ref$$isRangeStart === void 0 ? false : _ref$$isRangeStart,
_ref$$isRangeEnd = _ref.$isRangeEnd,
$isRangeEnd = _ref$$isRangeEnd === void 0 ? false : _ref$$isRangeEnd;
if ($disabled) {
return css(["background-color:", ";color:", ";font-weight:", ";pointer-events:none;"], colors.gray94, $isCurrentMonth ? colors.gray45 : colors.gray70, $isToday && typographyWeights.bold);
} else if ($selected) {
return css(["background-color:", ";border-top-left-radius:", "px;border-bottom-left-radius:", "px;border-top-right-radius:", "px;border-bottom-right-radius:", "px;color:", ";font-weight:", ";cursor:pointer;"], $isRangeStart || $isRangeEnd ? colors.blue40 : colors.blue50, $isRangeStart ? borderRadius.md : 0, $isRangeStart ? borderRadius.md : 0, $isRangeEnd ? borderRadius.md : 0, $isRangeEnd ? borderRadius.md : 0, colors.white, typographyWeights.semibold);
}
return css(["color:", ";cursor:pointer;font-weight:", ";&:hover{background-color:", ";border-radius:", "px;}"], !$isCurrentMonth && colors.gray45, $isToday && typographyWeights.bold, colors.blue96, borderRadius.md);
});
export var StyledWeekRow = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledWeekRow",
componentId: "core-12_44_0__sc-1kkl86t-8"
})(["display:inline-flex;padding-bottom:2px;user-select:none;&:last-child{padding-bottom:0;}", "{&:first-child{border-top-left-radius:", "px;border-bottom-left-radius:", "px;}&:last-child{border-top-right-radius:", "px;border-bottom-right-radius:", "px;}}"], StyledCell, borderRadius.md, borderRadius.md, borderRadius.md, borderRadius.md);
//# sourceMappingURL=Calendar.styles.js.map