@helpscout/hsds-react
Version:
React component library for Help Scout's Design System
84 lines (77 loc) • 9.09 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.PeriodButtonUI = exports.PeriodUI = exports.DateRangeBGHelperUI = exports.TimeUI = exports.DayUI = exports.DaysGridUI = exports.WeekdaysRowUI = exports.SequentialNavButtonUI = exports.DeepNavigatorButtonUI = exports.NavigatorUI = exports.DailyCalendarUI = exports.CalendarContainerUI = void 0;
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _color = require("../../styles/utilities/color");
var _constants = require("../../styles/configs/constants");
var _GlobalStyle = require("../HSDS/GlobalStyle");
var CalendarContainerUI = (0, _styledComponents.default)('div').withConfig({
displayName: "Datepickercss__CalendarContainerUI",
componentId: "sc-10azspr-0"
})(["width:", ";padding:7px 10px 20px;background-color:#fff;border:1px solid ", ";border-radius:4px;box-shadow:0px 1px 7px rgba(0,0,0,0.08);font-family:", ";"], function (_ref) {
var numberOfMonths = _ref.numberOfMonths;
return numberOfMonths * 300 + "px";
}, (0, _color.getColor)('grey.600'), _constants.FONT_FAMILY);
exports.CalendarContainerUI = CalendarContainerUI;
var DailyCalendarUI = (0, _styledComponents.default)('div').withConfig({
displayName: "Datepickercss__DailyCalendarUI",
componentId: "sc-10azspr-1"
})(["", ""], function (_ref2) {
var numberOfMonths = _ref2.numberOfMonths;
return numberOfMonths > 1 ? "\n display: grid;\n grid-template-columns: " + function (_ref3) {
var numberOfMonths = _ref3.numberOfMonths;
return "repeat(" + numberOfMonths + ", 300px)";
} + ";\n grid-gap: 0 64px;\n justify-items: center;\n " : "\n width: calc(100% - 26px);\n margin: 0 auto;\n ";
});
exports.DailyCalendarUI = DailyCalendarUI;
var NavigatorUI = (0, _styledComponents.default)('div').withConfig({
displayName: "Datepickercss__NavigatorUI",
componentId: "sc-10azspr-2"
})(["display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;"]);
exports.NavigatorUI = NavigatorUI;
var DeepNavigatorButtonUI = (0, _styledComponents.default)('button').withConfig({
displayName: "Datepickercss__DeepNavigatorButtonUI",
componentId: "sc-10azspr-3"
})(["height:36px;line-height:32px;border:0;background-color:#fff;color:#fff;font-size:14px;font-weight:500;font-family:", ";color:", ";border:2px solid transparent;border-radius:4px;cursor:pointer;&:focus{outline:0;border:2px solid ", ";}&:not([disabled]):hover{color:", ";background-color:", ";border-color:", ";}"], _GlobalStyle.FONT_FAMILY, (0, _color.getColor)('charcoal.600'), (0, _color.getColor)('blue.500'), (0, _color.getColor)('blue.600'), (0, _color.getColor)('blue.200'), (0, _color.getColor)('blue.200'));
exports.DeepNavigatorButtonUI = DeepNavigatorButtonUI;
var SequentialNavButtonUI = (0, _styledComponents.default)('button').withConfig({
displayName: "Datepickercss__SequentialNavButtonUI",
componentId: "sc-10azspr-4"
})(["height:32px;width:32px;background-color:transparent;padding:0;border:2px solid transparent;border-radius:4px;font-size:12px;color:", ";cursor:pointer;&:focus{outline:0;border:2px solid ", ";}&:not([disabled]):hover{color:", ";background-color:", ";border-color:", ";}&[disabled]{cursor:default;color:", ";}.c-Icon{margin:0 auto;}"], (0, _color.getColor)('charcoal.500'), (0, _color.getColor)('blue.500'), (0, _color.getColor)('blue.600'), (0, _color.getColor)('blue.200'), (0, _color.getColor)('blue.200'), (0, _color.getColor)('charcoal.200'));
exports.SequentialNavButtonUI = SequentialNavButtonUI;
var WeekdaysRowUI = (0, _styledComponents.default)('div').withConfig({
displayName: "Datepickercss__WeekdaysRowUI",
componentId: "sc-10azspr-5"
})(["display:grid;grid-template-columns:repeat(7,1fr);justify-content:center;margin-bottom:10px;font-size:14px;font-family:", ";color:", ";"], _GlobalStyle.FONT_FAMILY, (0, _color.getColor)('charcoal.500'));
exports.WeekdaysRowUI = WeekdaysRowUI;
var DaysGridUI = (0, _styledComponents.default)('div').withConfig({
displayName: "Datepickercss__DaysGridUI",
componentId: "sc-10azspr-6"
})(["display:grid;grid-template-columns:repeat(7,1fr);justify-content:center;"]);
exports.DaysGridUI = DaysGridUI;
var DayUI = (0, _styledComponents.default)('button').withConfig({
displayName: "Datepickercss__DayUI",
componentId: "sc-10azspr-7"
})(["position:relative;width:36px;height:36px;padding:0;line-height:36px;border:0;border-radius:50%;text-align:center;font-size:14px;color:", ";background-color:#ffffff;font-weight:normal;-moz-osx-font-smoothing:antialiased;-webkit-font-smoothing:antialiased;cursor:pointer;z-index:1;transition:box-shadow ease-in-out 0.05s;&.is-today{color:", ";background-color:", ";font-weight:500;-moz-osx-font-smoothing:auto;-webkit-font-smoothing:auto;}&.is-within-hover-range{color:", ";background-color:", ";}&.is-selected,&.is-selected-start,&.is-selected-end{color:#ffffff;background-color:", ";font-weight:500;-moz-osx-font-smoothing:auto;-webkit-font-smoothing:auto;}&.is-disabled{cursor:default;color:#808285;background-color:#ffffff;}&.is-from-another-month{color:", ";background-color:#ffffff;}&:not([disabled]):not(.is-from-another-month):not(.is-selected):not(.is-selected-end):not(.is-selected-start):hover{color:", ";background-color:", ";}&:focus{outline:0;box-shadow:inset 0 0 0 2px ", ";}&.with-range-selection{&.is-selected:not(.is-selected-end):not(.is-selected-start),&.is-selected.is-today:not(.is-selected-end):not(.is-selected-start),&.is-selected.is-from-another-month:not(.is-selected-end),&.is-within-hover-range.is-today:not(.is-selected-end):not(.is-selected-start){background-color:", ";color:", ";}&.is-from-another-month.is-selected-end{color:white;}&.is-selected,&.is-within-hover-range{border-radius:0;font-weight:500;}&.is-within-hover-range:hover,&.is-within-hover-range:nth-child(7n),&.is-selected:nth-child(7n){border-radius:0 50% 50% 0;}&.is-within-hover-range:not(.is-selected-end):not(.is-selected-start):nth-child(7n-6),&.is-selected:not(.is-selected-end):not(.is-selected-start):nth-child(7n-6){border-radius:50% 0 0 50%;&:not(.is-selected):hover{border-radius:50%;}}&.is-selected-start,&.is-selected-end,&.is-selected-start:hover,&.is-selected-end:hover{border-radius:50%;}}"], (0, _color.getColor)('charcoal.600'), (0, _color.getColor)('charcoal.700'), (0, _color.getColor)('grey.300'), (0, _color.getColor)('blue.500'), (0, _color.getColor)('blue.200'), (0, _color.getColor)('blue.500'), (0, _color.getColor)('charcoal.200'), (0, _color.getColor)('blue.600'), (0, _color.getColor)('blue.200'), (0, _color.getColor)('blue.500'), (0, _color.getColor)('blue.200'), (0, _color.getColor)('blue.500'));
exports.DayUI = DayUI;
var TimeUI = (0, _styledComponents.default)('time').withConfig({
displayName: "Datepickercss__TimeUI",
componentId: "sc-10azspr-8"
})(["display:block;width:36px;height:36px;line-height:36px;text-align:center;position:relative;z-index:1;.is-selected-start &,.is-selected-end &{background-color:", ";border-radius:50%;}"], (0, _color.getColor)('blue.500'));
exports.TimeUI = TimeUI;
var DateRangeBGHelperUI = (0, _styledComponents.default)('div').withConfig({
displayName: "Datepickercss__DateRangeBGHelperUI",
componentId: "sc-10azspr-9"
})(["position:absolute;width:36px;height:36px;background-color:", ";top:0;left:0;z-index:0;.is-within-hover-range:hover &.is-selected-start-marker{border-radius:50%;}&.is-selected-start-marker{border-radius:50% 0 0 50%;}&.is-selected-end-marker{border-radius:0 50% 50% 0;}"], (0, _color.getColor)('blue.200'));
exports.DateRangeBGHelperUI = DateRangeBGHelperUI;
var PeriodUI = (0, _styledComponents.default)('div').withConfig({
displayName: "Datepickercss__PeriodUI",
componentId: "sc-10azspr-10"
})(["display:grid;grid-template-columns:repeat(3,1fr);grid-row-gap:8px;justify-items:center;"]);
exports.PeriodUI = PeriodUI;
var PeriodButtonUI = (0, _styledComponents.default)('button').withConfig({
displayName: "Datepickercss__PeriodButtonUI",
componentId: "sc-10azspr-11"
})(["width:84px;height:36px;line-height:32px;border:2px solid transparent;border-radius:3px;background-color:#fff;text-align:center;font-size:14px;color:", ";-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;cursor:pointer;.is-mode-months &{font-family:", ";}&.is-this-period{color:", ";background-color:", ";}&.is-selected{color:#fff;background-color:", ";-moz-osx-font-smoothing:auto;-webkit-font-smoothing:none;}&[disabled]{color:", ";cursor:default;}&:not([disabled]):not(.is-selected):hover{color:", ";background-color:", ";border-color:", ";}&:focus{outline:0;border-radius:4px;border:2px solid ", ";}"], (0, _color.getColor)('charcoal.600'), _GlobalStyle.FONT_FAMILY, (0, _color.getColor)('charcoal.700'), (0, _color.getColor)('grey.300'), (0, _color.getColor)('blue.500'), (0, _color.getColor)('charcoal.200'), (0, _color.getColor)('blue.600'), (0, _color.getColor)('blue.200'), (0, _color.getColor)('blue.200'), (0, _color.getColor)('blue.500'));
exports.PeriodButtonUI = PeriodButtonUI;