From 6cb3276a9db1d3821b64a7e9d4afaa50ddd2d1f3 Mon Sep 17 00:00:00 2001 From: Stephen Mustgrave Date: Sun, 13 Jun 2021 17:35:23 -0400 Subject: [PATCH 1/4] Fix media library --- .gitignore | 3 +- css/classy/README.txt | 12 + css/classy/components/action-links.css | 43 + css/classy/components/book-navigation.css | 40 + css/classy/components/breadcrumb.css | 29 + css/classy/components/button.css | 15 + css/classy/components/collapse-processed.css | 32 + css/classy/components/container-inline.css | 22 + css/classy/components/dropbutton.css | 33 + css/classy/components/exposed-filters.css | 46 ++ css/classy/components/field.css | 25 + css/classy/components/file.css | 62 ++ css/classy/components/form.css | 104 +++ css/classy/components/forum.css | 46 ++ css/classy/components/icons.css | 21 + css/classy/components/image-widget.css | 33 + css/classy/components/indented.css | 16 + css/classy/components/inline-form.css | 33 + css/classy/components/item-list.css | 32 + css/classy/components/link.css | 16 + css/classy/components/links.css | 23 + css/classy/components/media-embed-error.css | 20 + css/classy/components/menu.css | 34 + css/classy/components/messages.css | 72 ++ css/classy/components/more-link.css | 12 + css/classy/components/node.css | 8 + css/classy/components/pager.css | 16 + css/classy/components/progress.css | 69 ++ css/classy/components/search-results.css | 8 + css/classy/components/tabledrag.css | 14 + css/classy/components/tableselect.css | 19 + css/classy/components/tablesort.css | 11 + css/classy/components/tabs.css | 33 + css/classy/components/textarea.css | 11 + css/classy/components/ui-dialog.css | 15 + css/classy/layout/media-library.css | 28 + gulpfile.js | 2 +- images/classy/README.txt | 12 + .../classy/icons/application-octet-stream.png | Bin 0 -> 189 bytes images/classy/icons/application-pdf.png | Bin 0 -> 346 bytes .../classy/icons/application-x-executable.png | Bin 0 -> 189 bytes images/classy/icons/audio-x-generic.png | Bin 0 -> 314 bytes images/classy/icons/forum-icons.png | Bin 0 -> 1765 bytes images/classy/icons/image-x-generic.png | Bin 0 -> 385 bytes images/classy/icons/package-x-generic.png | Bin 0 -> 260 bytes images/classy/icons/text-html.png | Bin 0 -> 265 bytes images/classy/icons/text-plain.png | Bin 0 -> 220 bytes images/classy/icons/text-x-generic.png | Bin 0 -> 220 bytes images/classy/icons/text-x-script.png | Bin 0 -> 276 bytes images/classy/icons/video-x-generic.png | Bin 0 -> 214 bytes images/classy/icons/x-office-document.png | Bin 0 -> 196 bytes images/classy/icons/x-office-presentation.png | Bin 0 -> 181 bytes images/classy/icons/x-office-spreadsheet.png | Bin 0 -> 183 bytes js/classy/README.txt | 12 + js/classy/media_embed_ckeditor.theme.es6.js | 22 + js/classy/media_embed_ckeditor.theme.js | 12 + lark.libraries.yml | 94 +++ lark.theme | 230 +++++- scss/base/elements.scss | 182 +++++ scss/components/_details.scss | 34 + scss/components/_dialog.scss | 127 +++ scss/main.scss | 5 + scss/theme/media-library.css | 737 ++++++++++++++++++ templates/classy/README.txt | 12 + .../block/block--local-tasks-block.html.twig | 14 + .../block/block--search-form-block.html.twig | 45 ++ .../block--system-branding-block.html.twig | 30 + .../block/block--system-menu-block.html.twig | 56 ++ templates/classy/block/block.html.twig | 44 ++ .../content-edit/file-managed-file.html.twig | 22 + .../content-edit/filter-caption.html.twig | 18 + .../content-edit/filter-guidelines.html.twig | 29 + .../classy/content-edit/filter-tips.html.twig | 61 ++ .../text-format-wrapper.html.twig | 26 + .../classy/content/aggregator-item.html.twig | 31 + .../content/book-node-export-html.html.twig | 20 + templates/classy/content/comment.html.twig | 111 +++ .../classy/content/links--node.html.twig | 40 + templates/classy/content/mark.html.twig | 20 + .../content/media-embed-error.html.twig | 21 + templates/classy/content/media.html.twig | 28 + templates/classy/content/node.html.twig | 108 +++ templates/classy/content/page-title.html.twig | 19 + .../classy/content/search-result.html.twig | 72 ++ .../classy/content/taxonomy-term.html.twig | 41 + .../classy/dataset/aggregator-feed.html.twig | 36 + templates/classy/dataset/forum-icon.html.twig | 30 + templates/classy/dataset/forum-list.html.twig | 79 ++ templates/classy/dataset/forums.html.twig | 24 + .../item-list--search-results.html.twig | 29 + templates/classy/dataset/item-list.html.twig | 41 + templates/classy/dataset/table.html.twig | 113 +++ .../classy/field/field--comment.html.twig | 57 ++ .../field/field--node--created.html.twig | 34 + .../classy/field/field--node--title.html.twig | 34 + .../classy/field/field--node--uid.html.twig | 34 + .../classy/field/field--text-long.html.twig | 1 + .../field/field--text-with-summary.html.twig | 1 + templates/classy/field/field--text.html.twig | 28 + templates/classy/field/field.html.twig | 81 ++ templates/classy/field/file-audio.html.twig | 23 + templates/classy/field/file-video.html.twig | 23 + templates/classy/field/image.html.twig | 18 + .../link-formatter-link-separate.html.twig | 22 + templates/classy/field/time.html.twig | 22 + templates/classy/form/datetime-form.html.twig | 15 + .../classy/form/datetime-wrapper.html.twig | 36 + templates/classy/form/fieldset.html.twig | 60 ++ .../classy/form/form-element-label.html.twig | 25 + templates/classy/form/form-element.html.twig | 95 +++ templates/classy/form/radios.html.twig | 13 + templates/classy/form/textarea.html.twig | 25 + .../classy/layout/book-export-html.html.twig | 45 ++ templates/classy/layout/html.html.twig | 55 ++ templates/classy/layout/region.html.twig | 25 + ...container--media-library-content.html.twig | 28 + ...--media-library-widget-selection.html.twig | 28 + .../links--media-library-menu.html.twig | 36 + .../media--media-library.html.twig | 55 ++ .../media-library-item--small.html.twig | 31 + .../media-library-item.html.twig | 28 + .../media-library-wrapper.html.twig | 21 + templates/classy/misc/help-section.html.twig | 48 ++ templates/classy/misc/progress-bar.html.twig | 22 + templates/classy/misc/rdf-metadata.html.twig | 20 + .../classy/misc/status-messages.html.twig | 55 ++ .../navigation/book-all-books-block.html.twig | 22 + .../navigation/book-navigation.html.twig | 56 ++ .../classy/navigation/book-tree.html.twig | 55 ++ .../classy/navigation/breadcrumb.html.twig | 25 + .../navigation/menu-local-task.html.twig | 17 + templates/classy/navigation/menu.html.twig | 55 ++ templates/classy/navigation/toolbar.html.twig | 46 ++ .../classy/user/forum-submitted.html.twig | 21 + templates/classy/user/user.html.twig | 23 + templates/classy/user/username.html.twig | 29 + .../classy/views/views-exposed-form.html.twig | 21 + .../classy/views/views-mini-pager.html.twig | 42 + .../views/views-view-grouping.html.twig | 20 + .../classy/views/views-view-row-rss.html.twig | 30 + .../views-view-summary-unformatted.html.twig | 31 + .../classy/views/views-view-summary.html.twig | 31 + .../classy/views/views-view-table.html.twig | 120 +++ templates/classy/views/views-view.html.twig | 95 +++ templates/details.html.twig | 52 ++ ...-library-add-form-selected-media.html.twig | 20 + .../fieldset--media-library-widget.html.twig | 64 ++ ...edia-library-add-form-media-list.html.twig | 33 + .../views-view--media_library.html.twig | 95 +++ ...-view-unformatted--media-library.html.twig | 34 + .../navigation/menu-local-tasks.html.twig | 2 +- 151 files changed, 5915 insertions(+), 13 deletions(-) create mode 100644 css/classy/README.txt create mode 100644 css/classy/components/action-links.css create mode 100644 css/classy/components/book-navigation.css create mode 100644 css/classy/components/breadcrumb.css create mode 100644 css/classy/components/button.css create mode 100644 css/classy/components/collapse-processed.css create mode 100644 css/classy/components/container-inline.css create mode 100644 css/classy/components/dropbutton.css create mode 100644 css/classy/components/exposed-filters.css create mode 100644 css/classy/components/field.css create mode 100644 css/classy/components/file.css create mode 100644 css/classy/components/form.css create mode 100644 css/classy/components/forum.css create mode 100644 css/classy/components/icons.css create mode 100644 css/classy/components/image-widget.css create mode 100644 css/classy/components/indented.css create mode 100644 css/classy/components/inline-form.css create mode 100644 css/classy/components/item-list.css create mode 100644 css/classy/components/link.css create mode 100644 css/classy/components/links.css create mode 100644 css/classy/components/media-embed-error.css create mode 100644 css/classy/components/menu.css create mode 100644 css/classy/components/messages.css create mode 100644 css/classy/components/more-link.css create mode 100644 css/classy/components/node.css create mode 100644 css/classy/components/pager.css create mode 100644 css/classy/components/progress.css create mode 100644 css/classy/components/search-results.css create mode 100644 css/classy/components/tabledrag.css create mode 100644 css/classy/components/tableselect.css create mode 100644 css/classy/components/tablesort.css create mode 100644 css/classy/components/tabs.css create mode 100644 css/classy/components/textarea.css create mode 100644 css/classy/components/ui-dialog.css create mode 100644 css/classy/layout/media-library.css create mode 100644 images/classy/README.txt create mode 100644 images/classy/icons/application-octet-stream.png create mode 100644 images/classy/icons/application-pdf.png create mode 100644 images/classy/icons/application-x-executable.png create mode 100644 images/classy/icons/audio-x-generic.png create mode 100644 images/classy/icons/forum-icons.png create mode 100644 images/classy/icons/image-x-generic.png create mode 100644 images/classy/icons/package-x-generic.png create mode 100644 images/classy/icons/text-html.png create mode 100644 images/classy/icons/text-plain.png create mode 100644 images/classy/icons/text-x-generic.png create mode 100644 images/classy/icons/text-x-script.png create mode 100644 images/classy/icons/video-x-generic.png create mode 100644 images/classy/icons/x-office-document.png create mode 100644 images/classy/icons/x-office-presentation.png create mode 100644 images/classy/icons/x-office-spreadsheet.png create mode 100644 js/classy/README.txt create mode 100644 js/classy/media_embed_ckeditor.theme.es6.js create mode 100644 js/classy/media_embed_ckeditor.theme.js create mode 100644 scss/base/elements.scss create mode 100644 scss/components/_details.scss create mode 100644 scss/components/_dialog.scss create mode 100644 scss/theme/media-library.css create mode 100644 templates/classy/README.txt create mode 100644 templates/classy/block/block--local-tasks-block.html.twig create mode 100644 templates/classy/block/block--search-form-block.html.twig create mode 100644 templates/classy/block/block--system-branding-block.html.twig create mode 100644 templates/classy/block/block--system-menu-block.html.twig create mode 100644 templates/classy/block/block.html.twig create mode 100644 templates/classy/content-edit/file-managed-file.html.twig create mode 100644 templates/classy/content-edit/filter-caption.html.twig create mode 100644 templates/classy/content-edit/filter-guidelines.html.twig create mode 100644 templates/classy/content-edit/filter-tips.html.twig create mode 100644 templates/classy/content-edit/text-format-wrapper.html.twig create mode 100644 templates/classy/content/aggregator-item.html.twig create mode 100644 templates/classy/content/book-node-export-html.html.twig create mode 100644 templates/classy/content/comment.html.twig create mode 100644 templates/classy/content/links--node.html.twig create mode 100644 templates/classy/content/mark.html.twig create mode 100644 templates/classy/content/media-embed-error.html.twig create mode 100644 templates/classy/content/media.html.twig create mode 100644 templates/classy/content/node.html.twig create mode 100644 templates/classy/content/page-title.html.twig create mode 100644 templates/classy/content/search-result.html.twig create mode 100644 templates/classy/content/taxonomy-term.html.twig create mode 100644 templates/classy/dataset/aggregator-feed.html.twig create mode 100644 templates/classy/dataset/forum-icon.html.twig create mode 100644 templates/classy/dataset/forum-list.html.twig create mode 100644 templates/classy/dataset/forums.html.twig create mode 100644 templates/classy/dataset/item-list--search-results.html.twig create mode 100644 templates/classy/dataset/item-list.html.twig create mode 100644 templates/classy/dataset/table.html.twig create mode 100644 templates/classy/field/field--comment.html.twig create mode 100644 templates/classy/field/field--node--created.html.twig create mode 100644 templates/classy/field/field--node--title.html.twig create mode 100644 templates/classy/field/field--node--uid.html.twig create mode 100644 templates/classy/field/field--text-long.html.twig create mode 100644 templates/classy/field/field--text-with-summary.html.twig create mode 100644 templates/classy/field/field--text.html.twig create mode 100644 templates/classy/field/field.html.twig create mode 100644 templates/classy/field/file-audio.html.twig create mode 100644 templates/classy/field/file-video.html.twig create mode 100644 templates/classy/field/image.html.twig create mode 100644 templates/classy/field/link-formatter-link-separate.html.twig create mode 100644 templates/classy/field/time.html.twig create mode 100644 templates/classy/form/datetime-form.html.twig create mode 100644 templates/classy/form/datetime-wrapper.html.twig create mode 100644 templates/classy/form/fieldset.html.twig create mode 100644 templates/classy/form/form-element-label.html.twig create mode 100644 templates/classy/form/form-element.html.twig create mode 100644 templates/classy/form/radios.html.twig create mode 100644 templates/classy/form/textarea.html.twig create mode 100644 templates/classy/layout/book-export-html.html.twig create mode 100644 templates/classy/layout/html.html.twig create mode 100644 templates/classy/layout/region.html.twig create mode 100644 templates/classy/media-library/container--media-library-content.html.twig create mode 100644 templates/classy/media-library/container--media-library-widget-selection.html.twig create mode 100644 templates/classy/media-library/links--media-library-menu.html.twig create mode 100644 templates/classy/media-library/media--media-library.html.twig create mode 100644 templates/classy/media-library/media-library-item--small.html.twig create mode 100644 templates/classy/media-library/media-library-item.html.twig create mode 100644 templates/classy/media-library/media-library-wrapper.html.twig create mode 100644 templates/classy/misc/help-section.html.twig create mode 100644 templates/classy/misc/progress-bar.html.twig create mode 100644 templates/classy/misc/rdf-metadata.html.twig create mode 100644 templates/classy/misc/status-messages.html.twig create mode 100644 templates/classy/navigation/book-all-books-block.html.twig create mode 100644 templates/classy/navigation/book-navigation.html.twig create mode 100644 templates/classy/navigation/book-tree.html.twig create mode 100644 templates/classy/navigation/breadcrumb.html.twig create mode 100644 templates/classy/navigation/menu-local-task.html.twig create mode 100644 templates/classy/navigation/menu.html.twig create mode 100644 templates/classy/navigation/toolbar.html.twig create mode 100644 templates/classy/user/forum-submitted.html.twig create mode 100644 templates/classy/user/user.html.twig create mode 100644 templates/classy/user/username.html.twig create mode 100644 templates/classy/views/views-exposed-form.html.twig create mode 100644 templates/classy/views/views-mini-pager.html.twig create mode 100644 templates/classy/views/views-view-grouping.html.twig create mode 100644 templates/classy/views/views-view-row-rss.html.twig create mode 100644 templates/classy/views/views-view-summary-unformatted.html.twig create mode 100644 templates/classy/views/views-view-summary.html.twig create mode 100644 templates/classy/views/views-view-table.html.twig create mode 100644 templates/classy/views/views-view.html.twig create mode 100644 templates/details.html.twig create mode 100644 templates/media-library/details--media-library-add-form-selected-media.html.twig create mode 100644 templates/media-library/fieldset--media-library-widget.html.twig create mode 100644 templates/media-library/item-list--media-library-add-form-media-list.html.twig create mode 100644 templates/media-library/views-view--media_library.html.twig create mode 100644 templates/media-library/views-view-unformatted--media-library.html.twig diff --git a/.gitignore b/.gitignore index cbadd1d..06f7d0f 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ node_modules -css +css/main.css +css/main.min.css diff --git a/css/classy/README.txt b/css/classy/README.txt new file mode 100644 index 0000000..42514f5 --- /dev/null +++ b/css/classy/README.txt @@ -0,0 +1,12 @@ +WHAT IS THIS DIRECTORY FOR? +-------------------------------- +This directory is for CSS files previously inherited from the Classy theme. + +WHY ARE CLASSY CSS FILES BEING COPIED HERE? +------------------------------------------- +Classy will be deprecated during the Drupal 9 lifecycle. To prepare for Classy's +removal, CSS files that would otherwise be inherited from Classy are copied +here. + +CSS files that differ from the Classy versions should not be placed in this +directory or any subdirectory. diff --git a/css/classy/components/action-links.css b/css/classy/components/action-links.css new file mode 100644 index 0000000..274d798 --- /dev/null +++ b/css/classy/components/action-links.css @@ -0,0 +1,43 @@ +/** + * @file + * Styles for link buttons and action links. + */ + +.action-links { + margin: 1em 0; + padding: 0; + list-style: none; +} +[dir="rtl"] .action-links { + /* This is required to win over specificity of [dir="rtl"] ul */ + margin-right: 0; +} +.action-links li { + display: inline-block; + margin: 0 0.3em; +} +.action-links li:first-child { + margin-left: 0; /* LTR */ +} +[dir="rtl"] .action-links li:first-child { + margin-right: 0; + margin-left: 0.3em; +} +.button-action { + display: inline-block; + padding: 0.2em 0.5em 0.3em; + text-decoration: none; + line-height: 160%; +} +.button-action:before { + margin-left: -0.1em; /* LTR */ + padding-right: 0.2em; /* LTR */ + content: "+"; + font-weight: 900; +} +[dir="rtl"] .button-action:before { + margin-right: -0.1em; + margin-left: 0; + padding-right: 0; + padding-left: 0.2em; +} diff --git a/css/classy/components/book-navigation.css b/css/classy/components/book-navigation.css new file mode 100644 index 0000000..08728e2 --- /dev/null +++ b/css/classy/components/book-navigation.css @@ -0,0 +1,40 @@ +/** + * @file + * Styling for the Book module. + */ + +.book-navigation .menu { + padding-top: 1em; + padding-bottom: 0; +} +.book-navigation .book-pager { + overflow: auto; + margin: 0; + padding: 0.5em 0; +} +.book-pager__item { + display: inline-block; + list-style-type: none; + vertical-align: top; +} +.book-pager__item--previous { + width: 45%; + text-align: left; /* LTR */ +} +[dir="rtl"] .book-pager__item--previous { + float: right; + text-align: right; +} +.book-pager__item--center { + width: 8%; + text-align: center; +} +.book-pager__item--next { + float: right; /* LTR */ + width: 45%; + text-align: right; /* LTR */ +} +[dir="rtl"] .book-pager__item--next { + float: left; + text-align: left; +} diff --git a/css/classy/components/breadcrumb.css b/css/classy/components/breadcrumb.css new file mode 100644 index 0000000..1e6a7fa --- /dev/null +++ b/css/classy/components/breadcrumb.css @@ -0,0 +1,29 @@ +/** + * @file + * Styles for breadcrumbs. + */ + +.breadcrumb { + padding-bottom: 0.5em; +} +.breadcrumb ol { + margin: 0; + padding: 0; +} +[dir="rtl"] .breadcrumb ol { + /* This is required to win over specificity of [dir="rtl"] ol */ + margin-right: 0; +} +.breadcrumb li { + display: inline; + margin: 0; + padding: 0; + list-style-type: none; +} +/* IE8 does not support :not() and :last-child. */ +.breadcrumb li:before { + content: " \BB "; +} +.breadcrumb li:first-child:before { + content: none; +} diff --git a/css/classy/components/button.css b/css/classy/components/button.css new file mode 100644 index 0000000..5eb4f1a --- /dev/null +++ b/css/classy/components/button.css @@ -0,0 +1,15 @@ +/** + * @file + * Visual styles for buttons. + */ + +.button, +.image-button { + margin-right: 1em; + margin-left: 1em; +} +.button:first-child, +.image-button:first-child { + margin-right: 0; + margin-left: 0; +} diff --git a/css/classy/components/collapse-processed.css b/css/classy/components/collapse-processed.css new file mode 100644 index 0000000..c8c7868 --- /dev/null +++ b/css/classy/components/collapse-processed.css @@ -0,0 +1,32 @@ +/** + * @file + * Visual styles for collapsible fieldsets. + */ + +.collapse-processed > summary { + padding-right: 0.5em; + padding-left: 0.5em; +} +.collapse-processed > summary:before { + float: left; /* LTR */ + width: 1em; + height: 1em; + content: ""; + background: url(../../../../../misc/menu-expanded.png) 0 100% no-repeat; /* LTR */ +} +[dir="rtl"] .collapse-processed > summary:before { + float: right; + background-position: 100% 100%; +} +.collapse-processed:not([open]) > summary:before { + -ms-transform: rotate(-90deg); + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + background-position: 25% 35%; /* LTR */ +} +[dir="rtl"] .collapse-processed:not([open]) > summary:before { + -ms-transform: rotate(90deg); + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + background-position: 75% 35%; +} diff --git a/css/classy/components/container-inline.css b/css/classy/components/container-inline.css new file mode 100644 index 0000000..64b78f6 --- /dev/null +++ b/css/classy/components/container-inline.css @@ -0,0 +1,22 @@ +/** + * @file + * Inline items. + */ + +.container-inline label:after, +.container-inline .label:after { + content: ":"; +} +.form-type-radios .container-inline label:after, +.form-type-checkboxes .container-inline label:after { + content: ""; +} +.form-type-radios .container-inline .form-type-radio, +.form-type-checkboxes .container-inline .form-type-checkbox { + margin: 0 1em; +} +.container-inline .form-actions, +.container-inline.form-actions { + margin-top: 0; + margin-bottom: 0; +} diff --git a/css/classy/components/dropbutton.css b/css/classy/components/dropbutton.css new file mode 100644 index 0000000..5e971ba --- /dev/null +++ b/css/classy/components/dropbutton.css @@ -0,0 +1,33 @@ +/** + * @file + * General styles for dropbuttons. + */ + +.js .dropbutton-widget { + border: 1px solid #ccc; + background-color: white; +} +.js .dropbutton-widget:hover { + border-color: #b8b8b8; +} +.dropbutton .dropbutton-action > * { + padding: 0.1em 0.5em; + white-space: nowrap; +} +.dropbutton .secondary-action { + border-top: 1px solid #e8e8e8; +} +.dropbutton-multiple .dropbutton { + border-right: 1px solid #e8e8e8; /* LTR */ +} +[dir="rtl"] .dropbutton-multiple .dropbutton { + border-right: 0 none; + border-left: 1px solid #e8e8e8; +} +.dropbutton-multiple .dropbutton .dropbutton-action > * { + margin-right: 0.25em; /* LTR */ +} +[dir="rtl"] .dropbutton-multiple .dropbutton .dropbutton-action > * { + margin-right: 0; + margin-left: 0.25em; +} diff --git a/css/classy/components/exposed-filters.css b/css/classy/components/exposed-filters.css new file mode 100644 index 0000000..b686902 --- /dev/null +++ b/css/classy/components/exposed-filters.css @@ -0,0 +1,46 @@ +/** + * @file + * Visual styles for exposed filters. + */ + +.exposed-filters .filters { + float: left; /* LTR */ + margin-right: 1em; /* LTR */ +} +[dir="rtl"] .exposed-filters .filters { + float: right; + margin-right: 0; + margin-left: 1em; +} +.exposed-filters .form-item { + margin: 0 0 0.1em 0; + padding: 0; +} +.exposed-filters .form-item label { + float: left; /* LTR */ + width: 10em; + font-weight: normal; +} +[dir="rtl"] .exposed-filters .form-item label { + float: right; +} +.exposed-filters .form-select { + width: 14em; +} +/* Current filters */ +.exposed-filters .current-filters { + margin-bottom: 1em; +} +.exposed-filters .current-filters .placeholder { + font-weight: bold; + font-style: normal; +} +.exposed-filters .additional-filters { + float: left; /* LTR */ + margin-right: 1em; /* LTR */ +} +[dir="rtl"] .exposed-filters .additional-filters { + float: right; + margin-right: 0; + margin-left: 1em; +} diff --git a/css/classy/components/field.css b/css/classy/components/field.css new file mode 100644 index 0000000..ff7e9ab --- /dev/null +++ b/css/classy/components/field.css @@ -0,0 +1,25 @@ +/** + * @file + * Visual styles for fields. + */ + +.field__label { + font-weight: bold; +} +.field--label-inline .field__label, +.field--label-inline .field__items { + float: left; /* LTR */ +} +.field--label-inline .field__label, +.field--label-inline > .field__item, +.field--label-inline .field__items { + padding-right: 0.5em; +} +[dir="rtl"] .field--label-inline .field__label, +[dir="rtl"] .field--label-inline .field__items { + padding-right: 0; + padding-left: 0.5em; +} +.field--label-inline .field__label::after { + content: ":"; +} diff --git a/css/classy/components/file.css b/css/classy/components/file.css new file mode 100644 index 0000000..8637242 --- /dev/null +++ b/css/classy/components/file.css @@ -0,0 +1,62 @@ +/** + * @file + * Default style for file module. + */ + +/* File icons. */ + +.file { + display: inline-block; + min-height: 16px; + padding-left: 20px; /* LTR */ + background-repeat: no-repeat; + background-position: left center; /* LTR */ +} +[dir="rtl"] .file { + padding-right: 20px; + padding-left: inherit; + background-position: right center; +} +.file--general, +.file--application-octet-stream { + background-image: url(../../../images/classy/icons/application-octet-stream.png); +} +.file--package-x-generic { + background-image: url(../../../images/classy/icons/package-x-generic.png); +} +.file--x-office-spreadsheet { + background-image: url(../../../images/classy/icons/x-office-spreadsheet.png); +} +.file--x-office-document { + background-image: url(../../../images/classy/icons/x-office-document.png); +} +.file--x-office-presentation { + background-image: url(../../../images/classy/icons/x-office-presentation.png); +} +.file--text-x-script { + background-image: url(../../../images/classy/icons/text-x-script.png); +} +.file--text-html { + background-image: url(../../../images/classy/icons/text-html.png); +} +.file--text-plain { + background-image: url(../../../images/classy/icons/text-plain.png); +} +.file--application-pdf { + background-image: url(../../../images/classy/icons/application-pdf.png); +} +.file--application-x-executable { + background-image: url(../../../images/classy/icons/application-x-executable.png); +} +.file--audio { + background-image: url(../../../images/classy/icons/audio-x-generic.png); +} +.file--video { + background-image: url(../../../images/classy/icons/video-x-generic.png); +} +.file--text { + background-image: url(../../../images/classy/icons/text-x-generic.png); +} +.file--image { + background-image: url(../../../images/classy/icons/image-x-generic.png); +} diff --git a/css/classy/components/form.css b/css/classy/components/form.css new file mode 100644 index 0000000..7f8aa4b --- /dev/null +++ b/css/classy/components/form.css @@ -0,0 +1,104 @@ +/** + * @file + * Visual styles for form components. + */ + +form .field-multiple-table { + margin: 0; +} +form .field-multiple-table .field-multiple-drag { + width: 30px; + padding-right: 0; /* LTR */ +} +[dir="rtl"] form .field-multiple-table .field-multiple-drag { + padding-left: 0; +} +form .field-multiple-table .field-multiple-drag .tabledrag-handle { + padding-right: 0.5em; /* LTR */ +} +[dir="rtl"] form .field-multiple-table .field-multiple-drag .tabledrag-handle { + padding-right: 0; + padding-left: 0.5em; +} +form .field-add-more-submit { + margin: 0.5em 0 0; +} + +/** + * Markup generated by Form API. + */ +.form-item, +.form-actions { + margin-top: 1em; + margin-bottom: 1em; +} +tr.odd .form-item, +tr.even .form-item { + margin-top: 0; + margin-bottom: 0; +} +.form-composite > .fieldset-wrapper > .description, +.form-item .description { + font-size: 0.85em; +} +label.option { + display: inline; + font-weight: normal; +} +.form-composite > legend, +.label { + display: inline; + margin: 0; + padding: 0; + font-size: inherit; + font-weight: bold; +} +.form-checkboxes .form-item, +.form-radios .form-item { + margin-top: 0.4em; + margin-bottom: 0.4em; +} +.form-type-radio .description, +.form-type-checkbox .description { + margin-left: 2.4em; /* LTR */ +} +[dir="rtl"] .form-type-radio .description, +[dir="rtl"] .form-type-checkbox .description { + margin-right: 2.4em; + margin-left: 0; +} +.marker { + color: #e00; +} +.form-required:after { + display: inline-block; + width: 6px; + height: 6px; + margin: 0 0.3em; + content: ""; + vertical-align: super; + /* Use a background image to prevent screen readers from announcing the text. */ + background-image: url(../../../../../misc/icons/ee0000/required.svg); + background-repeat: no-repeat; + background-size: 6px 6px; +} +abbr.tabledrag-changed, +abbr.ajax-changed { + border-bottom: none; +} +.form-item input.error, +.form-item textarea.error, +.form-item select.error { + border: 2px solid red; +} + +/* Inline error messages. */ +.form-item--error-message:before { + display: inline-block; + width: 14px; + height: 14px; + content: ""; + vertical-align: sub; + background: url(../../../../../misc/icons/e32700/error.svg) no-repeat; + background-size: contain; +} diff --git a/css/classy/components/forum.css b/css/classy/components/forum.css new file mode 100644 index 0000000..c35e3f4 --- /dev/null +++ b/css/classy/components/forum.css @@ -0,0 +1,46 @@ +/** + * @file + * Styling for the Forum module. + */ + +.forum__description { + margin: 0.5em; + font-size: 0.9em; +} +.forum__icon { + float: left; /* LTR */ + width: 24px; + height: 24px; + margin: 0 9px 0 0; /* LTR */ + background-image: url(../../../images/classy/icons/forum-icons.png); + background-repeat: no-repeat; +} +[dir="rtl"] .forum__icon { + float: right; + margin: 0 0 0 9px; +} +.forum__title { + overflow: hidden; +} +.forum .indented { + margin-left: 20px; /* LTR */ +} +[dir="rtl"] .forum .indented { + margin-right: 20px; + margin-left: 0; +} +.forum__topic-status--new { + background-position: -24px 0; +} +.forum__topic-status--hot { + background-position: -48px 0; +} +.forum__topic-status--hot-new { + background-position: -72px 0; +} +.forum__topic-status--sticky { + background-position: -96px 0; +} +.forum__topic-status--closed { + background-position: -120px 0; +} diff --git a/css/classy/components/icons.css b/css/classy/components/icons.css new file mode 100644 index 0000000..ab0245f --- /dev/null +++ b/css/classy/components/icons.css @@ -0,0 +1,21 @@ +/** + * @file + * Visual styles for icons. + */ + +.icon-help { + padding: 1px 0 1px 20px; /* LTR */ + background: url(../../../../../misc/help.png) 0 50% no-repeat; /* LTR */ +} +[dir="rtl"] .icon-help { + padding: 1px 20px 1px 0; + background-position: 100% 50%; +} +.feed-icon { + display: block; + overflow: hidden; + width: 16px; + height: 16px; + text-indent: -9999px; + background: url(../../../../../misc/feed.svg) no-repeat; +} diff --git a/css/classy/components/image-widget.css b/css/classy/components/image-widget.css new file mode 100644 index 0000000..56777c4 --- /dev/null +++ b/css/classy/components/image-widget.css @@ -0,0 +1,33 @@ +/** + * @file + * Image upload widget. + * + * This CSS file is not used in this theme (Classy). It was intended to be used, + * but due to a bug, Drupal 8 shipped with it not being used. To not break + * backwards compatibility, we continue to not load it in Classy. Every + * subtheme of Classy is encouraged to use it, by attaching the + * classy/image-widget asset library in their image-widget.html.twig file. + * + * @see core/themes/seven/templates/content-edit/image-widget.html.twig. + * + * @todo In Drupal 9, let core/themes/classy/templates/content-edit/image-widget.html.twig + * attach the classy/image-widget asset library. + */ + +.image-preview { + float: left; /* LTR */ + padding: 0 10px 10px 0; /* LTR */ +} +[dir="rtl"] .image-preview { + float: right; + padding: 0 0 10px 10px; +} +.image-widget-data { + float: left; /* LTR */ +} +[dir="rtl"] .image-widget-data { + float: right; +} +.image-widget-data .text-field { + width: auto; +} diff --git a/css/classy/components/indented.css b/css/classy/components/indented.css new file mode 100644 index 0000000..6925a06 --- /dev/null +++ b/css/classy/components/indented.css @@ -0,0 +1,16 @@ + +/** + * @file + * Basic styling for comment module. + */ + +/** + * Indent threaded comments. + */ +.indented { + margin-left: 25px; /* LTR */ +} +[dir="rtl"] .indented { + margin-right: 25px; + margin-left: 0; +} diff --git a/css/classy/components/inline-form.css b/css/classy/components/inline-form.css new file mode 100644 index 0000000..b5201a7 --- /dev/null +++ b/css/classy/components/inline-form.css @@ -0,0 +1,33 @@ +/** + * @file + * Visual styles for inline forms. + */ + +.form--inline .form-item { + float: left; /* LTR */ + margin-right: 0.5em; /* LTR */ +} +[dir="rtl"] .form--inline .form-item { + float: right; + margin-right: 0; + margin-left: 0.5em; +} +/* This is required to win over specificity of [dir="rtl"] .form--inline .form-item */ +[dir="rtl"] .views-filterable-options-controls .form-item { + margin-right: 2%; +} +.form--inline .form-item-separator { + margin-top: 2.3em; + margin-right: 1em; /* LTR */ + margin-left: 0.5em; /* LTR */ +} +[dir="rtl"] .form--inline .form-item-separator { + margin-right: 0.5em; + margin-left: 1em; +} +.form--inline .form-actions { + clear: left; /* LTR */ +} +[dir="rtl"] .form--inline .form-actions { + clear: right; +} diff --git a/css/classy/components/item-list.css b/css/classy/components/item-list.css new file mode 100644 index 0000000..a8ce5d2 --- /dev/null +++ b/css/classy/components/item-list.css @@ -0,0 +1,32 @@ +/** + * @file + * Visual styles for item list. + */ + +.item-list .title { + font-weight: bold; +} +.item-list ul { + margin: 0 0 0.75em 0; + padding: 0; +} +.item-list li { + margin: 0 0 0.25em 1.5em; /* LTR */ + padding: 0; +} +[dir="rtl"] .item-list li { + margin: 0 1.5em 0.25em 0; +} + +/** + * Comma separated lists. + */ +.item-list--comma-list { + display: inline; +} +.item-list--comma-list .item-list__comma-list, +.item-list__comma-list li, +[dir="rtl"] .item-list--comma-list .item-list__comma-list, +[dir="rtl"] .item-list__comma-list li { + margin: 0; +} diff --git a/css/classy/components/link.css b/css/classy/components/link.css new file mode 100644 index 0000000..fa83f2b --- /dev/null +++ b/css/classy/components/link.css @@ -0,0 +1,16 @@ +/** + * @file + * Style another element as a link. + */ + +button.link { + margin: 0; + padding: 0; + cursor: pointer; + border: 0; + background: transparent; + font-size: 1em; +} +label button.link { + font-weight: bold; +} diff --git a/css/classy/components/links.css b/css/classy/components/links.css new file mode 100644 index 0000000..e483253 --- /dev/null +++ b/css/classy/components/links.css @@ -0,0 +1,23 @@ +/** + * @file + * Visual styles for links. + */ + +ul.inline, +ul.links.inline { + display: inline; + padding-left: 0; /* LTR */ +} +[dir="rtl"] ul.inline, +[dir="rtl"] ul.links.inline { + padding-right: 0; + padding-left: 15px; +} +ul.inline li { + display: inline; + padding: 0 0.5em; + list-style-type: none; +} +ul.links a.is-active { + color: #000; +} diff --git a/css/classy/components/media-embed-error.css b/css/classy/components/media-embed-error.css new file mode 100644 index 0000000..edb3ab2 --- /dev/null +++ b/css/classy/components/media-embed-error.css @@ -0,0 +1,20 @@ +/** + * @file + * Media Embed filter: default styling for media embed errors. + */ + +/** + * The caption filter's styling overrides ours, so add a more specific selector + * to account for that. + */ +.media-embed-error, +.caption > .media-embed-error { + max-width: 200px; + padding: 100px 20px 20px; + text-align: center; + background-color: #ebebeb; + background-image: url(../../../../../modules/media/images/icons/no-thumbnail.png); + background-repeat: no-repeat; + background-position: center top; + background-size: 100px 100px; +} diff --git a/css/classy/components/menu.css b/css/classy/components/menu.css new file mode 100644 index 0000000..80d3e14 --- /dev/null +++ b/css/classy/components/menu.css @@ -0,0 +1,34 @@ +/** + * @file + * Visual styles for menu. + */ + +ul.menu { + margin-left: 1em; /* LTR */ + padding: 0; + list-style: none outside; + text-align: left; /* LTR */ +} +[dir="rtl"] ul.menu { + margin-right: 1em; + margin-left: 0; + text-align: right; +} +.menu-item--expanded { + list-style-type: circle; + list-style-image: url(../../../../../misc/menu-expanded.png); +} +.menu-item--collapsed { + list-style-type: disc; + list-style-image: url(../../../../../misc/menu-collapsed.png); /* LTR */ +} +[dir="rtl"] .menu-item--collapsed { + list-style-image: url(../../../../../misc/menu-collapsed-rtl.png); +} +.menu-item { + margin: 0; + padding-top: 0.2em; +} +ul.menu a.is-active { + color: #000; +} diff --git a/css/classy/components/messages.css b/css/classy/components/messages.css new file mode 100644 index 0000000..4745946 --- /dev/null +++ b/css/classy/components/messages.css @@ -0,0 +1,72 @@ +/** + * @file + * Styles for system messages. + */ + +.messages { + padding: 15px 20px 15px 35px; /* LTR */ + word-wrap: break-word; + border: 1px solid; + border-width: 1px 1px 1px 0; /* LTR */ + border-radius: 2px; + background: no-repeat 10px 17px; /* LTR */ + overflow-wrap: break-word; +} +[dir="rtl"] .messages { + padding-right: 35px; + padding-left: 20px; + text-align: right; + border-width: 1px 0 1px 1px; + background-position: right 10px top 17px; +} +.messages + .messages { + margin-top: 1.538em; +} +.messages__list { + margin: 0; + padding: 0; + list-style: none; +} +.messages__item + .messages__item { + margin-top: 0.769em; +} +/* See .color-success in Seven's colors.css */ +.messages--status { + color: #325e1c; + border-color: #c9e1bd #c9e1bd #c9e1bd transparent; /* LTR */ + background-color: #f3faef; + background-image: url(../../../../../misc/icons/73b355/check.svg); + box-shadow: -8px 0 0 #77b259; /* LTR */ +} +[dir="rtl"] .messages--status { + margin-left: 0; + border-color: #c9e1bd transparent #c9e1bd #c9e1bd; + box-shadow: 8px 0 0 #77b259; +} +/* See .color-warning in Seven's colors.css */ +.messages--warning { + color: #734c00; + border-color: #f4daa6 #f4daa6 #f4daa6 transparent; /* LTR */ + background-color: #fdf8ed; + background-image: url(../../../../../misc/icons/e29700/warning.svg); + box-shadow: -8px 0 0 #e09600; /* LTR */ +} +[dir="rtl"] .messages--warning { + border-color: #f4daa6 transparent #f4daa6 #f4daa6; + box-shadow: 8px 0 0 #e09600; +} +/* See .color-error in Seven's colors.css */ +.messages--error { + color: #a51b00; + border-color: #f9c9bf #f9c9bf #f9c9bf transparent; /* LTR */ + background-color: #fcf4f2; + background-image: url(../../../../../misc/icons/e32700/error.svg); + box-shadow: -8px 0 0 #e62600; /* LTR */ +} +[dir="rtl"] .messages--error { + border-color: #f9c9bf transparent #f9c9bf #f9c9bf; + box-shadow: 8px 0 0 #e62600; +} +.messages--error p.error { + color: #a51b00; +} diff --git a/css/classy/components/more-link.css b/css/classy/components/more-link.css new file mode 100644 index 0000000..c604061 --- /dev/null +++ b/css/classy/components/more-link.css @@ -0,0 +1,12 @@ +/** + * @file + * Markup generated by #type 'more_link'. + */ + +.more-link { + display: block; + text-align: right; /* LTR */ +} +[dir="rtl"] .more-link { + text-align: left; +} diff --git a/css/classy/components/node.css b/css/classy/components/node.css new file mode 100644 index 0000000..6b7cd52 --- /dev/null +++ b/css/classy/components/node.css @@ -0,0 +1,8 @@ +/** + * @file + * Visual styles for nodes. + */ + +.node--unpublished { + background-color: #fff4f4; +} diff --git a/css/classy/components/pager.css b/css/classy/components/pager.css new file mode 100644 index 0000000..a9471fc --- /dev/null +++ b/css/classy/components/pager.css @@ -0,0 +1,16 @@ +/** + * @file + * Visual styles for pager. + */ + +.pager__items { + clear: both; + text-align: center; +} +.pager__item { + display: inline; + padding: 0.5em; +} +.pager__item.is-active { + font-weight: bold; +} diff --git a/css/classy/components/progress.css b/css/classy/components/progress.css new file mode 100644 index 0000000..47da889 --- /dev/null +++ b/css/classy/components/progress.css @@ -0,0 +1,69 @@ +/** + * @file + * Visual styles for progress bar. + * + * @see progress.js + */ + +.progress__track { + border-color: #b3b3b3; + border-radius: 10em; + background-color: #f2f1eb; + background-image: -webkit-linear-gradient(#e7e7df, #f0f0f0); + background-image: linear-gradient(#e7e7df, #f0f0f0); + box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.16); +} +.progress__bar { + height: 16px; + margin-top: -1px; + margin-left: -1px; /* LTR */ + padding: 0 1px; + -webkit-transition: width 0.5s ease-out; + transition: width 0.5s ease-out; + -webkit-animation: animate-stripes 3s linear infinite; + -moz-animation: animate-stripes 3s linear infinite; + border: 1px #07629a solid; + border-radius: 10em; + background: #057ec9; + background-image: + -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)), + -webkit-linear-gradient(left top, #0094f0 0%, #0094f0 25%, #007ecc 25%, #007ecc 50%, #0094f0 50%, #0094f0 75%, #0094f0 100%); + background-image: + linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)), + linear-gradient(to right bottom, #0094f0 0%, #0094f0 25%, #007ecc 25%, #007ecc 50%, #0094f0 50%, #0094f0 75%, #0094f0 100%); + background-size: 40px 40px; +} +[dir="rtl"] .progress__bar { + margin-right: -1px; + margin-left: 0; + -webkit-animation-direction: reverse; + -moz-animation-direction: reverse; + animation-direction: reverse; +} + +@media screen and (prefers-reduced-motion: reduce) { + .progress__bar { + -webkit-transition: none; + transition: none; + -webkit-animation: none; + -moz-animation: none; + } +} + +/** + * Progress bar animations. + */ +@-webkit-keyframes animate-stripes { + 0% { background-position: 0 0, 0 0; } + 100% { background-position: 0 0, -80px 0; } +} + +@-ms-keyframes animate-stripes { + 0% { background-position: 0 0, 0 0; } + 100% { background-position: 0 0, -80px 0; } +} + +@keyframes animate-stripes { + 0% { background-position: 0 0, 0 0; } + 100% { background-position: 0 0, -80px 0; } +} diff --git a/css/classy/components/search-results.css b/css/classy/components/search-results.css new file mode 100644 index 0000000..343ea8b --- /dev/null +++ b/css/classy/components/search-results.css @@ -0,0 +1,8 @@ +/** + * @file + * Stylesheet for results generated by the Search module. + */ + +.search-results { + list-style: none; +} diff --git a/css/classy/components/tabledrag.css b/css/classy/components/tabledrag.css new file mode 100644 index 0000000..a197b24 --- /dev/null +++ b/css/classy/components/tabledrag.css @@ -0,0 +1,14 @@ +/** + * @file + * Visual styles for table drag. + */ + +tr.drag { + background-color: #fffff0; +} +tr.drag-previous { + background-color: #ffd; +} +body div.tabledrag-changed-warning { + margin-bottom: 0.5em; +} diff --git a/css/classy/components/tableselect.css b/css/classy/components/tableselect.css new file mode 100644 index 0000000..fcfb2a5 --- /dev/null +++ b/css/classy/components/tableselect.css @@ -0,0 +1,19 @@ +/** + * @file + * Table select behavior. + * + * @see tableselect.js + */ + +tr.selected td { + background: #ffc; +} +td.checkbox, +th.checkbox { + text-align: center; +} +[dir="rtl"] td.checkbox, +[dir="rtl"] th.checkbox { + /* This is required to win over specificity of [dir="rtl"] td */ + text-align: center; +} diff --git a/css/classy/components/tablesort.css b/css/classy/components/tablesort.css new file mode 100644 index 0000000..44e5349 --- /dev/null +++ b/css/classy/components/tablesort.css @@ -0,0 +1,11 @@ +/** + * @file + * Table sort indicator. + */ + +th.is-active img { + display: inline; +} +td.is-active { + background-color: #ddd; +} diff --git a/css/classy/components/tabs.css b/css/classy/components/tabs.css new file mode 100644 index 0000000..16fb122 --- /dev/null +++ b/css/classy/components/tabs.css @@ -0,0 +1,33 @@ +/** + * @file + * Visual styles for tabs. + */ + +div.tabs { + margin: 1em 0; +} +ul.tabs { + margin: 0 0 0.5em; + padding: 0; + list-style: none; +} +.tabs > li { + display: inline-block; + margin-right: 0.3em; /* LTR */ +} +[dir="rtl"] .tabs > li { + margin-right: 0; + margin-left: 0.3em; +} +.tabs a { + display: block; + padding: 0.2em 1em; + text-decoration: none; +} +.tabs a.is-active { + background-color: #eee; +} +.tabs a:focus, +.tabs a:hover { + background-color: #f5f5f5; +} diff --git a/css/classy/components/textarea.css b/css/classy/components/textarea.css new file mode 100644 index 0000000..2661bae --- /dev/null +++ b/css/classy/components/textarea.css @@ -0,0 +1,11 @@ +/** + * @file + * Visual styles for a resizable textarea. + */ + +.form-textarea-wrapper textarea { + display: block; + box-sizing: border-box; + width: 100%; + margin: 0; +} diff --git a/css/classy/components/ui-dialog.css b/css/classy/components/ui-dialog.css new file mode 100644 index 0000000..476c21f --- /dev/null +++ b/css/classy/components/ui-dialog.css @@ -0,0 +1,15 @@ +/** + * @file + * Styles for Classy's modal windows. + */ + +.ui-dialog--narrow { + max-width: 500px; +} + +@media screen and (max-width: 600px) { + .ui-dialog--narrow { + min-width: 95%; + max-width: 95%; + } +} diff --git a/css/classy/layout/media-library.css b/css/classy/layout/media-library.css new file mode 100644 index 0000000..84dee10 --- /dev/null +++ b/css/classy/layout/media-library.css @@ -0,0 +1,28 @@ +/** + * @file + * Contains minimal layout styling for the media library. + */ + +.media-library-wrapper { + display: flex; +} + +.media-library-menu { + flex-basis: 20%; + flex-shrink: 0; +} + +.media-library-content { + flex-grow: 1; +} + +.media-library-views-form { + display: flex; + flex-wrap: wrap; +} + +.media-library-views-form .media-library-item { + justify-content: space-between; + max-width: 23%; + margin: 1%; +} diff --git a/gulpfile.js b/gulpfile.js index c45dc44..29fd92f 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -15,7 +15,7 @@ sass.compiler = require('node-sass'); function styleLint() { const configFile = jsYaml.safeLoad(fs.readFileSync('.sass-lint.yml', 'utf-8')); return gulp - .src('scss/**/*.s+(a|c)ss') + .src(['scss/**/*.s+(a|c)ss', '!scss/components/_dialog.scss', '!scss/base/elements.scss']) .pipe(sassLint(configFile)) .pipe(sassLint.format()) .pipe(sassLint.failOnError()) diff --git a/images/classy/README.txt b/images/classy/README.txt new file mode 100644 index 0000000..9df44f5 --- /dev/null +++ b/images/classy/README.txt @@ -0,0 +1,12 @@ +WHAT IS THIS DIRECTORY FOR? +-------------------------------- +This directory is for image files previously inherited from the Classy theme. + +WHY ARE CLASSY IMAGE FILES BEING COPIED HERE? +------------------------------------------- +Classy will be deprecated during the Drupal 9 lifecycle. To prepare for Classy's +removal, image files that would otherwise be inherited from Classy are copied +here. + +Image files that differ from the Classy versions should not be placed in this +directory or any subdirectory. diff --git a/images/classy/icons/application-octet-stream.png b/images/classy/icons/application-octet-stream.png new file mode 100644 index 0000000000000000000000000000000000000000..d5453217dc5cc30e805d3d0da8fa91e5a0684b86 GIT binary patch literal 189 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!60wlNoGJgf6BuiW)N`mv#O3D+9QW+dm@{>{( zJaZG%Q-e|yQz{EjrrH1%#e2FqhG+zzJ-d;!!9l>~;>xRRItLPdn;40odGgNTFWaMo z@1hz$UuIWs>A8|(q_~9L#B04>N(sX=If;bjynH&g_hvsjaH~4qVneIY4QI|P0Zi^1 ljW)lfGh!A#J6O(fSJQPye(j97H9)HvJYD@<);T3K0RUpoL@EFP literal 0 HcmV?d00001 diff --git a/images/classy/icons/application-pdf.png b/images/classy/icons/application-pdf.png new file mode 100644 index 0000000000000000000000000000000000000000..36107d6e804015e13d122c53cb035d33632678d2 GIT binary patch literal 346 zcmV-g0j2(lP)La-N5`rLZPA(1#E-uBP;35>7mbRp6V}6(B zxT4lv`iCzikbIyi{Q#h{EDII-mgRekb58(c43yGRNs>GwUs@m^+qO%|$q)WL@3K!V z;5g1}1@I8n0(zm5zgL_2`K;FIZug6JyK<450fiioh$j<32(aZc2h>-%U#~`>7&@PWUoHyp sTP;<(-4=lMXA(mEo7|%ZD)t2Y023%F88v7N^Z)<=07*qoM6N<$f}Na{Gynhq literal 0 HcmV?d00001 diff --git a/images/classy/icons/application-x-executable.png b/images/classy/icons/application-x-executable.png new file mode 100644 index 0000000000000000000000000000000000000000..d5453217dc5cc30e805d3d0da8fa91e5a0684b86 GIT binary patch literal 189 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!60wlNoGJgf6BuiW)N`mv#O3D+9QW+dm@{>{( zJaZG%Q-e|yQz{EjrrH1%#e2FqhG+zzJ-d;!!9l>~;>xRRItLPdn;40odGgNTFWaMo z@1hz$UuIWs>A8|(q_~9L#B04>N(sX=If;bjynH&g_hvsjaH~4qVneIY4QI|P0Zi^1 ljW)lfGh!A#J6O(fSJQPye(j97H9)HvJYD@<);T3K0RUpoL@EFP literal 0 HcmV?d00001 diff --git a/images/classy/icons/audio-x-generic.png b/images/classy/icons/audio-x-generic.png new file mode 100644 index 0000000000000000000000000000000000000000..28d7f50862b5dbb153c0809e9119fd879d499788 GIT binary patch literal 314 zcmV-A0mc4_P)5%T71{KX7x!|A(({5NE)j zKYzd&q!`9V79(f?48Rm)6QjQYVbB1LUL;A_0Q3+Cf#UU6|05QN{GWC>hp+*`b9w(~ ztkn8{>(wc^0e}Af`v3jc=l}oy{l#wpC^P;0_YW@ysljOgDHx^?00QtBn;M+ki2wiq M07*qoM6N<$f-Y{2(f|Me literal 0 HcmV?d00001 diff --git a/images/classy/icons/forum-icons.png b/images/classy/icons/forum-icons.png new file mode 100644 index 0000000000000000000000000000000000000000..e291de672522d40458ed4b6fc15f58372c778afa GIT binary patch literal 1765 zcmZ8hc~H`67^XBeOsyuXH8V3avrM*Zl1)5HN>@uOkM7AMk5V_o146}8V@o$|)i7Pd z!j{U?)HQbUz%(PVusk!sTk!%fJWzyvXMZ#M$G$Usyx;Ra&+|Rs@5gY*e>v;i80 zLg~0TJDr5@H27@PQiIimoMeweEnnv0=81=`N~K~j7`3&vF)=ZvrKMCV6}Cl1Md|73 z&;Y_>v7j$6F9#4-0D%KNtT{P3DJdyPPp8wN0X`VQXmN278sO7tG;n|s2$@VKNZ4#P z5Wo`(n*S9Dkt4tvdXOXjU;^f#1y8_11r4kS0c^nyG9YfC1srIA&&|!jxgbZh2nWaz z4?rM*1i1xBpa%pvNH)Y1Xn+F} zCyK@5>FH^>J2*g24u{j&*a%?|XUN&t*Ec#k8tHLP2|t3=$dkuUp_VOIQ(Lh@Lvtk> zt*x!CtE;QGW}Uu)p)u5U3k!=~yZ7wDV1BedfWL>B zNGD`7v-9%{i;D_{VrfaKREjgwv`{E@O&2FePvXV0`^oH0_;u6`KZl$`TaGmKN~Ia= ztxgK>>IX-#eeykG16nWmjTiOvMfFm%oc`**iGe>VrmN(VU!;Q;I-A&Gf@hIwN@0w> zjdqFO|1j^<_3Hi3b*A=vF1196{1bdGng@++72EBTaGjd13zIvzLkEcs zQ+_Vd_wrMX)gI1iP1`0Cr+PhwFF3HY8NYM2fA& z+t#KoU@>NDH@#=5rb*Q11dk4N9FJrg?4I6h7aM;<65$k{eImeY>ASyol}|d|GK;GD zqT+qc(-j#v48&fY5ii7+npOC%GV@XIP=(%#Sd5<{dhD&fHg3eGX^4o)kDK5)7&Q}3 z?Xr$qX}SsI`o$(U89p!9@(bbzeer_^^MqLAkf$_vvBmVl~VY58k0TC-y zPH@<|bAxR?$Fi~|J$5;+yzXwAjb_R3gzzV<+uFW{&!UR1=l*#j^!Z9R0!ub!?8q=> z=JJvgzaNkX(`D6>Mr7-I>KJ#%!&?`+-(5LhGh&3tPOagKTK`JkED>QE5B8Vo@D{pW zVM*{TMoTn(G49TZTHgdj?qI^1IaDS6-8X9~Ywa9O(v&0A4N^>I2Ynu-W(Enzh#lL^ zr<1Ux4@~D-g5!gp;ruOFdHu&!6#usfbVltX*&!zFYeBbFccK?-w(rB$?hUhA)<%WjXBi&3H1-q$G+$ZRko$BtMWhbNrU9&7A}G(gUkHXI&(&QNA>brE{+x>kFbN zbY`LIJm>0j&RATrK|tnnD^bb&qNkjOl|F`*!Z|6<=A}2YDyH=$=eDvef~TWrr;<>~ jQqJ4<$wn8>5v2ycdvDNFC&>@3L6hucw#aRRw7eSoFNmQtbU{mn3 zG)bWvQA}=a@|t^w&{~q{frt0-Cij6$A^;#HNx~n<`Uo5VM1z1a2HUoqa2%&zG8-!3 zQ$Fi&f{(mN&$+<$nGO|v-Y>&tI*0bR>mlk_mKv^NhYGy!3Xfp_$dBUJkR)7CBSEm+ z&tvt(3u@Myf6#wou4^f%sv0f8 z*HjeoSE!n4RLf~FV*++@oRT_|x_E(p+6OB)jCW;(vT`wi(n&A<53g5)@q(wrBp&v= zpzVk#>~-StpqsjvqZDPVASbuub|ZoOwg_!k#NB2GZdR#-x}Jy^TxQ#%h!!x$=sQP1 f?}Q5eK_K`6d{( zJaZG%Q-e|yQz{EjrrH1%E%S774ABVg?Kk8*WFWxuer-(yd%zv$fH&S%}%zr56N`Hooj};y7~CyD5-EIZ$Ti#TlGiAKrWr zUu>K2@!d{$zmi_R^=IcFiyv;gVvwM;GSR3l=7-;%YNpF=9hs+p|Ck1JF@vY8pUXO@ GgeCy8++)N5 literal 0 HcmV?d00001 diff --git a/images/classy/icons/text-html.png b/images/classy/icons/text-html.png new file mode 100644 index 0000000000000000000000000000000000000000..9c7c7932c25ad93adc9c9e6962d984d1703cd17f GIT binary patch literal 265 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`7d%}YLn?0dPCn1oYpr_l6|v$g!-?M+tzwem(bxqx`p9mQA+2tMA_+XME>nQ%bo@!}(>I4c6S;asB4{>%yglS|#6Y z5Uy)3sXwGNKj!eva0TWHDFLV02B&~;yBsuQ8|JUfy)AI#BlodKT>FxH4HmB4HXGzc N22WQ%mvv4FO#pgZX`cW9 literal 0 HcmV?d00001 diff --git a/images/classy/icons/text-plain.png b/images/classy/icons/text-plain.png new file mode 100644 index 0000000000000000000000000000000000000000..06804849b8331ed8be3d1ae089311ae58ea79c83 GIT binary patch literal 220 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!60wlNoGJgf6BuiW)N`mv#O3D+9QW+dm@{>{( zJaZG%Q-e|yQz{EjrrH1%)p@!&hG+y&?K{ZXV8G*Qyqephp*`o3)VoI~yA?RN7G071 zlASBP=H*eFjEv7eG#edwT#p`klJw&vJA1DcCF&6fEwgh&R?%&s{ zX3)B>#qoyRCeH3BDMHWqy{( zJaZG%Q-e|yQz{EjrrH1%)p@!&hG+y&?K{ZXV8G*Qyqephp*`o3)VoI~yA?RN7G071 zlASBP=H*eFjEv7eG#edwT#p`klJw&vJA1DcCF&6fEwgh&R?%&s{ zX3)B>#qoyRCeH3BDMHWqy{( zJaZG%Q-e|yQz{EjrrH1%Rd~8MhG?9hI>C^S$&iQTZ$24Q_1|1vj(@wU*2iN@EyC7x_*Z;E$EtTTO(#;cD9cA8~Z#ce1>0B1j4Gf;H KelF{r5}E*g{z{zy literal 0 HcmV?d00001 diff --git a/images/classy/icons/x-office-document.png b/images/classy/icons/x-office-document.png new file mode 100644 index 0000000000000000000000000000000000000000..40db538fcb71e1f46147a717cdf7134c4e74a239 GIT binary patch literal 196 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`-JULvAr-f-PIlyCR^)ND&DOv0 zRA<)*E4jtr1@CkUUb(^(64aDzym=OXf6k=i_m3z%>f0*z|H0LTcMHEOpRi2!@?>C$ z`80=1Bdwad>ct1^?B|7U2RwrtzsDUgN(pW(&J%E2aPlH&QV-Kq28MN}8cR7snxaU19foyFkk>gTe~DWM4f@k31# literal 0 HcmV?d00001 diff --git a/images/classy/icons/x-office-presentation.png b/images/classy/icons/x-office-presentation.png new file mode 100644 index 0000000000000000000000000000000000000000..fb119e5ba91dd5141e07aad5229754cd06401c99 GIT binary patch literal 181 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`HJ&bxAr-ftPCm%hpup2sdo6B3 zamj~9)_g=N=}tt*d2P=kD~`cESoNx@a=l5_Qo_IANDkK;`k3KG}0GMXI`*i$b2WRBvo8xw*i zO$rqacvhQr;DXY8_Dwc|9*eX-+%rG1!AI2Mc~uXm6NkyC*mL@(8cS>LFnm7E_Gf0+ hTH6=BdJ?W&er*c!pDfOvX9v23!PC{xWt~$(696`_L`MJs literal 0 HcmV?d00001 diff --git a/js/classy/README.txt b/js/classy/README.txt new file mode 100644 index 0000000..efa01cf --- /dev/null +++ b/js/classy/README.txt @@ -0,0 +1,12 @@ +WHAT IS THIS DIRECTORY FOR? +-------------------------------- +This directory is for JS files previously inherited from the Classy theme. + +WHY ARE CLASSY JS FILES BEING COPIED HERE? +------------------------------------------- +Classy will be deprecated during the Drupal 9 lifecycle. To prepare for Classy's +removal, JS files that would otherwise be inherited from Classy are copied +here. + +JS files that differ from the Classy versions should not be placed in this +directory or any subdirectory. diff --git a/js/classy/media_embed_ckeditor.theme.es6.js b/js/classy/media_embed_ckeditor.theme.es6.js new file mode 100644 index 0000000..a33d18f --- /dev/null +++ b/js/classy/media_embed_ckeditor.theme.es6.js @@ -0,0 +1,22 @@ +/** + * @file + * Classy theme overrides for the Media Embed CKEditor plugin. + */ + +((Drupal) => { + /** + * Themes the error displayed when the media embed preview fails. + * + * @param {string} error + * The error message to display + * + * @return {string} + * A string representing a DOM fragment. + * + * @see media-embed-error.html.twig + */ + Drupal.theme.mediaEmbedPreviewError = () => + `
${Drupal.t( + 'An error occurred while trying to preview the media. Please save your work and reload this page.', + )}
`; +})(Drupal); diff --git a/js/classy/media_embed_ckeditor.theme.js b/js/classy/media_embed_ckeditor.theme.js new file mode 100644 index 0000000..0b9d959 --- /dev/null +++ b/js/classy/media_embed_ckeditor.theme.js @@ -0,0 +1,12 @@ +/** +* DO NOT EDIT THIS FILE. +* See the following change record for more information, +* https://www.drupal.org/node/2815083 +* @preserve +**/ + +(function (Drupal) { + Drupal.theme.mediaEmbedPreviewError = function () { + return "
".concat(Drupal.t('An error occurred while trying to preview the media. Please save your work and reload this page.'), "
"); + }; +})(Drupal); \ No newline at end of file diff --git a/lark.libraries.yml b/lark.libraries.yml index d33a246..1175e14 100644 --- a/lark.libraries.yml +++ b/lark.libraries.yml @@ -4,6 +4,100 @@ global-styling: theme: '//fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap:': { type: external, minified: true } css/main.css: {} + component: + css/classy/components/action-links.css: { } + css/classy/components/breadcrumb.css: { } + css/classy/components/button.css: { } + css/classy/components/collapse-processed.css: { } + css/classy/components/container-inline.css: { } + css/classy/components/exposed-filters.css: { } + css/classy/components/field.css: { } + css/classy/components/form.css: { } + css/classy/components/icons.css: { } + css/classy/components/inline-form.css: { } + css/classy/components/item-list.css: { } + css/classy/components/link.css: { } + css/classy/components/links.css: { } + css/classy/components/menu.css: { } + css/classy/components/more-link.css: { } + css/classy/components/pager.css: { } + css/classy/components/tabledrag.css: { } + css/classy/components/tableselect.css: { } + css/classy/components/tablesort.css: { } + css/classy/components/tabs.css: { } + css/classy/components/textarea.css: { } + css/classy/components/ui-dialog.css: { } js: js/sidebar-menu.js: {} js/user-menu.js: {} + +classy.book-navigation: + version: VERSION + css: + component: + css/classy/components/book-navigation.css: {} + +classy.dropbutton: + version: VERSION + css: + component: + css/classy/components/dropbutton.css: { weight: -10 } + +classy.file: + version: VERSION + css: + component: + css/classy/components/file.css: { weight: -10 } + +classy.forum: + version: VERSION + css: + component: + css/classy/components/forum.css: { weight: -10 } + +classy.image-widget: + version: VERSION + css: + component: + css/classy/components/image-widget.css: {} + +classy.indented: + version: VERSION + css: + component: + css/classy/components/indented.css: {} + +classy.media_embed_ckeditor_theme: + version: VERSION + js: + js/classy/media_embed_ckeditor.theme.js: {} + +classy.media_embed_error: + version: VERSION + css: + component: + css/classy/components/media-embed-error.css: {} + +classy.messages: + version: VERSION + css: + component: + css/classy/components/messages.css: { weight: -10 } + +classy.node: + version: VERSION + css: + component: + css/classy/components/node.css: { weight: -10 } + +classy.progress: + version: VERSION + css: + component: + css/classy/components/progress.css: { weight: -10 } + +classy.search-results: + version: VERSION + css: + component: + css/classy/components/search-results.css: {} diff --git a/lark.theme b/lark.theme index c54d978..7eb2c23 100644 --- a/lark.theme +++ b/lark.theme @@ -1,5 +1,8 @@ getFormObject(); + if ($form_object instanceof ViewsForm && strpos($form_object->getBaseFormId(), 'views_form_media_library') === 0) { + if (isset($form['header'])) { + $form['header']['#attributes']['class'][] = 'media-library-views-form__header'; + $form['header']['media_bulk_form']['#attributes']['class'][] = 'media-library-views-form__bulk_form'; + } + $form['actions']['submit']['#attributes']['class'] = ['media-library-select']; + + // This conditional exists because the media-library-views-form class is + // currently added by Classy, but Seven will eventually not use Classy as a + // base theme. + // @todo remove conditional, keep class addition in + // https://drupal.org/node/3110137 + // @see https://www.drupal.org/node/3109287 + // @see classy_form_alter() + if (!isset($form['#attributes']['class']) || !in_array('media-library-views-form', $form['#attributes']['class'])) { + $form['#attributes']['class'][] = 'media-library-views-form'; + } + } + // Add after build to add a CSS class to the form actions. + if ($form_id === 'views_exposed_form' && strpos($form['#id'], 'views-exposed-form-media-library-widget') === 0) { + $form['actions']['#attributes']['class'][] = 'media-library-view--form-actions'; + } } /** @@ -125,16 +152,6 @@ function lark_form_alter(&$form, FormStateInterface $form_state, $form_id) { } $form['actions']['submit']['#attributes']['data-twig-suggestion'] = $form['#id']; - - // Valid admin path for nodes and media content. - $isAdminContentPath = substr($form['#action'], 0, 14) == '/admin/content' ? True : False; - - // Change Operations for Action in admin content form. - if ($isAdminContentPath and isset($form['output'][0]['#view']->field['operations'])) { - if ($form['output'][0]['#view']->field['operations']->options['label'] == 'Operations'){ - $form['output'][0]['#view']->field['operations']->options['label'] = 'Action'; - } - } } /** @@ -245,3 +262,196 @@ function lark_forms_attach_views_display_id(&$form, $views_display_id) { lark_forms_attach_views_display_id($form[$child], $views_display_id); } } + +/** + * Implements hook_views_pre_render(). + */ +function lark_views_pre_render(ViewExecutable $view) { + $add_classes = function (&$option, array $classes_to_add) { + $classes = preg_split('/\s+/', $option); + $classes = array_filter($classes); + $classes = array_merge($classes, $classes_to_add); + $option = implode(' ', array_unique($classes)); + }; + + if ($view->id() === 'media_library') { + if ($view->display_handler->options['defaults']['css_class']) { + $add_classes($view->displayHandlers->get('default')->options['css_class'], ['media-library-view']); + } + else { + $add_classes($view->display_handler->options['css_class'], ['media-library-view']); + } + + if ($view->current_display === 'page') { + if (array_key_exists('media_bulk_form', $view->field)) { + $add_classes($view->field['media_bulk_form']->options['element_class'], ['media-library-item__click-to-select-checkbox']); + } + if (array_key_exists('rendered_entity', $view->field)) { + $add_classes($view->field['rendered_entity']->options['element_class'], ['media-library-item__content']); + } + if (array_key_exists('edit_media', $view->field)) { + $add_classes($view->field['edit_media']->options['alter']['link_class'], ['media-library-item__edit']); + } + if (array_key_exists('delete_media', $view->field)) { + $add_classes($view->field['delete_media']->options['alter']['link_class'], ['media-library-item__remove']); + } + } + elseif (strpos($view->current_display, 'widget') === 0) { + if (array_key_exists('rendered_entity', $view->field)) { + $add_classes($view->field['rendered_entity']->options['element_class'], ['media-library-item__content']); + } + if (array_key_exists('media_library_select_form', $view->field)) { + $add_classes($view->field['media_library_select_form']->options['element_wrapper_class'], ['media-library-item__click-to-select-checkbox']); + } + + if ($view->display_handler->options['defaults']['css_class']) { + $add_classes($view->displayHandlers->get('default')->options['css_class'], ['media-library-view--widget']); + } + else { + $add_classes($view->display_handler->options['css_class'], ['media-library-view--widget']); + } + } + } +} + +/** + * Implements hook_preprocess_links__media_library_menu(). + * + * This targets the menu of available media types in the media library's modal + * dialog. + * + * @todo Do this in the relevant template once + * https://www.drupal.org/project/drupal/issues/3088856 is resolved. + * @todo revisit in https://drupal.org/node/3110132 + */ +function lark_preprocess_links__media_library_menu(array &$variables) { + foreach ($variables['links'] as &$link) { + // This conditional exists because the media-library-menu__link class is + // currently added by Classy, but Seven will eventually not use Classy as a + // base theme. + // @todo remove conditional, keep class addition in + // https://drupal.org/node/3110137 + // @see https://www.drupal.org/node/3109287 + // @see classy_preprocess_links__media_library_menu() + if (!isset($link['link']['#options']['attributes']['class']) || !in_array('media-library-menu__link', $link['link']['#options']['attributes']['class'])) { + $link['link']['#options']['attributes']['class'][] = 'media-library-menu__link'; + } + } +} + +/** + * @todo Remove this when https://www.drupal.org/project/drupal/issues/2999549 + * lands. + * + * @see \Drupal\media_library\Plugin\Field\FieldWidget\MediaLibraryWidget::formElement() + */ +function lark_preprocess_fieldset__media_library_widget(array &$variables) { + if (isset($variables['prefix']['weight_toggle'])) { + $variables['prefix']['weight_toggle']['#attributes']['class'][] = 'media-library-widget__toggle-weight'; + } + if (isset($variables['suffix']['open_button'])) { + $variables['suffix']['open_button']['#attributes']['class'][] = 'media-library-open-button'; + } +} + +/** + * Implements hook_preprocess_views_view_fields(). + * + * This targets each rendered media item in the grid display of the media + * library's modal dialog. + */ +function lark_preprocess_views_view_fields__media_library(array &$variables) { + // Add classes to media rendered entity field so it can be targeted for + // styling. Adding this class in a template is very difficult to do. + if (isset($variables['fields']['rendered_entity']->wrapper_attributes)) { + $variables['fields']['rendered_entity']->wrapper_attributes->addClass('media-library-item__click-to-select-trigger'); + } +} + + +/** + * Implements hook_form_BASE_FORM_ID_alter(). + */ +function lark_form_media_library_add_form_alter(array &$form, FormStateInterface $form_state) { + $form['#attributes']['class'][] = 'media-library-add-form'; + + // If there are unsaved media items, apply styling classes to various parts + // of the form. + if (isset($form['media'])) { + $form['#attributes']['class'][] = 'media-library-add-form--with-input'; + + // Put a wrapper around the informational message above the unsaved media + // items. + $form['description']['#template'] = '

{{ text }}

'; + } + else { + $form['#attributes']['class'][] = 'media-library-add-form--without-input'; + } +} + +/** + * Implements hook_form_FORM_ID_alter(). + */ +function lark_form_media_library_add_form_upload_alter(array &$form, FormStateInterface $form_state) { + $form['#attributes']['class'][] = 'media-library-add-form--upload'; + + if (isset($form['container'])) { + $form['container']['#attributes']['class'][] = 'media-library-add-form__input-wrapper'; + } +} + +/** + * Implements hook_form_FORM_ID_alter(). + */ +function lark_form_media_library_add_form_oembed_alter(array &$form, FormStateInterface $form_state) { + $form['#attributes']['class'][] = 'media-library-add-form--oembed'; + + // If no media items have been added yet, add a couple of styling classes + // to the initial URL form. + if (isset($form['container'])) { + $form['container']['#attributes']['class'][] = 'media-library-add-form__input-wrapper'; + $form['container']['url']['#attributes']['class'][] = 'media-library-add-form-oembed-url'; + $form['container']['submit']['#attributes']['class'][] = 'media-library-add-form-oembed-submit'; + } +} + +/** + * Implements hook_preprocess_item_list__media_library_add_form_media_list(). + * + * This targets each new, unsaved media item added to the media library, before + * they are saved. + */ +function lark_preprocess_item_list__media_library_add_form_media_list(array &$variables) { + foreach ($variables['items'] as &$item) { + $item['value']['preview']['#attributes']['class'][] = 'media-library-add-form__preview'; + $item['value']['fields']['#attributes']['class'][] = 'media-library-add-form__fields'; + $item['value']['remove_button']['#attributes']['class'][] = 'media-library-add-form__remove-button'; + + // #source_field_name is set by AddFormBase::buildEntityFormElement() + // to help themes and form_alter hooks identify the source field. + $fields = &$item['value']['fields']; + $source_field_name = $fields['#source_field_name']; + if (isset($fields[$source_field_name])) { + $fields[$source_field_name]['#attributes']['class'][] = 'media-library-add-form__source-field'; + } + } +} + +/** + * Implements hook_preprocess_media_library_item__widget(). + * + * This targets each media item selected in an entity reference field. + */ +function lark_preprocess_media_library_item__widget(array &$variables) { + $variables['content']['remove_button']['#attributes']['class'][] = 'media-library-item__remove'; +} + +/** + * Implements hook_preprocess_media_library_item__small(). + * + * This targets each pre-selected media item selected when adding new media in + * the modal media library dialog. + */ +function lark_preprocess_media_library_item__small(array &$variables) { + $variables['content']['select']['#attributes']['class'][] = 'media-library-item__click-to-select-checkbox'; +} diff --git a/scss/base/elements.scss b/scss/base/elements.scss new file mode 100644 index 0000000..7f0868f --- /dev/null +++ b/scss/base/elements.scss @@ -0,0 +1,182 @@ +/** + * Generic elements. + */ +body { + color: #333; + background: #fff; + font: normal 81.3%/1.538em "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", "Lucida Sans", sans-serif; +} +a, +.link { + text-decoration: none; + color: #0074bd; +} +a:hover, +.link:hover, +a:focus, +.link:focus { + text-decoration: underline; + outline: 0; +} +hr { + height: 1px; + margin: 0; + padding: 0; + border: none; + background: #ccc; +} +summary, +.fieldgroup:not(.form-composite) > legend { + text-transform: uppercase; + font-weight: bold; +} +.simpletest-results-form summary { + text-transform: none; +} + +/** + * Reusable heading classes are included to help modules change the styling of + * headings on a page without affecting accessibility. + */ +h1, +.heading-a { + margin: 0; + font-size: 1.625em; + font-weight: bold; + line-height: 1.875em; +} +h2, +.heading-b { + margin: 10px 0; + font-size: 1.385em; + font-weight: bold; +} +h3, +.heading-c { + margin: 10px 0; + font-size: 1.231em; + font-weight: bold; +} +h4, +.heading-d { + margin: 10px 0; + font-size: 1.154em; + font-weight: bold; +} +h5, +.heading-e { + margin: 10px 0; + font-size: 1.077em; + font-weight: bold; +} +h6, +.heading-f { + margin: 10px 0; + font-size: 1.077em; + font-weight: bold; +} +p { + margin: 1em 0; +} +dl { + margin: 0 0 20px; +} +dl dd, +dl dl { + margin-bottom: 10px; + margin-left: 20px; /* LTR */ +} +[dir="rtl"] dl dd, +[dir="rtl"] dl dl { + margin-right: 20px; +} +blockquote { + margin: 1em 40px; +} +address { + font-style: italic; +} +u, +ins { + text-decoration: underline; +} +s, +strike, +del { + text-decoration: line-through; +} +big { + font-size: larger; +} +small { + font-size: smaller; +} +sub { + vertical-align: sub; + font-size: smaller; + line-height: normal; +} +sup { + vertical-align: super; + font-size: smaller; + line-height: normal; +} +abbr, +acronym { + border-bottom: dotted 1px; +} +ul { + margin: 0.25em 0 0.25em 1.5em; /* LTR */ + list-style-type: disc; + list-style-image: none; +} +[dir="rtl"] ul { + margin-right: 1.5em; + margin-left: 0; +} +/* This is required to win over specificity of [dir="rtl"] ul */ +[dir="rtl"] .messages__list { + margin-right: 0; +} +ol { + margin: 0.25em 0 0.25em 2em; /* LTR */ + padding: 0; + list-style-type: decimal; +} +[dir="rtl"] ol { + margin-right: 2em; + margin-left: 0; +} +code { + margin: 0.5em 0; +} +pre { + margin: 0.5em 0; + white-space: pre-wrap; +} +details { + line-height: 1.295em; +} +details summary { + padding: 0.95em 1.45em; +} +details summary:focus { + outline: none; +} +/** + * Unfortunately, text-decoration for details summary is not supported on all + * browsers. So we add a span (which can handle text-decoration) in Seven's + * templates/details.html.twig. In case there are other details templates that + * don't have the span, we provide text-decoration in the parent selector. + * This provides maximum compatibility and coverage with minimal disruption. + */ +details summary:not(.lark-details__summary):focus { + text-decoration: underline; +} +details summary:focus span { + text-decoration: underline; +} +img { + max-width: 100%; + height: auto; +} diff --git a/scss/components/_details.scss b/scss/components/_details.scss new file mode 100644 index 0000000..37c43e9 --- /dev/null +++ b/scss/components/_details.scss @@ -0,0 +1,34 @@ +/** + * @file + * Collapsible details. + * + * @see collapse.js + */ +.lark-details { + margin-top: 1em; + margin-bottom: 1em; + border: 1px solid #bfbfbf; + border-radius: 3px; + background-color: #fcfcfa; + + &[open] > .lark-details__summary { + color: #004f80; + } +} + +.lark-details__summary { + cursor: pointer; + text-shadow: 0 1px 0 #ffffff; + color: #0074bd; +} + +.lark-details__summary { + &:hover, + &:focus { + color: #004f80; + } +} + +.lark-details__wrapper { + padding: 0 1.5em 1em; +} diff --git a/scss/components/_dialog.scss b/scss/components/_dialog.scss new file mode 100644 index 0000000..bdbf6a3 --- /dev/null +++ b/scss/components/_dialog.scss @@ -0,0 +1,127 @@ +/** + * Presentational styles for Drupal dialogs. + */ + +.ui-dialog { + position: absolute; + z-index: 1260; + padding: 0; + border: 0; + background: transparent; +} + +@media all and (max-width: 48em) { /* 768px */ + .ui-dialog { + min-width: 92%; + max-width: 92%; + } +} +.ui-dialog .ui-dialog-titlebar { + padding: 15px 49px 15px 15px; /* LTR */ + border-top-left-radius: 5px; + border-top-right-radius: 5px; + background: #6b6b6b; +} +[dir="rtl"] .ui-dialog .ui-dialog-titlebar { + padding-right: 15px; + padding-left: 49px; +} +.ui-dialog .ui-dialog-title { + margin: 0; + color: #fff; + font-size: 1.231em; + font-weight: 600; + -webkit-font-smoothing: antialiased; +} +.ui-dialog .ui-dialog-titlebar-close { + position: absolute; + top: 10px; + right: 12px; /* LTR */ + width: 30px; + height: 30px; + margin: 0; + padding: 0; + -webkit-transition: all 0.1s; + transition: all 0.1s; + border: 3px solid #6b6b6b; + border-radius: 5px; + background: none; +} +.ui-dialog .ui-dialog-titlebar-close:hover, +.ui-dialog .ui-dialog-titlebar-close:focus { + border-color: #fff; +} +[dir="rtl"] .ui-dialog .ui-dialog-titlebar-close { + right: auto; + left: 20px; +} +.ui-dialog .ui-icon.ui-icon-closethick { + margin-top: -8px; + background: url(../../../../../core/misc/icons/ffffff/ex.svg) 0 0 no-repeat; +} +.ui-dialog .ui-widget-content.ui-dialog-content { + overflow: auto; + padding: 1em; + background: #fff; +} +.views-ui-dialog .ui-widget-content.ui-dialog-content { + padding: 0; +} +.ui-dialog .ui-widget-content.ui-dialog-buttonpane { + /* border-top: 1px solid #bfbfbf; */ + margin: 0; + padding: 15px 20px; + border-bottom-right-radius: 5px; + border-bottom-left-radius: 5px; + background: #f5f5f2; +} +.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { + float: none; + margin: 0; + padding: 0; +} +.ui-dialog .ui-dialog-buttonpane .ui-button-text-only .ui-button-text { + padding: 0; +} +.ui-dialog .ui-dialog-content { + position: static; +} + +/* Form action buttons are moved in dialogs. Remove empty space. */ +.ui-dialog .ui-dialog-content .form-actions { + margin: 0; + padding: 0; +} +.ui-dialog .ajax-progress-throbber { + position: fixed; + z-index: 1000; + top: 48.5%; + /* Can't do center:50% middle: 50%, so approximate it for a typical window size. */ + left: 49%; /* LTR */ + width: 24px; + height: 24px; + padding: 4px; + opacity: 0.9; + border-radius: 7px; + background-color: #232323; + background-image: url(../../../../../core/misc/loading-small.gif); + background-repeat: no-repeat; + background-position: center center; +} +[dir="rtl"] .ui-dialog .ajax-progress-throbber { + right: 49%; + left: auto; +} +.ui-dialog .ajax-progress-throbber .throbber, +.ui-dialog .ajax-progress-throbber .message { + display: none; +} +.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar { + position: relative; +} +.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close { + top: 10px; +} +.ui-dialog.ui-dialog-off-canvas .ui-widget-content.ui-dialog-content { + background: none; +} diff --git a/scss/main.scss b/scss/main.scss index 2e4cc52..57cea6b 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -1,3 +1,4 @@ +@import './base/elements'; @import './core/functions'; @import './core/mixins'; @import './core/variables'; @@ -24,6 +25,8 @@ @import './components/bulk-actions'; @import './components/button'; @import './components/dropbutton'; +@import './components/details'; +@import './components/dialog'; @import './components/drupal-tabs'; @import './components/entity_browser'; @import './components/exposed-form'; @@ -40,3 +43,5 @@ @import './components/panels'; @import './drupal-overrides'; + +@import './theme/media-library'; diff --git a/scss/theme/media-library.css b/scss/theme/media-library.css new file mode 100644 index 0000000..e4e289f --- /dev/null +++ b/scss/theme/media-library.css @@ -0,0 +1,737 @@ +/** + * @file media-library.css + + * Styling for Media Library. + */ + +.media-library-wrapper { + display: flex; + margin: -1em; +} + +/** + * @todo Reuse or build on vertical tabs styling for the media library menu. + * https://www.drupal.org/project/drupal/issues/3023767 + */ +.media-library-menu { + display: block; + width: 600px; + max-width: 20%; + margin: 0; /* LTR */ + padding: 0; + border-bottom: 1px solid #ccc; + background-color: #e6e5e1; + line-height: 1; +} +[dir="rtl"] .media-library-menu { + margin: 0; +} + +/** + * @todo Use a class instead of the li element. + * https://www.drupal.org/project/drupal/issues/3029227 + */ +.media-library-menu li { + display: block; + padding: 0; + list-style: none; +} + +.media-library-menu__link { + position: relative; + display: block; + box-sizing: border-box; + padding: 15px; + text-decoration: none; + border-bottom: 1px solid #b3b2ad; + background-color: #f2f2f0; + text-shadow: 0 1px hsla(0, 0%, 100%, 0.6); +} + +.media-library-menu__link:active, +.media-library-menu__link:hover, +.media-library-menu__link:focus { + background: #fcfcfa; + text-shadow: none; +} + +.media-library-menu__link:focus, +.media-library-menu__link:active { + outline: none; +} + +.media-library-menu__link.active { + z-index: 1; + margin-right: -1px; /* LTR */ + color: #000; + border-right: 1px solid #fcfcfa; /* LTR */ + border-bottom: 1px solid #b3b2ad; + background-color: #fff; + box-shadow: 0 5px 5px -5px hsla(0, 0%, 0%, 0.3); +} +[dir="rtl"] .media-library-menu__link.active { + margin-right: 0; + margin-left: -1px; + border-right: 0; + border-left: 1px solid #fcfcfa; +} + +.media-library-content { + width: 100%; + padding: 1em; + border-left: 1px solid #b3b2ad; /* LTR */ + outline: none; +} +[dir="rtl"] .media-library-content { + border-right: 1px solid #b3b2ad; + border-left: 0; +} + +/* Generic media add form styles. */ +.media-library-add-form--without-input .form-item { + margin: 0 0 1em; +} + +/** + * Remove outline from added media list. + * + * The added media list receives focus after adding new media, but since it is + * not an interactive element, it does not need an outline. + */ +.media-library-add-form__added-media { + margin: 0; + padding: 0; + outline: none; +} + +.media-library-add-form__input-wrapper { + padding: 16px; + border: 1px solid #bfbfbf; + border-radius: 2px; + background: #fcfcfa; +} + +/* Style the media add upload form. */ +.media-library-add-form--upload.media-library-add-form--without-input .form-item-upload { + margin-bottom: 0; +} + +.media-library-add-form .file-upload-help { + margin: 8px 0 0; +} + +/* Style the media add oEmbed form. */ +.media-library-add-form--oembed .media-library-add-form__input-wrapper { + display: flex; +} + +@media screen and (max-width: 37.5em) { + .media-library-add-form--oembed .media-library-add-form__input-wrapper { + display: block; + } +} + +.media-library-add-form--oembed.media-library-add-form--without-input .form-item-url { + margin-bottom: 0; +} + +.media-library-add-form-oembed-url { + width: 100%; +} + +/** + * @todo Remove .button when styles are moved to the seven theme in + * https://www.drupal.org/project/drupal/issues/2980769 + */ +.button.media-library-add-form-oembed-submit { + align-self: center; +} + +/* Media add form selection styles. */ +.media-library-add-form__selected-media { + margin-top: 1em; +} + +/* Change to padding to account for the negative margin for flex grid. */ +.media-library-add-form__selected-media .details-wrapper { + padding: 0 10px 1em 10px; +} + +.media-library-add-form__selected-media .media-library-item .field--name-thumbnail img { + height: 100px; +} + +/* Generic media library view styles. */ +.media-library-select-all { + flex-basis: 100%; + width: 100%; + margin: 10px 8px; +} +.media-library-select-all input { + margin-right: 10px; +} +[dir="rtl"] .media-library-select-all input { + margin-left: 10px; +} + +.media-library-views-form, +.media-library-selection, +.media-library-add-form__selected-media .details-wrapper, +.media-library-views-form__bulk_form, +.media-library-view .form--inline { + display: flex; + flex-wrap: wrap; +} + +.media-library-views-form > .form-actions { + flex-basis: 100%; +} + +.media-library-views-form__header { + flex-basis: 100%; +} + +.media-library-views-form__header .form-item { + margin-right: 8px; +} + +.media-library-views-form__rows { + display: flex; + flex-wrap: wrap; + flex-basis: 100%; + margin: 0 -8px; +} + +.media-library-view .form-actions { + align-self: flex-end; + margin: 0.75em 0; +} + +@media screen and (max-width: 600px) { + .media-library-view .form-actions { + flex-basis: 100%; + } +} + +.media-library-view .media-library-view--form-actions { + clear: left; + align-self: flex-end; + margin: 0.75em 0; +} + +/** + * Override the table display of the visually hidden labels. + * + * The width, height and overflow properties in the styles for the + * .visually-hidden class do not work correctly if the element has a table + * display. + */ +.media-library-item label { + display: inline-block; +} + +/* Media library widget view styles. */ +.media-library-wrapper .media-library-view { + position: relative; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.media-library-wrapper .view-header { + align-self: flex-end; + margin: 1em 0; + text-align: right; /* LTR */ +} +[dir="rtl"] .media-library-wrapper .view-header { + text-align: left; +} + +.media-library-wrapper .media-library-view .view-content { + flex: 0 0 100%; +} + +.media-library-wrapper .views-display-link { + margin: 0; + padding-left: 22px; /* LTR */ + color: #333; + font-size: 15px; + line-height: 16px; +} +[dir="rtl"] .media-library-wrapper .views-display-link { + padding-right: 22px; + padding-left: 0; +} + +.media-library-wrapper .views-display-link.is-active { + font-weight: bold; +} + +.media-library-wrapper .views-display-link-widget { + margin-right: 15px; + background: url(../../../../../core/misc/icons/333333/grid.svg) left 0 no-repeat; /* LTR */ +} +[dir="rtl"] .media-library-wrapper .views-display-link-widget { + background-position: right 0; +} + +.media-library-wrapper .views-display-link-widget_table { + background: url(../../../../../core/misc/icons/333333/table.svg) left 0 no-repeat; /* LTR */ +} +[dir="rtl"] .media-library-wrapper .views-display-link-widget_table { + background-position: right 0; +} + +/** + * Style the media library grid items. + */ +.media-library-item { + position: relative; +} + +/** +* The media library item container receives screen reader focus when items are +* removed. Since it is not an interactive element, it does not need an +* outline. +*/ +.media-library-item--grid { + justify-content: center; + box-sizing: border-box; + width: 50%; + padding: 8px; + vertical-align: top; + outline: none; + background: #fff; +} + +.media-library-item--grid:before { + position: absolute; + top: 7px; + left: 7px; + width: calc(100% - 16px); + height: calc(100% - 16px); + content: ""; + transition: border-color 0.2s, color 0.2s, background 0.2s; + pointer-events: none; + border: 1px solid #dbdbdb; +} + +/* Media library widget weight field styles. */ +.media-library-item--grid .form-item { + margin: 0.75em; +} + +/* The selected items in the add form should be shown a bit smaller. */ +.media-library-add-form__selected-media .media-library-item--small { + width: 33.3%; +} + +.media-library-widget-modal .ui-dialog-buttonpane { + display: flex; + align-items: center; +} + +.media-library-widget-modal .ui-dialog-buttonpane .form-actions { + flex: 1; +} + +/** + * By default, the dialog is too narrow to be usable. + * @see Drupal.ckeditor.openDialog() + */ +.ui-dialog--narrow.media-library-widget-modal { + max-width: 75%; +} + +@media screen and (min-width: 45em) { + .media-library-item--grid { + width: 33.3%; + } + + /* Change the width for the modal and widget since there is less space. */ + .media-library-widget-modal .media-library-item--grid, + .media-library-selection .media-library-item--grid { + width: 50%; + } + + /* The selected items in the add form should be shown a bit smaller. */ + .media-library-add-form__selected-media .media-library-item--small { + width: 25%; + } +} + +@media screen and (min-width: 60em) { + .media-library-item--grid { + width: 25%; + } + + /* Change the width for the modal and widget since there is less space. */ + .media-library-widget-modal .media-library-item--grid, + .media-library-selection .media-library-item--grid { + width: 33.3%; + } + + /* The selected items in the add form should be shown a bit smaller. */ + .media-library-add-form__selected-media .media-library-item--small { + width: 16.6%; + } +} + +@media screen and (min-width: 77em) { + .media-library-item--grid { + width: 16.6%; + } + + /* Change the width for the modal and widget since there is less space. */ + .media-library-widget-modal .media-library-item--grid, + .media-library-selection .media-library-item--grid { + width: 25%; + } + + /* The selected items in the add form should be shown a bit smaller. */ + .media-library-add-form__selected-media .media-library-item--small { + width: 16.6%; + } +} + +.media-library-item--grid .field--name-thumbnail { + overflow: hidden; + text-align: center; + background-color: #ebebeb; +} + +.media-library-item--grid .field--name-thumbnail img { + height: 180px; + object-fit: contain; + object-position: center center; +} + +.media-library-item--grid.is-hover:before, +.media-library-item--grid.checked:before, +.media-library-item--grid.is-focus:before { + top: 5px; + left: 5px; + border-width: 3px; + border-color: #40b6ff; + border-radius: 3px; +} + +.media-library-item--grid.checked:before { + border-color: #0076c0; +} + +.media-library-item__click-to-select-checkbox { + position: absolute; + z-index: 1; + top: 16px; + left: 16px; /* LTR */ + display: block; +} +[dir="rtl"] .media-library-item__click-to-select-checkbox { + right: 16px; + left: auto; +} + +.media-library-item__click-to-select-checkbox input { + width: 20px; + height: 20px; +} + +.media-library-item__click-to-select-checkbox .form-item { + margin: 0; +} + +.media-library-item__click-to-select-trigger { + overflow: hidden; + height: 100%; + cursor: pointer; +} + +/* Media library item table styles. */ +.media-library-item--table img { + max-width: 100px; + height: auto; +} + +/* Media library entity view display styles. */ +.media-library-item__preview { + padding-bottom: 34px; +} + +.field--widget-media-library-widget .media-library-item__preview { + cursor: move; +} + +.field--widget-media-library-widget .js-media-library-item:only-child .media-library-item__preview { + cursor: inherit; +} + +.media-library-item__status { + position: absolute; + top: 40px; + left: 5px; /* LTR */ + padding: 5px 10px; + pointer-events: none; + color: #e4e4e4; + background: #666; + font-size: 12px; + font-style: italic; +} +[dir="rtl"] .media-library-item__status { + right: 5px; + left: auto; +} + +.media-library-item__attributes { + position: absolute; + bottom: 0; + display: block; + overflow: hidden; + max-width: calc(100% - 10px); + max-height: calc(100% - 50px); + padding: 5px; + background: white; +} + +.media-library-item__name { + font-size: 14px; +} + +.media-library-item__name { + display: block; + overflow: hidden; + margin: 2px; + white-space: nowrap; + text-overflow: ellipsis; +} + +.media-library-item__attributes:hover .media-library-item__name, +.media-library-item--grid.is-focus .media-library-item__name, +.media-library-item--grid.checked .media-library-item__name { + white-space: normal; +} + +.media-library-item__type { + color: #696969; + font-size: 12px; +} + +.media-library-item--disabled { + pointer-events: none; + opacity: 0.5; +} + +/* Media library widget styles. */ +.media-library-widget { + position: relative; +} + +/** + * @todo Change to .media-library-open-button when styles are moved to the + * seven theme in https://www.drupal.org/project/drupal/issues/2980769 + */ +.button.media-library-open-button { + margin-bottom: 1em; + margin-left: 0; /* LTR */ +} +[dir="rtl"] .button.media-library-open-button { + margin-right: 0; + margin-left: 1em; +} + +.media-library-widget__toggle-weight { + position: absolute; + top: 5px; + right: 5px; /* LTR */ +} +[dir="rtl"] .media-library-widget__toggle-weight { + right: auto; + left: 5px; +} + +/* Add negative margin for flex grid. */ +.media-library-selection { + margin: 1em -8px; +} + +/** + * Media library widget edit and delete button styles. + * + * We have to override the .button styles since buttons make heavy use of + * background and border property changes. + */ +.media-library-item__edit, +.media-library-item__edit:hover, +.media-library-item__edit:focus, +.media-library-item__remove, +.media-library-item__remove:hover, +.media-library-item__remove:focus, +.media-library-item__remove.button, +.media-library-item__remove.button:first-child, +.media-library-item__remove.button:disabled, +.media-library-item__remove.button:disabled:active, +.media-library-item__remove.button:hover, +.media-library-item__remove.button:focus { + position: absolute; + z-index: 1; + top: 10px; + overflow: hidden; + width: 21px; + height: 21px; + margin: 5px; + padding: 0; + transition: 0.2s border-color; + color: transparent; + border: 2px solid #ccc; + border-radius: 20px; + background-size: 13px; + text-shadow: none; + font-size: 0; +} + +.media-library-item__edit { + right: 40px; /* LTR */ +} +[dir="rtl"] .media-library-item__edit { + right: auto; + left: 40px; +} + +.media-library-item__remove { + right: 10px; /* LTR */ +} +[dir="rtl"] .media-library-item__remove { + right: auto; + left: 10px; +} + +.media-library-item__edit { + background: url("../../../../../core/misc/icons/787878/pencil.svg") #fff center no-repeat; + background-size: 13px; +} +.media-library-item__remove, +.media-library-item__remove.button, +.media-library-item__remove.button:first-child, +.media-library-item__remove.button:disabled, +.media-library-item__remove.button:disabled:active, +.media-library-item__remove.button:hover, +.media-library-item__remove.button:focus { + background: url("../../../../../core/misc/icons/787878/ex.svg") #fff center no-repeat; + background-size: 13px; +} +.media-library-item__edit:hover, +.media-library-item__edit:focus, +.media-library-item__remove:hover, +.media-library-item__remove:focus, +.media-library-item__remove.button:hover, +.media-library-item__remove.button:focus, +.media-library-item__remove.button:disabled:active { + border-color: #40b6ff; +} + +/** + * Style the added media item container. + * + * The added media container receives screen reader focus since it has the role + * 'listitem'. Since it is not an interactive element, it does not need an + * outline. + */ +.media-library-add-form__media { + position: relative; + display: flex; + padding: 1em 0; + border-bottom: 1px solid #c0c0c0; + outline: none; +} + +/* Do not show the top padding for the first item. */ +.media-library-add-form__media:first-child { + padding-top: 0; +} + +/** + * Change the position of the remove button for the first item. + * + * The first item doesn't have a top padding, change the location of the remove + * button as well. + */ +.media-library-add-form__media:first-child .media-library-add-form__remove-button[type="submit"] { + top: 5px; +} + +/* Do not show the bottom border and padding for the last item. */ +.media-library-add-form__media:last-child { + padding-bottom: 0; + border-bottom: 0; +} + +.media-library-add-form__preview { + display: flex; + align-items: center; + justify-content: center; + width: 220px; + margin-right: 20px; /* LTR */ + background: #ebebeb; +} +[dir="rtl"] .media-library-add-form__preview { + margin-right: 0; + margin-left: 20px; +} + +/** + * @todo Remove [type="submit"] when styles are moved to the seven theme in + * https://www.drupal.org/project/drupal/issues/2980769 + */ +.media-library-add-form__remove-button[type="submit"] { + position: absolute; + top: 25px; + right: 6px; /* LTR */ + width: auto; + margin: 0; + padding: 2px 20px 2px 2px; /* LTR */ + text-transform: lowercase; + color: transparent; + border: 0; + border-radius: 0; + background: transparent url(../../../../../core/misc/icons/787878/ex.svg) right 2px no-repeat; /* LTR */ + font-weight: normal; + line-height: 16px; +} +[dir="rtl"] .media-library-add-form__remove-button[type="submit"] { + right: auto; + left: 13px; + padding: 2px 2px 2px 20px; + background-position: left 2px; +} + +.media-library-add-form__remove-button:focus, +.media-library-add-form__remove-button.button:disabled, +.media-library-add-form__remove-button.button:disabled:active, +.media-library-add-form__remove-button.button:focus { + color: #787878; + border: 0; + background: transparent url(../../../../../core/misc/icons/787878/ex.svg) right 2px no-repeat; /* LTR */ +} +[dir="rtl"] .media-library-add-form__remove-button:focus, +[dir="rtl"] .media-library-add-form__remove-button.button:disabled, +[dir="rtl"] .media-library-add-form__remove-button.button:disabled:active, +[dir="rtl"] .media-library-add-form__remove-button.button:focus { + background-position: left 2px; +} + +.media-library-add-form__remove-button:hover, +.media-library-add-form__remove-button.button:hover { + color: #e00; + border: 0; + background: transparent url(../../../../../core/misc/icons/ee0000/ex.svg) right 2px no-repeat; /* LTR */ + box-shadow: none; +} +[dir="rtl"] .media-library-add-form__remove-button:hover, +[dir="rtl"] .media-library-add-form__remove-button.button:hover { + background-position: left 2px; +} + +/* @todo Remove in https://www.drupal.org/project/drupal/issues/3064914 */ +.views-live-preview .media-library-view div.views-row + div.views-row { + margin-top: 0; +} diff --git a/templates/classy/README.txt b/templates/classy/README.txt new file mode 100644 index 0000000..8708a82 --- /dev/null +++ b/templates/classy/README.txt @@ -0,0 +1,12 @@ +WHAT IS THIS DIRECTORY FOR? +-------------------------------- +This directory is for templates previously inherited from the Classy theme. + +WHY ARE CLASSY TEMPLATES BEING COPIED HERE? +------------------------------------------- +Classy will be deprecated during the Drupal 9 lifecycle. To prepare for Classy's +removal, templates that would otherwise be inherited from Classy are copied +here. + +Templates that differ from the Classy versions should not be placed in this +directory or any subdirectory. diff --git a/templates/classy/block/block--local-tasks-block.html.twig b/templates/classy/block/block--local-tasks-block.html.twig new file mode 100644 index 0000000..0f25f59 --- /dev/null +++ b/templates/classy/block/block--local-tasks-block.html.twig @@ -0,0 +1,14 @@ +{% extends "block.html.twig" %} +{# +/** + * @file + * Theme override for tabs. + */ +#} +{% block content %} + {% if content %} + + {% endif %} +{% endblock %} diff --git a/templates/classy/block/block--search-form-block.html.twig b/templates/classy/block/block--search-form-block.html.twig new file mode 100644 index 0000000..667202f --- /dev/null +++ b/templates/classy/block/block--search-form-block.html.twig @@ -0,0 +1,45 @@ +{# +/** + * @file + * Theme override for the search form block. + * + * Available variables: + * - plugin_id: The ID of the block implementation. + * - label: The configured label of the block if visible. + * - configuration: A list of the block's configuration values, including: + * - label: The configured label for the block. + * - label_display: The display settings for the label. + * - provider: The module or other provider that provided this block plugin. + * - Block plugin specific settings will also be stored here. + * - content: The content of this block. + * - attributes: A list HTML attributes populated by modules, intended to + * be added to the main container tag of this template. Includes: + * - id: A valid HTML ID and guaranteed unique. + * - title_attributes: Same as attributes, except applied to the main title + * tag that appears in the template. + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the main title tag that appears in the template. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the main title tag that appears in the template. + * + * @see template_preprocess_block() + * @see search_preprocess_block() + */ +#} +{% + set classes = [ + 'block', + 'block-search', + 'container-inline', + ] +%} + + {{ title_prefix }} + {% if label %} + {{ label }} + {% endif %} + {{ title_suffix }} + {% block content %} + {{ content }} + {% endblock %} + diff --git a/templates/classy/block/block--system-branding-block.html.twig b/templates/classy/block/block--system-branding-block.html.twig new file mode 100644 index 0000000..baa015b --- /dev/null +++ b/templates/classy/block/block--system-branding-block.html.twig @@ -0,0 +1,30 @@ +{% extends "block.html.twig" %} +{# +/** + * @file + * Theme override for a branding block. + * + * Each branding element variable (logo, name, slogan) is only available if + * enabled in the block configuration. + * + * Available variables: + * - site_logo: Logo for site as defined in Appearance or theme settings. + * - site_name: Name for site as defined in Site information settings. + * - site_slogan: Slogan for site as defined in Site information settings. + */ +#} +{% block content %} + {% if site_logo %} + + {% endif %} + {% if site_name %} +
+ {{ site_name }} +
+ {% endif %} + {% if site_slogan %} +
{{ site_slogan }}
+ {% endif %} +{% endblock %} diff --git a/templates/classy/block/block--system-menu-block.html.twig b/templates/classy/block/block--system-menu-block.html.twig new file mode 100644 index 0000000..407f840 --- /dev/null +++ b/templates/classy/block/block--system-menu-block.html.twig @@ -0,0 +1,56 @@ +{# +/** + * @file + * Theme override for a menu block. + * + * Available variables: + * - plugin_id: The ID of the block implementation. + * - label: The configured label of the block if visible. + * - configuration: A list of the block's configuration values. + * - label: The configured label for the block. + * - label_display: The display settings for the label. + * - provider: The module or other provider that provided this block plugin. + * - Block plugin specific settings will also be stored here. + * - content: The content of this block. + * - attributes: HTML attributes for the containing element. + * - id: A valid HTML ID and guaranteed unique. + * - title_attributes: HTML attributes for the title element. + * - content_attributes: HTML attributes for the content element. + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the main title tag that appears in the template. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the main title tag that appears in the template. + * + * Headings should be used on navigation menus that consistently appear on + * multiple pages. When this menu block's label is configured to not be + * displayed, it is automatically made invisible using the 'visually-hidden' CSS + * class, which still keeps it visible for screen-readers and assistive + * technology. Headings allow screen-reader and keyboard only users to navigate + * to or skip the links. + * See http://juicystudio.com/article/screen-readers-display-none.php and + * http://www.w3.org/TR/WCAG-TECHS/H42.html for more information. + */ +#} +{% + set classes = [ + 'block', + 'block-menu', + 'navigation', + 'menu--' ~ derivative_plugin_id|clean_class, + ] +%} +{% set heading_id = attributes.id ~ '-menu'|clean_id %} + diff --git a/templates/classy/block/block.html.twig b/templates/classy/block/block.html.twig new file mode 100644 index 0000000..fd3311b --- /dev/null +++ b/templates/classy/block/block.html.twig @@ -0,0 +1,44 @@ +{# +/** + * @file + * Theme override to display a block. + * + * Available variables: + * - plugin_id: The ID of the block implementation. + * - label: The configured label of the block if visible. + * - configuration: A list of the block's configuration values. + * - label: The configured label for the block. + * - label_display: The display settings for the label. + * - provider: The module or other provider that provided this block plugin. + * - Block plugin specific settings will also be stored here. + * - content: The content of this block. + * - attributes: array of HTML attributes populated by modules, intended to + * be added to the main container tag of this template. + * - id: A valid HTML ID and guaranteed unique. + * - title_attributes: Same as attributes, except applied to the main title + * tag that appears in the template. + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the main title tag that appears in the template. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the main title tag that appears in the template. + * + * @see template_preprocess_block() + */ +#} +{% + set classes = [ + 'block', + 'block-' ~ configuration.provider|clean_class, + 'block-' ~ plugin_id|clean_class, + ] +%} + + {{ title_prefix }} + {% if label %} + {{ label }} + {% endif %} + {{ title_suffix }} + {% block content %} + {{ content }} + {% endblock %} + diff --git a/templates/classy/content-edit/file-managed-file.html.twig b/templates/classy/content-edit/file-managed-file.html.twig new file mode 100644 index 0000000..fdac8fe --- /dev/null +++ b/templates/classy/content-edit/file-managed-file.html.twig @@ -0,0 +1,22 @@ +{# +/** + * @file + * Theme override to display a file form widget. + * + * Available variables: + * - element: Form element for the file upload. + * - attributes: HTML attributes for the containing element. + * + * @see template_preprocess_file_managed_file() + */ +#} +{{ attach_library('lark/classy.file') }} +{% + set classes = [ + 'js-form-managed-file', + 'form-managed-file', + ] +%} + + {{ element }} + diff --git a/templates/classy/content-edit/filter-caption.html.twig b/templates/classy/content-edit/filter-caption.html.twig new file mode 100644 index 0000000..1e35795 --- /dev/null +++ b/templates/classy/content-edit/filter-caption.html.twig @@ -0,0 +1,18 @@ +{# +/** + * @file + * Theme override for a filter caption. + * + * Returns HTML for a captioned image, audio, video or other tag. + * + * Available variables + * - string node: The complete HTML tag whose contents are being captioned. + * - string tag: The name of the HTML tag whose contents are being captioned. + * - string caption: The caption text. + * - string classes: The classes of the captioned HTML tag. + */ +#} +
+{{ node }} +
{{ caption }}
+
diff --git a/templates/classy/content-edit/filter-guidelines.html.twig b/templates/classy/content-edit/filter-guidelines.html.twig new file mode 100644 index 0000000..afef2d2 --- /dev/null +++ b/templates/classy/content-edit/filter-guidelines.html.twig @@ -0,0 +1,29 @@ +{# +/** + * @file + * Theme override for guidelines for a text format. + * + * Available variables: + * - format: Contains information about the current text format, including the + * following: + * - name: The name of the text format, potentially unsafe and needs to be + * escaped. + * - format: The machine name of the text format, e.g. 'basic_html'. + * - attributes: HTML attributes for the containing element. + * - tips: Descriptions and a CSS ID in the form of 'module-name/filter-id' + * (only used when 'long' is TRUE) for each filter in one or more text + * formats. + * + * @see template_preprocess_filter_tips() + */ +#} +{% + set classes = [ + 'filter-guidelines-item', + 'filter-guidelines-' ~ format.id, + ] +%} + +

{{ format.label }}

+ {{ tips }} + diff --git a/templates/classy/content-edit/filter-tips.html.twig b/templates/classy/content-edit/filter-tips.html.twig new file mode 100644 index 0000000..25ed49d --- /dev/null +++ b/templates/classy/content-edit/filter-tips.html.twig @@ -0,0 +1,61 @@ +{# +/** + * @file + * Theme override for a set of filter tips. + * + * Available variables: + * - tips: Descriptions and a CSS ID in the form of 'module-name/filter-id' + * (only used when 'long' is TRUE) for each filter in one or more text + * formats. + * - long: A flag indicating whether the passed-in filter tips contain extended + * explanations, i.e. intended to be output on the path 'filter/tips' + * (TRUE), or are in a short format, i.e. suitable to be displayed below a + * form element. Defaults to FALSE. + * - multiple: A flag indicating there is more than one filter tip. + * + * @see template_preprocess_filter_tips() + */ +#} +{% if multiple %} +

{{ 'Text Formats'|t }}

+{% endif %} + +{% if tips|length %} + {% if multiple %} +
+ {% endif %} + + {% for name, tip in tips %} + {% if multiple %} + {% + set tip_classes = [ + 'filter-type', + 'filter-' ~ name|clean_class, + ] + %} + +

{{ tip.name }}

+ {% endif %} + + {% if tip.list|length %} +
    + {% for item in tip.list %} + {% + set item_classes = [ + long ? 'filter-' ~ item.id|replace({'/': '-'}), + ] + %} + {{ item.tip }} + {% endfor %} +
+ {% endif %} + + {% if multiple %} +
+ {% endif %} + {% endfor %} + + {% if multiple %} + + {% endif %} +{% endif %} diff --git a/templates/classy/content-edit/text-format-wrapper.html.twig b/templates/classy/content-edit/text-format-wrapper.html.twig new file mode 100644 index 0000000..08a88ca --- /dev/null +++ b/templates/classy/content-edit/text-format-wrapper.html.twig @@ -0,0 +1,26 @@ +{# +/** + * @file + * Theme override for a text format-enabled form element. + * + * Available variables: + * - children: Text format element children. + * - description: Text format element description. + * - attributes: HTML attributes for the containing element. + * - aria_description: Flag for whether or not an ARIA description has been + * added to the description container. + * + * @see template_preprocess_text_format_wrapper() + */ +#} +
+ {{ children }} + {% if description %} + {% + set classes = [ + aria_description ? 'description', + ] + %} + {{ description }}
+ {% endif %} + diff --git a/templates/classy/content/aggregator-item.html.twig b/templates/classy/content/aggregator-item.html.twig new file mode 100644 index 0000000..16f4428 --- /dev/null +++ b/templates/classy/content/aggregator-item.html.twig @@ -0,0 +1,31 @@ +{# +/** + * @file + * Theme override to present a feed item in an aggregator page. + * + * Available variables: + * - url: URL to the originating feed item. + * - title: (optional) Title of the feed item. + * - content: All field items. Use {{ content }} to print them all, + * or print a subset such as {{ content.field_example }}. Use + * {{ content|without('field_example') }} to temporarily suppress the printing + * of a given element. + * - attributes: HTML attributes for the wrapper. + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the main title tag that appears in the template. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the main title tag that appears in the template. + * + * @see template_preprocess_aggregator_item() + */ +#} + + {{ title_prefix }} + {% if title %} +

+ {{ title }} +

+ {% endif %} + {{ title_suffix }} + {{ content }} + diff --git a/templates/classy/content/book-node-export-html.html.twig b/templates/classy/content/book-node-export-html.html.twig new file mode 100644 index 0000000..94a4c24 --- /dev/null +++ b/templates/classy/content/book-node-export-html.html.twig @@ -0,0 +1,20 @@ +{# +/** + * @file + * Theme override for a single node in a printer-friendly outline. + * + * Available variables: + * - node: Fully loaded node. + * - depth: Depth of the current node inside the outline. + * - title: Node title. + * - content: Node content. + * - children: All the child nodes recursively rendered through this file. + * + * @see template_preprocess_book_node_export_html() + */ +#} +
+

{{ title }}

+ {{ content }} + {{ children }} +
diff --git a/templates/classy/content/comment.html.twig b/templates/classy/content/comment.html.twig new file mode 100644 index 0000000..1c063f9 --- /dev/null +++ b/templates/classy/content/comment.html.twig @@ -0,0 +1,111 @@ +{# +/** + * @file + * Theme override for comments. + * + * Available variables: + * - author: Comment author. Can be a link or plain text. + * - content: The content-related items for the comment display. Use + * {{ content }} to print them all, or print a subset such as + * {{ content.field_example }}. Use the following code to temporarily suppress + * the printing of a given child element: + * @code + * {{ content|without('field_example') }} + * @endcode + * - created: Formatted date and time for when the comment was created. + * Preprocess functions can reformat it by calling DateFormatter::format() + * with the desired parameters on the 'comment.created' variable. + * - changed: Formatted date and time for when the comment was last changed. + * Preprocess functions can reformat it by calling DateFormatter::format() + * with the desired parameters on the 'comment.changed' variable. + * - permalink: Comment permalink. + * - submitted: Submission information created from author and created + * during template_preprocess_comment(). + * - user_picture: The comment author's profile picture. + * - status: Comment status. Possible values are: + * unpublished, published, or preview. + * - title: Comment title, linked to the comment. + * - attributes: HTML attributes for the containing element. + * The attributes.class may contain one or more of the following classes: + * - comment: The current template type; e.g., 'theming hook'. + * - by-anonymous: Comment by an unregistered user. + * - by-{entity-type}-author: Comment by the author of the parent entity, + * eg. by-node-author. + * - preview: When previewing a new or edited comment. + * The following applies only to viewers who are registered users: + * - unpublished: An unpublished comment visible only to administrators. + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the main title tag that appears in the template. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the main title tag that appears in the template. + * - content_attributes: List of classes for the styling of the comment content. + * - title_attributes: Same as attributes, except applied to the main title + * tag that appears in the template. + * - threaded: A flag indicating whether the comments are threaded or not. + * + * These variables are provided to give context about the parent comment (if + * any): + * - parent_comment: Full parent comment entity (if any). + * - parent_author: Equivalent to author for the parent comment. + * - parent_created: Equivalent to created for the parent comment. + * - parent_changed: Equivalent to changed for the parent comment. + * - parent_title: Equivalent to title for the parent comment. + * - parent_permalink: Equivalent to permalink for the parent comment. + * - parent: A text string of parent comment submission information created from + * 'parent_author' and 'parent_created' during template_preprocess_comment(). + * This information is presented to help screen readers follow lengthy + * discussion threads. You can hide this from sighted users using the class + * visually-hidden. + * + * These two variables are provided for context: + * - comment: Full comment object. + * - entity: Entity the comments are attached to. + * + * @see template_preprocess_comment() + */ +#} +{% if threaded %} + {{ attach_library('lark/classy.indented') }} +{% endif %} +{% + set classes = [ + 'comment', + 'js-comment', + status != 'published' ? status, + comment.owner.anonymous ? 'by-anonymous', + author_id and author_id == commented_entity.getOwnerId() ? 'by-' ~ commented_entity.getEntityTypeId() ~ '-author', + ] +%} + + {# + Hide the "new" indicator by default, let a piece of JavaScript ask the + server which comments are new for the user. Rendering the final "new" + indicator here would break the render cache. + #} + + +
+ {{ user_picture }} +

{{ submitted }}

+ + {# + Indicate the semantic relationship between parent and child comments for + accessibility. The list is difficult to navigate in a screen reader + without this information. + #} + {% if parent %} + + {% endif %} + + {{ permalink }} +
+ + + {% if title %} + {{ title_prefix }} + {{ title }} + {{ title_suffix }} + {% endif %} + {{ content }} + + diff --git a/templates/classy/content/links--node.html.twig b/templates/classy/content/links--node.html.twig new file mode 100644 index 0000000..e6cda0d --- /dev/null +++ b/templates/classy/content/links--node.html.twig @@ -0,0 +1,40 @@ +{# +/** + * @file + * Theme override to display node links. + * + * Available variables: + * - attributes: Attributes for the UL containing the list of links. + * - links: Links to be output. + * Each link will have the following elements: + * - link: (optional) A render array that returns a link. See + * template_preprocess_links() for details how it is generated. + * - text: The link text. + * - attributes: HTML attributes for the list item element. + * - text_attributes: (optional) HTML attributes for the span element if no + * 'url' was supplied. + * - heading: (optional) A heading to precede the links. + * - text: The heading text. + * - level: The heading level (e.g. 'h2', 'h3'). + * - attributes: (optional) A keyed list of attributes for the heading. + * If the heading is a string, it will be used as the text of the heading and + * the level will default to 'h2'. + * + * Headings should be used on navigation menus and any list of links that + * consistently appears on multiple pages. To make the heading invisible use + * the 'visually-hidden' CSS class. Do not use 'display:none', which + * removes it from screen readers and assistive technology. Headings allow + * screen reader and keyboard only users to navigate to or skip the links. + * See http://juicystudio.com/article/screen-readers-display-none.php and + * http://www.w3.org/TR/WCAG-TECHS/H42.html for more information. + * + * @see template_preprocess_links() + * + * @ingroup themeable + */ +#} +{% if links %} +
+ {% include "links.html.twig" %} +
+{% endif %} diff --git a/templates/classy/content/mark.html.twig b/templates/classy/content/mark.html.twig new file mode 100644 index 0000000..9219915 --- /dev/null +++ b/templates/classy/content/mark.html.twig @@ -0,0 +1,20 @@ +{# +/** + * @file + * Theme override for a marker for new or updated content. + * + * Available variables: + * - status: Number representing the marker status to display. Use the constants + * below for comparison: + * - MARK_NEW + * - MARK_UPDATED + * - MARK_READ + */ +#} +{% if logged_in %} + {% if status is constant('MARK_NEW') %} + {{ 'New'|t }} + {% elseif status is constant('MARK_UPDATED') %} + {{ 'Updated'|t }} + {% endif %} +{% endif %} diff --git a/templates/classy/content/media-embed-error.html.twig b/templates/classy/content/media-embed-error.html.twig new file mode 100644 index 0000000..b4a76ef --- /dev/null +++ b/templates/classy/content/media-embed-error.html.twig @@ -0,0 +1,21 @@ +{# +/** + * @file + * Theme override for a missing media error. + * + * Available variables + * - message: The message text. + * - attributes: HTML attributes for the containing element. + * + * When a response from the back end can't be returned, a related error message + * is displayed from JavaScript. + * + * @see Drupal.theme.mediaEmbedPreviewError + * + * @ingroup themeable + */ +#} +{{ attach_library('lark/classy.media_embed_error') }} + + {{ message }} + diff --git a/templates/classy/content/media.html.twig b/templates/classy/content/media.html.twig new file mode 100644 index 0000000..422030e --- /dev/null +++ b/templates/classy/content/media.html.twig @@ -0,0 +1,28 @@ +{# +/** + * @file + * Theme override to display a media item. + * + * Available variables: + * - name: Name of the media. + * - content: Media content. + * + * @see template_preprocess_media() + * + * @ingroup themeable + */ +#} +{% + set classes = [ + 'media', + 'media--type-' ~ media.bundle()|clean_class, + not media.isPublished() ? 'media--unpublished', + view_mode ? 'media--view-mode-' ~ view_mode|clean_class, + ] +%} + + {{ title_suffix.contextual_links }} + {% if content %} + {{ content }} + {% endif %} + diff --git a/templates/classy/content/node.html.twig b/templates/classy/content/node.html.twig new file mode 100644 index 0000000..d7abdb1 --- /dev/null +++ b/templates/classy/content/node.html.twig @@ -0,0 +1,108 @@ +{# +/** + * @file + * Theme override to display a node. + * + * Available variables: + * - node: The node entity with limited access to object properties and methods. + * Only method names starting with "get", "has", or "is" and a few common + * methods such as "id", "label", and "bundle" are available. For example: + * - node.getCreatedTime() will return the node creation timestamp. + * - node.hasField('field_example') returns TRUE if the node bundle includes + * field_example. (This does not indicate the presence of a value in this + * field.) + * - node.isPublished() will return whether the node is published or not. + * Calling other methods, such as node.delete(), will result in an exception. + * See \Drupal\node\Entity\Node for a full list of public properties and + * methods for the node object. + * - label: (optional) The title of the node. + * - content: All node items. Use {{ content }} to print them all, + * or print a subset such as {{ content.field_example }}. Use + * {{ content|without('field_example') }} to temporarily suppress the printing + * of a given child element. + * - author_picture: The node author user entity, rendered using the "compact" + * view mode. + * - metadata: Metadata for this node. + * - date: (optional) Themed creation date field. + * - author_name: (optional) Themed author name field. + * - url: Direct URL of the current node. + * - display_submitted: Whether submission information should be displayed. + * - attributes: HTML attributes for the containing element. + * The attributes.class element may contain one or more of the following + * classes: + * - node: The current template type (also known as a "theming hook"). + * - node--type-[type]: The current node type. For example, if the node is an + * "Article" it would result in "node--type-article". Note that the machine + * name will often be in a short form of the human readable label. + * - node--view-mode-[view_mode]: The View Mode of the node; for example, a + * teaser would result in: "node--view-mode-teaser", and + * full: "node--view-mode-full". + * The following are controlled through the node publishing options. + * - node--promoted: Appears on nodes promoted to the front page. + * - node--sticky: Appears on nodes ordered above other non-sticky nodes in + * teaser listings. + * - node--unpublished: Appears on unpublished nodes visible only to site + * admins. + * - title_attributes: Same as attributes, except applied to the main title + * tag that appears in the template. + * - content_attributes: Same as attributes, except applied to the main + * content tag that appears in the template. + * - author_attributes: Same as attributes, except applied to the author of + * the node tag that appears in the template. + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the main title tag that appears in the template. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the main title tag that appears in the template. + * - view_mode: View mode; for example, "teaser" or "full". + * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'. + * - page: Flag for the full page state. Will be true if view_mode is 'full'. + * - readmore: Flag for more state. Will be true if the teaser content of the + * node cannot hold the main body content. + * - logged_in: Flag for authenticated user status. Will be true when the + * current user is a logged-in member. + * - is_admin: Flag for admin user status. Will be true when the current user + * is an administrator. + * + * @see template_preprocess_node() + * + * @todo Remove the id attribute (or make it a class), because if that gets + * rendered twice on a page this is invalid CSS for example: two lists + * in different view modes. + */ +#} +{% + set classes = [ + 'node', + 'node--type-' ~ node.bundle|clean_class, + node.isPromoted() ? 'node--promoted', + node.isSticky() ? 'node--sticky', + not node.isPublished() ? 'node--unpublished', + view_mode ? 'node--view-mode-' ~ view_mode|clean_class, + ] +%} +{{ attach_library('lark/classy.node') }} + + + {{ title_prefix }} + {% if label and not page %} + + {{ label }} + + {% endif %} + {{ title_suffix }} + + {% if display_submitted %} +
+ {{ author_picture }} + + {% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %} + {{ metadata }} + +
+ {% endif %} + + + {{ content }} + + + diff --git a/templates/classy/content/page-title.html.twig b/templates/classy/content/page-title.html.twig new file mode 100644 index 0000000..e1de726 --- /dev/null +++ b/templates/classy/content/page-title.html.twig @@ -0,0 +1,19 @@ +{# +/** + * @file + * Theme override for page titles. + * + * Available variables: + * - title_attributes: HTML attributes for the page title element. + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the main title tag that appears in the template. + * - title: The page title, for use in the actual content. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the main title tag that appears in the template. + */ +#} +{{ title_prefix }} +{% if title %} + {{ title }} +{% endif %} +{{ title_suffix }} diff --git a/templates/classy/content/search-result.html.twig b/templates/classy/content/search-result.html.twig new file mode 100644 index 0000000..0eb2ba7 --- /dev/null +++ b/templates/classy/content/search-result.html.twig @@ -0,0 +1,72 @@ +{# +/** + * @file + * Theme override for displaying a single search result. + * + * This template renders a single search result. The list of results is + * rendered using '#theme' => 'item_list', with suggestions of: + * - item_list__search_results__(plugin_id) + * - item_list__search_results + * + * Available variables: + * - url: URL of the result. + * - title: Title of the result. + * - snippet: A small preview of the result. Does not apply to user searches. + * - info: String of all the meta information ready for print. Does not apply + * to user searches. + * - plugin_id: The machine-readable name of the plugin being executed,such + * as "node_search" or "user_search". + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the main title tag that appears in the template. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the main title tag that appears in the template. + * - info_split: Contains same data as info, but split into separate parts. + * - info_split.type: Node type (or item type string supplied by module). + * - info_split.user: Author of the node linked to users profile. Depends + * on permission. + * - info_split.date: Last update of the node. Short formatted. + * - info_split.comment: Number of comments output as "% comments", % + * being the count. (Depends on comment.module). + * @todo The info variable needs to be made drillable and each of these sub + * items should instead be within info and renamed info.foo, info.bar, etc. + * + * Other variables: + * - title_attributes: HTML attributes for the title. + * - content_attributes: HTML attributes for the content. + * + * Since info_split is keyed, a direct print of the item is possible. + * This array does not apply to user searches so it is recommended to check + * for its existence before printing. The default keys of 'type', 'user' and + * 'date' always exist for node searches. Modules may provide other data. + * @code + * {% if (info_split.comment) %} + * + * {{ info_split.comment }} + * + * {% endif %} + * @endcode + * + * To check for all available data within info_split, use the code below. + * @code + * 
+ *     {{ dump(info_split) }}
+ *
+ * @endcode + * + * @see template_preprocess_search_result() + */ +#} +{{ attach_library('lark/classy.search-results') }} +{{ title_prefix }} + + {{ title }} + +{{ title_suffix }} +
+ {% if snippet %} + {{ snippet }}

+ {% endif %} + {% if info %} +

{{ info }}

+ {% endif %} +
diff --git a/templates/classy/content/taxonomy-term.html.twig b/templates/classy/content/taxonomy-term.html.twig new file mode 100644 index 0000000..6478b50 --- /dev/null +++ b/templates/classy/content/taxonomy-term.html.twig @@ -0,0 +1,41 @@ +{# +/** + * @file + * Theme override to display a taxonomy term. + * + * Available variables: + * - url: URL of the current term. + * - name: (optional) Name of the current term. + * - content: Items for the content of the term (fields and description). + * Use 'content' to print them all, or print a subset such as + * 'content.description'. Use the following code to exclude the + * printing of a given child element: + * @code + * {{ content|without('description') }} + * @endcode + * - attributes: HTML attributes for the wrapper. + * - page: Flag for the full page state. + * - term: The taxonomy term entity, including: + * - id: The ID of the taxonomy term. + * - bundle: Machine name of the current vocabulary. + * - view_mode: View mode, e.g. 'full', 'teaser', etc. + * + * @see template_preprocess_taxonomy_term() + */ +#} +{% + set classes = [ + 'taxonomy-term', + 'vocabulary-' ~ term.bundle|clean_class, + ] +%} + + {{ title_prefix }} + {% if name and not page %} +

{{ name }}

+ {% endif %} + {{ title_suffix }} +
+ {{ content }} +
+ diff --git a/templates/classy/dataset/aggregator-feed.html.twig b/templates/classy/dataset/aggregator-feed.html.twig new file mode 100644 index 0000000..9eacccb --- /dev/null +++ b/templates/classy/dataset/aggregator-feed.html.twig @@ -0,0 +1,36 @@ +{# +/** + * @file + * Theme override to present an aggregator feed. + * + * The contents are rendered above feed listings when browsing source feeds. + * For example, "example.com/aggregator/sources/1". + * + * Available variables: + * - title: (optional) Title of the feed item. + * - content: All field items. Use {{ content }} to print them all, + * or print a subset such as {{ content.field_example }}. Use + * {{ content|without('field_example') }} to temporarily suppress the printing + * of a given element. + * - attributes: HTML attributes for the wrapper. + * - title_attributes: Same as attributes, except applied to the main title + * tag that appears in the template. + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the main title tag that appears in the template. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the main title tag that appears in the template. + * + * @see template_preprocess_aggregator_feed() + */ +#} + + + {{ title_prefix }} + {% if title and not full %} + {{ title }} + {% endif %} + {{ title_suffix }} + + {{ content }} + + diff --git a/templates/classy/dataset/forum-icon.html.twig b/templates/classy/dataset/forum-icon.html.twig new file mode 100644 index 0000000..d6be503 --- /dev/null +++ b/templates/classy/dataset/forum-icon.html.twig @@ -0,0 +1,30 @@ +{# +/** + * @file + * Theme override to display a status icon for a forum post. + * + * Available variables: + * - attributes: HTML attributes to be applied to the wrapper element. + * - class: HTML classes that determine which icon to display. May be one of + * 'hot', 'hot-new', 'new', 'default', 'closed', or 'sticky'. + * - title: Text alternative for the forum icon. + * - icon_title: Text alternative for the forum icon, same as above. + * - new_posts: '1' when this topic contains new posts, otherwise '0'. + * - first_new: '1' when this is the first topic with new posts, otherwise '0'. + * - icon_status: Indicates which status icon should be used. + * + * @see template_preprocess_forum_icon() + */ +#} +{% + set classes = [ + 'forum__icon', + 'forum__topic-status--' ~ icon_status, + ] +%} + + {% if first_new -%} + + {%- endif %} + + diff --git a/templates/classy/dataset/forum-list.html.twig b/templates/classy/dataset/forum-list.html.twig new file mode 100644 index 0000000..d8523f1 --- /dev/null +++ b/templates/classy/dataset/forum-list.html.twig @@ -0,0 +1,79 @@ +{# +/** + * @file + * Theme override to display a list of forums and containers. + * + * Available variables: + * - forums: A collection of forums and containers to display. It is keyed to + * the numeric IDs of all child forums and containers. Each forum in forums + * contains: + * - is_container: A flag indicating if the forum can contain other + * forums. Otherwise, the forum can only contain topics. + * - depth: How deep the forum is in the current hierarchy. + * - zebra: 'even' or 'odd', used for row class. + * - icon_class: 'default' or 'new', used for forum icon class. + * - icon_title: Text alternative for the forum icon. + * - name: The name of the forum. + * - link: The URL to link to this forum. + * - description: The description field for the forum, containing: + * - value: The descriptive text for the forum. + * - new_topics: A flag indicating if the forum contains unread posts. + * - new_url: A URL to the forum's unread posts. + * - new_text: Text for the above URL, which tells how many new posts. + * - old_topics: A count of posts that have already been read. + * - num_posts: The total number of posts in the forum. + * - last_reply: Text representing the last time a forum was posted or + * commented in. + * - forum_id: Forum ID for the current forum. Parent to all items within the + * forums array. + * + * @see template_preprocess_forum_list() + */ +#} + + + + + + + + + + + {% for child_id, forum in forums %} + + + {% if forum.is_container == false %} + + + + {% endif %} + + {% endfor %} + +
{{ 'Forum'|t }}{{ 'Topics'|t }}{{ 'Posts'|t }}{{ 'Last post'|t }}
+ {# + Enclose the contents of this cell with X divs, where X is the + depth this forum resides at. This will allow us to use CSS + left-margin for indenting. + #} + {% if forum.depth > 0 %}{% for i in 1..forum.depth %}
{% endfor %}{% endif %} +
+ +
+
{{ forum.label }}
+ {% if forum.description.value %} +
{{ forum.description.value }}
+ {% endif %} + {% if forum.depth > 0 %}{% for i in 1..forum.depth %}
{% endfor %}{% endif %} + 		+ {{ forum.num_topics }} + {% if forum.new_topics == true %} +
+ {{ forum.new_text }} + {% endif %} + 		{{ forum.num_posts }}{{ forum.last_reply }}
diff --git a/templates/classy/dataset/forums.html.twig b/templates/classy/dataset/forums.html.twig new file mode 100644 index 0000000..7548900 --- /dev/null +++ b/templates/classy/dataset/forums.html.twig @@ -0,0 +1,24 @@ +{# +/** + * @file + * Theme override to display a forum. + * + * May contain forum containers as well as forum topics. + * + * Available variables: + * - forums: The forums to display (as processed by forum-list.html.twig). + * - topics: The topics to display. + * - topics_pager: The topics pager. + * - forums_defined: A flag to indicate that the forums are configured. + * + * @see template_preprocess_forums() + */ +#} +{{ attach_library('lark/classy.forum') }} +{% if forums_defined %} +
+ {{ forums }} + {{ topics }} + {{ topics_pager }} +
+{% endif %} diff --git a/templates/classy/dataset/item-list--search-results.html.twig b/templates/classy/dataset/item-list--search-results.html.twig new file mode 100644 index 0000000..e9928fd --- /dev/null +++ b/templates/classy/dataset/item-list--search-results.html.twig @@ -0,0 +1,29 @@ +{% extends "item-list.html.twig" %} +{# +/** + * @file + * Theme override for an item list of search results. + * + * Available variables: + * - items: A list of items. Each item contains: + * - attributes: HTML attributes to be applied to each list item. + * - value: The content of the list element. + * - title: The title of the list. + * - list_type: The tag for list element ("ul" or "ol"). + * - attributes: HTML attributes to be applied to the list. + * - empty: A message to display when there are no items. Allowed value is a + * string or render array. + * - context: An list of contextual data associated with the list. For search + * results, the following data is set: + * - plugin: The search plugin ID, for example "node_search". + * + * @see template_preprocess_item_list() + */ +#} +{% + set classes = [ + 'search-results', + context.plugin ~ '-results', + ] +%} +{% set attributes = attributes.addClass(classes) %} diff --git a/templates/classy/dataset/item-list.html.twig b/templates/classy/dataset/item-list.html.twig new file mode 100644 index 0000000..20541b0 --- /dev/null +++ b/templates/classy/dataset/item-list.html.twig @@ -0,0 +1,41 @@ +{# +/** + * @file + * Theme override for an item list. + * + * Available variables: + * - items: A list of items. Each item contains: + * - attributes: HTML attributes to be applied to each list item. + * - value: The content of the list element. + * - title: The title of the list. + * - list_type: The tag for list element ("ul" or "ol"). + * - wrapper_attributes: HTML attributes to be applied to the list wrapper. + * - attributes: HTML attributes to be applied to the list. + * - empty: A message to display when there are no items. Allowed value is a + * string or render array. + * - context: A list of contextual data associated with the list. May contain: + * - list_style: The custom list style. + * + * @see template_preprocess_item_list() + */ +#} +{% if context.list_style %} + {%- set wrapper_attributes = wrapper_attributes.addClass('item-list--' ~ context.list_style) %} + {%- set attributes = attributes.addClass('item-list__' ~ context.list_style) %} +{% endif %} +{% if items or empty -%} + + {%- if title is not empty -%} +

{{ title }}

+ {%- endif -%} + {%- if items -%} + <{{ list_type }}{{ attributes }}> + {%- for item in items -%} + {{ item.value }} + {%- endfor -%} + + {%- else -%} + {{- empty -}} + {%- endif -%} + +{%- endif %} diff --git a/templates/classy/dataset/table.html.twig b/templates/classy/dataset/table.html.twig new file mode 100644 index 0000000..2afa9c1 --- /dev/null +++ b/templates/classy/dataset/table.html.twig @@ -0,0 +1,113 @@ +{# +/** + * @file + * Theme override to display a table. + * + * Available variables: + * - attributes: HTML attributes to apply to the tag. + * - caption: A localized string for the tag. + * Note: Drupal currently supports only one table header row, see + * https://www.drupal.org/node/893530 and + * http://api.drupal.org/api/drupal/includes!theme.inc/function/theme_table/7#comment-5109. + * - header: Table header cells. Each cell contains the following properties: + * - tag: The HTML tag name to use; either 'th' or 'td'. + * - attributes: HTML attributes to apply to the tag. + * - content: A localized string for the title of the column. + * - field: Field name (required for column sorting). + * - sort: Default sort order for this column ("asc" or "desc"). + * - sticky: A flag indicating whether to use a "sticky" table header. + * - rows: Table rows. Each row contains the following properties: + * - attributes: HTML attributes to apply to the tag. + * - data: Table cells. + * - no_striping: A flag indicating that the row should receive no + * 'even / odd' styling. Defaults to FALSE. + * - cells: Table cells of the row. Each cell contains the following keys: + * - tag: The HTML tag name to use; either 'th' or 'td'. + * - attributes: Any HTML attributes, such as "colspan", to apply to the + * table cell. + * - content: The string to display in the table cell. + * - active_table_sort: A boolean indicating whether the cell is the active + table sort. + * - footer: Table footer rows, in the same format as the rows variable. + * - empty: The message to display in an extra row if table does not have + * any rows. + * - no_striping: A boolean indicating that the row should receive no striping. + * - header_columns: The number of columns in the header. + * + * @see template_preprocess_table() + */ +#} + + {% if caption %} + + {% endif %} + + {% for colgroup in colgroups %} + {% if colgroup.cols %} + + {% for col in colgroup.cols %} + + {% endfor %} + + {% else %} + + {% endif %} + {% endfor %} + + {% if header %} + + + {% for cell in header %} + {% + set cell_classes = [ + cell.active_table_sort ? 'is-active', + ] + %} + <{{ cell.tag }}{{ cell.attributes.addClass(cell_classes) }}> + {{- cell.content -}} + + {% endfor %} + + + {% endif %} + + {% if rows %} + + {% for row in rows %} + {% + set row_classes = [ + not no_striping ? cycle(['odd', 'even'], loop.index0), + ] + %} + + {% for cell in row.cells %} + <{{ cell.tag }}{{ cell.attributes }}> + {{- cell.content -}} + + {% endfor %} + + {% endfor %} + + {% elseif empty %} + + + + + + {% endif %} + {% if footer %} + + {% for row in footer %} + + {% for cell in row.cells %} + <{{ cell.tag }}{{ cell.attributes }}> + {{- cell.content -}} + + {% endfor %} + + {% endfor %} + + {% endif %} +
tag. + * - colgroups: Column groups. Each group contains the following properties: + * - attributes: HTML attributes to apply to the
{{ caption }}
{{ empty }}
diff --git a/templates/classy/field/field--comment.html.twig b/templates/classy/field/field--comment.html.twig new file mode 100644 index 0000000..1ec3ee6 --- /dev/null +++ b/templates/classy/field/field--comment.html.twig @@ -0,0 +1,57 @@ +{# +/** + * @file + * Theme override for comment fields. + * + * Available variables: + * - attributes: HTML attributes for the containing element. + * - label_hidden: Whether to show the field label or not. + * - title_attributes: HTML attributes for the title. + * - label: The label for the field. + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the main title tag that appears in the template. + * - title_suffix: Additional title output populated by modules, intended to + * be displayed after the main title tag that appears in the template. + * - comments: List of comments rendered through comment.html.twig. + * - comment_form: The 'Add new comment' form. + * - comment_display_mode: Is the comments are threaded. + * - comment_type: The comment type bundle ID for the comment field. + * - entity_type: The entity type to which the field belongs. + * - field_name: The name of the field. + * - field_type: The type of the field. + * - label_display: The display settings for the label. + * + * @see template_preprocess_field() + * @see comment_preprocess_field() + */ +#} +{% + set classes = [ + 'field', + 'field--name-' ~ field_name|clean_class, + 'field--type-' ~ field_type|clean_class, + 'field--label-' ~ label_display, + 'comment-wrapper', + ] +%} +{% + set title_classes = [ + 'title', + label_display == 'visually_hidden' ? 'visually-hidden', + ] +%} + + {% if comments and not label_hidden %} + {{ title_prefix }} + {{ label }} + {{ title_suffix }} + {% endif %} + + {{ comments }} + + {% if comment_form %} +

{{ 'Add new comment'|t }}

+ {{ comment_form }} + {% endif %} + + diff --git a/templates/classy/field/field--node--created.html.twig b/templates/classy/field/field--node--created.html.twig new file mode 100644 index 0000000..72d5d67 --- /dev/null +++ b/templates/classy/field/field--node--created.html.twig @@ -0,0 +1,34 @@ +{# +/** + * @file + * Theme override for the node created field. + * + * This is an override of field.html.twig for the node created field. See that + * template for documentation about its details and overrides. + * + * Available variables: + * - attributes: HTML attributes for the containing span element. + * - items: List of all the field items. Each item contains: + * - attributes: List of HTML attributes for each item. + * - content: The field item content. + * - entity_type: The entity type to which the field belongs. + * - field_name: The name of the field. + * - field_type: The type of the field. + * - label_display: The display settings for the label. + * + * @see field.html.twig + */ +#} +{% + set classes = [ + 'field', + 'field--name-' ~ field_name|clean_class, + 'field--type-' ~ field_type|clean_class, + 'field--label-' ~ label_display, + ] +%} + + {%- for item in items -%} + {{ item.content }} + {%- endfor -%} + diff --git a/templates/classy/field/field--node--title.html.twig b/templates/classy/field/field--node--title.html.twig new file mode 100644 index 0000000..33b105f --- /dev/null +++ b/templates/classy/field/field--node--title.html.twig @@ -0,0 +1,34 @@ +{# +/** + * @file + * Theme override for the node title field. + * + * This is an override of field.html.twig for the node title field. See that + * template for documentation about its details and overrides. + * + * Available variables: + * - attributes: HTML attributes for the containing span element. + * - items: List of all the field items. Each item contains: + * - attributes: List of HTML attributes for each item. + * - content: The field item content. + * - entity_type: The entity type to which the field belongs. + * - field_name: The name of the field. + * - field_type: The type of the field. + * - label_display: The display settings for the label. + * + * @see field.html.twig + */ +#} +{% + set classes = [ + 'field', + 'field--name-' ~ field_name|clean_class, + 'field--type-' ~ field_type|clean_class, + 'field--label-' ~ label_display, + ] +%} + + {%- for item in items -%} + {{ item.content }} + {%- endfor -%} + diff --git a/templates/classy/field/field--node--uid.html.twig b/templates/classy/field/field--node--uid.html.twig new file mode 100644 index 0000000..9afc591 --- /dev/null +++ b/templates/classy/field/field--node--uid.html.twig @@ -0,0 +1,34 @@ +{# +/** + * @file + * Theme override for the node user field. + * + * This is an override of field.html.twig for the node user field. See that + * template for documentation about its details and overrides. + * + * Available variables: + * - attributes: HTML attributes for the containing span element. + * - items: List of all the field items. Each item contains: + * - attributes: List of HTML attributes for each item. + * - content: The field item content. + * - entity_type: The entity type to which the field belongs. + * - field_name: The name of the field. + * - field_type: The type of the field. + * - label_display: The display settings for the label. + * + * @see field.html.twig + */ +#} +{% + set classes = [ + 'field', + 'field--name-' ~ field_name|clean_class, + 'field--type-' ~ field_type|clean_class, + 'field--label-' ~ label_display, + ] +%} + + {%- for item in items -%} + {{ item.content }} + {%- endfor -%} + diff --git a/templates/classy/field/field--text-long.html.twig b/templates/classy/field/field--text-long.html.twig new file mode 100644 index 0000000..07ce721 --- /dev/null +++ b/templates/classy/field/field--text-long.html.twig @@ -0,0 +1 @@ +{% extends "field--text.html.twig" %} diff --git a/templates/classy/field/field--text-with-summary.html.twig b/templates/classy/field/field--text-with-summary.html.twig new file mode 100644 index 0000000..07ce721 --- /dev/null +++ b/templates/classy/field/field--text-with-summary.html.twig @@ -0,0 +1 @@ +{% extends "field--text.html.twig" %} diff --git a/templates/classy/field/field--text.html.twig b/templates/classy/field/field--text.html.twig new file mode 100644 index 0000000..5d1690c --- /dev/null +++ b/templates/classy/field/field--text.html.twig @@ -0,0 +1,28 @@ +{% extends "field.html.twig" %} +{# +/** + * @file + * Default theme implementation for a text field. + * + * A 'clearfix' class is added, because 'text' fields have a 'format' property + * that allows a Text Format to be associated with the entered text, which then + * applies filtering on output. A common use case is to align images to the left + * or right, and without this 'clearfix' class, such aligned images may be + * rendered outside of the 'text' field formatter's boundaries, and hence + * overlap with other fields. By setting the 'clearfix' class on all 'text' + * fields, we prevent that. + * + * @see https://www.drupal.org/node/2358529 + * + * A 'text-formatted' class is added to assist with default styling of base + * elements such as paragraphs and lists that may not have classes assigned to + * them. This allows user entered content to have default styling without + * interfering with the styles of other UI components such as system generated + * lists or other dynamic content. + * + * @see https://www.drupal.org/node/2539860 + * + * @ingroup themeable + */ +#} +{% set attributes = attributes.addClass('clearfix', 'text-formatted') %} diff --git a/templates/classy/field/field.html.twig b/templates/classy/field/field.html.twig new file mode 100644 index 0000000..1cfbd65 --- /dev/null +++ b/templates/classy/field/field.html.twig @@ -0,0 +1,81 @@ +{# +/** + * @file + * Theme override for a field. + * + * To override output, copy the "field.html.twig" from the templates directory + * to your theme's directory and customize it, just like customizing other + * Drupal templates such as page.html.twig or node.html.twig. + * + * Instead of overriding the theming for all fields, you can also just override + * theming for a subset of fields using + * @link themeable Theme hook suggestions. @endlink For example, + * here are some theme hook suggestions that can be used for a field_foo field + * on an article node type: + * - field--node--field-foo--article.html.twig + * - field--node--field-foo.html.twig + * - field--node--article.html.twig + * - field--field-foo.html.twig + * - field--text-with-summary.html.twig + * - field.html.twig + * + * Available variables: + * - attributes: HTML attributes for the containing element. + * - label_hidden: Whether to show the field label or not. + * - title_attributes: HTML attributes for the title. + * - label: The label for the field. + * - multiple: TRUE if a field can contain multiple items. + * - items: List of all the field items. Each item contains: + * - attributes: List of HTML attributes for each item. + * - content: The field item's content. + * - entity_type: The entity type to which the field belongs. + * - field_name: The name of the field. + * - field_type: The type of the field. + * - label_display: The display settings for the label. + * + * + * @see template_preprocess_field() + */ +#} +{% + set classes = [ + 'field', + 'field--name-' ~ field_name|clean_class, + 'field--type-' ~ field_type|clean_class, + 'field--label-' ~ label_display, + label_display == 'inline' ? 'clearfix', + ] +%} +{% + set title_classes = [ + 'field__label', + label_display == 'visually_hidden' ? 'visually-hidden', + ] +%} + +{% if label_hidden %} + {% if multiple %} + + {% for item in items %} + {{ item.content }} + {% endfor %} + + {% else %} + {% for item in items %} + {{ item.content }} + {% endfor %} + {% endif %} +{% else %} + + {{ label }} + {% if multiple %} +
+ {% endif %} + {% for item in items %} + {{ item.content }}
+ {% endfor %} + {% if multiple %} + + {% endif %} + +{% endif %} diff --git a/templates/classy/field/file-audio.html.twig b/templates/classy/field/file-audio.html.twig new file mode 100644 index 0000000..9ac5937 --- /dev/null +++ b/templates/classy/field/file-audio.html.twig @@ -0,0 +1,23 @@ +{# +/** +* @file +* Default theme implementation to display the file entity as an audio tag. +* +* Available variables: +* - attributes: An array of HTML attributes, intended to be added to the +* audio tag. +* - files: And array of files to be added as sources for the audio tag. Each +* element is an array with the following elements: +* - file: The full file object. +* - source_attributes: An array of HTML attributes for to be added to the +* source tag. +* +* @ingroup themeable +*/ +#} +{{ attach_library('lark/classy.file') }} + diff --git a/templates/classy/field/file-video.html.twig b/templates/classy/field/file-video.html.twig new file mode 100644 index 0000000..7a51ca0 --- /dev/null +++ b/templates/classy/field/file-video.html.twig @@ -0,0 +1,23 @@ +{# +/** +* @file +* Default theme implementation to display the file entity as a video tag. +* +* Available variables: +* - attributes: An array of HTML attributes, intended to be added to the +* video tag. +* - files: And array of files to be added as sources for the video tag. Each +* element is an array with the following elements: +* - file: The full file object. +* - source_attributes: An array of HTML attributes for to be added to the +* source tag. +* +* @ingroup themeable +*/ +#} +{{ attach_library('lark/classy.file') }} + diff --git a/templates/classy/field/image.html.twig b/templates/classy/field/image.html.twig new file mode 100644 index 0000000..31f782b --- /dev/null +++ b/templates/classy/field/image.html.twig @@ -0,0 +1,18 @@ +{# +/** + * @file + * Theme override of an image. + * + * Available variables: + * - attributes: HTML attributes for the img tag. + * - style_name: (optional) The name of the image style applied. + * + * @see template_preprocess_image() + */ +#} +{% +set classes = [ + style_name ? 'image-style-' ~ style_name|clean_class, +] +%} + diff --git a/templates/classy/field/link-formatter-link-separate.html.twig b/templates/classy/field/link-formatter-link-separate.html.twig new file mode 100644 index 0000000..52c8d29 --- /dev/null +++ b/templates/classy/field/link-formatter-link-separate.html.twig @@ -0,0 +1,22 @@ +{# +/** + * @file + * Theme override of a link with separate title and URL elements. + * + * Available variables: + * - link: The link that has already been formatted by l(). + * - title: (optional) A descriptive or alternate title for the link, which may + * be different than the actual link text. + * + * @see template_preprocess() + * @see template_preprocess_link_formatter_link_separate() + */ +#} +{% apply spaceless %} +
+ {% if title %} +
{{ title }}
+ {% endif %} +
{{ link }}
+
+{% endapply %} diff --git a/templates/classy/field/time.html.twig b/templates/classy/field/time.html.twig new file mode 100644 index 0000000..f2912b7 --- /dev/null +++ b/templates/classy/field/time.html.twig @@ -0,0 +1,22 @@ +{# +/** + * @file + * Theme override for a date / time element. + * + * Available variables + * - timestamp: (optional) A UNIX timestamp for the datetime attribute. If the + * datetime cannot be represented as a UNIX timestamp, use a valid datetime + * attribute value in attributes.datetime. + * - text: (optional) The content to display within the