Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Issue #3269082 by longwave, Spokje, mherchel, andregp, kostyashupenko, bnjmnm, nod_: Remove HTML5 details collapse polyfill 

(cherry picked from commit 9ad9131346)
merge-requests/1766/head^2
Lauri Eskola 2022-09-13 10:05:10 +03:00
parent 1002797d91
commit e72233af05
No known key found for this signature in database
GPG Key ID: 382FC0F5B0DF53F8
17 changed files with 69 additions and 734 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
core/core.libraries.yml
View File

@ -469,10 +469,9 @@ drupal.collapse:
js:
misc/details-summarized-content.js: {}
misc/details-aria.js: {}
misc/collapse.js: {}
misc/details.js: {}
dependencies:
- core/jquery
- core/modernizr
- core/drupal
- core/drupal.form
- core/once

155
core/misc/collapse.js
View File

@ -1,155 +0,0 @@
/**
* @file
* Polyfill for HTML5 details elements.
*/
(function ($, Modernizr, Drupal) {
/**
* The collapsible details object represents a single details element.
*
* @constructor Drupal.CollapsibleDetails
*
* @param {HTMLElement} node
* The details element.
*/
function CollapsibleDetails(node) {
this.$node = $(node);
this.$node.data('details', this);
// Expand details if there are errors inside, or if it contains an
// element that is targeted by the URI fragment identifier.
const anchor =
window.location.hash && window.location.hash !== '#'
? `, ${window.location.hash}`
: '';
if (this.$node.find(`.error${anchor}`).length) {
this.$node.attr('open', true);
}
// Initialize and set up the summary polyfill.
this.setupSummaryPolyfill();
}
$.extend(
CollapsibleDetails,
/** @lends Drupal.CollapsibleDetails */ {
/**
* Holds references to instantiated CollapsibleDetails objects.
*
* @type {Array.<Drupal.CollapsibleDetails>}
*/
instances: [],
},
);
$.extend(
CollapsibleDetails.prototype,
/** @lends Drupal.CollapsibleDetails# */ {
/**
* Initialize and setup summary markup.
*/
setupSummaryPolyfill() {
// Turn the summary into a clickable link.
const $summary = this.$node.find('> summary');
// If this polyfill is in use, the browser does not recognize
// <summary> as a focusable element. The tabindex is set to -1 so the
// tabbable library does not incorrectly identify it as tabbable.
$summary.attr('tabindex', '-1');
$('<span class="details-summary-prefix visually-hidden"></span>')
.append(this.$node.attr('open') ? Drupal.t('Hide') : Drupal.t('Show'))
.prependTo($summary)
.after(document.createTextNode(' '));
// .wrapInner() does not retain bound events.
$('<a class="details-title"></a>')
.attr('href', `#${this.$node.attr('id')}`)
.prepend($summary.contents())
.appendTo($summary);
$summary
.append(this.$summary)
.on('click', $.proxy(this.onSummaryClick, this));
},
/**
* Handle summary clicks.
*
* @param {jQuery.Event} e
* The event triggered.
*/
onSummaryClick(e) {
this.toggle();
e.preventDefault();
},
/**
* Toggle the visibility of a details element using smooth animations.
*/
toggle() {
const isOpen = !!this.$node.attr('open');
const $summaryPrefix = this.$node.find(
'> summary span.details-summary-prefix',
);
if (isOpen) {
$summaryPrefix.html(Drupal.t('Show'));
} else {
$summaryPrefix.html(Drupal.t('Hide'));
}
// Delay setting the attribute to emulate chrome behavior and make
// details-aria.js work as expected with this polyfill.
setTimeout(() => {
this.$node.attr('open', !isOpen);
}, 0);
},
},
);
/**
* Polyfill HTML5 details element.
*
* @type {Drupal~behavior}
*
* @prop {Drupal~behaviorAttach} attach
* Attaches behavior for the details element.
*/
Drupal.behaviors.collapse = {
attach(context) {
if (Modernizr.details) {
return;
}
once('collapse', 'details', context).forEach((detail) => {
// This class is used for styling purpose only.
detail.classList.add('collapse-processed');
CollapsibleDetails.instances.push(new CollapsibleDetails(detail));
});
},
};
/**
* Open parent details elements of a targeted page fragment.
*
* Opens all (nested) details element on a hash change or fragment link click
* when the target is a child element, in order to make sure the targeted
* element is visible. Aria attributes on the summary
* are set by triggering the click event listener in details-aria.js.
*
* @param {jQuery.Event} e
* The event triggered.
* @param {jQuery} $target
* The targeted node as a jQuery object.
*/
const handleFragmentLinkClickOrHashChange = (e, $target) => {
$target.parents('details').not('[open]').find('> summary').trigger('click');
};
/**
* Binds a listener to handle fragment link clicks and URL hash changes.
*/
$('body').on(
'formFragmentLinkClickOrHashChange.details',
handleFragmentLinkClickOrHashChange,
);
// Expose constructor in the public space.
Drupal.CollapsibleDetails = CollapsibleDetails;
})(jQuery, Modernizr, Drupal);

31
core/misc/details.js Normal file
View File

@ -0,0 +1,31 @@
/**
* @file
* Additional functionality for HTML5 details elements.
*/
(function ($) {
/**
* Open parent details elements of a targeted page fragment.
*
* Opens all (nested) details element on a hash change or fragment link click
* when the target is a child element, in order to make sure the targeted
* element is visible. Aria attributes on the summary
* are set by triggering the click event listener in details-aria.js.
*
* @param {jQuery.Event} e
* The event triggered.
* @param {jQuery} $target
* The targeted node as a jQuery object.
*/
const handleFragmentLinkClickOrHashChange = (e, $target) => {
$target.parents('details').not('[open]').find('> summary').trigger('click');
};
/**
* Binds a listener to handle fragment link clicks and URL hash changes.
*/
$('body').on(
'formFragmentLinkClickOrHashChange.details',
handleFragmentLinkClickOrHashChange,
);
})(jQuery);

15
core/modules/system/tests/src/Functional/Form/ElementsVerticalTabsTest.php
View File

@ -49,21 +49,6 @@ class ElementsVerticalTabsTest extends BrowserTestBase {
$this->drupalLogin($this->adminUser);
}
/**
* Ensures that vertical-tabs.js is included before collapse.js.
*
* Otherwise, collapse.js adds "SHOW" or "HIDE" labels to the tabs.
*/
public function testJavaScriptOrdering() {
$this->drupalGet('form_test/vertical-tabs');
$content = $this->getSession()->getPage()->getContent();
$position1 = strpos($content, 'core/misc/vertical-tabs.js');
$position2 = strpos($content, 'core/misc/collapse.js');
$this->assertNotFalse($position1);
$this->assertNotFalse($position2);
$this->assertGreaterThan($position1, $position2, 'vertical-tabs.js is included before collapse.js');
}
/**
* Ensures that vertical tab markup is not shown if user has no tab access.
*/

1
core/modules/system/tests/themes/test_theme/test_theme.info.yml
View File

@ -26,7 +26,6 @@ libraries-override:
css:
component:
css/components/button.css: css/my-button.css
css/components/collapse-processed.css: css/my-collapse-processed.css
css/components/container-inline.css: /themes/my_theme/css/my-container-inline.css
css/components/details.css: /themes/my_theme/css/my-details.css
# Remove particular library assets.

32
core/profiles/demo_umami/themes/umami/css/classy/components/collapse-processed.css
View File

@ -1,32 +0,0 @@
/**
* @file
* Visual styles for collapsible fieldsets.
*/
.collapse-processed > summary {
padding-right: 0.5em;
padding-left: 0.5em;
}
.collapse-processed > summary:before {
float: left; /* LTR */
width: 1em;
height: 1em;
content: "";
background: url(../../../../../../../misc/menu-expanded.png) 0 100% no-repeat; /* LTR */
}
[dir="rtl"] .collapse-processed > summary:before {
float: right;
background-position: 100% 100%;
}
.collapse-processed:not([open]) > summary:before {
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
background-position: 25% 35%; /* LTR */
}
[dir="rtl"] .collapse-processed:not([open]) > summary:before {
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
background-position: 75% 35%;
}

1
core/profiles/demo_umami/themes/umami/umami.libraries.yml
View File

@ -152,7 +152,6 @@ classy.base:
css/classy/components/action-links.css: { weight: -10 }
css/classy/components/breadcrumb.css: { weight: -10 }
css/classy/components/button.css: { weight: -10 }
css/classy/components/collapse-processed.css: { weight: -10 }
css/classy/components/container-inline.css: { weight: -10 }
css/classy/components/details.css: { weight: -10 }
css/classy/components/exposed-filters.css: { weight: -10 }

3
core/tests/Drupal/KernelTests/Core/Asset/LibraryDiscoveryIntegrationTest.php
View File

@ -58,7 +58,6 @@ class LibraryDiscoveryIntegrationTest extends KernelTestBase {
// removed.
$this->activateTheme('starterkit_theme');
$this->assertAssetInLibrary('core/themes/starterkit_theme/css/components/button.css', 'starterkit_theme', 'base', 'css');
$this->assertAssetInLibrary('core/themes/starterkit_theme/css/components/collapse-processed.css', 'starterkit_theme', 'base', 'css');
$this->assertAssetInLibrary('core/themes/starterkit_theme/css/components/container-inline.css', 'starterkit_theme', 'base', 'css');
$this->assertAssetInLibrary('core/themes/starterkit_theme/css/components/details.css', 'starterkit_theme', 'base', 'css');
$this->assertAssetInLibrary('core/themes/starterkit_theme/css/components/dialog.css', 'starterkit_theme', 'dialog', 'css');
@ -75,13 +74,11 @@ class LibraryDiscoveryIntegrationTest extends KernelTestBase {
// Assert that starterkit_theme library assets were correctly overridden or
// removed.
$this->assertNoAssetInLibrary('core/themes/starterkit_theme/css/components/button.css', 'starterkit_theme', 'base', 'css');
$this->assertNoAssetInLibrary('core/themes/starterkit_theme/css/components/collapse-processed.css', 'starterkit_theme', 'base', 'css');
$this->assertNoAssetInLibrary('core/themes/starterkit_theme/css/components/container-inline.css', 'starterkit_theme', 'base', 'css');
$this->assertNoAssetInLibrary('core/themes/starterkit_theme/css/components/details.css', 'starterkit_theme', 'base', 'css');
$this->assertNoAssetInLibrary('core/themes/starterkit_theme/css/components/dialog.css', 'starterkit_theme', 'dialog', 'css');
$this->assertAssetInLibrary('core/modules/system/tests/themes/test_theme/css/my-button.css', 'starterkit_theme', 'base', 'css');
$this->assertAssetInLibrary('core/modules/system/tests/themes/test_theme/css/my-collapse-processed.css', 'starterkit_theme', 'base', 'css');
$this->assertAssetInLibrary('themes/my_theme/css/my-container-inline.css', 'starterkit_theme', 'base', 'css');
$this->assertAssetInLibrary('themes/my_theme/css/my-details.css', 'starterkit_theme', 'base', 'css');

125
core/themes/claro/css/components/details.css
View File

@ -334,15 +334,11 @@ td .claro-details {
/**
* Active has to be here for Firefox.
* Merges standard collapse-processed selectors.
*/
[open] > .claro-details__summary--accordion:not(:focus, :active)::after,
[open] > .claro-details__summary--accordion-item:not(:focus, :active)::after,
.collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
.collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
[open] > .claro-details__summary--vertical-tabs-item:not(:focus, :active)::after,
.collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
[open] > .claro-details__summary--vertical-tabs-item:not(:focus, :active)::after {
opacity: 1;
border: var(--details-summary-focus-border-size) solid var(--color-absolutezero);
border-width: 0 0 0 var(--details-summary-focus-border-size); /* LTR */
@ -351,16 +347,12 @@ td .claro-details {
[dir="rtl"] [open] > .claro-details__summary--accordion:not(:focus)::after,
[dir="rtl"] [open] > .claro-details__summary--accordion-item:not(:focus)::after,
[dir="rtl"] .collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
[dir="rtl"] .collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
[dir="rtl"] [open] > .claro-details__summary--vertical-tabs-item:not(:focus)::after,
[dir="rtl"] .collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
[dir="rtl"] [open] > .claro-details__summary--vertical-tabs-item:not(:focus)::after {
border-width: 0 var(--details-summary-focus-border-size) 0 0;
}
.claro-details__summary:focus::after,
.claro-details__summary:active::after,
.collapse-processed > .claro-details__summary .details-title:focus::after {
.claro-details__summary:active::after {
opacity: 1;
}
@ -470,99 +462,6 @@ td .claro-details {
color: var(--input--disabled-fg-color);
}
/**
* Collapse processed for non-supporting browsers like IE or Edge.
*/
.collapse-processed > .claro-details__summary {
padding: 0;
}
.collapse-processed > .claro-details__summary::after {
content: none;
}
.collapse-processed > .claro-details__summary .details-title {
position: relative;
display: block;
padding: var(--space-m) var(--space-m) var(--space-m) var(--details-desktop-wrapper-padding-start); /* LTR */
text-decoration: none;
color: inherit;
border-radius: var(--size-summary-border-radius);
}
[dir="rtl"] .collapse-processed > .claro-details__summary .details-title {
padding-right: var(--details-desktop-wrapper-padding-start);
padding-left: var(--space-m);
}
.collapse-processed > .claro-details__summary--accordion .details-title,
.collapse-processed > .claro-details__summary--accordion-item .details-title,
.collapse-processed > .claro-details__summary--vertical-tabs-item .details-title {
padding: var(--summary-accordion-padding-vertical) var(--space-l) var(--summary-accordion-padding-vertical) var(--details-desktop-wrapper-padding-start); /* LTR */
}
[dir="rtl"] .collapse-processed > .claro-details__summary--accordion .details-title,
[dir="rtl"] .collapse-processed > .claro-details__summary--accordion-item .details-title,
[dir="rtl"] .collapse-processed > .claro-details__summary--vertical-tabs-item .details-title {
padding-right: var(--details-desktop-wrapper-padding-start);
padding-left: var(--space-l);
}
/* Focus and hover states. */
.collapse-processed > .claro-details__summary .details-title:focus,
.collapse-processed > .claro-details__summary .details-title:hover {
z-index: 1;
text-decoration: none;
outline: none;
box-shadow: none;
}
.collapse-processed > .claro-details__summary .details-title::after {
position: absolute;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
content: "";
transition: opacity var(--details-box-shadow-transition-duration) ease-in-out;
pointer-events: none;
opacity: 0;
border: var(--details-summary-focus-border-size) solid var(--color-focus);
border-radius: var(--details-border-size-radius);
}
.collapse-processed > .claro-details__summary .details-title:focus::after {
opacity: 1;
}
/* Accordion item modifiers for the focus box. */
.collapse-processed > .claro-details__summary--accordion-item .details-title::after,
.vertical-tabs__item > .claro-details__summary--vertical-tabs-item .details-title::after {
border-radius: 0;
}
.collapse-processed:first-child > .claro-details__summary--accordion-item .details-title::after,
.vertical-tabs__item--first > .claro-details__summary--vertical-tabs-item .details-title::after {
border-top-left-radius: var(--details-border-size-radius);
border-top-right-radius: var(--details-border-size-radius);
}
.collapse-processed:last-child > .claro-details__summary--accordion-item .details-title::after,
.vertical-tabs__item--last > .claro-details__summary--vertical-tabs-item .details-title::after {
border-bottom-right-radius: var(--details-border-size-radius);
border-bottom-left-radius: var(--details-border-size-radius);
}
.collapse-processed[open] > .claro-details__summary--accordion .details-title::after,
.collapse-processed[open] > .claro-details__summary--accordion-item .details-title::after,
.vertical-tabs__item[open] > .claro-details__summary--vertical-tabs-item .details-title::after {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.claro-details__summary-summary {
display: block;
color: var(--color-gray-800);
@ -570,24 +469,6 @@ td .claro-details {
font-weight: normal;
}
@media (forced-colors: active) {
.collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
.collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
.collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
}
.collapse-processed > .claro-details__summary .details-title::after {
top: -0.3125rem;
right: -0.3125rem;
bottom: -0.3125rem;
left: -0.3125rem;
border: 2px dotted;
}
}
.required-mark::after {
display: inline-block;
width: 0.4375rem;

121
core/themes/claro/css/components/details.pcss.css
View File

@ -314,14 +314,10 @@
/**
* Active has to be here for Firefox.
* Merges standard collapse-processed selectors.
*/
[open] > .claro-details__summary--accordion:not(:focus, :active)::after,
[open] > .claro-details__summary--accordion-item:not(:focus, :active)::after,
.collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
.collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
[open] > .claro-details__summary--vertical-tabs-item:not(:focus, :active)::after,
.collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
[open] > .claro-details__summary--vertical-tabs-item:not(:focus, :active)::after {
opacity: 1;
border: var(--details-summary-focus-border-size) solid var(--color-absolutezero);
border-width: 0 0 0 var(--details-summary-focus-border-size); /* LTR */
@ -329,16 +325,12 @@
}
[dir="rtl"] [open] > .claro-details__summary--accordion:not(:focus)::after,
[dir="rtl"] [open] > .claro-details__summary--accordion-item:not(:focus)::after,
[dir="rtl"] .collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
[dir="rtl"] .collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
[dir="rtl"] [open] > .claro-details__summary--vertical-tabs-item:not(:focus)::after,
[dir="rtl"] .collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
[dir="rtl"] [open] > .claro-details__summary--vertical-tabs-item:not(:focus)::after {
border-width: 0 var(--details-summary-focus-border-size) 0 0;
}
.claro-details__summary:focus::after,
.claro-details__summary:active::after,
.collapse-processed > .claro-details__summary .details-title:focus::after {
.claro-details__summary:active::after {
opacity: 1;
}
@ -442,95 +434,6 @@
color: var(--input--disabled-fg-color);
}
/**
* Collapse processed for non-supporting browsers like IE or Edge.
*/
.collapse-processed > .claro-details__summary {
padding: 0;
}
.collapse-processed > .claro-details__summary::after {
content: none;
}
.collapse-processed > .claro-details__summary .details-title {
position: relative;
display: block;
padding: var(--space-m) var(--space-m) var(--space-m) var(--details-desktop-wrapper-padding-start); /* LTR */
text-decoration: none;
color: inherit;
border-radius: var(--size-summary-border-radius);
}
[dir="rtl"] .collapse-processed > .claro-details__summary .details-title {
padding-right: var(--details-desktop-wrapper-padding-start);
padding-left: var(--space-m);
}
.collapse-processed > .claro-details__summary--accordion .details-title,
.collapse-processed > .claro-details__summary--accordion-item .details-title,
.collapse-processed > .claro-details__summary--vertical-tabs-item .details-title {
padding: var(--summary-accordion-padding-vertical) var(--space-l) var(--summary-accordion-padding-vertical) var(--details-desktop-wrapper-padding-start); /* LTR */
}
[dir="rtl"] .collapse-processed > .claro-details__summary--accordion .details-title,
[dir="rtl"] .collapse-processed > .claro-details__summary--accordion-item .details-title,
[dir="rtl"] .collapse-processed > .claro-details__summary--vertical-tabs-item .details-title {
padding-right: var(--details-desktop-wrapper-padding-start);
padding-left: var(--space-l);
}
/* Focus and hover states. */
.collapse-processed > .claro-details__summary .details-title:focus,
.collapse-processed > .claro-details__summary .details-title:hover {
z-index: 1;
text-decoration: none;
outline: none;
box-shadow: none;
}
.collapse-processed > .claro-details__summary .details-title::after {
position: absolute;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
content: "";
transition: opacity var(--details-box-shadow-transition-duration) ease-in-out;
pointer-events: none;
opacity: 0;
border: var(--details-summary-focus-border-size) solid var(--color-focus);
border-radius: var(--details-border-size-radius);
}
.collapse-processed > .claro-details__summary .details-title:focus::after {
opacity: 1;
}
/* Accordion item modifiers for the focus box. */
.collapse-processed > .claro-details__summary--accordion-item .details-title::after,
.vertical-tabs__item > .claro-details__summary--vertical-tabs-item .details-title::after {
border-radius: 0;
}
.collapse-processed:first-child > .claro-details__summary--accordion-item .details-title::after,
.vertical-tabs__item--first > .claro-details__summary--vertical-tabs-item .details-title::after {
border-top-left-radius: var(--details-border-size-radius);
border-top-right-radius: var(--details-border-size-radius);
}
.collapse-processed:last-child > .claro-details__summary--accordion-item .details-title::after,
.vertical-tabs__item--last > .claro-details__summary--vertical-tabs-item .details-title::after {
border-bottom-right-radius: var(--details-border-size-radius);
border-bottom-left-radius: var(--details-border-size-radius);
}
.collapse-processed[open] > .claro-details__summary--accordion .details-title::after,
.collapse-processed[open] > .claro-details__summary--accordion-item .details-title::after,
.vertical-tabs__item[open] > .claro-details__summary--vertical-tabs-item .details-title::after {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.claro-details__summary-summary {
display: block;
color: var(--color-gray-800);
@ -538,24 +441,6 @@
font-weight: normal;
}
@media (forced-colors: active) {
.collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
.collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
.collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
}
.collapse-processed > .claro-details__summary .details-title::after {
top: -5px;
right: -5px;
bottom: -5px;
left: -5px;
border: 2px dotted;
}
}
.required-mark::after {
display: inline-block;
width: 0.4375rem;

45
core/themes/claro/css/components/system-status-report.css
View File

@ -43,8 +43,6 @@
box-shadow: none;
}
/* Account for native and poly-filled details element */
.system-status-report__status-title {
position: relative;
box-sizing: border-box;
@ -53,26 +51,7 @@
font-weight: bold;
}
.system-status-report__status-title .details-title {
text-transform: none;
color: inherit;
}
.system-status-report__status-title .details-title {
padding-left: 3em; /* LTR */
}
[dir="rtl"] .system-status-report__status-title .details-title {
padding-right: 3em;
padding-left: 0;
}
[dir="rtl"].details .system-status-report__status-title {
padding: 1em 3em 1em 1em;
}
.system-status-report__status-title .details-title:before,
.details .system-status-report__status-icon:before {
.system-status-report__status-icon:before {
position: absolute;
top: 1em;
left: 0.625rem; /* LTR */
@ -87,26 +66,22 @@
background-size: contain;
}
[dir="rtl"] .system-status-report__status-title .details-title:before,
[dir="rtl"].details .system-status-report__status-title:before {
[dir="rtl"] .system-status-report__status-title:before {
right: 0.625rem;
left: auto;
margin-right: 0;
}
.system-status-report__status-icon--error .details-title:before,
.details .system-status-report__status-icon--error:before {
.system-status-report__status-icon--error:before {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc2323'%3e%3cpath d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284 2.283 2.284z'/%3e%3c/svg%3e");
}
.system-status-report__status-icon--warning .details-title:before,
.details .system-status-report__status-icon--warning:before {
.system-status-report__status-icon--warning:before {
background-image: url("data:image/svg+xml,%3csvg fill='%23e29700' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m14.66 12.316-5.316-10.633c-.738-1.476-1.946-1.476-2.685 0l-5.317 10.633c-.738 1.477.008 2.684 1.658 2.684h10.002c1.65 0 2.396-1.207 1.658-2.684zm-7.66-8.316h2.002v5h-2.002zm2.252 8.615c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.239c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625z'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
.system-status-report__status-title .details-title:before,
.details .system-status-report__status-icon:before {
.system-status-report__status-icon:before {
background-color: canvastext;
background-image: none;
-webkit-mask-repeat: no-repeat;
@ -116,13 +91,11 @@
-webkit-mask-size: contain;
mask-size: contain;
}
.system-status-report__status-icon--error .details-title:before,
.details .system-status-report__status-icon--error:before {
.system-status-report__status-icon--error:before {
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc2323'%3e%3cpath d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284 2.283 2.284z'/%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc2323'%3e%3cpath d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284 2.283 2.284z'/%3e%3c/svg%3e");
}
.system-status-report__status-icon--warning .details-title:before,
.details .system-status-report__status-icon--warning:before {
.system-status-report__status-icon--warning:before {
-webkit-mask-image: url("data:image/svg+xml,%3csvg fill='%23e29700' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m14.66 12.316-5.316-10.633c-.738-1.476-1.946-1.476-2.685 0l-5.317 10.633c-.738 1.477.008 2.684 1.658 2.684h10.002c1.65 0 2.396-1.207 1.658-2.684zm-7.66-8.316h2.002v5h-2.002zm2.252 8.615c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.239c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625z'/%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg fill='%23e29700' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m14.66 12.316-5.316-10.633c-.738-1.476-1.946-1.476-2.685 0l-5.317 10.633c-.738 1.477.008 2.684 1.658 2.684h10.002c1.65 0 2.396-1.207 1.658-2.684zm-7.66-8.316h2.002v5h-2.002zm2.252 8.615c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.239c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625z'/%3e%3c/svg%3e");
}
@ -167,10 +140,6 @@
html.js .system-status-report__status-title::-webkit-details-marker {
display: none;
}
.collapse-processed > .system-status-report__status-title:before {
position: relative;
top: 0.1875rem;
}
.system-status-report__entry__value {
display: block;
width: calc(100% - 23em);

40
core/themes/claro/css/components/system-status-report.pcss.css
View File

@ -32,7 +32,6 @@
box-shadow: none;
}
/* Account for native and poly-filled details element */
.system-status-report__status-title {
position: relative;
box-sizing: border-box;
@ -40,23 +39,8 @@
padding: 1em 1em 1em 3em; /* LTR */
font-weight: bold;
}
.system-status-report__status-title .details-title {
text-transform: none;
color: inherit;
}
.system-status-report__status-title .details-title {
padding-left: 3em; /* LTR */
}
[dir="rtl"] .system-status-report__status-title .details-title {
padding-right: 3em;
padding-left: 0;
}
[dir="rtl"].details .system-status-report__status-title {
padding: 1em 3em 1em 1em;
}
.system-status-report__status-title .details-title:before,
.details .system-status-report__status-icon:before {
.system-status-report__status-icon:before {
position: absolute;
top: 1em;
left: 10px; /* LTR */
@ -70,36 +54,30 @@
background-position: top center;
background-size: contain;
}
[dir="rtl"] .system-status-report__status-title .details-title:before,
[dir="rtl"].details .system-status-report__status-title:before {
[dir="rtl"] .system-status-report__status-title:before {
right: 10px;
left: auto;
margin-right: 0;
}
.system-status-report__status-icon--error .details-title:before,
.details .system-status-report__status-icon--error:before {
.system-status-report__status-icon--error:before {
background-image: url(../../../../misc/icons/dc2323/error.svg);
}
.system-status-report__status-icon--warning .details-title:before,
.details .system-status-report__status-icon--warning:before {
.system-status-report__status-icon--warning:before {
background-image: url(../../images/core/e29700/warning.svg);
}
@media (forced-colors: active) {
.system-status-report__status-title .details-title:before,
.details .system-status-report__status-icon:before {
.system-status-report__status-icon:before {
background-color: canvastext;
background-image: none;
mask-repeat: no-repeat;
mask-position: top center;
mask-size: contain;
}
.system-status-report__status-icon--error .details-title:before,
.details .system-status-report__status-icon--error:before {
.system-status-report__status-icon--error:before {
mask-image: url(../../../../misc/icons/dc2323/error.svg);
}
.system-status-report__status-icon--warning .details-title:before,
.details .system-status-report__status-icon--warning:before {
.system-status-report__status-icon--warning:before {
mask-image: url(../../images/core/e29700/warning.svg);
}
}
@ -142,10 +120,6 @@
html.js .system-status-report__status-title::-webkit-details-marker {
display: none;
}
.collapse-processed > .system-status-report__status-title:before {
position: relative;
top: 3px;
}
.system-status-report__entry__value {
display: block;
width: calc(100% - 23em);

33
core/themes/claro/js/details.js
View File

@ -3,7 +3,7 @@
* Claro's polyfill enhancements for HTML5 details.
*/
(($, Modernizr, Drupal) => {
(($, Drupal) => {
/**
* Workaround for Firefox.
*
@ -28,35 +28,6 @@
},
};
/**
* Workaround for non-supporting browsers.
*
* This shim extends HTML5 Shiv used by core.
*
* HTML5 Shiv toggles focused details for hitting enter. We copy that for
* space key as well to make the behavior consistent across browsers.
*
* @type {Drupal~behavior}
*/
Drupal.behaviors.claroDetailsToggleShim = {
attach(context) {
if (Modernizr.details || !Drupal.CollapsibleDetails.instances.length) {
return;
}
$(once('claroDetailsToggleShim', 'details .details-title', context)).on(
'keypress',
(event) => {
const keyCode = event.keyCode || event.charCode;
if (keyCode === 32) {
$(event.target).closest('summary').trigger('click');
event.preventDefault();
}
},
);
},
};
/**
* Theme override providing a wrapper for summarized details content.
*
@ -75,4 +46,4 @@
* The formatted summarized content text.
*/
Drupal.theme.detailsSummarizedContentText = (text) => text || '';
})(jQuery, Modernizr, Drupal);
})(jQuery, Drupal);

102
core/themes/olivero/css/components/details.css
View File

@ -75,18 +75,15 @@
/* Arrow icon */
[dir="ltr"] .olivero-details__summary:before,[dir="ltr"]
.collapse-processed > .olivero-details__summary .details-title:before {
[dir="ltr"] .olivero-details__summary:before {
left: var(--sp0-75);
}
[dir="rtl"] .olivero-details__summary:before,[dir="rtl"]
.collapse-processed > .olivero-details__summary .details-title:before {
[dir="rtl"] .olivero-details__summary:before {
right: var(--sp0-75);
}
.olivero-details__summary:before,
.collapse-processed > .olivero-details__summary .details-title:before {
.olivero-details__summary:before {
position: absolute;
top: 50%;
display: block;
@ -98,15 +95,13 @@
border-right: solid 2px currentColor;
}
[dir="rtl"] .olivero-details__summary:before,
[dir="rtl"] .collapse-processed > .olivero-details__summary .details-title:before {
transform: translateY(-50%) rotate(-135deg);
}
[dir="rtl"] .olivero-details__summary:before {
transform: translateY(-50%) rotate(-135deg);
}
/* Pseudo-selector to manage focus styles */
.olivero-details__summary:after,
.collapse-processed > .olivero-details__summary .details-title:after {
.olivero-details__summary:after {
position: absolute;
top: calc(var(--details-border-width) * -1);
right: calc(var(--details-border-width) * -1);
@ -141,96 +136,17 @@
/* Details summary, focus and active states */
.olivero-details__summary:focus:after,
.olivero-details__summary:active:after,
.collapse-processed > .olivero-details__summary .details-title:focus:after,
.collapse-processed > .olivero-details__summary .details-title:active:after {
.olivero-details__summary:active:after {
opacity: 1;
}
/* Rotate arrow icon of the details summary, when details expanded */
.olivero-details[open] > .olivero-details__summary::before,
.collapse-processed[open] > .olivero-details__summary .details-title::before {
.olivero-details[open] > .olivero-details__summary::before {
margin-top: -2px;
transform: translateY(-50%) rotate(135deg);
}
/* Collapse processed for non-supporting browsers like IE or Edge */
[dir="ltr"] .collapse-processed > .olivero-details__summary {
padding-left: 0;
}
[dir="rtl"] .collapse-processed > .olivero-details__summary {
padding-right: 0;
}
[dir="ltr"] .collapse-processed > .olivero-details__summary {
padding-right: 0;
}
[dir="rtl"] .collapse-processed > .olivero-details__summary {
padding-left: 0;
}
.collapse-processed > .olivero-details__summary {
padding-top: 0;
padding-bottom: 0
}
.collapse-processed > .olivero-details__summary:before {
content: none;
}
.collapse-processed > .olivero-details__summary:after {
content: none;
}
[dir="ltr"] .collapse-processed > .olivero-details__summary .details-title {
padding-left: var(--sp2);
}
[dir="rtl"] .collapse-processed > .olivero-details__summary .details-title {
padding-right: var(--sp2);
}
[dir="ltr"] .collapse-processed > .olivero-details__summary .details-title {
padding-right: var(--sp1);
}
[dir="rtl"] .collapse-processed > .olivero-details__summary .details-title {
padding-left: var(--sp1);
}
.collapse-processed > .olivero-details__summary .details-title {
position: relative;
display: block;
padding-top: var(--sp1);
padding-bottom: var(--sp1);
transition: var(--details-summary-transition);
text-decoration: none;
color: inherit;
background-color: var(--color--gray-100);
}
.collapse-processed > .olivero-details__summary .details-title:focus {
outline: solid 2px transparent;
}
.collapse-processed > .olivero-details__summary .details-title:hover {
background-color: var(--color--gray-95);
}
@media screen and (-ms-high-contrast: active) {
.collapse-processed > .olivero-details__summary .details-title::after {
top: -0.3125rem;
right: -0.3125rem;
bottom: -0.3125rem;
left: -0.3125rem;
border: 2px dotted;
}
}
/* Details content wrapper */
.olivero-details__wrapper {

62
core/themes/olivero/css/components/details.pcss.css
View File

@ -38,8 +38,7 @@
}
/* Arrow icon */
.olivero-details__summary:before,
.collapse-processed > .olivero-details__summary .details-title:before {
.olivero-details__summary:before {
position: absolute;
inset-block-start: 50%;
inset-inline-start: var(--sp0-75);
@ -52,16 +51,12 @@
border-right: solid 2px currentColor;
}
[dir="rtl"] {
& .olivero-details__summary:before,
& .collapse-processed > .olivero-details__summary .details-title:before {
transform: translateY(-50%) rotate(-135deg);
}
[dir="rtl"] .olivero-details__summary:before {
transform: translateY(-50%) rotate(-135deg);
}
/* Pseudo-selector to manage focus styles */
.olivero-details__summary:after,
.collapse-processed > .olivero-details__summary .details-title:after {
.olivero-details__summary:after {
position: absolute;
inset: calc(var(--details-border-width) * -1);
content: "";
@ -89,61 +84,16 @@
/* Details summary, focus and active states */
.olivero-details__summary:focus:after,
.olivero-details__summary:active:after,
.collapse-processed > .olivero-details__summary .details-title:focus:after,
.collapse-processed > .olivero-details__summary .details-title:active:after {
.olivero-details__summary:active:after {
opacity: 1;
}
/* Rotate arrow icon of the details summary, when details expanded */
.olivero-details[open] > .olivero-details__summary::before,
.collapse-processed[open] > .olivero-details__summary .details-title::before {
.olivero-details[open] > .olivero-details__summary::before {
margin-block-start: -2px;
transform: translateY(-50%) rotate(135deg);
}
/* Collapse processed for non-supporting browsers like IE or Edge */
.collapse-processed > .olivero-details__summary {
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
&:before {
content: none;
}
&:after {
content: none;
}
}
.collapse-processed > .olivero-details__summary .details-title {
position: relative;
display: block;
padding-block: var(--sp1);
padding-inline-start: var(--sp2);
padding-inline-end: var(--sp1);
transition: var(--details-summary-transition);
text-decoration: none;
color: inherit;
background-color: var(--color--gray-100);
}
.collapse-processed > .olivero-details__summary .details-title:focus {
outline: solid 2px transparent;
}
.collapse-processed > .olivero-details__summary .details-title:hover {
background-color: var(--color--gray-95);
}
@media screen and (-ms-high-contrast: active) {
.collapse-processed > .olivero-details__summary .details-title::after {
inset: -5px;
border: 2px dotted;
}
}
/* Details content wrapper */
.olivero-details__wrapper {
margin: var(--sp1);

32
core/themes/starterkit_theme/css/components/collapse-processed.css
View File

@ -1,32 +0,0 @@
/**
* @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%;
}

2
core/themes/starterkit_theme/starterkit_theme.libraries.yml
View File

@ -8,8 +8,6 @@ base:
weight: -10
css/components/button.css:
weight: -10
css/components/collapse-processed.css:
weight: -10
css/components/container-inline.css:
weight: -10
css/components/details.css: