@braineet/ui/dist/esm/components/datepicker/styles/DatePickerGlobal.styles.js

Braineet design system

import { css, keyframes } from 'styled-components';
var fontSize = '12px';
var itemSize = '32px';
var navButtonSize = '32px';
var triangleSize = '8px';
var selected = function selected(p) {
  return keyframes(["0%{background-color:", "}100%{background-color:", "}"], p.theme.colors.brand10, p.theme.colors.white);
};
var navigationChevron = css(["border-color:", ";border-style:solid;border-width:3px 3px 0 0;content:'';display:block;height:9px;position:absolute;top:6px;width:9px;&--disabled,&--disabled:hover{border-color:$datepicker__navigation-disabled-color;cursor:default;}"], function (p) {
  return p.theme.colors.gray;
});
var triangleArrow = css(["margin-left:-", " * 0.5;position:absolute;width:0;&::before,&::after{box-sizing:content-box;position:absolute;border:", " solid transparent;height:0;width:1px;content:'';z-index:-1;border-width:", ";left:-", ";}&::before{border-bottom-color:", ";}"], triangleSize, triangleSize, triangleSize, triangleSize, function (p) {
  return p.theme.colors.gray;
});
var triangleArrowUp = css(["", " top:0;margin-top:-", ";&::before,&::after{border-top:none;border-bottom-color:", ";}&::after{top:0;}&::before{top:-1px;border-bottom-color:", ";}"], triangleArrow, triangleSize, function (p) {
  return p.theme.colors.background.white;
}, function (p) {
  return p.theme.colors.gray;
});
var triangleArrowDown = css(["", " bottom:0;margin-bottom:-", ";&::before,&::after{border-bottom:none;border-top-color:#fff;}&::after{bottom:0;}&::before{bottom:-1px;border-top-color:", ";}"], triangleArrow, triangleSize, function (p) {
  return p.theme.colors.gray;
});
export default css([".react-datepicker-wrapper{display:inline-block;padding:0;border:0;width:100%;}.react-datepicker{font-family:'Montserrat';font-size:", ";background-color:#fff;color:", ";border:1px solid ", ";border-radius:", ";display:inline-flex;padding:", ";position:relative;box-shadow:0px 8px 16px rgb(71 82 133 / 32%);min-width:250px;}.react-datepicker__children-container{width:13.8rem;margin:0.4rem;padding-right:0.2rem;padding-left:0.2rem;height:auto;}.react-datepicker__aria-live{position:absolute;clip-path:circle(0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;width:1px;white-space:nowrap;}.react-datepicker__year,.react-datepicker__month{&-container{flex-grow:1;}&--container{flex-grow:1;}}.react-datepicker--time-only{.react-datepicker__triangle{left:35px;}.react-datepicker__time-container{border-left:0;flex-grow:1;}.react-datepicker__time,.react-datepicker__time-box{border-bottom-left-radius:0.3rem;border-bottom-right-radius:0.3rem;}}.react-datepicker__triangle{position:absolute;left:50px;}.react-datepicker-popper{z-index:1;&[data-placement^=\"bottom\"]{padding-top:calc(", " + 2px);.react-datepicker__triangle{", "}}&[data-placement=\"bottom-end\"],&[data-placement=\"top-end\"]{.react-datepicker__triangle{left:auto;right:50px;}}&[data-placement^=\"top\"]{padding-bottom:calc(", " + 2px);.react-datepicker__triangle{", "}}&[data-placement^=\"right\"]{padding-left:", ";.react-datepicker__triangle{left:auto;right:42px;}}&[data-placement^=\"left\"]{padding-right:", ";.react-datepicker__triangle{left:42px;right:auto;}}}.react-datepicker__header{background-color:", ";border-bottom:1px solid ", ";border-top-left-radius:", ";padding-bottom:8px;position:relative;&--time{padding-bottom:8px;padding-left:5px;padding-right:5px;&:not(&--only){border-top-left-radius:0;}}&:not(&--has-time-select){border-top-right-radius:", ";}}.react-datepicker__year-dropdown-container--select,.react-datepicker__month-dropdown-container--select,.react-datepicker__month-year-dropdown-container--select,.react-datepicker__year-dropdown-container--scroll,.react-datepicker__month-dropdown-container--scroll,.react-datepicker__month-year-dropdown-container--scroll{display:inline-block;margin:0 2px;}.react-datepicker__current-month,.react-datepicker-time__header,.react-datepicker-year-header{margin-top:0;color:", ";font-weight:bold;font-size:", " * 1.18;}.react-datepicker-time__header{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}.react-datepicker__navigation{align-items:center;background:none;display:flex;justify-content:center;text-align:center;cursor:pointer;position:absolute;top:2px;padding:0;border:none;z-index:1;height:", ";width:", ";text-indent:-999em;overflow:hidden;&--previous{left:2px;}&--next{right:2px;&--with-time:not(&--with-today-button){right:85px;}}&--years{position:relative;top:0;display:block;margin-left:auto;margin-right:auto;&-previous{top:4px;}&-upcoming{top:-4px;}}&:hover{*::before{border-color:darken(", ",15%);}}}.react-datepicker__navigation-icon{position:relative;top:-1px;font-size:20px;width:0;&::before{", "}&--next{left:-2px;&::before{transform:rotate(45deg);left:-7px;}}&--previous{right:-2px;&::before{transform:rotate(225deg);right:-7px;}}}.react-datepicker__year{margin:", ";text-align:center;&-wrapper{display:flex;justify-content:center;flex-wrap:wrap;max-width:224px;.react-datepicker__year-text{display:flex;justify-content:center;align-items:center;margin:2px;width:48px;height:48px;}}}.react-datepicker__month{margin:", ";&-wrapper{display:flex;justify-content:center;.react-datepicker__month-text,.react-datepicker__quarter-text{display:flex;justify-content:center;align-items:center;margin:2px;width:48px;height:48px;}}}.react-datepicker__input-time-container{clear:both;width:100%;float:left;margin:5px 0 10px 15px;text-align:left;.react-datepicker-time__caption{display:inline-block;}.react-datepicker-time__input-container{display:inline-block;.react-datepicker-time__input{display:inline-block;margin-left:10px;input{width:auto;}input[type=\"time\"]::-webkit-inner-spin-button,input[type=\"time\"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}input[type=\"time\"]{-moz-appearance:textfield;}}.react-datepicker-time__delimiter{margin-left:5px;display:inline-block;}}}.react-datepicker__time-container{float:right;border-left:1px solid ", ";width:85px;&--with-today-button{display:inline;border:1px solid #aeaeae;border-radius:0.3rem;position:absolute;right:-72px;top:0;}.react-datepicker__time{position:relative;background:white;border-bottom-right-radius:0.3rem;.react-datepicker__time-box{width:85px;overflow-x:hidden;margin:0 auto;text-align:center;border-bottom-right-radius:0.3rem;ul.react-datepicker__time-list{list-style:none;margin:0;height:calc(195px + (#{", "}/ 2));overflow-y:scroll;padding-right:0;padding-left:0;width:100%;box-sizing:content-box;li.react-datepicker__time-list-item{height:30px;padding:5px 10px;white-space:nowrap;&:hover{cursor:pointer;background-color:", ";}&--selected{background-color:", ";color:white;font-weight:bold;&:hover{background-color:", ";}}&--disabled{color:", ";&:hover{cursor:default;background-color:transparent;}}}}}}}.react-datepicker__week-number{color:", ";display:inline-block;width:", ";line-height:", ";text-align:center;margin:", ";&.react-datepicker__week-number--clickable{cursor:pointer;&:hover{border-radius:", ";background-color:", ";}}}.react-datepicker__day-names,.react-datepicker__week{white-space:nowrap;display:flex;}.react-datepicker__day-names{margin-bottom:-8px;font-size:10px;}.react-datepicker__day-name,.react-datepicker__day,.react-datepicker__time-name{display:flex;align-items:center;justify-content:center;color:", ";font-weight:600;width:", ";height:", ";line-height:", ";text-align:center;padding:", ";}.react-datepicker__day-name{color:", ";text-transform:uppercase;font-weight:bold;}.react-datepicker__month,.react-datepicker__quarter{&--in-selecting-range{background-color:", ";}&--disabled{color:", ";pointer-events:none;&:hover{cursor:default;background-color:transparent;}}}.react-datepicker__day,.react-datepicker__month-text,.react-datepicker__quarter-text,.react-datepicker__year-text{cursor:pointer;&:hover{border-radius:", ";background-color:", ";color:", ";&--keyboard-selected{background-color:", ";color:", ";}}&--today{font-weight:bold;}&--highlighted{border-radius:", ";background-color:", ";color:#fff;&:hover{background-color:", ";}}&--in-range,&--in-selecting-range:not(&--selected){background-color:", ";color:", ";}&--range-end,&--range-start,&--selecting-range-start,&--selecting-range-end,&--selected{&:not(&:empty){background-color:", " !important;border-radius:", " !important;color:", " !important;}}&--outside-month{color:", ";outline:none !important;&:hover{color:", ";}&:empty{pointer-events:none;background-color:transparent;}}&--in-selecting-range:not(&--in-range){background-color:rgba(", ",0.5);}&--in-range:not(&--in-selecting-range){.react-datepicker__month--selecting-range &{background-color:", ";color:", ";}}&--keyboard-selected{&:not(.react-datepicker__day--excluded,.react-datepicker__day--outside-month){border-radius:", ";background-color:", ";color:", ";animation:", " .7s infinite alternate ease-in;}}&--disabled{cursor:not-allowed;color:", ";&:hover{color:", ";background-color:transparent;}}}.react-datepicker__month,.react-datepicker__quarter-text{&--selected{background-color:", " !important;color:", "  !important;}}.react-datepicker__input-container{position:relative;display:inline-block;width:100%;}.react-datepicker__year-read-view,.react-datepicker__month-read-view,.react-datepicker__month-year-read-view{border:1px solid transparent;border-radius:", ";position:relative;&:hover{cursor:pointer;.react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow{border-top-color:darken(", ",10%);}}&--down-arrow{", " transform:rotate(135deg);right:-16px;top:0;}}.react-datepicker__year-dropdown,.react-datepicker__month-dropdown,.react-datepicker__month-year-dropdown{background-color:", ";position:absolute;width:50%;left:25%;top:30px;z-index:1;text-align:center;border-radius:", ";border:1px solid ", ";&:hover{cursor:pointer;}&--scrollable{height:150px;overflow-y:scroll;}}.react-datepicker__year-option,.react-datepicker__month-option,.react-datepicker__month-year-option{line-height:20px;width:100%;display:block;margin-left:auto;margin-right:auto;&:first-of-type{border-top-left-radius:", ";border-top-right-radius:", ";}&:last-of-type{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-bottom-left-radius:", ";border-bottom-right-radius:", ";}&:hover{background-color:", ";.react-datepicker__navigation--years-upcoming{border-bottom-color:darken(", ",10%);}.react-datepicker__navigation--years-previous{border-top-color:darken(", ",10%);}}&--selected{position:absolute;left:15px;}}.react-datepicker__close-icon{cursor:pointer;background-color:transparent;border:0;outline:0;padding:0 6px 0 0;position:absolute;top:0;right:0;height:100%;display:table-cell;vertical-align:middle;&::after{cursor:pointer;background-color:", ";color:#fff;border-radius:50%;height:16px;width:16px;padding:2px;font-size:", "null", ";border-top:1px solid ", ";cursor:pointer;text-align:center;font-weight:bold;padding:5px 0;clear:left;}.react-datepicker__portal{position:fixed;width:100vw;height:100vh;background-color:rgba(0,0,0,0.8);left:0;top:0;justify-content:center;align-items:center;display:flex;z-index:2147483647;.react-datepicker__day-name,.react-datepicker__day,.react-datepicker__time-name{width:3rem;line-height:3rem;}@media (max-width:400px),(max-height:550px){.react-datepicker__day-name,.react-datepicker__day,.react-datepicker__time-name{width:2rem;line-height:2rem;}}.react-datepicker__current-month,.react-datepicker-time__header{font-size:", " * 1.8;}}"], fontSize, function (p) {
  return p.theme.colors.black;
}, function (p) {
  return p.theme.colors.gray;
}, function (p) {
  return p.theme.borderRadius.md;
}, function (p) {
  return p.theme.spaces.md;
}, triangleSize, triangleArrowUp, triangleSize, triangleArrowDown, triangleSize, triangleSize, function (p) {
  return p.theme.colors.background.white;
}, function (p) {
  return p.theme.colors.gray;
}, function (p) {
  return p.theme.borderRadius.md;
}, function (p) {
  return p.theme.borderRadius.md;
}, function (p) {
  return p.theme.colors.white;
}, fontSize, navButtonSize, navButtonSize, function (p) {
  return p.theme.colors.gray;
}, navigationChevron, function (p) {
  return p.theme.spaces.sm;
}, function (p) {
  return p.theme.spaces.sm;
}, function (p) {
  return p.theme.colors.gray;
}, itemSize, function (p) {
  return p.theme.colors.background.white;
}, function (p) {
  return p.theme.colors.brand;
}, function (p) {
  return p.theme.colors.brand;
}, function (p) {
  return p.theme.colors.gray;
}, function (p) {
  return p.theme.colors.gray;
}, itemSize, itemSize, function (p) {
  return p.theme.spaces.md;
}, function (p) {
  return p.theme.borderRadius.md;
}, function (p) {
  return p.theme.colors.background.white;
}, function (p) {
  return p.theme.colors.black;
}, itemSize, itemSize, itemSize, function (p) {
  return p.theme.spaces.md;
}, function (p) {
  return p.theme.colors.black20;
}, function (p) {
  return p.theme.colors.brand10;
}, function (p) {
  return p.theme.colors.gray;
}, function (p) {
  return p.theme.borderRadius.sm;
}, function (p) {
  return p.theme.colors.brand10;
}, function (p) {
  return p.theme.colors.brand;
}, function (p) {
  return p.theme.colors.white;
}, function (p) {
  return p.theme.colors.black;
}, function (p) {
  return p.theme.borderRadius.md;
}, function (p) {
  return p.theme.colors.lime;
}, function (p) {
  return p.theme.colors.lime90;
}, function (p) {
  return p.theme.colors.brand10;
}, function (p) {
  return p.theme.colors.brand;
}, function (p) {
  return p.theme.colors.brand;
}, function (p) {
  return p.theme.borderRadius.sm;
}, function (p) {
  return p.theme.colors.white;
}, function (p) {
  return p.theme.colors.blackOpacity40;
}, function (p) {
  return p.theme.colors.brand;
}, function (p) {
  return p.theme.colors.brand;
}, function (p) {
  return p.theme.colors.background.white;
}, function (p) {
  return p.theme.colors.black;
}, function (p) {
  return p.theme.borderRadius.sm;
}, function (p) {
  return p.theme.colors.brand10;
}, function (p) {
  return p.theme.colors.brand;
}, function (p) {
  return selected(p);
}, function (p) {
  return p.theme.colors.blackOpacity20;
}, function (p) {
  return p.theme.colors.blackOpacity20;
}, function (p) {
  return p.theme.colors.brand;
}, function (p) {
  return p.theme.colors.white;
}, function (p) {
  return p.theme.borderRadius.md;
}, function (p) {
  return p.theme.colors.gray;
}, navigationChevron, function (p) {
  return p.theme.colors.background.white;
}, function (p) {
  return p.theme.borderRadius.md;
}, function (p) {
  return p.theme.colors.gray;
}, function (p) {
  return p.theme.borderRadius.md;
}, function (p) {
  return p.theme.borderRadius.md;
}, function (p) {
  return p.theme.borderRadius.md;
}, function (p) {
  return p.theme.borderRadius.md;
}, function (p) {
  return p.theme.colors.gray;
}, function (p) {
  return p.theme.colors.gray;
}, function (p) {
  return p.theme.colors.gray;
}, function (p) {
  return p.theme.colors.brand;
}, fontSize, function (p) {
  return p.theme.colors.background.white;
}, function (p) {
  return p.theme.colors.gray;
}, fontSize);