playbook_ui 6.1.0.pre.alpha5 → 6.3.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (299) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +0 -1
  3. data/app/pb_kits/playbook/data/menu.yml +4 -4
  4. data/app/pb_kits/playbook/index.js +0 -2
  5. data/app/pb_kits/playbook/packs/examples.js +0 -2
  6. data/app/pb_kits/playbook/pb_avatar/_avatar.jsx +4 -4
  7. data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.html.erb +7 -4
  8. data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.jsx +38 -30
  9. data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.scss +3 -0
  10. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions_dark.html.erb +17 -0
  11. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions_dark.jsx +21 -0
  12. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_dark.html.erb +9 -0
  13. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_dark.jsx +14 -0
  14. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_on_click_dark.html.erb +15 -0
  15. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_on_click_dark.jsx +16 -0
  16. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement_dark.html.erb +31 -0
  17. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement_dark.jsx +33 -0
  18. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip_dark.html.erb +12 -0
  19. data/app/pb_kits/playbook/pb_avatar_action_button/docs/example.yml +10 -3
  20. data/app/pb_kits/playbook/pb_avatar_action_button/docs/index.js +4 -0
  21. data/app/pb_kits/playbook/pb_badge/_badge.jsx +6 -10
  22. data/app/pb_kits/playbook/pb_badge/docs/_description.md +1 -0
  23. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx +16 -16
  24. data/app/pb_kits/playbook/pb_body/_body.jsx +9 -9
  25. data/app/pb_kits/playbook/pb_body/_body.scss +28 -9
  26. data/app/pb_kits/playbook/pb_body/_body_mixins.scss +6 -3
  27. data/app/pb_kits/playbook/pb_body/body.rb +3 -3
  28. data/app/pb_kits/playbook/pb_button/_button.jsx +15 -15
  29. data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.jsx +6 -6
  30. data/app/pb_kits/playbook/pb_caption/_caption.jsx +4 -4
  31. data/app/pb_kits/playbook/pb_caption/_caption.scss +3 -0
  32. data/app/pb_kits/playbook/pb_card/_card.jsx +20 -24
  33. data/app/pb_kits/playbook/pb_card/_card.scss +1 -1
  34. data/app/pb_kits/playbook/pb_card/_card_mixin.scss +4 -4
  35. data/app/pb_kits/playbook/pb_card/card_header.rb +3 -3
  36. data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb +38 -7
  37. data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx +54 -6
  38. data/app/pb_kits/playbook/pb_card/docs/_card_header.md +1 -1
  39. data/app/pb_kits/playbook/pb_checkbox/_checkbox.html.erb +1 -1
  40. data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx +9 -9
  41. data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +5 -0
  42. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.jsx +7 -7
  43. data/app/pb_kits/playbook/pb_contact/_contact.jsx +5 -5
  44. data/app/pb_kits/playbook/pb_currency/_currency.jsx +7 -7
  45. data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx +7 -7
  46. data/app/pb_kits/playbook/pb_date/_date.jsx +2 -2
  47. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx +5 -5
  48. data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx +6 -6
  49. data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.jsx +6 -6
  50. data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.jsx +4 -4
  51. data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.jsx +5 -5
  52. data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.jsx +4 -4
  53. data/app/pb_kits/playbook/pb_file_upload/_file_upload.jsx +3 -3
  54. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +1 -2
  55. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.html.erb +1 -0
  56. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx +4 -4
  57. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dark.html.erb +21 -0
  58. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dark.jsx +40 -0
  59. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.html.erb +5 -0
  60. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.jsx +16 -0
  61. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +4 -1
  62. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js +2 -0
  63. data/app/pb_kits/playbook/pb_flex/_flex.jsx +6 -6
  64. data/app/pb_kits/playbook/pb_flex/_flex_item.jsx +4 -4
  65. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +2 -2
  66. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +2 -2
  67. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb +2 -2
  68. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb +2 -2
  69. data/app/pb_kits/playbook/pb_form/form_builder.rb +1 -1
  70. data/app/pb_kits/playbook/pb_form/form_builder/checkbox_field.rb +29 -0
  71. data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx +6 -6
  72. data/app/pb_kits/playbook/pb_gauge/_gauge.jsx +14 -14
  73. data/app/pb_kits/playbook/pb_hashtag/_hashtag.html.erb +4 -4
  74. data/app/pb_kits/playbook/pb_hashtag/_hashtag.jsx +27 -13
  75. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_dark.jsx +3 -0
  76. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_default.jsx +3 -0
  77. data/app/pb_kits/playbook/pb_hashtag/hashtag.rb +1 -6
  78. data/app/pb_kits/playbook/pb_highlight/_highlight.jsx +5 -5
  79. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx +11 -11
  80. data/app/pb_kits/playbook/pb_icon/_icon.jsx +9 -9
  81. data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.html.erb +4 -3
  82. data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.jsx +21 -6
  83. data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss +4 -1
  84. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color_dark.html.erb +42 -0
  85. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color_dark.jsx +59 -0
  86. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_dark.html.erb +4 -0
  87. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_dark.jsx +16 -0
  88. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.html.erb +4 -4
  89. data/app/pb_kits/playbook/pb_icon_circle/docs/{_icon_circle_size.jsx → _icon_circle_sizes.jsx} +2 -2
  90. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes_dark.html.erb +29 -0
  91. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes_dark.jsx +34 -0
  92. data/app/pb_kits/playbook/pb_icon_circle/docs/example.yml +8 -1
  93. data/app/pb_kits/playbook/pb_icon_circle/docs/index.js +4 -1
  94. data/app/pb_kits/playbook/pb_icon_value/_icon_value.html.erb +4 -3
  95. data/app/pb_kits/playbook/pb_icon_value/_icon_value.jsx +9 -3
  96. data/app/pb_kits/playbook/pb_icon_value/_icon_value.scss +3 -0
  97. data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align.jsx +31 -0
  98. data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align_dark.html.erb +23 -0
  99. data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align_dark.jsx +34 -0
  100. data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_dark.html.erb +21 -0
  101. data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_dark.jsx +32 -0
  102. data/app/pb_kits/playbook/pb_icon_value/docs/example.yml +5 -0
  103. data/app/pb_kits/playbook/pb_icon_value/docs/index.js +3 -0
  104. data/app/pb_kits/playbook/pb_image/_image.jsx +4 -4
  105. data/app/pb_kits/playbook/pb_label_pill/_label_pill.jsx +4 -4
  106. data/app/pb_kits/playbook/pb_label_value/_label_value.html.erb +1 -1
  107. data/app/pb_kits/playbook/pb_label_value/_label_value.jsx +14 -18
  108. data/app/pb_kits/playbook/pb_label_value/_label_value.scss +1 -1
  109. data/app/pb_kits/playbook/pb_label_value/label_value.rb +1 -6
  110. data/app/pb_kits/playbook/pb_layout/_layout.jsx +14 -14
  111. data/app/pb_kits/playbook/pb_legend/_legend.jsx +10 -10
  112. data/app/pb_kits/playbook/pb_legend/legend.rb +1 -6
  113. data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx +17 -17
  114. data/app/pb_kits/playbook/pb_list/_list.jsx +10 -10
  115. data/app/pb_kits/playbook/pb_list/_list_item.jsx +4 -4
  116. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.jsx +4 -4
  117. data/app/pb_kits/playbook/pb_logistic/_logistic.jsx +7 -7
  118. data/app/pb_kits/playbook/pb_message/_message.jsx +8 -8
  119. data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.html.erb +4 -3
  120. data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.jsx +30 -12
  121. data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss +6 -0
  122. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_dark.html.erb +41 -0
  123. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_dark.jsx +52 -0
  124. data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml +2 -0
  125. data/app/pb_kits/playbook/pb_multiple_users/docs/index.js +1 -0
  126. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.html.erb +6 -4
  127. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.jsx +21 -10
  128. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss +12 -7
  129. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_dark.html.erb +53 -0
  130. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_dark.jsx +62 -0
  131. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +2 -0
  132. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +1 -0
  133. data/app/pb_kits/playbook/pb_nav/_item.html.erb +3 -2
  134. data/app/pb_kits/playbook/pb_nav/_item.jsx +37 -15
  135. data/app/pb_kits/playbook/pb_nav/_nav.html.erb +3 -2
  136. data/app/pb_kits/playbook/pb_nav/_nav.jsx +34 -15
  137. data/app/pb_kits/playbook/pb_nav/docs/example.yml +1 -0
  138. data/app/pb_kits/playbook/pb_online_status/_online_status.html.erb +3 -2
  139. data/app/pb_kits/playbook/pb_online_status/_online_status.jsx +16 -6
  140. data/app/pb_kits/playbook/pb_online_status/_online_status_mixins.scss +5 -2
  141. data/app/pb_kits/playbook/pb_online_status/docs/_online_status_dark.html.erb +9 -0
  142. data/app/pb_kits/playbook/pb_online_status/docs/_online_status_dark.jsx +28 -0
  143. data/app/pb_kits/playbook/pb_online_status/docs/example.yml +2 -0
  144. data/app/pb_kits/playbook/pb_online_status/docs/index.js +1 -0
  145. data/app/pb_kits/playbook/pb_person/_person.jsx +4 -4
  146. data/app/pb_kits/playbook/pb_person_contact/_person_contact.jsx +9 -9
  147. data/app/pb_kits/playbook/pb_pill/_pill.html.erb +3 -2
  148. data/app/pb_kits/playbook/pb_pill/_pill.jsx +24 -6
  149. data/app/pb_kits/playbook/pb_pill/_pill.scss +1 -1
  150. data/app/pb_kits/playbook/pb_pill/docs/_pill_dark.html.erb +52 -0
  151. data/app/pb_kits/playbook/pb_pill/docs/_pill_dark.jsx +69 -0
  152. data/app/pb_kits/playbook/pb_pill/docs/example.yml +3 -1
  153. data/app/pb_kits/playbook/pb_pill/docs/index.js +1 -0
  154. data/app/pb_kits/playbook/pb_popover/_popover.html.erb +3 -2
  155. data/app/pb_kits/playbook/pb_popover/_popover.jsx +20 -8
  156. data/app/pb_kits/playbook/pb_popover/docs/_popover_close_dark.html.erb +43 -0
  157. data/app/pb_kits/playbook/pb_popover/docs/_popover_close_dark.jsx +102 -0
  158. data/app/pb_kits/playbook/pb_popover/docs/_popover_dark.html.erb +25 -0
  159. data/app/pb_kits/playbook/pb_popover/docs/_popover_dark.jsx +48 -0
  160. data/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb +1 -0
  161. data/app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.html.erb +13 -0
  162. data/app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.jsx +51 -0
  163. data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height_dark.html.erb +25 -0
  164. data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height_dark.jsx +54 -0
  165. data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index_dark.html.erb +14 -0
  166. data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index_dark.jsx +52 -0
  167. data/app/pb_kits/playbook/pb_popover/docs/example.yml +10 -0
  168. data/app/pb_kits/playbook/pb_popover/docs/index.js +5 -0
  169. data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.html.erb +1 -1
  170. data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.jsx +9 -10
  171. data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.scss +1 -2
  172. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_status_dark.html.erb +1 -0
  173. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_status_dark.jsx +19 -0
  174. data/app/pb_kits/playbook/pb_progress_pills/docs/example.yml +2 -0
  175. data/app/pb_kits/playbook/pb_progress_pills/docs/index.js +1 -0
  176. data/app/pb_kits/playbook/pb_progress_pills/progress_pills.rb +2 -13
  177. data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.jsx +9 -9
  178. data/app/pb_kits/playbook/pb_progress_step/_progress_step.html.erb +1 -1
  179. data/app/pb_kits/playbook/pb_progress_step/_progress_step.jsx +10 -11
  180. data/app/pb_kits/playbook/pb_progress_step/_progress_step.scss +129 -366
  181. data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.html.erb +4 -16
  182. data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx +11 -21
  183. data/app/pb_kits/playbook/pb_progress_step/docs/_description.md +5 -1
  184. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_dark.html.erb +26 -0
  185. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb +20 -6
  186. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx +3 -15
  187. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.html.erb +11 -0
  188. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.jsx +23 -0
  189. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.html.erb +7 -1
  190. data/app/pb_kits/playbook/pb_progress_step/docs/example.yml +2 -1
  191. data/app/pb_kits/playbook/pb_progress_step/docs/index.js +1 -0
  192. data/app/pb_kits/playbook/pb_progress_step/progress_step.rb +9 -6
  193. data/app/pb_kits/playbook/pb_progress_step/progress_step_item.rb +2 -1
  194. data/app/pb_kits/playbook/pb_radio/_radio.html.erb +6 -5
  195. data/app/pb_kits/playbook/pb_radio/_radio.jsx +19 -14
  196. data/app/pb_kits/playbook/pb_radio/_radio.scss +1 -1
  197. data/app/pb_kits/playbook/pb_radio/docs/_radio_dark.jsx +5 -3
  198. data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx +3 -1
  199. data/app/pb_kits/playbook/pb_radio/radio.rb +2 -8
  200. data/app/pb_kits/playbook/pb_section_separator/_section_separator.jsx +4 -4
  201. data/app/pb_kits/playbook/pb_select/_select.html.erb +3 -3
  202. data/app/pb_kits/playbook/pb_select/_select.jsx +6 -8
  203. data/app/pb_kits/playbook/pb_select/_select.scss +1 -1
  204. data/app/pb_kits/playbook/pb_select/select.rb +1 -6
  205. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.jsx +13 -13
  206. data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.jsx +21 -17
  207. data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.jsx +19 -15
  208. data/app/pb_kits/playbook/pb_source/_source.jsx +4 -4
  209. data/app/pb_kits/playbook/pb_star_rating/_star_rating.jsx +6 -6
  210. data/app/pb_kits/playbook/pb_stat_change/_stat_change.jsx +3 -3
  211. data/app/pb_kits/playbook/pb_stat_value/_stat_value.jsx +4 -4
  212. data/app/pb_kits/playbook/pb_table/_table.html.erb +3 -2
  213. data/app/pb_kits/playbook/pb_table/_table.jsx +16 -3
  214. data/app/pb_kits/playbook/pb_table/_table_row.html.erb +3 -2
  215. data/app/pb_kits/playbook/pb_table/_table_row.jsx +25 -7
  216. data/app/pb_kits/playbook/pb_table/table.rb +3 -5
  217. data/app/pb_kits/playbook/pb_text_input/_text_input.html.erb +1 -0
  218. data/app/pb_kits/playbook/pb_text_input/_text_input.jsx +17 -14
  219. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +1 -1
  220. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled.html.erb +1 -0
  221. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled.jsx +18 -0
  222. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +2 -0
  223. data/app/pb_kits/playbook/pb_text_input/docs/index.js +1 -0
  224. data/app/pb_kits/playbook/pb_text_input/text_input.rb +1 -7
  225. data/app/pb_kits/playbook/pb_textarea/_textarea.jsx +22 -20
  226. data/app/pb_kits/playbook/pb_textarea/_textarea.scss +1 -3
  227. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_dark.jsx +0 -1
  228. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_dark_error.jsx +0 -1
  229. data/app/pb_kits/playbook/pb_textarea/textarea.rb +1 -7
  230. data/app/pb_kits/playbook/pb_time/_time.jsx +5 -5
  231. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.jsx +8 -8
  232. data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx +5 -5
  233. data/app/pb_kits/playbook/pb_timeline/_item.jsx +2 -2
  234. data/app/pb_kits/playbook/pb_timeline/_timeline.jsx +6 -6
  235. data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx +3 -3
  236. data/app/pb_kits/playbook/pb_title/_title.jsx +4 -4
  237. data/app/pb_kits/playbook/pb_title_count/_title_count.html.erb +5 -3
  238. data/app/pb_kits/playbook/pb_title_count/_title_count.jsx +10 -4
  239. data/app/pb_kits/playbook/pb_title_count/docs/_title_count_align_dark.html.erb +23 -0
  240. data/app/pb_kits/playbook/pb_title_count/docs/_title_count_align_dark.jsx +34 -0
  241. data/app/pb_kits/playbook/pb_title_count/docs/_title_count_dark.html.erb +23 -0
  242. data/app/pb_kits/playbook/pb_title_count/docs/_title_count_dark.jsx +34 -0
  243. data/app/pb_kits/playbook/pb_title_count/docs/example.yml +4 -0
  244. data/app/pb_kits/playbook/pb_title_count/docs/index.js +2 -0
  245. data/app/pb_kits/playbook/pb_title_detail/docs/_title_detail_dark.html.erb +19 -0
  246. data/app/pb_kits/playbook/pb_title_detail/docs/_title_detail_dark.jsx +29 -0
  247. data/app/pb_kits/playbook/pb_toggle/_toggle.jsx +5 -5
  248. data/app/pb_kits/playbook/pb_tooltip/index.js +1 -1
  249. data/app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb +2 -3
  250. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +1 -1
  251. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context_dark.html.erb +0 -1
  252. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +1 -9
  253. data/app/pb_kits/playbook/pb_user/_user.html.erb +3 -2
  254. data/app/pb_kits/playbook/pb_user/_user.jsx +49 -15
  255. data/app/pb_kits/playbook/pb_user/docs/_user_dark.jsx +55 -0
  256. data/app/pb_kits/playbook/pb_user/docs/_user_text_only_dark.jsx +26 -0
  257. data/app/pb_kits/playbook/pb_user/docs/example.yml +2 -0
  258. data/app/pb_kits/playbook/pb_user/docs/index.js +2 -0
  259. data/app/pb_kits/playbook/pb_user/user.rb +1 -7
  260. data/app/pb_kits/playbook/pb_user_badge/_user_badge.html.erb +3 -2
  261. data/app/pb_kits/playbook/pb_user_badge/_user_badge.jsx +24 -4
  262. data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_dark.html.erb +13 -0
  263. data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_dark.jsx +27 -0
  264. data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_size_dark.html.erb +21 -0
  265. data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_size_dark.jsx +36 -0
  266. data/app/pb_kits/playbook/pb_user_badge/docs/example.yml +4 -0
  267. data/app/pb_kits/playbook/pb_user_badge/docs/index.js +2 -0
  268. data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.html.erb +3 -2
  269. data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.jsx +25 -11
  270. data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.rb +0 -3
  271. data/app/pb_kits/playbook/vendor.js +0 -6
  272. data/app/views/playbook/pages/tokens/_pb_doc_spacing.html.slim +44 -0
  273. data/lib/generators/kit/templates/kit_jsx.erb.tt +2 -2
  274. data/lib/playbook/version.rb +1 -1
  275. metadata +81 -29
  276. data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb +0 -40
  277. data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +0 -105
  278. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +0 -846
  279. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +0 -43
  280. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js +0 -91
  281. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb +0 -1
  282. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx +0 -12
  283. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb +0 -24
  284. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +0 -30
  285. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb +0 -43
  286. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.jsx +0 -48
  287. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb +0 -4
  288. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +0 -13
  289. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb +0 -19
  290. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx +0 -25
  291. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.html.erb +0 -9
  292. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.jsx +0 -17
  293. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.html.erb +0 -14
  294. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.jsx +0 -22
  295. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb +0 -4
  296. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +0 -13
  297. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +0 -23
  298. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +0 -8
  299. data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb +0 -41
@@ -1,846 +0,0 @@
1
- // @import "~flatpickr/dist/flatpickr.css";
2
- @import "../pb_textarea/textarea_mixin";
3
- @import "../pb_title/title_mixin";
4
- @import "../tokens/colors";
5
- @import "../pb_caption/caption_mixin";
6
-
7
- [class^=pb_date_picker_kit] {
8
- // input styles
9
- [class^=pb_caption_kit] {
10
- margin-bottom: $space_xs;
11
- display: block;
12
- }
13
- .input_wrapper {
14
- margin-bottom: $space_sm;
15
-
16
- .flatpickr-wrapper {
17
- display: block;
18
- input::placeholder {
19
- @include pb_body_light;
20
- }
21
-
22
- > input:first-child {
23
- @include pb_textarea_light;
24
- @include pb_title_4;
25
- overflow: hidden;
26
- }
27
-
28
- input:focus, input:-webkit-autofill:focus {
29
- @include pb_textarea_focus;
30
- -webkit-box-shadow: 0 0 0px 1000px $focus_input_light inset;
31
- transition: background-color 5000s ease-in-out 0s;
32
- }
33
- }
34
- }
35
-
36
- &.error {
37
- [class^=pb_body_kit] {
38
- margin-top: $space_xs / 2;
39
- }
40
- .flatpickr-wrapper {
41
- > input:first-child {
42
- border-color: $error;
43
- }
44
- }
45
- }
46
- }
47
-
48
- // date-picker styles
49
-
50
- div.flatpickr-weekdays {
51
- margin-top: 5px;
52
- }
53
- span.flatpickr-weekday {
54
- @include caption;
55
- }
56
-
57
- .pb_popover_body {
58
- overflow: visible !important;
59
- }
60
-
61
- // manual import of flatpickr styles
62
-
63
- .flatpickr-calendar {
64
- background: transparent;
65
- opacity: 0;
66
- display: none;
67
- text-align: center;
68
- visibility: hidden;
69
- padding: 0;
70
- -webkit-animation: none;
71
- animation: none;
72
- direction: ltr;
73
- border: 0;
74
- font-size: 14px;
75
- line-height: 24px;
76
- border-radius: 5px;
77
- position: absolute;
78
- width: 307.875px;
79
- -webkit-box-sizing: border-box;
80
- box-sizing: border-box;
81
- -ms-touch-action: manipulation;
82
- touch-action: manipulation;
83
- background: #fff;
84
- -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);
85
- 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);
86
- }
87
- .flatpickr-calendar.open,
88
- .flatpickr-calendar.inline {
89
- opacity: 1;
90
- max-height: 640px;
91
- visibility: visible;
92
- }
93
- .flatpickr-calendar.open {
94
- display: inline-block;
95
- z-index: 99999;
96
- }
97
- .flatpickr-calendar.animate.open {
98
- -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
99
- animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
100
- }
101
- .flatpickr-calendar.inline {
102
- display: block;
103
- position: relative;
104
- top: 2px;
105
- }
106
- .flatpickr-calendar.static {
107
- position: absolute;
108
- top: calc(100% + 2px);
109
- }
110
- .flatpickr-calendar.static.open {
111
- z-index: 999;
112
- display: block;
113
- }
114
- .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
115
- -webkit-box-shadow: none !important;
116
- box-shadow: none !important;
117
- }
118
- .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
119
- -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
120
- box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
121
- }
122
- .flatpickr-calendar .hasWeeks .dayContainer,
123
- .flatpickr-calendar .hasTime .dayContainer {
124
- border-bottom: 0;
125
- border-bottom-right-radius: 0;
126
- border-bottom-left-radius: 0;
127
- }
128
- .flatpickr-calendar .hasWeeks .dayContainer {
129
- border-left: 0;
130
- }
131
- .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time {
132
- height: 40px;
133
- border-top: 1px solid #e6e6e6;
134
- }
135
- .flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
136
- height: auto;
137
- }
138
- .flatpickr-calendar:before,
139
- .flatpickr-calendar:after {
140
- position: absolute;
141
- display: block;
142
- pointer-events: none;
143
- border: solid transparent;
144
- content: '';
145
- height: 0;
146
- width: 0;
147
- left: 22px;
148
- }
149
- .flatpickr-calendar.rightMost:before,
150
- .flatpickr-calendar.rightMost:after {
151
- left: auto;
152
- right: 22px;
153
- }
154
- .flatpickr-calendar:before {
155
- border-width: 5px;
156
- margin: 0 -5px;
157
- }
158
- .flatpickr-calendar:after {
159
- border-width: 4px;
160
- margin: 0 -4px;
161
- }
162
- .flatpickr-calendar.arrowTop:before,
163
- .flatpickr-calendar.arrowTop:after {
164
- bottom: 100%;
165
- }
166
- .flatpickr-calendar.arrowTop:before {
167
- border-bottom-color: #e6e6e6;
168
- }
169
- .flatpickr-calendar.arrowTop:after {
170
- border-bottom-color: #fff;
171
- }
172
- .flatpickr-calendar.arrowBottom:before,
173
- .flatpickr-calendar.arrowBottom:after {
174
- top: 100%;
175
- }
176
- .flatpickr-calendar.arrowBottom:before {
177
- border-top-color: #e6e6e6;
178
- }
179
- .flatpickr-calendar.arrowBottom:after {
180
- border-top-color: #fff;
181
- }
182
- .flatpickr-calendar:focus {
183
- outline: 0;
184
- }
185
- .flatpickr-wrapper {
186
- position: relative;
187
- display: inline-block;
188
- }
189
- .flatpickr-months {
190
- display: -webkit-box;
191
- display: -webkit-flex;
192
- display: -ms-flexbox;
193
- display: flex;
194
- }
195
- .flatpickr-months .flatpickr-month {
196
- background: transparent;
197
- color: rgba(0,0,0,0.9);
198
- fill: rgba(0,0,0,0.9);
199
- height: 34px;
200
- line-height: 1;
201
- text-align: center;
202
- position: relative;
203
- -webkit-user-select: none;
204
- -moz-user-select: none;
205
- -ms-user-select: none;
206
- user-select: none;
207
- overflow: hidden;
208
- -webkit-box-flex: 1;
209
- -webkit-flex: 1;
210
- -ms-flex: 1;
211
- flex: 1;
212
- }
213
- .flatpickr-months .flatpickr-prev-month,
214
- .flatpickr-months .flatpickr-next-month {
215
- text-decoration: none;
216
- cursor: pointer;
217
- position: absolute;
218
- top: 0;
219
- height: 34px;
220
- padding: 10px;
221
- z-index: 3;
222
- color: rgba(0,0,0,0.9);
223
- fill: rgba(0,0,0,0.9);
224
- }
225
- .flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
226
- .flatpickr-months .flatpickr-next-month.flatpickr-disabled {
227
- display: none;
228
- }
229
- .flatpickr-months .flatpickr-prev-month i,
230
- .flatpickr-months .flatpickr-next-month i {
231
- position: relative;
232
- }
233
- .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
234
- .flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
235
- /*
236
- /*rtl:begin:ignore*/
237
- /*
238
- */
239
- left: 0;
240
- /*
241
- /*rtl:end:ignore*/
242
- /*
243
- */
244
- }
245
- /*
246
- /*rtl:begin:ignore*/
247
- /*
248
- /*rtl:end:ignore*/
249
- .flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
250
- .flatpickr-months .flatpickr-next-month.flatpickr-next-month {
251
- /*
252
- /*rtl:begin:ignore*/
253
- /*
254
- */
255
- right: 0;
256
- /*
257
- /*rtl:end:ignore*/
258
- /*
259
- */
260
- }
261
- /*
262
- /*rtl:begin:ignore*/
263
- /*
264
- /*rtl:end:ignore*/
265
- .flatpickr-months .flatpickr-prev-month:hover,
266
- .flatpickr-months .flatpickr-next-month:hover {
267
- color: #959ea9;
268
- }
269
- .flatpickr-months .flatpickr-prev-month:hover svg,
270
- .flatpickr-months .flatpickr-next-month:hover svg {
271
- fill: #f64747;
272
- }
273
- .flatpickr-months .flatpickr-prev-month svg,
274
- .flatpickr-months .flatpickr-next-month svg {
275
- width: 14px;
276
- height: 14px;
277
- }
278
- .flatpickr-months .flatpickr-prev-month svg path,
279
- .flatpickr-months .flatpickr-next-month svg path {
280
- -webkit-transition: fill 0.1s;
281
- transition: fill 0.1s;
282
- fill: inherit;
283
- }
284
- .numInputWrapper {
285
- position: relative;
286
- height: auto;
287
- }
288
- .numInputWrapper input,
289
- .numInputWrapper span {
290
- display: inline-block;
291
- }
292
- .numInputWrapper input {
293
- width: 100%;
294
- }
295
- .numInputWrapper input::-ms-clear {
296
- display: none;
297
- }
298
- .numInputWrapper input::-webkit-outer-spin-button,
299
- .numInputWrapper input::-webkit-inner-spin-button {
300
- margin: 0;
301
- -webkit-appearance: none;
302
- }
303
- .numInputWrapper span {
304
- position: absolute;
305
- right: 0;
306
- width: 14px;
307
- padding: 0 4px 0 2px;
308
- height: 50%;
309
- line-height: 50%;
310
- opacity: 0;
311
- cursor: pointer;
312
- border: 1px solid rgba(57,57,57,0.15);
313
- -webkit-box-sizing: border-box;
314
- box-sizing: border-box;
315
- }
316
- .numInputWrapper span:hover {
317
- background: rgba(0,0,0,0.1);
318
- }
319
- .numInputWrapper span:active {
320
- background: rgba(0,0,0,0.2);
321
- }
322
- .numInputWrapper span:after {
323
- display: block;
324
- content: "";
325
- position: absolute;
326
- }
327
- .numInputWrapper span.arrowUp {
328
- top: 0;
329
- border-bottom: 0;
330
- }
331
- .numInputWrapper span.arrowUp:after {
332
- border-left: 4px solid transparent;
333
- border-right: 4px solid transparent;
334
- border-bottom: 4px solid rgba(57,57,57,0.6);
335
- top: 26%;
336
- }
337
- .numInputWrapper span.arrowDown {
338
- top: 50%;
339
- }
340
- .numInputWrapper span.arrowDown:after {
341
- border-left: 4px solid transparent;
342
- border-right: 4px solid transparent;
343
- border-top: 4px solid rgba(57,57,57,0.6);
344
- top: 40%;
345
- }
346
- .numInputWrapper span svg {
347
- width: inherit;
348
- height: auto;
349
- }
350
- .numInputWrapper span svg path {
351
- fill: rgba(0,0,0,0.5);
352
- }
353
- .numInputWrapper:hover {
354
- background: rgba(0,0,0,0.05);
355
- }
356
- .numInputWrapper:hover span {
357
- opacity: 1;
358
- }
359
- .flatpickr-current-month {
360
- font-size: 135%;
361
- line-height: inherit;
362
- font-weight: 300;
363
- color: inherit;
364
- position: absolute;
365
- width: 75%;
366
- left: 12.5%;
367
- padding: 7.48px 0 0 0;
368
- line-height: 1;
369
- height: 34px;
370
- display: inline-block;
371
- text-align: center;
372
- -webkit-transform: translate3d(0px, 0px, 0px);
373
- transform: translate3d(0px, 0px, 0px);
374
- }
375
- .flatpickr-current-month span.cur-month {
376
- font-family: inherit;
377
- font-weight: 700;
378
- color: inherit;
379
- display: inline-block;
380
- margin-left: 0.5ch;
381
- padding: 0;
382
- }
383
- .flatpickr-current-month span.cur-month:hover {
384
- background: rgba(0,0,0,0.05);
385
- }
386
- .flatpickr-current-month .numInputWrapper {
387
- width: 6ch;
388
- width: 7ch\0;
389
- display: inline-block;
390
- }
391
- .flatpickr-current-month .numInputWrapper span.arrowUp:after {
392
- border-bottom-color: rgba(0,0,0,0.9);
393
- }
394
- .flatpickr-current-month .numInputWrapper span.arrowDown:after {
395
- border-top-color: rgba(0,0,0,0.9);
396
- }
397
- .flatpickr-current-month input.cur-year {
398
- background: transparent;
399
- -webkit-box-sizing: border-box;
400
- box-sizing: border-box;
401
- color: inherit;
402
- cursor: text;
403
- padding: 0 0 0 0.5ch;
404
- margin: 0;
405
- display: inline-block;
406
- font-size: inherit;
407
- font-family: inherit;
408
- font-weight: 300;
409
- line-height: inherit;
410
- height: auto;
411
- border: 0;
412
- border-radius: 0;
413
- vertical-align: initial;
414
- -webkit-appearance: textfield;
415
- -moz-appearance: textfield;
416
- appearance: textfield;
417
- }
418
- .flatpickr-current-month input.cur-year:focus {
419
- outline: 0;
420
- }
421
- .flatpickr-current-month input.cur-year[disabled],
422
- .flatpickr-current-month input.cur-year[disabled]:hover {
423
- font-size: 100%;
424
- color: rgba(0,0,0,0.5);
425
- background: transparent;
426
- pointer-events: none;
427
- }
428
- .flatpickr-current-month .flatpickr-monthDropdown-months {
429
- appearance: menulist;
430
- background: transparent;
431
- border: none;
432
- border-radius: 0;
433
- box-sizing: border-box;
434
- color: inherit;
435
- cursor: pointer;
436
- font-size: inherit;
437
- font-family: inherit;
438
- font-weight: 300;
439
- height: auto;
440
- line-height: inherit;
441
- margin: -1px 0 0 0;
442
- outline: none;
443
- padding: 0 0 0 0.5ch;
444
- position: relative;
445
- vertical-align: initial;
446
- -webkit-box-sizing: border-box;
447
- -webkit-appearance: menulist;
448
- -moz-appearance: menulist;
449
- width: auto;
450
- }
451
- .flatpickr-current-month .flatpickr-monthDropdown-months:focus,
452
- .flatpickr-current-month .flatpickr-monthDropdown-months:active {
453
- outline: none;
454
- }
455
- .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
456
- background: rgba(0,0,0,0.05);
457
- }
458
- .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
459
- background-color: transparent;
460
- outline: none;
461
- padding: 0;
462
- }
463
- .flatpickr-weekdays {
464
- background: transparent;
465
- text-align: center;
466
- overflow: hidden;
467
- width: 100%;
468
- display: -webkit-box;
469
- display: -webkit-flex;
470
- display: -ms-flexbox;
471
- display: flex;
472
- -webkit-box-align: center;
473
- -webkit-align-items: center;
474
- -ms-flex-align: center;
475
- align-items: center;
476
- height: 28px;
477
- }
478
- .flatpickr-weekdays .flatpickr-weekdaycontainer {
479
- display: -webkit-box;
480
- display: -webkit-flex;
481
- display: -ms-flexbox;
482
- display: flex;
483
- -webkit-box-flex: 1;
484
- -webkit-flex: 1;
485
- -ms-flex: 1;
486
- flex: 1;
487
- }
488
- span.flatpickr-weekday {
489
- cursor: default;
490
- font-size: 90%;
491
- background: transparent;
492
- color: rgba(0,0,0,0.54);
493
- line-height: 1;
494
- margin: 0;
495
- text-align: center;
496
- display: block;
497
- -webkit-box-flex: 1;
498
- -webkit-flex: 1;
499
- -ms-flex: 1;
500
- flex: 1;
501
- font-weight: bolder;
502
- }
503
- .dayContainer,
504
- .flatpickr-weeks {
505
- padding: 1px 0 0 0;
506
- }
507
- .flatpickr-days {
508
- position: relative;
509
- overflow: hidden;
510
- display: -webkit-box;
511
- display: -webkit-flex;
512
- display: -ms-flexbox;
513
- display: flex;
514
- -webkit-box-align: start;
515
- -webkit-align-items: flex-start;
516
- -ms-flex-align: start;
517
- align-items: flex-start;
518
- width: 307.875px;
519
- }
520
- .flatpickr-days:focus {
521
- outline: 0;
522
- }
523
- .dayContainer {
524
- padding: 0;
525
- outline: 0;
526
- text-align: left;
527
- width: 307.875px;
528
- min-width: 307.875px;
529
- max-width: 307.875px;
530
- -webkit-box-sizing: border-box;
531
- box-sizing: border-box;
532
- display: inline-block;
533
- display: -ms-flexbox;
534
- display: -webkit-box;
535
- display: -webkit-flex;
536
- display: flex;
537
- -webkit-flex-wrap: wrap;
538
- flex-wrap: wrap;
539
- -ms-flex-wrap: wrap;
540
- -ms-flex-pack: justify;
541
- -webkit-justify-content: space-around;
542
- justify-content: space-around;
543
- -webkit-transform: translate3d(0px, 0px, 0px);
544
- transform: translate3d(0px, 0px, 0px);
545
- opacity: 1;
546
- }
547
- .dayContainer + .dayContainer {
548
- -webkit-box-shadow: -1px 0 0 #e6e6e6;
549
- box-shadow: -1px 0 0 #e6e6e6;
550
- }
551
- .flatpickr-day {
552
- background: none;
553
- border: 1px solid transparent;
554
- border-radius: 150px;
555
- -webkit-box-sizing: border-box;
556
- box-sizing: border-box;
557
- color: #393939;
558
- cursor: pointer;
559
- font-weight: 400;
560
- width: 14.2857143%;
561
- -webkit-flex-basis: 14.2857143%;
562
- -ms-flex-preferred-size: 14.2857143%;
563
- flex-basis: 14.2857143%;
564
- max-width: 39px;
565
- height: 39px;
566
- line-height: 39px;
567
- margin: 0;
568
- display: inline-block;
569
- position: relative;
570
- -webkit-box-pack: center;
571
- -webkit-justify-content: center;
572
- -ms-flex-pack: center;
573
- justify-content: center;
574
- text-align: center;
575
- }
576
- .flatpickr-day.inRange,
577
- .flatpickr-day.prevMonthDay.inRange,
578
- .flatpickr-day.nextMonthDay.inRange,
579
- .flatpickr-day.today.inRange,
580
- .flatpickr-day.prevMonthDay.today.inRange,
581
- .flatpickr-day.nextMonthDay.today.inRange,
582
- .flatpickr-day:hover,
583
- .flatpickr-day.prevMonthDay:hover,
584
- .flatpickr-day.nextMonthDay:hover,
585
- .flatpickr-day:focus,
586
- .flatpickr-day.prevMonthDay:focus,
587
- .flatpickr-day.nextMonthDay:focus {
588
- cursor: pointer;
589
- outline: 0;
590
- background: #e6e6e6;
591
- border-color: #e6e6e6;
592
- }
593
- .flatpickr-day.today {
594
- border-color: #959ea9;
595
- }
596
- .flatpickr-day.today:hover,
597
- .flatpickr-day.today:focus {
598
- border-color: #959ea9;
599
- background: #959ea9;
600
- color: #fff;
601
- }
602
- .flatpickr-day.selected,
603
- .flatpickr-day.startRange,
604
- .flatpickr-day.endRange,
605
- .flatpickr-day.selected.inRange,
606
- .flatpickr-day.startRange.inRange,
607
- .flatpickr-day.endRange.inRange,
608
- .flatpickr-day.selected:focus,
609
- .flatpickr-day.startRange:focus,
610
- .flatpickr-day.endRange:focus,
611
- .flatpickr-day.selected:hover,
612
- .flatpickr-day.startRange:hover,
613
- .flatpickr-day.endRange:hover,
614
- .flatpickr-day.selected.prevMonthDay,
615
- .flatpickr-day.startRange.prevMonthDay,
616
- .flatpickr-day.endRange.prevMonthDay,
617
- .flatpickr-day.selected.nextMonthDay,
618
- .flatpickr-day.startRange.nextMonthDay,
619
- .flatpickr-day.endRange.nextMonthDay {
620
- background: #569ff7;
621
- -webkit-box-shadow: none;
622
- box-shadow: none;
623
- color: #fff;
624
- border-color: #569ff7;
625
- }
626
- .flatpickr-day.selected.startRange,
627
- .flatpickr-day.startRange.startRange,
628
- .flatpickr-day.endRange.startRange {
629
- border-radius: 50px 0 0 50px;
630
- }
631
- .flatpickr-day.selected.endRange,
632
- .flatpickr-day.startRange.endRange,
633
- .flatpickr-day.endRange.endRange {
634
- border-radius: 0 50px 50px 0;
635
- }
636
- .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
637
- .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
638
- .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
639
- -webkit-box-shadow: -10px 0 0 #569ff7;
640
- box-shadow: -10px 0 0 #569ff7;
641
- }
642
- .flatpickr-day.selected.startRange.endRange,
643
- .flatpickr-day.startRange.startRange.endRange,
644
- .flatpickr-day.endRange.startRange.endRange {
645
- border-radius: 50px;
646
- }
647
- .flatpickr-day.inRange {
648
- border-radius: 0;
649
- -webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
650
- box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
651
- }
652
- .flatpickr-day.flatpickr-disabled,
653
- .flatpickr-day.flatpickr-disabled:hover,
654
- .flatpickr-day.prevMonthDay,
655
- .flatpickr-day.nextMonthDay,
656
- .flatpickr-day.notAllowed,
657
- .flatpickr-day.notAllowed.prevMonthDay,
658
- .flatpickr-day.notAllowed.nextMonthDay {
659
- color: rgba(57,57,57,0.3);
660
- background: transparent;
661
- border-color: transparent;
662
- cursor: default;
663
- }
664
- .flatpickr-day.flatpickr-disabled,
665
- .flatpickr-day.flatpickr-disabled:hover {
666
- cursor: not-allowed;
667
- color: rgba(57,57,57,0.1);
668
- }
669
- .flatpickr-day.week.selected {
670
- border-radius: 0;
671
- -webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
672
- box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
673
- }
674
- .flatpickr-day.hidden {
675
- visibility: hidden;
676
- }
677
- .rangeMode .flatpickr-day {
678
- margin-top: 1px;
679
- }
680
- .flatpickr-weekwrapper {
681
- float: left;
682
- }
683
- .flatpickr-weekwrapper .flatpickr-weeks {
684
- padding: 0 12px;
685
- -webkit-box-shadow: 1px 0 0 #e6e6e6;
686
- box-shadow: 1px 0 0 #e6e6e6;
687
- }
688
- .flatpickr-weekwrapper .flatpickr-weekday {
689
- float: none;
690
- width: 100%;
691
- line-height: 28px;
692
- }
693
- .flatpickr-weekwrapper span.flatpickr-day,
694
- .flatpickr-weekwrapper span.flatpickr-day:hover {
695
- display: block;
696
- width: 100%;
697
- max-width: none;
698
- color: rgba(57,57,57,0.3);
699
- background: transparent;
700
- cursor: default;
701
- border: none;
702
- }
703
- .flatpickr-innerContainer {
704
- display: block;
705
- display: -webkit-box;
706
- display: -webkit-flex;
707
- display: -ms-flexbox;
708
- display: flex;
709
- -webkit-box-sizing: border-box;
710
- box-sizing: border-box;
711
- overflow: hidden;
712
- }
713
- .flatpickr-rContainer {
714
- display: inline-block;
715
- padding: 0;
716
- -webkit-box-sizing: border-box;
717
- box-sizing: border-box;
718
- }
719
- .flatpickr-time {
720
- text-align: center;
721
- outline: 0;
722
- display: block;
723
- height: 0;
724
- line-height: 40px;
725
- max-height: 40px;
726
- -webkit-box-sizing: border-box;
727
- box-sizing: border-box;
728
- overflow: hidden;
729
- display: -webkit-box;
730
- display: -webkit-flex;
731
- display: -ms-flexbox;
732
- display: flex;
733
- }
734
- .flatpickr-time:after {
735
- content: "";
736
- display: table;
737
- clear: both;
738
- }
739
- .flatpickr-time .numInputWrapper {
740
- -webkit-box-flex: 1;
741
- -webkit-flex: 1;
742
- -ms-flex: 1;
743
- flex: 1;
744
- width: 40%;
745
- height: 40px;
746
- float: left;
747
- }
748
- .flatpickr-time .numInputWrapper span.arrowUp:after {
749
- border-bottom-color: #393939;
750
- }
751
- .flatpickr-time .numInputWrapper span.arrowDown:after {
752
- border-top-color: #393939;
753
- }
754
- .flatpickr-time.hasSeconds .numInputWrapper {
755
- width: 26%;
756
- }
757
- .flatpickr-time.time24hr .numInputWrapper {
758
- width: 49%;
759
- }
760
- .flatpickr-time input {
761
- background: transparent;
762
- -webkit-box-shadow: none;
763
- box-shadow: none;
764
- border: 0;
765
- border-radius: 0;
766
- text-align: center;
767
- margin: 0;
768
- padding: 0;
769
- height: inherit;
770
- line-height: inherit;
771
- color: #393939;
772
- font-size: 14px;
773
- position: relative;
774
- -webkit-box-sizing: border-box;
775
- box-sizing: border-box;
776
- -webkit-appearance: textfield;
777
- -moz-appearance: textfield;
778
- appearance: textfield;
779
- }
780
- .flatpickr-time input.flatpickr-hour {
781
- font-weight: bold;
782
- }
783
- .flatpickr-time input.flatpickr-minute,
784
- .flatpickr-time input.flatpickr-second {
785
- font-weight: 400;
786
- }
787
- .flatpickr-time input:focus {
788
- outline: 0;
789
- border: 0;
790
- }
791
- .flatpickr-time .flatpickr-time-separator,
792
- .flatpickr-time .flatpickr-am-pm {
793
- height: inherit;
794
- float: left;
795
- line-height: inherit;
796
- color: #393939;
797
- font-weight: bold;
798
- width: 2%;
799
- -webkit-user-select: none;
800
- -moz-user-select: none;
801
- -ms-user-select: none;
802
- user-select: none;
803
- -webkit-align-self: center;
804
- -ms-flex-item-align: center;
805
- align-self: center;
806
- }
807
- .flatpickr-time .flatpickr-am-pm {
808
- outline: 0;
809
- width: 18%;
810
- cursor: pointer;
811
- text-align: center;
812
- font-weight: 400;
813
- }
814
- .flatpickr-time input:hover,
815
- .flatpickr-time .flatpickr-am-pm:hover,
816
- .flatpickr-time input:focus,
817
- .flatpickr-time .flatpickr-am-pm:focus {
818
- background: #eee;
819
- }
820
- .flatpickr-input[readonly] {
821
- cursor: pointer;
822
- }
823
- @-webkit-keyframes fpFadeInDown {
824
- from {
825
- opacity: 0;
826
- -webkit-transform: translate3d(0, -20px, 0);
827
- transform: translate3d(0, -20px, 0);
828
- }
829
- to {
830
- opacity: 1;
831
- -webkit-transform: translate3d(0, 0, 0);
832
- transform: translate3d(0, 0, 0);
833
- }
834
- }
835
- @keyframes fpFadeInDown {
836
- from {
837
- opacity: 0;
838
- -webkit-transform: translate3d(0, -20px, 0);
839
- transform: translate3d(0, -20px, 0);
840
- }
841
- to {
842
- opacity: 1;
843
- -webkit-transform: translate3d(0, 0, 0);
844
- transform: translate3d(0, 0, 0);
845
- }
846
- }