tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

extracts DatePicker out from within a field-type

Browse Source
This commit is contained in:
James
2020-05-28 10:49:02 -04:00
parent a8277c1947
commit f2e8ca957b
11 changed files with 328 additions and 1041 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/client/components/forms/field-types/DateTime/date-picker.md → src/client/components/elements/DatePicker/date-picker.md
View File

105
src/client/components/elements/DatePicker/index.js Normal file
View File

@@ -0,0 +1,105 @@
import React from 'react';
import PropTypes from 'prop-types';
import DatePicker from 'react-datepicker';
import CalendarIcon from '../../icons/Calendar';
import 'react-datepicker/dist/react-datepicker.css';
import './index.scss';
const baseClass = 'date-time-picker';
const DateTime = (props) => {
const {
inputDateTimeFormat,
useDate,
minDate,
maxDate,
monthsShown,
useTime,
minTime,
maxTime,
timeIntervals,
timeFormat,
placeholder: placeholderText,
value,
onChange,
} = props;
let dateTimeFormat = inputDateTimeFormat;
if (!dateTimeFormat) {
if (useTime && useDate) dateTimeFormat = 'MMM d, yyy h:mma';
else if (useTime) dateTimeFormat = 'h:mma';
else dateTimeFormat = 'MMM d, yyy';
}
const dateTimePickerProps = {
minDate,
maxDate,
dateFormat: dateTimeFormat,
monthsShown: Math.min(2, monthsShown),
showTimeSelect: useTime,
minTime,
maxTime,
timeIntervals,
timeFormat,
placeholderText,
onChange,
showPopperArrow: false,
selected: value && new Date(value),
customInputRef: 'ref',
};
const classes = [
baseClass,
!useDate && `${baseClass}--hide-dates`,
].filter(Boolean).join(' ');
console.log(value);
return (
<div className={classes}>
<div className={`${baseClass}__input-wrapper`}>
<DatePicker {...dateTimePickerProps} />
<CalendarIcon />
</div>
</div>
);
};
DateTime.defaultProps = {
placeholder: undefined,
// date specific props
useDate: true,
minDate: new Date(),
maxDate: null,
monthsShown: 1,
inputDateTimeFormat: '',
// time specific props
useTime: false,
minTime: new Date('4040-01-01T01:00:00'),
maxTime: new Date('4040-01-01T24:00:00'),
timeIntervals: 30,
timeFormat: 'h:mm aa',
value: undefined,
};
DateTime.propTypes = {
placeholder: PropTypes.string,
// date specific props
useDate: PropTypes.bool,
minDate: PropTypes.instanceOf(Date),
maxDate: PropTypes.instanceOf(Date),
monthsShown: PropTypes.number,
inputDateTimeFormat: PropTypes.string,
// time specific props
useTime: PropTypes.bool,
minTime: PropTypes.instanceOf(Date),
maxTime: PropTypes.instanceOf(Date),
timeIntervals: PropTypes.number,
timeFormat: PropTypes.string,
value: PropTypes.instanceOf(Date),
onChange: PropTypes.func.isRequired,
};
export default DateTime;

194
src/client/components/elements/DatePicker/index.scss Normal file
View File

@@ -0,0 +1,194 @@
@import '../../forms/field-types/shared.scss';
$cal-icon-width: 18px;
.date-time-picker {
&--hide-dates {
.react-datepicker {
&__month-container {
display: none;
visibility: hidden;
}
}
}
&__input-wrapper {
position: relative;
.icon {
pointer-events: none;
position: absolute;
right: base(.75);
top: 50%;
transform: translateY(-50%);
width: $cal-icon-width;
height: auto;
@include color-svg($color-dark-gray);
}
}
.react-datepicker-wrapper {
display: block;
}
.react-datepicker-wrapper,
.react-datepicker__input-container {
width: 100%;
}
.react-datepicker__input-container input {
@include formInput;
padding-right: calc(#{base(.75)} + #{$cal-icon-width});
}
&--has-error {
.react-datepicker__input-container input {
background-color: lighten($color-red, 20%);
}
}
.react-datepicker {
@include shadow-sm;
background: white;
display: inline-flex;
border: 1px solid $color-light-gray;
font-family: $font-body;
font-weight: 100;
border-radius: 0;
border: none;
&__header {
padding-top: 0;
text-transform: none;
text-align: center;
border-radius: 0;
border: none;
background-color: white;
&--time {
padding: 10px 0;
border-bottom: 1px solid $color-light-gray;
font-weight: bold;
}
}
&__navigation {
background: none;
line-height: 1.7rem;
text-align: center;
cursor: pointer;
position: absolute;
top: 10px;
width: 0;
padding: 0;
border: 0.45rem solid transparent;
z-index: 1;
height: 10px;
width: 10px;
text-indent: -999em;
overflow: hidden;
top: 15px;
&--next {
border-left-color: $color-gray;
&:focus {
border-left-color: darken($color-gray, 30%);
outline:none;
}
}
&--previous {
border-right-color: $color-gray;
&:focus {
border-right-color: darken($color-gray, 30%);
outline:none;
}
}
}
&__current-month {
padding: 10px 0;
}
&__time-container {
border-left: 1px solid $color-light-gray;
}
&__day-names {
background-color: $color-light-gray;
}
&__day {
box-shadow: inset 0px 0px 0px 1px $color-light-gray, 0px 0px 0px 1px $color-light-gray;
font-size: base(.55);
&:focus {
outline: 0;
background: $color-gray;
}
&--selected {
&:focus {
background-color: $color-dark-gray;
}
}
&--keyboard-selected {
color: white;
&:focus {
background-color: $color-light-gray;
box-shadow: inset 0px 0px 0px 1px $color-dark-gray, 0px 0px 0px 1px $color-dark-gray;
}
}
}
}
.react-datepicker-popper {
z-index: 10;
}
.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
background: $color-dark-gray;
color: $color-dark-gray;
font-weight: normal;
border-radius: 0;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected,
.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range, .react-datepicker__month-text--selected, .react-datepicker__month-text--in-selecting-range, .react-datepicker__month-text--in-range {
background: $color-dark-gray;
color: $color-dark-gray;
border-radius: 0;
}
.react-datepicker__day:hover, .react-datepicker__month-text:hover {
border-radius: 0;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box,
.react-datepicker__time-container {
width: 120px;
}
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
right: 130px;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
line-height: 20px;
}
@include small-break {
&__input-wrapper {
.icon {
top: calc(50% - #{base(.25)});
}
}
}
}

19
src/client/components/elements/WhereBuilder/Condition/Date/index.js
View File

@@ -1,5 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import DatePicker from '../../../DatePicker';
import './index.scss';
@@ -7,18 +8,22 @@ const baseClass = 'condition-value-date';
const DateField = ({ onChange, value }) => {
return (
<input
className={baseClass}
type="text"
onChange={e => onChange(e.target.value)}
value={value}
/>
<div className={baseClass}>
<DatePicker
onChange={onChange}
value={value}
/>
</div>
);
};
DateField.defaultProps = {
value: undefined,
};
DateField.propTypes = {
onChange: PropTypes.func.isRequired,
value: PropTypes.string.isRequired,
value: PropTypes.instanceOf(Date),
};
export default DateField;

5
src/client/components/elements/WhereBuilder/Condition/Date/index.scss
View File

@@ -1,6 +1 @@
@import '../../../../../scss/styles.scss';
@import '../../../../forms/field-types/shared.scss';
.condition-value-date {
@include formInput;
}

3
src/client/components/elements/WhereBuilder/Condition/index.js
View File

@@ -72,6 +72,7 @@ const Condition = (props) => {
path={`${collectionSlug}.fields.${activeField.value}.filter`}
DefaultComponent={ValueComponent}
componentProps={{
...activeField.props,
value: value.value,
onChange: updatedValue => dispatch({
type: 'update',
@@ -127,6 +128,8 @@ Condition.propTypes = {
value: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Date),
PropTypes.shape({}),
]),
}).isRequired,
dispatch: PropTypes.func.isRequired,

3
src/client/components/elements/WhereBuilder/index.js
View File

@@ -31,6 +31,9 @@ const WhereBuilder = (props) => {
label: field.label,
value: field.name,
...fieldTypes[field.type],
props: {
...field,
},
};
return [

75
src/client/components/forms/field-types/DateTime/index.js
View File

@@ -1,19 +1,17 @@
import React from 'react';
import PropTypes from 'prop-types';
import DatePicker from 'react-datepicker';
import DatePicker from '../../../elements/DatePicker';
import withConditions from '../../withConditions';
import useFieldType from '../../useFieldType';
import Label from '../../Label';
import Error from '../../Error';
import CalendarIcon from '../../../icons/Calendar';
import 'react-datepicker/dist/react-datepicker.css';
import './index.scss';
const defaultError = 'Please fill in the field with a valid date';
const baseClass = 'date-time-picker';
const baseClass = 'date-time-field';
const DateTime = (props) => {
const {
@@ -25,17 +23,6 @@ const DateTime = (props) => {
width,
errorMessage,
label,
inputDateTimeFormat,
useDate,
minDate,
maxDate,
monthsShown,
useTime,
minTime,
maxTime,
timeIntervals,
timeFormat,
placeholder: placeholderText,
} = props;
const {
@@ -50,34 +37,9 @@ const DateTime = (props) => {
validate,
});
let dateTimeFormat = inputDateTimeFormat;
if (!dateTimeFormat) {
if (useTime && useDate) dateTimeFormat = 'MMM d, yyy h:mma';
else if (useTime) dateTimeFormat = 'h:mma';
else dateTimeFormat = 'MMM d, yyy';
}
const dateTimePickerProps = {
minDate,
maxDate,
dateFormat: dateTimeFormat,
monthsShown: Math.min(2, monthsShown),
showTimeSelect: useTime,
minTime,
maxTime,
timeIntervals,
timeFormat,
placeholderText,
onChange: val => onFieldChange(val),
showPopperArrow: false,
selected: value && new Date(value),
customInputRef: 'ref',
};
const classes = [
'field-type',
baseClass,
!useDate && `${baseClass}--hide-dates`,
showError && `${baseClass}--has-error`,
formProcessing && 'processing',
].filter(Boolean).join(' ');
@@ -102,8 +64,11 @@ const DateTime = (props) => {
required={required}
/>
<div className={`${baseClass}__input-wrapper`}>
<DatePicker {...dateTimePickerProps} />
<CalendarIcon />
<DatePicker
{...props}
onChange={onFieldChange}
value={value}
/>
</div>
</div>
);
@@ -113,47 +78,21 @@ DateTime.defaultProps = {
label: null,
required: false,
defaultValue: null,
placeholder: undefined,
validate: null,
errorMessage: defaultError,
width: 100,
style: {},
// date specific props
useDate: true,
minDate: new Date(),
maxDate: null,
monthsShown: 1,
inputDateTimeFormat: '',
// time specific props
useTime: false,
minTime: new Date('4040-01-01T01:00:00'),
maxTime: new Date('4040-01-01T24:00:00'),
timeIntervals: 30,
timeFormat: 'h:mm aa',
};
DateTime.propTypes = {
name: PropTypes.string.isRequired,
label: PropTypes.string,
required: PropTypes.bool,
placeholder: PropTypes.string,
defaultValue: PropTypes.string,
validate: PropTypes.func,
errorMessage: PropTypes.string,
width: PropTypes.number,
style: PropTypes.shape({}),
// date specific props
useDate: PropTypes.bool,
minDate: PropTypes.instanceOf(Date),
maxDate: PropTypes.instanceOf(Date),
monthsShown: PropTypes.number,
inputDateTimeFormat: PropTypes.string,
// time specific props
useTime: PropTypes.bool,
minTime: PropTypes.instanceOf(Date),
maxTime: PropTypes.instanceOf(Date),
timeIntervals: PropTypes.number,
timeFormat: PropTypes.string,
};
export default withConditions(DateTime);

189
src/client/components/forms/field-types/DateTime/index.scss
View File

@@ -1,194 +1,9 @@
@import '../shared';
$cal-icon-width: 18px;
.date-time-picker {
&--hide-dates {
.react-datepicker {
&__month-container {
display: none;
visibility: hidden;
}
}
}
&__input-wrapper {
position: relative;
.icon {
pointer-events: none;
position: absolute;
right: base(.75);
top: 50%;
transform: translateY(-50%);
width: $cal-icon-width;
height: auto;
@include color-svg($color-dark-gray);
}
}
.react-datepicker-wrapper {
display: block;
}
.react-datepicker-wrapper,
.react-datepicker__input-container {
width: 100%;
}
.react-datepicker__input-container input {
@include formInput;
padding-right: calc(#{base(.75)} + #{$cal-icon-width});
}
@import '../../../../scss/styles';
.date-time-field {
&--has-error {
.react-datepicker__input-container input {
background-color: lighten($color-red, 20%);
}
}
.react-datepicker {
@include shadow-sm;
background: white;
display: inline-flex;
border: 1px solid $color-light-gray;
font-family: $font-body;
font-weight: 100;
border-radius: 0;
border: none;
&__header {
padding-top: 0;
text-transform: none;
text-align: center;
border-radius: 0;
border: none;
background-color: white;
&--time {
padding: 10px 0;
border-bottom: 1px solid $color-light-gray;
font-weight: bold;
}
}
&__navigation {
background: none;
line-height: 1.7rem;
text-align: center;
cursor: pointer;
position: absolute;
top: 10px;
width: 0;
padding: 0;
border: 0.45rem solid transparent;
z-index: 1;
height: 10px;
width: 10px;
text-indent: -999em;
overflow: hidden;
top: 15px;
&--next {
border-left-color: $color-gray;
&:focus {
border-left-color: darken($color-gray, 30%);
outline:none;
}
}
&--previous {
border-right-color: $color-gray;
&:focus {
border-right-color: darken($color-gray, 30%);
outline:none;
}
}
}
&__current-month {
padding: 10px 0;
}
&__time-container {
border-left: 1px solid $color-light-gray;
}
&__day-names {
background-color: $color-light-gray;
}
&__day {
box-shadow: inset 0px 0px 0px 1px $color-light-gray, 0px 0px 0px 1px $color-light-gray;
font-size: base(.55);
&:focus {
outline: 0;
background: $color-gray;
}
&--selected {
&:focus {
background-color: $color-dark-gray;
}
}
&--keyboard-selected {
color: white;
&:focus {
background-color: $color-light-gray;
box-shadow: inset 0px 0px 0px 1px $color-dark-gray, 0px 0px 0px 1px $color-dark-gray;
}
}
}
}
.react-datepicker-popper {
z-index: 10;
}
.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
background: $color-dark-gray;
color: $color-dark-gray;
font-weight: normal;
border-radius: 0;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected,
.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range, .react-datepicker__month-text--selected, .react-datepicker__month-text--in-selecting-range, .react-datepicker__month-text--in-range {
background: $color-dark-gray;
color: $color-dark-gray;
border-radius: 0;
}
.react-datepicker__day:hover, .react-datepicker__month-text:hover {
border-radius: 0;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box,
.react-datepicker__time-container {
width: 120px;
}
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
right: 130px;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
line-height: 20px;
}
@include small-break {
&__input-wrapper {
.icon {
top: calc(50% - #{base(.25)});
}
}
}
}

773
src/client/components/forms/field-types/DateTime/react-datepicker.scss
View File

@@ -1,773 +0,0 @@
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
margin-left: -8px;
position: absolute;
}
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before,
.react-datepicker__month-year-read-view--down-arrow::before {
box-sizing: content-box;
position: absolute;
border: 8px solid transparent;
height: 0;
width: 1px;
}
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before,
.react-datepicker__month-year-read-view--down-arrow::before {
content: "";
z-index: -1;
border-width: 8px;
left: -8px;
border-bottom-color: #aeaeae;
}
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
top: 0;
margin-top: -8px;
}
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
border-top: none;
border-bottom-color: #f0f0f0;
}
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
top: -1px;
border-bottom-color: #aeaeae;
}
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
bottom: 0;
margin-bottom: -8px;
}
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before,
.react-datepicker__month-year-read-view--down-arrow::before {
border-bottom: none;
border-top-color: #fff;
}
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before,
.react-datepicker__month-year-read-view--down-arrow::before {
bottom: -1px;
border-top-color: #aeaeae;
}
.react-datepicker-wrapper {
display: inline-block;
padding: 0;
border: 0;
}
.react-datepicker--time-only .react-datepicker__triangle {
left: 35px;
}
.react-datepicker--time-only .react-datepicker__time-container {
border-left: 0;
}
.react-datepicker--time-only .react-datepicker__time {
border-radius: 0.3rem;
}
.react-datepicker--time-only .react-datepicker__time-box {
border-radius: 0.3rem;
}
.react-datepicker__triangle {
position: absolute;
left: 50px;
}
.react-datepicker-popper {
z-index: 1;
}
.react-datepicker-popper[data-placement^="bottom"] {
margin-top: 10px;
}
.react-datepicker-popper[data-placement="bottom-end"] .react-datepicker__triangle, .react-datepicker-popper[data-placement="top-end"] .react-datepicker__triangle {
left: auto;
right: 50px;
}
.react-datepicker-popper[data-placement^="top"] {
margin-bottom: 10px;
}
.react-datepicker-popper[data-placement^="right"] {
margin-left: 8px;
}
.react-datepicker-popper[data-placement^="right"] .react-datepicker__triangle {
left: auto;
right: 42px;
}
.react-datepicker-popper[data-placement^="left"] {
margin-right: 8px;
}
.react-datepicker-popper[data-placement^="left"] .react-datepicker__triangle {
left: 42px;
right: auto;
}
.react-datepicker__header {
text-align: center;
background-color: #f0f0f0;
border-bottom: 1px solid #aeaeae;
border-top-left-radius: 0.3rem;
border-top-right-radius: 0.3rem;
padding-top: 8px;
position: relative;
}
.react-datepicker__header--time {
padding-bottom: 8px;
padding-left: 5px;
padding-right: 5px;
}
.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: #000;
font-weight: bold;
font-size: 0.944rem;
}
.react-datepicker-time__header {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.react-datepicker__navigation {
background: none;
line-height: 1.7rem;
text-align: center;
cursor: pointer;
position: absolute;
top: 10px;
width: 0;
padding: 0;
border: 0.45rem solid transparent;
z-index: 1;
height: 10px;
width: 10px;
text-indent: -999em;
overflow: hidden;
}
.react-datepicker__navigation--previous {
left: 10px;
border-right-color: #ccc;
}
.react-datepicker__navigation--previous:hover {
border-right-color: #b3b3b3;
}
.react-datepicker__navigation--previous--disabled, .react-datepicker__navigation--previous--disabled:hover {
border-right-color: #e6e6e6;
cursor: default;
}
.react-datepicker__navigation--next {
right: 10px;
border-left-color: #ccc;
}
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
right: 80px;
}
.react-datepicker__navigation--next:hover {
border-left-color: #b3b3b3;
}
.react-datepicker__navigation--next--disabled, .react-datepicker__navigation--next--disabled:hover {
border-left-color: #e6e6e6;
cursor: default;
}
.react-datepicker__navigation--years {
position: relative;
top: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.react-datepicker__navigation--years-previous {
top: 4px;
border-top-color: #ccc;
}
.react-datepicker__navigation--years-previous:hover {
border-top-color: #b3b3b3;
}
.react-datepicker__navigation--years-upcoming {
top: -4px;
border-bottom-color: #ccc;
}
.react-datepicker__navigation--years-upcoming:hover {
border-bottom-color: #b3b3b3;
}
.react-datepicker__month-container {
float: left;
}
.react-datepicker__month {
margin: 0.4rem;
text-align: center;
}
.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
display: inline-block;
width: 4rem;
margin: 2px;
}
.react-datepicker__input-time-container {
clear: both;
width: 100%;
float: left;
margin: 5px 0 10px 15px;
text-align: left;
}
.react-datepicker__input-time-container .react-datepicker-time__caption {
display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container {
display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
display: inline-block;
margin-left: 10px;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
width: 85px;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]::-webkit-inner-spin-button,
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"] {
-moz-appearance: textfield;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
margin-left: 5px;
display: inline-block;
}
.react-datepicker__time-container {
float: right;
border-left: 1px solid #aeaeae;
width: 85px;
}
.react-datepicker__time-container--with-today-button {
display: inline;
border: 1px solid #aeaeae;
border-radius: 0.3rem;
position: absolute;
right: -72px;
top: 0;
}
.react-datepicker__time-container .react-datepicker__time {
position: relative;
background: white;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
width: 85px;
overflow-x: hidden;
margin: 0 auto;
text-align: center;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
list-style: none;
margin: 0;
height: calc(195px + (1.7rem / 2));
overflow-y: scroll;
padding-right: 0px;
padding-left: 0px;
width: 100%;
box-sizing: content-box;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
height: 30px;
padding: 5px 10px;
white-space: nowrap;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
cursor: pointer;
background-color: #f0f0f0;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
background-color: #216ba5;
color: white;
font-weight: bold;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
background-color: #216ba5;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
color: #ccc;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
cursor: default;
background-color: transparent;
}
.react-datepicker__week-number {
color: #ccc;
display: inline-block;
width: 1.7rem;
line-height: 1.7rem;
text-align: center;
margin: 0.166rem;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable {
cursor: pointer;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
border-radius: 0.3rem;
background-color: #f0f0f0;
}
.react-datepicker__day-names,
.react-datepicker__week {
white-space: nowrap;
}
.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
color: #000;
display: inline-block;
width: 1.7rem;
line-height: 1.7rem;
text-align: center;
margin: 0.166rem;
}
.react-datepicker__month--selected, .react-datepicker__month--in-selecting-range, .react-datepicker__month--in-range,
.react-datepicker__quarter--selected,
.react-datepicker__quarter--in-selecting-range,
.react-datepicker__quarter--in-range {
border-radius: 0.3rem;
background-color: #216ba5;
color: #fff;
}
.react-datepicker__month--selected:hover, .react-datepicker__month--in-selecting-range:hover, .react-datepicker__month--in-range:hover,
.react-datepicker__quarter--selected:hover,
.react-datepicker__quarter--in-selecting-range:hover,
.react-datepicker__quarter--in-range:hover {
background-color: #1d5d90;
}
.react-datepicker__month--disabled,
.react-datepicker__quarter--disabled {
color: #ccc;
pointer-events: none;
}
.react-datepicker__month--disabled:hover,
.react-datepicker__quarter--disabled:hover {
cursor: default;
background-color: transparent;
}
.react-datepicker__day,
.react-datepicker__month-text,
.react-datepicker__quarter-text {
cursor: pointer;
}
.react-datepicker__day:hover,
.react-datepicker__month-text:hover,
.react-datepicker__quarter-text:hover {
border-radius: 0.3rem;
background-color: #f0f0f0;
}
.react-datepicker__day--today,
.react-datepicker__month-text--today,
.react-datepicker__quarter-text--today {
font-weight: bold;
}
.react-datepicker__day--highlighted,
.react-datepicker__month-text--highlighted,
.react-datepicker__quarter-text--highlighted {
border-radius: 0.3rem;
background-color: #3dcc4a;
color: #fff;
}
.react-datepicker__day--highlighted:hover,
.react-datepicker__month-text--highlighted:hover,
.react-datepicker__quarter-text--highlighted:hover {
background-color: #32be3f;
}
.react-datepicker__day--highlighted-custom-1,
.react-datepicker__month-text--highlighted-custom-1,
.react-datepicker__quarter-text--highlighted-custom-1 {
color: magenta;
}
.react-datepicker__day--highlighted-custom-2,
.react-datepicker__month-text--highlighted-custom-2,
.react-datepicker__quarter-text--highlighted-custom-2 {
color: green;
}
.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--in-range {
border-radius: 0.3rem;
background-color: #216ba5;
color: #fff;
}
.react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,
.react-datepicker__month-text--selected:hover,
.react-datepicker__month-text--in-selecting-range:hover,
.react-datepicker__month-text--in-range:hover,
.react-datepicker__quarter-text--selected:hover,
.react-datepicker__quarter-text--in-selecting-range:hover,
.react-datepicker__quarter-text--in-range:hover {
background-color: #1d5d90;
}
.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected {
border-radius: 0.3rem;
background-color: #2a87d0;
color: #fff;
}
.react-datepicker__day--keyboard-selected:hover,
.react-datepicker__month-text--keyboard-selected:hover,
.react-datepicker__quarter-text--keyboard-selected:hover {
background-color: #1d5d90;
}
.react-datepicker__day--in-selecting-range ,
.react-datepicker__month-text--in-selecting-range ,
.react-datepicker__quarter-text--in-selecting-range {
background-color: rgba(33, 107, 165, 0.5);
}
.react-datepicker__month--selecting-range .react-datepicker__day--in-range , .react-datepicker__month--selecting-range
.react-datepicker__month-text--in-range , .react-datepicker__month--selecting-range
.react-datepicker__quarter-text--in-range {
background-color: #f0f0f0;
color: #000;
}
.react-datepicker__day--disabled,
.react-datepicker__month-text--disabled,
.react-datepicker__quarter-text--disabled {
cursor: default;
color: #ccc;
}
.react-datepicker__day--disabled:hover,
.react-datepicker__month-text--disabled:hover,
.react-datepicker__quarter-text--disabled:hover {
background-color: transparent;
}
.react-datepicker__month-text.react-datepicker__month--selected:hover, .react-datepicker__month-text.react-datepicker__month--in-range:hover, .react-datepicker__month-text.react-datepicker__quarter--selected:hover, .react-datepicker__month-text.react-datepicker__quarter--in-range:hover,
.react-datepicker__quarter-text.react-datepicker__month--selected:hover,
.react-datepicker__quarter-text.react-datepicker__month--in-range:hover,
.react-datepicker__quarter-text.react-datepicker__quarter--selected:hover,
.react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover {
background-color: #216ba5;
}
.react-datepicker__month-text:hover,
.react-datepicker__quarter-text:hover {
background-color: #f0f0f0;
}
.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: 0.3rem;
}
.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover,
.react-datepicker__month-year-read-view:hover {
cursor: pointer;
}
.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
border-top-color: #b3b3b3;
}
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
border-top-color: #ccc;
float: right;
margin-left: 20px;
top: 8px;
position: relative;
border-width: 0.45rem;
}
.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown {
background-color: #f0f0f0;
position: absolute;
width: 50%;
left: 25%;
top: 30px;
z-index: 1;
text-align: center;
border-radius: 0.3rem;
border: 1px solid #aeaeae;
}
.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover,
.react-datepicker__month-year-dropdown:hover {
cursor: pointer;
}
.react-datepicker__year-dropdown--scrollable,
.react-datepicker__month-dropdown--scrollable,
.react-datepicker__month-year-dropdown--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;
}
.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type,
.react-datepicker__month-year-option:first-of-type {
border-top-left-radius: 0.3rem;
border-top-right-radius: 0.3rem;
}
.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type,
.react-datepicker__month-year-option:last-of-type {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-bottom-left-radius: 0.3rem;
border-bottom-right-radius: 0.3rem;
}
.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover,
.react-datepicker__month-year-option:hover {
background-color: #ccc;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
border-bottom-color: #b3b3b3;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
border-top-color: #b3b3b3;
}
.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected,
.react-datepicker__month-year-option--selected {
position: absolute;
left: 15px;
}
.react-datepicker__close-icon {
cursor: pointer;
background-color: transparent;
border: 0;
outline: 0;
padding: 0px 6px 0px 0px;
position: absolute;
top: 0;
right: 0;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.react-datepicker__close-icon::after {
cursor: pointer;
background-color: #216ba5;
color: #fff;
border-radius: 50%;
height: 16px;
width: 16px;
padding: 2px;
font-size: 12px;
line-height: 1;
text-align: center;
display: table-cell;
vertical-align: middle;
content: "\00d7";
}
.react-datepicker__today-button {
background: #f0f0f0;
border-top: 1px solid #aeaeae;
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__portal .react-datepicker__day-name,
.react-datepicker__portal .react-datepicker__day,
.react-datepicker__portal .react-datepicker__time-name {
width: 3rem;
line-height: 3rem;
}
@media (max-width: 400px), (max-height: 550px) {
.react-datepicker__portal .react-datepicker__day-name,
.react-datepicker__portal .react-datepicker__day,
.react-datepicker__portal .react-datepicker__time-name {
width: 2rem;
line-height: 2rem;
}
}
.react-datepicker__portal .react-datepicker__current-month,
.react-datepicker__portal .react-datepicker-time__header {
font-size: 1.44rem;
}
.react-datepicker__portal .react-datepicker__navigation {
border: 0.81rem solid transparent;
}
.react-datepicker__portal .react-datepicker__navigation--previous {
border-right-color: #ccc;
}
.react-datepicker__portal .react-datepicker__navigation--previous:hover {
border-right-color: #b3b3b3;
}
.react-datepicker__portal .react-datepicker__navigation--previous--disabled, .react-datepicker__portal .react-datepicker__navigation--previous--disabled:hover {
border-right-color: #e6e6e6;
cursor: default;
}
.react-datepicker__portal .react-datepicker__navigation--next {
border-left-color: #ccc;
}
.react-datepicker__portal .react-datepicker__navigation--next:hover {
border-left-color: #b3b3b3;
}
.react-datepicker__portal .react-datepicker__navigation--next--disabled, .react-datepicker__portal .react-datepicker__navigation--next--disabled:hover {
border-left-color: #e6e6e6;
cursor: default;
}

3
src/client/scss/svg.scss
View File

@@ -1,6 +1,7 @@
@mixin color-svg($color) {
.stroke {
stroke: $color;
stroke: $color;
fill: none;
}
.fill {