@vimeo/iris/components/inputs/Dates/DateRange/DateRange.style.js

Vimeo Design System

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib_es6 = require('../../../../tslib.es6-3ec409b7.js');
var styled = require('styled-components');
var polished = require('polished');
var components_Menu_Menu = require('../../../Menu/Menu.js');
var components_Button_Button = require('../../../Button/Button.js');
var color_colors = require('../../../../color/colors.js');
require('react');
require('../../../Menu/Menu.style.js');
require('../../../../tokens/core.js');
require('../../../../tokens/color/index.js');
require('../../../../tokens/color/background/background.js');
require('../../../../tokens/util/readToken.js');
require('../../../../tokens/util/clamp.js');
require('../../../../tokens/color/format/format.js');
require('../../../../tokens/color/format/primary.js');
require('../../../../tokens/color/format/secondary.js');
require('../../../../tokens/color/format/tertiary.js');
require('../../../../tokens/color/rainbow/rainbow.js');
require('../../../../tokens/color/rainbow/conic/index.js');
require('../../../../tokens/color/rainbow/conic/sm.js');
require('../../../../tokens/color/rainbow/conic/xl.js');
require('../../../../tokens/color/rainbow/linear/index.js');
require('../../../../tokens/color/rainbow/linear/sm.js');
require('../../../../tokens/color/rainbow/linear/xl.js');
require('../../../../tokens/color/livestream/livestream.js');
require('../../../../tokens/color/status/status.js');
require('../../../../tokens/color/status/caution.js');
require('../../../../tokens/color/status/negative.js');
require('../../../../tokens/color/status/positive.js');
require('../../../../tokens/color/stroke/stroke.js');
require('../../../../tokens/color/surface/surface.js');
require('../../../../tokens/color/text/text.js');
require('../../../../tokens/util/round.js');
require('../../../../tokens/color/upsell/upsell.js');
require('../../../../tokens/color/upsell/sm.js');
require('../../../../tokens/color/upsell/xl.js');
require('../../../../tokens/color/upsell/new.js');
require('../../../../tokens/edge/edge.js');
require('../../../../tokens/space/space.js');
require('../../../../tokens/typography/index.js');
require('../../../../tokens/typography/size/size.js');
require('../../../Menu/Menu.minors.js');
require('../../../../icons/ui/ChevronDown.js');
require('../../../../utils/css.js');
require('../../../../utils/HOCs/withIris.js');
require('../../../Button/Button.style.js');
require('../../../Button/Button.config.js');
require('../../../Button/FeaturedIcon.js');
require('../../../../themes/index.js');
require('../../../LoaderCircular/LoaderCircular.js');
require('../../../LoaderCircular/LoaderCircular.style.js');
require('../../../../utils/hooks/useDeprecate.js');
require('../../../../utils/general/mergeReactRefs.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

var DateField = styled__default["default"].div(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  padding-top: ", ";\n  flex: 0 0 calc(50% - ", ");\n"], ["\n  padding-top: ", ";\n  flex: 0 0 calc(50% - ", ");\n"])), polished.rem(16), polished.rem(32));
var DateRangeContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
var Menu = styled__default["default"](components_Menu_Menu.Menu)(templateObject_3 || (templateObject_3 = tslib_es6.__makeTemplateObject(["\n  flex: 0 0 12rem;\n  padding-top: ", ";\n"], ["\n  flex: 0 0 12rem;\n  padding-top: ", ";\n"])), polished.rem(8));
var CalendarsContainer = styled__default["default"].div(templateObject_4 || (templateObject_4 = tslib_es6.__makeTemplateObject(["\n  flex: 0 0 40rem;\n  flex-flow: row wrap;\n  display: ", ";\n  background-color: ", ";\n  border-radius: ", ";\n"], ["\n  flex: 0 0 40rem;\n  flex-flow: row wrap;\n  display: ", ";\n  background-color: ", ";\n  border-radius: ", ";\n"])), function (props) { return (props.hidden ? 'hidden' : 'flex'); }, function (_a) {
    var theme = _a.theme;
    return theme.item.bg;
}, polished.rem(3));
var CalendarHeader = styled__default["default"].div(templateObject_5 || (templateObject_5 = tslib_es6.__makeTemplateObject(["\n  display: flex;\n  justify-content: space-around;\n  flex: 1 1 100%;\n  ", ";\n"], ["\n  display: flex;\n  justify-content: space-around;\n  flex: 1 1 100%;\n  ", ";\n"])), polished.padding(0, polished.rem(16)));
var CalendarsBody = styled__default["default"].div(templateObject_6 || (templateObject_6 = tslib_es6.__makeTemplateObject(["\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: space-around;\n  flex: 1 1 100%;\n  ", ";\n"], ["\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: space-around;\n  flex: 1 1 100%;\n  ", ";\n"])), polished.padding(0, polished.rem(16)));
var CalendarsFooter = styled__default["default"].div(templateObject_7 || (templateObject_7 = tslib_es6.__makeTemplateObject(["\n  display: flex;\n  flex: 1 1 100%;\n  justify-content: space-between;\n  box-shadow: 0 -", " ", " ", ";\n  ", ";\n  ", "\n"], ["\n  display: flex;\n  flex: 1 1 100%;\n  justify-content: space-between;\n  box-shadow: 0 -", " ", " ", ";\n  ", ";\n  ", "\n"])), polished.rem(2), polished.rem(3), polished.transparentize(0.9, color_colors.black), polished.padding(polished.rem(8)), polished.margin(polished.rem(8), 0, 0));
var ClearButton = styled__default["default"](components_Button_Button.Button)(templateObject_10 || (templateObject_10 = tslib_es6.__makeTemplateObject(["\n  font-size: ", ";\n  font-weight: 400;\n  &:hover {\n    text-decoration: underline;\n    color: ", ";\n    background: none;\n    border-color: rgba(255, 255, 255, 0);\n  }\n\n  transition: opacity ease 300ms;\n\n  ", "\n"], ["\n  font-size: ", ";\n  font-weight: 400;\n  &:hover {\n    text-decoration: underline;\n    color: ", ";\n    background: none;\n    border-color: rgba(255, 255, 255, 0);\n  }\n\n  transition: opacity ease 300ms;\n\n  ", "\n"])), polished.rem(14), color_colors.blue(500), function (props) {
    if (props.hidden) {
        return styled.css(templateObject_8 || (templateObject_8 = tslib_es6.__makeTemplateObject(["\n        opacity: 0;\n        visibility: hidden;\n      "], ["\n        opacity: 0;\n        visibility: hidden;\n      "])));
    }
    else {
        return styled.css(templateObject_9 || (templateObject_9 = tslib_es6.__makeTemplateObject(["\n        opacity: 100;\n        visibility: visible;\n      "], ["\n        opacity: 100;\n        visibility: visible;\n      "])));
    }
});
var ApplyButton = styled__default["default"](components_Button_Button.Button)(templateObject_12 || (templateObject_12 = tslib_es6.__makeTemplateObject(["\n  padding: 0 ", ";\n  ", "\n"], ["\n  padding: 0 ", ";\n  ", "\n"])), polished.rem(32), function (props) {
    return props.disabled && styled.css(templateObject_11 || (templateObject_11 = tslib_es6.__makeTemplateObject(["\n      cursor: not-allowed;\n      color: #d0d8db;\n      border-color: ", ";\n      background-color: ", ";\n    "], ["\n      cursor: not-allowed;\n      color: #d0d8db;\n      border-color: ", ";\n      background-color: ", ";\n    "])), function (_a) {
        var theme = _a.theme;
        return theme.item.locked;
    }, function (_a) {
        var theme = _a.theme;
        return theme.item.locked;
    });
});
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;

exports.ApplyButton = ApplyButton;
exports.CalendarHeader = CalendarHeader;
exports.CalendarsBody = CalendarsBody;
exports.CalendarsContainer = CalendarsContainer;
exports.CalendarsFooter = CalendarsFooter;
exports.ClearButton = ClearButton;
exports.DateField = DateField;
exports.DateRangeContainer = DateRangeContainer;
exports.Menu = Menu;