diff options
| -rw-r--r-- | package-lock.json | 175 | ||||
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | src/components/Form/Document/DocumentInfoForm.tsx | 11 | ||||
| -rw-r--r-- | src/styles/datepicker.scss | 807 |
4 files changed, 992 insertions, 3 deletions
diff --git a/package-lock.json b/package-lock.json index f2a280f..278db80 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,11 +16,13 @@ "@types/jest": "^26.0.22", "@types/node": "^14.14.37", "@types/react": "^17.0.3", + "@types/react-datepicker": "^4.1.1", "@types/react-dom": "^17.0.3", "axios": "^0.21.1", "create-react-app": "^4.0.3", "node-sass": "^6.0.0", "react": "^17.0.2", + "react-datepicker": "^4.1.1", "react-dom": "^17.0.2", "react-router": "^5.2.0", "react-router-dom": "^5.2.0", @@ -2501,6 +2503,15 @@ "node": ">= 8" } }, + "node_modules/@popperjs/core": { + "version": "2.9.2", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz", + "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@rollup/plugin-node-resolve": { "version": "7.1.3", "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz", @@ -3043,6 +3054,16 @@ "csstype": "^3.0.2" } }, + "node_modules/@types/react-datepicker": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/@types/react-datepicker/-/react-datepicker-4.1.1.tgz", + "integrity": "sha512-sgEER91giihAaXff8n0rzQr360TXRRjK1jToIVWRoGA2XUJKl7uQye4W/0o4QfQ1ZMYzAUKekjsRtK+VfC9lgg==", + "dependencies": { + "@types/react": "*", + "date-fns": "^2.0.1", + "popper.js": "^1.14.1" + } + }, "node_modules/@types/react-dom": { "version": "17.0.7", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.7.tgz", @@ -5411,6 +5432,11 @@ "node": ">=0.10.0" } }, + "node_modules/classnames": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", + "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" + }, "node_modules/clean-css": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz", @@ -6454,6 +6480,18 @@ "node": ">=10" } }, + "node_modules/date-fns": { + "version": "2.22.1", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.22.1.tgz", + "integrity": "sha512-yUFPQjrxEmIsMqlHhAhmxkuH769baF21Kk+nZwZGyrMoyLA+LugaQtC0+Tqf9CBUUULWwUJt6Q5ySI3LJDDCGg==", + "engines": { + "node": ">=0.11" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/date-fns" + } + }, "node_modules/debug": { "version": "4.3.1", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz", @@ -14255,6 +14293,16 @@ "node": ">=6" } }, + "node_modules/popper.js": { + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz", + "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==", + "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/portfinder": { "version": "1.0.28", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", @@ -15880,6 +15928,23 @@ "node": ">=10" } }, + "node_modules/react-datepicker": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.1.1.tgz", + "integrity": "sha512-vtZIA7MbUrffRw1CHiyOGtmTO/tTdZGr5BYaiRucHMTb6rCqA8TkaQhzX6tTwMwP8vV38Khv4UWohrJbiX1rMw==", + "dependencies": { + "@popperjs/core": "^2.9.2", + "classnames": "^2.2.6", + "date-fns": "^2.0.1", + "prop-types": "^15.7.2", + "react-onclickoutside": "^6.10.0", + "react-popper": "^2.2.5" + }, + "peerDependencies": { + "react": "^16.9.0 || ^17", + "react-dom": "^16.9.0 || ^17" + } + }, "node_modules/react-dev-utils": { "version": "11.0.4", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz", @@ -16113,11 +16178,42 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz", "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==" }, + "node_modules/react-fast-compare": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz", + "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==" + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-onclickoutside": { + "version": "6.11.2", + "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.11.2.tgz", + "integrity": "sha512-640486eSwU/t5iD6yeTlefma8dI3bxPXD93hM9JGKyYITAd0P1JFkkcDeyHZRqNpY/fv1YW0Fad9BXr44OY8wQ==", + "funding": { + "type": "individual", + "url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md" + }, + "peerDependencies": { + "react": "^15.5.x || ^16.x || ^17.x", + "react-dom": "^15.5.x || ^16.x || ^17.x" + } + }, + "node_modules/react-popper": { + "version": "2.2.5", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz", + "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==", + "dependencies": { + "react-fast-compare": "^3.0.1", + "warning": "^4.0.2" + }, + "peerDependencies": { + "@popperjs/core": "^2.0.0", + "react": "^16.8.0 || ^17" + } + }, "node_modules/react-refresh": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", @@ -20271,6 +20367,14 @@ "makeerror": "1.0.x" } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/watchpack": { "version": "1.7.5", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz", @@ -23901,6 +24005,11 @@ } } }, + "@popperjs/core": { + "version": "2.9.2", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz", + "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==" + }, "@rollup/plugin-node-resolve": { "version": "7.1.3", "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz", @@ -24306,6 +24415,16 @@ "csstype": "^3.0.2" } }, + "@types/react-datepicker": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/@types/react-datepicker/-/react-datepicker-4.1.1.tgz", + "integrity": "sha512-sgEER91giihAaXff8n0rzQr360TXRRjK1jToIVWRoGA2XUJKl7uQye4W/0o4QfQ1ZMYzAUKekjsRtK+VfC9lgg==", + "requires": { + "@types/react": "*", + "date-fns": "^2.0.1", + "popper.js": "^1.14.1" + } + }, "@types/react-dom": { "version": "17.0.7", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.7.tgz", @@ -26210,6 +26329,11 @@ } } }, + "classnames": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", + "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" + }, "clean-css": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz", @@ -27054,6 +27178,11 @@ "whatwg-url": "^8.0.0" } }, + "date-fns": { + "version": "2.22.1", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.22.1.tgz", + "integrity": "sha512-yUFPQjrxEmIsMqlHhAhmxkuH769baF21Kk+nZwZGyrMoyLA+LugaQtC0+Tqf9CBUUULWwUJt6Q5ySI3LJDDCGg==" + }, "debug": { "version": "4.3.1", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz", @@ -33089,6 +33218,11 @@ "ts-pnp": "^1.1.6" } }, + "popper.js": { + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz", + "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==" + }, "portfinder": { "version": "1.0.28", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", @@ -34420,6 +34554,19 @@ "whatwg-fetch": "^3.4.1" } }, + "react-datepicker": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.1.1.tgz", + "integrity": "sha512-vtZIA7MbUrffRw1CHiyOGtmTO/tTdZGr5BYaiRucHMTb6rCqA8TkaQhzX6tTwMwP8vV38Khv4UWohrJbiX1rMw==", + "requires": { + "@popperjs/core": "^2.9.2", + "classnames": "^2.2.6", + "date-fns": "^2.0.1", + "prop-types": "^15.7.2", + "react-onclickoutside": "^6.10.0", + "react-popper": "^2.2.5" + } + }, "react-dev-utils": { "version": "11.0.4", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz", @@ -34601,11 +34748,31 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz", "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==" }, + "react-fast-compare": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz", + "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==" + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "react-onclickoutside": { + "version": "6.11.2", + "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.11.2.tgz", + "integrity": "sha512-640486eSwU/t5iD6yeTlefma8dI3bxPXD93hM9JGKyYITAd0P1JFkkcDeyHZRqNpY/fv1YW0Fad9BXr44OY8wQ==", + "requires": {} + }, + "react-popper": { + "version": "2.2.5", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz", + "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==", + "requires": { + "react-fast-compare": "^3.0.1", + "warning": "^4.0.2" + } + }, "react-refresh": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", @@ -37955,6 +38122,14 @@ "makeerror": "1.0.x" } }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "watchpack": { "version": "1.7.5", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz", diff --git a/package.json b/package.json index f19c429..e18bd80 100644 --- a/package.json +++ b/package.json @@ -13,11 +13,13 @@ "@types/jest": "^26.0.22", "@types/node": "^14.14.37", "@types/react": "^17.0.3", + "@types/react-datepicker": "^4.1.1", "@types/react-dom": "^17.0.3", "axios": "^0.21.1", "create-react-app": "^4.0.3", "node-sass": "^6.0.0", "react": "^17.0.2", + "react-datepicker": "^4.1.1", "react-dom": "^17.0.2", "react-router": "^5.2.0", "react-router-dom": "^5.2.0", diff --git a/src/components/Form/Document/DocumentInfoForm.tsx b/src/components/Form/Document/DocumentInfoForm.tsx index 18d0be5..6135b33 100644 --- a/src/components/Form/Document/DocumentInfoForm.tsx +++ b/src/components/Form/Document/DocumentInfoForm.tsx @@ -7,9 +7,12 @@ */ import React, { useState } from "react"; +import DatePicker from "react-datepicker"; +import "./../../../styles/datepicker.scss"; // custom datepicker css +// import "react-datepicker/dist/react-datepicker.css"; import { Person } from "./../../../interfaces"; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { faSync } from '@fortawesome/free-solid-svg-icons' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faSync } from '@fortawesome/free-solid-svg-icons'; import "./../Form.scss"; import SelectClientForm from "./../People/SelectClientForm"; @@ -23,6 +26,7 @@ interface Props { const DocumentInfoForm: React.FC<Props> = (props) => { const [invoiceNumber, setInvoiceNumber] = useState<number>(props.invoiceNumber); + const [invoiceDate, setInvoiceDate] = useState(new Date()); return ( <div className={"DocumentInfoForm"}> <SelectClientForm @@ -48,7 +52,8 @@ const DocumentInfoForm: React.FC<Props> = (props) => { </label> <label> - Invoice Date: <span>wtf do i do</span> + Invoice Date: + <DatePicker className={"smallInputBox"} selected={invoiceDate} onChange={(date: Date) => setInvoiceDate(date)} /> </label> </div> diff --git a/src/styles/datepicker.scss b/src/styles/datepicker.scss new file mode 100644 index 0000000..784bbad --- /dev/null +++ b/src/styles/datepicker.scss @@ -0,0 +1,807 @@ +@import "theme"; + +.react-datepicker__navigation-icon::before, .react-datepicker__year-read-view--down-arrow, +.react-datepicker__month-read-view--down-arrow, +.react-datepicker__month-year-read-view--down-arrow { + border-color: $defFG; + border-style: solid; + border-width: 3px 3px 0 0; + content: ""; + display: block; + height: 9px; + position: absolute; + top: 6px; + width: 9px; +} + +.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle { + margin-left: -4px; + position: absolute; + width: 0; +} + +.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::after, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::after { + box-sizing: content-box; + position: absolute; + border: 8px solid transparent; + height: 0; + width: 1px; + content: ""; + z-index: -1; + border-width: 8px; + left: -8px; +} + +.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before { + border-bottom-color: $border1; +} + +.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle { + top: 0; + margin-top: -8px; +} + +.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::after { + border-top: none; + border-bottom-color: $background1; +} + +.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::after { + top: 0; +} + +.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before { + top: -1px; + border-bottom-color: $border2; +} + +.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle { + bottom: 0; + margin-bottom: -8px; +} + +.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::after { + border-bottom: none; + border-top-color: #fff; +} + +.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::after { + bottom: 0; +} + +.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before { + bottom: -1px; + border-top-color: $border2; +} + +.react-datepicker-wrapper { + display: inline-block; + padding: 0; + border: 0; +} + +.react-datepicker { + font-family: "Helvetica Neue", helvetica, arial, sans-serif; + font-size: 0.8rem; + background-color: $background1; + color: $defFG; + border: 1px solid $border2; + border-radius: 0.3rem; + display: inline-block; + position: relative; +} + +.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, +.react-datepicker--time-only .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; +} + +.react-datepicker-popper[data-placement^="bottom"] { + padding-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"] { + padding-bottom: 10px; +} + +.react-datepicker-popper[data-placement^="right"] { + padding-left: 8px; +} + +.react-datepicker-popper[data-placement^="right"] .react-datepicker__triangle { + left: auto; + right: 42px; +} + +.react-datepicker-popper[data-placement^="left"] { + padding-right: 8px; +} + +.react-datepicker-popper[data-placement^="left"] .react-datepicker__triangle { + left: 42px; + right: auto; +} + +.react-datepicker__header { + text-align: center; + background-color: $background2; + border-bottom: 1px solid $border1; + border-top-left-radius: 0.3rem; + padding: 8px 0; + position: relative; +} + +.react-datepicker__header--time { + padding-bottom: 8px; + padding-left: 5px; + padding-right: 5px; +} + +.react-datepicker__header--time:not(.react-datepicker__header--time--only) { + border-top-left-radius: 0; +} + +.react-datepicker__header:not(.react-datepicker__header--has-time-select) { + border-top-right-radius: 0.3rem; +} + +.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: $defFG; + font-weight: bold; + font-size: 0.944rem; +} + +.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: 32px; + width: 32px; + text-indent: -999em; + overflow: hidden; +} + +.react-datepicker__navigation--previous { + left: 2px; +} + +.react-datepicker__navigation--next { + right: 2px; +} + +.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) { + right: 85px; +} + +.react-datepicker__navigation--years { + position: relative; + top: 0; + display: block; + margin-left: auto; + margin-right: auto; +} + +.react-datepicker__navigation--years-previous { + top: 4px; +} + +.react-datepicker__navigation--years-upcoming { + top: -4px; +} + +.react-datepicker__navigation:hover *::before { + border-color: $altFG; +} + +.react-datepicker__navigation-icon { + position: relative; + top: -1px; + font-size: 20px; +} + +.react-datepicker__navigation-icon--next { + left: -2px; +} + +.react-datepicker__navigation-icon--next::before { + transform: rotate(45deg); + left: -7px; +} + +.react-datepicker__navigation-icon--previous { + right: -2px; +} + +.react-datepicker__navigation-icon--previous::before { + transform: rotate(225deg); + right: -7px; +} + +.react-datepicker__month-container { + float: left; +} + +.react-datepicker__year { + margin: 0.4rem; + text-align: center; +} + +.react-datepicker__year-wrapper { + display: flex; + flex-wrap: wrap; + max-width: 180px; +} + +.react-datepicker__year .react-datepicker__year-text { + display: inline-block; + width: 4rem; + margin: 2px; +} + +.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: auto; +} + +.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 $border2; + width: 85px; +} + +.react-datepicker__time-container--with-today-button { + display: inline; + border: 1px solid $border2; + border-radius: 0.3rem; + position: absolute; + right: -72px; + top: 0; +} + +.react-datepicker__time-container .react-datepicker__time { + position: relative; + background: white; + border-bottom-right-radius: 0.3rem; +} + +.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box { + width: 85px; + overflow-x: hidden; + margin: 0 auto; + text-align: center; + border-bottom-right-radius: 0.3rem; +} + +.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: 0; + padding-left: 0; + 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: $background1; +} + +.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: $altFG; + 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: $altFG; +} + +.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: $background1; +} + +.react-datepicker__day-names, +.react-datepicker__week { + white-space: nowrap; +} + +.react-datepicker__day-names { + margin-bottom: -8px; +} + +.react-datepicker__day-name, +.react-datepicker__day, +.react-datepicker__time-name { + color: $defFG; + 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: $altFG; + 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: $altFG; +} + +.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, +.react-datepicker__year-text { + cursor: pointer; +} + +.react-datepicker__day:hover, +.react-datepicker__month-text:hover, +.react-datepicker__quarter-text:hover, +.react-datepicker__year-text:hover { + border-radius: 0.3rem; + background-color: $background3; +} + +.react-datepicker__day--today, +.react-datepicker__month-text--today, +.react-datepicker__quarter-text--today, +.react-datepicker__year-text--today { + font-weight: bold; +} + +.react-datepicker__day--highlighted, +.react-datepicker__month-text--highlighted, +.react-datepicker__quarter-text--highlighted, +.react-datepicker__year-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, +.react-datepicker__year-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, +.react-datepicker__year-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, +.react-datepicker__year-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, +.react-datepicker__year-text--selected, +.react-datepicker__year-text--in-selecting-range, +.react-datepicker__year-text--in-range { + border-radius: 0.3rem; + background-color: $altFG; + 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, +.react-datepicker__year-text--selected:hover, +.react-datepicker__year-text--in-selecting-range:hover, +.react-datepicker__year-text--in-range:hover { + background-color: $altFG; +} + +.react-datepicker__day--keyboard-selected, +.react-datepicker__month-text--keyboard-selected, +.react-datepicker__quarter-text--keyboard-selected, +.react-datepicker__year-text--keyboard-selected { + border-radius: 0.3rem; + background-color: $altFG; + color: #fff; +} + +.react-datepicker__day--keyboard-selected:hover, +.react-datepicker__month-text--keyboard-selected:hover, +.react-datepicker__quarter-text--keyboard-selected:hover, +.react-datepicker__year-text--keyboard-selected:hover { + background-color: $altFG; +} + +.react-datepicker__day--in-selecting-range , +.react-datepicker__month-text--in-selecting-range , +.react-datepicker__quarter-text--in-selecting-range , +.react-datepicker__year-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 , .react-datepicker__month--selecting-range +.react-datepicker__year-text--in-range { + background-color: $background1; + color: #000; +} + +.react-datepicker__day--disabled, +.react-datepicker__month-text--disabled, +.react-datepicker__quarter-text--disabled, +.react-datepicker__year-text--disabled { + cursor: default; + color: #ccc; +} + +.react-datepicker__day--disabled:hover, +.react-datepicker__month-text--disabled:hover, +.react-datepicker__quarter-text--disabled:hover, +.react-datepicker__year-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: $altFG; +} + +.react-datepicker__month-text:hover, +.react-datepicker__quarter-text:hover { + background-color: $background1; +} + +.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; + position: relative; +} + +.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 { + transform: rotate(135deg); + right: -16px; + top: 0; +} + +.react-datepicker__year-dropdown, +.react-datepicker__month-dropdown, +.react-datepicker__month-year-dropdown { + background-color: $background1; + position: absolute; + width: 50%; + left: 25%; + top: 30px; + z-index: 1; + text-align: center; + border-radius: 0.3rem; + border: 1px solid $border2; +} + +.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: 0 6px 0 0; + position: absolute; + top: 0; + right: 0; + height: 100%; + display: table-cell; + vertical-align: middle; +} + +.react-datepicker__close-icon::after { + cursor: pointer; + background-color: $altFG; + 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: $background1; + border-top: 1px solid $border2; + 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; +} |