From 939163b9e6c91eb37bd07c460b8bc71683fb9a00 Mon Sep 17 00:00:00 2001 From: rdrew Date: Thu, 9 Nov 2023 11:33:48 -0400 Subject: [PATCH] 1st --- .gitignore | 1 + .olivero.libraries.yml.swp | Bin 0 -> 16384 bytes README.md | 100 + build.sh | 46 + config/install/olivera.settings.yml | 15 + .../block.block.olivera_account_menu.yml | 24 + .../block.block.olivera_book_navigation.yml | 20 + .../block.block.olivera_breadcrumbs.yml | 19 + .../optional/block.block.olivera_content.yml | 19 + config/optional/block.block.olivera_help.yml | 19 + .../block.block.olivera_main_menu.yml | 24 + .../optional/block.block.olivera_messages.yml | 19 + .../block.block.olivera_page_title.yml | 17 + .../optional/block.block.olivera_powered.yml | 19 + ...ck.block.olivera_primary_admin_actions.yml | 17 + ...lock.block.olivera_primary_local_tasks.yml | 19 + ...block.block.olivera_search_form_narrow.yml | 20 + .../block.block.olivera_search_form_wide.yml | 20 + ...ck.block.olivera_secondary_local_tasks.yml | 19 + .../block.block.olivera_site_branding.yml | 22 + .../block.block.olivera_syndicate.yml | 20 + .../core.date_format.olivera_medium.yml | 10 + config/schema/olivera.schema.yml | 26 + css/base/base.css | 158 + css/base/base.pcss.css | 140 + css/base/fonts.css | 65 + css/base/fonts.pcss.css | 64 + css/base/media-queries.css | 19 + css/base/media-queries.pcss.css | 18 + css/base/variables.css | 165 + css/base/variables.pcss.css | 142 + css/components/.details.css.swp | Bin 0 -> 12288 bytes css/components/action-links.css | 28 + css/components/action-links.pcss.css | 27 + css/components/ajax-progress.module.css | 111 + css/components/ajax-progress.module.pcss.css | 102 + .../autocomplete-loading.module.css | 31 + .../autocomplete-loading.module.pcss.css | 26 + css/components/block.css | 23 + css/components/block.pcss.css | 18 + css/components/book.css | 106 + css/components/book.pcss.css | 104 + css/components/breadcrumb.css | 129 + css/components/breadcrumb.pcss.css | 111 + css/components/button.css | 143 + css/components/button.pcss.css | 131 + css/components/cke-dialog.css | 16 + css/components/cke-dialog.pcss.css | 8 + css/components/color-picker.css | 16 + css/components/color-picker.pcss.css | 11 + css/components/comments.css | 258 + css/components/comments.pcss.css | 233 + css/components/container-inline.module.css | 25 + .../container-inline.module.pcss.css | 18 + css/components/content-moderation.css | 94 + css/components/content-moderation.pcss.css | 67 + css/components/details.css | 133 + css/components/details.pcss.css | 115 + css/components/dropbutton.css | 165 + css/components/dropbutton.pcss.css | 157 + css/components/embedded-media.css | 150 + css/components/embedded-media.pcss.css | 127 + css/components/feed.css | 47 + css/components/feed.pcss.css | 41 + css/components/field.css | 62 + css/components/field.pcss.css | 53 + css/components/fieldset.css | 136 + css/components/fieldset.pcss.css | 133 + css/components/footer.css | 45 + css/components/footer.pcss.css | 39 + css/components/form-boolean.css | 115 + css/components/form-boolean.pcss.css | 99 + css/components/form-select.css | 99 + css/components/form-select.pcss.css | 84 + css/components/form-text.css | 114 + css/components/form-text.pcss.css | 90 + css/components/form-textarea.css | 18 + css/components/form-textarea.pcss.css | 13 + css/components/form.css | 212 + css/components/form.pcss.css | 193 + css/components/forum.css | 22 + css/components/forum.pcss.css | 19 + css/components/header-buttons-mobile.css | 40 + css/components/header-buttons-mobile.pcss.css | 29 + css/components/header-navigation.css | 145 + css/components/header-navigation.pcss.css | 128 + css/components/header-search-narrow.css | 191 + css/components/header-search-narrow.pcss.css | 173 + css/components/header-search-wide.css | 288 + css/components/header-search-wide.pcss.css | 282 + css/components/header-site-branding.css | 146 + css/components/header-site-branding.pcss.css | 120 + css/components/header-sticky-toggle.css | 96 + css/components/header-sticky-toggle.pcss.css | 91 + css/components/hero.css | 59 + css/components/hero.pcss.css | 43 + css/components/links.css | 33 + css/components/links.pcss.css | 28 + css/components/maintenance-page.css | 31 + css/components/maintenance-page.pcss.css | 27 + css/components/messages.css | 164 + css/components/messages.pcss.css | 159 + css/components/navigation/menu-sidebar.css | 62 + .../navigation/menu-sidebar.pcss.css | 57 + .../navigation/nav-button-mobile.css | 113 + .../navigation/nav-button-mobile.pcss.css | 102 + .../navigation/nav-primary-button.css | 135 + .../navigation/nav-primary-button.pcss.css | 131 + .../navigation/nav-primary-no-js.css | 148 + .../navigation/nav-primary-no-js.pcss.css | 150 + .../navigation/nav-primary-wide.css | 221 + .../navigation/nav-primary-wide.pcss.css | 225 + css/components/navigation/nav-primary.css | 205 + .../navigation/nav-primary.pcss.css | 201 + css/components/navigation/nav-secondary.css | 112 + .../navigation/nav-secondary.pcss.css | 114 + css/components/navigation/wide-nav-expand.css | 114 + .../navigation/wide-nav-expand.pcss.css | 109 + css/components/node-preview-container.css | 39 + .../node-preview-container.pcss.css | 34 + css/components/node-teaser.css | 136 + css/components/node-teaser.pcss.css | 116 + css/components/node.css | 75 + css/components/node.pcss.css | 67 + css/components/page-title.css | 19 + css/components/page-title.pcss.css | 14 + css/components/pager.css | 88 + css/components/pager.pcss.css | 82 + css/components/powered-by-block.css | 49 + css/components/powered-by-block.pcss.css | 44 + css/components/progress.css | 27 + css/components/progress.pcss.css | 22 + css/components/search-results.css | 111 + css/components/search-results.pcss.css | 97 + css/components/site-header.css | 109 + css/components/site-header.pcss.css | 104 + css/components/skip-link.css | 49 + css/components/skip-link.pcss.css | 38 + css/components/table.css | 95 + css/components/table.pcss.css | 93 + css/components/tabledrag.css | 59 + css/components/tabledrag.pcss.css | 54 + css/components/tabs.css | 191 + css/components/tabs.pcss.css | 205 + css/components/tags.css | 89 + css/components/tags.pcss.css | 83 + css/components/text-content.css | 189 + css/components/text-content.pcss.css | 153 + css/components/ui-dialog.css | 35 + css/components/ui-dialog.pcss.css | 30 + css/components/vertical-tabs.css | 110 + css/components/vertical-tabs.pcss.css | 98 + css/components/wide-image.css | 55 + css/components/wide-image.pcss.css | 42 + css/layout/grid.css | 64 + css/layout/grid.pcss.css | 50 + css/layout/layout-builder-fourcol-section.css | 75 + .../layout-builder-fourcol-section.pcss.css | 66 + .../layout-builder-threecol-section.css | 72 + .../layout-builder-threecol-section.pcss.css | 79 + css/layout/layout-builder-twocol-section.css | 77 + .../layout-builder-twocol-section.pcss.css | 84 + css/layout/layout-content-medium.css | 55 + css/layout/layout-content-medium.pcss.css | 39 + css/layout/layout-content-narrow.css | 138 + css/layout/layout-content-narrow.pcss.css | 105 + .../layout-discovery-section-layout.css | 27 + .../layout-discovery-section-layout.pcss.css | 18 + css/layout/layout-footer.css | 57 + css/layout/layout-footer.pcss.css | 44 + css/layout/layout-sidebar.css | 59 + css/layout/layout-sidebar.pcss.css | 48 + css/layout/layout-views-grid.css | 47 + css/layout/layout-views-grid.pcss.css | 43 + css/layout/layout.css | 67 + css/layout/layout.pcss.css | 57 + css/layout/region-content-below.css | 46 + css/layout/region-content-below.pcss.css | 41 + css/layout/region-content.css | 27 + css/layout/region-content.pcss.css | 18 + css/layout/region-hero.css | 15 + css/layout/region-hero.pcss.css | 12 + css/layout/region-secondary-menu.css | 33 + css/layout/region-secondary-menu.pcss.css | 30 + css/layout/region.css | 27 + css/layout/region.pcss.css | 18 + css/layout/social-bar.css | 114 + css/layout/social-bar.pcss.css | 105 + css/layout/views.css | 25 + css/layout/views.pcss.css | 20 + css/theme/filter.theme.css | 94 + css/theme/filter.theme.pcss.css | 80 + favicon.ico | Bin 0 -> 4286 bytes fonts/lora/lora-v14-latin-700.woff2 | Bin 0 -> 25588 bytes fonts/lora/lora-v14-latin-italic.woff2 | Bin 0 -> 26096 bytes fonts/lora/lora-v14-latin-regular.woff2 | Bin 0 -> 24552 bytes fonts/metropolis/Metropolis-Bold.woff2 | Bin 0 -> 16728 bytes fonts/metropolis/Metropolis-Regular.woff2 | Bin 0 -> 16388 bytes fonts/metropolis/Metropolis-SemiBold.woff2 | Bin 0 -> 26564 bytes images/background.svg | 3 + images/chevron-down.svg | 3 + images/drupal.svg | 3 + images/error.svg | 3 + images/info.svg | 3 + images/magnifying-glass.svg | 3 + images/pager-first.svg | 3 + images/pager-previous.svg | 3 + images/rss.svg | 3 + images/search--white.svg | 3 + images/search.svg | 3 + images/site-under-maintenance-icon.svg | 1 + images/status.svg | 3 + images/throbber.svg | 6 + images/warning.svg | 3 + js/checkbox.js | 15 + js/color-picker.js | 190 + js/comments.js | 63 + js/message.theme.js | 81 + js/messages.js | 55 + js/nav-resize.js | 86 + js/navigation-utils.js | 215 + js/navigation.js | 160 + js/search.js | 153 + js/second-level-navigation.js | 197 + js/tabs.js | 69 + logo.svg | 1 + olivera.breakpoints.yml | 48 + olivera.info.yml | 82 + olivera.libraries.yml | 297 + olivera.post_update.php | 15 + olivera.theme | 694 ++ package.json | 99 + screenshot.png | Bin 0 -> 149825 bytes scripts/css/changeOrAdded.js | 15 + scripts/css/check.js | 23 + scripts/css/compile.js | 88 + scripts/css/log.js | 4 + scripts/css/postcss-build.js | 49 + scripts/css/postcss-watch.js | 43 + scripts/js/.eslintrc.json | 5 + scripts/js/babel-es6-build.js | 49 + scripts/js/babel-es6-watch.js | 43 + scripts/js/changeOrAdded.js | 15 + scripts/js/check.js | 23 + scripts/js/compile.js | 31 + scripts/js/eslint-stats-by-type.js | 35 + scripts/js/log.js | 4 + src/OliveraPreRender.php | 54 + .../block/block--page-title-block.html.twig | 49 + ...nu--plugin-id--search-form-block.html.twig | 48 + .../block/block--search-form-block.html.twig | 34 + ...nu--plugin-id--search-form-block.html.twig | 56 + .../block/block--secondary-menu.html.twig | 57 + .../block--system-branding-block.html.twig | 32 + .../block/block--system-menu-block.html.twig | 56 + .../block--system-powered-by-block.html.twig | 21 + templates/block/block.html.twig | 55 + .../content/book-node-export-html.html.twig | 20 + templates/content/comment.html.twig | 119 + templates/content/media.html.twig | 30 + templates/content/node--teaser.html.twig | 105 + templates/content/node.html.twig | 115 + templates/content/page-title.html.twig | 26 + templates/content/search-result.html.twig | 80 + templates/dataset/forum-list.html.twig | 79 + templates/dataset/forums.html.twig | 24 + .../item-list--search-results.html.twig | 34 + templates/dataset/item-list.html.twig | 38 + templates/datetime-form.html.twig | 15 + templates/datetime-wrapper.html.twig | 33 + templates/field/field--comment-body.html.twig | 70 + templates/field/field--comment.html.twig | 62 + .../field/field--node--field-image.html.twig | 26 + .../field/field--node--field-tags.html.twig | 50 + templates/field/field--text-long.html.twig | 1 + .../field/field--text-with-summary.html.twig | 1 + templates/field/field--text.html.twig | 20 + templates/field/field.html.twig | 81 + templates/filter/filter-guidelines.html.twig | 30 + templates/filter/filter-tips.html.twig | 66 + templates/form--search-block-form.html.twig | 21 + templates/form/details.html.twig | 62 + .../form/field-multiple-value-form.html.twig | 50 + templates/form/fieldset.html.twig | 106 + .../input--submit--header-search.html.twig | 17 + templates/includes/get-started.html.twig | 45 + templates/includes/preload.twig | 14 + templates/layout/book-export-html.html.twig | 45 + templates/layout/html.html.twig | 59 + templates/layout/page.html.twig | 135 + templates/layout/region--breadcrumb.html.twig | 29 + .../layout/region--content-above.html.twig | 29 + .../layout/region--content-below.html.twig | 28 + templates/layout/region--content.html.twig | 29 + .../layout/region--footer-bottom.html.twig | 29 + templates/layout/region--footer-top.html.twig | 31 + templates/layout/region--header.html.twig | 17 + .../layout/region--highlighted.html.twig | 29 + .../layout/region--primary-menu.html.twig | 16 + .../layout/region--secondary-menu.html.twig | 27 + templates/layout/region--sidebar.html.twig | 28 + templates/layout/region--social.html.twig | 20 + templates/layout/region.html.twig | 26 + templates/maintenance-page.html.twig | 62 + templates/menu-local-action.html.twig | 17 + templates/misc/feed-icon.html.twig | 24 + templates/misc/status-messages.html.twig | 75 + .../navigation/book-all-books-block.html.twig | 22 + .../navigation/book-navigation.html.twig | 57 + templates/navigation/book-tree.html.twig | 68 + templates/navigation/breadcrumb.html.twig | 27 + templates/navigation/links--comment.html.twig | 60 + templates/navigation/links.html.twig | 55 + .../navigation/menu--primary-menu.html.twig | 139 + .../navigation/menu--secondary-menu.html.twig | 78 + .../navigation/menu-local-task.html.twig | 29 + .../navigation/menu-local-tasks.html.twig | 30 + templates/navigation/menu.html.twig | 84 + templates/navigation/pager.html.twig | 119 + templates/text-format-wrapper.html.twig | 44 + templates/user/user--compact.html.twig | 25 + templates/user/username.html.twig | 31 + templates/views/views-mini-pager.html.twig | 49 + .../views/views-view--frontpage.html.twig | 93 + templates/views/views-view-grid.html.twig | 49 + templates/views/views-view-table.html.twig | 121 + templates/views/views-view.html.twig | 95 + .../Update/OliveroPostUpdateTest.php | 42 + tests/src/Unit/OliveroHexToHslTest.php | 52 + theme-settings.php | 129 + yarn.lock | 6332 +++++++++++++++++ 331 files changed, 28532 insertions(+) create mode 100644 .gitignore create mode 100644 .olivero.libraries.yml.swp create mode 100644 README.md create mode 100644 build.sh create mode 100644 config/install/olivera.settings.yml create mode 100644 config/optional/block.block.olivera_account_menu.yml create mode 100644 config/optional/block.block.olivera_book_navigation.yml create mode 100644 config/optional/block.block.olivera_breadcrumbs.yml create mode 100644 config/optional/block.block.olivera_content.yml create mode 100644 config/optional/block.block.olivera_help.yml create mode 100644 config/optional/block.block.olivera_main_menu.yml create mode 100644 config/optional/block.block.olivera_messages.yml create mode 100644 config/optional/block.block.olivera_page_title.yml create mode 100644 config/optional/block.block.olivera_powered.yml create mode 100644 config/optional/block.block.olivera_primary_admin_actions.yml create mode 100644 config/optional/block.block.olivera_primary_local_tasks.yml create mode 100644 config/optional/block.block.olivera_search_form_narrow.yml create mode 100644 config/optional/block.block.olivera_search_form_wide.yml create mode 100644 config/optional/block.block.olivera_secondary_local_tasks.yml create mode 100644 config/optional/block.block.olivera_site_branding.yml create mode 100644 config/optional/block.block.olivera_syndicate.yml create mode 100644 config/optional/core.date_format.olivera_medium.yml create mode 100644 config/schema/olivera.schema.yml create mode 100644 css/base/base.css create mode 100644 css/base/base.pcss.css create mode 100644 css/base/fonts.css create mode 100644 css/base/fonts.pcss.css create mode 100644 css/base/media-queries.css create mode 100644 css/base/media-queries.pcss.css create mode 100644 css/base/variables.css create mode 100644 css/base/variables.pcss.css create mode 100644 css/components/.details.css.swp create mode 100644 css/components/action-links.css create mode 100644 css/components/action-links.pcss.css create mode 100644 css/components/ajax-progress.module.css create mode 100644 css/components/ajax-progress.module.pcss.css create mode 100644 css/components/autocomplete-loading.module.css create mode 100644 css/components/autocomplete-loading.module.pcss.css create mode 100644 css/components/block.css create mode 100644 css/components/block.pcss.css create mode 100644 css/components/book.css create mode 100644 css/components/book.pcss.css create mode 100644 css/components/breadcrumb.css create mode 100644 css/components/breadcrumb.pcss.css create mode 100644 css/components/button.css create mode 100644 css/components/button.pcss.css create mode 100644 css/components/cke-dialog.css create mode 100644 css/components/cke-dialog.pcss.css create mode 100644 css/components/color-picker.css create mode 100644 css/components/color-picker.pcss.css create mode 100644 css/components/comments.css create mode 100644 css/components/comments.pcss.css create mode 100644 css/components/container-inline.module.css create mode 100644 css/components/container-inline.module.pcss.css create mode 100644 css/components/content-moderation.css create mode 100644 css/components/content-moderation.pcss.css create mode 100644 css/components/details.css create mode 100644 css/components/details.pcss.css create mode 100644 css/components/dropbutton.css create mode 100644 css/components/dropbutton.pcss.css create mode 100644 css/components/embedded-media.css create mode 100644 css/components/embedded-media.pcss.css create mode 100644 css/components/feed.css create mode 100644 css/components/feed.pcss.css create mode 100644 css/components/field.css create mode 100644 css/components/field.pcss.css create mode 100644 css/components/fieldset.css create mode 100644 css/components/fieldset.pcss.css create mode 100644 css/components/footer.css create mode 100644 css/components/footer.pcss.css create mode 100644 css/components/form-boolean.css create mode 100644 css/components/form-boolean.pcss.css create mode 100644 css/components/form-select.css create mode 100644 css/components/form-select.pcss.css create mode 100644 css/components/form-text.css create mode 100644 css/components/form-text.pcss.css create mode 100644 css/components/form-textarea.css create mode 100644 css/components/form-textarea.pcss.css create mode 100644 css/components/form.css create mode 100644 css/components/form.pcss.css create mode 100644 css/components/forum.css create mode 100644 css/components/forum.pcss.css create mode 100644 css/components/header-buttons-mobile.css create mode 100644 css/components/header-buttons-mobile.pcss.css create mode 100644 css/components/header-navigation.css create mode 100644 css/components/header-navigation.pcss.css create mode 100644 css/components/header-search-narrow.css create mode 100644 css/components/header-search-narrow.pcss.css create mode 100644 css/components/header-search-wide.css create mode 100644 css/components/header-search-wide.pcss.css create mode 100644 css/components/header-site-branding.css create mode 100644 css/components/header-site-branding.pcss.css create mode 100644 css/components/header-sticky-toggle.css create mode 100644 css/components/header-sticky-toggle.pcss.css create mode 100644 css/components/hero.css create mode 100644 css/components/hero.pcss.css create mode 100644 css/components/links.css create mode 100644 css/components/links.pcss.css create mode 100644 css/components/maintenance-page.css create mode 100644 css/components/maintenance-page.pcss.css create mode 100644 css/components/messages.css create mode 100644 css/components/messages.pcss.css create mode 100644 css/components/navigation/menu-sidebar.css create mode 100644 css/components/navigation/menu-sidebar.pcss.css create mode 100644 css/components/navigation/nav-button-mobile.css create mode 100644 css/components/navigation/nav-button-mobile.pcss.css create mode 100644 css/components/navigation/nav-primary-button.css create mode 100644 css/components/navigation/nav-primary-button.pcss.css create mode 100644 css/components/navigation/nav-primary-no-js.css create mode 100644 css/components/navigation/nav-primary-no-js.pcss.css create mode 100644 css/components/navigation/nav-primary-wide.css create mode 100644 css/components/navigation/nav-primary-wide.pcss.css create mode 100644 css/components/navigation/nav-primary.css create mode 100644 css/components/navigation/nav-primary.pcss.css create mode 100644 css/components/navigation/nav-secondary.css create mode 100644 css/components/navigation/nav-secondary.pcss.css create mode 100644 css/components/navigation/wide-nav-expand.css create mode 100644 css/components/navigation/wide-nav-expand.pcss.css create mode 100644 css/components/node-preview-container.css create mode 100644 css/components/node-preview-container.pcss.css create mode 100644 css/components/node-teaser.css create mode 100644 css/components/node-teaser.pcss.css create mode 100644 css/components/node.css create mode 100644 css/components/node.pcss.css create mode 100644 css/components/page-title.css create mode 100644 css/components/page-title.pcss.css create mode 100644 css/components/pager.css create mode 100644 css/components/pager.pcss.css create mode 100644 css/components/powered-by-block.css create mode 100644 css/components/powered-by-block.pcss.css create mode 100644 css/components/progress.css create mode 100644 css/components/progress.pcss.css create mode 100644 css/components/search-results.css create mode 100644 css/components/search-results.pcss.css create mode 100644 css/components/site-header.css create mode 100644 css/components/site-header.pcss.css create mode 100644 css/components/skip-link.css create mode 100644 css/components/skip-link.pcss.css create mode 100644 css/components/table.css create mode 100644 css/components/table.pcss.css create mode 100644 css/components/tabledrag.css create mode 100644 css/components/tabledrag.pcss.css create mode 100644 css/components/tabs.css create mode 100644 css/components/tabs.pcss.css create mode 100644 css/components/tags.css create mode 100644 css/components/tags.pcss.css create mode 100644 css/components/text-content.css create mode 100644 css/components/text-content.pcss.css create mode 100644 css/components/ui-dialog.css create mode 100644 css/components/ui-dialog.pcss.css create mode 100644 css/components/vertical-tabs.css create mode 100644 css/components/vertical-tabs.pcss.css create mode 100644 css/components/wide-image.css create mode 100644 css/components/wide-image.pcss.css create mode 100644 css/layout/grid.css create mode 100644 css/layout/grid.pcss.css create mode 100644 css/layout/layout-builder-fourcol-section.css create mode 100644 css/layout/layout-builder-fourcol-section.pcss.css create mode 100644 css/layout/layout-builder-threecol-section.css create mode 100644 css/layout/layout-builder-threecol-section.pcss.css create mode 100644 css/layout/layout-builder-twocol-section.css create mode 100644 css/layout/layout-builder-twocol-section.pcss.css create mode 100644 css/layout/layout-content-medium.css create mode 100644 css/layout/layout-content-medium.pcss.css create mode 100644 css/layout/layout-content-narrow.css create mode 100644 css/layout/layout-content-narrow.pcss.css create mode 100644 css/layout/layout-discovery-section-layout.css create mode 100644 css/layout/layout-discovery-section-layout.pcss.css create mode 100644 css/layout/layout-footer.css create mode 100644 css/layout/layout-footer.pcss.css create mode 100644 css/layout/layout-sidebar.css create mode 100644 css/layout/layout-sidebar.pcss.css create mode 100644 css/layout/layout-views-grid.css create mode 100644 css/layout/layout-views-grid.pcss.css create mode 100644 css/layout/layout.css create mode 100644 css/layout/layout.pcss.css create mode 100644 css/layout/region-content-below.css create mode 100644 css/layout/region-content-below.pcss.css create mode 100644 css/layout/region-content.css create mode 100644 css/layout/region-content.pcss.css create mode 100644 css/layout/region-hero.css create mode 100644 css/layout/region-hero.pcss.css create mode 100644 css/layout/region-secondary-menu.css create mode 100644 css/layout/region-secondary-menu.pcss.css create mode 100644 css/layout/region.css create mode 100644 css/layout/region.pcss.css create mode 100644 css/layout/social-bar.css create mode 100644 css/layout/social-bar.pcss.css create mode 100644 css/layout/views.css create mode 100644 css/layout/views.pcss.css create mode 100644 css/theme/filter.theme.css create mode 100644 css/theme/filter.theme.pcss.css create mode 100644 favicon.ico create mode 100644 fonts/lora/lora-v14-latin-700.woff2 create mode 100644 fonts/lora/lora-v14-latin-italic.woff2 create mode 100644 fonts/lora/lora-v14-latin-regular.woff2 create mode 100644 fonts/metropolis/Metropolis-Bold.woff2 create mode 100644 fonts/metropolis/Metropolis-Regular.woff2 create mode 100644 fonts/metropolis/Metropolis-SemiBold.woff2 create mode 100644 images/background.svg create mode 100644 images/chevron-down.svg create mode 100644 images/drupal.svg create mode 100644 images/error.svg create mode 100644 images/info.svg create mode 100644 images/magnifying-glass.svg create mode 100644 images/pager-first.svg create mode 100644 images/pager-previous.svg create mode 100644 images/rss.svg create mode 100644 images/search--white.svg create mode 100644 images/search.svg create mode 100644 images/site-under-maintenance-icon.svg create mode 100644 images/status.svg create mode 100644 images/throbber.svg create mode 100644 images/warning.svg create mode 100644 js/checkbox.js create mode 100644 js/color-picker.js create mode 100644 js/comments.js create mode 100644 js/message.theme.js create mode 100644 js/messages.js create mode 100644 js/nav-resize.js create mode 100644 js/navigation-utils.js create mode 100644 js/navigation.js create mode 100644 js/search.js create mode 100644 js/second-level-navigation.js create mode 100644 js/tabs.js create mode 100644 logo.svg create mode 100644 olivera.breakpoints.yml create mode 100644 olivera.info.yml create mode 100644 olivera.libraries.yml create mode 100644 olivera.post_update.php create mode 100644 olivera.theme create mode 100644 package.json create mode 100644 screenshot.png create mode 100644 scripts/css/changeOrAdded.js create mode 100644 scripts/css/check.js create mode 100644 scripts/css/compile.js create mode 100644 scripts/css/log.js create mode 100644 scripts/css/postcss-build.js create mode 100644 scripts/css/postcss-watch.js create mode 100644 scripts/js/.eslintrc.json create mode 100644 scripts/js/babel-es6-build.js create mode 100644 scripts/js/babel-es6-watch.js create mode 100644 scripts/js/changeOrAdded.js create mode 100644 scripts/js/check.js create mode 100644 scripts/js/compile.js create mode 100644 scripts/js/eslint-stats-by-type.js create mode 100644 scripts/js/log.js create mode 100644 src/OliveraPreRender.php create mode 100644 templates/block/block--page-title-block.html.twig create mode 100644 templates/block/block--primary-menu--plugin-id--search-form-block.html.twig create mode 100644 templates/block/block--search-form-block.html.twig create mode 100644 templates/block/block--secondary-menu--plugin-id--search-form-block.html.twig create mode 100644 templates/block/block--secondary-menu.html.twig create mode 100644 templates/block/block--system-branding-block.html.twig create mode 100644 templates/block/block--system-menu-block.html.twig create mode 100644 templates/block/block--system-powered-by-block.html.twig create mode 100644 templates/block/block.html.twig create mode 100644 templates/content/book-node-export-html.html.twig create mode 100644 templates/content/comment.html.twig create mode 100644 templates/content/media.html.twig create mode 100644 templates/content/node--teaser.html.twig create mode 100644 templates/content/node.html.twig create mode 100644 templates/content/page-title.html.twig create mode 100644 templates/content/search-result.html.twig create mode 100644 templates/dataset/forum-list.html.twig create mode 100644 templates/dataset/forums.html.twig create mode 100644 templates/dataset/item-list--search-results.html.twig create mode 100644 templates/dataset/item-list.html.twig create mode 100644 templates/datetime-form.html.twig create mode 100644 templates/datetime-wrapper.html.twig create mode 100644 templates/field/field--comment-body.html.twig create mode 100644 templates/field/field--comment.html.twig create mode 100644 templates/field/field--node--field-image.html.twig create mode 100644 templates/field/field--node--field-tags.html.twig create mode 100644 templates/field/field--text-long.html.twig create mode 100644 templates/field/field--text-with-summary.html.twig create mode 100644 templates/field/field--text.html.twig create mode 100644 templates/field/field.html.twig create mode 100644 templates/filter/filter-guidelines.html.twig create mode 100644 templates/filter/filter-tips.html.twig create mode 100644 templates/form--search-block-form.html.twig create mode 100644 templates/form/details.html.twig create mode 100644 templates/form/field-multiple-value-form.html.twig create mode 100644 templates/form/fieldset.html.twig create mode 100644 templates/form/input--submit--header-search.html.twig create mode 100644 templates/includes/get-started.html.twig create mode 100644 templates/includes/preload.twig create mode 100644 templates/layout/book-export-html.html.twig create mode 100644 templates/layout/html.html.twig create mode 100644 templates/layout/page.html.twig create mode 100644 templates/layout/region--breadcrumb.html.twig create mode 100644 templates/layout/region--content-above.html.twig create mode 100644 templates/layout/region--content-below.html.twig create mode 100644 templates/layout/region--content.html.twig create mode 100644 templates/layout/region--footer-bottom.html.twig create mode 100644 templates/layout/region--footer-top.html.twig create mode 100644 templates/layout/region--header.html.twig create mode 100644 templates/layout/region--highlighted.html.twig create mode 100644 templates/layout/region--primary-menu.html.twig create mode 100644 templates/layout/region--secondary-menu.html.twig create mode 100644 templates/layout/region--sidebar.html.twig create mode 100644 templates/layout/region--social.html.twig create mode 100644 templates/layout/region.html.twig create mode 100644 templates/maintenance-page.html.twig create mode 100644 templates/menu-local-action.html.twig create mode 100644 templates/misc/feed-icon.html.twig create mode 100644 templates/misc/status-messages.html.twig create mode 100644 templates/navigation/book-all-books-block.html.twig create mode 100644 templates/navigation/book-navigation.html.twig create mode 100644 templates/navigation/book-tree.html.twig create mode 100644 templates/navigation/breadcrumb.html.twig create mode 100644 templates/navigation/links--comment.html.twig create mode 100644 templates/navigation/links.html.twig create mode 100644 templates/navigation/menu--primary-menu.html.twig create mode 100644 templates/navigation/menu--secondary-menu.html.twig create mode 100644 templates/navigation/menu-local-task.html.twig create mode 100644 templates/navigation/menu-local-tasks.html.twig create mode 100644 templates/navigation/menu.html.twig create mode 100644 templates/navigation/pager.html.twig create mode 100644 templates/text-format-wrapper.html.twig create mode 100644 templates/user/user--compact.html.twig create mode 100644 templates/user/username.html.twig create mode 100644 templates/views/views-mini-pager.html.twig create mode 100644 templates/views/views-view--frontpage.html.twig create mode 100644 templates/views/views-view-grid.html.twig create mode 100644 templates/views/views-view-table.html.twig create mode 100644 templates/views/views-view.html.twig create mode 100644 tests/src/Functional/Update/OliveroPostUpdateTest.php create mode 100644 tests/src/Unit/OliveroHexToHslTest.php create mode 100644 theme-settings.php create mode 100644 yarn.lock diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..c2658d7 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules/ diff --git a/.olivero.libraries.yml.swp b/.olivero.libraries.yml.swp new file mode 100644 index 0000000000000000000000000000000000000000..e00bd58cfd4a5ad9e65d549981d5c5196cc90cf6 GIT binary patch literal 16384 zcmeI3e~cVe9l&2(eu*I3YC}YmrBi z@6F11Y}450%A9nNjASL5mUYTQRTPD-_p~gz5+4$ zupKso1*>5toH|R06L1Kgg#~yL9)mqF0}^h83Ah3_!g{z6{&J=ee}-Sf&)^_@AHE2? zAc9G_1twqvTml!tIj{mwpTYRR5m%uWB4~|D)ar0~sW7 zWh#uC^)g?Mmv((gD2aCAI3HC3Z`=@xy)YOrZQXM7XRp2KMv+zvAHx8Els~0H5;~H zR;tQcl{ROUTDNPsX%pKu8RIZlHe}$+pvoN^)$CGfM_ke6+HpHtqropo^mt!e)Rp@6 zt?5~=XZvAoS>4I1_S5Y~VZ&)ANf;Q)+v7B7JUVszYL|?I9~-KN4zrt8>Zel;E)j3l z8K%fih-O3mNG;boCObL|YrZ`nHj_#uYiLiSNf~scAI=%JGPyx6YBe^kt8EY^G_tOq z+HzNbs37WkuG^wZezaRPwONY^f!ks_$$!^J&g@Q22+s?qj+YyJrAS+ABx zt>xIU;r_&S9NY1Y??xPwbQD!wP0Q+x6Yey}BQ5O-tT~Sv)2lO?8QtoUqglRmBio#P zdd1|54jWWKZFga>`zO2S%g zSmRnXl;^pE8n|9CBzAO-jz30fQs%FCB!{uhsavu1Wi=VBI~7cbWjm7gh@vBiF&FsK zHdm^i!BDn`=<=j*Zkl?PD3MqW>1KO}WO)H$BFn6V&0zzZvrp(XABJk*I56&I-I1;< zU8^qHoD7zA7zVe>*47y!$9-yZDlq1K7P)j`)hoN&CFVUDx;PH2?6;Vp^EzT~4q}Nb zT|1hmGeI+_jiz{?=gkz-n}%V^`j==9~_25a1g!+--Y{N7knPJ!wqm5Y=(Ej8E~2$!%Of>I0jFH%0YYw z9)R26V)zsJhL_+7JP!B59dH|LgDo%y8{s{0lKjFS;W+#Ro`xU5-EbE)!GUdX1AGA9 z4{Ko+{EPg;U*RAuzybI=JOE#YTj3VC9zG72!a6ujUg1^v4Lk??;R$#Yz6$riEVObG z*YNv?!Gd)l;Ge|G%Wx7-z%e)sDnFs(=wT>cg$D``ya5k%mWlRCPx8vHnbZByQ<|!w zPiY*WIP8paC{M)}?{P*jOb8)#?Va(XttLmk!Vs@=~@=RB64PupAFrH_0^ z6NfOpVb)eVsntb7IyI6TvWQuD)w@G>!ZuC4W|}Qu&Pw0vDC?5SE6B35D(=;;vpqtw z>bB0-q#n=@Q*Zc>T5*&URKCqOjpC!AhlHzG@Y#CEe`hUq*ren~Gl^&t3o + Use the provided script to copy the theme +
+ +### Run the build script. + +Note, this is only tested on MacOS, and is heavily reliant on code from Stack Overflow. Contributions are welcome! + +1. Copy this repository into the Drupal's `/themes/` directory. +2. Rename this directory into the your themes name. +3. Use the terminal to `cd` into the theme's directory. +4. run `sh ./build.sh` to start the process to generate the theme. +5. Enter the name of the theme when prompted (example: `Mytheme`). +
+ + +
+ Manually copy theme and rename files +
+ + ### Copy the theme directory. + + 1. Copy the `/core/themes/olivero` directory into the `/themes/` directory. + 2. Rename the files in the new theme. + 1. Change the directory name from `olivero` to the new theme name (in these example, we'll use `coco`). So rename the `olivero` directory to `coco` (Coco is my dogs name). + 2. Rename the `olivero.info.yml` file to `coco.info.yml` + 3. Rename `olivero.breakpoints.yml` file to `coco.breakpoints.yml` + 4. Rename `olivero.libraries.yml` file to `coco.libraries.yml` + 5. Rename `olivero.theme` file to `coco.theme` + 6. Rename all of the `olivero` config within the theme's `config` directory to `coco`. For example, rename `block.block.olivero_account_menu.yml` to `block.block.coco_account_menu.yml`. There are a number of files in there to rename. + 7. Rename `/src/OliveroPreRender.php` to `/src/CocoPreRender.php`. + 3. Do a global search and replace for the name. When you search and replace, be case-sensitive + 1. Search and replace `Olivero` with `Coco`. + 2. Search and replace `olivero` with `coco`. + 4. Within the `coco.info.yml` file, replace `experimental: true` with `core_version_requirement: ^9`. + 5. Move all of the "block" config files (starting with "block") from `config/install` to `config/optional`. + 6. Move the `core.date_format.coco_medium.info.yml` from `config/install` to `config/optional`. + + + ### Copy the CSS and JavaScript compilation scripts. + Copy all of the files this repository into the new theme. These scripts will enable you to make change in the source files and have them compile down to regular CSS and JS. + + The most important files are: + + * `package.json` file + * `yarn.lock` file + * `scripts/` directory - this contains the CSS and JS compilation scripts. + +
+
+ +### Enable the new theme. +You should now see the new theme listed under `appearance > themes`. Install the new theme and set it to be the default. + +It should look exactly like the default core Olivero theme. + +### Install Node dependencies. +First make sure you have [Node](https://nodejs.org/en/download/), and [Yarn](https://classic.yarnpkg.com/en/docs/install/) installed. + +Then run `yarn install` to install the dependencies. + +### Make a change to the CSS styles. +Within the theme you'll notice both regular `*.css` files and also `*.pcss.css` files. The files that you want to modify are the `*.pcss.css` files. These PostCSS files will be made into browser-compatible CSS by running the compilation scripts. + +1. Open up the `/css/base/variables.pcss.css`. +2. Change some of the blue color's hex values down near line 132. +3. To generate the CSS run `yarn build:css`. + +Note you can also watch CSS by running `yarn watch:css`. + +See the scripts section within the `package.json` file for more commands. + +### Make a change to the JavaScript. +Similar to CSS, there are two JavaScript files for each file: + +* `*.es6.js` - These are the files that you will modify. They are written using modern JavaScript. +* `*.js` - These are the IE11 compatible JavaScript files generated by running the compilation scripts. Do not directly modify these files. + +You compile changes to the JavaScript files by running `yarn watch:js` and `yarn build:js`. + +### How to remove IE11 (and Opera Mini support). +Internet Explorer 11 and Opera Mini do not support CSS Variables (aka CSS Custom properties). This results in making new features (such as dark mode) very hard to implement. To remove support for these browsers. + +1. Remove `"last 1 Explorer version",` from line 95 in `package.json`. +2. Remove `"last 1 OperaMini version",` from line 99 in `package.json`. +3. Search the codebase and remove instances of importing the `variables.pcss.css` file. Examples: + 1. `@import "../base/variables.pcss.css";` from `css/components/action-links.pcss.css` + 2. `@import "../../base/variables.pcss.css";` from `css/components/navigation/nav-button-mobile.pcss.css` +4. Run `yarn build` to regenerate the compiled CSS and JavaScript. diff --git a/build.sh b/build.sh new file mode 100644 index 0000000..1fdb1de --- /dev/null +++ b/build.sh @@ -0,0 +1,46 @@ +#!/bin/sh +echo "" +echo "" +echo "👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇" +echo "This is a barebones script. It does bulk renames without any regard to whether" +echo "the renamed file is valid. If you use any of the following, it will fail:" +echo "" +echo " - JavaScript reserved words" +echo " - PHP reserved words" +echo " - Spaces or non-standard characters" +echo " - hyphens or underscores" +echo "" +echo "👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆" +echo "" + +read -p "Enter the name of the theme (example: Mytheme): " THEMENAME + +# Convert themename to lower case. +THEMENAME_LOWER=$(echo "$THEMENAME" | tr '[:upper:]' '[:lower:]') + +# Copy Olivero theme from core. +cp -r ../../core/themes/olivero/* ./ +DIRS=("./" "config/install/" "config/optional/" "config/schema/") + +# Rename all filenames to use new themename. +for DIR in "${DIRS[@]}" +do + for file in $DIR*olivero* ; do mv $file ${file//olivero/$THEMENAME_LOWER} ; done +done + +# Rename the prerender file by ensuring that only the first letter of the theme is capitalized. +THEMENAME_FIRST_LETTER_CAPS="$(tr '[:lower:]' '[:upper:]' <<< ${THEMENAME_LOWER:0:1})${THEMENAME_LOWER:1}" +mv src/OliveroPreRender.php src/${THEMENAME_FIRST_LETTER_CAPS}PreRender.php + +# Rename all occurrances of "Olivero" within the theme (both lower case and normal). +grep -rl olivero . --exclude=\*.{sh,md} --exclude-dir={node_modules,scripts,.git} | xargs sed -i "" -e "s/olivero/$THEMENAME_LOWER/g" +grep -rl Olivero . --exclude=\*.{sh,md} --exclude-dir={node_modules,scripts,.git} | xargs sed -i "" -e "s/Olivero/$THEMENAME/g" + +# Add core_version_requirement to *.info.yml and remove `package: Core`, and `experimental: true` +sed -i .bak 's/package: Core/core_version_requirement: ^9/g' *.info.yml +sed -i .bak 's/experimental: true//g' *.info.yml +rm *.bak + +# Move make configuration optional (this is needed if Olivero is already enabled). +mv ./config/install/block* ./config/optional/ +mv ./config/install/core* ./config/optional/ diff --git a/config/install/olivera.settings.yml b/config/install/olivera.settings.yml new file mode 100644 index 0000000..1e5d034 --- /dev/null +++ b/config/install/olivera.settings.yml @@ -0,0 +1,15 @@ +favicon: + use_default: true +features: + comment_user_picture: true + comment_user_verification: true + favicon: true + node_user_picture: false +logo: + use_default: false +third_party_settings: + shortcut: + module_link: true +mobile_menu_all_widths: 0 +site_branding_bg_color: default +base_primary_color: '#1b9ae4' diff --git a/config/optional/block.block.olivera_account_menu.yml b/config/optional/block.block.olivera_account_menu.yml new file mode 100644 index 0000000..15d97f9 --- /dev/null +++ b/config/optional/block.block.olivera_account_menu.yml @@ -0,0 +1,24 @@ +langcode: en +status: true +dependencies: + config: + - system.menu.account + module: + - system + theme: + - olivera +id: olivera_account_menu +theme: olivera +region: secondary_menu +weight: -4 +provider: null +plugin: 'system_menu_block:account' +settings: + id: 'system_menu_block:account' + label: 'User account menu' + label_display: '0' + provider: system + level: 1 + depth: 1 + expand_all_items: false +visibility: { } diff --git a/config/optional/block.block.olivera_book_navigation.yml b/config/optional/block.block.olivera_book_navigation.yml new file mode 100644 index 0000000..380fe40 --- /dev/null +++ b/config/optional/block.block.olivera_book_navigation.yml @@ -0,0 +1,20 @@ +langcode: en +status: true +dependencies: + module: + - book + theme: + - olivera +id: olivera_book_navigation +theme: olivera +region: sidebar +weight: 0 +provider: null +plugin: book_navigation +settings: + id: book_navigation + label: 'Book navigation' + label_display: visible + provider: book + block_mode: 'book pages' +visibility: { } diff --git a/config/optional/block.block.olivera_breadcrumbs.yml b/config/optional/block.block.olivera_breadcrumbs.yml new file mode 100644 index 0000000..bd59d0c --- /dev/null +++ b/config/optional/block.block.olivera_breadcrumbs.yml @@ -0,0 +1,19 @@ +langcode: en +status: true +dependencies: + module: + - system + theme: + - olivera +id: olivera_breadcrumbs +theme: olivera +region: breadcrumb +weight: 0 +provider: null +plugin: system_breadcrumb_block +settings: + id: system_breadcrumb_block + label: Breadcrumbs + label_display: '0' + provider: system +visibility: { } diff --git a/config/optional/block.block.olivera_content.yml b/config/optional/block.block.olivera_content.yml new file mode 100644 index 0000000..c7b5b34 --- /dev/null +++ b/config/optional/block.block.olivera_content.yml @@ -0,0 +1,19 @@ +langcode: en +status: true +dependencies: + module: + - system + theme: + - olivera +id: olivera_content +theme: olivera +region: content +weight: 0 +provider: null +plugin: system_main_block +settings: + id: system_main_block + label: 'Main page content' + label_display: '0' + provider: system +visibility: { } diff --git a/config/optional/block.block.olivera_help.yml b/config/optional/block.block.olivera_help.yml new file mode 100644 index 0000000..68d5572 --- /dev/null +++ b/config/optional/block.block.olivera_help.yml @@ -0,0 +1,19 @@ +langcode: en +status: true +dependencies: + module: + - help + theme: + - olivera +id: olivera_help +theme: olivera +region: content_above +weight: 0 +provider: null +plugin: help_block +settings: + id: help_block + label: Help + label_display: '0' + provider: help +visibility: { } diff --git a/config/optional/block.block.olivera_main_menu.yml b/config/optional/block.block.olivera_main_menu.yml new file mode 100644 index 0000000..9a5ecdb --- /dev/null +++ b/config/optional/block.block.olivera_main_menu.yml @@ -0,0 +1,24 @@ +langcode: en +status: true +dependencies: + config: + - system.menu.main + module: + - system + theme: + - olivera +id: olivera_main_menu +theme: olivera +region: primary_menu +weight: 0 +provider: null +plugin: 'system_menu_block:main' +settings: + id: 'system_menu_block:main' + label: 'Main navigation' + label_display: '0' + provider: system + level: 1 + depth: 2 + expand_all_items: true +visibility: { } diff --git a/config/optional/block.block.olivera_messages.yml b/config/optional/block.block.olivera_messages.yml new file mode 100644 index 0000000..a87f027 --- /dev/null +++ b/config/optional/block.block.olivera_messages.yml @@ -0,0 +1,19 @@ +langcode: en +status: true +dependencies: + module: + - system + theme: + - olivera +id: olivera_messages +theme: olivera +region: highlighted +weight: -5 +provider: null +plugin: system_messages_block +settings: + id: system_messages_block + label: 'Status messages' + label_display: '0' + provider: system +visibility: { } diff --git a/config/optional/block.block.olivera_page_title.yml b/config/optional/block.block.olivera_page_title.yml new file mode 100644 index 0000000..57612fd --- /dev/null +++ b/config/optional/block.block.olivera_page_title.yml @@ -0,0 +1,17 @@ +langcode: en +status: true +dependencies: + theme: + - olivera +id: olivera_page_title +theme: olivera +region: content_above +weight: -5 +provider: null +plugin: page_title_block +settings: + id: page_title_block + label: 'Page title' + label_display: '0' + provider: core +visibility: { } diff --git a/config/optional/block.block.olivera_powered.yml b/config/optional/block.block.olivera_powered.yml new file mode 100644 index 0000000..733ccc3 --- /dev/null +++ b/config/optional/block.block.olivera_powered.yml @@ -0,0 +1,19 @@ +langcode: en +status: true +dependencies: + module: + - system + theme: + - olivera +id: olivera_powered +theme: olivera +region: footer_bottom +weight: 0 +provider: null +plugin: system_powered_by_block +settings: + id: system_powered_by_block + label: 'Powered by Drupal' + label_display: '0' + provider: system +visibility: { } diff --git a/config/optional/block.block.olivera_primary_admin_actions.yml b/config/optional/block.block.olivera_primary_admin_actions.yml new file mode 100644 index 0000000..97a5bb7 --- /dev/null +++ b/config/optional/block.block.olivera_primary_admin_actions.yml @@ -0,0 +1,17 @@ +langcode: en +status: true +dependencies: + theme: + - olivera +id: olivera_primary_admin_actions +theme: olivera +region: highlighted +weight: -5 +provider: null +plugin: local_actions_block +settings: + id: local_actions_block + label: 'Primary admin actions' + label_display: '0' + provider: core +visibility: { } diff --git a/config/optional/block.block.olivera_primary_local_tasks.yml b/config/optional/block.block.olivera_primary_local_tasks.yml new file mode 100644 index 0000000..7e3ebca --- /dev/null +++ b/config/optional/block.block.olivera_primary_local_tasks.yml @@ -0,0 +1,19 @@ +langcode: en +status: true +dependencies: + theme: + - olivera +id: olivera_primary_local_tasks +theme: olivera +region: highlighted +weight: -4 +provider: null +plugin: local_tasks_block +settings: + id: local_tasks_block + label: 'Primary tabs' + label_display: '0' + provider: core + primary: true + secondary: false +visibility: { } diff --git a/config/optional/block.block.olivera_search_form_narrow.yml b/config/optional/block.block.olivera_search_form_narrow.yml new file mode 100644 index 0000000..7b1ac2b --- /dev/null +++ b/config/optional/block.block.olivera_search_form_narrow.yml @@ -0,0 +1,20 @@ +langcode: en +status: true +dependencies: + module: + - search + theme: + - olivera +id: olivera_search_form_narrow +theme: olivera +region: primary_menu +weight: -4 +provider: null +plugin: search_form_block +settings: + id: search_form_block + label: 'Search form (narrow)' + label_display: '0' + provider: search + page_id: '' +visibility: { } diff --git a/config/optional/block.block.olivera_search_form_wide.yml b/config/optional/block.block.olivera_search_form_wide.yml new file mode 100644 index 0000000..b2db75f --- /dev/null +++ b/config/optional/block.block.olivera_search_form_wide.yml @@ -0,0 +1,20 @@ +langcode: en +status: true +dependencies: + module: + - search + theme: + - olivera +id: olivera_search_form_wide +theme: olivera +region: secondary_menu +weight: -5 +provider: null +plugin: search_form_block +settings: + id: search_form_block + label: 'Search form (wide)' + label_display: '0' + provider: search + page_id: '' +visibility: { } diff --git a/config/optional/block.block.olivera_secondary_local_tasks.yml b/config/optional/block.block.olivera_secondary_local_tasks.yml new file mode 100644 index 0000000..d1462aa --- /dev/null +++ b/config/optional/block.block.olivera_secondary_local_tasks.yml @@ -0,0 +1,19 @@ +langcode: en +status: true +dependencies: + theme: + - olivera +id: olivera_secondary_local_tasks +theme: olivera +region: highlighted +weight: -2 +provider: null +plugin: local_tasks_block +settings: + id: local_tasks_block + label: 'Secondary tabs' + label_display: '0' + provider: core + primary: false + secondary: true +visibility: { } diff --git a/config/optional/block.block.olivera_site_branding.yml b/config/optional/block.block.olivera_site_branding.yml new file mode 100644 index 0000000..716b9aa --- /dev/null +++ b/config/optional/block.block.olivera_site_branding.yml @@ -0,0 +1,22 @@ +langcode: en +status: true +dependencies: + module: + - system + theme: + - olivera +id: olivera_site_branding +theme: olivera +region: header +weight: 0 +provider: null +plugin: system_branding_block +settings: + id: system_branding_block + label: 'Site branding' + label_display: '0' + provider: system + use_site_logo: true + use_site_name: true + use_site_slogan: false +visibility: { } diff --git a/config/optional/block.block.olivera_syndicate.yml b/config/optional/block.block.olivera_syndicate.yml new file mode 100644 index 0000000..546d517 --- /dev/null +++ b/config/optional/block.block.olivera_syndicate.yml @@ -0,0 +1,20 @@ +langcode: en +status: true +dependencies: + module: + - node + theme: + - olivera +id: olivera_syndicate +theme: olivera +region: social +weight: 0 +provider: null +plugin: node_syndicate_block +settings: + id: node_syndicate_block + label: 'RSS feed' + label_display: '0' + provider: node + block_count: 10 +visibility: { } diff --git a/config/optional/core.date_format.olivera_medium.yml b/config/optional/core.date_format.olivera_medium.yml new file mode 100644 index 0000000..3b34e07 --- /dev/null +++ b/config/optional/core.date_format.olivera_medium.yml @@ -0,0 +1,10 @@ +langcode: en +status: true +dependencies: + enforced: + theme: + - olivera +id: olivera_medium +label: 'Olivera Medium' +locked: false +pattern: 'j F, Y' diff --git a/config/schema/olivera.schema.yml b/config/schema/olivera.schema.yml new file mode 100644 index 0000000..ae5dc9b --- /dev/null +++ b/config/schema/olivera.schema.yml @@ -0,0 +1,26 @@ +# Schema for the configuration files of the Olivera theme. + +olivera.settings: + type: theme_settings + label: 'olivera settings' + mapping: + third_party_settings: + type: mapping + label: 'Third party settings' + mapping: + shortcut: + type: mapping + label: 'Shortcut' + mapping: + module_link: + type: boolean + label: 'Module Link' + mobile_menu_all_widths: + type: integer + label: 'Mobile menu all widths' + site_branding_bg_color: + type: string + label: 'Site branding background color' + base_primary_color: + type: color_hex + label: 'Base Primary Color' diff --git a/css/base/base.css b/css/base/base.css new file mode 100644 index 0000000..70471f9 --- /dev/null +++ b/css/base/base.css @@ -0,0 +1,158 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + +/** + * @file + * Generic base elements. + */ + +*, +*::before, +*::after { + box-sizing: border-box; +} + +html { + font-family: var(--font-sans); + font-size: 100%; + font-weight: normal; + font-style: normal; + line-height: var(--line-height-base); +} + +body { + margin: 0; + color: var(--color-text-neutral-medium); + background-color: var(--color--gray-100); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='50' height='84' viewBox='0 0 50 84'%3e %3cpath opacity='0.05' fill='%230e6ba6' d='M25,61.7C25,68.5,19.4,74,12.5,74S0,68.5,0,61.7c0-5.7,3.9-9.6,7.4-12.9c2.3-2.2,4.5-4.4,5.1-6.8c0.7,2.4,2.8,4.6,5.1,6.8C21.1,52.2,25,56,25,61.7z M42.6,6.8c-2.3-2.2-4.5-4.4-5.1-6.8c-0.7,2.4-2.9,4.6-5.1,6.8C28.9,10.2,25,14,25,19.7C25,26.5,30.6,32,37.5,32S50,26.5,50,19.7C50,14,46.1,10.2,42.6,6.8z'/%3e%3c/svg%3e"); + background-position: top left; /* LTR */ +} + +body.is-fixed { + position: fixed; + overflow: hidden; + width: 100%; +} + +[dir="rtl"] body { + background-position: top right; +} + +a { + color: var(--color-text-primary-medium); +} + +a:hover { + color: var(--color--primary-50); +} + +a:focus { + outline: solid 2px currentColor; + outline-offset: 2px; +} + +button { + font-family: inherit; +} + +img, +video { + display: block; + max-width: 100%; + height: auto; +} + +audio { + display: block; + max-width: 100%; +} + +h1 { + letter-spacing: -0.01em; + font-size: 1.75rem; + line-height: var(--sp2); +} + +@media (min-width: 43.75rem) { + h1 { + font-size: 3.75rem; + line-height: var(--sp4); + } +} + +h2 { + letter-spacing: -0.01em; + font-size: 1.5rem; + line-height: var(--sp2); +} + +@media (min-width: 43.75rem) { + h2 { + font-size: 2.25rem; + line-height: var(--sp3); + } +} + +h3 { + font-size: 1.25rem; + line-height: var(--sp1-5); +} + +@media (min-width: 43.75rem) { + h3 { + font-size: 1.5rem; + line-height: var(--sp2); + } +} + +h4 { + font-size: 1.125rem; + line-height: var(--sp1-5); +} + +h5 { + font-size: 1rem; + line-height: var(--sp1-5); +} + +h6 { + font-size: 0.875rem; + line-height: var(--sp); +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin-block: var(--sp); + color: var(--color-text-neutral-loud); + font-family: var(--font-sans); + font-weight: bold; +} + +@media (min-width: 43.75rem) { + h1, + h2, + h3, + h4, + h5, + h6 { + margin-block: var(--sp2); + } +} + +ul { + margin-block-start: 0.25em; + margin-block-end: 0.25em; + margin-inline-start: 1.5em; + margin-inline-end: 0; + padding-inline-start: 0; + list-style-type: disc; + list-style-image: none; +} diff --git a/css/base/base.pcss.css b/css/base/base.pcss.css new file mode 100644 index 0000000..dc8c93d --- /dev/null +++ b/css/base/base.pcss.css @@ -0,0 +1,140 @@ +/** + * @file + * Generic base elements. + */ + +@import "media-queries.pcss.css"; + +*, +*::before, +*::after { + box-sizing: border-box; +} + +html { + font-family: var(--font-sans); + font-size: 100%; + font-weight: normal; + font-style: normal; + line-height: var(--line-height-base); +} + +body { + margin: 0; + color: var(--color-text-neutral-medium); + background-color: var(--color--gray-100); + background-image: url("../../images/background.svg"); + background-position: top left; /* LTR */ + + &.is-fixed { + position: fixed; + overflow: hidden; + width: 100%; + } +} + +[dir="rtl"] body { + background-position: top right; +} + +a { + color: var(--color-text-primary-medium); + + &:hover { + color: var(--color--primary-50); + } + + &:focus { + outline: solid 2px currentColor; + outline-offset: 2px; + } +} + +button { + font-family: inherit; +} + +img, +video { + display: block; + max-width: 100%; + height: auto; +} + +audio { + display: block; + max-width: 100%; +} + +h1 { + letter-spacing: -0.01em; + font-size: 28px; + line-height: var(--sp2); + + @media (--md) { + font-size: 60px; + line-height: var(--sp4); + } +} + +h2 { + letter-spacing: -0.01em; + font-size: 24px; + line-height: var(--sp2); + + @media (--md) { + font-size: 36px; + line-height: var(--sp3); + } +} + +h3 { + font-size: 20px; + line-height: var(--sp1-5); + + @media (--md) { + font-size: 24px; + line-height: var(--sp2); + } +} + +h4 { + font-size: 18px; + line-height: var(--sp1-5); +} + +h5 { + font-size: 16px; + line-height: var(--sp1-5); +} + +h6 { + font-size: 14px; + line-height: var(--sp); +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin-block: var(--sp); + color: var(--color-text-neutral-loud); + font-family: var(--font-sans); + font-weight: bold; + + @media (--md) { + margin-block: var(--sp2); + } +} + +ul { + margin-block-start: 0.25em; + margin-block-end: 0.25em; + margin-inline-start: 1.5em; + margin-inline-end: 0; + padding-inline-start: 0; + list-style-type: disc; + list-style-image: none; +} diff --git a/css/base/fonts.css b/css/base/fonts.css new file mode 100644 index 0000000..86c3624 --- /dev/null +++ b/css/base/fonts.css @@ -0,0 +1,65 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + +/** + * @file + * Base Fonts. + */ + +@font-face { + font-family: metropolis; + src: url("../../fonts/metropolis/Metropolis-Regular.woff2") format("woff2"); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: metropolis; + src: url("../../fonts/metropolis/Metropolis-Bold.woff2") format("woff2"); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: metropolis; + src: url("../../fonts/metropolis/Metropolis-SemiBold.woff2") format("woff2"); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +/* lora-regular - latin */ + +@font-face { + font-family: Lora; + src: local("Lora Regular"), local("Lora-Regular"), url("../../fonts/lora/lora-v14-latin-regular.woff2") format("woff2"); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +/* lora-italic - latin */ + +@font-face { + font-family: Lora; + src: local("Lora Italic"), local("Lora-Italic"), url("../../fonts/lora/lora-v14-latin-italic.woff2") format("woff2"); + font-weight: 400; + font-style: italic; + font-display: swap; +} + +/* lora-700 - latin */ + +@font-face { + font-family: Lora; + src: local("Lora Bold"), local("Lora-Bold"), url("../../fonts/lora/lora-v14-latin-700.woff2") format("woff2"); + font-weight: 700; + font-style: normal; + font-display: swap; +} diff --git a/css/base/fonts.pcss.css b/css/base/fonts.pcss.css new file mode 100644 index 0000000..50e9e4a --- /dev/null +++ b/css/base/fonts.pcss.css @@ -0,0 +1,64 @@ +/** + * @file + * Base Fonts. + */ + +@import "media-queries.pcss.css"; + +@font-face { + font-family: metropolis; + src: url("../../fonts/metropolis/Metropolis-Regular.woff2") format("woff2"); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: metropolis; + src: url("../../fonts/metropolis/Metropolis-Bold.woff2") format("woff2"); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: metropolis; + src: url("../../fonts/metropolis/Metropolis-SemiBold.woff2") format("woff2"); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +/* lora-regular - latin */ +@font-face { + font-family: Lora; + src: + local("Lora Regular"), + local("Lora-Regular"), + url("../../fonts/lora/lora-v14-latin-regular.woff2") format("woff2"); + font-weight: 400; + font-style: normal; + font-display: swap; +} +/* lora-italic - latin */ +@font-face { + font-family: Lora; + src: + local("Lora Italic"), + local("Lora-Italic"), + url("../../fonts/lora/lora-v14-latin-italic.woff2") format("woff2"); + font-weight: 400; + font-style: italic; + font-display: swap; +} +/* lora-700 - latin */ +@font-face { + font-family: Lora; + src: + local("Lora Bold"), + local("Lora-Bold"), + url("../../fonts/lora/lora-v14-latin-700.woff2") format("woff2"); + font-weight: 700; + font-style: normal; + font-display: swap; +} diff --git a/css/base/media-queries.css b/css/base/media-queries.css new file mode 100644 index 0000000..0e9fd41 --- /dev/null +++ b/css/base/media-queries.css @@ -0,0 +1,19 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + +/* + * Media query breakpoints. + * Processed by postcss/postcss-custom-media. + */ + +/* Navigation related breakpoints */ + +/* Grid related breakpoints */ + +/* Grid shifts from 6 to 14 columns. */ + +/* Width of the entire grid maxes out. */ diff --git a/css/base/media-queries.pcss.css b/css/base/media-queries.pcss.css new file mode 100644 index 0000000..ec87de1 --- /dev/null +++ b/css/base/media-queries.pcss.css @@ -0,0 +1,18 @@ +/* + * Media query breakpoints. + * Processed by postcss/postcss-custom-media. + */ + +@custom-media --sm (min-width: 500px); +@custom-media --md (min-width: 700px); +@custom-media --lg (min-width: 1000px); +@custom-media --xl (min-width: 1300px); + +/* Navigation related breakpoints */ +@custom-media --nav-md (min-width: 500px); +@custom-media --nav (min-width: 1200px); +@custom-media --max-nav (max-width: 1200px); + +/* Grid related breakpoints */ +@custom-media --grid-md (min-width: 700px); /* Grid shifts from 6 to 14 columns. */ +@custom-media --grid-max (min-width: 1440px); /* Width of the entire grid maxes out. */ diff --git a/css/base/variables.css b/css/base/variables.css new file mode 100644 index 0000000..750826d --- /dev/null +++ b/css/base/variables.css @@ -0,0 +1,165 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + +/* + Global CSS custom properties. +*/ + +/* stylelint-disable */ + +:root { + --font-sans: "metropolis", sans-serif; + --font-serif: "Lora", "georgia", serif; + + /* Typography helpers. */ + --font-size-base: 1rem; + --font-size-l: 1.125rem; + --font-size-s: 0.875rem; + --font-size-xs: 0.8125rem; + --font-size-xxs: 0.75rem; + --line-height-base: 1.6875rem; + --line-height-s: 1.125rem; + + /* Layout helpers. */ + --max-width: 84.375rem; + --max-bg-color: 98.125rem; /* Width to which the background color extends to. */ + --sp: 1.125rem; + --content-left: 5.625rem; + --site-header-height-wide: var(--sp10); + --container-padding: var(--sp); + + /** + * Grid helpers. + * + * These variables help authors apply widths and negative margins to break items out of + * the grid, while still conforming to the larger grid system. + */ + --scrollbar-width: 0px; /* Unit must be specified here for calc() to work properly.*/ + --grid-col-count: 6; + --grid-gap: var(--sp); + --grid-gap-count: calc(var(--grid-col-count) - 1); /* Count of grid-gaps. */ + --grid-full-width: calc(100vw - var(--sp2) - var(--scrollbar-width)); /* Width of the entire grid. */ + --grid-col-width: calc((var(--grid-full-width) - (var(--grid-gap-count) * var(--grid-gap))) / var(--grid-col-count)); + + /* Layout helpers */ + --sp0-25: calc(0.25 * var(--sp)); + --sp0-5: calc(0.5 * var(--sp)); + --sp0-75: calc(0.75 * var(--sp)); + --sp1: calc(1 * var(--sp)); + --sp1-5: calc(1.5 * var(--sp)); + --sp2: calc(2 * var(--sp)); + --sp2-5: calc(2.5 * var(--sp)); + --sp3: calc(3 * var(--sp)); + --sp4: calc(4 * var(--sp)); + --sp5: calc(5 * var(--sp)); + --sp6: calc(6 * var(--sp)); + --sp7: calc(7 * var(--sp)); + --sp8: calc(8 * var(--sp)); + --sp9: calc(9 * var(--sp)); + --sp10: calc(10 * var(--sp)); + --sp11: calc(11 * var(--sp)); + --sp12: calc(12 * var(--sp)); + + /** + * Gray colors. + * + * Color number roughly corresponds to its luminosity. + */ + --color--gray-hue: 201; + --color--gray-saturation: 15%; + --color--gray-5: hsl(var(--color--gray-hue), var(--color--gray-saturation), 5%); /* Black */ + --color--gray-10: hsl(var(--color--gray-hue), var(--color--gray-saturation), 11%); + --color--gray-20: hsl(var(--color--gray-hue), var(--color--gray-saturation), 20%); /* Black 2 */ + --color--gray-45: hsl(var(--color--gray-hue), var(--color--gray-saturation), 44%); /* Gray Dark */ + --color--gray-60: hsl(var(--color--gray-hue), var(--color--gray-saturation), 57%); /* Gray medium */ + --color--gray-65: hsl(var(--color--gray-hue), var(--color--gray-saturation), 63%); /* Black 4 */ + --color--gray-70: hsl(var(--color--gray-hue), var(--color--gray-saturation), 72%); /* Gray medium 2 */ + --color--gray-90: hsl(var(--color--gray-hue), var(--color--gray-saturation), 88%); /* Gray light */ + --color--gray-95: hsl(var(--color--gray-hue), var(--color--gray-saturation), 93%); /* Gray light 1 */ + --color--gray-100: hsl(var(--color--gray-hue), var(--color--gray-saturation), 97%); + + /** + * Primary colors. + * + * Color number roughly corresponds to its luminosity. + */ + --color--primary-hue: 202; + --color--primary-saturation: 79%; + --color--primary-lightness: 50; + --color--primary-30: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.36 * var(--color--primary-lightness))))); + --color--primary-40: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.24 * var(--color--primary-lightness))))); /* Blue dark */ + --color--primary-50: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * var(--color--primary-lightness))); /* Blue medium */ + --color--primary-60: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.24 * (100 - var(--color--primary-lightness)))))); /* Blue bright */ + --color--primary-80: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.85 * (100 - var(--color--primary-lightness)))))); + + /** + * Variables specific to text. + */ + --color-text-neutral-soft: var(--color--gray-45); + --color-text-neutral-medium: var(--color--gray-20); + --color-text-neutral-loud: var(--color--gray-5); + + --color-text-primary-medium: var(--color--primary-40); + --color-text-primary-loud: var(--color--primary-30); + + /** + * Named Colors. + */ + --color--black: #000; /* Black */ + --color--white: #fff; /* White */ + --color--red: #e33f1e; /* Red */ + --color--gold: #fdca40; /* Gold */ + --color--green: #3fa21c; + + /* Header */ + --header-height-wide-when-fixed: calc(6 * var(--sp)); + + /* Width of slide out navigation */ + --mobile-nav-width: 31.25rem; + + /* Border radius */ + --border-radius: 0.1875rem; /* Inline padding on .container elements. */ +} + +@media (min-width: 75rem) { + :root { + --container-padding: var(--sp2); + } +} + +/* Green */ + +/* Width of a grid column. */ + +@media (min-width: 43.75rem) { + :root { + --grid-col-count: 14; + --grid-gap: var(--sp2); + } +} + +/* Blue very bright */ + +@media (min-width: 62.5rem) { + :root { + --scrollbar-width: 0.9375rem; /* Approximate width of a scrollbar. Doesn't have to be perfect. */ + } +} + +/* Gray light 2 */ + +@media (min-width: 75rem) { + :root { + --grid-full-width: calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--sp4)); + } +} + +@media (min-width: 90rem) { + :root { + --grid-full-width: calc(var(--max-width) - var(--sp4)); + } +} diff --git a/css/base/variables.pcss.css b/css/base/variables.pcss.css new file mode 100644 index 0000000..59a4824 --- /dev/null +++ b/css/base/variables.pcss.css @@ -0,0 +1,142 @@ +/* + Global CSS custom properties. +*/ + +@import "./media-queries.pcss.css"; + +/* stylelint-disable */ + +:root { + --font-sans: "metropolis", sans-serif; + --font-serif: "Lora", "georgia", serif; + + /* Typography helpers. */ + --font-size-base: 16px; + --font-size-l: 18px; + --font-size-s: 14px; + --font-size-xs: 13px; + --font-size-xxs: 12px; + --line-height-base: 27px; + --line-height-s: 18px; + + /* Layout helpers. */ + --max-width: 1350px; + --max-bg-color: 1570px; /* Width to which the background color extends to. */ + --sp: 18px; + --content-left: 90px; + --site-header-height-wide: var(--sp10); + --container-padding: var(--sp); /* Inline padding on .container elements. */ + + @media (--nav) { + --container-padding: var(--sp2); + } + + /** + * Grid helpers. + * + * These variables help authors apply widths and negative margins to break items out of + * the grid, while still conforming to the larger grid system. + */ + --scrollbar-width: 0px; /* Unit must be specified here for calc() to work properly.*/ + --grid-col-count: 6; + --grid-gap: var(--sp); + --grid-gap-count: calc(var(--grid-col-count) - 1); /* Count of grid-gaps. */ + --grid-full-width: calc(100vw - var(--sp2) - var(--scrollbar-width)); /* Width of the entire grid. */ + --grid-col-width: calc((var(--grid-full-width) - (var(--grid-gap-count) * var(--grid-gap))) / var(--grid-col-count)); /* Width of a grid column. */ + + @media (--md) { + --grid-col-count: 14; + --grid-gap: var(--sp2); + } + + @media (--lg) { + --scrollbar-width: 15px; /* Approximate width of a scrollbar. Doesn't have to be perfect. */ + } + + @media (--nav) { + --grid-full-width: calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--sp4)); + } + + @media (--grid-max) { + --grid-full-width: calc(var(--max-width) - var(--sp4)); + } + + /* Layout helpers */ + --sp0-25: calc(0.25 * var(--sp)); + --sp0-5: calc(0.5 * var(--sp)); + --sp0-75: calc(0.75 * var(--sp)); + --sp1: calc(1 * var(--sp)); + --sp1-5: calc(1.5 * var(--sp)); + --sp2: calc(2 * var(--sp)); + --sp2-5: calc(2.5 * var(--sp)); + --sp3: calc(3 * var(--sp)); + --sp4: calc(4 * var(--sp)); + --sp5: calc(5 * var(--sp)); + --sp6: calc(6 * var(--sp)); + --sp7: calc(7 * var(--sp)); + --sp8: calc(8 * var(--sp)); + --sp9: calc(9 * var(--sp)); + --sp10: calc(10 * var(--sp)); + --sp11: calc(11 * var(--sp)); + --sp12: calc(12 * var(--sp)); + + /** + * Gray colors. + * + * Color number roughly corresponds to its luminosity. + */ + --color--gray-hue: 201; + --color--gray-saturation: 15%; + --color--gray-5: hsl(var(--color--gray-hue), var(--color--gray-saturation), 5%); /* Black */ + --color--gray-10: hsl(var(--color--gray-hue), var(--color--gray-saturation), 11%); + --color--gray-20: hsl(var(--color--gray-hue), var(--color--gray-saturation), 20%); /* Black 2 */ + --color--gray-45: hsl(var(--color--gray-hue), var(--color--gray-saturation), 44%); /* Gray Dark */ + --color--gray-60: hsl(var(--color--gray-hue), var(--color--gray-saturation), 57%); /* Gray medium */ + --color--gray-65: hsl(var(--color--gray-hue), var(--color--gray-saturation), 63%); /* Black 4 */ + --color--gray-70: hsl(var(--color--gray-hue), var(--color--gray-saturation), 72%); /* Gray medium 2 */ + --color--gray-90: hsl(var(--color--gray-hue), var(--color--gray-saturation), 88%); /* Gray light */ + --color--gray-95: hsl(var(--color--gray-hue), var(--color--gray-saturation), 93%); /* Gray light 1 */ + --color--gray-100: hsl(var(--color--gray-hue), var(--color--gray-saturation), 97%); /* Gray light 2 */ + + /** + * Primary colors. + * + * Color number roughly corresponds to its luminosity. + */ + --color--primary-hue: 202; + --color--primary-saturation: 79%; + --color--primary-lightness: 50; + --color--primary-30: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.36 * var(--color--primary-lightness))))); + --color--primary-40: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.24 * var(--color--primary-lightness))))); /* Blue dark */ + --color--primary-50: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * var(--color--primary-lightness))); /* Blue medium */ + --color--primary-60: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.24 * (100 - var(--color--primary-lightness)))))); /* Blue bright */ + --color--primary-80: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.85 * (100 - var(--color--primary-lightness)))))); /* Blue very bright */ + + /** + * Variables specific to text. + */ + --color-text-neutral-soft: var(--color--gray-45); + --color-text-neutral-medium: var(--color--gray-20); + --color-text-neutral-loud: var(--color--gray-5); + + --color-text-primary-medium: var(--color--primary-40); + --color-text-primary-loud: var(--color--primary-30); + + /** + * Named Colors. + */ + --color--black: #000; /* Black */ + --color--white: #fff; /* White */ + --color--red: #e33f1e; /* Red */ + --color--gold: #fdca40; /* Gold */ + --color--green: #3fa21c; /* Green */ + + /* Header */ + --header-height-wide-when-fixed: calc(6 * var(--sp)); + + /* Width of slide out navigation */ + --mobile-nav-width: 500px; + + /* Border radius */ + --border-radius: 3px; +} diff --git a/css/components/.details.css.swp b/css/components/.details.css.swp new file mode 100644 index 0000000000000000000000000000000000000000..4d8a12bfd43af9fb86fd84fb66f271b91e5be4b2 GIT binary patch literal 12288 zcmeI2UuYaf9LKk!t^I3l6$EP?Q^X{6?k<-mZ8ubF|3^|&+9;M%dYJ4ilq`JKTh{qqd-$?*YU9CoEK9kHH%#J7sDE_0ScS~b>MR0vfHhzhSP6b#ZCSs8&%nFjRd5D);5gV1hQXCpSR;5Fyb0a_XTUf( z4938nU^Dn*rDc5!E`ry1pBE$e;o9=HS)I0eQ51-F8YU<3Gd zg=PH$E`wLV%itv-fe#LVO<)~Z16G3%ms{2c;2AItc7YLKgH7OeaODQe`T=|oz5^eF z3*brc7#IP!fm^@^a5K09ANUJ=1ulW-!6`5XjDL)R{F5uNumYzoLOdMhp*1e1YN1VL znChjpt%>Ts5p=3bKcreb&eJYg1D%a~IMS0Uy&GN7kk5wH=Z#P?kJh;>8ue(fI#W}^ zrxlzxnx@=$)2DPWfcu5y)DTUM2~AGATsukxp^!d#!m^6}WM5lLe-Rl7OEeIYj4k|V z4;_P-qshCw=#Z&w<2vZ-w9p#qQ0G8#pRRERl3w$7(^M=7xWZ0$8%-GLtwW5aaKoBS zhRcN^#p``$pJqexcCIB*Ysgrf=y(-zU^ASzBI(^!D44_7RjKMWiGKB1$dC8Zq0-%b zM9C0Wy#s?oE}xojtYnk49L&x))Cn1I|0KDW%-^$a)UlH}+pcg-%o8gfjV2>ZDcK|f z%O$c(aCD3$mM6($TS>FV{j8PG1~_%bU6O7{2FwxRoJ|JiFKTi!otrr!PNUg2tA>&K zS6^jSIt`t4+?x1XENQl&s0+a|NIWcoG9lO5k}AxZo>H>myL5rTpi_#?(VfPRuD*(z z#M!yb-@E3IZ$^`5bIL{-IlZh_HHS;nZN^H3B<(iQh%A@DcCp<9rr;inEg{}z5^_Sb zif3$7WeqP(M@42(Ejwx9JDfB*sj(SOWYZ_29(Xtl=tCY8zNyJvp#zV>WIoOWF17@l z;!xqV2-9pp;YZV%E{BB6Baca1)8Q*}mg*XFWz#0YhZ>|5{g}PSDK5@XG*H4gCLJzC z&R&tq<%%kXT&2^f>u8L+We!&|`UX-U&=ln}=5%AaC6dOUO?rAvw`d(U!4XTRH(o>H z<}{fgN&$VOpHPzq&A3_^(QLvhFkK^DT&UEqO$s=odBc@dbB{YA3=~Ra5}!?RmhXGk=nX+nX|1jq-eENt%?HuDoBO+vD;OnLDX* zNgrg`e__{-lzD$ESEjz+R;*KxjSFc~wVO$4-(HHmH7nd{=eFmQV!xE+HBgEpCdqEX zuW==iObDsX1<2Nj1J($oX-Fe@-i;=rjhgCYlZxVOnwkdlL}cH@_d7!+Nx-z#BMKEb zh&FE@Nhq2zJfZQ%V*I=nkpXjE;ZLQe>v%gzVy?4CmvQ5lgLIV0A5s-l$y-6II0`E& z&LY`u;q2ZWo$bl2LkmwE^@hSjP~4$7X(ugZ6#%B zW{a{yKSA>GSfE8*-QuI^xJPzZg~yRi`?H?A1I0C0Gu+&+g<+uWVzJq57F^W`m{*W$ zs_2`O@`I%v+jb1?G~JHzxI$Gii)_OCh*M)eGO^+~D(^=1vu@srgm2!-qB6PFJh*S1 aJUBi<_U{{=AQOj1kC6kTWBUtOkM%b;3|Y(o literal 0 HcmV?d00001 diff --git a/css/components/action-links.css b/css/components/action-links.css new file mode 100644 index 0000000..6975268 --- /dev/null +++ b/css/components/action-links.css @@ -0,0 +1,28 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ +/** + * @file + * Styles for action links. +*/ +.action-links { + margin-block: 0; + margin-inline-start: 0; + margin-inline-end: 0; + padding-block: 0; + padding-inline-start: 0; + padding-inline-end: 0; + list-style: none; +} +.action-links li { + display: inline-block; +} +.action-links li a { + color: var(--color-text-primary-medium); +} +.action-links-item { + display: inline-block; +} diff --git a/css/components/action-links.pcss.css b/css/components/action-links.pcss.css new file mode 100644 index 0000000..62d817c --- /dev/null +++ b/css/components/action-links.pcss.css @@ -0,0 +1,27 @@ +/** + * @file + * Styles for action links. +*/ +@import "../base/media-queries.pcss.css"; + +.action-links { + margin-block: 0; + margin-inline-start: 0; + margin-inline-end: 0; + padding-block: 0; + padding-inline-start: 0; + padding-inline-end: 0; + list-style: none; + + & li { + display: inline-block; + + & a { + color: var(--color-text-primary-medium); + } + } +} + +.action-links-item { + display: inline-block; +} diff --git a/css/components/ajax-progress.module.css b/css/components/ajax-progress.module.css new file mode 100644 index 0000000..25e1fc3 --- /dev/null +++ b/css/components/ajax-progress.module.css @@ -0,0 +1,111 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + +/** + * @file + * Visual styles for ajax-progress throbber. + */ + +.ajax-progress { + display: inline-block; +} + +/** + * Throbber. + */ + +.ajax-progress-throbber { + position: relative; + display: inline-flex; + align-content: center; + height: 1.125rem; + margin-block-start: -0.1875rem; + margin-block-end: 0; + margin-inline-start: var(--sp0-5); + margin-inline-end: var(--sp0-5); + vertical-align: middle; + white-space: nowrap; + line-height: 1.125rem; +} + +.ajax-progress-throbber .throbber { + width: 1.125rem; + height: 1.125rem; + border-width: 2px; + border-color: var(--color--primary-50) transparent var(--color--primary-50) var(--color--primary-50); +} + +.ajax-progress-throbber .message { + display: inline-block; + padding-inline-start: var(--sp0-5); + font-size: var(--font-size-s); + font-weight: 400; +} + +/** + * Full screen throbber. + */ + +.ajax-progress-fullscreen { + position: fixed; + z-index: 1000; + inset-block-start: 50%; + inset-inline-start: 50%; + width: 3.5rem; + height: 3.5rem; + margin: -1.75rem; + border: 1px solid var(--color--gray-70); + border-radius: 3.5rem; + background-color: var(--color--white); + box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1); /* LTR */ +} + +.ajax-progress-fullscreen::before { + position: absolute; + inset-block-start: 50%; + inset-inline-start: 50%; + width: 1.75rem; + height: 1.75rem; + margin: -0.875rem; + content: ""; + border-width: 3px; +} + +[dir="rtl"] .ajax-progress-fullscreen { + box-shadow: 0 -0.25rem 0.625rem rgba(34, 35, 48, 0.1); +} + +/** + * Common styles for all kinds of throbbers. + */ + +.ajax-progress-throbber .throbber, +.ajax-progress-fullscreen::before { + animation: olivera-throbber 0.75s linear infinite; + border-style: solid dotted solid solid; + border-color: var(--color--primary-50) transparent var(--color--primary-50) var(--color--primary-50); + border-radius: 50%; +} + +/** + * Remove margin from ajax throbbers following buttons because buttons already + * have a large margin set. + */ + +html.js .button:not(.js-hide) + .ajax-progress-throbber { + margin-inline-start: 0; +} + +@keyframes olivera-throbber { + 0% { + transform: rotateZ(0); + } + + 100% { + transform: rotateZ(360deg); + } +} diff --git a/css/components/ajax-progress.module.pcss.css b/css/components/ajax-progress.module.pcss.css new file mode 100644 index 0000000..f014ed2 --- /dev/null +++ b/css/components/ajax-progress.module.pcss.css @@ -0,0 +1,102 @@ +/** + * @file + * Visual styles for ajax-progress throbber. + */ + +@import "../base/media-queries.pcss.css"; + +.ajax-progress { + display: inline-block; +} + +/** + * Throbber. + */ +.ajax-progress-throbber { + position: relative; + display: inline-flex; + align-content: center; + height: 1.125rem; + margin-block-start: -3px; + margin-block-end: 0; + margin-inline-start: var(--sp0-5); + margin-inline-end: var(--sp0-5); + vertical-align: middle; + white-space: nowrap; + line-height: 1.125rem; +} + +.ajax-progress-throbber .throbber { + width: 1.125rem; + height: 1.125rem; + border-width: 2px; + border-color: var(--color--primary-50) transparent var(--color--primary-50) var(--color--primary-50); +} + +.ajax-progress-throbber .message { + display: inline-block; + padding-inline-start: var(--sp0-5); + font-size: var(--font-size-s); + font-weight: 400; +} + +/** + * Full screen throbber. + */ +.ajax-progress-fullscreen { + position: fixed; + z-index: 1000; + inset-block-start: 50%; + inset-inline-start: 50%; + width: 3.5rem; + height: 3.5rem; + margin: -1.75rem; + border: 1px solid var(--color--gray-70); + border-radius: 3.5rem; + background-color: var(--color--white); + box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1); /* LTR */ + + &::before { + position: absolute; + inset-block-start: 50%; + inset-inline-start: 50%; + width: 1.75rem; + height: 1.75rem; + margin: -0.875rem; + content: ""; + border-width: 3px; + } +} + +[dir="rtl"] .ajax-progress-fullscreen { + box-shadow: 0 -0.25rem 0.625rem rgba(34, 35, 48, 0.1); +} + +/** + * Common styles for all kinds of throbbers. + */ +.ajax-progress-throbber .throbber, +.ajax-progress-fullscreen::before { + animation: olivera-throbber 0.75s linear infinite; + border-style: solid dotted solid solid; + border-color: var(--color--primary-50) transparent var(--color--primary-50) var(--color--primary-50); + border-radius: 50%; +} + +/** + * Remove margin from ajax throbbers following buttons because buttons already + * have a large margin set. + */ +html.js .button:not(.js-hide) + .ajax-progress-throbber { + margin-inline-start: 0; +} + +@keyframes olivera-throbber { + 0% { + transform: rotateZ(0); + } + + 100% { + transform: rotateZ(360deg); + } +} diff --git a/css/components/autocomplete-loading.module.css b/css/components/autocomplete-loading.module.css new file mode 100644 index 0000000..1acefcd --- /dev/null +++ b/css/components/autocomplete-loading.module.css @@ -0,0 +1,31 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + +/** + * @file + * Visual styles for autocomplete input field. + */ + +[type].form-autocomplete { + padding-inline-end: var(--sp3); + background-color: var(--color--white); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18.8' viewBox='0 0 18 18.8'%3e %3cpath fill='%237e96a7' d='M17.8,17.4l-3.6-3.6c1.4-1.5,2.2-3.4,2.2-5.6c0-4.5-3.7-8.2-8.2-8.2S0,3.7,0,8.2s3.7,8.2,8.2,8.2c1.8,0,3.4-0.6,4.7-1.5l3.7,3.7c0.3,0.3,0.8,0.3,1.2,0C18.1,18.3,18.1,17.7,17.8,17.4z M8.2,14.7c-3.6,0-6.5-2.9-6.5-6.5s2.9-6.5,6.5-6.5s6.5,2.9,6.5,6.5S11.8,14.7,8.2,14.7z'/%3e%3c/svg%3e"); + background-repeat: no-repeat; + background-position: right var(--sp1) center; /* LTR */ +} + +.form-autocomplete[type]:disabled { + background-color: var(--color--gray-100); +} + +.form-autocomplete.ui-autocomplete-loading[type] { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 10 10'%3e %3cstyle type='text/css'%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7d100%25%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7dellipse%7banimation:s 1s linear infinite%7d%3c/style%3e %3cg transform='translate(5 5)'%3e %3cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%237e96a7' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)'/%3e %3c/g%3e%3c/svg%3e"); +} + +[dir="rtl"] .form-autocomplete[type] { + background-position: left var(--sp1) center; +} diff --git a/css/components/autocomplete-loading.module.pcss.css b/css/components/autocomplete-loading.module.pcss.css new file mode 100644 index 0000000..2464789 --- /dev/null +++ b/css/components/autocomplete-loading.module.pcss.css @@ -0,0 +1,26 @@ +/** + * @file + * Visual styles for autocomplete input field. + */ + +@import "../base/media-queries.pcss.css"; + +[type].form-autocomplete { + padding-inline-end: var(--sp3); + background-color: var(--color--white); + background-image: url("../../images/magnifying-glass.svg"); + background-repeat: no-repeat; + background-position: right var(--sp1) center; /* LTR */ + + &:disabled { + background-color: var(--color--gray-100); + } + + &.ui-autocomplete-loading { + background-image: url("../../images/throbber.svg"); + } + + &:dir(rtl) { + background-position: left var(--sp1) center; + } +} diff --git a/css/components/block.css b/css/components/block.css new file mode 100644 index 0000000..b546977 --- /dev/null +++ b/css/components/block.css @@ -0,0 +1,23 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + +/** + * @file + * Block styling. + */ + +.block__title { + margin-block: 0 var(--sp); + letter-spacing: 0.02em; + color: var(--color-text-neutral-soft); + font-size: var(--font-size-s); + line-height: var(--sp); +} + +.site-footer .block__title { + color: var(--color--gray-65); +} diff --git a/css/components/block.pcss.css b/css/components/block.pcss.css new file mode 100644 index 0000000..8fa2a37 --- /dev/null +++ b/css/components/block.pcss.css @@ -0,0 +1,18 @@ +/** + * @file + * Block styling. + */ + +@import "../base/media-queries.pcss.css"; + +.block__title { + margin-block: 0 var(--sp); + letter-spacing: 0.02em; + color: var(--color-text-neutral-soft); + font-size: var(--font-size-s); + line-height: var(--sp); +} + +.site-footer .block__title { + color: var(--color--gray-65); +} diff --git a/css/components/book.css b/css/components/book.css new file mode 100644 index 0000000..8b98cc8 --- /dev/null +++ b/css/components/book.css @@ -0,0 +1,106 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + +/** + * @file + * Book module styling. + */ + +.book-pager { + display: flex; + flex-wrap: wrap; + margin-block-start: 0 var(--sp); + margin-inline-start: 0; + margin-inline-end: 0; + padding-block: 0 var(--sp); + padding-inline-start: 0; + padding-inline-end: 0; + list-style: none; + border-block-end: solid 1px var(--color--primary-40); +} + +.book-pager__item { + display: inline-block; +} + +@media (min-width: 31.25rem) { + .book-pager__item { + flex: 0 0 33.33%; + } +} + +@media (min-width: 31.25rem) { + .book-pager__item--center { + text-align: center; + } +} + +@media (min-width: 31.25rem) { + .book-pager__item--next { + margin-inline-start: auto; + text-align: end; + } +} + +.book-pager__link { + display: inline-flex; + align-items: center; + -webkit-text-decoration: none; + text-decoration: none; + color: var(--color-text-primary-medium); + font-family: var(--font-serif); + font-size: 1.125rem; + font-weight: 600; +} + +.book-pager__link--previous::before { + display: block; + width: var(--sp0-5); + height: var(--sp0-5); + margin-inline-end: 0.25em; + content: ""; + transform: rotate(-45deg); + border-block-start: solid 0.1875rem currentColor; + border-inline-start: solid 0.1875rem currentColor; +} + +.book-pager__link--next::after { + display: block; + width: var(--sp0-5); + height: var(--sp0-5); + margin-inline-start: 0.25em; + content: ""; + transform: rotate(135deg); + border-block-start: solid 0.1875rem currentColor; + border-inline-start: solid 0.1875rem currentColor; +} + +.book-navigation__menu { + margin-block: var(--sp2); + margin-inline-start: 0; + margin-inline-end: 0; + padding-block: 0; + padding-inline-start: 0; + padding-inline-end: 0; + list-style: none; +} + +.book-navigation__item { + margin-block: 0; + padding-block: 0; + padding-inline-start: 0; + padding-inline-end: 0; + list-style: none; +} + +[dir="rtl"] .book-pager__link--previous::before { + transform: rotate(45deg); +} + +[dir="rtl"] .book-pager__link--next::after { + transform: rotate(-135deg); +} diff --git a/css/components/book.pcss.css b/css/components/book.pcss.css new file mode 100644 index 0000000..97cfd17 --- /dev/null +++ b/css/components/book.pcss.css @@ -0,0 +1,104 @@ +/** + * @file + * Book module styling. + */ + +@import "../base/media-queries.pcss.css"; + +.book-pager { + display: flex; + flex-wrap: wrap; + margin-block-start: 0 var(--sp); + margin-inline-start: 0; + margin-inline-end: 0; + padding-block: 0 var(--sp); + padding-inline-start: 0; + padding-inline-end: 0; + list-style: none; + border-block-end: solid 1px var(--color--primary-40); +} + +.book-pager__item { + display: inline-block; + + @media (--sm) { + flex: 0 0 33.33%; + } +} + +.book-pager__item--center { + @media (--sm) { + text-align: center; + } +} + +.book-pager__item--next { + @media (--sm) { + margin-inline-start: auto; + text-align: end; + } +} + +.book-pager__link { + display: inline-flex; + align-items: center; + text-decoration: none; + color: var(--color-text-primary-medium); + font-family: var(--font-serif); + font-size: 18px; + font-weight: 600; +} + +.book-pager__link--previous { + &::before { + display: block; + width: var(--sp0-5); + height: var(--sp0-5); + margin-inline-end: 0.25em; + content: ""; + transform: rotate(-45deg); + border-block-start: solid 3px currentColor; + border-inline-start: solid 3px currentColor; + } +} + +.book-pager__link--next { + &::after { + display: block; + width: var(--sp0-5); + height: var(--sp0-5); + margin-inline-start: 0.25em; + content: ""; + transform: rotate(135deg); + border-block-start: solid 3px currentColor; + border-inline-start: solid 3px currentColor; + } +} + +.book-navigation__menu { + margin-block: var(--sp2); + margin-inline-start: 0; + margin-inline-end: 0; + padding-block: 0; + padding-inline-start: 0; + padding-inline-end: 0; + list-style: none; +} + +.book-navigation__item { + margin-block: 0; + padding-block: 0; + padding-inline-start: 0; + padding-inline-end: 0; + list-style: none; +} + +[dir="rtl"] { + & .book-pager__link--previous::before { + transform: rotate(45deg); + } + + & .book-pager__link--next::after { + transform: rotate(-135deg); + } +} diff --git a/css/components/breadcrumb.css b/css/components/breadcrumb.css new file mode 100644 index 0000000..647cdca --- /dev/null +++ b/css/components/breadcrumb.css @@ -0,0 +1,129 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + +/** + * @file + * Breadcrumb region. + */ + +.breadcrumb { + position: relative; + font-size: 0.875rem; + font-weight: bold; + line-height: var(--sp1); + + /* Shadow on the right side of breadcrumbs for narrow screens. */ +} + +.breadcrumb::after { + position: absolute; + inset-block-start: 0; + inset-inline-end: calc(var(--sp1) * -1); + width: var(--sp3); + height: var(--sp2); + content: ""; + background: linear-gradient(to left, var(--color--white) 0%, rgba(255, 255, 255, 0) 100%); /* LTR */ +} + +@media (min-width: 62.5rem) { + .breadcrumb::after { + content: none; + } +} + +@media (min-width: 62.5rem) { + .breadcrumb { + position: static; + } +} + +[dir="rtl"] .breadcrumb::after { + background: linear-gradient(to right, var(--color--white) 0%, rgba(255, 255, 255, 0) 100%); +} + +.breadcrumb__content { + overflow: auto; + margin-block-start: calc(var(--sp0-5) * -1); + margin-block-end: calc(var(--sp0-5) * -1); + margin-inline-start: calc(var(--sp0-5) * -1); + margin-inline-end: calc(var(--sp1) * -1); + padding-block-start: var(--sp0-5); + padding-block-end: var(--sp0-5); + padding-inline-start: var(--sp0-5); + -webkit-overflow-scrolling: touch; +} + +@media (min-width: 62.5rem) { + .breadcrumb__content { + margin-inline-end: 0; + } +} + +.breadcrumb__list { + overflow-x: auto; + width: max-content; + margin-block: 0; + margin-inline-start: calc(var(--sp1) * -1); + margin-inline-end: calc(var(--sp1) * -1); + padding-block: 0 var(--sp1); + padding-inline-start: var(--sp1); + padding-inline-end: 0; + list-style: none; + white-space: nowrap; +} + +@media (min-width: 62.5rem) { + .breadcrumb__list { + overflow: visible; + margin-inline-start: 0; + margin-inline-end: 0; + padding-block-end: 0; + padding-inline-start: 0; + white-space: normal; + } +} + +.breadcrumb__item { + display: inline-block; +} + +.breadcrumb__item:nth-child(n + 2)::before { + display: inline-block; + width: 0.5rem; + height: 0.5rem; + margin-inline: 1rem 1.25rem; + content: ""; + transform: rotate(45deg); /* LTR */ + border-block-start: 2px solid var(--color--gray-45); + border-inline-end: 2px solid var(--color--gray-45); +} + +.breadcrumb__item:last-child { + margin-inline-end: var(--sp3); +} + +@media (min-width: 62.5rem) { + .breadcrumb__item:last-child { + margin-inline-end: 0; + } +} + +[dir="rtl"] .breadcrumb__item:nth-child(n + 2)::before { + transform: rotate(-45deg); +} + +.breadcrumb__link { + -webkit-text-decoration: none; + text-decoration: none; + color: var(--color-text-primary-medium); +} + +.breadcrumb__link:hover, +.breadcrumb__link:focus { + -webkit-text-decoration: underline; + text-decoration: underline; +} diff --git a/css/components/breadcrumb.pcss.css b/css/components/breadcrumb.pcss.css new file mode 100644 index 0000000..c050b9d --- /dev/null +++ b/css/components/breadcrumb.pcss.css @@ -0,0 +1,111 @@ +/** + * @file + * Breadcrumb region. + */ + +@import "../base/media-queries.pcss.css"; + +.breadcrumb { + position: relative; + font-size: 14px; + font-weight: bold; + line-height: var(--sp1); + + /* Shadow on the right side of breadcrumbs for narrow screens. */ + &::after { + position: absolute; + inset-block-start: 0; + inset-inline-end: calc(var(--sp1) * -1); + width: var(--sp3); + height: var(--sp2); + content: ""; + background: linear-gradient(to left, var(--color--white) 0%, rgba(255, 255, 255, 0) 100%); /* LTR */ + + @media (--lg) { + content: none; + } + } + + @media (--lg) { + position: static; + } +} + +[dir="rtl"] .breadcrumb::after { + background: linear-gradient(to right, var(--color--white) 0%, rgba(255, 255, 255, 0) 100%); +} + +.breadcrumb__content { + overflow: auto; + margin-block-start: calc(var(--sp0-5) * -1); + margin-block-end: calc(var(--sp0-5) * -1); + margin-inline-start: calc(var(--sp0-5) * -1); + margin-inline-end: calc(var(--sp1) * -1); + padding-block-start: var(--sp0-5); + padding-block-end: var(--sp0-5); + padding-inline-start: var(--sp0-5); + -webkit-overflow-scrolling: touch; + + @media (--lg) { + margin-inline-end: 0; + } +} + +.breadcrumb__list { + overflow-x: auto; + width: max-content; + margin-block: 0; + margin-inline-start: calc(var(--sp1) * -1); + margin-inline-end: calc(var(--sp1) * -1); + padding-block: 0 var(--sp1); + padding-inline-start: var(--sp1); + padding-inline-end: 0; + list-style: none; + white-space: nowrap; + + @media (--lg) { + overflow: visible; + margin-inline-start: 0; + margin-inline-end: 0; + padding-block-end: 0; + padding-inline-start: 0; + white-space: normal; + } +} + +.breadcrumb__item { + display: inline-block; + + &:nth-child(n+2)::before { + display: inline-block; + width: 8px; + height: 8px; + margin-inline: 16px 20px; + content: ""; + transform: rotate(45deg); /* LTR */ + border-block-start: 2px solid var(--color--gray-45); + border-inline-end: 2px solid var(--color--gray-45); + } + + &:last-child { + margin-inline-end: var(--sp3); + + @media (--lg) { + margin-inline-end: 0; + } + } +} + +[dir="rtl"] .breadcrumb__item:nth-child(n+2)::before { + transform: rotate(-45deg); +} + +.breadcrumb__link { + text-decoration: none; + color: var(--color-text-primary-medium); + + &:hover, + &:focus { + text-decoration: underline; + } +} diff --git a/css/components/button.css b/css/components/button.css new file mode 100644 index 0000000..46bd12d --- /dev/null +++ b/css/components/button.css @@ -0,0 +1,143 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + +/** + * @file + * Buttons. + */ + +.button { + display: inline-block; + height: var(--sp3); + margin-block: var(--sp1); + margin-inline-start: 0; + margin-inline-end: var(--sp1); + padding-block: calc((var(--sp3) - var(--line-height-s)) / 2); + padding-inline: var(--sp1-5); + cursor: pointer; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + color: var(--color-text-primary-medium); + border: solid 2px currentColor; + border-radius: var(--border-radius); + background-color: var(--color--white); + font-family: var(--font-sans); + font-size: var(--font-size-l); + font-weight: 700; + -webkit-appearance: none; + appearance: none; + -webkit-font-smoothing: antialiased; +} + +.button:hover, +.button:focus { + -webkit-text-decoration: none; + text-decoration: none; + color: var(--color-text-primary-loud); + border: solid 2px currentColor; + background: none; + font-weight: 700; +} + +.button:focus { + outline: 2px solid var(--color--primary-60); + outline-offset: 2px; +} + +.button:active { + color: var(--color-text-primary-medium); + border-color: currentColor; +} + +.button:disabled, +.button.is-disabled { + cursor: default; + color: var(--color--gray-90); + border-color: var(--color--gray-90); +} + +/* + IE11 doesn't work properly on button elements so we only do + inline-flex on modern browsers. + */ + +@supports (display: inline-flex) { + .button { + display: inline-flex; + align-items: center; + + /* Top padding accounts for font not being vertically centered within line-height. */ + padding-block: 1px 0; + padding-inline: var(--sp1-5); + line-height: var(--line-height-s); + } +} + +/* No margin if is part of a menu. */ + +.menu .button { + margin-block: 0; + margin-inline-start: 0; + margin-inline-end: 0; +} + +.button--small { + height: var(--sp2-5); + padding-block: calc((var(--sp2-5) - var(--line-height-s)) / 2); + padding-inline: var(--sp); + font-size: var(--font-size-base); + line-height: normal; +} + +.button--primary { + color: var(--color--white); + border-color: var(--color--primary-40); + background-color: var(--color--primary-40); +} + +.button--primary:hover, +.button--primary:focus { + color: var(--color--white); + border-color: var(--color--primary-30); + background-color: var(--color--primary-30); +} + +.button--primary:active { + color: var(--color--white); + background-color: var(--color--primary-40); +} + +.button--primary:disabled, +.button--primary.is-disabled { + color: var(--color--white); + background-color: var(--color--gray-90); +} + +.button--icon-back { + display: inline-flex; + align-items: center; +} + +.button--icon-back::before { + display: block; + width: 0.5em; + height: 0.5em; + margin-inline-end: 0.5em; + content: ""; + transform: rotate(45deg); /* LTR */ + border-block-end: solid 2px currentColor; + border-inline-start: solid 2px currentColor; +} + +[dir="rtl"] .button--icon-back::before { + transform: rotate(-45deg); +} + +.shepherd-cancel-icon { + font-size: 1.5em; +} diff --git a/css/components/button.pcss.css b/css/components/button.pcss.css new file mode 100644 index 0000000..652668b --- /dev/null +++ b/css/components/button.pcss.css @@ -0,0 +1,131 @@ +/** + * @file + * Buttons. + */ + +@import "../base/media-queries.pcss.css"; + +.button { + display: inline-block; + height: var(--sp3); + margin-block: var(--sp1); + margin-inline-start: 0; + margin-inline-end: var(--sp1); + padding-block: calc((var(--sp3) - var(--line-height-s)) / 2); + padding-inline: var(--sp1-5); + cursor: pointer; + text-align: center; + text-decoration: none; + color: var(--color-text-primary-medium); + border: solid 2px currentColor; + border-radius: var(--border-radius); + background-color: var(--color--white); + font-family: var(--font-sans); + font-size: var(--font-size-l); + font-weight: 700; + appearance: none; + -webkit-font-smoothing: antialiased; + + &:hover, + &:focus { + text-decoration: none; + color: var(--color-text-primary-loud); + border: solid 2px currentColor; + background: none; + font-weight: 700; + } + + &:focus { + outline: 2px solid var(--color--primary-60); + outline-offset: 2px; + } + + &:active { + color: var(--color-text-primary-medium); + border-color: currentColor; + } + + &:disabled, + &.is-disabled { + cursor: default; + color: var(--color--gray-90); + border-color: var(--color--gray-90); + } + + /* + IE11 doesn't work properly on button elements so we only do + inline-flex on modern browsers. + */ + @supports (display: inline-flex) { + display: inline-flex; + align-items: center; + + /* Top padding accounts for font not being vertically centered within line-height. */ + padding-block: 1px 0; + padding-inline: var(--sp1-5); + line-height: var(--line-height-s); + } +} + +/* No margin if is part of a menu. */ +.menu .button { + margin-block: 0; + margin-inline-start: 0; + margin-inline-end: 0; +} + +.button--small { + height: var(--sp2-5); + padding-block: calc((var(--sp2-5) - var(--line-height-s)) / 2); + padding-inline: var(--sp); + font-size: var(--font-size-base); + line-height: normal; +} + +.button--primary { + color: var(--color--white); + border-color: var(--color--primary-40); + background-color: var(--color--primary-40); + + &:hover, + &:focus { + color: var(--color--white); + border-color: var(--color--primary-30); + background-color: var(--color--primary-30); + } + + &:active { + color: var(--color--white); + background-color: var(--color--primary-40); + } + + &:disabled, + &.is-disabled { + color: var(--color--white); + background-color: var(--color--gray-90); + } +} + +.button--icon-back { + display: inline-flex; + align-items: center; + + &::before { + display: block; + width: 0.5em; + height: 0.5em; + margin-inline-end: 0.5em; + content: ""; + transform: rotate(45deg); /* LTR */ + border-block-end: solid 2px currentColor; + border-inline-start: solid 2px currentColor; + } +} + +[dir="rtl"] .button--icon-back::before { + transform: rotate(-45deg); +} + +.shepherd-cancel-icon { + font-size: 1.5em; +} diff --git a/css/components/cke-dialog.css b/css/components/cke-dialog.css new file mode 100644 index 0000000..49b3e3b --- /dev/null +++ b/css/components/cke-dialog.css @@ -0,0 +1,16 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + +/** + * @file + * CKE Dialogs. + */ + +select.cke_dialog_ui_input_select { + -webkit-appearance: menulist; + appearance: menulist; +} diff --git a/css/components/cke-dialog.pcss.css b/css/components/cke-dialog.pcss.css new file mode 100644 index 0000000..342e585 --- /dev/null +++ b/css/components/cke-dialog.pcss.css @@ -0,0 +1,8 @@ +/** + * @file + * CKE Dialogs. + */ + +select.cke_dialog_ui_input_select { + appearance: menulist; +} diff --git a/css/components/color-picker.css b/css/components/color-picker.css new file mode 100644 index 0000000..9eb2f72 --- /dev/null +++ b/css/components/color-picker.css @@ -0,0 +1,16 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + +/** + * @file + * Color picker styles. These appear within theme settings when selecting a custom color. + */ + +[data-drupal-selector="olivera-color-picker"] input[type="color"] { + margin-left: 0.8125rem; + vertical-align: bottom; +} diff --git a/css/components/color-picker.pcss.css b/css/components/color-picker.pcss.css new file mode 100644 index 0000000..1152a89 --- /dev/null +++ b/css/components/color-picker.pcss.css @@ -0,0 +1,11 @@ +/** + * @file + * Color picker styles. These appear within theme settings when selecting a custom color. + */ + +[data-drupal-selector="olivera-color-picker"] { + & input[type="color"] { + margin-left: 13px; + vertical-align: bottom; + } +} diff --git a/css/components/comments.css b/css/components/comments.css new file mode 100644 index 0000000..2d99694 --- /dev/null +++ b/css/components/comments.css @@ -0,0 +1,258 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + +/** + * @file + * Comment section and individual comments. + */ + +:root { + --comment-indentation: var(--sp2); + --comment-indentation--md: var(--sp4); +} + +.comment--level-1 { + border-block-start: 2px solid var(--color--gray-95); +} + +.comment--level-1 ~ .comment--level-1 { + margin-block-start: var(--sp2); +} + +.comments__title { + display: flex; + align-items: center; + margin-block-start: 0; +} + +.comments__count { + position: relative; + display: inline-block; + min-width: 2.125rem; + margin-block-start: 0; + margin-block-end: var(--sp0-5); + margin-inline-start: var(--sp); + margin-inline-end: var(--sp); + padding-block: 0; + padding-inline-start: 0.3125rem; + padding-inline-end: 0.3125rem; + text-align: center; + color: var(--color--white); + border-radius: 2px; + background-color: var(--color--primary-40); + font-size: 0.6875rem; + line-height: 1.3125rem; +} + +.comments__count::after { + position: absolute; + inset-block-end: -0.4375rem; + inset-inline-start: 0.5rem; + width: 0; + height: 0; + content: ""; + border-block-start: 0.4375rem solid var(--color--primary-40); + border-inline-end: 0.5rem solid transparent; +} + +.comment-form { + padding-block-end: var(--sp2); +} + +.add-comment__form { + padding-inline-start: 0; +} + +.comment { + position: relative; + padding-block-start: var(--sp2); + padding-inline-start: var(--sp3); +} + +@media (min-width: 43.75rem) { + .comment { + padding-inline-start: 0; + } +} + +.comment__text-content { + font-size: 1rem; +} + +.comment__text-content blockquote { + font-size: 1.3125rem; + line-height: var(--sp2); +} + +/* Override for .field:not(:last-child) */ + +.comment__text-content:not(:last-child) { + margin-block-end: 0; +} + +.comment__links { + margin-block: var(--sp) 0; +} + +.comment__links-link { + -webkit-text-decoration: none; + text-decoration: none; + font-size: 0.875rem; + font-weight: bold; + line-height: var(--sp); +} + +.comment__links-link:hover { + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.add-comment__picture-wrapper { + inset-block-start: calc(var(--line-height-base) + var(--sp0-5)); +} + +.add-comment__picture, +.comment__picture { + position: absolute; + inset-inline-start: 0; + overflow: hidden; + width: var(--sp2); + height: var(--sp2); + border-radius: 50%; + background-color: var(--color--gray-95); +} + +.add-comment__picture *:not(img), +.comment__picture *:not(img) { + display: inherit; + width: inherit; + height: inherit; +} + +.add-comment__picture img, +.comment__picture img { + width: 100%; + height: 100%; + object-fit: cover; + + /* @TODO: create image-style for profile's avatar to have image squared by default. */ +} + +@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) { + .add-comment__picture img, + .comment__picture img { + position: absolute; + /* stylelint-disable csstools/use-logical */ + top: 50%; + left: 50%; + /* stylelint-enable csstools/use-logical */ + width: 100%; + height: auto; + transform: translate(-50%, -50%); + } +} + +@media (min-width: 43.75rem) { + .add-comment__picture, + .comment__picture { + inset-inline-start: calc(-1 * var(--sp5)); + width: var(--sp3); + height: var(--sp3); + } +} + +@media (min-width: 43.75rem) { + .indented .comment__picture { + inset-inline-start: calc(-1 * var(--sp4)); + width: var(--sp2); + height: var(--sp2); + } +} + +.comment__meta * { + display: inline; +} + +.comment__author { + margin-inline-end: var(--sp); + font-family: var(--font-sans); + font-size: 1rem; + font-weight: 700; + line-height: var(--sp); +} + +.comment__author a { + -webkit-text-decoration: none; + text-decoration: none; +} + +.comment__time { + margin: 0; + color: var(--color-text-neutral-soft); + font-family: var(--font-sans); + font-size: 0.875rem; + line-height: var(--sp); +} + +.indented { + margin-inline-start: var(--comment-indentation); +} + +.indented > .comment:not(:last-of-type, .has-children)::before { + position: absolute; + inset-block-start: var(--sp2); + inset-inline-start: calc(-1 * var(--comment-indentation) - var(--sp)); /* Comment's padding-top */ + width: 0; + height: 100%; + content: ""; + border-inline-start: solid 1px var(--color--gray-95); +} + +@media (min-width: 43.75rem) { + .indented > .comment:not(:last-of-type, .has-children)::before { + inset-inline-start: calc(-1 * var(--comment-indentation--md) + var(--sp)); + } +} + +@media (min-width: 43.75rem) { + .indented { + margin-inline-start: var(--comment-indentation--md); + } +} + +.show-hide-btn { + margin-block-start: var(--sp2); + margin-block-end: 0; + margin-inline-start: var(--sp3); + margin-inline-end: 0; + padding-block: 0; + padding-inline-start: 0; + padding-inline-end: 0; + cursor: pointer; + color: var(--color-text-neutral-medium); + border: 0; + background: none; + font-size: 0.875rem; + font-weight: 600; + line-height: 1.125rem; + -webkit-appearance: none; + appearance: none; +} + +.show-hide-btn[aria-expanded="true"]::after { + content: "\0020 -"; +} + +.show-hide-btn[aria-expanded="false"]::after { + content: "\0020 +"; +} + +@media (min-width: 43.75rem) { + .show-hide-btn { + margin-inline-start: 0; + } +} diff --git a/css/components/comments.pcss.css b/css/components/comments.pcss.css new file mode 100644 index 0000000..042554a --- /dev/null +++ b/css/components/comments.pcss.css @@ -0,0 +1,233 @@ +/** + * @file + * Comment section and individual comments. + */ + +@import "../base/media-queries.pcss.css"; + +:root { + --comment-indentation: var(--sp2); + --comment-indentation--md: var(--sp4); +} + +.comment--level-1 { + border-block-start: 2px solid var(--color--gray-95); + + & ~ .comment--level-1 { + margin-block-start: var(--sp2); + } +} + +.comments__title { + display: flex; + align-items: center; + margin-block-start: 0; +} + +.comments__count { + position: relative; + display: inline-block; + min-width: 34px; + margin-block-start: 0; + margin-block-end: var(--sp0-5); + margin-inline-start: var(--sp); + margin-inline-end: var(--sp); + padding-block: 0; + padding-inline-start: 5px; + padding-inline-end: 5px; + text-align: center; + color: var(--color--white); + border-radius: 2px; + background-color: var(--color--primary-40); + font-size: 11px; + line-height: 21px; + + &::after { + position: absolute; + inset-block-end: -7px; + inset-inline-start: 8px; + width: 0; + height: 0; + content: ""; + border-block-start: 7px solid var(--color--primary-40); + border-inline-end: 8px solid transparent; + } +} + +.comment-form { + padding-block-end: var(--sp2); +} + +.add-comment__form { + padding-inline-start: 0; +} + +.comment { + position: relative; + padding-block-start: var(--sp2); + padding-inline-start: var(--sp3); + + @media (--grid-md) { + padding-inline-start: 0; + } +} + +.comment__text-content { + font-size: 16px; + + & blockquote { + font-size: 21px; + line-height: var(--sp2); + } + + /* Override for .field:not(:last-child) */ + &:not(:last-child) { + margin-block-end: 0; + } +} + +.comment__links { + margin-block: var(--sp) 0; +} + +.comment__links-link { + text-decoration: none; + font-size: 14px; + font-weight: bold; + line-height: var(--sp); + + &:hover { + text-decoration: underline; + } +} + +.add-comment__picture-wrapper { + inset-block-start: calc(var(--line-height-base) + var(--sp0-5)); +} + +.add-comment__picture, +.comment__picture { + position: absolute; + inset-inline-start: 0; + overflow: hidden; + width: var(--sp2); + height: var(--sp2); + border-radius: 50%; + background-color: var(--color--gray-95); + + & *:not(img) { + display: inherit; + width: inherit; + height: inherit; + } + + & img { + width: 100%; + height: 100%; + object-fit: cover; + + /* @TODO: create image-style for profile's avatar to have image squared by default. */ + @media all and (-ms-high-contrast: active), (-ms-high-contrast: none) { + position: absolute; + /* stylelint-disable csstools/use-logical */ + top: 50%; + left: 50%; + /* stylelint-enable csstools/use-logical */ + width: 100%; + height: auto; + transform: translate(-50%, -50%); + } + } + + @media (--grid-md) { + inset-inline-start: calc(-1 * var(--sp5)); + width: var(--sp3); + height: var(--sp3); + } +} + +.indented .comment__picture { + @media (--grid-md) { + inset-inline-start: calc(-1 * var(--sp4)); + width: var(--sp2); + height: var(--sp2); + } +} + +.comment__meta { + & * { + display: inline; + } +} + +.comment__author { + margin-inline-end: var(--sp); + font-family: var(--font-sans); + font-size: 16px; + font-weight: 700; + line-height: var(--sp); + + & a { + text-decoration: none; + } +} + +.comment__time { + margin: 0; + color: var(--color-text-neutral-soft); + font-family: var(--font-sans); + font-size: 14px; + line-height: var(--sp); +} + +.indented { + margin-inline-start: var(--comment-indentation); + + & > .comment:not(:last-of-type, .has-children)::before { + position: absolute; + inset-block-start: var(--sp2); + inset-inline-start: calc(-1 * var(--comment-indentation) - var(--sp)); /* Comment's padding-top */ + width: 0; + height: 100%; + content: ""; + border-inline-start: solid 1px var(--color--gray-95); + + @media (--md) { + inset-inline-start: calc(-1 * var(--comment-indentation--md) + var(--sp)); + } + } + + @media (--md) { + margin-inline-start: var(--comment-indentation--md); + } +} + +.show-hide-btn { + margin-block-start: var(--sp2); + margin-block-end: 0; + margin-inline-start: var(--sp3); + margin-inline-end: 0; + padding-block: 0; + padding-inline-start: 0; + padding-inline-end: 0; + cursor: pointer; + color: var(--color-text-neutral-medium); + border: 0; + background: none; + font-size: 14px; + font-weight: 600; + line-height: 18px; + appearance: none; + + &[aria-expanded="true"]::after { + content: "\0020 -"; + } + + &[aria-expanded="false"]::after { + content: "\0020 +"; + } + + @media (--grid-md) { + margin-inline-start: 0; + } +} diff --git a/css/components/container-inline.module.css b/css/components/container-inline.module.css new file mode 100644 index 0000000..6bc96eb --- /dev/null +++ b/css/components/container-inline.module.css @@ -0,0 +1,25 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + +/** + * @file + * Inline items. + */ + +.container-inline div, +.container-inline label { + display: inline-block; +} + +.form-items-inline { + margin-block: -0.125em; /* 2px */ +} + +.form-items-inline > .form-item { + display: inline-block; + margin-block: 0.125em; +} diff --git a/css/components/container-inline.module.pcss.css b/css/components/container-inline.module.pcss.css new file mode 100644 index 0000000..f6d46f1 --- /dev/null +++ b/css/components/container-inline.module.pcss.css @@ -0,0 +1,18 @@ +/** + * @file + * Inline items. + */ + +.container-inline div, +.container-inline label { + display: inline-block; +} + +.form-items-inline { + margin-block: -0.125em; /* 2px */ +} + +.form-items-inline > .form-item { + display: inline-block; + margin-block: 0.125em; +} diff --git a/css/components/content-moderation.css b/css/components/content-moderation.css new file mode 100644 index 0000000..e3edea3 --- /dev/null +++ b/css/components/content-moderation.css @@ -0,0 +1,94 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + +/** + * @file + * Styles for content moderation toolbar. + */ + +.entity-moderation-form { + flex-direction: column; + padding-inline-start: var(--sp); + padding-inline-end: var(--sp); + border: 1px solid var(--color--gray-95); + background-color: var(--color--gray-100); +} + +.entity-moderation-form select, +.entity-moderation-form input:not([type="submit"]) { + background-color: var(--color--white); +} + +@media (min-width: 43.75rem) { + .entity-moderation-form { + flex-direction: row; + } +} + +.entity-moderation-form__item { + flex-basis: 0; + margin-inline-end: var(--sp); +} + +.entity-moderation-form__item:last-child { + align-self: flex-start; + margin-inline-end: 0; +} + +@media (min-width: 43.75rem) { + .entity-moderation-form__item:last-child { + align-self: flex-end; + } +} + +.layout--content-narrow .entity-moderation-form, +.layout--pass--content-narrow > * .entity-moderation-form, +.layout--content-medium .entity-moderation-form, +.layout--pass--content-medium > * .entity-moderation-form { + width: 100%; + margin-inline-start: 0; +} + +@supports (width: max-content) { + .layout--content-narrow .entity-moderation-form, + .layout--pass--content-narrow > * .entity-moderation-form, + .layout--content-medium .entity-moderation-form, + .layout--pass--content-medium > * .entity-moderation-form { + width: max-content; + } +} + +@media (min-width: 43.75rem) { + .layout--content-narrow .entity-moderation-form, + .layout--pass--content-narrow > * .entity-moderation-form, + .layout--content-medium .entity-moderation-form, + .layout--pass--content-medium > * .entity-moderation-form { + width: calc(var(--grid-col-count) * var(--grid-col-width) + var(--grid-gap-count) * var(--grid-gap)); + margin-block: var(--sp2) var(--sp4); + margin-inline-start: calc(-2 * (var(--grid-col-width) + var(--grid-gap))); + } +} + +@media (min-width: 62.5rem) { + .layout--content-narrow .entity-moderation-form, + .layout--pass--content-narrow > * .entity-moderation-form, + .layout--content-medium .entity-moderation-form, + .layout--pass--content-medium > * .entity-moderation-form { + width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap)); + margin-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap))); + } +} + +@media (min-width: 90rem) { + .layout--content-narrow .entity-moderation-form, + .layout--pass--content-narrow > * .entity-moderation-form, + .layout--content-medium .entity-moderation-form, + .layout--pass--content-medium > * .entity-moderation-form { + width: calc(10 * var(--grid-col-width) + 11 * var(--grid-gap)); + margin-inline-start: 0; + } +} diff --git a/css/components/content-moderation.pcss.css b/css/components/content-moderation.pcss.css new file mode 100644 index 0000000..40243fc --- /dev/null +++ b/css/components/content-moderation.pcss.css @@ -0,0 +1,67 @@ +/** + * @file + * Styles for content moderation toolbar. + */ + +@import "../base/media-queries.pcss.css"; + +.entity-moderation-form { + flex-direction: column; + padding-inline-start: var(--sp); + padding-inline-end: var(--sp); + border: 1px solid var(--color--gray-95); + background-color: var(--color--gray-100); + + & select, + & input:not([type="submit"]) { + background-color: var(--color--white); + } + + @media (--md) { + flex-direction: row; + } +} + +.entity-moderation-form__item { + flex-basis: 0; + margin-inline-end: var(--sp); + + &:last-child { + align-self: flex-start; + margin-inline-end: 0; + + @media (--md) { + align-self: flex-end; + } + } +} + +.layout--content-narrow, +.layout--pass--content-narrow > *, +.layout--content-medium, +.layout--pass--content-medium > * { + & .entity-moderation-form { + width: 100%; + margin-inline-start: 0; + + @supports (width: max-content) { + width: max-content; + } + + @media (--grid-md) { + width: calc(var(--grid-col-count) * var(--grid-col-width) + var(--grid-gap-count) * var(--grid-gap)); + margin-block: var(--sp2) var(--sp4); + margin-inline-start: calc(-2 * (var(--grid-col-width) + var(--grid-gap))); + } + + @media (--lg) { + width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap)); + margin-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap))); + } + + @media (--grid-max) { + width: calc(10 * var(--grid-col-width) + 11 * var(--grid-gap)); + margin-inline-start: 0; + } + } +} diff --git a/css/components/details.css b/css/components/details.css new file mode 100644 index 0000000..853b67d --- /dev/null +++ b/css/components/details.css @@ -0,0 +1,133 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + +/** + * @file + * Collapsible details. + */ + +:root { + --details-border-width: 1px; + --details-summary-transition: background-color 0.12s ease-in-out; +} + +.olivera-details { + display: block; + margin-block: var(--sp1); + color: inherit; + border: var(--details-border-width) solid var(--color--gray-95); + border-radius: var(--border-radius); + box-shadow: 0 1px 4px var(--color--gray-90); +} + +/* Details summary styles */ + +.olivera-details__summary { + position: relative; + padding-block: var(--sp1); + padding-inline-start: var(--sp2); + padding-inline-end: var(--sp1); + list-style: none; + cursor: pointer; + transition: var(--details-summary-transition); + word-wrap: break-word; + -webkit-hyphens: auto; + hyphens: auto; + color: inherit; + background-color: var(--color--gray-100); + font-size: var(--line-height-s); + font-weight: 700; + line-height: var(--sp1); +} + +/* Arrow icon */ + +.olivera-details__summary::before { + position: absolute; + inset-block-start: 50%; + inset-inline-start: var(--sp0-75); + display: block; + width: 0.625rem; + height: 0.625rem; + content: ""; + transform: translateY(-50%) rotate(45deg); /* LTR */ + border-top: solid 2px currentColor; + border-right: solid 2px currentColor; +} + +[dir="rtl"] .olivera-details__summary::before { + transform: translateY(-50%) rotate(-135deg); +} + +/* Pseudo-selector to manage focus styles */ + +.olivera-details__summary::after { + position: absolute; + inset: calc(var(--details-border-width) * -1); + content: ""; + pointer-events: none; + opacity: 0; + border-radius: var(--border-radius); + box-shadow: inset 0 0 0 2px var(--color--primary-60); +} + +/* Hide the marker */ + +.olivera-details__summary::-webkit-details-marker { + display: none; +} + +/* Disable default outline for summary, since we have own implementation */ + +.olivera-details__summary:focus { + outline: solid 2px transparent; + outline-offset: -4px; +} + +/* Details summary, hover state */ + +.olivera-details__summary:hover { + background-color: var(--color--gray-95); +} + +/* Details summary, focus and active states */ + +.olivera-details__summary:focus::after, +.olivera-details__summary:active::after { + opacity: 1; +} + +/* Rotate arrow icon of the details summary, when details expanded */ + +.olivera-details[open] > .olivera-details__summary::before { + margin-block-start: -2px; + transform: translateY(-50%) rotate(135deg); +} + +/* Details content wrapper */ + +.olivera-details__wrapper { + margin: var(--sp1); +} + +@media (min-width: 62.5rem) { + .olivera-details__wrapper { + margin-block-start: var(--sp1-5); + margin-block-end: var(--sp1-5); + margin-inline-start: var(--sp2); + margin-inline-end: var(--sp2); + } +} + +/* Description */ + +.olivera-details__description { + margin-block-end: var(--sp1); + color: var(--color-text-neutral-medium); + font-size: var(--font-size-xs); + line-height: var(--line-height-s); +} diff --git a/css/components/details.pcss.css b/css/components/details.pcss.css new file mode 100644 index 0000000..7ed65ed --- /dev/null +++ b/css/components/details.pcss.css @@ -0,0 +1,115 @@ +/** + * @file + * Collapsible details. + */ + +@import "../base/media-queries.pcss.css"; + +:root { + --details-border-width: 1px; + --details-summary-transition: background-color 0.12s ease-in-out; +} + +.olivera-details { + display: block; + margin-block: var(--sp1); + color: inherit; + border: var(--details-border-width) solid var(--color--gray-95); + border-radius: var(--border-radius); + box-shadow: 0 1px 4px var(--color--gray-90); +} + +/* Details summary styles */ +.olivera-details__summary { + position: relative; + padding-block: var(--sp1); + padding-inline-start: var(--sp2); + padding-inline-end: var(--sp1); + list-style: none; + cursor: pointer; + transition: var(--details-summary-transition); + word-wrap: break-word; + hyphens: auto; + color: inherit; + background-color: var(--color--gray-100); + font-size: var(--line-height-s); + font-weight: 700; + line-height: var(--sp1); +} + +/* Arrow icon */ +.olivera-details__summary::before { + position: absolute; + inset-block-start: 50%; + inset-inline-start: var(--sp0-75); + display: block; + width: 10px; + height: 10px; + content: ""; + transform: translateY(-50%) rotate(45deg); /* LTR */ + border-top: solid 2px currentColor; + border-right: solid 2px currentColor; +} + +[dir="rtl"] .olivera-details__summary::before { + transform: translateY(-50%) rotate(-135deg); +} + +/* Pseudo-selector to manage focus styles */ +.olivera-details__summary::after { + position: absolute; + inset: calc(var(--details-border-width) * -1); + content: ""; + pointer-events: none; + opacity: 0; + border-radius: var(--border-radius); + box-shadow: inset 0 0 0 2px var(--color--primary-60); +} + +/* Hide the marker */ +.olivera-details__summary::-webkit-details-marker { + display: none; +} + +/* Disable default outline for summary, since we have own implementation */ +.olivera-details__summary:focus { + outline: solid 2px transparent; + outline-offset: -4px; +} + +/* Details summary, hover state */ +.olivera-details__summary:hover { + background-color: var(--color--gray-95); +} + +/* Details summary, focus and active states */ +.olivera-details__summary:focus::after, +.olivera-details__summary:active::after { + opacity: 1; +} + +/* Rotate arrow icon of the details summary, when details expanded */ +.olivera-details[open] > .olivera-details__summary::before { + margin-block-start: -2px; + transform: translateY(-50%) rotate(135deg); +} + +/* Details content wrapper */ +.olivera-details__wrapper { + margin: var(--sp1); + + @media (--lg) { + margin-block-start: var(--sp1-5); + margin-block-end: var(--sp1-5); + margin-inline-start: var(--sp2); + margin-inline-end: var(--sp2); + } +} + +/* Description */ +.olivera-details__description { + margin-block-end: var(--sp1); + color: var(--color-text-neutral-medium); + font-size: var(--font-size-xs); + line-height: var(--line-height-s); +} diff --git a/css/components/dropbutton.css b/css/components/dropbutton.css new file mode 100644 index 0000000..e0f5d91 --- /dev/null +++ b/css/components/dropbutton.css @@ -0,0 +1,165 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + +/** + * @file + * Dropbutton styles. + */ + +.dropbutton-wrapper { + --dropbutton--height: var(--sp1-5); + --dropbutton--secondary-bg-color: var(--color--white); + --dropbutton--active-bg-color: var(--color--gray-90); + --dropbutton--outline-color: var(--color--primary-40); /* Minimum 3:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */ + --dropbutton--border-radius: var(--border-radius); + --dropbutton--font-size: var(--font-size-s); + --dropbutton--text-color: var(--color-text-neutral-medium); /* Minimum 4.5:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */ + --dropbutton--text-hover-color: var(--color-text-primary-medium); /* Minimum 4.5:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */ +} + +.dropbutton-wrapper.open { + position: relative; + z-index: 100; /* Ensure this appears above all other dropbuttons. */ + filter: drop-shadow(0 2px 2px var(--dropbutton--active-bg-color)); +} + +.dropbutton-widget { + position: relative; + width: max-content; + height: var(--dropbutton--height); + padding-inline-end: var(--dropbutton--height); + border-radius: var(--dropbutton--border-radius); +} + +.dropbutton-single .dropbutton-widget { + padding-inline-end: 0; +} + +.dropbutton-wrapper.open .dropbutton-widget { + border-radius: var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0 0; +} + +.dropbutton { + height: var(--dropbutton--height); + margin-block: 0; + margin-inline-start: 0; + padding-inline-start: 0; + list-style: none; + font-size: var(--dropbutton--font-size); +} + +/* This is the button that expands/collapses the secondary options. */ + +.dropbutton-toggle button { + position: absolute; + top: 0; + inset-inline-end: 0; + display: flex; + align-items: center; + justify-content: center; + width: var(--dropbutton--height); + height: var(--dropbutton--height); + padding: 0; + cursor: pointer; + border-color: transparent; + border-radius: 0 var(--border-radius) var(--border-radius) 0; /* LTR */ + background: var(--dropbutton--active-bg-color); +} + +.dropbutton-toggle button:focus { + outline: solid 2px var(--dropbutton--outline-color); + outline-offset: -2px; +} + +.dropbutton-toggle button::before { + display: block; + width: var(--sp0-5); + height: var(--sp0-5); + content: ""; + transform: translateY(-25%) rotate(45deg); + border-right: solid 2px var(--dropbutton--outline-color); + border-bottom: solid 2px var(--dropbutton--outline-color); +} + +.dropbutton-wrapper.open :is(.dropbutton-toggle button::before) { + transform: translateY(25%) rotate(225deg); +} + +[dir="rtl"] .dropbutton-toggle button { + border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius); +} + +/* This is the first
  • element in the list of actions. */ + +.dropbutton-action:first-child { + margin-inline-end: 2px; + border: solid 1px transparent; + border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius); /* LTR */ + background: var(--dropbutton--active-bg-color); +} + +[dir="rtl"] .dropbutton-action:first-child { + border: solid 1px transparent; + border-radius: 0 var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0; +} + +.dropbutton-action a { + display: flex; + align-items: center; + margin-bottom: -2px; /* Account for borders. */ + padding: 0 0.5625rem; + -webkit-text-decoration: none; + text-decoration: none; + color: var(--dropbutton--text-color); + font-weight: 600; +} + +.dropbutton-action a:hover { + color: inherit; +} + +.dropbutton-action a:focus { + outline: solid 2px var(--dropbutton--outline-color); + outline-offset: -1px; /* Overlap parent container by 1px. */ +} + +/* Special rules if there is only one action. */ + +.dropbutton-single .dropbutton-action:first-child { + border-right: solid 1px transparent; /* LTR */ + border-radius: var(--dropbutton--border-radius); +} + +[dir="rtl"] .dropbutton-single .dropbutton-action:first-child { + border: solid 1px transparent; +} + +.dropbutton-single .dropbutton-action a { + justify-content: center; +} + +/* These are the
  • elements other than the first. */ + +.secondary-action { + visibility: hidden; + width: calc(100% + var(--dropbutton--height)); + border-right: 1px solid var(--dropbutton--active-bg-color); + border-left: 1px solid var(--dropbutton--active-bg-color); + background: var(--dropbutton--secondary-bg-color); +} + +.secondary-action:last-child { + border-bottom: 1px solid var(--dropbutton--active-bg-color); +} + +.secondary-action a:hover { + color: var(--dropbutton--text-hover-color); +} + +.dropbutton-wrapper.open .secondary-action { + visibility: visible; +} diff --git a/css/components/dropbutton.pcss.css b/css/components/dropbutton.pcss.css new file mode 100644 index 0000000..0a30685 --- /dev/null +++ b/css/components/dropbutton.pcss.css @@ -0,0 +1,157 @@ +/** + * @file + * Dropbutton styles. + */ + +.dropbutton-wrapper { + --dropbutton--height: var(--sp1-5); + --dropbutton--secondary-bg-color: var(--color--white); + --dropbutton--active-bg-color: var(--color--gray-90); + --dropbutton--outline-color: var(--color--primary-40); /* Minimum 3:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */ + --dropbutton--border-radius: var(--border-radius); + --dropbutton--font-size: var(--font-size-s); + --dropbutton--text-color: var(--color-text-neutral-medium); /* Minimum 4.5:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */ + --dropbutton--text-hover-color: var(--color-text-primary-medium); /* Minimum 4.5:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */ + + &.open { + position: relative; + z-index: 100; /* Ensure this appears above all other dropbuttons. */ + filter: drop-shadow(0 2px 2px var(--dropbutton--active-bg-color)); + } +} + +.dropbutton-widget { + position: relative; + width: max-content; + height: var(--dropbutton--height); + padding-inline-end: var(--dropbutton--height); + border-radius: var(--dropbutton--border-radius); + + @nest .dropbutton-single & { + padding-inline-end: 0; + } + + @nest .dropbutton-wrapper.open & { + border-radius: var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0 0; + } +} + +.dropbutton { + height: var(--dropbutton--height); + margin-block: 0; + margin-inline-start: 0; + padding-inline-start: 0; + list-style: none; + font-size: var(--dropbutton--font-size); +} + +/* This is the button that expands/collapses the secondary options. */ +.dropbutton-toggle button { + position: absolute; + top: 0; + inset-inline-end: 0; + display: flex; + align-items: center; + justify-content: center; + width: var(--dropbutton--height); + height: var(--dropbutton--height); + padding: 0; + cursor: pointer; + border-color: transparent; + border-radius: 0 var(--border-radius) var(--border-radius) 0; /* LTR */ + background: var(--dropbutton--active-bg-color); + + &:focus { + outline: solid 2px var(--dropbutton--outline-color); + outline-offset: -2px; + } + + &::before { + display: block; + width: var(--sp0-5); + height: var(--sp0-5); + content: ""; + transform: translateY(-25%) rotate(45deg); + border-right: solid 2px var(--dropbutton--outline-color); + border-bottom: solid 2px var(--dropbutton--outline-color); + + @nest .dropbutton-wrapper.open & { + transform: translateY(25%) rotate(225deg); + } + } + + &:dir(rtl) { + border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius); + } +} + +/* This is the first
  • element in the list of actions. */ +.dropbutton-action { + &:first-child { + margin-inline-end: 2px; + border: solid 1px transparent; + border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius); /* LTR */ + background: var(--dropbutton--active-bg-color); + + &:dir(rtl) { + border: solid 1px transparent; + border-radius: 0 var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0; + } + } + + & a { + display: flex; + align-items: center; + margin-bottom: -2px; /* Account for borders. */ + padding: 0 9px; + text-decoration: none; + color: var(--dropbutton--text-color); + font-weight: 600; + + &:hover { + color: inherit; + } + + &:focus { + outline: solid 2px var(--dropbutton--outline-color); + outline-offset: -1px; /* Overlap parent container by 1px. */ + } + } + + /* Special rules if there is only one action. */ + @nest .dropbutton-single & { + &:first-child { + border-right: solid 1px transparent; /* LTR */ + border-radius: var(--dropbutton--border-radius); + + &:dir(rtl) { + border: solid 1px transparent; + } + } + + & a { + justify-content: center; + } + } +} + +/* These are the
  • elements other than the first. */ +.secondary-action { + visibility: hidden; + width: calc(100% + var(--dropbutton--height)); + border-right: 1px solid var(--dropbutton--active-bg-color); + border-left: 1px solid var(--dropbutton--active-bg-color); + background: var(--dropbutton--secondary-bg-color); + + &:last-child { + border-bottom: 1px solid var(--dropbutton--active-bg-color); + } + + & a:hover { + color: var(--dropbutton--text-hover-color); + } + + @nest .dropbutton-wrapper.open & { + visibility: visible; + } +} diff --git a/css/components/embedded-media.css b/css/components/embedded-media.css new file mode 100644 index 0000000..7adb353 --- /dev/null +++ b/css/components/embedded-media.css @@ -0,0 +1,150 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + +/** + * @file + * Embedded Media. + */ + +figure { + background: var(--color--gray-100); +} + +figcaption { + padding-block: var(--sp0-5); + padding-inline-start: var(--sp0-5); + padding-inline-end: var(--sp0-5); + color: var(--color-text-neutral-medium); + background: var(--color--gray-100); + font-family: var(--font-serif); + font-size: 0.875rem; + font-style: italic; + line-height: var(--sp); +} + +@media (min-width: 31.25rem) { + figcaption { + padding-block: var(--sp); + padding-inline-start: var(--sp); + padding-inline-end: var(--sp); + } +} + +.align-right { + float: none; /* Override core's align.module.css. */ + max-width: 100%; + margin-block: var(--sp3); + margin-inline-start: 0; + margin-inline-end: 0; +} + +@media (min-width: 43.75rem) { + .align-right { + float: right; /* LTR */ + max-width: 50%; + margin-block-start: var(--sp); + margin-block-end: var(--sp); + margin-inline-start: var(--sp); + margin-inline-end: 0; + + /** + * Chromium and Webkit do not yet support flow relative logical properties, + * such as float: inline-end. However, PostCSS Logical does not compile this + * value, so we accommodate by not using these. + * + * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values + * @see https://github.com/csstools/postcss-plugins/issues/632 + */ + } + [dir="rtl"] .align-right { + float: left; + } +} + +/* Pull out of grid if nested in content narrow layout. */ + +/* @todo this can be simplified. */ + +@media (min-width: 43.75rem) { + .layout--content-narrow .align-right, + .layout--pass--content-narrow > * .align-right { + margin-inline-end: calc(-1 * ((var(--grid-col-width) + var(--grid-gap)))); + } +} + +@media (min-width: 62.5rem) { + .layout--content-narrow .align-right, + .layout--pass--content-narrow > * .align-right { + margin-inline-end: calc(-2 * ((var(--grid-col-width) + var(--grid-gap)))); + } +} + +@media (min-width: 75rem) { + .layout--content-narrow .align-right, + .layout--pass--content-narrow > * .align-right { + margin-inline-end: calc(-3 * ((var(--grid-col-width) + var(--grid-gap)))); + } +} + +@media (min-width: 90rem) { + .layout--content-narrow .align-right, + .layout--pass--content-narrow > * .align-right { + margin-inline-end: calc(-3 * ((var(--grid-col-width) + var(--grid-gap)))); + } +} + +.align-left { + float: none; /* Override core's align.module.css. */ + max-width: 100%; + margin-block-start: var(--sp3); + margin-block-end: var(--sp3); + margin-inline-start: 0; + margin-inline-end: 0; +} + +@media (min-width: 43.75rem) { + .align-left { + float: left; /* LTR */ + max-width: 50%; + margin-block-start: var(--sp); + margin-block-end: var(--sp); + margin-inline-start: 0; + margin-inline-end: var(--sp2); /* Extra right margins in case of aligning next to lists. */ + + /** + * Chromium and Webkit do not yet support flow relative logical properties, + * such as float: inline-end. However, PostCSS Logical does not compile this + * value, so we accommodate by not using these. + * + * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values + * @see https://github.com/csstools/postcss-plugins/issues/632 + */ + } + [dir="rtl"] .align-left { + float: right; + } +} + +/* Pull out of grid if nested in content narrow layout. */ + +@media (min-width: 43.75rem) { + .layout--content-narrow .align-left, + .layout--pass--content-narrow > * .align-left { + margin-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap)))); + } +} + +.align-center img, +.align-center video, +.align-center audio { + margin-inline: auto; +} + +.media-oembed-content { + display: block; + max-width: 100%; +} diff --git a/css/components/embedded-media.pcss.css b/css/components/embedded-media.pcss.css new file mode 100644 index 0000000..b6f52a8 --- /dev/null +++ b/css/components/embedded-media.pcss.css @@ -0,0 +1,127 @@ +/** + * @file + * Embedded Media. + */ + +@import "../base/media-queries.pcss.css"; + +figure { + background: var(--color--gray-100); +} + +figcaption { + padding-block: var(--sp0-5); + padding-inline-start: var(--sp0-5); + padding-inline-end: var(--sp0-5); + color: var(--color-text-neutral-medium); + background: var(--color--gray-100); + font-family: var(--font-serif); + font-size: 14px; + font-style: italic; + line-height: var(--sp); + + @media (--sm) { + padding-block: var(--sp); + padding-inline-start: var(--sp); + padding-inline-end: var(--sp); + } +} + +.align-right { + float: none; /* Override core's align.module.css. */ + max-width: 100%; + margin-block: var(--sp3); + margin-inline-start: 0; + margin-inline-end: 0; + + @media (--grid-md) { + float: right; /* LTR */ + max-width: 50%; + margin-block-start: var(--sp); + margin-block-end: var(--sp); + margin-inline-start: var(--sp); + margin-inline-end: 0; + + /** + * Chromium and Webkit do not yet support flow relative logical properties, + * such as float: inline-end. However, PostCSS Logical does not compile this + * value, so we accommodate by not using these. + * + * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values + * @see https://github.com/csstools/postcss-plugins/issues/632 + */ + &:dir(rtl) { + float: left; + } + } +} + +/* Pull out of grid if nested in content narrow layout. */ +.layout--content-narrow .align-right, +.layout--pass--content-narrow > * .align-right { + /* @todo this can be simplified. */ + @media (--grid-md) { + margin-inline-end: calc(-1 * ((var(--grid-col-width) + var(--grid-gap)))); + } + + @media (--lg) { + margin-inline-end: calc(-2 * ((var(--grid-col-width) + var(--grid-gap)))); + } + + @media (--nav) { + margin-inline-end: calc(-3 * ((var(--grid-col-width) + var(--grid-gap)))); + } + + @media (--grid-max) { + margin-inline-end: calc(-3 * ((var(--grid-col-width) + var(--grid-gap)))); + } +} + +.align-left { + float: none; /* Override core's align.module.css. */ + max-width: 100%; + margin-block-start: var(--sp3); + margin-block-end: var(--sp3); + margin-inline-start: 0; + margin-inline-end: 0; + + @media (--grid-md) { + float: left; /* LTR */ + max-width: 50%; + margin-block-start: var(--sp); + margin-block-end: var(--sp); + margin-inline-start: 0; + margin-inline-end: var(--sp2); /* Extra right margins in case of aligning next to lists. */ + + /** + * Chromium and Webkit do not yet support flow relative logical properties, + * such as float: inline-end. However, PostCSS Logical does not compile this + * value, so we accommodate by not using these. + * + * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values + * @see https://github.com/csstools/postcss-plugins/issues/632 + */ + &:dir(rtl) { + float: right; + } + } +} + +/* Pull out of grid if nested in content narrow layout. */ +.layout--content-narrow .align-left, +.layout--pass--content-narrow > * .align-left { + @media (--grid-md) { + margin-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap)))); + } +} + +.align-center img, +.align-center video, +.align-center audio { + margin-inline: auto; +} + +.media-oembed-content { + display: block; + max-width: 100%; +} diff --git a/css/components/feed.css b/css/components/feed.css new file mode 100644 index 0000000..1fb0c96 --- /dev/null +++ b/css/components/feed.css @@ -0,0 +1,47 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + +/** + * @file + * RSS feed. + */ + +.feed-icon { + display: flex; + align-items: center; + -webkit-text-decoration: none; + text-decoration: none; + color: var(--color-text-neutral-soft); +} + +.feed-icon:hover { + color: var(--color--primary-50); +} + +.feed-icon__label { + flex-shrink: 0; + letter-spacing: 0.08em; + font-size: var(--font-size-xxs); + font-weight: 600; +} + +.feed-icon__icon { + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: center; + width: var(--sp1-5); + height: var(--sp1-5); + margin-inline-start: var(--sp0-5); + color: var(--color--white); + background-color: var(--color--primary-50); +} + +.feed-icon__icon svg { + vertical-align: top; + fill: currentColor; +} diff --git a/css/components/feed.pcss.css b/css/components/feed.pcss.css new file mode 100644 index 0000000..1229c7f --- /dev/null +++ b/css/components/feed.pcss.css @@ -0,0 +1,41 @@ +/** + * @file + * RSS feed. + */ + +@import "../base/media-queries.pcss.css"; + +.feed-icon { + display: flex; + align-items: center; + text-decoration: none; + color: var(--color-text-neutral-soft); + + &:hover { + color: var(--color--primary-50); + } +} + +.feed-icon__label { + flex-shrink: 0; + letter-spacing: 0.08em; + font-size: var(--font-size-xxs); + font-weight: 600; +} + +.feed-icon__icon { + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: center; + width: var(--sp1-5); + height: var(--sp1-5); + margin-inline-start: var(--sp0-5); + color: var(--color--white); + background-color: var(--color--primary-50); + + & svg { + vertical-align: top; + fill: currentColor; + } +} diff --git a/css/components/field.css b/css/components/field.css new file mode 100644 index 0000000..d4fad4c --- /dev/null +++ b/css/components/field.css @@ -0,0 +1,62 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + +/** + * @file + * Visual styles for fields. + */ + +.field:not(:last-child) { + margin-block-end: var(--sp2); +} + +.node--view-mode-teaser .field { + margin-block-end: var(--sp); +} + +.node--view-mode-teaser .field:last-child { + margin-block-end: 0; +} + +@media (min-width: 62.5rem) { + .node--view-mode-teaser .field { + margin-block-end: var(--sp2); + } +} + +.field__label { + font-weight: bold; +} + +.field--label-inline .field__label, +.field--label-inline .field__items { + float: left; /* LTR */ + + /** + * Chromium and Webkit do not yet support flow relative logical properties, + * such as float: inline-end. However, PostCSS Logical does not compile this + * value, so we accommodate by not using these. + * + * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values + * @see https://github.com/csstools/postcss-plugins/issues/632 + */ +} + +[dir="rtl"] .field--label-inline .field__label, +[dir="rtl"] .field--label-inline .field__items { + float: right; +} + +.field--label-inline .field__label, +.field--label-inline > .field__item, +.field--label-inline .field__items { + padding-inline-end: 0.5em; +} + +.field--label-inline .field__label::after { + content: ":"; +} diff --git a/css/components/field.pcss.css b/css/components/field.pcss.css new file mode 100644 index 0000000..7c08eaf --- /dev/null +++ b/css/components/field.pcss.css @@ -0,0 +1,53 @@ +/** + * @file + * Visual styles for fields. + */ + +@import "../base/media-queries.pcss.css"; + +.field:not(:last-child) { + margin-block-end: var(--sp2); +} + +.node--view-mode-teaser .field { + margin-block-end: var(--sp); + + &:last-child { + margin-block-end: 0; + } + + @media (--lg) { + margin-block-end: var(--sp2); + } +} + +.field__label { + font-weight: bold; +} + +.field--label-inline .field__label, +.field--label-inline .field__items { + float: left; /* LTR */ + + /** + * Chromium and Webkit do not yet support flow relative logical properties, + * such as float: inline-end. However, PostCSS Logical does not compile this + * value, so we accommodate by not using these. + * + * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values + * @see https://github.com/csstools/postcss-plugins/issues/632 + */ + &:dir(rtl) { + float: right; + } +} + +.field--label-inline .field__label, +.field--label-inline > .field__item, +.field--label-inline .field__items { + padding-inline-end: 0.5em; +} + +.field--label-inline .field__label::after { + content: ":"; +} diff --git a/css/components/fieldset.css b/css/components/fieldset.css new file mode 100644 index 0000000..1b2a5fe --- /dev/null +++ b/css/components/fieldset.css @@ -0,0 +1,136 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + +/** + * @file + * Fieldset. + */ + +.fieldset { + min-width: 0; + margin-block: var(--sp1); + margin-inline-start: 0; + margin-inline-end: 0; + padding-block: 0; + padding-inline-start: 0; + padding-inline-end: 0; + color: inherit; + border: solid 2px var(--color--gray-45); + border-radius: var(--border-radius); + background-color: var(--color--white); +} + +.fieldset--group { + width: 100%; + color: inherit; + border: 0; + border-radius: 0; + background: none; + box-shadow: none; +} + +.fieldset__legend { + float: left; /* Prevent sticking out of top of fieldset. */ + width: 100%; + color: inherit; + border-top-left-radius: var(--border-radius); + border-top-right-radius: var(--border-radius); + background-color: var(--color--gray-45); + font-size: var(--font-size-l); + font-weight: 700; + line-height: var(--line-height-base); +} + +.fieldset__legend + * { + clear: left; +} + +.fieldset__legend .fieldset__label.form-required::after { + background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A"); +} + +.fieldset__legend--composite { + margin-block-start: 2px; + color: inherit; +} + +.fieldset__legend--invisible { + margin: 0; +} + +.fieldset__legend--group { + color: inherit; +} + +.fieldset__label { + display: block; + padding-block: var(--sp0-5); + padding-inline-start: var(--sp1); + padding-inline-end: var(--sp1); + color: var(--color--white); + line-height: var(--line-height-s); +} + +.fieldset__label.is-disabled { + color: var(--color-text-neutral-soft); +} + +.fieldset__description { + margin-block: var(--sp0-5); + font-size: var(--font-size-xs); + line-height: var(--line-height-s); +} + +.fieldset__description.is-disabled { + color: var(--input--disabled-fg-color); +} + +.fieldset__error-message { + margin-block: var(--sp0-5); + padding-inline-start: var(--sp1-5); + color: var(--color--red); + background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E33F1E' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: left top; /* LTR */ + background-size: var(--sp1) var(--sp1); + font-size: var(--font-size-s); + line-height: var(--line-height-s); +} + +@media screen and (-ms-high-contrast: active) { + .fieldset__error-message { + background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E"); + } +} + +[dir="rtl"] .fieldset__error-message { + background-position: left top; +} + +.fieldset__wrapper { + margin-block-start: 0; + padding-block: var(--sp); + padding-inline-start: var(--sp); +} + +.fieldset--group .fieldset__legend--visible ~ .fieldset__wrapper { + border: solid 2px var(--color--gray-45); + border-bottom-right-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); +} + +.fieldset__wrapper--group { + margin-block: 0; + margin-inline-start: 0; + margin-inline-end: 0; +} + +.fieldset__wrapper > .container-inline { + padding-block: 0; + padding-inline-start: 0; + padding-inline-end: 0; +} diff --git a/css/components/fieldset.pcss.css b/css/components/fieldset.pcss.css new file mode 100644 index 0000000..b6bc927 --- /dev/null +++ b/css/components/fieldset.pcss.css @@ -0,0 +1,133 @@ +/** + * @file + * Fieldset. + */ + +@import "../base/media-queries.pcss.css"; + +.fieldset { + min-width: 0; + margin-block: var(--sp1); + margin-inline-start: 0; + margin-inline-end: 0; + padding-block: 0; + padding-inline-start: 0; + padding-inline-end: 0; + color: inherit; + border: solid 2px var(--color--gray-45); + border-radius: var(--border-radius); + background-color: var(--color--white); +} + +.fieldset--group { + width: 100%; + color: inherit; + border: 0; + border-radius: 0; + background: none; + box-shadow: none; +} + +.fieldset__legend { + float: left; /* Prevent sticking out of top of fieldset. */ + width: 100%; + color: inherit; + border-top-left-radius: var(--border-radius); + border-top-right-radius: var(--border-radius); + background-color: var(--color--gray-45); + font-size: var(--font-size-l); + font-weight: 700; + line-height: var(--line-height-base); + + & + * { + clear: left; + } + + & .fieldset__label { + &.form-required { + &::after { + background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A"); + } + } + } +} + +.fieldset__legend--composite { + margin-block-start: 2px; + color: inherit; +} + +.fieldset__legend--invisible { + margin: 0; +} + +.fieldset__legend--group { + color: inherit; +} + +.fieldset__label { + display: block; + padding-block: var(--sp0-5); + padding-inline-start: var(--sp1); + padding-inline-end: var(--sp1); + color: var(--color--white); + line-height: var(--line-height-s); +} + +.fieldset__label.is-disabled { + color: var(--color-text-neutral-soft); +} + +.fieldset__description { + margin-block: var(--sp0-5); + font-size: var(--font-size-xs); + line-height: var(--line-height-s); +} + +.fieldset__description.is-disabled { + color: var(--input--disabled-fg-color); +} + +.fieldset__error-message { + margin-block: var(--sp0-5); + padding-inline-start: var(--sp1-5); + color: var(--color--red); + background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E33F1E' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: left top; /* LTR */ + background-size: var(--sp1) var(--sp1); + font-size: var(--font-size-s); + line-height: var(--line-height-s); + + @media screen and (-ms-high-contrast: active) { + background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E"); + } +} + +[dir="rtl"] .fieldset__error-message { + background-position: left top; +} + +.fieldset__wrapper { + margin-block-start: 0; + padding-block: var(--sp); + padding-inline-start: var(--sp); +} + +.fieldset--group .fieldset__legend--visible ~ .fieldset__wrapper { + border: solid 2px var(--color--gray-45); + border-bottom-right-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); +} + +.fieldset__wrapper--group { + margin-block: 0; + margin-inline-start: 0; + margin-inline-end: 0; +} + +.fieldset__wrapper > .container-inline { + padding-block: 0; + padding-inline-start: 0; + padding-inline-end: 0; +} diff --git a/css/components/footer.css b/css/components/footer.css new file mode 100644 index 0000000..eb78429 --- /dev/null +++ b/css/components/footer.css @@ -0,0 +1,45 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + +/** + * @file + * Footer regions. + */ + +.site-footer { + position: relative; /* stack above left social bar */ + color: var(--color--gray-65); + background: linear-gradient(180deg, var(--color--gray-5) 0%, var(--color--gray-10) 100%); +} + +.site-footer .menu { + margin-inline-start: 0; + list-style: none; +} + +.site-footer .menu ul { + margin-inline-start: var(--sp); +} + +.site-footer .menu li { + margin-block-end: var(--sp0-5); +} + +.site-footer a { + color: inherit; +} + +.site-footer a:hover { + -webkit-text-decoration: none; + text-decoration: none; +} + +@media (min-width: 75rem) { + body:not(.is-always-mobile-nav) .site-footer { + border-inline-start: solid var(--content-left) var(--color--black); + } +} diff --git a/css/components/footer.pcss.css b/css/components/footer.pcss.css new file mode 100644 index 0000000..853b2fb --- /dev/null +++ b/css/components/footer.pcss.css @@ -0,0 +1,39 @@ +/** + * @file + * Footer regions. + */ + +@import "../base/media-queries.pcss.css"; + +.site-footer { + position: relative; /* stack above left social bar */ + color: var(--color--gray-65); + background: linear-gradient(180deg, var(--color--gray-5) 0%, var(--color--gray-10) 100%); + + & .menu { + margin-inline-start: 0; + list-style: none; + + & ul { + margin-inline-start: var(--sp); + } + + & li { + margin-block-end: var(--sp0-5); + } + } + + & a { + color: inherit; + + &:hover { + text-decoration: none; + } + } +} + +@media (--nav) { + body:not(.is-always-mobile-nav) .site-footer { + border-inline-start: solid var(--content-left) var(--color--black); + } +} diff --git a/css/components/form-boolean.css b/css/components/form-boolean.css new file mode 100644 index 0000000..96226d4 --- /dev/null +++ b/css/components/form-boolean.css @@ -0,0 +1,115 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + +/** + * @file + * Checkbox and radio input elements. + */ + +input[type="checkbox"], +input[type="radio"] { + display: inline-block; + width: var(--sp1-5); + height: var(--sp1-5); + margin: 0; + vertical-align: middle; + border: 1px solid var(--color--gray-60); + border-radius: 0.1875rem; + background-color: var(--color--white); + background-repeat: no-repeat; + background-position: 50% 50%; + background-size: var(--sp1) var(--sp1); + -webkit-appearance: none; + appearance: none; +} + +input[type="checkbox"]:focus, +input[type="radio"]:focus { + border: solid 2px var(--color--primary-50); + outline: solid 2px var(--color--primary-50); +} + +@supports (outline-style: double) { + input[type="checkbox"]:focus, + input[type="radio"]:focus { + border-width: 1px; + outline-width: 6px; + outline-style: double; + outline-offset: -1px; + } +} + +input[type="checkbox"]:hover, +input[type="radio"]:hover { + border-color: var(--color--primary-60); +} + +input[type="checkbox"][disabled], +input[type="radio"][disabled] { + background-color: var(--color--gray-100); +} + +input[type="checkbox"][disabled]:hover, +input[type="radio"][disabled]:hover { + border-color: var(--color--gray-60); +} + +input[type="checkbox"][disabled]:checked, +input[type="radio"][disabled]:checked { + border-width: 1px; +} + +input[type="checkbox"]:checked, +input[type="radio"]:checked { + border-width: 2px; +} + +input.error[type="checkbox"], +input.error[type="radio"] { + border: solid 2px var(--color--red); +} + +input.error[type="checkbox"]:focus, +input.error[type="radio"]:focus { + outline-color: var(--color--red); + outline-offset: -2px; +} + +input[type="checkbox"] + label, +input[type="radio"] + label { + display: inline-block; + padding-inline-start: var(--sp0-5); +} + +input[type="checkbox"]:checked { + background-image: url("data:image/svg+xml,%3Csvg width='17px' height='13px' viewBox='0 0 17 13' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M14.8232,0.176777 C14.9209,0.0791457 15.0791,0.0791455 15.1768,0.176777 L16.9445,1.94454 C17.0422,2.04217 17.0422,2.20047 16.9445,2.2981 L6.23744,13.0052 C6.13981,13.1028 5.98151,13.1028 5.88388,13.0052 L0.176777,7.2981 C0.0791456,7.20047 0.0791456,7.04218 0.176777,6.94454 L1.94454,5.17678 C2.04217,5.07915 2.20047,5.07915 2.2981,5.17678 L5.88388,8.76256 C5.98151,8.86019 6.13981,8.86019 6.23744,8.76256 L14.8232,0.176777 Z' id='Path' fill='%232494DB' fill-rule='nonzero'%3E%3C/path%3E%3C/svg%3E"); +} + +input[type="radio"] { + border-radius: 50%; +} + +input[type="radio"]:checked { + background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8.5' cy='8.5' r='8.5' fill='%232494DB'/%3E%3C/svg%3E%0A"); + background-size: 1.0625rem; +} + +input[type="radio"]:focus { + border-width: 2px; + border-color: var(--color--primary-50); + outline-color: transparent; + box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--primary-50); +} + +input.error[type="radio"]:focus { + outline-color: transparent; + box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--red); +} + +.form-type-boolean { + margin-block: var(--sp1); +} diff --git a/css/components/form-boolean.pcss.css b/css/components/form-boolean.pcss.css new file mode 100644 index 0000000..9064b97 --- /dev/null +++ b/css/components/form-boolean.pcss.css @@ -0,0 +1,99 @@ +/** + * @file + * Checkbox and radio input elements. + */ + +@import "../base/media-queries.pcss.css"; + +input[type="checkbox"], +input[type="radio"] { + display: inline-block; + width: var(--sp1-5); + height: var(--sp1-5); + margin: 0; + vertical-align: middle; + border: 1px solid var(--color--gray-60); + border-radius: 3px; + background-color: var(--color--white); + background-repeat: no-repeat; + background-position: 50% 50%; + background-size: var(--sp1) var(--sp1); + appearance: none; + + &:focus { + border: solid 2px var(--color--primary-50); + outline: solid 2px var(--color--primary-50); + + @supports (outline-style: double) { + border-width: 1px; + outline-width: 6px; + outline-style: double; + outline-offset: -1px; + } + } + + &:hover { + border-color: var(--color--primary-60); + } + + &[disabled] { + background-color: var(--color--gray-100); + + &:hover { + border-color: var(--color--gray-60); + } + + &:checked { + border-width: 1px; + } + } + + &:checked { + border-width: 2px; + } + + &.error { + border: solid 2px var(--color--red); + + &:focus { + outline-color: var(--color--red); + outline-offset: -2px; + } + } + + & + label { + display: inline-block; + padding-inline-start: var(--sp0-5); + } +} + +input[type="checkbox"] { + &:checked { + background-image: url("data:image/svg+xml,%3Csvg width='17px' height='13px' viewBox='0 0 17 13' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M14.8232,0.176777 C14.9209,0.0791457 15.0791,0.0791455 15.1768,0.176777 L16.9445,1.94454 C17.0422,2.04217 17.0422,2.20047 16.9445,2.2981 L6.23744,13.0052 C6.13981,13.1028 5.98151,13.1028 5.88388,13.0052 L0.176777,7.2981 C0.0791456,7.20047 0.0791456,7.04218 0.176777,6.94454 L1.94454,5.17678 C2.04217,5.07915 2.20047,5.07915 2.2981,5.17678 L5.88388,8.76256 C5.98151,8.86019 6.13981,8.86019 6.23744,8.76256 L14.8232,0.176777 Z' id='Path' fill='%232494DB' fill-rule='nonzero'%3E%3C/path%3E%3C/svg%3E"); + } +} + +input[type="radio"] { + border-radius: 50%; + + &:checked { + background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8.5' cy='8.5' r='8.5' fill='%232494DB'/%3E%3C/svg%3E%0A"); + background-size: 17px; + } + + &:focus { + border-width: 2px; + border-color: var(--color--primary-50); + outline-color: transparent; + box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--primary-50); + } + + &.error:focus { + outline-color: transparent; + box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--red); + } +} + +.form-type-boolean { + margin-block: var(--sp1); +} diff --git a/css/components/form-select.css b/css/components/form-select.css new file mode 100644 index 0000000..a82d490 --- /dev/null +++ b/css/components/form-select.css @@ -0,0 +1,99 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + +/** + * @file + * Select input elements. + */ + +:root { + --form-element-select-icon: url("data:image/svg+xml,%3csvg width='18' height='11' viewBox='0 0 18 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M18 1.49699C18 1.35271 17.9279 1.19038 17.8196 1.08216L16.9178 0.18036C16.8096 0.0721439 16.6473 0 16.503 0C16.3587 0 16.1964 0.0721439 16.0882 0.18036L9 7.26854L1.91182 0.18036C1.80361 0.0721439 1.64128 0 1.49699 0C1.33467 0 1.19038 0.0721439 1.08216 0.18036L0.180361 1.08216C0.0721442 1.19038 0 1.35271 0 1.49699C0 1.64128 0.0721442 1.80361 0.180361 1.91182L8.58517 10.3166C8.69339 10.4248 8.85571 10.497 9 10.497C9.14429 10.497 9.30661 10.4248 9.41483 10.3166L17.8196 1.91182C17.9279 1.80361 18 1.64128 18 1.49699Z' fill='%235D7585'/%3e%3c/svg%3e"); +} + +select { + max-width: 100%; + height: var(--sp3); + padding-block: 0; + padding-inline-start: var(--sp); + padding-inline-end: var(--sp3); + color: var(--color-text-neutral-loud); + border: 1px solid var(--color--gray-60); + border-radius: var(--border-radius); + background-color: var(--color--white); + background-image: var(--form-element-select-icon); + background-repeat: no-repeat; + background-position: right var(--sp) center; /* LTR */ + font-family: inherit; + font-size: inherit; + -webkit-appearance: none; + appearance: none; +} + +select:focus { + border: solid 2px var(--color--primary-50); + outline: solid 2px var(--color--primary-50); +} + +@supports (outline-style: double) { + select:focus { + border-width: 1px; + outline-width: 6px; + outline-style: double; + outline-offset: -1px; + } +} + +select[disabled] { + color: var(--color--gray-60); + background-color: var(--color--gray-100); +} + +select.error { + border: solid 2px var(--color--red); +} + +select.error:focus { + outline-color: var(--color--red); +} + +select[multiple] { + height: auto; + padding: var(--sp0-5); + background-image: none; + line-height: 1; /* Needed by non-Chromium based MS Edge browsers. */ +} + +select[multiple] option { + padding: var(--sp0-5); +} + +select.form-element--small { + height: var(--sp2-5); +} + +/* Necessary to show chevron in forced colors mode in modern browsers. */ + +@media (forced-colors: active) { + select { + padding-inline-end: var(--sp); + background-image: none; + -webkit-appearance: listbox; + appearance: listbox; /* Default appearance to whatever the browser's default is. */ + } + @supports ((-webkit-appearance: revert) or (appearance: revert)) { + select { + -webkit-appearance: revert; + appearance: revert; + } + } +} + +[dir="rtl"] select { + background-position: left var(--sp) center; +} diff --git a/css/components/form-select.pcss.css b/css/components/form-select.pcss.css new file mode 100644 index 0000000..37d08fd --- /dev/null +++ b/css/components/form-select.pcss.css @@ -0,0 +1,84 @@ +/** + * @file + * Select input elements. + */ + +@import "../base/media-queries.pcss.css"; + +:root { + --form-element-select-icon: url("../../images/chevron-down.svg"); +} + +select { + max-width: 100%; + height: var(--sp3); + padding-block: 0; + padding-inline-start: var(--sp); + padding-inline-end: var(--sp3); + color: var(--color-text-neutral-loud); + border: 1px solid var(--color--gray-60); + border-radius: var(--border-radius); + background-color: var(--color--white); + background-image: var(--form-element-select-icon); + background-repeat: no-repeat; + background-position: right var(--sp) center; /* LTR */ + font-family: inherit; + font-size: inherit; + appearance: none; + + &:focus { + border: solid 2px var(--color--primary-50); + outline: solid 2px var(--color--primary-50); + + @supports (outline-style: double) { + border-width: 1px; + outline-width: 6px; + outline-style: double; + outline-offset: -1px; + } + } + + &[disabled] { + color: var(--color--gray-60); + background-color: var(--color--gray-100); + } + + &.error { + border: solid 2px var(--color--red); + + &:focus { + outline-color: var(--color--red); + } + } + + &[multiple] { + height: auto; + padding: var(--sp0-5); + background-image: none; + line-height: 1; /* Needed by non-Chromium based MS Edge browsers. */ + + & option { + padding: var(--sp0-5); + } + } + + &.form-element--small { + height: var(--sp2-5); + } + + /* Necessary to show chevron in forced colors mode in modern browsers. */ + @media (forced-colors: active) { + padding-inline-end: var(--sp); + background-image: none; + appearance: listbox; /* Default appearance to whatever the browser's default is. */ + @supports (appearance: revert) { + appearance: revert; + } + } +} + +[dir="rtl"] select { + background-position: left var(--sp) center; +} diff --git a/css/components/form-text.css b/css/components/form-text.css new file mode 100644 index 0000000..d2aa11c --- /dev/null +++ b/css/components/form-text.css @@ -0,0 +1,114 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + +/** + * @file + * Text input elements. + */ + +[type="color"], +[type="date"], +[type="datetime-local"], +[type="email"], +[type="file"], +[type="month"], +[type="number"], +[type="password"], +[type="search"], +[type="tel"], +[type="text"], +[type="time"], +[type="url"], +[type="week"], +textarea { + width: 100%; + max-width: 100%; + min-height: var(--sp3); + padding: 0 var(--sp); + color: var(--color-text-neutral-loud); + border: 1px solid var(--color--gray-60); + border-radius: var(--border-radius); + background-color: var(--color--white); + font-family: inherit; + font-size: inherit; + -webkit-appearance: none; + appearance: none; +} + +:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea):focus { + border: solid 2px var(--color--primary-50); + outline: solid 2px var(--color--primary-50); +} + +@supports (outline-style: double) { + :is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea):focus { + border-width: 1px; + outline-width: 6px; + outline-style: double; + outline-offset: -1px; + } +} + +[disabled]:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea) { + color: var(--color--gray-60); + background-color: var(--color--gray-100); +} + +.error:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea) { + border: solid 2px var(--color--red); +} + +.error:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea):focus { + outline-color: var(--color--red); + outline-offset: -2px; +} + +.error:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea) + .ck-editor > .ck-editor__main { + border: solid 2px var(--color--red); +} + +.form-element--small:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea) { + min-height: var(--sp2-5); +} + +@media (min-width: 31.25rem) { + [type="color"], + [type="date"], + [type="datetime-local"], + [type="email"], + [type="file"], + [type="month"], + [type="number"], + [type="password"], + [type="search"], + [type="tel"], + [type="text"], + [type="time"], + [type="url"], + [type="week"], + textarea { + width: auto; + } +} + +/* Ensure that date field isn't larger than other fields. */ + +[type="date"]::-webkit-datetime-edit-fields-wrapper { + padding-block: 0; + padding-inline-start: 0; + padding-inline-end: 0; +} + +[type="file"] { + height: auto; + padding-block: var(--sp0-75); +} + +[type="color"] { + width: var(--sp3); + padding: 0; +} diff --git a/css/components/form-text.pcss.css b/css/components/form-text.pcss.css new file mode 100644 index 0000000..defea74 --- /dev/null +++ b/css/components/form-text.pcss.css @@ -0,0 +1,90 @@ +/** + * @file + * Text input elements. + */ + +@import "../base/media-queries.pcss.css"; + +[type="color"], +[type="date"], +[type="datetime-local"], +[type="email"], +[type="file"], +[type="month"], +[type="number"], +[type="password"], +[type="search"], +[type="tel"], +[type="text"], +[type="time"], +[type="url"], +[type="week"], +textarea { + width: 100%; + max-width: 100%; + min-height: var(--sp3); + padding: 0 var(--sp); + color: var(--color-text-neutral-loud); + border: 1px solid var(--color--gray-60); + border-radius: var(--border-radius); + background-color: var(--color--white); + font-family: inherit; + font-size: inherit; + appearance: none; + + &:focus { + border: solid 2px var(--color--primary-50); + outline: solid 2px var(--color--primary-50); + + @supports (outline-style: double) { + border-width: 1px; + outline-width: 6px; + outline-style: double; + outline-offset: -1px; + } + } + + &[disabled] { + color: var(--color--gray-60); + background-color: var(--color--gray-100); + } + + &.error { + border: solid 2px var(--color--red); + + &:focus { + outline-color: var(--color--red); + outline-offset: -2px; + } + & + .ck-editor > .ck-editor__main { + border: solid 2px var(--color--red); + } + } + + &.form-element--small { + min-height: var(--sp2-5); + } + + @media (--sm) { + width: auto; + } +} + +[type="date"] { + /* Ensure that date field isn't larger than other fields. */ + &::-webkit-datetime-edit-fields-wrapper { + padding-block: 0; + padding-inline-start: 0; + padding-inline-end: 0; + } +} + +[type="file"] { + height: auto; + padding-block: var(--sp0-75); +} + +[type="color"] { + width: var(--sp3); + padding: 0; +} diff --git a/css/components/form-textarea.css b/css/components/form-textarea.css new file mode 100644 index 0000000..0946b75 --- /dev/null +++ b/css/components/form-textarea.css @@ -0,0 +1,18 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + +/** + * @file + * Textarea. + */ + +textarea { + display: block; + width: 100%; + min-height: var(--sp8); + padding: var(--sp); +} diff --git a/css/components/form-textarea.pcss.css b/css/components/form-textarea.pcss.css new file mode 100644 index 0000000..5ca1567 --- /dev/null +++ b/css/components/form-textarea.pcss.css @@ -0,0 +1,13 @@ +/** + * @file + * Textarea. + */ + +@import "../base/media-queries.pcss.css"; + +textarea { + display: block; + width: 100%; + min-height: var(--sp8); + padding: var(--sp); +} diff --git a/css/components/form.css b/css/components/form.css new file mode 100644 index 0000000..099aa43 --- /dev/null +++ b/css/components/form.css @@ -0,0 +1,212 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + +/** + * @file + * Main form and form item styles. + */ + +::placeholder { + color: var(--color--gray-60); +} + +/** + * General form item. + */ + +.form-item { + margin-block: var(--sp1); +} + +.form-item__label--multiple-value-form { + margin-block: 0; + font-size: inherit; + font-weight: inherit; + line-height: inherit; +} + +/** + * When a table row or a container-inline has a single form item, prevent it + * from adding unnecessary extra spacing. + * If it has multiple form items, allow spacing between them, overriding core. + */ + +tr .form-item, +.container-inline .form-item { + margin-block: var(--sp0-5); +} + +/** + * Form element label. + */ + +.form-item__label { + display: block; + margin-block: var(--sp0-5); +} + +.container-inline .form-item__label { + margin-inline-end: 1em; +} + +.form-item__label--multiple-value-form { + margin-block: 0; + font-size: inherit; + font-weight: inherit; + line-height: inherit; +} + +.form-item__label[for] { + cursor: pointer; +} + +.form-item__label.option { + display: inline; + font-weight: normal; +} + +/* Label states. */ + +.form-item__label.is-disabled { + cursor: default; + color: var(--color--gray-70); +} + +/* Form required star icon */ + +.form-item__label.form-required::after, +.fieldset__label.form-required::after, +.required-mark::after { + display: inline-block; + width: 0.5rem; + height: 0.5rem; + margin-inline: 0.3em; + content: ""; + vertical-align: text-top; + /* Use a background image to prevent screen readers from announcing the text. */ + background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%232494DB'/%3E%3C/svg%3E%0A"); + background-repeat: no-repeat; + background-size: 0.5rem 0.5rem; +} + +@media screen and (-ms-high-contrast: active) { + .form-item__label.form-required::after, + .fieldset__label.form-required::after, + .required-mark::after { + background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A"); + } +} + +/** + * Form item description. + */ + +.form-item__description { + margin-block: var(--sp0-5); + max-width: 60ch; + font-size: var(--font-size-s); + line-height: var(--line-height-s); +} + +.field-multiple-table + .form-item__description { + margin-block-start: 0; +} + +/** + * Error message (Inline form errors). + */ + +.form-item--error-message { + margin-block: var(--sp0-5); + padding-inline-start: var(--sp1-5); + color: var(--color--red); + background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E33F1E' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: left top; /* LTR */ + background-size: var(--sp1) var(--sp1); + font-size: var(--font-size-s); + line-height: var(--line-height-s); +} + +@media screen and (-ms-high-contrast: active) { + .form-item--error-message { + background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E"); + } +} + +[dir="rtl"] .form-item--error-message { + background-position: right top; +} + +/** + * Form actions. + */ + +.form-actions { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + margin-block: var(--sp0-5); +} + +.form-actions .button, +.form-actions .action-link { + margin-block: var(--sp0-5); +} + +.form-actions .ajax-progress--throbber { + align-self: center; +} + +/** + * Custom label placement for editor filter format select. + */ + +.form-item--editor-format { + display: flex; + flex-wrap: wrap; + align-items: center; + max-width: 100%; +} + +.form-item--editor-format .form-item__label, +.form-item--editor-format .form-item__prefix, +.form-item--editor-format .form-item__suffix, +.form-item--editor-format .form-element--editor-format { + min-width: 1px; +} + +.form-item--editor-format .form-item__label, +.form-item--editor-format .form-item__prefix, +.form-item--editor-format .form-item__suffix { + margin-inline-end: var(--sp0-5); +} + +.form-item--editor-format .form-item__description, +.form-item--editor-format .form-item--error-message { + flex: 0 1 100%; + min-width: 1px; +} + +/** + * Inline forms. + */ + +.form--inline > * { + display: inline-block; + margin-top: var(--sp0-5); + margin-bottom: 0; + vertical-align: top; /* Ensure proper alignment if description is present. */ +} + +.form--inline .form-item__label { + margin: 0; +} + +.form--inline .form-actions { + margin-top: var(--sp1-5); +} diff --git a/css/components/form.pcss.css b/css/components/form.pcss.css new file mode 100644 index 0000000..b422853 --- /dev/null +++ b/css/components/form.pcss.css @@ -0,0 +1,193 @@ +/** + * @file + * Main form and form item styles. + */ + +@import "../base/media-queries.pcss.css"; + +::placeholder { + color: var(--color--gray-60); +} + +/** + * General form item. + */ +.form-item { + margin-block: var(--sp1); +} + +.form-item__label--multiple-value-form { + margin-block: 0; + font-size: inherit; + font-weight: inherit; + line-height: inherit; +} + +/** + * When a table row or a container-inline has a single form item, prevent it + * from adding unnecessary extra spacing. + * If it has multiple form items, allow spacing between them, overriding core. + */ +tr .form-item, +.container-inline .form-item { + margin-block: var(--sp0-5); +} + +/** + * Form element label. + */ +.form-item__label { + display: block; + margin-block: var(--sp0-5); +} + +.container-inline .form-item__label { + margin-inline-end: 1em; +} + +.form-item__label--multiple-value-form { + margin-block: 0; + font-size: inherit; + font-weight: inherit; + line-height: inherit; +} + +.form-item__label[for] { + cursor: pointer; +} + +.form-item__label.option { + display: inline; + font-weight: normal; +} + +/* Label states. */ +.form-item__label.is-disabled { + cursor: default; + color: var(--color--gray-70); +} + +/* Form required star icon */ +.form-item__label.form-required::after, +.fieldset__label.form-required::after, +.required-mark::after { + display: inline-block; + width: 0.5rem; + height: 0.5rem; + margin-inline: 0.3em; + content: ""; + vertical-align: text-top; + /* Use a background image to prevent screen readers from announcing the text. */ + background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%232494DB'/%3E%3C/svg%3E%0A"); + background-repeat: no-repeat; + background-size: 0.5rem 0.5rem; + + @media screen and (-ms-high-contrast: active) { + background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A"); + } +} + +/** + * Form item description. + */ +.form-item__description { + margin-block: var(--sp0-5); + max-width: 60ch; + font-size: var(--font-size-s); + line-height: var(--line-height-s); +} + +.field-multiple-table + .form-item__description { + margin-block-start: 0; +} + +/** + * Error message (Inline form errors). + */ +.form-item--error-message { + margin-block: var(--sp0-5); + padding-inline-start: var(--sp1-5); + color: var(--color--red); + background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E33F1E' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: left top; /* LTR */ + background-size: var(--sp1) var(--sp1); + font-size: var(--font-size-s); + line-height: var(--line-height-s); + + @media screen and (-ms-high-contrast: active) { + background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E"); + } +} + +[dir="rtl"] .form-item--error-message { + background-position: right top; +} + +/** + * Form actions. + */ +.form-actions { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + margin-block: var(--sp0-5); +} + +.form-actions .button, +.form-actions .action-link { + margin-block: var(--sp0-5); +} + +.form-actions .ajax-progress--throbber { + align-self: center; +} + +/** + * Custom label placement for editor filter format select. + */ +.form-item--editor-format { + display: flex; + flex-wrap: wrap; + align-items: center; + max-width: 100%; +} + +.form-item--editor-format .form-item__label, +.form-item--editor-format .form-item__prefix, +.form-item--editor-format .form-item__suffix, +.form-item--editor-format .form-element--editor-format { + min-width: 1px; +} + +.form-item--editor-format .form-item__label, +.form-item--editor-format .form-item__prefix, +.form-item--editor-format .form-item__suffix { + margin-inline-end: var(--sp0-5); +} + +.form-item--editor-format .form-item__description, +.form-item--editor-format .form-item--error-message { + flex: 0 1 100%; + min-width: 1px; +} + +/** + * Inline forms. + */ +.form--inline { + & > * { + display: inline-block; + margin-top: var(--sp0-5); + margin-bottom: 0; + vertical-align: top; /* Ensure proper alignment if description is present. */ + } + + & .form-item__label { + margin: 0; + } + + & .form-actions { + margin-top: var(--sp1-5); + } +} diff --git a/css/components/forum.css b/css/components/forum.css new file mode 100644 index 0000000..c190f55 --- /dev/null +++ b/css/components/forum.css @@ -0,0 +1,22 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + +/** + * @file + * Forum specific styles. + */ + +.forum table { + width: 100%; +} + +.forum__name--link, +.forum__last-reply a, +.forum__title a { + color: var(--color-text-primary-medium); + font-weight: bold; +} diff --git a/css/components/forum.pcss.css b/css/components/forum.pcss.css new file mode 100644 index 0000000..5ae66f8 --- /dev/null +++ b/css/components/forum.pcss.css @@ -0,0 +1,19 @@ +/** + * @file + * Forum specific styles. + */ + +@import "../base/media-queries.pcss.css"; + +.forum { + & table { + width: 100%; + } +} + +.forum__name--link, +.forum__last-reply a, +.forum__title a { + color: var(--color-text-primary-medium); + font-weight: bold; +} diff --git a/css/components/header-buttons-mobile.css b/css/components/header-buttons-mobile.css new file mode 100644 index 0000000..ee76f8f --- /dev/null +++ b/css/components/header-buttons-mobile.css @@ -0,0 +1,40 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + +/** + * @file + * Header Mobile Buttons. + */ + +.mobile-buttons { + margin-block-start: var(--sp0-5); + margin-inline-start: auto; +} + +@media (min-width: 31.25rem) { + .mobile-buttons { + margin-block-start: var(--sp2); + } +} + +@media (min-width: 43.75rem) { + .mobile-buttons { + margin-block-start: var(--sp4); + } +} + +@media (min-width: 75rem) { + .mobile-buttons { + margin-block-start: var(--sp6); + } +} + +@media (min-width: 75rem) { + body:not(.is-always-mobile-nav) .mobile-buttons { + display: none; + } +} diff --git a/css/components/header-buttons-mobile.pcss.css b/css/components/header-buttons-mobile.pcss.css new file mode 100644 index 0000000..4cf6bbe --- /dev/null +++ b/css/components/header-buttons-mobile.pcss.css @@ -0,0 +1,29 @@ +/** + * @file + * Header Mobile Buttons. + */ + +@import "../base/media-queries.pcss.css"; + +.mobile-buttons { + margin-block-start: var(--sp0-5); + margin-inline-start: auto; + + @media (--sm) { + margin-block-start: var(--sp2); + } + + @media (--md) { + margin-block-start: var(--sp4); + } + + @media (--nav) { + margin-block-start: var(--sp6); + } +} + +@media (--nav) { + body:not(.is-always-mobile-nav) .mobile-buttons { + display: none; + } +} diff --git a/css/components/header-navigation.css b/css/components/header-navigation.css new file mode 100644 index 0000000..4553f63 --- /dev/null +++ b/css/components/header-navigation.css @@ -0,0 +1,145 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + +/** + * @file + * Navigation in header. + */ + +.header-nav { + position: fixed; + z-index: 501; /* Appear above overlay and contextual links in header. */ + inset-block-start: 0; + inset-inline-start: 100%; + visibility: hidden; + overflow: auto; + /* Ensure that header nav not use additional space and force system branding + * block text to unnecessarily wrap. */ + flex-basis: max-content; + width: 100%; + max-width: var(--mobile-nav-width); + height: 100%; + padding-block: 0 var(--sp); + padding-inline-start: var(--sp); + padding-inline-end: var(--sp); + /* Create room for the "close" button. We cannot use margin because the + * mobile navigation needs to slide beneath the button, but we also cannot + * use padding because that would enable the button to scroll out of the + * viewport on short screens. */ + border-block-start: solid var(--color--white) calc(var(--sp3) + var(--drupal-displace-offset-top, 0px)); + background-color: var(--color--white); + box-shadow: 0 0 72px rgba(0, 0, 0, 0.1); +} + +.header-nav.is-active { + visibility: visible; + transform: translateX(calc(-100% - var(--drupal-displace-offset-right, 0px))); /* LTR */ +} + +[dir="rtl"] .header-nav.is-active { + transform: translateX(calc(100% + var(--drupal-displace-offset-left, 0px))); +} + +@media (min-width: 31.25rem) { + .header-nav { + border-top-width: calc(var(--sp5) + var(--drupal-displace-offset-top, 0px)); + } +} + +@media (min-width: 43.75rem) { + .header-nav { + padding-block-end: var(--sp3); + padding-inline-start: var(--sp3); + border-top-width: calc(var(--sp7) + var(--drupal-displace-offset-top, 0px)); + } +} + +@media (min-width: 62.5rem) { + .header-nav { + grid-column: 5 / 14; + } +} + +/* + * Ensure top border has the same color as the background when in forced colors. + */ + +@media (forced-colors: active) { + .header-nav { + border-top-color: canvas; + } +} + +/* + * Only apply transition styles when JS is loaded. This + * works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189 + */ + +html.js .header-nav { + transition: visibility 0.2s, transform 0.2s; +} + +@media (min-width: 75rem) { + body:not(.is-always-mobile-nav) .header-nav { + position: static; + display: flex; + visibility: visible; + overflow: visible; + grid-column: 5 / 15; + align-items: center; + justify-content: flex-end; + max-width: none; + height: var(--header-height-wide-when-fixed); + margin-block-start: auto; + padding-block: 0; + padding-inline-start: 0; + padding-inline-end: 0; + transition: transform 0.2s; + transform: none; + border-block-start: 0; + box-shadow: none; + } +} + +@media (min-width: 75rem) { + body.is-always-mobile-nav .header-nav { + overflow: auto; + max-width: calc((7 * (var(--grid-col-width) + var(--grid-gap)))); + padding-inline-end: var(--sp); + transition: transform 0.2s, visibility 0.2s; + border-top-width: calc(var(--drupal-displace-offset-top, 0px) + var(--sp11)); + } +} + +@media (min-width: 90rem) { + body.is-always-mobile-nav .header-nav { + max-width: calc(100vw - (var(--max-width) + var(--content-left)) + ((7 * (var(--grid-col-width) + var(--grid-gap))))); + padding-inline-end: calc(100vw - (var(--max-width) + var(--content-left) - var(--sp))); + } +} + +.header-nav-overlay { + position: fixed; + z-index: 101; + inset-block-start: 0; + inset-inline-start: 0; + display: none; + width: 100%; + height: 100vh; + opacity: 0.2; + background: var(--color--gray-5); +} + +@media (forced-colors: active) { + .header-nav-overlay { + background: canvastext; + } +} + +.is-overlay-active .header-nav-overlay { + display: block; +} diff --git a/css/components/header-navigation.pcss.css b/css/components/header-navigation.pcss.css new file mode 100644 index 0000000..9cf27bd --- /dev/null +++ b/css/components/header-navigation.pcss.css @@ -0,0 +1,128 @@ +/** + * @file + * Navigation in header. + */ + +@import "../base/media-queries.pcss.css"; + +.header-nav { + position: fixed; + z-index: 501; /* Appear above overlay and contextual links in header. */ + inset-block-start: 0; + inset-inline-start: 100%; + visibility: hidden; + overflow: auto; + /* Ensure that header nav not use additional space and force system branding + * block text to unnecessarily wrap. */ + flex-basis: max-content; + width: 100%; + max-width: var(--mobile-nav-width); + height: 100%; + padding-block: 0 var(--sp); + padding-inline-start: var(--sp); + padding-inline-end: var(--sp); + /* Create room for the "close" button. We cannot use margin because the + * mobile navigation needs to slide beneath the button, but we also cannot + * use padding because that would enable the button to scroll out of the + * viewport on short screens. */ + border-block-start: solid var(--color--white) calc(var(--sp3) + var(--drupal-displace-offset-top, 0px)); + background-color: var(--color--white); + box-shadow: 0 0 72px rgba(0, 0, 0, 0.1); + + &.is-active { + visibility: visible; + transform: translateX(calc(-100% - var(--drupal-displace-offset-right, 0px))); /* LTR */ + + &:dir(rtl) { + transform: translateX(calc(100% + var(--drupal-displace-offset-left, 0px))); + } + } + + @media (--sm) { + border-top-width: calc(var(--sp5) + var(--drupal-displace-offset-top, 0px)); + } + + @media (--md) { + padding-block-end: var(--sp3); + padding-inline-start: var(--sp3); + border-top-width: calc(var(--sp7) + var(--drupal-displace-offset-top, 0px)); + } + + @media (--lg) { + grid-column: 5 / 14; + } + + /* + * Ensure top border has the same color as the background when in forced colors. + */ + @media (forced-colors: active) { + border-top-color: canvas; + } +} + +/* + * Only apply transition styles when JS is loaded. This + * works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189 + */ +html.js .header-nav { + transition: visibility 0.2s, transform 0.2s; +} + +body:not(.is-always-mobile-nav) .header-nav { + @media (--nav) { + position: static; + display: flex; + visibility: visible; + overflow: visible; + grid-column: 5 / 15; + align-items: center; + justify-content: flex-end; + max-width: none; + height: var(--header-height-wide-when-fixed); + margin-block-start: auto; + padding-block: 0; + padding-inline-start: 0; + padding-inline-end: 0; + transition: transform 0.2s; + transform: none; + border-block-start: 0; + box-shadow: none; + } +} + +body.is-always-mobile-nav { + & .header-nav { + @media (--nav) { + overflow: auto; + max-width: calc((7 * (var(--grid-col-width) + var(--grid-gap)))); + padding-inline-end: var(--sp); + transition: transform 0.2s, visibility 0.2s; + border-top-width: calc(var(--drupal-displace-offset-top, 0px) + var(--sp11)); + } + + @media (--grid-max) { + max-width: calc(100vw - (var(--max-width) + var(--content-left)) + ((7 * (var(--grid-col-width) + var(--grid-gap))))); + padding-inline-end: calc(100vw - (var(--max-width) + var(--content-left) - var(--sp))); + } + } +} + +.header-nav-overlay { + position: fixed; + z-index: 101; + inset-block-start: 0; + inset-inline-start: 0; + display: none; + width: 100%; + height: 100vh; + opacity: 0.2; + background: var(--color--gray-5); + + @media (forced-colors: active) { + background: canvastext; + } + + @nest .is-overlay-active & { + display: block; + } +} diff --git a/css/components/header-search-narrow.css b/css/components/header-search-narrow.css new file mode 100644 index 0000000..b02f019 --- /dev/null +++ b/css/components/header-search-narrow.css @@ -0,0 +1,191 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + +/** + * @file + * Header Search Narrow Block. + */ + +.block-search-narrow { + margin-inline: calc(-1 * var(--sp)); + margin-block-end: var(--sp2); + background: var(--color--black); +} + +.block-search-narrow .search-block-form { + display: flex; +} + +.block-search-narrow .form-item { + flex-grow: 1; + margin: 0; +} + +.block-search-narrow .form-actions { + margin: 0; +} + +.block-search-narrow input[type="search"] { + width: calc(100% + var(--sp2)); + height: calc(3 * var(--sp)); + padding-block: 0; + padding-inline-start: var(--sp); + padding-inline-end: var(--sp); + transition: background-size 0.4s; + color: var(--color--white); + border: solid 1px transparent; + background-color: transparent; + background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */ + background-repeat: no-repeat; + background-position: bottom left; /* LTR */ + background-size: 0% 0.3125rem; + box-shadow: none; + font-family: var(--font-serif); + font-size: 1rem; + -webkit-appearance: none; +} + +.block-search-narrow input[type="search"]:focus { + outline: solid 4px transparent; + outline-offset: -4px; + background-size: 100% 0.3125rem; +} + +@media (min-width: 43.75rem) { + .block-search-narrow input[type="search"] { + height: calc(4 * var(--sp)); + padding-inline-start: var(--sp2); + padding-inline-end: var(--sp2); + } +} + +.block-search-narrow .search-form__submit { + position: relative; + overflow: hidden; + align-self: stretch; + width: var(--sp3); + height: auto; + margin-block: 0; + margin-inline-start: 0; + margin-inline-end: 0; + padding-block: 0; + padding-inline-start: 0; + padding-inline-end: 0; + cursor: pointer; + border-color: transparent; + background-color: transparent; + + /* + When in Windows high contrast mode, FF will not output either background + images or SVGs that are nested directly within a + + {# + Add tabindex=“-1” to prevent Safari from closing search bar when the submit button is clicked with a mouse. + @see https://www.drupal.org/project/drupal/issues/3269716 + @see https://bugs.webkit.org/show_bug.cgi?id=229895 + #} + +
    +
    + {{ content }} +
    +
    + + {% endblock %} + diff --git a/templates/block/block--secondary-menu.html.twig b/templates/block/block--secondary-menu.html.twig new file mode 100644 index 0000000..36bf31e --- /dev/null +++ b/templates/block/block--secondary-menu.html.twig @@ -0,0 +1,57 @@ +{# +/** + * @file + * Olivera's override for the User Account Menu navigation 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. + * - in_preview: Whether the plugin is being rendered in preview mode. + * - 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 https://juicystudio.com/article/screen-readers-display-none.php and + * https://www.w3.org/TR/WCAG-TECHS/H42.html for more information. + */ +#} +{% + set classes = [ + 'block', + 'block-menu', + 'navigation', + 'menu--' ~ derivative_plugin_id|clean_class, + 'secondary-nav', +] +%} +{% set heading_id = attributes.id ~ '-menu'|clean_id %} + diff --git a/templates/block/block--system-branding-block.html.twig b/templates/block/block--system-branding-block.html.twig new file mode 100644 index 0000000..4fdaa8a --- /dev/null +++ b/templates/block/block--system-branding-block.html.twig @@ -0,0 +1,32 @@ +{% extends "block.html.twig" %} +{# +/** + * @file + * Olivera's theme implementation 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. + */ +#} +{% set attributes = attributes.addClass('site-branding') %} +{% block content %} +
    + {% if site_logo %} + + {% endif %} + {% if site_name %} +
    +
    + {{ site_name }} +
    +
    + {% endif %} +
    +{% endblock %} diff --git a/templates/block/block--system-menu-block.html.twig b/templates/block/block--system-menu-block.html.twig new file mode 100644 index 0000000..152d4ba --- /dev/null +++ b/templates/block/block--system-menu-block.html.twig @@ -0,0 +1,56 @@ +{# +/** + * @file + * Olivera's override for the main menu navigation 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. + * - in_preview: Whether the plugin is being rendered in preview mode. + * - 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 https://juicystudio.com/article/screen-readers-display-none.php and + * https://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/block/block--system-powered-by-block.html.twig b/templates/block/block--system-powered-by-block.html.twig new file mode 100644 index 0000000..7c897b4 --- /dev/null +++ b/templates/block/block--system-powered-by-block.html.twig @@ -0,0 +1,21 @@ +{% extends "block.html.twig" %} +{# +/** + * @file + * Olivera's theme implementation for Powered by Drupal block. + * + * The Powered by Drupal block is an optional link to the home page of the + * Drupal project. + * + */ +#} +{% block content %} + {{ attach_library('olivera/powered-by-block') }} + + {% trans %}Powered by{% endtrans %} + {% trans %}Drupal{% endtrans %} + + +{% endblock %} diff --git a/templates/block/block.html.twig b/templates/block/block.html.twig new file mode 100644 index 0000000..9cbf7ee --- /dev/null +++ b/templates/block/block.html.twig @@ -0,0 +1,55 @@ +{# +/** + * @file + * Olivera's implementation to display a block. + * + * Available variables: + * - layout: String that will determine the layout of the block. + * - 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. + * - in_preview: Whether the plugin is being rendered in preview mode. + * - 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. + * - content_attributes: Same as attributes, except applied to the main content + * 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() + * + * @ingroup themeable + */ +#} + +{% + set classes = [ + 'block', + 'block-' ~ configuration.provider|clean_class, + 'block-' ~ plugin_id|clean_class, + layout ? 'layout--' ~ layout|clean_class, + ] +%} + + + {{ title_prefix }} + {% if label %} + {{ label }} + {% endif %} + {{ title_suffix }} + {% block content %} + + {{ content }} + + {% endblock %} + diff --git a/templates/content/book-node-export-html.html.twig b/templates/content/book-node-export-html.html.twig new file mode 100644 index 0000000..94a4c24 --- /dev/null +++ b/templates/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/content/comment.html.twig b/templates/content/comment.html.twig new file mode 100644 index 0000000..9f6bc24 --- /dev/null +++ b/templates/content/comment.html.twig @@ -0,0 +1,119 @@ +{# +/** + * @file + * Olivera's theme implementation for comments. + * + * Available variables: + * - author: (optional) 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: (optional) 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: (optional) 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: (optional) Submission information created from author and + * created during template_preprocess_comment(). + * - user_picture: (optional) The comment author's profile picture. + * - status: Comment status. Possible values are: + * unpublished, published, or preview. + * - title: (optional) 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; for instance, '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, optional): + * - 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. + * - commented_entity: Entity the comments are attached to. + * + * @see template_preprocess_comment() + */ +#} +{% + set classes = [ + 'comment', + 'js-comment', + not parent_comment ? 'comment--level-1', + status != 'published' ? 'comment--' ~ status, + comment.owner.anonymous ? 'by-anonymous', + author_id and author_id == commented_entity.getOwnerId() ? 'by-' ~ commented_entity.getEntityTypeId() ~ '-author', + ] +%} +{{ attach_library('olivera/comments') }} +
    + {# + 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. + #} + + + {% if submitted %} +
    +
    + {{ user_picture }} +
    +
    + {% endif %} +
    + {% if submitted %} +
    +

    {{ author }}

    +

    {{ created }}

    + {# + 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 %} +
    + {% endif %} + + {% if title %} + {{ title_prefix }} + {{ title }} + {{ title_suffix }} + {% endif %} + {{ content }} +
    + +
    diff --git a/templates/content/media.html.twig b/templates/content/media.html.twig new file mode 100644 index 0000000..ae8a779 --- /dev/null +++ b/templates/content/media.html.twig @@ -0,0 +1,30 @@ +{# +/** + * @file + * Theme override to display a media item. + * + * Available variables: + * - media: The media item, with limited access to object properties and + * methods. + * - 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/content/node--teaser.html.twig b/templates/content/node--teaser.html.twig new file mode 100644 index 0000000..7bf980c --- /dev/null +++ b/templates/content/node--teaser.html.twig @@ -0,0 +1,105 @@ +{# +/** + * @file + * Olivera's theme implementation to display a node teaser. + * + * 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() + */ +#} + +{% + 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, + ] +%} + + +
    + {{ title_prefix }} + {{ title_suffix }} + {% if display_submitted %} +
    + + {{ 'By'|t }} {% apply spaceless %}{{ author_name }}{% endapply %}, {{ date }} + + {{ metadata }} +
    + {% endif %} + {% if label and not page %} +
    + {{ content.field_image }} + + {{ label }} + +
    + {% endif %} +
    + + {{ content|without('field_image', 'links') }} + + diff --git a/templates/content/node.html.twig b/templates/content/node.html.twig new file mode 100644 index 0000000..8e8b39f --- /dev/null +++ b/templates/content/node.html.twig @@ -0,0 +1,115 @@ +{# +/** + * @file + * Olivera's theme implementation 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() + */ +#} + +{% set layout = layout ? 'layout--' ~ layout|clean_class %} + +{% + set classes = [ + 'node', + 'node--type-' ~ node.bundle|clean_class, + layout ? 'grid-full', + node.isPromoted() ? 'node--promoted', + node.isSticky() ? 'node--sticky', + not node.isPublished() ? 'node--unpublished', + view_mode ? 'node--view-mode-' ~ view_mode|clean_class, + ] +%} + +
    + {{ title_prefix }} + {% if label and not page %} + + {{ label }} + + {% endif %} + {{ title_suffix }} + {% if display_submitted %} +
    + {% if author_picture %} +
    + {{ author_picture }} +
    + {% endif %} + + {{ 'By'|t }} {% apply spaceless %}{{ author_name }}{% endapply %}, {{ date }} + + {{ metadata }} +
    + {% endif %} +
    + + {# Comments not part of content, so they won't inherit .text-content styles. #} + {{ content|without('comment') }} + + {% if content.comment %} +
    + {{ content.comment }} +
    + {% endif %} + diff --git a/templates/content/page-title.html.twig b/templates/content/page-title.html.twig new file mode 100644 index 0000000..cdba079 --- /dev/null +++ b/templates/content/page-title.html.twig @@ -0,0 +1,26 @@ +{# +/** + * @file + * Olivera's theme implementation for a page title. + * + * 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. + */ +#} +{% + set classes = [ + 'title', + 'page-title', + ] +%} + +{{ title_prefix }} +{% if title|render|striptags|trim %} + {{ title }} +{% endif %} +{{ title_suffix }} diff --git a/templates/content/search-result.html.twig b/templates/content/search-result.html.twig new file mode 100644 index 0000000..8cd0111 --- /dev/null +++ b/templates/content/search-result.html.twig @@ -0,0 +1,80 @@ +{# +/** + * @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). + * 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('olivera/search-results') }} +{% if info_split %} +
    + {% if info_split.user %} + + {{ 'By'|t }} {% apply spaceless %}{{ info_split.user }}{% endapply %} + + {% endif %} + {% if info_date %} + , {{ info_date }} + {% endif %} +
    +{% endif %} +{% if title %} + {{ title_prefix }} + + {{ title }} + + {{ title_suffix }} +{% endif %} +{% if snippet %} + {{ snippet }} +{% endif %} diff --git a/templates/dataset/forum-list.html.twig b/templates/dataset/forum-list.html.twig new file mode 100644 index 0000000..2d537fa --- /dev/null +++ b/templates/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/dataset/forums.html.twig b/templates/dataset/forums.html.twig new file mode 100644 index 0000000..7acc4c8 --- /dev/null +++ b/templates/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('olivera/forum') }} +{% if forums_defined %} +
    + {{ forums }} + {{ topics }} + {{ topics_pager }} +
    +{% endif %} diff --git a/templates/dataset/item-list--search-results.html.twig b/templates/dataset/item-list--search-results.html.twig new file mode 100644 index 0000000..6bd6441 --- /dev/null +++ b/templates/dataset/item-list--search-results.html.twig @@ -0,0 +1,34 @@ +{% 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 listClasses = [ + 'search-results__item', +] +%} +{% set attributes = attributes.addClass(classes) %} diff --git a/templates/dataset/item-list.html.twig b/templates/dataset/item-list.html.twig new file mode 100644 index 0000000..7c7a6e3 --- /dev/null +++ b/templates/dataset/item-list.html.twig @@ -0,0 +1,38 @@ +{# +/** + * @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 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/datetime-form.html.twig b/templates/datetime-form.html.twig new file mode 100644 index 0000000..9b56a91 --- /dev/null +++ b/templates/datetime-form.html.twig @@ -0,0 +1,15 @@ +{# +/** + * @file + * Theme override of a datetime form element. + * + * Available variables: + * - attributes: HTML attributes for the datetime form element. + * - content: The datelist form element to be output. + * + * @see template_preprocess_datetime_form() + */ +#} + + {{ content }} + diff --git a/templates/datetime-wrapper.html.twig b/templates/datetime-wrapper.html.twig new file mode 100644 index 0000000..e923007 --- /dev/null +++ b/templates/datetime-wrapper.html.twig @@ -0,0 +1,33 @@ +{# +/** + * @file + * Theme override of a datetime form wrapper. + * + * @todo Refactor when https://www.drupal.org/node/3010558 is fixed. + * + * @see template_preprocess_form_element() + */ +#} +{% + set title_classes = [ + 'form-item__label', + required ? 'js-form-required', + required ? 'form-required', + ] +%} +
    + {% if title %} + {{ title }} + {% endif %} + {{ content }} + {% if errors %} +
    + {{ errors }} +
    + {% endif %} + {% if description %} + + {{ description }} +
    + {% endif %} + diff --git a/templates/field/field--comment-body.html.twig b/templates/field/field--comment-body.html.twig new file mode 100644 index 0000000..8d35354 --- /dev/null +++ b/templates/field/field--comment-body.html.twig @@ -0,0 +1,70 @@ +{# +/** + * @file + * Olivera's theme override for comment body field. + * + * 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', + ] +%} +{% + set item_classes = [ + 'field__item', + 'comment__text-content', + ] +%} + +{% 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/field/field--comment.html.twig b/templates/field/field--comment.html.twig new file mode 100644 index 0000000..94e2fd1 --- /dev/null +++ b/templates/field/field--comment.html.twig @@ -0,0 +1,62 @@ +{# +/** + * @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_count: Count of comments rendered through comment.html.twig. + * - content_attributes: HTML attributes for the form title. + * - 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() + */ +#} + +{{ attach_library('olivera/comments') }} + + + {% if not label_hidden %} + {{ title_prefix }} + + {{- label -}} + {%- if comments -%} + {{ comment_count }} + {%- endif -%} + + {{ title_suffix }} + {% endif %} + + {% if comment_form %} +
    + {% if user_picture %} +
    +
    + {{ user_picture }} +
    +
    + {% endif %} +
    + {{ comment_form }} +
    +
    + {% endif %} + + {{ comments }} + + diff --git a/templates/field/field--node--field-image.html.twig b/templates/field/field--node--field-image.html.twig new file mode 100644 index 0000000..77ce43a --- /dev/null +++ b/templates/field/field--node--field-image.html.twig @@ -0,0 +1,26 @@ +{# +/** + * @file + * Theme override for the image field. + * + * 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() + */ +#} + +{% extends 'field.html.twig' %} +{% set attributes = attributes.addClass('primary-image') %} diff --git a/templates/field/field--node--field-tags.html.twig b/templates/field/field--node--field-tags.html.twig new file mode 100644 index 0000000..9f3d3d1 --- /dev/null +++ b/templates/field/field--node--field-tags.html.twig @@ -0,0 +1,50 @@ +{# +/** + * @file + * Olivera theme override for tags field. + * + * 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 label. + * - label: The label for the field. + * - content_attributes: HTML attributes for the content. + * - 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, + 'field--tags', + ] +%} +{% + set title_classes = [ + 'field__label', + 'field--tags__label', + label_display == 'visually_hidden' ? 'visually-hidden', + ] +%} + +{{ attach_library('olivera/tags') }} + + {% if not label_hidden %} + {{ label }} + {% endif %} +
      + {% for item in items %} + {{ item.content }} + {% endfor %} +
    + diff --git a/templates/field/field--text-long.html.twig b/templates/field/field--text-long.html.twig new file mode 100644 index 0000000..07ce721 --- /dev/null +++ b/templates/field/field--text-long.html.twig @@ -0,0 +1 @@ +{% extends "field--text.html.twig" %} diff --git a/templates/field/field--text-with-summary.html.twig b/templates/field/field--text-with-summary.html.twig new file mode 100644 index 0000000..07ce721 --- /dev/null +++ b/templates/field/field--text-with-summary.html.twig @@ -0,0 +1 @@ +{% extends "field--text.html.twig" %} diff --git a/templates/field/field--text.html.twig b/templates/field/field--text.html.twig new file mode 100644 index 0000000..984adcd --- /dev/null +++ b/templates/field/field--text.html.twig @@ -0,0 +1,20 @@ +{% extends "field.html.twig" %} +{# +/** + * @file + * Theme override 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 + * + * @ingroup themeable + */ +#} +{% set attributes = attributes.addClass('clearfix') %} diff --git a/templates/field/field.html.twig b/templates/field/field.html.twig new file mode 100644 index 0000000..1cfbd65 --- /dev/null +++ b/templates/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/filter/filter-guidelines.html.twig b/templates/filter/filter-guidelines.html.twig new file mode 100644 index 0000000..213b79e --- /dev/null +++ b/templates/filter/filter-guidelines.html.twig @@ -0,0 +1,30 @@ +{# +/** + * @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__item--' ~ format.id|clean_class, + ] +%} + + +

    {{ format.label }}

    + {{ tips }} + diff --git a/templates/filter/filter-tips.html.twig b/templates/filter/filter-tips.html.twig new file mode 100644 index 0000000..665b567 --- /dev/null +++ b/templates/filter/filter-tips.html.twig @@ -0,0 +1,66 @@ +{# +/** + * @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() + * @see claro_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 = [ + 'compose-tips__item', + 'compose-tips__item--name-' ~ name|clean_class, + ] + %} + + {% endif %} + {% if multiple or long %} +

    {{ tip.name }}

    + {% endif %} + + {% if tip.list|length %} +
      + {% for item in tip.list %} + {% + set item_classes = [ + 'filter-tips__item', + long ? 'filter-tips__item--long' : 'filter-tips__item--short', + long ? 'filter-tips__item--id-' ~ item.id|clean_class, + ] + %} + {{ item.tip }} + {% endfor %} +
    + {% endif %} + + {% if multiple %} +
    + {% endif %} + {% endfor %} + + {% if multiple %} + + {% endif %} +{% endif %} diff --git a/templates/form--search-block-form.html.twig b/templates/form--search-block-form.html.twig new file mode 100644 index 0000000..53ce497 --- /dev/null +++ b/templates/form--search-block-form.html.twig @@ -0,0 +1,21 @@ +{# +/** + * @file + * Theme override for a 'form' element. + * + * Available variables: + * - attributes: A list of HTML attributes for the wrapper element. + * - children: The child elements of the form. + * + * @see template_preprocess_form() + */ +#} +{% + set classes = [ + 'search-form', + 'search-block-form', + ] +%} + + {{ children }} + diff --git a/templates/form/details.html.twig b/templates/form/details.html.twig new file mode 100644 index 0000000..ad938c6 --- /dev/null +++ b/templates/form/details.html.twig @@ -0,0 +1,62 @@ +{# +/** + * @file + * Theme override for a details element. + * + * Available variables + * - attributes: A list of HTML attributes for the details element. + * - errors: (optional) Any errors for this details element, may not be set. + * - title: (optional) The title of the element, may not be set. + * - summary_attributes: A list of HTML attributes for the summary element. + * - description: (optional) The description of the element, may not be set. + * - children: (optional) The children of the element, may not be set. + * - value: (optional) The value of the element, may not be set. + * + * @see template_preprocess_details() + * @see olivera_preprocess_details() + */ +#} +{% + set classes = [ + 'olivera-details', + ] +%} +{% + set content_wrapper_classes = [ + 'olivera-details__wrapper', + 'details-wrapper', + ] +%} + + {%- if title -%} + {% + set summary_classes = [ + 'olivera-details__summary', + required ? 'js-form-required', + required ? 'form-required', + ] + %} + + {{- title -}} + {%- if required -%} + + {%- endif -%} + + {%- endif -%} + + {% if errors %} +
    + {{ errors }} +
    + {% endif %} + {%- if description -%} +
    {{ description }}
    + {%- endif -%} + {%- if children -%} + {{ children }} + {%- endif -%} + {%- if value -%} + {{ value }} + {%- endif -%} + + diff --git a/templates/form/field-multiple-value-form.html.twig b/templates/form/field-multiple-value-form.html.twig new file mode 100644 index 0000000..6e6b5f1 --- /dev/null +++ b/templates/form/field-multiple-value-form.html.twig @@ -0,0 +1,50 @@ +{# +/** + * @file + * Theme override for an individual form element. + * + * Available variables for all fields: + * - multiple: Whether there are multiple instances of the field. + * + * Available variables for single cardinality fields: + * - elements: Form elements to be rendered. + * + * Available variables when there are multiple fields. + * - table: Table of field items. + * - description: The description element containing the following properties: + * - content: The description content of the form element. + * - attributes: HTML attributes to apply to the description container. + * - button: "Add another item" button. + * + * @see template_preprocess_field_multiple_value_form() + * + * @ingroup themeable + */ +#} +{% if multiple %} + {% + set classes = [ + 'js-form-item', + 'form-item' + ] + %} + {% + set description_classes = [ + 'form-item__description', + disabled ? 'is-disabled', + ] + %} + + {{ table }} + {% if description.content %} + {{ description.content }} + {% endif %} + {% if button %} +
    {{ button }}
    + {% endif %} + +{% else %} + {% for element in elements %} + {{ element }} + {% endfor %} +{% endif %} diff --git a/templates/form/fieldset.html.twig b/templates/form/fieldset.html.twig new file mode 100644 index 0000000..0744507 --- /dev/null +++ b/templates/form/fieldset.html.twig @@ -0,0 +1,106 @@ +{# +/** + * @file + * Theme override for a fieldset element and its children. + * + * Available variables: + * - attributes: HTML attributes for the
    element. + * - errors: (optional) Any errors for this
    element, may not be set. + * - required: Boolean indicating whether the
    element is required. + * - legend: The element containing the following properties: + * - title: Title of the
    , intended for use as the text + of the . + * - attributes: HTML attributes to apply to the element. + * - description: The description element containing the following properties: + * - content: The description content of the
    . + * - attributes: HTML attributes to apply to the description container. + * - description_display: Description display setting. It can have these values: + * - before: The description is output before the element. + * - after: The description is output after the element (default). + * - invisible: The description is output after the element, hidden visually + * but available to screen readers. + * - children: The rendered child elements of the
    . + * - prefix: The content to add before the
    children. + * - suffix: The content to add after the
    children. + * - title_display: Title display setting. + * - inline_items: Boolean indicating whether the
    items are inline. + * + * @see template_preprocess_fieldset() + * @see olivera_preprocess_fieldset() + */ +#} +{% + set classes = [ + 'fieldset', + attributes.hasClass('fieldgroup') ? 'fieldset--group', + 'js-form-item', + 'form-item', + 'js-form-wrapper', + 'form-wrapper', + ] +%} +{% + set wrapper_classes = [ + 'fieldset__wrapper', + attributes.hasClass('fieldgroup') ? 'fieldset__wrapper--group', + ] +%} +{% + set legend_span_classes = [ + 'fieldset__label', + attributes.hasClass('fieldgroup') ? 'fieldset__label--group', + required ? 'js-form-required', + required ? 'form-required', + ] +%} +{% + set legend_classes = [ + 'fieldset__legend', + attributes.hasClass('fieldgroup') and not attributes.hasClass('form-composite') ? 'fieldset__legend--group', + attributes.hasClass('form-composite') ? 'fieldset__legend--composite', + title_display == 'invisible' ? 'fieldset__legend--invisible' : 'fieldset__legend--visible', + ] +%} +{% + set description_classes = [ + 'fieldset__description', + ] +%} + + + {# Always wrap fieldset legends in a for CSS positioning. #} + {% if legend.title %} + + {{ legend.title }} + + {% endif %} + + + {% if inline_items %} +
    + {% endif %} + + {% if description_display == 'before' and description.content %} + {{ description.content }}
    + {% endif %} + {% if prefix %} + {{ prefix }} + {% endif %} + {{ children }} + {% if suffix %} + {{ suffix }} + {% endif %} + {% if errors %} +
    + {{ errors }} +
    + {% endif %} + {% if description_display in ['after', 'invisible'] and description.content %} + {{ description.content }} + {% endif %} + + {% if inline_items %} + + {% endif %} + +
    diff --git a/templates/form/input--submit--header-search.html.twig b/templates/form/input--submit--header-search.html.twig new file mode 100644 index 0000000..4d14c0d --- /dev/null +++ b/templates/form/input--submit--header-search.html.twig @@ -0,0 +1,17 @@ +{# +/** + * @file + * Theme override for the search form submit button. + * + * Available variables: + * - attributes: A list of HTML attributes for the input element. + * - children: Optional additional rendered elements. + * + * @see template_preprocess_input() + */ +#} + + + + +{{ children }} diff --git a/templates/includes/get-started.html.twig b/templates/includes/get-started.html.twig new file mode 100644 index 0000000..9feb1f4 --- /dev/null +++ b/templates/includes/get-started.html.twig @@ -0,0 +1,45 @@ +{# +/** + * @file + * Olivera's theme Get Started section. + * + * This section is enabled when no front page content has been populated. + * + * TODO: + * - Move this markup into Drupal's core Frontpage Views. + * - Translate/localize this page for different languages. + */ +#} + +{% set drupal_community = 'https://www.drupal.org/community' %} +{% set drupal_values = 'https://www.drupal.org/about/values-and-principles' %} +{% set drupal_user_guide = 'https://www.drupal.org/docs/user_guide/en/index.html' %} +{% set create_content = path('node.add_page') %} +{% set drupal_extend = 'https://www.drupal.org/docs/extending-drupal' %} +{% set drupal_global_training_days = 'https://groups.drupal.org/global-training-days' %} +{% set drupal_events = 'https://www.drupal.org/community/events' %} +{% set drupal_slack = 'https://www.drupal.org/slack' %} +{% set drupal_chat = 'https://www.drupal.org/drupalchat' %} +{% set drupal_answers = 'https://drupal.stackexchange.com/' %} + +
    +

    {% trans %}You haven’t created any frontpage content yet.{% endtrans %}

    +

    {% trans %}Congratulations and welcome to the Drupal community.{% endtrans %}

    +

    {% trans %}Drupal is an open source platform for building amazing digital experiences. It’s made, used, taught, documented, and marketed by the Drupal community. Our community is made up of people from around the world with a shared set of values, collaborating together in a respectful manner. As we like to say:{% endtrans %}

    +
    {% trans %}Come for the code, stay for the community.{% endtrans %}
    +

    {% trans %}Get Started{% endtrans %}

    +

    {% trans %}There are a few ways to get started with Drupal:{% endtrans %}

    +
      +
    1. {% trans %}User Guide: Includes installing, administering, site building, and maintaining the content of a Drupal website.{% endtrans %}
      2. +
    2. {% trans %}Create Content: Want to get right to work? Start adding content. Note: the information on this page will go away once you add content to your site. Read on and bookmark resources of interest.{% endtrans %}
      3. +
    3. {% trans %}Extend Drupal: Drupal’s core software can be extended and customized in remarkable ways. Install additional functionality and change the look of your site using addons contributed by our community.{% endtrans %}
      4. +
    +

    {% trans %}Next Steps{% endtrans %}

    +

    {% trans %}Bookmark these links to our active Drupal community groups and support resources.{% endtrans %}

    +
      +
    • {% trans %}Global Training Days: Helpful information for evaluating Drupal as a framework and as a career path. Taught in your local language.{% endtrans %}
      • +
    • {% trans %}Upcoming Events: Learn and connect with others at conferences and events held around the world.{% endtrans %}
      • +
    • {% trans %}Community Page: List of key Drupal community groups with their own content.{% endtrans %}
      • +
    • {% trans %}Get support and chat with the Drupal community on Slack or DrupalChat. When you’re looking for a solution to a problem, go to Drupal Answers on Stack Exchange.{% endtrans %}
      • +
    +
    diff --git a/templates/includes/preload.twig b/templates/includes/preload.twig new file mode 100644 index 0000000..4a164a0 --- /dev/null +++ b/templates/includes/preload.twig @@ -0,0 +1,14 @@ +{# +/** + * @file + * Preload the non-bold & non-italic fonts for the headings and the body copy. + * + * Available variables: + * - olivera_path: Returns the path to the Olivera theme. + */ +#} + + + + + diff --git a/templates/layout/book-export-html.html.twig b/templates/layout/book-export-html.html.twig new file mode 100644 index 0000000..b7525f7 --- /dev/null +++ b/templates/layout/book-export-html.html.twig @@ -0,0 +1,45 @@ +{# +/** + * @file + * Theme override for printed version of book outline. + * + * Available variables: + * - title: Top level node title. + * - head: Header tags. + * - language: Language object. + * - language_rtl: A flag indicating whether the current display language is a + * right to left language. + * - base_url: URL to the home page. + * - contents: Nodes within the current outline rendered through + * book-node-export-html.html.twig. + * + * @see template_preprocess_book_export_html() + */ +#} + + + + {{ title }} + {{ page.head }} + + + + + {# + The given node is embedded to its absolute depth in a top level section. + For example, a child node with depth 2 in the hierarchy is contained in + (otherwise empty) div elements corresponding to depth 0 and depth 1. This + is intended to support WYSIWYG output - e.g., level 3 sections always look + like level 3 sections, no matter their depth relative to the node selected + to be exported as printer-friendly HTML. + #} + + {% if depth > 1 %}{% for i in 1..depth-1 %} +
    + {% endfor %}{% endif %} + {{ contents }} + {% if depth > 1 %}{% for i in 1..depth-1 %} +
    + {% endfor %}{% endif %} + + diff --git a/templates/layout/html.html.twig b/templates/layout/html.html.twig new file mode 100644 index 0000000..5f08fb6 --- /dev/null +++ b/templates/layout/html.html.twig @@ -0,0 +1,59 @@ +{# +/** + * @file + * Theme override for the basic structure of a single Drupal page. + * + * Variables: + * - logged_in: A flag indicating if user is logged in. + * - root_path: The root path of the current page (e.g., node, admin, user). + * - node_type: The content type for the current node, if the page is a node. + * - head_title: List of text elements that make up the head_title variable. + * May contain one or more of the following: + * - title: The title of the page. + * - name: The name of the site. + * - slogan: The slogan of the site. + * - page_top: Initial rendered markup. This should be printed before 'page'. + * - page: The rendered page markup. + * - page_bottom: Closing rendered markup. This variable should be printed after + * 'page'. + * - db_offline: A flag indicating if the database is offline. + * - placeholder_token: The token for generating head, css, js and js-bottom + * placeholders. + * - olivera_path: Returns the path to an Olivera theme. + * - noscript_styles: