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

Vimeo Design System

import { a as __makeTemplateObject } from '../../../../tslib.es6-7f0e734f.js';
import styled, { css } from 'styled-components';
import { rem, padding, transparentize, margin } from 'polished';
import { Menu as Menu$1 } from '../../../Menu/Menu.esm.js';
import { Button } from '../../../Button/Button.esm.js';
import { black, blue } from '../../../../color/colors.esm.js';
import 'react';
import '../../../Menu/Menu.style.esm.js';
import '../../../../tokens/core.esm.js';
import '../../../../tokens/color/index.esm.js';
import '../../../../tokens/color/background/background.esm.js';
import '../../../../tokens/util/readToken.esm.js';
import '../../../../tokens/util/clamp.esm.js';
import '../../../../tokens/color/format/format.esm.js';
import '../../../../tokens/color/format/primary.esm.js';
import '../../../../tokens/color/format/secondary.esm.js';
import '../../../../tokens/color/format/tertiary.esm.js';
import '../../../../tokens/color/rainbow/rainbow.esm.js';
import '../../../../tokens/color/rainbow/conic/index.esm.js';
import '../../../../tokens/color/rainbow/conic/sm.esm.js';
import '../../../../tokens/color/rainbow/conic/xl.esm.js';
import '../../../../tokens/color/rainbow/linear/index.esm.js';
import '../../../../tokens/color/rainbow/linear/sm.esm.js';
import '../../../../tokens/color/rainbow/linear/xl.esm.js';
import '../../../../tokens/color/livestream/livestream.esm.js';
import '../../../../tokens/color/status/status.esm.js';
import '../../../../tokens/color/status/caution.esm.js';
import '../../../../tokens/color/status/negative.esm.js';
import '../../../../tokens/color/status/positive.esm.js';
import '../../../../tokens/color/stroke/stroke.esm.js';
import '../../../../tokens/color/surface/surface.esm.js';
import '../../../../tokens/color/text/text.esm.js';
import '../../../../tokens/util/round.esm.js';
import '../../../../tokens/color/upsell/upsell.esm.js';
import '../../../../tokens/color/upsell/sm.esm.js';
import '../../../../tokens/color/upsell/xl.esm.js';
import '../../../../tokens/color/upsell/new.esm.js';
import '../../../../tokens/edge/edge.esm.js';
import '../../../../tokens/space/space.esm.js';
import '../../../../tokens/typography/index.esm.js';
import '../../../../tokens/typography/size/size.esm.js';
import '../../../Menu/Menu.minors.esm.js';
import '../../../../icons/ui/ChevronDown.esm.js';
import '../../../../utils/css.esm.js';
import '../../../../utils/HOCs/withIris.esm.js';
import '../../../Button/Button.style.esm.js';
import '../../../Button/Button.config.esm.js';
import '../../../Button/FeaturedIcon.esm.js';
import '../../../../themes/index.esm.js';
import '../../../LoaderCircular/LoaderCircular.esm.js';
import '../../../LoaderCircular/LoaderCircular.style.esm.js';
import '../../../../utils/hooks/useDeprecate.esm.js';
import '../../../../utils/general/mergeReactRefs.esm.js';

var DateField = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-top: ", ";\n  flex: 0 0 calc(50% - ", ");\n"], ["\n  padding-top: ", ";\n  flex: 0 0 calc(50% - ", ");\n"])), rem(16), rem(32));
var DateRangeContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
var Menu = styled(Menu$1)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 0 0 12rem;\n  padding-top: ", ";\n"], ["\n  flex: 0 0 12rem;\n  padding-top: ", ";\n"])), rem(8));
var CalendarsContainer = styled.div(templateObject_4 || (templateObject_4 = __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;
}, rem(3));
var CalendarHeader = styled.div(templateObject_5 || (templateObject_5 = __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"])), padding(0, rem(16)));
var CalendarsBody = styled.div(templateObject_6 || (templateObject_6 = __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"])), padding(0, rem(16)));
var CalendarsFooter = styled.div(templateObject_7 || (templateObject_7 = __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"])), rem(2), rem(3), transparentize(0.9, black), padding(rem(8)), margin(rem(8), 0, 0));
var ClearButton = styled(Button)(templateObject_10 || (templateObject_10 = __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"])), rem(14), blue(500), function (props) {
    if (props.hidden) {
        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        opacity: 0;\n        visibility: hidden;\n      "], ["\n        opacity: 0;\n        visibility: hidden;\n      "])));
    }
    else {
        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        opacity: 100;\n        visibility: visible;\n      "], ["\n        opacity: 100;\n        visibility: visible;\n      "])));
    }
});
var ApplyButton = styled(Button)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  padding: 0 ", ";\n  ", "\n"], ["\n  padding: 0 ", ";\n  ", "\n"])), rem(32), function (props) {
    return props.disabled && css(templateObject_11 || (templateObject_11 = __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;

export { ApplyButton, CalendarHeader, CalendarsBody, CalendarsContainer, CalendarsFooter, ClearButton, DateField, DateRangeContainer, Menu };