From b572c8e9d0bd2023fd55581d4998feb97d3f8d22 Mon Sep 17 00:00:00 2001 From: James Date: Wed, 1 Mar 2023 11:13:01 -0800 Subject: [PATCH] Add additional core libraries and component css --- css/components/action-links.css | 43 +++++++++++ css/components/breadcrumb.css | 29 +++++++ css/components/button.css | 15 ++++ css/components/collapse-processed.css | 32 ++++++++ css/components/container-inline.css | 22 ++++++ css/components/details.css | 23 ++++++ css/components/exposed-filters.css | 46 ++++++++++++ css/components/field.css | 25 +++++++ css/components/form.css | 104 ++++++++++++++++++++++++++ css/components/icons.css | 21 ++++++ css/components/inline-form.css | 33 ++++++++ css/components/item-list.css | 32 ++++++++ css/components/link.css | 16 ++++ css/components/links.css | 23 ++++++ css/components/menu.css | 34 +++++++++ css/components/more-link.css | 12 +++ css/components/pager.css | 16 ++++ css/components/tabledrag.css | 14 ++++ css/components/tableselect.css | 19 +++++ css/components/tablesort.css | 11 +++ css/components/tabs.css | 33 ++++++++ css/components/textarea.css | 11 +++ css/components/ui-dialog.css | 15 ++++ js/media_embed_ckeditor.theme.es6.js | 22 ++++++ js/media_embed_ckeditor.theme.js | 12 +++ kraken.libraries.yml | 30 ++++++++ 26 files changed, 693 insertions(+) create mode 100644 css/components/action-links.css create mode 100644 css/components/breadcrumb.css create mode 100644 css/components/button.css create mode 100644 css/components/collapse-processed.css create mode 100644 css/components/container-inline.css create mode 100644 css/components/details.css create mode 100644 css/components/exposed-filters.css create mode 100644 css/components/field.css create mode 100644 css/components/form.css create mode 100644 css/components/icons.css create mode 100644 css/components/inline-form.css create mode 100644 css/components/item-list.css create mode 100644 css/components/link.css create mode 100644 css/components/links.css create mode 100644 css/components/menu.css create mode 100644 css/components/more-link.css create mode 100644 css/components/pager.css create mode 100644 css/components/tabledrag.css create mode 100644 css/components/tableselect.css create mode 100644 css/components/tablesort.css create mode 100644 css/components/tabs.css create mode 100644 css/components/textarea.css create mode 100644 css/components/ui-dialog.css create mode 100644 js/media_embed_ckeditor.theme.es6.js create mode 100644 js/media_embed_ckeditor.theme.js diff --git a/css/components/action-links.css b/css/components/action-links.css new file mode 100644 index 0000000..274d798 --- /dev/null +++ b/css/components/action-links.css @@ -0,0 +1,43 @@ +/** + * @file + * Styles for link buttons and action links. + */ + +.action-links { + margin: 1em 0; + padding: 0; + list-style: none; +} +[dir="rtl"] .action-links { + /* This is required to win over specificity of [dir="rtl"] ul */ + margin-right: 0; +} +.action-links li { + display: inline-block; + margin: 0 0.3em; +} +.action-links li:first-child { + margin-left: 0; /* LTR */ +} +[dir="rtl"] .action-links li:first-child { + margin-right: 0; + margin-left: 0.3em; +} +.button-action { + display: inline-block; + padding: 0.2em 0.5em 0.3em; + text-decoration: none; + line-height: 160%; +} +.button-action:before { + margin-left: -0.1em; /* LTR */ + padding-right: 0.2em; /* LTR */ + content: "+"; + font-weight: 900; +} +[dir="rtl"] .button-action:before { + margin-right: -0.1em; + margin-left: 0; + padding-right: 0; + padding-left: 0.2em; +} diff --git a/css/components/breadcrumb.css b/css/components/breadcrumb.css new file mode 100644 index 0000000..1e6a7fa --- /dev/null +++ b/css/components/breadcrumb.css @@ -0,0 +1,29 @@ +/** + * @file + * Styles for breadcrumbs. + */ + +.breadcrumb { + padding-bottom: 0.5em; +} +.breadcrumb ol { + margin: 0; + padding: 0; +} +[dir="rtl"] .breadcrumb ol { + /* This is required to win over specificity of [dir="rtl"] ol */ + margin-right: 0; +} +.breadcrumb li { + display: inline; + margin: 0; + padding: 0; + list-style-type: none; +} +/* IE8 does not support :not() and :last-child. */ +.breadcrumb li:before { + content: " \BB "; +} +.breadcrumb li:first-child:before { + content: none; +} diff --git a/css/components/button.css b/css/components/button.css new file mode 100644 index 0000000..5eb4f1a --- /dev/null +++ b/css/components/button.css @@ -0,0 +1,15 @@ +/** + * @file + * Visual styles for buttons. + */ + +.button, +.image-button { + margin-right: 1em; + margin-left: 1em; +} +.button:first-child, +.image-button:first-child { + margin-right: 0; + margin-left: 0; +} diff --git a/css/components/collapse-processed.css b/css/components/collapse-processed.css new file mode 100644 index 0000000..12737ef --- /dev/null +++ b/css/components/collapse-processed.css @@ -0,0 +1,32 @@ +/** + * @file + * Visual styles for collapsible fieldsets. + */ + +.collapse-processed > summary { + padding-right: 0.5em; + padding-left: 0.5em; +} +.collapse-processed > summary:before { + float: left; /* LTR */ + width: 1em; + height: 1em; + content: ""; + background: url(../../images/icons/menu-expanded.png) 0 100% no-repeat; /* LTR */ +} +[dir="rtl"] .collapse-processed > summary:before { + float: right; + background-position: 100% 100%; +} +.collapse-processed:not([open]) > summary:before { + -ms-transform: rotate(-90deg); + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + background-position: 25% 35%; /* LTR */ +} +[dir="rtl"] .collapse-processed:not([open]) > summary:before { + -ms-transform: rotate(90deg); + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + background-position: 75% 35%; +} diff --git a/css/components/container-inline.css b/css/components/container-inline.css new file mode 100644 index 0000000..64b78f6 --- /dev/null +++ b/css/components/container-inline.css @@ -0,0 +1,22 @@ +/** + * @file + * Inline items. + */ + +.container-inline label:after, +.container-inline .label:after { + content: ":"; +} +.form-type-radios .container-inline label:after, +.form-type-checkboxes .container-inline label:after { + content: ""; +} +.form-type-radios .container-inline .form-type-radio, +.form-type-checkboxes .container-inline .form-type-checkbox { + margin: 0 1em; +} +.container-inline .form-actions, +.container-inline.form-actions { + margin-top: 0; + margin-bottom: 0; +} diff --git a/css/components/details.css b/css/components/details.css new file mode 100644 index 0000000..a546363 --- /dev/null +++ b/css/components/details.css @@ -0,0 +1,23 @@ +/** + * @file + * Collapsible details. + * + * @see collapse.js + * @see http://nicolasgallagher.com/css-background-image-hacks/ + */ + +details { + margin-top: 1em; + margin-bottom: 1em; + border: 1px solid #ccc; +} +details > .details-wrapper { + padding: 0.5em 1.5em; +} +/* @todo Regression: The summary of uncollapsible details are no longer + vertically aligned with the .details-wrapper in browsers without native + details support. */ +summary { + padding: 0.2em 0.5em; + cursor: pointer; +} diff --git a/css/components/exposed-filters.css b/css/components/exposed-filters.css new file mode 100644 index 0000000..b686902 --- /dev/null +++ b/css/components/exposed-filters.css @@ -0,0 +1,46 @@ +/** + * @file + * Visual styles for exposed filters. + */ + +.exposed-filters .filters { + float: left; /* LTR */ + margin-right: 1em; /* LTR */ +} +[dir="rtl"] .exposed-filters .filters { + float: right; + margin-right: 0; + margin-left: 1em; +} +.exposed-filters .form-item { + margin: 0 0 0.1em 0; + padding: 0; +} +.exposed-filters .form-item label { + float: left; /* LTR */ + width: 10em; + font-weight: normal; +} +[dir="rtl"] .exposed-filters .form-item label { + float: right; +} +.exposed-filters .form-select { + width: 14em; +} +/* Current filters */ +.exposed-filters .current-filters { + margin-bottom: 1em; +} +.exposed-filters .current-filters .placeholder { + font-weight: bold; + font-style: normal; +} +.exposed-filters .additional-filters { + float: left; /* LTR */ + margin-right: 1em; /* LTR */ +} +[dir="rtl"] .exposed-filters .additional-filters { + float: right; + margin-right: 0; + margin-left: 1em; +} diff --git a/css/components/field.css b/css/components/field.css new file mode 100644 index 0000000..ff7e9ab --- /dev/null +++ b/css/components/field.css @@ -0,0 +1,25 @@ +/** + * @file + * Visual styles for fields. + */ + +.field__label { + font-weight: bold; +} +.field--label-inline .field__label, +.field--label-inline .field__items { + float: left; /* LTR */ +} +.field--label-inline .field__label, +.field--label-inline > .field__item, +.field--label-inline .field__items { + padding-right: 0.5em; +} +[dir="rtl"] .field--label-inline .field__label, +[dir="rtl"] .field--label-inline .field__items { + padding-right: 0; + padding-left: 0.5em; +} +.field--label-inline .field__label::after { + content: ":"; +} diff --git a/css/components/form.css b/css/components/form.css new file mode 100644 index 0000000..b840022 --- /dev/null +++ b/css/components/form.css @@ -0,0 +1,104 @@ +/** + * @file + * Visual styles for form components. + */ + +form .field-multiple-table { + margin: 0; +} +form .field-multiple-table .field-multiple-drag { + width: 30px; + padding-right: 0; /* LTR */ +} +[dir="rtl"] form .field-multiple-table .field-multiple-drag { + padding-left: 0; +} +form .field-multiple-table .field-multiple-drag .tabledrag-handle { + padding-right: 0.5em; /* LTR */ +} +[dir="rtl"] form .field-multiple-table .field-multiple-drag .tabledrag-handle { + padding-right: 0; + padding-left: 0.5em; +} +form .field-add-more-submit { + margin: 0.5em 0 0; +} + +/** + * Markup generated by Form API. + */ +.form-item, +.form-actions { + margin-top: 1em; + margin-bottom: 1em; +} +tr.odd .form-item, +tr.even .form-item { + margin-top: 0; + margin-bottom: 0; +} +.form-composite > .fieldset-wrapper > .description, +.form-item .description { + font-size: 0.85em; +} +label.option { + display: inline; + font-weight: normal; +} +.form-composite > legend, +.label { + display: inline; + margin: 0; + padding: 0; + font-size: inherit; + font-weight: bold; +} +.form-checkboxes .form-item, +.form-radios .form-item { + margin-top: 0.4em; + margin-bottom: 0.4em; +} +.form-type-radio .description, +.form-type-checkbox .description { + margin-left: 2.4em; /* LTR */ +} +[dir="rtl"] .form-type-radio .description, +[dir="rtl"] .form-type-checkbox .description { + margin-right: 2.4em; + margin-left: 0; +} +.marker { + color: #e00; +} +.form-required:after { + display: inline-block; + width: 6px; + height: 6px; + margin: 0 0.3em; + content: ""; + vertical-align: super; + /* Use a background image to prevent screen readers from announcing the text. */ + background-image: url(../../images/icons/required.svg); + background-repeat: no-repeat; + background-size: 6px 6px; +} +abbr.tabledrag-changed, +abbr.ajax-changed { + border-bottom: none; +} +.form-item input.error, +.form-item textarea.error, +.form-item select.error { + border: 2px solid red; +} + +/* Inline error messages. */ +.form-item--error-message:before { + display: inline-block; + width: 14px; + height: 14px; + content: ""; + vertical-align: sub; + background: url(../../images/icons/error.svg) no-repeat; + background-size: contain; +} diff --git a/css/components/icons.css b/css/components/icons.css new file mode 100644 index 0000000..2733758 --- /dev/null +++ b/css/components/icons.css @@ -0,0 +1,21 @@ +/** + * @file + * Visual styles for icons. + */ + +.icon-help { + padding: 1px 0 1px 20px; /* LTR */ + background: url(../../images/icons/help.png) 0 50% no-repeat; /* LTR */ +} +[dir="rtl"] .icon-help { + padding: 1px 20px 1px 0; + background-position: 100% 50%; +} +.feed-icon { + display: block; + overflow: hidden; + width: 16px; + height: 16px; + text-indent: -9999px; + background: url(../../images/icons/feed.svg) no-repeat; +} diff --git a/css/components/inline-form.css b/css/components/inline-form.css new file mode 100644 index 0000000..b5201a7 --- /dev/null +++ b/css/components/inline-form.css @@ -0,0 +1,33 @@ +/** + * @file + * Visual styles for inline forms. + */ + +.form--inline .form-item { + float: left; /* LTR */ + margin-right: 0.5em; /* LTR */ +} +[dir="rtl"] .form--inline .form-item { + float: right; + margin-right: 0; + margin-left: 0.5em; +} +/* This is required to win over specificity of [dir="rtl"] .form--inline .form-item */ +[dir="rtl"] .views-filterable-options-controls .form-item { + margin-right: 2%; +} +.form--inline .form-item-separator { + margin-top: 2.3em; + margin-right: 1em; /* LTR */ + margin-left: 0.5em; /* LTR */ +} +[dir="rtl"] .form--inline .form-item-separator { + margin-right: 0.5em; + margin-left: 1em; +} +.form--inline .form-actions { + clear: left; /* LTR */ +} +[dir="rtl"] .form--inline .form-actions { + clear: right; +} diff --git a/css/components/item-list.css b/css/components/item-list.css new file mode 100644 index 0000000..a8ce5d2 --- /dev/null +++ b/css/components/item-list.css @@ -0,0 +1,32 @@ +/** + * @file + * Visual styles for item list. + */ + +.item-list .title { + font-weight: bold; +} +.item-list ul { + margin: 0 0 0.75em 0; + padding: 0; +} +.item-list li { + margin: 0 0 0.25em 1.5em; /* LTR */ + padding: 0; +} +[dir="rtl"] .item-list li { + margin: 0 1.5em 0.25em 0; +} + +/** + * Comma separated lists. + */ +.item-list--comma-list { + display: inline; +} +.item-list--comma-list .item-list__comma-list, +.item-list__comma-list li, +[dir="rtl"] .item-list--comma-list .item-list__comma-list, +[dir="rtl"] .item-list__comma-list li { + margin: 0; +} diff --git a/css/components/link.css b/css/components/link.css new file mode 100644 index 0000000..fa83f2b --- /dev/null +++ b/css/components/link.css @@ -0,0 +1,16 @@ +/** + * @file + * Style another element as a link. + */ + +button.link { + margin: 0; + padding: 0; + cursor: pointer; + border: 0; + background: transparent; + font-size: 1em; +} +label button.link { + font-weight: bold; +} diff --git a/css/components/links.css b/css/components/links.css new file mode 100644 index 0000000..e483253 --- /dev/null +++ b/css/components/links.css @@ -0,0 +1,23 @@ +/** + * @file + * Visual styles for links. + */ + +ul.inline, +ul.links.inline { + display: inline; + padding-left: 0; /* LTR */ +} +[dir="rtl"] ul.inline, +[dir="rtl"] ul.links.inline { + padding-right: 0; + padding-left: 15px; +} +ul.inline li { + display: inline; + padding: 0 0.5em; + list-style-type: none; +} +ul.links a.is-active { + color: #000; +} diff --git a/css/components/menu.css b/css/components/menu.css new file mode 100644 index 0000000..df73324 --- /dev/null +++ b/css/components/menu.css @@ -0,0 +1,34 @@ +/** + * @file + * Visual styles for menu. + */ + +ul.menu { + margin-left: 1em; /* LTR */ + padding: 0; + list-style: none outside; + text-align: left; /* LTR */ +} +[dir="rtl"] ul.menu { + margin-right: 1em; + margin-left: 0; + text-align: right; +} +.menu-item--expanded { + list-style-type: circle; + list-style-image: url(../../images/icons/menu-expanded.png); +} +.menu-item--collapsed { + list-style-type: disc; + list-style-image: url(../../images/icons/menu-collapsed.png); /* LTR */ +} +[dir="rtl"] .menu-item--collapsed { + list-style-image: url(../../images/icons/menu-collapsed-rtl.png); +} +.menu-item { + margin: 0; + padding-top: 0.2em; +} +ul.menu a.is-active { + color: #000; +} diff --git a/css/components/more-link.css b/css/components/more-link.css new file mode 100644 index 0000000..c604061 --- /dev/null +++ b/css/components/more-link.css @@ -0,0 +1,12 @@ +/** + * @file + * Markup generated by #type 'more_link'. + */ + +.more-link { + display: block; + text-align: right; /* LTR */ +} +[dir="rtl"] .more-link { + text-align: left; +} diff --git a/css/components/pager.css b/css/components/pager.css new file mode 100644 index 0000000..a9471fc --- /dev/null +++ b/css/components/pager.css @@ -0,0 +1,16 @@ +/** + * @file + * Visual styles for pager. + */ + +.pager__items { + clear: both; + text-align: center; +} +.pager__item { + display: inline; + padding: 0.5em; +} +.pager__item.is-active { + font-weight: bold; +} diff --git a/css/components/tabledrag.css b/css/components/tabledrag.css new file mode 100644 index 0000000..a197b24 --- /dev/null +++ b/css/components/tabledrag.css @@ -0,0 +1,14 @@ +/** + * @file + * Visual styles for table drag. + */ + +tr.drag { + background-color: #fffff0; +} +tr.drag-previous { + background-color: #ffd; +} +body div.tabledrag-changed-warning { + margin-bottom: 0.5em; +} diff --git a/css/components/tableselect.css b/css/components/tableselect.css new file mode 100644 index 0000000..fcfb2a5 --- /dev/null +++ b/css/components/tableselect.css @@ -0,0 +1,19 @@ +/** + * @file + * Table select behavior. + * + * @see tableselect.js + */ + +tr.selected td { + background: #ffc; +} +td.checkbox, +th.checkbox { + text-align: center; +} +[dir="rtl"] td.checkbox, +[dir="rtl"] th.checkbox { + /* This is required to win over specificity of [dir="rtl"] td */ + text-align: center; +} diff --git a/css/components/tablesort.css b/css/components/tablesort.css new file mode 100644 index 0000000..44e5349 --- /dev/null +++ b/css/components/tablesort.css @@ -0,0 +1,11 @@ +/** + * @file + * Table sort indicator. + */ + +th.is-active img { + display: inline; +} +td.is-active { + background-color: #ddd; +} diff --git a/css/components/tabs.css b/css/components/tabs.css new file mode 100644 index 0000000..16fb122 --- /dev/null +++ b/css/components/tabs.css @@ -0,0 +1,33 @@ +/** + * @file + * Visual styles for tabs. + */ + +div.tabs { + margin: 1em 0; +} +ul.tabs { + margin: 0 0 0.5em; + padding: 0; + list-style: none; +} +.tabs > li { + display: inline-block; + margin-right: 0.3em; /* LTR */ +} +[dir="rtl"] .tabs > li { + margin-right: 0; + margin-left: 0.3em; +} +.tabs a { + display: block; + padding: 0.2em 1em; + text-decoration: none; +} +.tabs a.is-active { + background-color: #eee; +} +.tabs a:focus, +.tabs a:hover { + background-color: #f5f5f5; +} diff --git a/css/components/textarea.css b/css/components/textarea.css new file mode 100644 index 0000000..2661bae --- /dev/null +++ b/css/components/textarea.css @@ -0,0 +1,11 @@ +/** + * @file + * Visual styles for a resizable textarea. + */ + +.form-textarea-wrapper textarea { + display: block; + box-sizing: border-box; + width: 100%; + margin: 0; +} diff --git a/css/components/ui-dialog.css b/css/components/ui-dialog.css new file mode 100644 index 0000000..164ca86 --- /dev/null +++ b/css/components/ui-dialog.css @@ -0,0 +1,15 @@ +/** + * @file + * Styles for modal windows. + */ + +.ui-dialog--narrow { + max-width: 500px; +} + +@media screen and (max-width: 600px) { + .ui-dialog--narrow { + min-width: 95%; + max-width: 95%; + } +} diff --git a/js/media_embed_ckeditor.theme.es6.js b/js/media_embed_ckeditor.theme.es6.js new file mode 100644 index 0000000..0e03cf2 --- /dev/null +++ b/js/media_embed_ckeditor.theme.es6.js @@ -0,0 +1,22 @@ +/** + * @file + * Kraken theme overrides for the Media Embed CKEditor plugin. + */ + +((Drupal) => { + /** + * Themes the error displayed when the media embed preview fails. + * + * @param {string} error + * The error message to display + * + * @return {string} + * A string representing a DOM fragment. + * + * @see media-embed-error.html.twig + */ + Drupal.theme.mediaEmbedPreviewError = () => + `
${Drupal.t( + 'An error occurred while trying to preview the media. Please save your work and reload this page.', + )}
`; +})(Drupal); diff --git a/js/media_embed_ckeditor.theme.js b/js/media_embed_ckeditor.theme.js new file mode 100644 index 0000000..0b9d959 --- /dev/null +++ b/js/media_embed_ckeditor.theme.js @@ -0,0 +1,12 @@ +/** +* DO NOT EDIT THIS FILE. +* See the following change record for more information, +* https://www.drupal.org/node/2815083 +* @preserve +**/ + +(function (Drupal) { + Drupal.theme.mediaEmbedPreviewError = function () { + return "
".concat(Drupal.t('An error occurred while trying to preview the media. Please save your work and reload this page.'), "
"); + }; +})(Drupal); \ No newline at end of file diff --git a/kraken.libraries.yml b/kraken.libraries.yml index fe5b7b9..7443160 100644 --- a/kraken.libraries.yml +++ b/kraken.libraries.yml @@ -18,6 +18,12 @@ global: - core/drupalSettings ## Extended Core Libraries +book-navigation: + version: VERSION + css: + component: + css/components/book-navigation.css: { } + dialog: version: VERSION css: @@ -39,6 +45,13 @@ file: css/components/file.css: weight: -10 +forum: + version: VERSION + css: + component: + css/components/forum.css: + weight: -10 + image-widget: version: VERSION css: @@ -51,6 +64,18 @@ indented: component: css/components/indented.css: { } +media_embed_error: + version: VERSION + css: + component: + css/components/media-embed-error.css: { } + +media_library: + version: VERSION + css: + layout: + css/layout/media-library.css: { } + messages: version: VERSION css: @@ -85,6 +110,11 @@ user: css/components/user.css: weight: -10 +media_embed_ckeditor_theme: + version: VERSION + js: + js/media_embed_ckeditor.theme.js: { } + ## Custom Dev CSS styles css-dev: css: