From b830ee41cddc3cfbb413047f45ed790f1d45cace Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Tue, 22 Mar 2022 21:50:26 +0100
Subject: [PATCH] chore: add date picker styles

---
 studio/styles/date-picker.scss | 101 +++++++++++++++++++++++++++++++++
 1 file changed, 101 insertions(+)
 create mode 100644 studio/styles/date-picker.scss

diff --git a/studio/styles/date-picker.scss b/studio/styles/date-picker.scss
new file mode 100644
index 00000000000..90f96730ae2
--- /dev/null
+++ b/studio/styles/date-picker.scss
@@ -0,0 +1,101 @@
+/* // date picker */
+
+.react-datepicker__input-container input {
+  @apply block w-full text-base md:text-sm bg-white border border-scale-300 rounded shadow-sm;
+}
+
+.react-datepicker-popper {
+  @apply z-40 w-72 text-sm bg-scale-100 dark:bg-scale-300 shadow px-3 py-2 border-2 border-scale-200 rounded;
+}
+
+.react-datepicker-left {
+  @apply absolute left-0 right-auto top-11 transform-none #{!important};
+}
+
+.react-datepicker-right {
+  @apply absolute right-0 left-auto top-11 transform-none #{!important};
+}
+
+.react-datepicker__portal {
+  @apply absolute z-10 w-72 text-sm transform-none bg-white shadow px-3 py-2 top-12 right-0 border-2 border-scale-200 rounded;
+}
+
+.react-datepicker__month-container {
+  @apply flex flex-col;
+}
+
+.react-datepicker__month {
+  @apply flex flex-col;
+  @apply -space-y-px;
+}
+
+.react-datepicker__current-month {
+  @apply ml-2.5 text-lg font-semibold text-scale-800;
+}
+
+.react-datepicker__week {
+  @apply flex -space-x-px;
+}
+
+.react-datepicker__day-names {
+  @apply flex -space-x-px text-scale-900 font-normal text-center text-xs;
+}
+
+.react-datepicker__day-name {
+  @apply w-10 h-10 flex items-center justify-center py-1 rounded-full;
+}
+
+.react-datepicker__navigation {
+  @apply absolute top-2;
+}
+
+.react-datepicker__navigation--previous {
+  @apply right-12 w-10 h-10 rounded transition flex items-center justify-center hover:bg-scale-200;
+}
+
+.react-datepicker__navigation--next {
+  @apply right-4 w-10 h-10 rounded transition flex items-center justify-center hover:bg-scale-200;
+}
+
+.react-datepicker__day {
+  @apply w-10 h-10 flex items-center font-normal justify-center text-sm leading-loose transition text-scale-1100;
+  /* @apply mb-1 py-1; */
+  @apply -space-y-px;
+  @apply border border-scale-500;
+}
+
+.react-datepicker__day--disabled {
+  @apply cursor-not-allowed opacity-40 hover:bg-transparent;
+}
+
+.react-datepicker__day--outside-month {
+  @apply text-scale-800;
+}
+
+.react-datepicker__day--in-range {
+  @apply bg-brand-800 text-scale-fixed-100 border-brand-800;
+}
+
+.react-datepicker__day--in-selecting-range {
+  @apply bg-brand-700 text-scale-fixed-100 border-brand-700;
+}
+
+.react-datepicker__day--selecting-range-start {
+  @apply bg-scale-200;
+}
+
+.react-datepicker__day--selecting-range-end {
+  @apply bg-scale-200;
+}
+
+.react-datepicker__day--selected {
+  @apply bg-brand-800 text-white;
+}
+
+.react-datepicker__day--range-start {
+  @apply bg-brand-900 text-white hover:text-scale-700 hover:bg-white;
+}
+
+.react-datepicker__day--range-end {
+  @apply bg-brand-900 text-white hover:text-scale-700 hover:bg-white;
+}