playbook_ui 5.5.1.pre.alpha4 → 6.0.1.pre.alpha4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 18201295f38354edf0963e8a536728d406ba695521666e46bb8d9db0b1a51dac
-  data.tar.gz: '09be62b41d9777ac1f6269ce77a0955f06921ef8b4e1abdde30b9bfaee1dd435'
+  metadata.gz: 6f880af928e3b460b1c8d45298720756b30c3bc9f0a13f3464cc98c4d8f460f6
+  data.tar.gz: 07ac741a64bc86de37e29dfca5b2f06279cb1345ec21ce252ccaac18f92695af
 SHA512:
-  metadata.gz: 281294533bb71d290eba1a93ab8dbe820074e727eb3c468383cadbcbd19be223056c537717fa4be2b090a70a197a9fdf2ae55a9366d19039c34a3446e0540101
-  data.tar.gz: ebfbddf2c64330f83ffd3c6eb949b8b745a1a4740431d6fcf93734bb6b63721131978ab6f45ceb78d6d927e89823be642255387e1fa4a479ea554c26f46aadef
+  metadata.gz: 15ca595bf31fab774c0a6483831d8232ca37e040b22ca11002b965b860d490e5729620f189a5db7238f1884113a0a58ae66166f27dcb8cbbaa23fac9686ab03a
+  data.tar.gz: acbf0d7fa827d87f37d9d4d50fe6c154847f33fc6add93a48d3035ff87802860d5870f9b14fcc3a3fa3718492c1dedc153c157cb10f6fc0b0f629b074dea0f32

data/app/pb_kits/playbook/_playbook.scss

@@ -14,6 +14,7 @@
 @import 'pb_currency/currency';
 @import 'pb_dashboard_value/dashboard_value';
 @import 'pb_date/date';
+@import 'pb_date_picker/date_picker';
 @import 'pb_date_range_inline/date_range_inline';
 @import 'pb_date_range_stacked/date_range_stacked';
 @import 'pb_date_stacked/date_stacked';
@@ -33,7 +34,6 @@
 @import 'pb_icon_circle/icon_circle';
 @import 'pb_icon_value/icon_value';
 @import 'pb_image/image';
-@import 'pb_installer/installer';
 @import 'pb_label_pill/label_pill';
 @import 'pb_label_value/label_value';
 @import 'pb_layout/layout';
@@ -41,7 +41,6 @@
 @import 'pb_line_graph/line_graph';
 @import 'pb_list/list';
 @import 'pb_loading_inline/loading_inline';
-@import 'pb_logistic/logistic';
 @import 'pb_message/message';
 @import 'pb_multiple_users/multiple_users';
 @import 'pb_multiple_users_stacked/multiple_users_stacked';

data/app/pb_kits/playbook/data/menu.yml

@@ -24,6 +24,7 @@ kits:
   - fixed_confirmation_toast
   - flex
   - forms:
+    - date_picker
     - file_upload
     - form
     - form_pill
@@ -42,11 +43,9 @@ kits:
   - icon_circle
   - icon_value
   - image
-  - installer
   - layout
   - list
   - loading_inline
-  - logistic
   - multiple_users
   - multiple_users_stacked
   - nav

data/app/pb_kits/playbook/index.js

@@ -13,6 +13,7 @@ export Contact from './pb_contact/_contact.jsx'
 export Currency from './pb_currency/_currency.jsx'
 export DashboardValue from './pb_dashboard_value/_dashboard_value.jsx'
 export Date from './pb_date/_date.jsx'
+export DatePicker from './pb_date_picker/_date_picker.jsx'
 export DateRangeInline from './pb_date_range_inline/_date_range_inline.jsx'
 export DateRangeStacked from './pb_date_range_stacked/_date_range_stacked.jsx'
 export DateStacked from './pb_date_stacked/_date_stacked.jsx'
@@ -40,7 +41,6 @@ export LineGraph from './pb_line_graph/_line_graph.jsx'
 export List from './pb_list/_list.jsx'
 export ListItem from './pb_list/_list_item.jsx'
 export LoadingInline from './pb_loading_inline/_loading_inline.jsx'
-export Logistic from './pb_logistic/_logistic.jsx'
 export Message from './pb_message/_message.jsx'
 export MultipleUsers from './pb_multiple_users/_multiple_users.jsx'
 export MultipleUsersStacked from './pb_multiple_users_stacked/_multiple_users_stacked.jsx'
@@ -90,6 +90,7 @@ export dashboardValueSettings from './pb_dashboard_value/dashboardValueSettings'
 
 // Other JS/Plugins
 export pbChart from './plugins/pb_chart.js'
+export datePickerHelper from './pb_date_picker/date_picker_helper.js'
 export PbTypeahead from './pb_typeahead'
 export PbPopover from './pb_popover'
 export PbTable from './pb_table'

data/app/pb_kits/playbook/packs/examples.js

@@ -27,6 +27,7 @@ import * as Contact from 'pb_contact/docs'
 import * as Currency from 'pb_currency/docs'
 import * as DashboardValue from 'pb_dashboard_value/docs'
 import * as Date from 'pb_date/docs'
+import * as DatePicker from 'pb_date_picker/docs'
 import * as DateRangeInline from 'pb_date_range_inline/docs'
 import * as DateRangeStacked from 'pb_date_range_stacked/docs'
 import * as DateStacked from 'pb_date_stacked/docs'
@@ -45,7 +46,6 @@ import * as Icon from 'pb_icon/docs'
 import * as IconCircle from 'pb_icon_circle/docs'
 import * as IconValue from 'pb_icon_value/docs'
 import * as Image from 'pb_image/docs'
-import * as Installer from 'pb_installer/docs'
 import * as LabelPill from 'pb_label_pill/docs'
 import * as LabelValue from 'pb_label_value/docs'
 import * as Layout from 'pb_layout/docs'
@@ -53,7 +53,6 @@ import * as Legend from 'pb_legend/docs'
 import * as LineGraph from 'pb_line_graph/docs'
 import * as List from 'pb_list/docs'
 import * as LoadingInline from 'pb_loading_inline/docs'
-import * as Logistic from 'pb_logistic/docs'
 import * as Message from 'pb_message/docs'
 import * as MultipleUsers from 'pb_multiple_users/docs'
 import * as MultipleUsersStacked from 'pb_multiple_users_stacked/docs'
@@ -107,6 +106,7 @@ WebpackerReact.setup({
   ...Currency,
   ...DashboardValue,
   ...Date,
+  ...DatePicker,
   ...DateRangeInline,
   ...DateRangeStacked,
   ...DateStacked,
@@ -125,7 +125,6 @@ WebpackerReact.setup({
   ...IconCircle,
   ...IconValue,
   ...Image,
-  ...Installer,
   ...LabelPill,
   ...LabelValue,
   ...Layout,
@@ -133,7 +132,6 @@ WebpackerReact.setup({
   ...LineGraph,
   ...List,
   ...LoadingInline,
-  ...Logistic,
   ...Message,
   ...MultipleUsers,
   ...MultipleUsersStacked,

data/app/pb_kits/playbook/pb_button/_button.jsx

@@ -72,6 +72,7 @@ const Button = (props: ButtonPropTypes) => {
   const {
     children,
     className,
+    disabled,
     icon = null,
     id,
     loading = false,
@@ -120,6 +121,7 @@ const Button = (props: ButtonPropTypes) => {
       <button
           {...buttonAria}
           className={css}
+          disabled={disabled}
           id={id}
           onClick={onClick}
           type={htmlType}

data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb

@@ -0,0 +1,38 @@
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname + " " + object.error_class,
+    data: object.data,
+    id: object.id) do %>
+    <%= pb_rails("caption", props: { text: object.label }) %>
+      <div class="input_wrapper">
+        <input
+            autocomplete="off"
+            id="<%= object.picker_id %>"
+            name="<%= object.name %>"
+            <%= object.required ? required="required" : ''%>
+        />
+        <% if object.error %>
+          <%= pb_rails("body", props: { 
+            status: "negative",
+            text: object.error
+          }) %>
+        <% end %>
+      </div>
+
+      <%= javascript_tag do %>
+      document.addEventListener("DOMContentLoaded", () => {
+          datePickerHelper({
+            defaultDate: "<%= object.default_date %>",
+            disableDate: <%=raw object.disable_date %>,
+            disableRange: <%=raw object.disable_range.to_json %>,
+            disableWeekdays: <%=raw object.disable_weekdays %>,
+            format: "<%= object.format %>",
+            maxDate: "<%= object.max_date %>",
+            minDate: "<%= object.min_date %>",
+            mode: "<%= object.mode %>",
+            pickerId: "<%= object.picker_id %>",
+            propModel: "rails"
+          })
+      })
+      <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx

@@ -0,0 +1,101 @@
+/* @flow */
+
+import React, { useEffect } from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
+// import flatpickr from 'flatpickr'
+import { Body, Caption } from '../'
+import datePickerHelper from './date_picker_helper.js'
+
+type DatePickerProps = {
+  aria?: object,
+  className?: String,
+  data?: object,
+  defaultDate?: String,
+  disableDate?: Array,
+  disableRange?: Array,
+  disableWeekdays?: Array,
+  error?: String,
+  format?: String,
+  id?: String,
+  label?: String,
+  maxDate: String,
+  minDate: String,
+  mode?: String,
+  name: String,
+  pickerId?: String,
+}
+const DatePicker = (props: DatePickerProps) => {
+  const {
+    aria = {},
+    className,
+    data = {},
+    defaultDate = '',
+    disableDate = null,
+    disableRange = null,
+    disableWeekdays = null,
+    error,
+    format = 'm/d/Y',
+    id,
+    label = 'Date Picker',
+    maxDate,
+    minDate,
+    mode = 'single',
+    name,
+    pickerId,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(
+    buildCss('pb_date_picker_kit'),
+    className,
+    spacing(props),
+    error ? 'error' : null,
+  )
+
+  useEffect(() => {
+    datePickerHelper({
+      defaultDate: defaultDate,
+      disableDate: disableDate,
+      disableRange: disableRange,
+      disableWeekdays: disableWeekdays,
+      format: format,
+      maxDate: maxDate,
+      minDate: minDate,
+      mode: mode,
+      pickerId: pickerId,
+      propModel: 'React',
+    })
+  }, [])
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      {className}
+      <Caption
+          text={label}
+      />
+      <div className="input_wrapper">
+        <input
+            autoComplete="off"
+            id={pickerId}
+            name={name}
+        />
+        <If condition={error}>
+          <Body
+              status="negative"
+              text={error}
+          />
+        </If>
+      </div>
+    </div>
+  )
+}
+
+export default DatePicker

data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss

@@ -0,0 +1,846 @@
+// @import "~flatpickr/dist/flatpickr.css";
+@import "../pb_textarea/textarea_mixin";
+@import "../pb_title/title_mixin";
+@import "../tokens/colors";
+@import "../pb_caption/caption_mixin";
+
+[class^=pb_date_picker_kit] {
+  // input styles
+  [class^=pb_caption_kit] {
+    margin-bottom: $space_xs;
+    display: block;
+  }
+  .input_wrapper {
+    margin-bottom: $space_sm;
+    
+    .flatpickr-wrapper {
+      display: block;
+      input::placeholder {
+        @include pb_body_light;
+      }
+  
+      > input:first-child {
+        @include pb_textarea_light;
+        @include pb_title_4;
+        overflow: hidden;
+      }
+  
+      input:focus, input:-webkit-autofill:focus {
+        @include pb_textarea_focus;
+        -webkit-box-shadow: 0 0 0px 1000px $focus_input_light inset;
+        transition: background-color 5000s ease-in-out 0s;
+      }
+    }
+  }
+
+  &.error {
+    [class^=pb_body_kit] {
+      margin-top: $space_xs / 2;
+    }
+    .flatpickr-wrapper {
+      > input:first-child {
+        border-color: $error;
+      }
+    }
+  }
+}
+
+// date-picker styles
+
+div.flatpickr-weekdays {
+  margin-top: 5px;
+}
+span.flatpickr-weekday {
+  @include caption;
+}
+
+.pb_popover_body {
+  overflow: visible !important;
+}
+
+// flatpickr manual import
+
+.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 {
+  display: none;
+}
+.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: -10px 0 0 #569ff7;
+          box-shadow: -10px 0 0 #569ff7;
+}
+.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);
+  }
+}