playbook_ui 6.4.2 → 6.5.0

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.html.erb

@@ -0,0 +1,37 @@
+<%= pb_rails("date_picker", props: {
+  label: "onChange",
+  picker_id: "date-picker-hooks-onchange"
+}) %>
+
+<%= javascript_tag do %>
+  window.addEventListener("DOMContentLoaded", () => {
+    <%# Access flatpickr instance with picker id and assign it a variable %>
+    const fp = document.querySelector("#date-picker-hooks-onchange")._flatpickr
+
+    <%# Define Hook %>
+    const changeHook = () => {
+      alert('date changed')
+    }
+    <%# Push one or more hooks to onChange config array %>
+    fp.config.onChange.push(changeHook)
+  })
+<% end %>
+
+<%= pb_rails("date_picker", props: {
+  label: "onOpen",
+  picker_id: "date-picker-hooks-onopen"
+}) %>
+
+<%= javascript_tag do %>
+  window.addEventListener("DOMContentLoaded", () => {
+    <%# Access flatpickr instance with picker id and assign it a variable %>
+    const fp = document.querySelector("#date-picker-hooks-onopen")._flatpickr
+
+    <%# Define Hook %>
+    const openHook = () => {
+      alert('calendar opened')
+    }
+    <%# Push one or more hooks to onOpen config array %>
+    fp.config.onOpen.push(openHook)
+  })
+<% end %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { DatePicker } from '../../'
+
+const DatePickerHooks = () => {
+  // Define hooks
+  const changeHook = () => {
+    alert('date changed')
+  }
+  const openHook = () => {
+    alert('calendar opened')
+  }
+
+  // Access flatpickr instances with picker ids and assign them variables
+  window.addEventListener('DOMContentLoaded', () => {
+    const fpChange = document.querySelector('#date-picker-hooks-onchange')._flatpickr
+    const fpOpen = document.querySelector('#date-picker-hooks-onopen')._flatpickr
+
+    // Push one or more hooks to flatpickr instance's Event config arrays
+    fpChange.config.onChange.push(changeHook)
+    fpOpen.config.onOpen.push(openHook)
+  })
+
+  return (
+    <div>
+      <DatePicker
+          label="onChange"
+          pickerId="date-picker-hooks-onchange"
+      />
+      <DatePicker
+          label="onOpen"
+          pickerId="date-picker-hooks-onopen"
+      />
+    </div>
+  )
+}
+
+export default DatePickerHooks

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.md

@@ -0,0 +1 @@
+You can find a full list of flatpickr events and hooks in their [documentation](https://flatpickr.js.org/events/).

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.html.erb

@@ -0,0 +1,26 @@
+<%= pb_rails("date_picker", props: {
+  input_aria: { label: "input-field" },
+  input_data: { key: "value", key2: "value2" },
+  name: "date-field",
+  picker_id: "date-picker-input1",
+  type: "date"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  default_date: "blank",
+  picker_id: "date-picker-input2",
+  placeholder: "Select Date",
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  default_date: "blank",
+  disable_input: true,
+  picker_id: "date-picker-input3",
+  placeholder: "Disabled Input"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  dark: true,
+  hide_label: true,
+  picker_id: "date-picker-input4"
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { DatePicker } from '../../'
+
+const DatePickerInput = () => (
+  <div>
+    <DatePicker
+        inputAria={{ label: 'input-field' }}
+        inputData={{ key: 'value', key2: 'value2' }}
+        name="date-field"
+        pickerId="date-picker-input1"
+        type="date"
+    />
+    <DatePicker
+        defaultDate="blank"
+        pickerId="date-picker-input2"
+        placeholder="Select Date"
+    />
+    <DatePicker
+        defaultDate="blank"
+        disableInput
+        pickerId="date-picker-input3"
+        placeholder="Disabled Input"
+    />
+    <DatePicker
+        dark
+        hideLabel
+        pickerId="date-picker-input4"
+    />
+  </div>
+)
+
+export default DatePickerInput

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.md

@@ -0,0 +1,3 @@
+The date picker is built with the text input kit.  Text input props you pass to the date picker kit will be forwarded to the input, with a few exceptions.  The `value` attribute is automatically handled and bound to whatever date string is contained by the input field.  You cannot pass a custom value prop.  `id` props passed to the date picker kit will be assigned to it's parent/wrapper div.  The `pickerId` prop is passed directly to the input and is required to instatiate the date picker.
+
+You must use `inputAria` or `input_aria` and `inputData` or `input_data` props if you wish to pass data or aria attributes to the text input kit.  If you use `data` or `aria` props they will be passed to the date picker kit itself instead.  Also be aware the default behavior of text input aria and data props is to pass those props to attributes on the wrapping div not on the input itself.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.html.erb

@@ -0,0 +1,9 @@
+<%= pb_rails("date_picker", props: {
+  label: "Your Label Here",
+  picker_id: "date-picker-label"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  hide_label: true,
+  picker_id: "date-picker-hide-label"
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { DatePicker } from '../../'
+
+const DatePickerLabel = () => (
+  <div>
+    <DatePicker
+        label="Your Label Here"
+        pickerId="date-picker-label"
+    />
+    <DatePicker
+        hideLabel
+        pickerId="date-picker-hide-label"
+    />
+  </div>
+)
+
+export default DatePickerLabel

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.md

@@ -0,0 +1 @@
+Default label prop is `"Date Picker"`.  To remove the label set the `hideLabel` prop in React or the `hide_label` prop in Rails to `true`.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.html.erb

@@ -0,0 +1,14 @@
+<%= pb_rails("date_picker", props: {
+  label: "Dynamic dates",
+  max_date: (Date.today + 3).httpdate,
+  min_date: (Date.today - 3).httpdate,
+  picker_id: "date-picker-min-max1"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  format: "m/d/Y",
+  label: "Absolute formatted dates",
+  max_date: "10/20/2020",
+  min_date: "10/10/2020",
+  picker_id: "date-picker-min-max2"
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { DatePicker } from '../../'
+
+const DatePickerMinMax = () => (
+  <div>
+    <DatePicker
+        label="Dynamic dates using flatpickr increment function"
+        maxDate={new Date().fp_incr(3)}
+        minDate={new Date().fp_incr(-3)}
+        pickerId="date-picker-min-max1"
+    />
+    <DatePicker
+        format="m/d/Y"
+        label="Absolute formatted dates"
+        maxDate="10/20/2020"
+        minDate="10/10/2020"
+        pickerId="date-picker-min-max2"
+    />
+  </div>
+)
+
+export default DatePickerMinMax

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("date_picker", props: {
+  mode: "range",
+  picker_id: "date-picker-range"
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { DatePicker } from '../../'
+
+const DatePickerRange = () => (
+  <div>
+    <DatePicker
+        mode="range"
+        pickerId="date-picker-range"
+    />
+  </div>
+)
+
+export default DatePickerRange

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_read_only.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("date_picker", props: {
+  read_only: true,
+  picker_id: "date-picker-read-only"
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_read_only.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { DatePicker } from '../../'
+
+const DatePickerReadOnly = () => (
+  <div>
+    <DatePicker
+        pickerId="date-picker-read-only"
+        readOnly
+    />
+  </div>
+)
+
+export default DatePickerReadOnly

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_read_only.md

@@ -0,0 +1 @@
+Read only inputs do not accept keyboard input.  The only way to change the date value is by picking a date on the calendar.  Especially useful on mobile as it prevents the keyboard from popping up and obscuring the date picker.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("date_picker", props: {
+  default_date: "05/05/2015",
+  max_date: "12/31/2018",
+  min_date: "01/01/2015",
+  picker_id: "date-picker-year-range",
+  year_range: [2015, 2018]
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { DatePicker } from '../../'
+
+const DatePickerYearRange = () => (
+  <div>
+    <DatePicker
+        defaultDate="05/05/2015"
+        maxDate="12/31/2018"
+        minDate="01/01/2015"
+        pickerId="date-picker-year-range"
+        yearRange={[2015, 2018]}
+    />
+  </div>
+)
+
+export default DatePickerYearRange

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.md

@@ -0,0 +1 @@
+Defaults to `[1900, 2100]`.  Combine with min-max prop for best results.

data/app/pb_kits/playbook/pb_date_picker/docs/_description.md

@@ -0,0 +1,7 @@
+Playbook's date picker is built using [flatpickr](https://flatpickr.js.org/), a vanilla js library.  Common date picker use cases and features have been adapted into simple prop based configuration detailed in the docs below.  You can implement additional features and functionality by accessing a flatpickr instance directly.  This is done with the following code.
+
+`const fpInstance = document.querySelector('#pickerId')._flatpickr`
+
+`pickerId` is a prop passed to the date picker kit.  Flatpickr uses this id to target an input and attach a flatpickr instance to that input.
+
+To learn more [visit flatpickr's docs](https://flatpickr.js.org/instance-methods-properties-elements/) or see the hook doc section below for an applied example.

data/app/pb_kits/playbook/pb_date_picker/docs/example.yml

@@ -0,0 +1,35 @@
+examples:
+  
+  rails:
+  - date_picker_default: Default
+  - date_picker_hide_icon: Hide Input Icon
+  - date_picker_default_date: Default Date
+  - date_picker_input: Input Field
+  - date_picker_label: Label
+  - date_picker_range: Range
+  - date_picker_format: Format
+  - date_picker_disabled: Disabled Dates
+  - date_picker_min_max: Min Max
+  - date_picker_error: Error
+  - date_picker_hooks: Hooks
+  - date_picker_read_only: Read Only
+  - date_picker_year_range: Year Range
+  - date_picker_dark: Dark
+  
+  
+  react:
+  - date_picker_default: Default
+  - date_picker_hide_icon: Hide Input Icon
+  - date_picker_default_date: Default Date
+  - date_picker_input: Input Field
+  - date_picker_label: Label
+  - date_picker_range: Range
+  - date_picker_format: Format
+  - date_picker_disabled: Disabled Dates
+  - date_picker_min_max: Min Max
+  - date_picker_error: Error
+  - date_picker_hooks: Hooks
+  - date_picker_read_only: Read Only
+  - date_picker_year_range: Year Range
+  - date_picker_dark: Dark
+  

data/app/pb_kits/playbook/pb_date_picker/docs/index.js

@@ -0,0 +1,14 @@
+export { default as DatePickerDefault } from './_date_picker_default.jsx'
+export { default as DatePickerHideIcon } from './_date_picker_hide_icon.jsx'
+export { default as DatePickerInput } from './_date_picker_input.jsx'
+export { default as DatePickerDefaultDate } from './_date_picker_default_date.jsx'
+export { default as DatePickerLabel } from './_date_picker_label.jsx'
+export { default as DatePickerRange } from './_date_picker_range.jsx'
+export { default as DatePickerFormat } from './_date_picker_format.jsx'
+export { default as DatePickerDisabled } from './_date_picker_disabled.jsx'
+export { default as DatePickerMinMax } from './_date_picker_min_max.jsx'
+export { default as DatePickerError } from './_date_picker_error.jsx'
+export { default as DatePickerHooks } from './_date_picker_hooks.jsx'
+export { default as DatePickerReadOnly } from './_date_picker_read_only.jsx'
+export { default as DatePickerYearRange } from './_date_picker_year_range.jsx'
+export { default as DatePickerDark } from './_date_picker_dark.jsx'

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss

@@ -0,0 +1,32 @@
+// Calendar Icon Styles
+.cal_icon_wrapper {
+  position: absolute;
+  top: $space_md + 2;
+  right: 0;
+  border-left: 1px solid $border_light;
+  width: $space_xl + $space_xs;
+  height: $space_xl + 5;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding-left: $space_sm - 1;
+  color: $text_lt_light;
+  @media (hover: hover) {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+  &.dark {
+    color: $white;
+    border-color: $border_dark;
+  }
+  &.no_label_shift {
+    top: 0;
+  }
+  &.error {
+    border-left-color: $error;
+  }
+}
+.cal_icon {
+  width: $space_sm;
+}

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_day_styles.scss

@@ -0,0 +1,53 @@
+// Day and Range Styles
+.flatpickr-day {
+  user-select: none;
+  @media (hover: hover) {
+    &:hover {
+      transition-duration: $transition_short;
+      transition-timing-function: $easeIn;    
+      background-color: #F6FAFF;
+      border-color: #F6FAFF;
+      box-shadow: $shadow_deep;
+    }
+  }
+}
+.flatpickr-day.today {
+  border: none;
+  font-weight: $bold;
+  color: $charcoal;
+  &.selected {
+    color: $text_dk_default;
+  }
+}
+.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange {
+  border-radius: $space_xl + 10;
+  background-color: $primary;
+  border-color: $primary;
+  box-shadow: $shadow_deep;
+  font-weight: $bold; 
+}
+.flatpickr-day.startRange {
+  box-shadow: $space_sm + 1 0 0 #F7FBFF
+}
+.flatpickr-day.endRange {
+  box-shadow: -$space_sm 0 0 #F7FBFF
+}
+.flatpickr-day.inRange {
+  background-color: #F7FBFF;
+  border: 2px;
+  box-shadow: -$space_xs + 4 0 0 #F7FBFF, $space_xs - 3 0 0 #F7FBFF;
+}
+.flatpickr-innerContainer {
+  overflow: visible;
+}
+.flatpickr-days {
+  overflow: visible;
+}
+// Weekday Styling
+div.flatpickr-weekdays {
+  margin-top: $space_xs;
+}
+span.flatpickr-weekday {
+  @include caption;
+  user-select: none;
+}

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss

@@ -0,0 +1,785 @@
+// Manual Import -- Flatpickr Styles
+.flatpickr-calendar {
+  background: transparent;
+  opacity: 0;
+  display: none;
+  text-align: center;
+  visibility: hidden;
+  padding: 0;
+  -webkit-animation: none;
+          animation: none;
+  direction: ltr;
+  border: 0;
+  font-size: 14px;
+  line-height: 24px;
+  border-radius: 5px;
+  position: absolute;
+  width: 307.875px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  -ms-touch-action: manipulation;
+      touch-action: manipulation;
+  background: #fff;
+  -webkit-box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08);
+          box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08);
+}
+.flatpickr-calendar.open,
+.flatpickr-calendar.inline {
+  opacity: 1;
+  max-height: 640px;
+  visibility: visible;
+}
+.flatpickr-calendar.open {
+  display: inline-block;
+  z-index: 99999;
+}
+.flatpickr-calendar.animate.open {
+  -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
+          animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.flatpickr-calendar.inline {
+  display: block;
+  position: relative;
+  top: 2px;
+}
+.flatpickr-calendar.static {
+  position: absolute;
+  top: calc(100% + 2px);
+}
+.flatpickr-calendar.static.open {
+  z-index: 999;
+  display: block;
+}
+.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
+  -webkit-box-shadow: none !important;
+          box-shadow: none !important;
+}
+.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
+  -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
+          box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
+}
+.flatpickr-calendar .hasWeeks .dayContainer,
+.flatpickr-calendar .hasTime .dayContainer {
+  border-bottom: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.flatpickr-calendar .hasWeeks .dayContainer {
+  border-left: 0;
+}
+.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time {
+  height: 40px;
+  border-top: 1px solid #e6e6e6;
+}
+.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
+  height: auto;
+}
+.flatpickr-calendar:before,
+.flatpickr-calendar:after {
+  position: absolute;
+  display: block;
+  pointer-events: none;
+  border: solid transparent;
+  content: '';
+  height: 0;
+  width: 0;
+  left: 22px;
+}
+.flatpickr-calendar.rightMost:before,
+.flatpickr-calendar.rightMost:after {
+  left: auto;
+  right: 22px;
+}
+.flatpickr-calendar:before {
+  border-width: 5px;
+  margin: 0 -5px;
+}
+.flatpickr-calendar:after {
+  border-width: 4px;
+  margin: 0 -4px;
+}
+.flatpickr-calendar.arrowTop:before,
+.flatpickr-calendar.arrowTop:after {
+  bottom: 100%;
+}
+.flatpickr-calendar.arrowTop:before {
+  border-bottom-color: #e6e6e6;
+}
+.flatpickr-calendar.arrowTop:after {
+  border-bottom-color: #fff;
+}
+.flatpickr-calendar.arrowBottom:before,
+.flatpickr-calendar.arrowBottom:after {
+  top: 100%;
+}
+.flatpickr-calendar.arrowBottom:before {
+  border-top-color: #e6e6e6;
+}
+.flatpickr-calendar.arrowBottom:after {
+  border-top-color: #fff;
+}
+.flatpickr-calendar:focus {
+  outline: 0;
+}
+.flatpickr-wrapper {
+  position: relative;
+  display: inline-block;
+}
+.flatpickr-months {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+.flatpickr-months .flatpickr-month {
+  background: transparent;
+  color: rgba(0,0,0,0.9);
+  fill: rgba(0,0,0,0.9);
+  height: 34px;
+  line-height: 1;
+  text-align: center;
+  position: relative;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  overflow: hidden;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+.flatpickr-months .flatpickr-prev-month,
+.flatpickr-months .flatpickr-next-month {
+  text-decoration: none;
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  height: 34px;
+  padding: 10px;
+  z-index: 3;
+  color: rgba(0,0,0,0.9);
+  fill: rgba(0,0,0,0.9);
+}
+.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
+.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
+  cursor: not-allowed;
+}
+.flatpickr-months .flatpickr-prev-month i,
+.flatpickr-months .flatpickr-next-month i {
+  position: relative;
+}
+.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
+.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
+/*
+      /*rtl:begin:ignore*/
+/*
+      */
+  left: 0;
+/*
+      /*rtl:end:ignore*/
+/*
+      */
+}
+/*
+      /*rtl:begin:ignore*/
+/*
+      /*rtl:end:ignore*/
+.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
+.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
+/*
+      /*rtl:begin:ignore*/
+/*
+      */
+  right: 0;
+/*
+      /*rtl:end:ignore*/
+/*
+      */
+}
+/*
+      /*rtl:begin:ignore*/
+/*
+      /*rtl:end:ignore*/
+.flatpickr-months .flatpickr-prev-month:hover,
+.flatpickr-months .flatpickr-next-month:hover {
+  color: #959ea9;
+}
+.flatpickr-months .flatpickr-prev-month:hover svg,
+.flatpickr-months .flatpickr-next-month:hover svg {
+  fill: #f64747;
+}
+.flatpickr-months .flatpickr-prev-month svg,
+.flatpickr-months .flatpickr-next-month svg {
+  width: 14px;
+  height: 14px;
+}
+.flatpickr-months .flatpickr-prev-month svg path,
+.flatpickr-months .flatpickr-next-month svg path {
+  -webkit-transition: fill 0.1s;
+  transition: fill 0.1s;
+  fill: inherit;
+}
+.numInputWrapper {
+  position: relative;
+  height: auto;
+}
+.numInputWrapper input,
+.numInputWrapper span {
+  display: inline-block;
+}
+.numInputWrapper input {
+  width: 100%;
+}
+.numInputWrapper input::-ms-clear {
+  display: none;
+}
+.numInputWrapper input::-webkit-outer-spin-button,
+.numInputWrapper input::-webkit-inner-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
+}
+.numInputWrapper span {
+  position: absolute;
+  right: 0;
+  width: 14px;
+  padding: 0 4px 0 2px;
+  height: 50%;
+  line-height: 50%;
+  opacity: 0;
+  cursor: pointer;
+  border: 1px solid rgba(57,57,57,0.15);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.numInputWrapper span:hover {
+  background: rgba(0,0,0,0.1);
+}
+.numInputWrapper span:active {
+  background: rgba(0,0,0,0.2);
+}
+.numInputWrapper span:after {
+  display: block;
+  content: "";
+  position: absolute;
+}
+.numInputWrapper span.arrowUp {
+  top: 0;
+  border-bottom: 0;
+}
+.numInputWrapper span.arrowUp:after {
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-bottom: 4px solid rgba(57,57,57,0.6);
+  top: 26%;
+}
+.numInputWrapper span.arrowDown {
+  top: 50%;
+}
+.numInputWrapper span.arrowDown:after {
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid rgba(57,57,57,0.6);
+  top: 40%;
+}
+.numInputWrapper span svg {
+  width: inherit;
+  height: auto;
+}
+.numInputWrapper span svg path {
+  fill: rgba(0,0,0,0.5);
+}
+.numInputWrapper:hover {
+  background: rgba(0,0,0,0.05);
+}
+.numInputWrapper:hover span {
+  opacity: 1;
+}
+.flatpickr-current-month {
+  font-size: 135%;
+  line-height: inherit;
+  font-weight: 300;
+  color: inherit;
+  position: absolute;
+  width: 75%;
+  left: 12.5%;
+  padding: 7.48px 0 0 0;
+  line-height: 1;
+  height: 34px;
+  display: inline-block;
+  text-align: center;
+  -webkit-transform: translate3d(0px, 0px, 0px);
+          transform: translate3d(0px, 0px, 0px);
+}
+.flatpickr-current-month span.cur-month {
+  font-family: inherit;
+  font-weight: 700;
+  color: inherit;
+  display: inline-block;
+  margin-left: 0.5ch;
+  padding: 0;
+}
+.flatpickr-current-month span.cur-month:hover {
+  background: rgba(0,0,0,0.05);
+}
+.flatpickr-current-month .numInputWrapper {
+  width: 6ch;
+  width: 7ch\0;
+  display: inline-block;
+}
+.flatpickr-current-month .numInputWrapper span.arrowUp:after {
+  border-bottom-color: rgba(0,0,0,0.9);
+}
+.flatpickr-current-month .numInputWrapper span.arrowDown:after {
+  border-top-color: rgba(0,0,0,0.9);
+}
+.flatpickr-current-month input.cur-year {
+  background: transparent;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  color: inherit;
+  cursor: text;
+  padding: 0 0 0 0.5ch;
+  margin: 0;
+  display: inline-block;
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: 300;
+  line-height: inherit;
+  height: auto;
+  border: 0;
+  border-radius: 0;
+  vertical-align: initial;
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+.flatpickr-current-month input.cur-year:focus {
+  outline: 0;
+}
+.flatpickr-current-month input.cur-year[disabled],
+.flatpickr-current-month input.cur-year[disabled]:hover {
+  font-size: 100%;
+  color: rgba(0,0,0,0.5);
+  background: transparent;
+  pointer-events: none;
+}
+.flatpickr-current-month .flatpickr-monthDropdown-months {
+  appearance: menulist;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  box-sizing: border-box;
+  color: inherit;
+  cursor: pointer;
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: 300;
+  height: auto;
+  line-height: inherit;
+  margin: -1px 0 0 0;
+  outline: none;
+  padding: 0 0 0 0.5ch;
+  position: relative;
+  vertical-align: initial;
+  -webkit-box-sizing: border-box;
+  -webkit-appearance: menulist;
+  -moz-appearance: menulist;
+  width: auto;
+}
+.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
+.flatpickr-current-month .flatpickr-monthDropdown-months:active {
+  outline: none;
+}
+.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
+  background: rgba(0,0,0,0.05);
+}
+.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
+  background-color: transparent;
+  outline: none;
+  padding: 0;
+}
+.flatpickr-weekdays {
+  background: transparent;
+  text-align: center;
+  overflow: hidden;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  height: 28px;
+}
+.flatpickr-weekdays .flatpickr-weekdaycontainer {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+span.flatpickr-weekday {
+  cursor: default;
+  font-size: 90%;
+  background: transparent;
+  color: rgba(0,0,0,0.54);
+  line-height: 1;
+  margin: 0;
+  text-align: center;
+  display: block;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  font-weight: bolder;
+}
+.dayContainer,
+.flatpickr-weeks {
+  padding: 1px 0 0 0;
+}
+.flatpickr-days {
+  position: relative;
+  overflow: hidden;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  width: 307.875px;
+}
+.flatpickr-days:focus {
+  outline: 0;
+}
+.dayContainer {
+  padding: 0;
+  outline: 0;
+  text-align: left;
+  width: 307.875px;
+  min-width: 307.875px;
+  max-width: 307.875px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  display: inline-block;
+  display: -ms-flexbox;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+          flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  -ms-flex-pack: justify;
+  -webkit-justify-content: space-around;
+          justify-content: space-around;
+  -webkit-transform: translate3d(0px, 0px, 0px);
+          transform: translate3d(0px, 0px, 0px);
+  opacity: 1;
+}
+.dayContainer + .dayContainer {
+  -webkit-box-shadow: -1px 0 0 #e6e6e6;
+          box-shadow: -1px 0 0 #e6e6e6;
+}
+.flatpickr-day {
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 150px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  color: #393939;
+  cursor: pointer;
+  font-weight: 400;
+  width: 14.2857143%;
+  -webkit-flex-basis: 14.2857143%;
+      -ms-flex-preferred-size: 14.2857143%;
+          flex-basis: 14.2857143%;
+  max-width: 39px;
+  height: 39px;
+  line-height: 39px;
+  margin: 0;
+  display: inline-block;
+  position: relative;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  text-align: center;
+}
+.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 {
+  cursor: pointer;
+  outline: 0;
+  background: #e6e6e6;
+  border-color: #e6e6e6;
+}
+.flatpickr-day.today {
+  border-color: #959ea9;
+}
+.flatpickr-day.today:hover,
+.flatpickr-day.today:focus {
+  border-color: #959ea9;
+  background: #959ea9;
+  color: #fff;
+}
+.flatpickr-day.selected,
+.flatpickr-day.startRange,
+.flatpickr-day.endRange,
+.flatpickr-day.selected.inRange,
+.flatpickr-day.startRange.inRange,
+.flatpickr-day.endRange.inRange,
+.flatpickr-day.selected:focus,
+.flatpickr-day.startRange:focus,
+.flatpickr-day.endRange:focus,
+.flatpickr-day.selected:hover,
+.flatpickr-day.startRange:hover,
+.flatpickr-day.endRange:hover,
+.flatpickr-day.selected.prevMonthDay,
+.flatpickr-day.startRange.prevMonthDay,
+.flatpickr-day.endRange.prevMonthDay,
+.flatpickr-day.selected.nextMonthDay,
+.flatpickr-day.startRange.nextMonthDay,
+.flatpickr-day.endRange.nextMonthDay {
+  background: #569ff7;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  color: #fff;
+  border-color: #569ff7;
+}
+.flatpickr-day.selected.startRange,
+.flatpickr-day.startRange.startRange,
+.flatpickr-day.endRange.startRange {
+  border-radius: 50px 0 0 50px;
+}
+.flatpickr-day.selected.endRange,
+.flatpickr-day.startRange.endRange,
+.flatpickr-day.endRange.endRange {
+  border-radius: 0 50px 50px 0;
+}
+.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.flatpickr-day.selected.startRange.endRange,
+.flatpickr-day.startRange.startRange.endRange,
+.flatpickr-day.endRange.startRange.endRange {
+  border-radius: 50px;
+}
+.flatpickr-day.inRange {
+  border-radius: 0;
+  -webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
+          box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
+}
+.flatpickr-day.flatpickr-disabled,
+.flatpickr-day.flatpickr-disabled:hover,
+.flatpickr-day.prevMonthDay,
+.flatpickr-day.nextMonthDay,
+.flatpickr-day.notAllowed,
+.flatpickr-day.notAllowed.prevMonthDay,
+.flatpickr-day.notAllowed.nextMonthDay {
+  color: rgba(57,57,57,0.3);
+  background: transparent;
+  border-color: transparent;
+  cursor: default;
+}
+.flatpickr-day.flatpickr-disabled,
+.flatpickr-day.flatpickr-disabled:hover {
+  cursor: not-allowed;
+  color: rgba(57,57,57,0.1);
+}
+.flatpickr-day.week.selected {
+  border-radius: 0;
+  -webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
+          box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
+}
+.flatpickr-day.hidden {
+  visibility: hidden;
+}
+.rangeMode .flatpickr-day {
+  margin-top: 1px;
+}
+.flatpickr-weekwrapper {
+  float: left;
+}
+.flatpickr-weekwrapper .flatpickr-weeks {
+  padding: 0 12px;
+  -webkit-box-shadow: 1px 0 0 #e6e6e6;
+          box-shadow: 1px 0 0 #e6e6e6;
+}
+.flatpickr-weekwrapper .flatpickr-weekday {
+  float: none;
+  width: 100%;
+  line-height: 28px;
+}
+.flatpickr-weekwrapper span.flatpickr-day,
+.flatpickr-weekwrapper span.flatpickr-day:hover {
+  display: block;
+  width: 100%;
+  max-width: none;
+  color: rgba(57,57,57,0.3);
+  background: transparent;
+  cursor: default;
+  border: none;
+}
+.flatpickr-innerContainer {
+  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  overflow: hidden;
+}
+.flatpickr-rContainer {
+  display: inline-block;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.flatpickr-time {
+  text-align: center;
+  outline: 0;
+  display: block;
+  height: 0;
+  line-height: 40px;
+  max-height: 40px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  overflow: hidden;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+.flatpickr-time:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+.flatpickr-time .numInputWrapper {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  width: 40%;
+  height: 40px;
+  float: left;
+}
+.flatpickr-time .numInputWrapper span.arrowUp:after {
+  border-bottom-color: #393939;
+}
+.flatpickr-time .numInputWrapper span.arrowDown:after {
+  border-top-color: #393939;
+}
+.flatpickr-time.hasSeconds .numInputWrapper {
+  width: 26%;
+}
+.flatpickr-time.time24hr .numInputWrapper {
+  width: 49%;
+}
+.flatpickr-time input {
+  background: transparent;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border: 0;
+  border-radius: 0;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+  height: inherit;
+  line-height: inherit;
+  color: #393939;
+  font-size: 14px;
+  position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+.flatpickr-time input.flatpickr-hour {
+  font-weight: bold;
+}
+.flatpickr-time input.flatpickr-minute,
+.flatpickr-time input.flatpickr-second {
+  font-weight: 400;
+}
+.flatpickr-time input:focus {
+  outline: 0;
+  border: 0;
+}
+.flatpickr-time .flatpickr-time-separator,
+.flatpickr-time .flatpickr-am-pm {
+  height: inherit;
+  float: left;
+  line-height: inherit;
+  color: #393939;
+  font-weight: bold;
+  width: 2%;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  -webkit-align-self: center;
+      -ms-flex-item-align: center;
+          align-self: center;
+}
+.flatpickr-time .flatpickr-am-pm {
+  outline: 0;
+  width: 18%;
+  cursor: pointer;
+  text-align: center;
+  font-weight: 400;
+}
+.flatpickr-time input:hover,
+.flatpickr-time .flatpickr-am-pm:hover,
+.flatpickr-time input:focus,
+.flatpickr-time .flatpickr-am-pm:focus {
+  background: #eee;
+}
+.flatpickr-input[readonly] {
+  cursor: pointer;
+}
+@-webkit-keyframes fpFadeInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -20px, 0);
+            transform: translate3d(0, -20px, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes fpFadeInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -20px, 0);
+            transform: translate3d(0, -20px, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+  }
+}