playbook_ui 7.0.0.pre.alpha9 → 7.0.0.pre.alpha10

Sign up to get free protection for your applications and to get access to all the features.
Files changed (126) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +3 -4
  3. data/app/pb_kits/playbook/_playbook.scss +1 -0
  4. data/app/pb_kits/playbook/data/menu.yml +1 -0
  5. data/app/pb_kits/playbook/index.js +3 -0
  6. data/app/pb_kits/playbook/pb_button/_button.jsx +1 -0
  7. data/app/pb_kits/playbook/pb_button/_button_mixins.scss +1 -1
  8. data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx +3 -7
  9. data/app/pb_kits/playbook/pb_button/docs/_button_default_dark.jsx +3 -0
  10. data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx +2 -0
  11. data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx +2 -0
  12. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.html.erb +2 -1
  13. data/app/pb_kits/playbook/pb_date/_date.html.erb +8 -32
  14. data/app/pb_kits/playbook/pb_date/_date.jsx +67 -76
  15. data/app/pb_kits/playbook/pb_date/_date.scss +0 -25
  16. data/app/pb_kits/playbook/pb_date/date.rb +10 -18
  17. data/app/pb_kits/playbook/pb_date/docs/_date_default.html.erb +17 -2
  18. data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +28 -0
  19. data/app/pb_kits/playbook/pb_date/docs/example.yml +2 -5
  20. data/app/pb_kits/playbook/pb_date/docs/index.js +1 -3
  21. data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb +39 -0
  22. data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +149 -0
  23. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +33 -0
  24. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +85 -0
  25. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js +165 -0
  26. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.html.erb +4 -0
  27. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.jsx +13 -0
  28. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.md +1 -0
  29. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.html.erb +4 -0
  30. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.jsx +13 -0
  31. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb +1 -0
  32. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx +12 -0
  33. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb +24 -0
  34. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +30 -0
  35. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb +43 -0
  36. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.jsx +48 -0
  37. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb +4 -0
  38. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +13 -0
  39. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb +19 -0
  40. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx +25 -0
  41. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.md +1 -0
  42. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hide_icon.html.erb +4 -0
  43. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hide_icon.jsx +13 -0
  44. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.html.erb +37 -0
  45. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.jsx +37 -0
  46. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.md +1 -0
  47. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.html.erb +26 -0
  48. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.jsx +32 -0
  49. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.md +3 -0
  50. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.html.erb +9 -0
  51. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.jsx +17 -0
  52. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.md +1 -0
  53. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.html.erb +14 -0
  54. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.jsx +22 -0
  55. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb +4 -0
  56. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +13 -0
  57. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.html.erb +7 -0
  58. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.jsx +16 -0
  59. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.md +1 -0
  60. data/app/pb_kits/playbook/pb_date_picker/docs/_description.md +7 -0
  61. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +35 -0
  62. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +14 -0
  63. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss +33 -0
  64. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_day_styles.scss +53 -0
  65. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss +785 -0
  66. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss +108 -0
  67. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss +44 -0
  68. data/app/pb_kits/playbook/pb_filter/_filter.scss +1 -1
  69. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -0
  70. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -0
  71. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb +2 -0
  72. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb +2 -0
  73. data/app/pb_kits/playbook/pb_form/form_builder.rb +1 -0
  74. data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb +20 -0
  75. data/app/pb_kits/playbook/pb_progress_step/progress_step.rb +2 -2
  76. data/app/pb_kits/playbook/pb_progress_step/progress_step_item.rb +0 -1
  77. data/app/pb_kits/playbook/pb_table/table.rb +3 -3
  78. data/app/pb_kits/playbook/pb_text_input/_text_input.html.erb +1 -0
  79. data/app/pb_kits/playbook/pb_text_input/_text_input.jsx +21 -17
  80. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +17 -8
  81. data/app/pb_kits/playbook/pb_text_input/text_input.rb +2 -0
  82. data/app/pb_kits/playbook/pb_time/_time.html.erb +23 -17
  83. data/app/pb_kits/playbook/pb_time/_time.jsx +20 -11
  84. data/app/pb_kits/playbook/pb_time/_time.scss +16 -8
  85. data/app/pb_kits/playbook/pb_time/docs/_time_align.html.erb +18 -0
  86. data/app/pb_kits/playbook/pb_time/docs/_time_align.jsx +3 -3
  87. data/app/pb_kits/playbook/pb_time/docs/_time_dark.html.erb +70 -0
  88. data/app/pb_kits/playbook/pb_time/docs/_time_dark.jsx +1 -6
  89. data/app/pb_kits/playbook/pb_time/docs/_time_default.html.erb +47 -3
  90. data/app/pb_kits/playbook/pb_time/docs/_time_default.jsx +33 -4
  91. data/app/pb_kits/playbook/pb_time/docs/_time_sizes.html.erb +11 -0
  92. data/app/pb_kits/playbook/pb_time/docs/_time_sizes.jsx +19 -0
  93. data/app/pb_kits/playbook/pb_time/docs/_time_timestamp.html.erb +2 -1
  94. data/app/pb_kits/playbook/pb_time/docs/_time_timestamp.jsx +0 -7
  95. data/app/pb_kits/playbook/pb_time/docs/_time_timezone.html.erb +42 -0
  96. data/app/pb_kits/playbook/pb_time/docs/_time_timezone.jsx +12 -14
  97. data/app/pb_kits/playbook/pb_time/docs/example.yml +7 -2
  98. data/app/pb_kits/playbook/pb_time/docs/index.js +1 -0
  99. data/app/pb_kits/playbook/pb_time/time.rb +14 -2
  100. data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +60 -0
  101. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +20 -3
  102. data/app/pb_kits/playbook/pb_typeahead/components/Control.jsx +30 -0
  103. data/app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.jsx +13 -0
  104. data/app/pb_kits/playbook/pb_typeahead/components/MenuList.jsx +12 -0
  105. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx +51 -0
  106. data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx +34 -0
  107. data/app/pb_kits/playbook/pb_typeahead/components/Placeholder.jsx +13 -0
  108. data/app/pb_kits/playbook/pb_typeahead/components/ValueContainer.jsx +13 -0
  109. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx +22 -0
  110. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx +29 -0
  111. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx +84 -0
  112. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_summary.jsx +45 -0
  113. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +101 -0
  114. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_summary.jsx +27 -0
  115. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +8 -2
  116. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +4 -0
  117. data/app/pb_kits/playbook/tokens/_typography.scss +4 -4
  118. data/app/pb_kits/playbook/vendor.js +6 -0
  119. data/lib/playbook/version.rb +1 -1
  120. metadata +71 -8
  121. data/app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb +0 -24
  122. data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx +0 -32
  123. data/app/pb_kits/playbook/pb_date/docs/_date_default_react.jsx +0 -20
  124. data/app/pb_kits/playbook/pb_date/docs/_date_default_react.md +0 -3
  125. data/app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb +0 -27
  126. data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx +0 -39
@@ -0,0 +1,9 @@
1
+ <%= pb_rails("date_picker", props: {
2
+ label: "Your Label Here",
3
+ picker_id: "date-picker-label"
4
+ }) %>
5
+
6
+ <%= pb_rails("date_picker", props: {
7
+ hide_label: true,
8
+ picker_id: "date-picker-hide-label"
9
+ }) %>
@@ -0,0 +1,17 @@
1
+ import React from 'react'
2
+ import { DatePicker } from '../../'
3
+
4
+ const DatePickerLabel = () => (
5
+ <div>
6
+ <DatePicker
7
+ label="Your Label Here"
8
+ pickerId="date-picker-label"
9
+ />
10
+ <DatePicker
11
+ hideLabel
12
+ pickerId="date-picker-hide-label"
13
+ />
14
+ </div>
15
+ )
16
+
17
+ export default DatePickerLabel
@@ -0,0 +1 @@
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`.
@@ -0,0 +1,14 @@
1
+ <%= pb_rails("date_picker", props: {
2
+ label: "Dynamic dates",
3
+ max_date: (Date.today + 3).httpdate,
4
+ min_date: (Date.today - 3).httpdate,
5
+ picker_id: "date-picker-min-max1"
6
+ }) %>
7
+
8
+ <%= pb_rails("date_picker", props: {
9
+ format: "m/d/Y",
10
+ label: "Absolute formatted dates",
11
+ max_date: "10/20/2020",
12
+ min_date: "10/10/2020",
13
+ picker_id: "date-picker-min-max2"
14
+ }) %>
@@ -0,0 +1,22 @@
1
+ import React from 'react'
2
+ import { DatePicker } from '../../'
3
+
4
+ const DatePickerMinMax = () => (
5
+ <div>
6
+ <DatePicker
7
+ label="Dynamic dates using flatpickr increment function"
8
+ maxDate={new Date().fp_incr(3)}
9
+ minDate={new Date().fp_incr(-3)}
10
+ pickerId="date-picker-min-max1"
11
+ />
12
+ <DatePicker
13
+ format="m/d/Y"
14
+ label="Absolute formatted dates"
15
+ maxDate="10/20/2020"
16
+ minDate="10/10/2020"
17
+ pickerId="date-picker-min-max2"
18
+ />
19
+ </div>
20
+ )
21
+
22
+ export default DatePickerMinMax
@@ -0,0 +1,4 @@
1
+ <%= pb_rails("date_picker", props: {
2
+ mode: "range",
3
+ picker_id: "date-picker-range"
4
+ }) %>
@@ -0,0 +1,13 @@
1
+ import React from 'react'
2
+ import { DatePicker } from '../../'
3
+
4
+ const DatePickerRange = () => (
5
+ <div>
6
+ <DatePicker
7
+ mode="range"
8
+ pickerId="date-picker-range"
9
+ />
10
+ </div>
11
+ )
12
+
13
+ export default DatePickerRange
@@ -0,0 +1,7 @@
1
+ <%= pb_rails("date_picker", props: {
2
+ default_date: "05/05/2015",
3
+ max_date: "12/31/2018",
4
+ min_date: "01/01/2015",
5
+ picker_id: "date-picker-year-range",
6
+ year_range: [2015, 2018]
7
+ }) %>
@@ -0,0 +1,16 @@
1
+ import React from 'react'
2
+ import { DatePicker } from '../../'
3
+
4
+ const DatePickerYearRange = () => (
5
+ <div>
6
+ <DatePicker
7
+ defaultDate="05/05/2015"
8
+ maxDate="12/31/2018"
9
+ minDate="01/01/2015"
10
+ pickerId="date-picker-year-range"
11
+ yearRange={[2015, 2018]}
12
+ />
13
+ </div>
14
+ )
15
+
16
+ export default DatePickerYearRange
@@ -0,0 +1 @@
1
+ Defaults to `[1900, 2100]`. Combine with min-max prop for best results.
@@ -0,0 +1,7 @@
1
+ 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.
2
+
3
+ `const fpInstance = document.querySelector('#pickerId')._flatpickr`
4
+
5
+ `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.
6
+
7
+ 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.
@@ -0,0 +1,35 @@
1
+ examples:
2
+
3
+ rails:
4
+ - date_picker_default: Default
5
+ - date_picker_hide_icon: Hide Input Icon
6
+ - date_picker_default_date: Default Date
7
+ - date_picker_input: Input Field
8
+ - date_picker_label: Label
9
+ - date_picker_range: Range
10
+ - date_picker_format: Format
11
+ - date_picker_disabled: Disabled Dates
12
+ - date_picker_min_max: Min Max
13
+ - date_picker_error: Error
14
+ - date_picker_hooks: Hooks
15
+ # - date_picker_allow_input: Allow Input
16
+ - date_picker_year_range: Year Range
17
+ - date_picker_dark: Dark
18
+
19
+
20
+ react:
21
+ - date_picker_default: Default
22
+ - date_picker_hide_icon: Hide Input Icon
23
+ - date_picker_default_date: Default Date
24
+ - date_picker_input: Input Field
25
+ - date_picker_label: Label
26
+ - date_picker_range: Range
27
+ - date_picker_format: Format
28
+ - date_picker_disabled: Disabled Dates
29
+ - date_picker_min_max: Min Max
30
+ - date_picker_error: Error
31
+ - date_picker_hooks: Hooks
32
+ # - date_picker_allow_input: Allow Input
33
+ - date_picker_year_range: Year Range
34
+ - date_picker_dark: Dark
35
+
@@ -0,0 +1,14 @@
1
+ export { default as DatePickerDefault } from './_date_picker_default.jsx'
2
+ export { default as DatePickerHideIcon } from './_date_picker_hide_icon.jsx'
3
+ export { default as DatePickerInput } from './_date_picker_input.jsx'
4
+ export { default as DatePickerDefaultDate } from './_date_picker_default_date.jsx'
5
+ export { default as DatePickerLabel } from './_date_picker_label.jsx'
6
+ export { default as DatePickerRange } from './_date_picker_range.jsx'
7
+ export { default as DatePickerFormat } from './_date_picker_format.jsx'
8
+ export { default as DatePickerDisabled } from './_date_picker_disabled.jsx'
9
+ export { default as DatePickerMinMax } from './_date_picker_min_max.jsx'
10
+ export { default as DatePickerError } from './_date_picker_error.jsx'
11
+ export { default as DatePickerHooks } from './_date_picker_hooks.jsx'
12
+ // export { default as DatePickerAllowInput } from './_date_picker_allow_input.jsx'
13
+ export { default as DatePickerYearRange } from './_date_picker_year_range.jsx'
14
+ export { default as DatePickerDark } from './_date_picker_dark.jsx'
@@ -0,0 +1,33 @@
1
+ // Calendar Icon Styles
2
+ .cal_icon_wrapper {
3
+ pointer-events: none;
4
+ position: absolute;
5
+ top: $space_md + 2;
6
+ right: 0;
7
+ border-left: 1px solid $border_light;
8
+ width: $space_xl + $space_xs;
9
+ height: $space_xl + 5;
10
+ display: flex;
11
+ flex-direction: column;
12
+ justify-content: center;
13
+ padding-left: $space_sm - 1;
14
+ color: $text_lt_light;
15
+ @media (hover: hover) {
16
+ &:hover {
17
+ cursor: pointer;
18
+ }
19
+ }
20
+ &.dark {
21
+ color: $white;
22
+ border-color: $border_dark;
23
+ }
24
+ &.no_label_shift {
25
+ top: 0;
26
+ }
27
+ &.error {
28
+ border-left-color: $error;
29
+ }
30
+ }
31
+ .cal_icon {
32
+ width: $space_sm;
33
+ }
@@ -0,0 +1,53 @@
1
+ // Day and Range Styles
2
+ .flatpickr-day {
3
+ user-select: none;
4
+ @media (hover: hover) {
5
+ &:hover {
6
+ transition-duration: $transition_short;
7
+ transition-timing-function: $easeIn;
8
+ background-color: #F6FAFF;
9
+ border-color: #F6FAFF;
10
+ box-shadow: $shadow_deep;
11
+ }
12
+ }
13
+ }
14
+ .flatpickr-day.today {
15
+ border: none;
16
+ font-weight: $bold;
17
+ color: $charcoal;
18
+ &.selected {
19
+ color: $text_dk_default;
20
+ }
21
+ }
22
+ .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange {
23
+ border-radius: $space_xl + 10;
24
+ background-color: $primary;
25
+ border-color: $primary;
26
+ box-shadow: $shadow_deep;
27
+ font-weight: $bold;
28
+ }
29
+ .flatpickr-day.startRange {
30
+ box-shadow: $space_sm + 1 0 0 #F7FBFF
31
+ }
32
+ .flatpickr-day.endRange {
33
+ box-shadow: -$space_sm 0 0 #F7FBFF
34
+ }
35
+ .flatpickr-day.inRange {
36
+ background-color: #F7FBFF;
37
+ border: 2px;
38
+ box-shadow: -$space_xs + 4 0 0 #F7FBFF, $space_xs - 3 0 0 #F7FBFF;
39
+ }
40
+ .flatpickr-innerContainer {
41
+ overflow: visible;
42
+ }
43
+ .flatpickr-days {
44
+ overflow: visible;
45
+ }
46
+ // Weekday Styling
47
+ div.flatpickr-weekdays {
48
+ margin-top: $space_xs;
49
+ }
50
+ span.flatpickr-weekday {
51
+ @include caption;
52
+ user-select: none;
53
+ }
@@ -0,0 +1,785 @@
1
+ // Manual Import -- Flatpickr Styles
2
+ .flatpickr-calendar {
3
+ background: transparent;
4
+ opacity: 0;
5
+ display: none;
6
+ text-align: center;
7
+ visibility: hidden;
8
+ padding: 0;
9
+ -webkit-animation: none;
10
+ animation: none;
11
+ direction: ltr;
12
+ border: 0;
13
+ font-size: 14px;
14
+ line-height: 24px;
15
+ border-radius: 5px;
16
+ position: absolute;
17
+ width: 307.875px;
18
+ -webkit-box-sizing: border-box;
19
+ box-sizing: border-box;
20
+ -ms-touch-action: manipulation;
21
+ touch-action: manipulation;
22
+ background: #fff;
23
+ -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);
24
+ 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);
25
+ }
26
+ .flatpickr-calendar.open,
27
+ .flatpickr-calendar.inline {
28
+ opacity: 1;
29
+ max-height: 640px;
30
+ visibility: visible;
31
+ }
32
+ .flatpickr-calendar.open {
33
+ display: inline-block;
34
+ z-index: 99999;
35
+ }
36
+ .flatpickr-calendar.animate.open {
37
+ -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
38
+ animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
39
+ }
40
+ .flatpickr-calendar.inline {
41
+ display: block;
42
+ position: relative;
43
+ top: 2px;
44
+ }
45
+ .flatpickr-calendar.static {
46
+ position: absolute;
47
+ top: calc(100% + 2px);
48
+ }
49
+ .flatpickr-calendar.static.open {
50
+ z-index: 999;
51
+ display: block;
52
+ }
53
+ .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
54
+ -webkit-box-shadow: none !important;
55
+ box-shadow: none !important;
56
+ }
57
+ .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
58
+ -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
59
+ box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
60
+ }
61
+ .flatpickr-calendar .hasWeeks .dayContainer,
62
+ .flatpickr-calendar .hasTime .dayContainer {
63
+ border-bottom: 0;
64
+ border-bottom-right-radius: 0;
65
+ border-bottom-left-radius: 0;
66
+ }
67
+ .flatpickr-calendar .hasWeeks .dayContainer {
68
+ border-left: 0;
69
+ }
70
+ .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time {
71
+ height: 40px;
72
+ border-top: 1px solid #e6e6e6;
73
+ }
74
+ .flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
75
+ height: auto;
76
+ }
77
+ .flatpickr-calendar:before,
78
+ .flatpickr-calendar:after {
79
+ position: absolute;
80
+ display: block;
81
+ pointer-events: none;
82
+ border: solid transparent;
83
+ content: '';
84
+ height: 0;
85
+ width: 0;
86
+ left: 22px;
87
+ }
88
+ .flatpickr-calendar.rightMost:before,
89
+ .flatpickr-calendar.rightMost:after {
90
+ left: auto;
91
+ right: 22px;
92
+ }
93
+ .flatpickr-calendar:before {
94
+ border-width: 5px;
95
+ margin: 0 -5px;
96
+ }
97
+ .flatpickr-calendar:after {
98
+ border-width: 4px;
99
+ margin: 0 -4px;
100
+ }
101
+ .flatpickr-calendar.arrowTop:before,
102
+ .flatpickr-calendar.arrowTop:after {
103
+ bottom: 100%;
104
+ }
105
+ .flatpickr-calendar.arrowTop:before {
106
+ border-bottom-color: #e6e6e6;
107
+ }
108
+ .flatpickr-calendar.arrowTop:after {
109
+ border-bottom-color: #fff;
110
+ }
111
+ .flatpickr-calendar.arrowBottom:before,
112
+ .flatpickr-calendar.arrowBottom:after {
113
+ top: 100%;
114
+ }
115
+ .flatpickr-calendar.arrowBottom:before {
116
+ border-top-color: #e6e6e6;
117
+ }
118
+ .flatpickr-calendar.arrowBottom:after {
119
+ border-top-color: #fff;
120
+ }
121
+ .flatpickr-calendar:focus {
122
+ outline: 0;
123
+ }
124
+ .flatpickr-wrapper {
125
+ position: relative;
126
+ display: inline-block;
127
+ }
128
+ .flatpickr-months {
129
+ display: -webkit-box;
130
+ display: -webkit-flex;
131
+ display: -ms-flexbox;
132
+ display: flex;
133
+ }
134
+ .flatpickr-months .flatpickr-month {
135
+ background: transparent;
136
+ color: rgba(0,0,0,0.9);
137
+ fill: rgba(0,0,0,0.9);
138
+ height: 34px;
139
+ line-height: 1;
140
+ text-align: center;
141
+ position: relative;
142
+ -webkit-user-select: none;
143
+ -moz-user-select: none;
144
+ -ms-user-select: none;
145
+ user-select: none;
146
+ overflow: hidden;
147
+ -webkit-box-flex: 1;
148
+ -webkit-flex: 1;
149
+ -ms-flex: 1;
150
+ flex: 1;
151
+ }
152
+ .flatpickr-months .flatpickr-prev-month,
153
+ .flatpickr-months .flatpickr-next-month {
154
+ text-decoration: none;
155
+ cursor: pointer;
156
+ position: absolute;
157
+ top: 0;
158
+ height: 34px;
159
+ padding: 10px;
160
+ z-index: 3;
161
+ color: rgba(0,0,0,0.9);
162
+ fill: rgba(0,0,0,0.9);
163
+ }
164
+ .flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
165
+ .flatpickr-months .flatpickr-next-month.flatpickr-disabled {
166
+ cursor: not-allowed;
167
+ }
168
+ .flatpickr-months .flatpickr-prev-month i,
169
+ .flatpickr-months .flatpickr-next-month i {
170
+ position: relative;
171
+ }
172
+ .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
173
+ .flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
174
+ /*
175
+ /*rtl:begin:ignore*/
176
+ /*
177
+ */
178
+ left: 0;
179
+ /*
180
+ /*rtl:end:ignore*/
181
+ /*
182
+ */
183
+ }
184
+ /*
185
+ /*rtl:begin:ignore*/
186
+ /*
187
+ /*rtl:end:ignore*/
188
+ .flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
189
+ .flatpickr-months .flatpickr-next-month.flatpickr-next-month {
190
+ /*
191
+ /*rtl:begin:ignore*/
192
+ /*
193
+ */
194
+ right: 0;
195
+ /*
196
+ /*rtl:end:ignore*/
197
+ /*
198
+ */
199
+ }
200
+ /*
201
+ /*rtl:begin:ignore*/
202
+ /*
203
+ /*rtl:end:ignore*/
204
+ .flatpickr-months .flatpickr-prev-month:hover,
205
+ .flatpickr-months .flatpickr-next-month:hover {
206
+ color: #959ea9;
207
+ }
208
+ .flatpickr-months .flatpickr-prev-month:hover svg,
209
+ .flatpickr-months .flatpickr-next-month:hover svg {
210
+ fill: #f64747;
211
+ }
212
+ .flatpickr-months .flatpickr-prev-month svg,
213
+ .flatpickr-months .flatpickr-next-month svg {
214
+ width: 14px;
215
+ height: 14px;
216
+ }
217
+ .flatpickr-months .flatpickr-prev-month svg path,
218
+ .flatpickr-months .flatpickr-next-month svg path {
219
+ -webkit-transition: fill 0.1s;
220
+ transition: fill 0.1s;
221
+ fill: inherit;
222
+ }
223
+ .numInputWrapper {
224
+ position: relative;
225
+ height: auto;
226
+ }
227
+ .numInputWrapper input,
228
+ .numInputWrapper span {
229
+ display: inline-block;
230
+ }
231
+ .numInputWrapper input {
232
+ width: 100%;
233
+ }
234
+ .numInputWrapper input::-ms-clear {
235
+ display: none;
236
+ }
237
+ .numInputWrapper input::-webkit-outer-spin-button,
238
+ .numInputWrapper input::-webkit-inner-spin-button {
239
+ margin: 0;
240
+ -webkit-appearance: none;
241
+ }
242
+ .numInputWrapper span {
243
+ position: absolute;
244
+ right: 0;
245
+ width: 14px;
246
+ padding: 0 4px 0 2px;
247
+ height: 50%;
248
+ line-height: 50%;
249
+ opacity: 0;
250
+ cursor: pointer;
251
+ border: 1px solid rgba(57,57,57,0.15);
252
+ -webkit-box-sizing: border-box;
253
+ box-sizing: border-box;
254
+ }
255
+ .numInputWrapper span:hover {
256
+ background: rgba(0,0,0,0.1);
257
+ }
258
+ .numInputWrapper span:active {
259
+ background: rgba(0,0,0,0.2);
260
+ }
261
+ .numInputWrapper span:after {
262
+ display: block;
263
+ content: "";
264
+ position: absolute;
265
+ }
266
+ .numInputWrapper span.arrowUp {
267
+ top: 0;
268
+ border-bottom: 0;
269
+ }
270
+ .numInputWrapper span.arrowUp:after {
271
+ border-left: 4px solid transparent;
272
+ border-right: 4px solid transparent;
273
+ border-bottom: 4px solid rgba(57,57,57,0.6);
274
+ top: 26%;
275
+ }
276
+ .numInputWrapper span.arrowDown {
277
+ top: 50%;
278
+ }
279
+ .numInputWrapper span.arrowDown:after {
280
+ border-left: 4px solid transparent;
281
+ border-right: 4px solid transparent;
282
+ border-top: 4px solid rgba(57,57,57,0.6);
283
+ top: 40%;
284
+ }
285
+ .numInputWrapper span svg {
286
+ width: inherit;
287
+ height: auto;
288
+ }
289
+ .numInputWrapper span svg path {
290
+ fill: rgba(0,0,0,0.5);
291
+ }
292
+ .numInputWrapper:hover {
293
+ background: rgba(0,0,0,0.05);
294
+ }
295
+ .numInputWrapper:hover span {
296
+ opacity: 1;
297
+ }
298
+ .flatpickr-current-month {
299
+ font-size: 135%;
300
+ line-height: inherit;
301
+ font-weight: 300;
302
+ color: inherit;
303
+ position: absolute;
304
+ width: 75%;
305
+ left: 12.5%;
306
+ padding: 7.48px 0 0 0;
307
+ line-height: 1;
308
+ height: 34px;
309
+ display: inline-block;
310
+ text-align: center;
311
+ -webkit-transform: translate3d(0px, 0px, 0px);
312
+ transform: translate3d(0px, 0px, 0px);
313
+ }
314
+ .flatpickr-current-month span.cur-month {
315
+ font-family: inherit;
316
+ font-weight: 700;
317
+ color: inherit;
318
+ display: inline-block;
319
+ margin-left: 0.5ch;
320
+ padding: 0;
321
+ }
322
+ .flatpickr-current-month span.cur-month:hover {
323
+ background: rgba(0,0,0,0.05);
324
+ }
325
+ .flatpickr-current-month .numInputWrapper {
326
+ width: 6ch;
327
+ width: 7ch\0;
328
+ display: inline-block;
329
+ }
330
+ .flatpickr-current-month .numInputWrapper span.arrowUp:after {
331
+ border-bottom-color: rgba(0,0,0,0.9);
332
+ }
333
+ .flatpickr-current-month .numInputWrapper span.arrowDown:after {
334
+ border-top-color: rgba(0,0,0,0.9);
335
+ }
336
+ .flatpickr-current-month input.cur-year {
337
+ background: transparent;
338
+ -webkit-box-sizing: border-box;
339
+ box-sizing: border-box;
340
+ color: inherit;
341
+ cursor: text;
342
+ padding: 0 0 0 0.5ch;
343
+ margin: 0;
344
+ display: inline-block;
345
+ font-size: inherit;
346
+ font-family: inherit;
347
+ font-weight: 300;
348
+ line-height: inherit;
349
+ height: auto;
350
+ border: 0;
351
+ border-radius: 0;
352
+ vertical-align: initial;
353
+ -webkit-appearance: textfield;
354
+ -moz-appearance: textfield;
355
+ appearance: textfield;
356
+ }
357
+ .flatpickr-current-month input.cur-year:focus {
358
+ outline: 0;
359
+ }
360
+ .flatpickr-current-month input.cur-year[disabled],
361
+ .flatpickr-current-month input.cur-year[disabled]:hover {
362
+ font-size: 100%;
363
+ color: rgba(0,0,0,0.5);
364
+ background: transparent;
365
+ pointer-events: none;
366
+ }
367
+ .flatpickr-current-month .flatpickr-monthDropdown-months {
368
+ appearance: menulist;
369
+ background: transparent;
370
+ border: none;
371
+ border-radius: 0;
372
+ box-sizing: border-box;
373
+ color: inherit;
374
+ cursor: pointer;
375
+ font-size: inherit;
376
+ font-family: inherit;
377
+ font-weight: 300;
378
+ height: auto;
379
+ line-height: inherit;
380
+ margin: -1px 0 0 0;
381
+ outline: none;
382
+ padding: 0 0 0 0.5ch;
383
+ position: relative;
384
+ vertical-align: initial;
385
+ -webkit-box-sizing: border-box;
386
+ -webkit-appearance: menulist;
387
+ -moz-appearance: menulist;
388
+ width: auto;
389
+ }
390
+ .flatpickr-current-month .flatpickr-monthDropdown-months:focus,
391
+ .flatpickr-current-month .flatpickr-monthDropdown-months:active {
392
+ outline: none;
393
+ }
394
+ .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
395
+ background: rgba(0,0,0,0.05);
396
+ }
397
+ .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
398
+ background-color: transparent;
399
+ outline: none;
400
+ padding: 0;
401
+ }
402
+ .flatpickr-weekdays {
403
+ background: transparent;
404
+ text-align: center;
405
+ overflow: hidden;
406
+ width: 100%;
407
+ display: -webkit-box;
408
+ display: -webkit-flex;
409
+ display: -ms-flexbox;
410
+ display: flex;
411
+ -webkit-box-align: center;
412
+ -webkit-align-items: center;
413
+ -ms-flex-align: center;
414
+ align-items: center;
415
+ height: 28px;
416
+ }
417
+ .flatpickr-weekdays .flatpickr-weekdaycontainer {
418
+ display: -webkit-box;
419
+ display: -webkit-flex;
420
+ display: -ms-flexbox;
421
+ display: flex;
422
+ -webkit-box-flex: 1;
423
+ -webkit-flex: 1;
424
+ -ms-flex: 1;
425
+ flex: 1;
426
+ }
427
+ span.flatpickr-weekday {
428
+ cursor: default;
429
+ font-size: 90%;
430
+ background: transparent;
431
+ color: rgba(0,0,0,0.54);
432
+ line-height: 1;
433
+ margin: 0;
434
+ text-align: center;
435
+ display: block;
436
+ -webkit-box-flex: 1;
437
+ -webkit-flex: 1;
438
+ -ms-flex: 1;
439
+ flex: 1;
440
+ font-weight: bolder;
441
+ }
442
+ .dayContainer,
443
+ .flatpickr-weeks {
444
+ padding: 1px 0 0 0;
445
+ }
446
+ .flatpickr-days {
447
+ position: relative;
448
+ overflow: hidden;
449
+ display: -webkit-box;
450
+ display: -webkit-flex;
451
+ display: -ms-flexbox;
452
+ display: flex;
453
+ -webkit-box-align: start;
454
+ -webkit-align-items: flex-start;
455
+ -ms-flex-align: start;
456
+ align-items: flex-start;
457
+ width: 307.875px;
458
+ }
459
+ .flatpickr-days:focus {
460
+ outline: 0;
461
+ }
462
+ .dayContainer {
463
+ padding: 0;
464
+ outline: 0;
465
+ text-align: left;
466
+ width: 307.875px;
467
+ min-width: 307.875px;
468
+ max-width: 307.875px;
469
+ -webkit-box-sizing: border-box;
470
+ box-sizing: border-box;
471
+ display: inline-block;
472
+ display: -ms-flexbox;
473
+ display: -webkit-box;
474
+ display: -webkit-flex;
475
+ display: flex;
476
+ -webkit-flex-wrap: wrap;
477
+ flex-wrap: wrap;
478
+ -ms-flex-wrap: wrap;
479
+ -ms-flex-pack: justify;
480
+ -webkit-justify-content: space-around;
481
+ justify-content: space-around;
482
+ -webkit-transform: translate3d(0px, 0px, 0px);
483
+ transform: translate3d(0px, 0px, 0px);
484
+ opacity: 1;
485
+ }
486
+ .dayContainer + .dayContainer {
487
+ -webkit-box-shadow: -1px 0 0 #e6e6e6;
488
+ box-shadow: -1px 0 0 #e6e6e6;
489
+ }
490
+ .flatpickr-day {
491
+ background: none;
492
+ border: 1px solid transparent;
493
+ border-radius: 150px;
494
+ -webkit-box-sizing: border-box;
495
+ box-sizing: border-box;
496
+ color: #393939;
497
+ cursor: pointer;
498
+ font-weight: 400;
499
+ width: 14.2857143%;
500
+ -webkit-flex-basis: 14.2857143%;
501
+ -ms-flex-preferred-size: 14.2857143%;
502
+ flex-basis: 14.2857143%;
503
+ max-width: 39px;
504
+ height: 39px;
505
+ line-height: 39px;
506
+ margin: 0;
507
+ display: inline-block;
508
+ position: relative;
509
+ -webkit-box-pack: center;
510
+ -webkit-justify-content: center;
511
+ -ms-flex-pack: center;
512
+ justify-content: center;
513
+ text-align: center;
514
+ }
515
+ .flatpickr-day.inRange,
516
+ .flatpickr-day.prevMonthDay.inRange,
517
+ .flatpickr-day.nextMonthDay.inRange,
518
+ .flatpickr-day.today.inRange,
519
+ .flatpickr-day.prevMonthDay.today.inRange,
520
+ .flatpickr-day.nextMonthDay.today.inRange,
521
+ .flatpickr-day:hover,
522
+ .flatpickr-day.prevMonthDay:hover,
523
+ .flatpickr-day.nextMonthDay:hover,
524
+ .flatpickr-day:focus,
525
+ .flatpickr-day.prevMonthDay:focus,
526
+ .flatpickr-day.nextMonthDay:focus {
527
+ cursor: pointer;
528
+ outline: 0;
529
+ background: #e6e6e6;
530
+ border-color: #e6e6e6;
531
+ }
532
+ .flatpickr-day.today {
533
+ border-color: #959ea9;
534
+ }
535
+ .flatpickr-day.today:hover,
536
+ .flatpickr-day.today:focus {
537
+ border-color: #959ea9;
538
+ background: #959ea9;
539
+ color: #fff;
540
+ }
541
+ .flatpickr-day.selected,
542
+ .flatpickr-day.startRange,
543
+ .flatpickr-day.endRange,
544
+ .flatpickr-day.selected.inRange,
545
+ .flatpickr-day.startRange.inRange,
546
+ .flatpickr-day.endRange.inRange,
547
+ .flatpickr-day.selected:focus,
548
+ .flatpickr-day.startRange:focus,
549
+ .flatpickr-day.endRange:focus,
550
+ .flatpickr-day.selected:hover,
551
+ .flatpickr-day.startRange:hover,
552
+ .flatpickr-day.endRange:hover,
553
+ .flatpickr-day.selected.prevMonthDay,
554
+ .flatpickr-day.startRange.prevMonthDay,
555
+ .flatpickr-day.endRange.prevMonthDay,
556
+ .flatpickr-day.selected.nextMonthDay,
557
+ .flatpickr-day.startRange.nextMonthDay,
558
+ .flatpickr-day.endRange.nextMonthDay {
559
+ background: #569ff7;
560
+ -webkit-box-shadow: none;
561
+ box-shadow: none;
562
+ color: #fff;
563
+ border-color: #569ff7;
564
+ }
565
+ .flatpickr-day.selected.startRange,
566
+ .flatpickr-day.startRange.startRange,
567
+ .flatpickr-day.endRange.startRange {
568
+ border-radius: 50px 0 0 50px;
569
+ }
570
+ .flatpickr-day.selected.endRange,
571
+ .flatpickr-day.startRange.endRange,
572
+ .flatpickr-day.endRange.endRange {
573
+ border-radius: 0 50px 50px 0;
574
+ }
575
+ .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
576
+ .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
577
+ .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
578
+ -webkit-box-shadow: none;
579
+ box-shadow: none;
580
+ }
581
+ .flatpickr-day.selected.startRange.endRange,
582
+ .flatpickr-day.startRange.startRange.endRange,
583
+ .flatpickr-day.endRange.startRange.endRange {
584
+ border-radius: 50px;
585
+ }
586
+ .flatpickr-day.inRange {
587
+ border-radius: 0;
588
+ -webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
589
+ box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
590
+ }
591
+ .flatpickr-day.flatpickr-disabled,
592
+ .flatpickr-day.flatpickr-disabled:hover,
593
+ .flatpickr-day.prevMonthDay,
594
+ .flatpickr-day.nextMonthDay,
595
+ .flatpickr-day.notAllowed,
596
+ .flatpickr-day.notAllowed.prevMonthDay,
597
+ .flatpickr-day.notAllowed.nextMonthDay {
598
+ color: rgba(57,57,57,0.3);
599
+ background: transparent;
600
+ border-color: transparent;
601
+ cursor: default;
602
+ }
603
+ .flatpickr-day.flatpickr-disabled,
604
+ .flatpickr-day.flatpickr-disabled:hover {
605
+ cursor: not-allowed;
606
+ color: rgba(57,57,57,0.1);
607
+ }
608
+ .flatpickr-day.week.selected {
609
+ border-radius: 0;
610
+ -webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
611
+ box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
612
+ }
613
+ .flatpickr-day.hidden {
614
+ visibility: hidden;
615
+ }
616
+ .rangeMode .flatpickr-day {
617
+ margin-top: 1px;
618
+ }
619
+ .flatpickr-weekwrapper {
620
+ float: left;
621
+ }
622
+ .flatpickr-weekwrapper .flatpickr-weeks {
623
+ padding: 0 12px;
624
+ -webkit-box-shadow: 1px 0 0 #e6e6e6;
625
+ box-shadow: 1px 0 0 #e6e6e6;
626
+ }
627
+ .flatpickr-weekwrapper .flatpickr-weekday {
628
+ float: none;
629
+ width: 100%;
630
+ line-height: 28px;
631
+ }
632
+ .flatpickr-weekwrapper span.flatpickr-day,
633
+ .flatpickr-weekwrapper span.flatpickr-day:hover {
634
+ display: block;
635
+ width: 100%;
636
+ max-width: none;
637
+ color: rgba(57,57,57,0.3);
638
+ background: transparent;
639
+ cursor: default;
640
+ border: none;
641
+ }
642
+ .flatpickr-innerContainer {
643
+ display: block;
644
+ display: -webkit-box;
645
+ display: -webkit-flex;
646
+ display: -ms-flexbox;
647
+ display: flex;
648
+ -webkit-box-sizing: border-box;
649
+ box-sizing: border-box;
650
+ overflow: hidden;
651
+ }
652
+ .flatpickr-rContainer {
653
+ display: inline-block;
654
+ padding: 0;
655
+ -webkit-box-sizing: border-box;
656
+ box-sizing: border-box;
657
+ }
658
+ .flatpickr-time {
659
+ text-align: center;
660
+ outline: 0;
661
+ display: block;
662
+ height: 0;
663
+ line-height: 40px;
664
+ max-height: 40px;
665
+ -webkit-box-sizing: border-box;
666
+ box-sizing: border-box;
667
+ overflow: hidden;
668
+ display: -webkit-box;
669
+ display: -webkit-flex;
670
+ display: -ms-flexbox;
671
+ display: flex;
672
+ }
673
+ .flatpickr-time:after {
674
+ content: "";
675
+ display: table;
676
+ clear: both;
677
+ }
678
+ .flatpickr-time .numInputWrapper {
679
+ -webkit-box-flex: 1;
680
+ -webkit-flex: 1;
681
+ -ms-flex: 1;
682
+ flex: 1;
683
+ width: 40%;
684
+ height: 40px;
685
+ float: left;
686
+ }
687
+ .flatpickr-time .numInputWrapper span.arrowUp:after {
688
+ border-bottom-color: #393939;
689
+ }
690
+ .flatpickr-time .numInputWrapper span.arrowDown:after {
691
+ border-top-color: #393939;
692
+ }
693
+ .flatpickr-time.hasSeconds .numInputWrapper {
694
+ width: 26%;
695
+ }
696
+ .flatpickr-time.time24hr .numInputWrapper {
697
+ width: 49%;
698
+ }
699
+ .flatpickr-time input {
700
+ background: transparent;
701
+ -webkit-box-shadow: none;
702
+ box-shadow: none;
703
+ border: 0;
704
+ border-radius: 0;
705
+ text-align: center;
706
+ margin: 0;
707
+ padding: 0;
708
+ height: inherit;
709
+ line-height: inherit;
710
+ color: #393939;
711
+ font-size: 14px;
712
+ position: relative;
713
+ -webkit-box-sizing: border-box;
714
+ box-sizing: border-box;
715
+ -webkit-appearance: textfield;
716
+ -moz-appearance: textfield;
717
+ appearance: textfield;
718
+ }
719
+ .flatpickr-time input.flatpickr-hour {
720
+ font-weight: bold;
721
+ }
722
+ .flatpickr-time input.flatpickr-minute,
723
+ .flatpickr-time input.flatpickr-second {
724
+ font-weight: 400;
725
+ }
726
+ .flatpickr-time input:focus {
727
+ outline: 0;
728
+ border: 0;
729
+ }
730
+ .flatpickr-time .flatpickr-time-separator,
731
+ .flatpickr-time .flatpickr-am-pm {
732
+ height: inherit;
733
+ float: left;
734
+ line-height: inherit;
735
+ color: #393939;
736
+ font-weight: bold;
737
+ width: 2%;
738
+ -webkit-user-select: none;
739
+ -moz-user-select: none;
740
+ -ms-user-select: none;
741
+ user-select: none;
742
+ -webkit-align-self: center;
743
+ -ms-flex-item-align: center;
744
+ align-self: center;
745
+ }
746
+ .flatpickr-time .flatpickr-am-pm {
747
+ outline: 0;
748
+ width: 18%;
749
+ cursor: pointer;
750
+ text-align: center;
751
+ font-weight: 400;
752
+ }
753
+ .flatpickr-time input:hover,
754
+ .flatpickr-time .flatpickr-am-pm:hover,
755
+ .flatpickr-time input:focus,
756
+ .flatpickr-time .flatpickr-am-pm:focus {
757
+ background: #eee;
758
+ }
759
+ .flatpickr-input[readonly] {
760
+ cursor: pointer;
761
+ }
762
+ @-webkit-keyframes fpFadeInDown {
763
+ from {
764
+ opacity: 0;
765
+ -webkit-transform: translate3d(0, -20px, 0);
766
+ transform: translate3d(0, -20px, 0);
767
+ }
768
+ to {
769
+ opacity: 1;
770
+ -webkit-transform: translate3d(0, 0, 0);
771
+ transform: translate3d(0, 0, 0);
772
+ }
773
+ }
774
+ @keyframes fpFadeInDown {
775
+ from {
776
+ opacity: 0;
777
+ -webkit-transform: translate3d(0, -20px, 0);
778
+ transform: translate3d(0, -20px, 0);
779
+ }
780
+ to {
781
+ opacity: 1;
782
+ -webkit-transform: translate3d(0, 0, 0);
783
+ transform: translate3d(0, 0, 0);
784
+ }
785
+ }