#7517 date picker dark theme

twosigma · Jun 14, 2018 · 24bdc2f · 24bdc2f
1 parent 3377236
commit 24bdc2f
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 1 deletion.
diff --git a/js/lab/src/theme/static/base.css b/js/lab/src/theme/static/base.css
@@ -40,6 +40,8 @@
   color: var(--jp-widgets-input-color);
   font-size: var(--jp-widgets-font-size);
 }
+
+.widget-select select:focus,
 .widget-select-multiple select:focus {
   border-color: var(--jp-widgets-input-focus-border-color);
 }
@@ -65,4 +67,28 @@
 .easyform-combobox-toggle:hover {
   border-color: var(--jp-widgets-input-focus-border-color);
   background-color: var(--jp-widgets-input-background-color);
-}
+}
+
+.beaker-easyform-container .datepicker-container.flatpickr input[type="text"] {
+  box-sizing: border-box;
+  border: var(--jp-widgets-input-border-width) solid var(--jp-widgets-input-border-color);
+  background-color: var(--jp-widgets-input-background-color);
+  color: var(--jp-widgets-input-color);
+  font-size: var(--jp-widgets-font-size);
+  padding: var(--jp-widgets-input-padding) calc( var(--jp-widgets-input-padding) * 2 );
+  outline: none !important;
+  height: var(--jp-widgets-inline-height);
+  line-height: var(--jp-widgets-inline-height);
+  border-right-width: 0;
+}
+
+.beaker-easyform-container .datepicker-container.flatpickr .date-picker-button {
+  border-color: var(--jp-widgets-input-border-color);
+  background-color: var(--jp-widgets-input-background-color);
+}
+.beaker-easyform-container .datepicker-container.flatpickr .date-picker-button:focus,
+.beaker-easyform-container .datepicker-container.flatpickr .date-picker-button:active,
+.beaker-easyform-container .datepicker-container.flatpickr .date-picker-button:hover {
+  border-color: var(--jp-widgets-input-focus-border-color);
+  outline: none !important;
+}
diff --git a/js/lab/src/theme/static/dark.css b/js/lab/src/theme/static/dark.css
@@ -218,3 +218,74 @@ pre {
 .beaker-fieldset legend {
   color: var(--jp-content-font-color0);
 }
+
+.flatpickr-calendar {
+  background-color: var(--jp-layout-color2);
+  color: var(--jp-content-font-color2);
+  border-color: var(--jp-border-color2);
+  -webkit-box-shadow: 1px 0 0 var(--jp-border-color2), -1px 0 0 var(--jp-border-color2), 0 1px 0 var(--jp-border-color2), 0 -1px 0 var(--jp-border-color2), 0 3px 13px rgba(0,0,0,0.08);
+  box-shadow: 1px 0 0 var(--jp-border-color2), -1px 0 0 var(--jp-border-color2), 0 1px 0 var(--jp-border-color2), 0 -1px 0 var(--jp-border-color2), 0 3px 13px rgba(0,0,0,0.08);
+}
+
+.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
+  -webkit-box-shadow: -2px 0 0 var(--jp-border-color2), 5px 0 0 var(--jp-border-color2);
+  box-shadow: -2px 0 0 var(--jp-border-color2), 5px 0 0 var(--jp-border-color2);
+}
+.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time {
+  border-top: 1px solid var(--jp-border-color2);
+}
+.flatpickr-calendar.arrowTop:before {
+  border-bottom-color: var(--jp-border-color2);
+}
+.flatpickr-calendar.arrowTop:after {
+  border-bottom-color: var(--jp-border-color2);
+}
+.flatpickr-calendar.arrowBottom:before {
+  border-top-color: var(--jp-border-color2);
+}
+.flatpickr-calendar.arrowBottom:after {
+  border-top-color: var(--jp-border-color2);
+}
+.flatpickr-months .flatpickr-month {
+  color: rgba(255,255,255,0.9);
+  fill: rgba(255,255,255,0.9);
+}
+.flatpickr-months .flatpickr-prev-month,
+.flatpickr-months .flatpickr-next-month {
+  color: rgba(255,255,255,0.9);
+  fill: rgba(255,255,255,0.9);
+}
+
+.flatpickr-day {
+  color: rgba(255,255,255,0.9);
+}
+
+.flatpickr-day.inRange,
+.flatpickr-day.prevMonthDay.inRange,
+.flatpickr-day.nextMonthDay.inRange,
+.flatpickr-day.today.inRange,
+.flatpickr-day.prevMonthDay.today.inRange,
+.flatpickr-day.nextMonthDay.today.inRange,
+.flatpickr-day:hover,
+.flatpickr-day.prevMonthDay:hover,
+.flatpickr-day.nextMonthDay:hover,
+.flatpickr-day:focus,
+.flatpickr-day.prevMonthDay:focus,
+.flatpickr-day.nextMonthDay:focus {
+  background-color: var(--jp-layout-color3);
+  border-color: var(--jp-layout-color3);
+}
+
+.flatpickr-day.disabled,
+.flatpickr-day.disabled:hover,
+.flatpickr-day.prevMonthDay,
+.flatpickr-day.nextMonthDay,
+.flatpickr-day.notAllowed,
+.flatpickr-day.notAllowed.prevMonthDay,
+.flatpickr-day.notAllowed.nextMonthDay {
+  color: rgba(255,255,255,0.3);
+}
+
+span.flatpickr-weekday {
+  color: rgba(255,255,255,0.54);
+}