pageflow 15.6.1 → 15.7.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (274) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +253 -11
  3. data/README.md +1 -2
  4. data/admins/pageflow/entry.rb +28 -57
  5. data/admins/pageflow/membership.rb +5 -1
  6. data/admins/pageflow/user.rb +1 -3
  7. data/app/assets/images/pageflow/admin/icons/buttons/editor.svg +2 -0
  8. data/app/assets/images/pageflow/admin/icons/buttons/preview.svg +2 -0
  9. data/app/assets/images/pageflow/admin/icons/buttons/show_public.svg +2 -0
  10. data/app/assets/images/pageflow/admin/icons/delete.svg +9 -0
  11. data/app/assets/images/pageflow/admin/icons/done.svg +6 -0
  12. data/app/assets/images/pageflow/admin/icons/edit.svg +7 -0
  13. data/app/assets/images/pageflow/admin/icons/editor.svg +2 -0
  14. data/app/assets/images/pageflow/admin/icons/folder.svg +8 -0
  15. data/app/assets/images/pageflow/admin/icons/folder_active.svg +8 -0
  16. data/app/assets/images/pageflow/admin/icons/info.svg +3 -0
  17. data/app/assets/images/pageflow/admin/icons/new.svg +5 -0
  18. data/app/assets/images/pageflow/admin/icons/preview.svg +2 -0
  19. data/app/assets/images/pageflow/admin/icons/published.svg +2 -0
  20. data/app/assets/images/pageflow/admin/icons/published_with_password.svg +2 -0
  21. data/app/assets/images/pageflow/admin/icons/show_public.svg +2 -0
  22. data/app/assets/images/pageflow/editor/blank_entry/logo.png +0 -0
  23. data/app/assets/images/pageflow/themes/default/embed_opt_in.svg +3 -0
  24. data/app/assets/images/pageflow/themes/default/embed_opt_out_info.svg +16 -0
  25. data/app/assets/javascripts/pageflow/admin/entries.js +9 -57
  26. data/app/assets/javascripts/pageflow/dist/editor.js +11890 -0
  27. data/app/assets/javascripts/pageflow/dist/frontend.js +5800 -0
  28. data/app/assets/javascripts/pageflow/dist/react-client.js +22 -0
  29. data/app/assets/javascripts/pageflow/dist/react-server.js +19 -0
  30. data/app/assets/javascripts/pageflow/dist/ui.js +127 -10
  31. data/app/assets/stylesheets/pageflow/admin/active_admin_patches.scss +18 -16
  32. data/app/assets/stylesheets/pageflow/admin/badge_list.scss +25 -35
  33. data/app/assets/stylesheets/pageflow/admin/columns.scss +13 -11
  34. data/app/assets/stylesheets/pageflow/admin/embed_code.scss +1 -4
  35. data/app/assets/stylesheets/pageflow/admin/entries/folders.scss +44 -19
  36. data/app/assets/stylesheets/pageflow/admin/entries.scss +15 -31
  37. data/app/assets/stylesheets/pageflow/admin/features.scss +3 -1
  38. data/app/assets/stylesheets/pageflow/admin/forms.scss +14 -12
  39. data/app/assets/stylesheets/pageflow/admin/hint.scss +8 -14
  40. data/app/assets/stylesheets/pageflow/admin/icon_button.scss +25 -14
  41. data/app/assets/stylesheets/pageflow/admin/icon_link.scss +31 -15
  42. data/app/assets/stylesheets/pageflow/admin/publication_state_indicator.scss +14 -7
  43. data/app/assets/stylesheets/pageflow/admin/status_tags.scss +5 -4
  44. data/app/assets/stylesheets/pageflow/admin/tabs_view.scss +36 -34
  45. data/app/assets/stylesheets/pageflow/admin/tooltip_bubble.scss +15 -11
  46. data/app/assets/stylesheets/pageflow/admin.scss +12 -0
  47. data/app/assets/stylesheets/pageflow/editor/background_positioning.scss +15 -61
  48. data/app/assets/stylesheets/pageflow/editor/base.scss +28 -13
  49. data/app/assets/stylesheets/pageflow/editor/blank_entry.scss +6 -6
  50. data/app/assets/stylesheets/pageflow/editor/change_theme.scss +28 -71
  51. data/app/assets/stylesheets/pageflow/editor/composables.scss +2 -2
  52. data/app/assets/stylesheets/pageflow/editor/confirm_encoding.scss +18 -36
  53. data/app/assets/stylesheets/pageflow/editor/confirm_upload.scss +12 -39
  54. data/app/assets/stylesheets/pageflow/editor/dialogs.scss +39 -12
  55. data/app/assets/stylesheets/pageflow/editor/disabled_atmo_indicator.scss +3 -3
  56. data/app/assets/stylesheets/pageflow/editor/drop_down_button.scss +7 -10
  57. data/app/assets/stylesheets/pageflow/editor/emulation_mode_button.scss +3 -8
  58. data/app/assets/stylesheets/pageflow/editor/failures.scss +3 -3
  59. data/app/assets/stylesheets/pageflow/editor/file_import.scss +22 -38
  60. data/app/assets/stylesheets/pageflow/editor/file_meta_data.scss +3 -7
  61. data/app/assets/stylesheets/pageflow/editor/file_settings_dialog.scss +4 -24
  62. data/app/assets/stylesheets/pageflow/editor/file_stages.scss +10 -11
  63. data/app/assets/stylesheets/pageflow/editor/file_thumbnails.scss +4 -8
  64. data/app/assets/stylesheets/pageflow/editor/files.scss +7 -6
  65. data/app/assets/stylesheets/pageflow/editor/files_explorer.scss +13 -30
  66. data/app/assets/stylesheets/pageflow/editor/files_gallery.scss +15 -11
  67. data/app/assets/stylesheets/pageflow/editor/filtered_files.scss +6 -7
  68. data/app/assets/stylesheets/pageflow/editor/help.scss +19 -14
  69. data/app/assets/stylesheets/pageflow/editor/help_image.scss +1 -1
  70. data/app/assets/stylesheets/pageflow/editor/info_box.scss +19 -0
  71. data/app/assets/stylesheets/pageflow/editor/inputs/file_input.scss +7 -11
  72. data/app/assets/stylesheets/pageflow/editor/inputs/file_processing_state_display.scss +0 -2
  73. data/app/assets/stylesheets/pageflow/editor/inputs/reference.scss +7 -11
  74. data/app/assets/stylesheets/pageflow/editor/list.scss +13 -10
  75. data/app/assets/stylesheets/pageflow/editor/loading.scss +1 -1
  76. data/app/assets/stylesheets/pageflow/editor/locked.scss +9 -5
  77. data/app/assets/stylesheets/pageflow/editor/menu.scss +5 -5
  78. data/app/assets/stylesheets/pageflow/editor/notifications.scss +15 -14
  79. data/app/assets/stylesheets/pageflow/editor/other_entry_item.scss +7 -3
  80. data/app/assets/stylesheets/pageflow/editor/outline.scss +57 -19
  81. data/app/assets/stylesheets/pageflow/editor/page_links.scss +10 -8
  82. data/app/assets/stylesheets/pageflow/editor/page_selection.scss +2 -29
  83. data/app/assets/stylesheets/pageflow/editor/publish_entry.scss +5 -6
  84. data/app/assets/stylesheets/pageflow/editor/quotas.scss +2 -3
  85. data/app/assets/stylesheets/pageflow/editor/select_button.scss +12 -6
  86. data/app/assets/stylesheets/pageflow/editor/sidebar_footer.scss +1 -5
  87. data/app/assets/stylesheets/pageflow/editor/storyline_picker.scss +6 -2
  88. data/app/assets/stylesheets/pageflow/editor/text_tracks.scss +6 -22
  89. data/app/assets/stylesheets/pageflow/editor/widgets.scss +2 -2
  90. data/app/assets/stylesheets/pageflow/editor/wysihtml5.scss +35 -29
  91. data/app/assets/stylesheets/pageflow/mixins/background_icons.scss +3 -3
  92. data/app/assets/stylesheets/pageflow/mixins/buttons.scss +50 -68
  93. data/app/assets/stylesheets/pageflow/themes/default/base.scss +2 -0
  94. data/app/assets/stylesheets/pageflow/themes/default/consent/bar.scss +156 -0
  95. data/app/assets/stylesheets/pageflow/themes/default/consent/vendor_list.scss +62 -0
  96. data/app/assets/stylesheets/pageflow/themes/default/consent.scss +2 -0
  97. data/app/assets/stylesheets/pageflow/themes/default/logo/alignment.scss +7 -0
  98. data/app/assets/stylesheets/pageflow/themes/default/page/shadow.scss +44 -0
  99. data/app/assets/stylesheets/pageflow/themes/default/third_party_embed_consent.scss +103 -0
  100. data/app/assets/stylesheets/pageflow/ui/forms.scss +79 -84
  101. data/app/assets/stylesheets/pageflow/ui/functions.scss +56 -0
  102. data/app/assets/stylesheets/pageflow/ui/input/check_box_group_input.scss +2 -3
  103. data/app/assets/stylesheets/pageflow/ui/input/color_input.scss +6 -6
  104. data/app/assets/stylesheets/pageflow/ui/input/extended_select_input.scss +63 -50
  105. data/app/assets/stylesheets/pageflow/ui/normalize/forms.scss +153 -0
  106. data/app/assets/stylesheets/pageflow/ui/normalize.scss +278 -0
  107. data/app/assets/stylesheets/pageflow/ui/properties.scss +44 -0
  108. data/app/assets/stylesheets/pageflow/ui/table_cells/delete_row_table_cell.scss +1 -1
  109. data/app/assets/stylesheets/pageflow/ui/table_view.scss +14 -18
  110. data/app/assets/stylesheets/pageflow/ui/tabs_view.scss +8 -11
  111. data/app/assets/stylesheets/pageflow/ui/tooltip.scss +6 -8
  112. data/app/assets/stylesheets/pageflow/ui/validation_error_messages.scss +6 -0
  113. data/app/assets/stylesheets/pageflow/ui.scss +4 -0
  114. data/app/controllers/pageflow/edit_locks_controller.rb +3 -1
  115. data/app/helpers/pageflow/admin/entries_helper.rb +2 -12
  116. data/app/helpers/pageflow/embed_code_helper.rb +1 -1
  117. data/app/helpers/pageflow/entries_helper.rb +41 -2
  118. data/app/helpers/pageflow/file_background_images_helper.rb +1 -1
  119. data/app/helpers/pageflow/page_types_helper.rb +1 -1
  120. data/app/helpers/pageflow/themes_helper.rb +1 -1
  121. data/app/jobs/pageflow/poll_meta_data_from_zencoder_job.rb +1 -1
  122. data/app/jobs/pageflow/poll_zencoder_job.rb +1 -9
  123. data/app/models/pageflow/audio_file.rb +17 -0
  124. data/app/models/pageflow/audio_file_url_templates.rb +4 -1
  125. data/app/models/pageflow/customized_theme.rb +37 -0
  126. data/app/models/pageflow/draft_entry.rb +6 -59
  127. data/app/models/pageflow/entry.rb +8 -0
  128. data/app/models/pageflow/entry_at_revision.rb +68 -0
  129. data/app/models/pageflow/entry_role_query.rb +44 -24
  130. data/app/models/pageflow/image_file_css_background_image_urls.rb +8 -2
  131. data/app/models/pageflow/published_entry.rb +9 -56
  132. data/app/models/pageflow/theme_customization.rb +46 -0
  133. data/app/models/pageflow/theme_customization_file.rb +58 -0
  134. data/app/models/pageflow/video_file.rb +11 -1
  135. data/app/models/pageflow/video_file_url_templates.rb +1 -0
  136. data/app/policies/pageflow/entry_policy.rb +4 -0
  137. data/app/state_machines/pageflow/media_encoding_state_machine.rb +23 -4
  138. data/app/views/admin/entries/_form.html.erb +50 -0
  139. data/app/views/admin/entries/entry_type_name_input.html.erb +5 -0
  140. data/app/views/admin/features/_form.html.erb +1 -1
  141. data/app/views/admin/memberships/_form.html.erb +2 -3
  142. data/app/views/admin/users/_form.html.erb +1 -1
  143. data/app/views/admin/users/invitation.html.erb +2 -2
  144. data/app/views/components/pageflow/admin/entry_user_badge_list.rb +10 -9
  145. data/app/views/components/pageflow/admin/members_tab.rb +5 -1
  146. data/app/views/components/pageflow/admin/revisions_tab.rb +13 -3
  147. data/app/views/components/pageflow/admin/timestamp.rb +20 -0
  148. data/app/views/components/pageflow/admin/user_account_badge_list.rb +5 -6
  149. data/app/views/pageflow/admin/entries/_cannot_add_user.html.erb +9 -5
  150. data/app/views/pageflow/admin/entries/_entry_type_name_input.html.erb +7 -0
  151. data/app/views/pageflow/audio_files/_audio_file.json.jbuilder +13 -0
  152. data/app/views/pageflow/editor/encoding_confirmations/_intro.html.erb +0 -0
  153. data/app/views/pageflow/editor/encoding_confirmations/check.json.jbuilder +14 -2
  154. data/config/initializers/paperclip.rb +16 -1
  155. data/config/locales/de.yml +24 -28
  156. data/config/locales/en.yml +19 -10
  157. data/db/migrate/20210528073122_create_pageflow_theme_customizations.rb +11 -0
  158. data/db/migrate/20210531090654_create_pageflow_theme_customization_files.rb +15 -0
  159. data/db/migrate/20210531102228_add_selected_file_ids_to_theme_customizations.rb +5 -0
  160. data/db/migrate/20211020085902_add_canonical_entry_url_prefix_to_themings.rb +5 -0
  161. data/db/migrate/20220503150010_add_peak_data_to_audio_files.rb +5 -0
  162. data/db/migrate/20220705084830_add_trailing_slash_in_canonical_urls_to_themings.rb +5 -0
  163. data/entry_types/paged/app/assets/javascripts/pageflow_paged/dist/editor.js +256 -124
  164. data/entry_types/paged/app/assets/javascripts/pageflow_paged/dist/frontend.js +566 -167
  165. data/entry_types/paged/app/assets/javascripts/pageflow_paged/dist/react-client.js +5 -5
  166. data/entry_types/paged/app/assets/javascripts/pageflow_paged/dist/react-server.js +4 -4
  167. data/entry_types/paged/app/helpers/pageflow_paged/third_party_embed_consent_helper.rb +38 -0
  168. data/entry_types/paged/app/views/pageflow_paged/third_party_embed_consent/_opt_in.html.erb +12 -0
  169. data/entry_types/paged/app/views/pageflow_paged/third_party_embed_consent/_opt_out_info.html.erb +10 -0
  170. data/entry_types/paged/config/initializers/features.rb +2 -0
  171. data/entry_types/paged/config/locales/new/video_contain.de.yml +7 -0
  172. data/entry_types/paged/config/locales/new/video_contain.en.yml +7 -0
  173. data/entry_types/scrolled/app/helpers/pageflow_scrolled/editor/seed_html_helper.rb +3 -0
  174. data/entry_types/scrolled/app/helpers/pageflow_scrolled/entry_json_seed_helper.rb +1 -0
  175. data/entry_types/scrolled/app/helpers/pageflow_scrolled/packs_helper.rb +58 -0
  176. data/entry_types/scrolled/app/helpers/pageflow_scrolled/react_server_side_rendering_helper.rb +37 -3
  177. data/entry_types/scrolled/app/helpers/pageflow_scrolled/themes_helper.rb +92 -6
  178. data/entry_types/scrolled/app/helpers/pageflow_scrolled/webpack_public_path_helper.rb +20 -0
  179. data/entry_types/scrolled/app/models/pageflow_scrolled/content_element.rb +7 -0
  180. data/entry_types/scrolled/app/views/pageflow_scrolled/editor/entries/_head.html.erb +5 -2
  181. data/entry_types/scrolled/app/views/pageflow_scrolled/editor/entries/_seed.json.jbuilder +5 -1
  182. data/entry_types/scrolled/app/views/pageflow_scrolled/entries/show.html.erb +5 -4
  183. data/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_entry.json.jbuilder +16 -0
  184. data/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_theme.json.jbuilder +13 -2
  185. data/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_widget.json.jbuilder +2 -0
  186. data/entry_types/scrolled/config/locales/de.yml +1 -8
  187. data/entry_types/scrolled/config/locales/en.yml +1 -9
  188. data/entry_types/scrolled/config/locales/new/before_after_slider.de.yml +8 -0
  189. data/entry_types/scrolled/config/locales/new/before_after_slider.en.yml +8 -0
  190. data/entry_types/scrolled/config/locales/new/center_ragged.de.yml +8 -0
  191. data/entry_types/scrolled/config/locales/new/center_ragged.en.yml +9 -0
  192. data/entry_types/scrolled/config/locales/new/consent.de.yml +25 -0
  193. data/entry_types/scrolled/config/locales/new/consent.en.yml +24 -0
  194. data/entry_types/scrolled/config/locales/new/content_element_categories.de.yml +39 -0
  195. data/entry_types/scrolled/config/locales/new/content_element_categories.en.yml +39 -0
  196. data/entry_types/scrolled/config/locales/new/default_transition.de.yml +14 -0
  197. data/entry_types/scrolled/config/locales/new/default_transition.en.yml +14 -0
  198. data/entry_types/scrolled/config/locales/new/header_line_breaks.de.yml +28 -0
  199. data/entry_types/scrolled/config/locales/new/header_line_breaks.en.yml +27 -0
  200. data/entry_types/scrolled/config/locales/new/header_size.de.yml +17 -0
  201. data/entry_types/scrolled/config/locales/new/header_size.en.yml +17 -0
  202. data/entry_types/scrolled/config/locales/new/iframe_embed.de.yml +39 -0
  203. data/entry_types/scrolled/config/locales/new/iframe_embed.en.yml +39 -0
  204. data/entry_types/scrolled/config/locales/new/inline_loops.de.yml +26 -0
  205. data/entry_types/scrolled/config/locales/new/inline_loops.en.yml +26 -0
  206. data/entry_types/scrolled/config/locales/new/portrait_inline_image.de.yml +9 -0
  207. data/entry_types/scrolled/config/locales/new/portrait_inline_image.en.yml +9 -0
  208. data/entry_types/scrolled/config/locales/new/section_width.de.yml +10 -0
  209. data/entry_types/scrolled/config/locales/new/section_width.en.yml +10 -0
  210. data/entry_types/scrolled/config/locales/new/typography_variants.de.yml +7 -0
  211. data/entry_types/scrolled/config/locales/new/typography_variants.en.yml +7 -0
  212. data/entry_types/scrolled/config/locales/new/video_embed_poster.de.yml +8 -0
  213. data/entry_types/scrolled/config/locales/new/video_embed_poster.en.yml +8 -0
  214. data/entry_types/scrolled/config/locales/new/waveform_styles.de.yml +11 -0
  215. data/entry_types/scrolled/config/locales/new/waveform_styles.en.yml +12 -0
  216. data/entry_types/scrolled/config/locales/new/widgets.de.yml +6 -0
  217. data/entry_types/scrolled/config/locales/new/widgets.en.yml +6 -0
  218. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/install_generator.rb +29 -5
  219. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/themes_plugin.rb.tt +8 -6
  220. data/entry_types/scrolled/lib/pageflow_scrolled/additional_packs.rb +37 -0
  221. data/entry_types/scrolled/lib/pageflow_scrolled/additional_seed_data.rb +57 -0
  222. data/entry_types/scrolled/lib/pageflow_scrolled/configuration.rb +49 -0
  223. data/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb +8 -0
  224. data/entry_types/scrolled/lib/pageflow_scrolled/react_widget_type.rb +42 -0
  225. data/entry_types/scrolled/lib/pageflow_scrolled.rb +17 -1
  226. data/entry_types/scrolled/package/contentElements-editor.js +323 -89
  227. data/entry_types/scrolled/package/contentElements-frontend.css +1 -1
  228. data/entry_types/scrolled/package/contentElements-frontend.js +719 -529
  229. data/entry_types/scrolled/package/editor.js +459 -261
  230. data/entry_types/scrolled/package/frontend/{EditableText-7093fd0e.js → EditableInlineText.module-b9923660.js} +284 -362
  231. data/entry_types/scrolled/package/frontend/{i18n-4dc6c377.js → PhonePlatformContext-9fb97827.js} +199 -106
  232. data/entry_types/scrolled/package/frontend/{Viewer-e49e7807.js → Viewer-e2290ea0.js} +196 -79
  233. data/entry_types/scrolled/package/frontend/{Wavesurfer-0adf5667.js → Wavesurfer-7d9cf1b7.js} +16 -58
  234. data/entry_types/scrolled/package/frontend/{components-6a6793ca.js → components-6ab26015.js} +664 -671
  235. data/entry_types/scrolled/package/frontend/{getPrototypeOf-63c7c8e8.js → createSuper-d0f30da3.js} +34 -5
  236. data/entry_types/scrolled/package/frontend/index.css +1 -9
  237. data/entry_types/scrolled/package/frontend/index.js +1919 -2386
  238. data/entry_types/scrolled/package/frontend/{useBrowserFeature-91a4c29d.js → usePhonePlatform-2857c22b.js} +9 -8
  239. data/entry_types/scrolled/package/frontend-server.js +3 -6
  240. data/entry_types/scrolled/package/package.json +16 -8
  241. data/entry_types/scrolled/package/testHelpers.js +456 -0
  242. data/entry_types/scrolled/package/values/breakpoints.module.css +9 -0
  243. data/entry_types/scrolled/package/values/colors.module.css +5 -0
  244. data/entry_types/scrolled/package/widgets/defaultNavigation.css +9 -0
  245. data/entry_types/scrolled/package/widgets/defaultNavigation.js +612 -0
  246. data/entry_types/scrolled/spec/fixtures/image.svg +1 -0
  247. data/lib/pageflow/ability_mixin.rb +4 -0
  248. data/lib/pageflow/built_in_widget_type.rb +4 -0
  249. data/lib/pageflow/built_in_widget_types_plugin.rb +7 -0
  250. data/lib/pageflow/configuration.rb +34 -1
  251. data/lib/pageflow/entry_type.rb +11 -2
  252. data/lib/pageflow/entry_type_configuration.rb +2 -0
  253. data/lib/pageflow/file_type.rb +24 -0
  254. data/lib/pageflow/paperclip_processors/audio_waveform.rb +42 -0
  255. data/lib/pageflow/paperclip_processors/noop.rb +10 -0
  256. data/lib/pageflow/theme_customizations.rb +61 -0
  257. data/lib/pageflow/user_mixin.rb +6 -0
  258. data/lib/pageflow/version.rb +1 -1
  259. data/lib/pageflow.rb +9 -0
  260. data/package/config/jest/index.js +2 -1
  261. data/package/config/postcss/scaleFunctions.js +71 -0
  262. data/package/editor.js +95 -85
  263. data/package/frontend.js +521 -161
  264. data/package/package.json +5 -3
  265. data/package/testHelpers.js +26 -5
  266. data/package/ui.js +124 -11
  267. data/spec/factories/draft_entries.rb +19 -1
  268. data/spec/factories/entries.rb +4 -0
  269. data/spec/factories/published_entries.rb +6 -0
  270. data/spec/fixtures/audio.ogg +0 -0
  271. metadata +123 -15
  272. data/app/views/admin/entries/_not_allowed_to_see_entry_types.json.jbuilder +0 -2
  273. data/app/views/admin/entries/entry_types.json.jbuilder +0 -4
  274. data/package/config/jest/transformers/upwardBabel.js +0 -5
@@ -1,4 +1,4 @@
1
- @mixin background-icon-right($color: #444, $font-size: 19px, $right: 7px, $top: 7px) {
1
+ @mixin background-icon-right($color: var(--ui-primary-color-light), $font-size: 19px, $right: 7px, $top: 7px) {
2
2
  position: relative;
3
3
 
4
4
  &:before {
@@ -11,7 +11,7 @@
11
11
  }
12
12
  }
13
13
 
14
- @mixin background-icon-left($color: #444, $font-size: 19px, $left: 7px, $top: 49%) {
14
+ @mixin background-icon-left($color: var(--ui-primary-color-light), $font-size: 19px, $left: 7px, $top: 49%) {
15
15
  position: relative;
16
16
 
17
17
  &:before {
@@ -27,7 +27,7 @@
27
27
  }
28
28
  }
29
29
 
30
- @mixin background-icon-center($color: #444, $font-size: 19px, $left: 50%, $top: 50%) {
30
+ @mixin background-icon-center($color: var(--ui-primary-color-light), $font-size: 19px, $left: 50%, $top: 50%) {
31
31
  position: relative;
32
32
 
33
33
  &:before {
@@ -1,100 +1,82 @@
1
- $icon-button-default-base-color: #6aacf7 !default;
1
+ @mixin icon-button($type: nil) {
2
+ @include simple-button($type);
2
3
 
3
- @mixin icon-button($base-color: $icon-button-default-base-color) {
4
- @include simple-button($base-color);
5
-
6
- color: #fff;
7
- padding-top: 5px;
8
- padding-bottom: 4px;
9
4
  padding-left: 12px;
10
5
 
11
6
  &:before {
12
7
  font-size: 16px;
13
8
  margin-right: 6px;
14
- vertical-align: middle;
9
+ vertical-align: top;
15
10
  }
16
11
  }
17
12
 
18
- @mixin icon-only-button($base-color: $icon-button-default-base-color) {
19
- @include simple-button($base-color);
13
+ @mixin icon-only-button($type: nil) {
14
+ @include simple-button($type);
20
15
 
21
- padding-top: 5px;
22
- padding-bottom: 4px;
23
16
  padding-left: 8px;
24
17
  padding-right: 8px;
25
18
 
26
19
  &:before {
27
20
  font-size: 16px;
28
- vertical-align: middle;
21
+ vertical-align: top;
29
22
  }
30
23
  }
31
24
 
32
- @mixin simple-button($base-color) {
33
- $grayscale: $base-color == grayscale($base-color);
34
- $color: hsl(0, 0, 100%);
35
- $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
36
- $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
37
- $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
38
- $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
39
-
40
- @if lightness($base-color) > 70% {
41
- $color: hsl(0, 0, 20%);
42
- $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
43
- }
44
-
45
- @if $grayscale == true {
46
- $border: grayscale($border);
47
- $inset-shadow: grayscale($inset-shadow);
48
- $stop-gradient: grayscale($stop-gradient);
49
- $text-shadow: grayscale($text-shadow);
50
- }
51
-
52
- border: 1px solid $border;
53
- border-radius: 3px;
54
- box-shadow: inset 0 1px 0 0 $inset-shadow;
55
- color: $color;
25
+ @mixin simple-button($type: nil) {
26
+ border-radius: rounded();
56
27
  display: inline-block;
57
28
  font-size: 11px;
58
- font-weight: bold;
59
- @include linear-gradient ($base-color, $stop-gradient);
60
- padding: 7px 18px;
29
+ font-weight: 500;
30
+ padding: 6px 18px;
61
31
  text-decoration: none;
62
- text-shadow: 0 1px 0 $text-shadow;
63
- background-clip: padding-box;
32
+ line-height: 16px;
64
33
 
65
- &:hover:not(:disabled):not(.disabled) {
66
- $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
67
- $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
68
- $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
34
+ @if $type == "primary" {
35
+ background-color: var(--ui-primary-color);
36
+ border: solid 1px var(--ui-primary-color);
37
+ color: var(--ui-on-primary-color);
69
38
 
70
- @if $grayscale == true {
71
- $base-color-hover: grayscale($base-color-hover);
72
- $inset-shadow-hover: grayscale($inset-shadow-hover);
73
- $stop-gradient-hover: grayscale($stop-gradient-hover);
39
+ &:hover:not(:disabled):not(.disabled) {
40
+ opacity: 0.92;
74
41
  }
75
42
 
76
- box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
77
- cursor: pointer;
78
- @include linear-gradient ($base-color-hover, $stop-gradient-hover);
79
- }
80
-
81
- &:active:not(:disabled):not(.disabled) {
82
- $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
83
- $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
84
- $inset-shadow: #eee;
43
+ &:disabled,
44
+ &.disabled {
45
+ background-color: var(--ui-on-surface-color-lightest-solid);
46
+ border-color: var(--ui-on-surface-color-lightest-solid);
47
+ color: var(--ui-primary-color-light);
48
+ cursor: default;
49
+ }
50
+ } @else {
51
+ background-color: transparent;
52
+ border: solid 1px var(--ui-primary-color-light);
53
+ color: var(--ui-primary-color);
54
+
55
+ @if $type == "destructive" {
56
+ &:hover:not(:disabled):not(.disabled) {
57
+ background-color: var(--ui-error-color);
58
+ border-color: var(--ui-error-color);
59
+ color: var(--ui-on-error-color);
60
+ }
61
+ } @else {
62
+ &:hover:not(:disabled):not(.disabled) {
63
+ border: 1px solid var(--ui-primary-color);
64
+ }
65
+ }
85
66
 
86
- @if $grayscale == true {
87
- $border-active: grayscale($border-active);
88
- $inset-shadow-active: grayscale($inset-shadow-active);
67
+ &:disabled,
68
+ &.disabled {
69
+ opacity: 0.5;
70
+ cursor: default;
89
71
  }
72
+ }
90
73
 
91
- border: 1px solid $border-active;
92
- box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 $inset-shadow;
74
+ &:hover:not(:disabled):not(.disabled) {
75
+ cursor: pointer;
93
76
  }
94
77
 
95
- &:disabled,
96
- &.disabled {
97
- opacity: 0.5;
98
- cursor: default;
78
+ &:active:not(:disabled):not(.disabled),
79
+ &:focus:not(:disabled):not(.disabled) {
80
+ box-shadow: 0 0 0 2px var(--ui-primary-color-lighter);
99
81
  }
100
82
  }
@@ -16,6 +16,7 @@
16
16
 
17
17
  @import "./built_in_page_types";
18
18
  @import "./anchors";
19
+ @import "./consent";
19
20
  @import "./cookie_notice_bar";
20
21
  @import "./logo";
21
22
  @import "./page";
@@ -31,5 +32,6 @@
31
32
  @import "./video_player";
32
33
  @import "./uncropped_media_wrapper";
33
34
  @import "./text_track_cues";
35
+ @import "./third_party_embed_consent";
34
36
  @import "./slideshow";
35
37
  @import "./probes";
@@ -0,0 +1,156 @@
1
+ /// Color of the cookie notice bar
2
+ $consent-bar-background-color: rgba(20, 20, 20, 0.95);
3
+
4
+ /// Color of the text inside cookie notice bar
5
+ $consent-bar-text-color: #fff;
6
+
7
+ $consent-bar-link-text-color: $main-color;
8
+
9
+ $consent-bar-typography: ();
10
+
11
+ $consent-bar-accept-all-button-background-color: $main-color-dark;
12
+ $consent-bar-deny-all-button-background-color: #333;
13
+ $consent-bar-configure-button-background-color: #333;
14
+ $consent-bar-save-button-background-color: #333;
15
+
16
+ $consent-bar-accept-all-button-text-color: #fff;
17
+ $consent-bar-deny-all-button-text-color: #fff;
18
+ $consent-bar-configure-button-text-color: #fff;
19
+ $consent-bar-save-button-text-color: #fff;
20
+
21
+ .consent_bar {
22
+ position: absolute;
23
+ bottom: 0;
24
+ left: 0;
25
+ right: 0;
26
+ background-color: $consent-bar-background-color;
27
+ color: $consent-bar-text-color;
28
+ padding: 10px 20px;
29
+ z-index: 2;
30
+
31
+ @include standard-typography(
32
+ $consent-bar-typography
33
+ );
34
+
35
+ &-content {
36
+ @extend %pageflow_widget_margin_right_max !optional;
37
+ }
38
+
39
+ &-text {
40
+ margin-top: 10px;
41
+ margin-bottom: 10px;
42
+ display: inline-block;
43
+
44
+ a {
45
+ color: $consent-bar-link-text-color;
46
+ }
47
+ }
48
+
49
+ &-accept_all,
50
+ &-deny_all,
51
+ &-configure,
52
+ &-save {
53
+ border: none;
54
+ border-radius: 3px;
55
+ margin: 10px 5px 5px;
56
+ padding: 10px 15px;
57
+ font: inherit;
58
+ display: inline-block;
59
+ cursor: pointer;
60
+
61
+ @include phone {
62
+ display: block;
63
+ width: 100%;
64
+ margin: 10px 0;
65
+ }
66
+ }
67
+
68
+ &-accept_all {
69
+ background-color: $consent-bar-accept-all-button-background-color;
70
+ color: $consent-bar-accept-all-button-text-color;
71
+ }
72
+
73
+ &-deny_all {
74
+ background-color: $consent-bar-deny-all-button-background-color;
75
+ color: $consent-bar-deny-all-button-text-color;
76
+ }
77
+
78
+ &-configure {
79
+ background-color: $consent-bar-configure-button-background-color;
80
+ color: $consent-bar-configure-button-text-color;
81
+
82
+ svg {
83
+ fill: currentColor;
84
+ margin-right: 8px;
85
+ }
86
+ }
87
+
88
+ &-save {
89
+ background-color: $consent-bar-save-button-background-color;
90
+ color: $consent-bar-save-button-text-color;
91
+ float: right;
92
+ }
93
+
94
+ &-vendor_box {
95
+ @extend %pageflow_widget_margin_right_max !optional;
96
+
97
+ display: none;
98
+
99
+ h3 {
100
+ margin: 0.5em 0;
101
+ font-size: 1em;
102
+ }
103
+
104
+ a {
105
+ color: $consent-bar-text-color;
106
+ }
107
+ }
108
+
109
+ @include phone {
110
+ .consent_bar-vendor_box {
111
+ // scss-lint:disable ImportantRule
112
+ // Ensure widget margin is not being applied in phone layout
113
+ margin-right: 0 !important;
114
+ // scss-lint:enable ImportantRule
115
+ }
116
+ }
117
+
118
+ @include desktop {
119
+ &-vendor_box {
120
+ position: absolute;
121
+ bottom: 100%;
122
+ right: 0;
123
+ margin-bottom: 5px;
124
+ max-width: 400px;
125
+ width: 90%;
126
+ box-sizing: border-box;
127
+ padding: 10px 20px;
128
+ background-color: $consent-bar-background-color;
129
+ color: $consent-bar-text-color;
130
+ }
131
+
132
+ &-save {
133
+ float: right;
134
+ }
135
+
136
+ &-buttons {
137
+ float: right;
138
+ text-align: right;
139
+ }
140
+
141
+ &-decision_buttons {
142
+ display: inline-block;
143
+ white-space: nowrap;
144
+ }
145
+ }
146
+
147
+ &-expanded {
148
+ .consent_bar-vendor_box {
149
+ display: block;
150
+ }
151
+
152
+ .consent_bar-configure {
153
+ display: none;
154
+ }
155
+ }
156
+ }
@@ -0,0 +1,62 @@
1
+ $consent-vendor-list-icon-color: #ddd;
2
+ $consent-vendor-list-active-icon-color: #fff;
3
+ $consent-vendor-list-toggle-color: #444;
4
+ $consent-vendor-list-checked-toggle-color: $main-color;
5
+
6
+ .consent_vendor_list {
7
+ overflow: auto;
8
+ max-height: 40vh;
9
+ padding-right: 5px;
10
+ margin: 5px 0;
11
+
12
+ @include phone {
13
+ max-height: 20vh;
14
+ }
15
+
16
+ &-vendor {
17
+ position: relative;
18
+ margin-bottom: 5px;
19
+ padding: 5px 0;
20
+
21
+ p {
22
+ font-size: 13px;
23
+ }
24
+ }
25
+
26
+ &-expand_vendor {
27
+ border: none;
28
+ background: transparent;
29
+ position: absolute;
30
+ right: 5px;
31
+ top: 4px;
32
+ cursor: pointer;
33
+
34
+ svg {
35
+ fill: $consent-vendor-list-icon-color;
36
+ }
37
+
38
+ &:hover svg,
39
+ &:active svg {
40
+ fill: $consent-vendor-list-active-icon-color;
41
+ }
42
+ }
43
+
44
+ &-toggle {
45
+ border: none;
46
+ background: transparent;
47
+ padding: 0;
48
+ position: absolute;
49
+ top: -2px;
50
+ right: 40px;
51
+ color: $consent-vendor-list-toggle-color;
52
+ cursor: pointer;
53
+
54
+ &[aria-checked=true] {
55
+ color: $consent-vendor-list-checked-toggle-color;
56
+ }
57
+
58
+ svg {
59
+ display: block;
60
+ }
61
+ }
62
+ }
@@ -0,0 +1,2 @@
1
+ @import "./consent/bar";
2
+ @import "./consent/vendor_list";
@@ -9,6 +9,9 @@ $logo-alignment: "left" !default;
9
9
  // Left position relative to page when logo is left aligned.
10
10
  $logo-left: 8% !default;
11
11
 
12
+ // Left position relative to page when logo is left aligned in desktop layout.
13
+ $logo-mobile-left: null !default;
14
+
12
15
  // Right position relative to page when logo is right aligned.
13
16
  $logo-right: 14% !default;
14
17
 
@@ -24,4 +27,8 @@ $logo-right: 14% !default;
24
27
  @include phone {
25
28
  left: $logo-left;
26
29
  }
30
+
31
+ @include mobile {
32
+ @include position-start($logo-mobile-left);
33
+ }
27
34
  }
@@ -6,7 +6,51 @@ $page-shadow-color: #000 !default;
6
6
  /// @group page-colors
7
7
  $page-shadow-inverted-color: #fff !default;
8
8
 
9
+ /// Name of image file in theme directory to display behind the shadow
10
+ $page-shadow-image: null !default;
11
+
12
+ /// Opactiy of shadow image
13
+ $page-shadow-image-opacity: null !default;
14
+
15
+ /// Background position of shadow image
16
+ $page-shadow-image-position: right bottom !default;
17
+
18
+ /// Background size of shadow image
19
+ $page-shadow-image-size: contain !default;
20
+
21
+ /// Background size of shadow image in mobile layout.
22
+ $page-shadow-mobile-image-size: null !default;
23
+
9
24
  .page {
25
+ @if $page-shadow-image {
26
+ .shadow_wrapper::after {
27
+ content: "";
28
+ background-image: image-url("pageflow/themes/#{$theme-name}/#{$page-shadow-image}");
29
+ background-size: $page-shadow-image-size;
30
+ background-repeat: no-repeat;
31
+ background-position: $page-shadow-image-position;
32
+ opacity: $page-shadow-image-opacity;
33
+ position: absolute;
34
+ top: 0;
35
+ left: 0;
36
+ width: 100%;
37
+ height: 100%;
38
+ @include transition(opacity 0.2s linear);
39
+
40
+ @include mobile {
41
+ background-size: $page-shadow-mobile-image-size;
42
+ }
43
+
44
+ .hideText & {
45
+ opacity: 0;
46
+ }
47
+ }
48
+
49
+ .video_page.should_play .shadow_wrapper::after {
50
+ opacity: 0;
51
+ }
52
+ }
53
+
10
54
  .shadow {
11
55
  @include shadow-start($page-shadow-color);
12
56
  }
@@ -0,0 +1,103 @@
1
+ .third_party_embed_opt_in {
2
+ position: absolute;
3
+ top: 0;
4
+ left: 0;
5
+ padding: 15px;
6
+ display: flex;
7
+ flex-direction: column;
8
+ width: 100%;
9
+ height: 100%;
10
+ text-align: center;
11
+ align-items: center;
12
+ justify-content: center;
13
+ box-sizing: border-box;
14
+ z-index: 1;
15
+
16
+ &::before {
17
+ content: image-url("pageflow/themes/default/embed_opt_in.svg");
18
+ display: block;
19
+ height: 90px;
20
+ width: 120px;
21
+ }
22
+
23
+ &-message {
24
+ margin: 1em 0 1.5em 0;
25
+ }
26
+
27
+ &-button {
28
+ padding: 10px;
29
+ background-color: transparent;
30
+ color: currentColor;
31
+ border: solid 1px currentColor;
32
+ border-radius: 4px;
33
+ cursor: pointer;
34
+ }
35
+
36
+ a {
37
+ color: currentColor;
38
+ }
39
+
40
+ .consent_given & {
41
+ display: none;
42
+ }
43
+ }
44
+
45
+ .third_party_embed_opt_out_info {
46
+ display: none;
47
+ color: #fff;
48
+ height: 100%;
49
+ pointer-events: none;
50
+
51
+ &-icon,
52
+ &-tooltip {
53
+ position: absolute;
54
+ right: 0;
55
+ box-sizing: border-box;
56
+ min-height: 40px;
57
+ height: 100%;
58
+ pointer-events: auto;
59
+ }
60
+
61
+ &-icon {
62
+ border: 0;
63
+ background-color: transparent;
64
+ text-align: initial;
65
+ display: flex;
66
+ flex-direction: column;
67
+ justify-content: center;
68
+ padding: 7px 7px;
69
+ z-index: 2;
70
+
71
+ &::before {
72
+ content: image-url("pageflow/themes/default/embed_opt_out_info.svg");
73
+ display: block;
74
+ width: 26px;
75
+ height: 26px;
76
+ }
77
+ }
78
+
79
+ &-tooltip {
80
+ background-color: #000;
81
+ display: none;
82
+ align-items: center;
83
+ justify-content: flex-end;
84
+ padding: 5px 50px 5px 10px;
85
+ left: 0;
86
+ z-index: 1;
87
+
88
+ a {
89
+ color: currentColor;
90
+ }
91
+ }
92
+
93
+ &:hover,
94
+ &:focus-within {
95
+ .third_party_embed_opt_out_info-tooltip {
96
+ display: flex;
97
+ }
98
+ }
99
+
100
+ .consent_given & {
101
+ display: block;
102
+ }
103
+ }