From 1fbf9f5d2b589e17b7c67ee45774b32cd9e50807 Mon Sep 17 00:00:00 2001 From: Alex Pott <alex.a.pott@googlemail.com> Date: Wed, 1 May 2024 11:26:29 +0100 Subject: [PATCH] Issue #3409048 by finnsky, alexpott, longwave, bnjmnm, andypost, nod_: Configure postcss formatting after stylelint and stylelint-config-standard update --- .gitlab-ci.yml | 1 + core/.prettierrc.json | 12 +- core/.stylelintrc.json | 5 +- core/misc/dialog/off-canvas/css/base.pcss.css | 2 +- .../dialog/off-canvas/css/wrapper.pcss.css | 5 +- .../css/announcements_feed.dialog.pcss.css | 1 - core/modules/ckeditor5/css/image.css | 7 +- core/modules/ckeditor5/css/language.css | 2 +- .../comment/css/comment.icon.theme.pcss.css | 2 +- .../css/content_moderation.module.css | 2 +- .../css/field_ui_add_field.module.pcss.css | 12 +- core/modules/filter/css/filter.caption.css | 2 +- .../modules/navigation/css/base/variables.css | 1 + .../navigation/css/base/variables.pcss.css | 3 +- .../css/components/admin-toolbar.pcss.css | 51 +- .../css/components/body-scroll-lock.pcss.css | 2 +- .../css/components/toolbar-block.pcss.css | 10 +- .../css/components/toolbar-button.pcss.css | 30 +- .../css/components/toolbar-menu.pcss.css | 18 +- .../css/components/toolbar-popover.pcss.css | 33 +- .../css/components/tooltip.pcss.css | 4 +- .../css/components/top-bar.pcss.css | 4 +- core/modules/node/css/node.module.css | 9 +- core/modules/system/css/system.admin.css | 4 +- core/modules/views_ui/css/views_ui.admin.css | 3 +- .../views_ui/css/views_ui.admin.theme.css | 31 +- core/package.json | 1 + .../themes/umami/components/badge/badge.css | 6 +- .../themes/umami/components/banner/banner.css | 9 +- .../themes/umami/components/card/card.css | 2 +- .../components/footer-block/footer-block.css | 2 +- .../themes/umami/components/header/header.css | 6 +- .../umami/components/read-more/read-more.css | 4 +- .../demo_umami/themes/umami/css/base.css | 28 +- .../umami/css/classy/components/dialog.css | 3 +- .../umami/css/classy/components/progress.css | 16 +- .../umami/css/components/blocks/help/help.css | 2 +- .../blocks/quicklinks/quicklinks.css | 18 +- .../blocks/search/search-results.css | 2 +- .../css/components/blocks/search/search.css | 14 +- .../components/fields/recipe-instruction.css | 4 +- .../umami/css/components/forms/contact.css | 6 +- .../css/components/messages/messages.css | 2 +- .../navigation/breadcrumbs/breadcrumbs.css | 3 +- .../css/components/regions/bottom/bottom.css | 3 +- .../css/components/regions/footer/footer.css | 6 +- .../regions/highlighted/highlighted.css | 3 +- .../regions/pre-header/pre-header.css | 6 +- .../css/components/regions/tabs/tabs.css | 3 +- .../umami/css/components/views/frontpage.css | 3 +- .../css/components/views/promoted-items.css | 40 +- .../themes/umami/css/layout/grid-3.css | 6 +- .../themes/umami/css/layout/grid-4.css | 6 +- .../themes/umami/css/layout/layout-2-col.css | 3 +- .../themes/umami/css/layout/layout.css | 3 +- .../fourcol_section/fourcol_section.css | 6 +- .../oneplusfourgrid_section.css | 3 +- .../threecol_section/threecol_section.css | 3 +- .../layouts/twocol_section/twocol_section.css | 3 +- core/scripts/css/compile.js | 8 +- .../claro/css/components/action-link.pcss.css | 19 - .../claro/css/components/details.pcss.css | 4 +- .../claro/css/components/dialog.pcss.css | 5 +- .../components/dropbutton-noscript.pcss.css | 2 +- .../claro/css/components/dropbutton.pcss.css | 11 +- .../claro/css/components/fieldset.pcss.css | 4 +- .../components/form--checkbox-radio.pcss.css | 25 +- .../form--password-confirm.pcss.css | 4 +- .../css/components/form--select.pcss.css | 3 +- .../claro/css/components/form--text.pcss.css | 13 +- .../claro/css/components/icon-link.pcss.css | 8 +- .../css/components/image-preview.pcss.css | 6 +- .../css/components/jquery.ui/theme.pcss.css | 692 +++++++++++++----- .../claro/css/components/shortcut.pcss.css | 6 +- .../system-admin--admin-list.pcss.css | 2 +- .../components/system-admin--modules.pcss.css | 6 +- .../claro/css/components/tables.pcss.css | 3 +- .../components/tablesort-indicator.pcss.css | 1 - .../themes/claro/css/components/tabs.pcss.css | 8 +- .../css/components/views_ui.admin.pcss.css | 3 +- .../css/layout/system-admin--layout.pcss.css | 4 +- .../claro/css/theme/maintenance-page.pcss.css | 15 +- .../claro/css/theme/media-library.pcss.css | 11 +- .../css/theme/views_ui.admin.theme.pcss.css | 23 +- .../olivero/css/base/media-queries.pcss.css | 2 +- .../autocomplete-loading.module.pcss.css | 2 +- .../css/components/breadcrumb.pcss.css | 4 +- .../css/components/form-boolean.pcss.css | 8 +- .../css/components/header-navigation.pcss.css | 8 +- .../olivero/css/components/hero.pcss.css | 3 +- .../navigation/nav-primary-wide.pcss.css | 5 +- .../navigation/nav-primary.pcss.css | 5 +- .../navigation/nav-secondary.pcss.css | 4 +- .../css/components/node-teaser.pcss.css | 2 +- .../olivero/css/components/node.pcss.css | 4 +- .../css/components/search-results.pcss.css | 4 +- .../css/components/site-header.pcss.css | 5 +- .../olivero/css/components/tabs.pcss.css | 5 +- .../olivero/css/components/tags.pcss.css | 2 +- .../css/components/vertical-tabs.pcss.css | 2 +- .../announcements_feed.toolbar.css | 1 - .../content_moderation.module.css | 2 +- .../stable9/css/filter/filter.caption.css | 2 +- core/themes/stable9/css/node/node.module.css | 9 +- .../stable9/css/system/system.admin.css | 4 +- .../stable9/css/views_ui/views_ui.admin.css | 3 +- .../css/views_ui/views_ui.admin.theme.css | 31 +- .../css/components/dialog.css | 3 +- .../css/components/messages.css | 10 +- .../css/components/progress.css | 16 +- core/yarn.lock | 13 + 111 files changed, 1032 insertions(+), 494 deletions(-) diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index ac796f4c0212..0ca45f04e923 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -402,6 +402,7 @@ default: - if: $CI_PIPELINE_SOURCE == "merge_request_event" changes: - core/.stylelintrc.json + - core/.prettier* - core/package.json - core/yarn.lock - "**/*.css" diff --git a/core/.prettierrc.json b/core/.prettierrc.json index c06cd1fd0798..cccbb6fcb655 100644 --- a/core/.prettierrc.json +++ b/core/.prettierrc.json @@ -2,5 +2,15 @@ "printWidth": 80, "semi": true, "singleQuote": true, - "trailingComma": "all" + "trailingComma": "all", + "overrides": [ + { + "files": ["*.css"], + "options": { + "parser": "css", + "printWidth": 10000, + "singleQuote": false + } + } + ] } diff --git a/core/.stylelintrc.json b/core/.stylelintrc.json index d30748014eb9..d3fedc6c31f2 100644 --- a/core/.stylelintrc.json +++ b/core/.stylelintrc.json @@ -1,5 +1,8 @@ { - "extends": "stylelint-config-standard", + "extends": [ + "stylelint-config-standard", + "stylelint-prettier/recommended" + ], "plugins": [ "stylelint-order" ], diff --git a/core/misc/dialog/off-canvas/css/base.pcss.css b/core/misc/dialog/off-canvas/css/base.pcss.css index 3736a0b0a51a..5f7d09eb6815 100644 --- a/core/misc/dialog/off-canvas/css/base.pcss.css +++ b/core/misc/dialog/off-canvas/css/base.pcss.css @@ -87,7 +87,7 @@ list-style: none; & li { - margin: calc(var(--off-canvas-vertical-spacing-unit) /2) 0; + margin: calc(var(--off-canvas-vertical-spacing-unit) / 2) 0; } } } diff --git a/core/misc/dialog/off-canvas/css/wrapper.pcss.css b/core/misc/dialog/off-canvas/css/wrapper.pcss.css index b74be8a236f6..c16a7e652df1 100644 --- a/core/misc/dialog/off-canvas/css/wrapper.pcss.css +++ b/core/misc/dialog/off-canvas/css/wrapper.pcss.css @@ -34,7 +34,10 @@ body.js-off-canvas-dialog-open { /* This is a page level content wrapper that shrinks when off-canvas is open. */ .dialog-off-canvas-main-canvas { - transition: padding-right 0.7s ease, padding-left 0.7s ease, padding-top 0.3s ease; + transition: + padding-right 0.7s ease, + padding-left 0.7s ease, + padding-top 0.3s ease; @media (prefers-reduced-motion: reduce) { transition: none; diff --git a/core/modules/announcements_feed/css/announcements_feed.dialog.pcss.css b/core/modules/announcements_feed/css/announcements_feed.dialog.pcss.css index 5f8c8c58a5e5..f0bf8d427afa 100644 --- a/core/modules/announcements_feed/css/announcements_feed.dialog.pcss.css +++ b/core/modules/announcements_feed/css/announcements_feed.dialog.pcss.css @@ -5,7 +5,6 @@ */ #drupal-off-canvas-wrapper { - & .ui-dialog-titlebar.announce-titlebar::before { -webkit-mask-image: url("../images/announcement-bell.svg"); mask-image: url("../images/announcement-bell.svg"); diff --git a/core/modules/ckeditor5/css/image.css b/core/modules/ckeditor5/css/image.css index b2e6a15970b6..7fe77f94ca53 100644 --- a/core/modules/ckeditor5/css/image.css +++ b/core/modules/ckeditor5/css/image.css @@ -28,12 +28,7 @@ right: 10px; bottom: 10px; overflow: hidden; - max-width: - calc( - (var(--is-small) * 0) - + (var(--is-medium) * 33) - + (var(--is-wide) * 999999) - ); + max-width: calc((var(--is-small) * 0) + (var(--is-medium) * 33) + (var(--is-wide) * 999999)); border-left: calc((var(--is-small) * 0) + (var(--is-medium) * 3) + (var(--is-wide) * 3)) solid #ffd23f; border-radius: 2px; background: #232429; diff --git a/core/modules/ckeditor5/css/language.css b/core/modules/ckeditor5/css/language.css index 6e39f9064696..6f2324812beb 100644 --- a/core/modules/ckeditor5/css/language.css +++ b/core/modules/ckeditor5/css/language.css @@ -13,7 +13,7 @@ outline: 1px dotted gray; } .ck-content [lang]::after { - content: " ("attr(lang)")"; + content: " (" attr(lang) ")"; color: #666; font-size: 10px; } diff --git a/core/modules/comment/css/comment.icon.theme.pcss.css b/core/modules/comment/css/comment.icon.theme.pcss.css index 18201178f32d..62c66c7dcb33 100644 --- a/core/modules/comment/css/comment.icon.theme.pcss.css +++ b/core/modules/comment/css/comment.icon.theme.pcss.css @@ -1,4 +1,4 @@ .field-icon-comment { - color:red; + color: red; background-image: url(../../../misc/icons/55565b/comment.svg); } diff --git a/core/modules/content_moderation/css/content_moderation.module.css b/core/modules/content_moderation/css/content_moderation.module.css index cf0115c09032..82eab95573b6 100644 --- a/core/modules/content_moderation/css/content_moderation.module.css +++ b/core/modules/content_moderation/css/content_moderation.module.css @@ -29,6 +29,6 @@ padding-bottom: 0.25em; } -.entity-moderation-form input[type=submit] { +.entity-moderation-form input[type="submit"] { margin-bottom: 1.2em; } diff --git a/core/modules/field_ui/css/field_ui_add_field.module.pcss.css b/core/modules/field_ui/css/field_ui_add_field.module.pcss.css index 952c6c5ef7bf..54d5be8aa1ee 100644 --- a/core/modules/field_ui/css/field_ui_add_field.module.pcss.css +++ b/core/modules/field_ui/css/field_ui_add_field.module.pcss.css @@ -103,7 +103,9 @@ } &.hover { border-color: var(--color-gray); - box-shadow: inset 0 0 0 1px var(--color-gray), var(--details-box-shadow); + box-shadow: + inset 0 0 0 1px var(--color-gray), + var(--details-box-shadow); } &:not(.selected, .error):hover .form-boolean { border-color: var(--input-fg-color); @@ -111,11 +113,15 @@ } &.selected { border-color: var(--color-blue); - box-shadow: inset 0 0 0 2px var(--color-blue), var(--details-box-shadow); + box-shadow: + inset 0 0 0 2px var(--color-blue), + var(--details-box-shadow); } &.error { border-color: var(--color-red); - box-shadow: inset 0 0 0 1px var(--color-red), var(--details-box-shadow); + box-shadow: + inset 0 0 0 1px var(--color-red), + var(--details-box-shadow); } & .form-item__label.has-error { color: currentColor; diff --git a/core/modules/filter/css/filter.caption.css b/core/modules/filter/css/filter.caption.css index 34c0b1b8a8a2..b906775f89df 100644 --- a/core/modules/filter/css/filter.caption.css +++ b/core/modules/filter/css/filter.caption.css @@ -24,7 +24,7 @@ * * Based on http://codepen.io/flesler/pen/AEIFc. */ -.caption > figcaption[contenteditable=true]:empty::before { +.caption > figcaption[contenteditable="true"]:empty::before { content: attr(data-placeholder); font-style: italic; } diff --git a/core/modules/navigation/css/base/variables.css b/core/modules/navigation/css/base/variables.css index a1741036cf11..2d77f9e44f07 100644 --- a/core/modules/navigation/css/base/variables.css +++ b/core/modules/navigation/css/base/variables.css @@ -7,6 +7,7 @@ /* This is a universal size that helps in the case of themes with a size of 10 pixels. We need it root to calculate the size of the displace in .dialog-off-canvas-main-canvas */ :root { + /* stylelint-disable-next-line prettier/prettier */ --admin-toolbar-rem: max(1rem, 16px); /* Workaround until postcss-px-to-rem is removed so this is not converted to rems. */ } [data-drupal-admin-styles] { diff --git a/core/modules/navigation/css/base/variables.pcss.css b/core/modules/navigation/css/base/variables.pcss.css index 5388893dce3e..eca0e1e8b8c8 100644 --- a/core/modules/navigation/css/base/variables.pcss.css +++ b/core/modules/navigation/css/base/variables.pcss.css @@ -3,6 +3,7 @@ /* This is a universal size that helps in the case of themes with a size of 10 pixels. We need it root to calculate the size of the displace in .dialog-off-canvas-main-canvas */ :root { + /* stylelint-disable-next-line prettier/prettier */ --admin-toolbar-rem: max(1rem, 16PX); /* Workaround until postcss-px-to-rem is removed so this is not converted to rems. */ } @@ -135,7 +136,7 @@ We need it root to calculate the size of the displace in .dialog-off-canvas-main --admin-toolbar-font-size-info-md: var(--drupal-admin-font-size-info-md, var(--admin-toolbar-rem)); /* 16px */ --admin-toolbar-line-height-info-md: var(--drupal-admin-line-height-info-md, calc(1.5 * var(--admin-toolbar-rem))); /* 24px */ --admin-toolbar-font-size-info-lg: var(--drupal-admin-font-size-info-lg, calc(1.125 * var(--admin-toolbar-rem))); /* 18px */ - --admin-toolbar-line-height-info-lg: var(--drupal-admin-line-height-info-lg, calc(1.5 * var(--admin-toolbar-rem))); /* 24px */ + --admin-toolbar-line-height-info-lg: var(--drupal-admin-line-height-info-lg, calc(1.5 * var(--admin-toolbar-rem))); /* 24px */ --admin-toolbar-font-size-info-xl: var(--drupal-admin-font-size-info-xl, calc(1.25 * var(--admin-toolbar-rem))); /* 20px */ --admin-toolbar-line-height-info-xl: var(--drupal-admin-line-height-info-xl, calc(1.5 * var(--admin-toolbar-rem))); /* 24px */ diff --git a/core/modules/navigation/css/components/admin-toolbar.pcss.css b/core/modules/navigation/css/components/admin-toolbar.pcss.css index 30f2cdd973bb..0977baf3c4a1 100644 --- a/core/modules/navigation/css/components/admin-toolbar.pcss.css +++ b/core/modules/navigation/css/components/admin-toolbar.pcss.css @@ -14,7 +14,7 @@ body { --admin-toolbar-sidebar-width: calc(4.5 * var(--admin-toolbar-rem)); --admin-toolbar-sidebar-header: calc(3.5 * var(--admin-toolbar-rem)); - [data-admin-toolbar='expanded'] & { + [data-admin-toolbar="expanded"] & { --admin-toolbar-sidebar-width: 80vw; @media (--admin-toolbar-tablet) { @@ -94,7 +94,7 @@ body { } } - [data-admin-toolbar='expanded'] & { + [data-admin-toolbar="expanded"] & { transform: none; } @@ -102,7 +102,7 @@ body { transform: none; } - @media only screen and (max-height: 300px) { + @media only screen and (max-height: 300px) { min-height: 20rem; } } @@ -112,7 +112,7 @@ body { flex-grow: 0; } -.admin-toolbar:has([data-toolbar-popover-control][aria-expanded='true']) { +.admin-toolbar:has([data-toolbar-popover-control][aria-expanded="true"]) { .admin-toolbar__back-button { display: flex; @@ -162,8 +162,10 @@ body { flex-shrink: 0; width: calc(1 * var(--admin-toolbar-rem)); height: calc(1 * var(--admin-toolbar-rem)); - content: ''; - transition: opacity var(--admin-toolbar-transition), transform var(--admin-toolbar-transition); + content: ""; + transition: + opacity var(--admin-toolbar-transition), + transform var(--admin-toolbar-transition); opacity: 0; background-color: currentColor; mask-repeat: no-repeat; @@ -175,7 +177,7 @@ body { opacity: 1; } - [dir='rtl'] & { + [dir="rtl"] & { transform: rotate(180deg); } @@ -184,11 +186,11 @@ body { } } - &[aria-expanded='true'] { + &[aria-expanded="true"] { &::before { transform: rotate(180deg); - [dir='rtl'] & { + [dir="rtl"] & { transform: none; } } @@ -246,7 +248,6 @@ body { background-color: transparent; } - & img { display: block; } @@ -261,13 +262,14 @@ body { overflow-y: auto; flex-direction: column; height: 100%; - background: linear-gradient(var(--admin-toolbar-color-white) 30%, var(--admin-toolbar-color-white)), - radial-gradient(farthest-side at 50% 0, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0)); + background: linear-gradient(var(--admin-toolbar-color-white) 30%, var(--admin-toolbar-color-white)), radial-gradient(farthest-side at 50% 0, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0)); background-color: var(--admin-toolbar-color-white); background-repeat: no-repeat; background-attachment: local, scroll; background-position-y: 48px; - background-size: 100% 40px, 100% 16px; + background-size: + 100% 40px, + 100% 16px; @media (--admin-toolbar-desktop) { display: contents; @@ -292,14 +294,19 @@ body { flex-direction: column; flex-grow: 1; padding-block-start: var(--admin-toolbar-space-16); - background: linear-gradient(var(--admin-toolbar-color-white) 30%, var(--admin-toolbar-color-white)), - linear-gradient(var(--admin-toolbar-color-white), var(--admin-toolbar-color-white) 80%) 0 100%, - radial-gradient(farthest-side at 50% 0, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0)), - radial-gradient(farthest-side at 50% 100%, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0)) 0 100%; + background: + linear-gradient(var(--admin-toolbar-color-white) 30%, var(--admin-toolbar-color-white)), + linear-gradient(var(--admin-toolbar-color-white), var(--admin-toolbar-color-white) 80%) 0 100%, + radial-gradient(farthest-side at 50% 0, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0)), + radial-gradient(farthest-side at 50% 100%, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0)) 0 100%; background-color: var(--admin-toolbar-color-white); background-repeat: no-repeat; background-attachment: local, local, scroll, scroll; - background-size: 100% 40px, 100% 40px, 100% 16px, 100% 16px; + background-size: + 100% 40px, + 100% 40px, + 100% 16px, + 100% 16px; } } @@ -335,9 +342,9 @@ body { } } -[data-drupal-tooltip]:hover +.admin-toolbar__tooltip, -[data-drupal-tooltip]:focus +.admin-toolbar__tooltip { - [data-admin-toolbar='expanded'] & { +[data-drupal-tooltip]:hover + .admin-toolbar__tooltip, +[data-drupal-tooltip]:focus + .admin-toolbar__tooltip { + [data-admin-toolbar="expanded"] & { display: none; } } @@ -356,7 +363,7 @@ body { height: 100vh; background-color: rgba(0, 0, 0, 0.14); - :where([data-admin-toolbar='expanded']) & { + :where([data-admin-toolbar="expanded"]) & { display: block; } diff --git a/core/modules/navigation/css/components/body-scroll-lock.pcss.css b/core/modules/navigation/css/components/body-scroll-lock.pcss.css index 4032a40fa370..eb759258e857 100644 --- a/core/modules/navigation/css/components/body-scroll-lock.pcss.css +++ b/core/modules/navigation/css/components/body-scroll-lock.pcss.css @@ -5,7 +5,7 @@ @import "../base/media-queries.pcss.css"; -[data-admin-toolbar-body-scroll='locked'] { +[data-admin-toolbar-body-scroll="locked"] { overflow: clip; body { diff --git a/core/modules/navigation/css/components/toolbar-block.pcss.css b/core/modules/navigation/css/components/toolbar-block.pcss.css index af34e822fe0a..478c8738bd81 100644 --- a/core/modules/navigation/css/components/toolbar-block.pcss.css +++ b/core/modules/navigation/css/components/toolbar-block.pcss.css @@ -9,7 +9,7 @@ gap: var(--admin-toolbar-space-4); .admin-toolbar__content & { - &:nth-last-child(n+2) { + &:nth-last-child(n + 2) { &::after { margin-top: var(--admin-toolbar-space-8); content: ""; @@ -43,10 +43,10 @@ font-family: inherit; font-size: var(--admin-toolbar-font-size-label-xs); line-height: var(--admin-toolbar-line-height-label-xs); - font-variation-settings: 'wght' 500; + font-variation-settings: "wght" 500; - html:not([data-admin-toolbar='expanded']) &, - html[data-admin-toolbar-animating][data-admin-toolbar='expanded'] & { + html:not([data-admin-toolbar="expanded"]) &, + html[data-admin-toolbar-animating][data-admin-toolbar="expanded"] & { display: flex; align-items: center; justify-content: center; @@ -61,7 +61,7 @@ display: block; width: var(--admin-toolbar-space-4); height: var(--admin-toolbar-space-4); - content: ''; + content: ""; border-radius: 50%; background-color: currentColor; } diff --git a/core/modules/navigation/css/components/toolbar-button.pcss.css b/core/modules/navigation/css/components/toolbar-button.pcss.css index ea328f5fe1a8..b56d7b882c20 100644 --- a/core/modules/navigation/css/components/toolbar-button.pcss.css +++ b/core/modules/navigation/css/components/toolbar-button.pcss.css @@ -4,7 +4,7 @@ * Toolbar button styles. */ -@import '../base/media-queries.pcss.css'; +@import "../base/media-queries.pcss.css"; :root { --toolbar-button-outline-offset: 0; @@ -33,7 +33,7 @@ border-radius: var(--admin-toolbar-space-8); background-color: transparent; font-size: var(--admin-toolbar-font-size-info-sm); - font-variation-settings: 'wght' 700; + font-variation-settings: "wght" 700; line-height: var(--admin-toolbar-line-height-info-sm); gap: calc(0.5 * var(--admin-toolbar-rem)); @@ -91,7 +91,7 @@ } /* Class starts with `toolbar-button--icon` */ -[class*='toolbar-button--icon'] { +[class*="toolbar-button--icon"] { --icon: url(../../assets/icons/basic.svg); /* Default icon, aka --basic */ padding-inline: calc(0.625 * var(--admin-toolbar-rem)); @@ -101,7 +101,7 @@ flex-shrink: 0; inline-size: var(--admin-toolbar-space-20); block-size: var(--admin-toolbar-space-20); - content: ''; + content: ""; background-color: currentColor; mask-repeat: no-repeat; mask-position: center center; @@ -139,17 +139,17 @@ } } -.toolbar-button--secondary--expanded[aria-expanded='true'] { +.toolbar-button--secondary--expanded[aria-expanded="true"] { color: white; background-color: var(--admin-toolbar-color-gray-900); } -.toolbar-button--tertiary--expanded[aria-expanded='true'] { +.toolbar-button--tertiary--expanded[aria-expanded="true"] { background-color: var(--admin-toolbar-color-gray-050); } .toolbar-button--weight--400 { - font-variation-settings: 'wght' 400; + font-variation-settings: "wght" 400; } /* Set 0 specificity */ @@ -158,11 +158,11 @@ flex-grow: 1; } -[class*='toolbar-button--expand'] { +[class*="toolbar-button--expand"] { &::after { flex-shrink: 0; margin-inline-start: auto; - content: ''; + content: ""; transition: transform var(--admin-toolbar-transition); background-color: currentColor; block-size: var(--admin-toolbar-space-16); @@ -172,7 +172,7 @@ mask-position: center center; mask-image: url(../../assets/icons/chevron.svg); - [dir='rtl'] & { + [dir="rtl"] & { transform: rotate(180deg); } @@ -183,7 +183,7 @@ } .toolbar-button--expand--down, -[dir='rtl'] .toolbar-button--expand--down { +[dir="rtl"] .toolbar-button--expand--down { &::after { transform: rotate(90deg); @@ -192,7 +192,7 @@ } } - &[aria-expanded='true'] { + &[aria-expanded="true"] { &::after { transform: rotate(-90deg); } @@ -286,7 +286,7 @@ --icon: url(../../assets/icons/user.svg); } -html:not([data-admin-toolbar='expanded']) { +html:not([data-admin-toolbar="expanded"]) { .toolbar-button--collapsible::after { display: none; } @@ -305,8 +305,6 @@ html:not([data-admin-toolbar='expanded']) { } /* Hides button's label while transitioning. */ -html[data-admin-toolbar-animating][data-admin-toolbar='expanded'] - .toolbar-button--collapsible - .toolbar-button__label { +html[data-admin-toolbar-animating][data-admin-toolbar="expanded"] .toolbar-button--collapsible .toolbar-button__label { display: none; } diff --git a/core/modules/navigation/css/components/toolbar-menu.pcss.css b/core/modules/navigation/css/components/toolbar-menu.pcss.css index ec780657c55f..70b17c0f7416 100644 --- a/core/modules/navigation/css/components/toolbar-menu.pcss.css +++ b/core/modules/navigation/css/components/toolbar-menu.pcss.css @@ -11,14 +11,14 @@ margin: 0; padding: 0; list-style-type: none; - gap: var(--admin-toolbar-space-4) + gap: var(--admin-toolbar-space-4); } [class*="toolbar-menu--level-"] { display: none; } -[data-toolbar-menu-trigger][aria-expanded='true'] + [class*="toolbar-menu--level-"] { +[data-toolbar-menu-trigger][aria-expanded="true"] + [class*="toolbar-menu--level-"] { display: grid; } @@ -29,7 +29,7 @@ .toolbar-menu__item--level-1 { border-radius: var(--admin-toolbar-space-8); - &:has(> [data-toolbar-menu-trigger][aria-expanded='true']) { + &:has(> [data-toolbar-menu-trigger][aria-expanded="true"]) { background: var(--admin-toolbar-color-gray-050); } } @@ -38,7 +38,7 @@ padding-block-end: var(--admin-toolbar-space-12); box-shadow: inset var(--admin-toolbar-space-4) 0 0 0 var(--admin-toolbar-color-gray-100); - [dir='rtl'] & { + [dir="rtl"] & { box-shadow: inset calc(-1 * var(--admin-toolbar-space-4)) 0 0 0 var(--admin-toolbar-color-gray-100); } } @@ -78,7 +78,7 @@ z-index: 1; inset-block-start: calc(50% - var(--admin-toolbar-space-8) / 2); inset-inline-start: calc(var(--admin-toolbar-space-4) * -0.5); - content: ''; + content: ""; border-radius: 50%; background-color: currentColor; inline-size: var(--admin-toolbar-space-8); @@ -112,7 +112,7 @@ &::after { flex-shrink: 0; margin-inline-start: auto; - content: ''; + content: ""; transition: transform var(--admin-toolbar-transition); transform: rotate(90deg); background-color: currentColor; @@ -123,7 +123,7 @@ mask-position: center center; mask-image: url(../../assets/icons/chevron.svg); - [dir='rtl'] & { + [dir="rtl"] & { transform: rotate(90deg); } @@ -133,11 +133,11 @@ } } - &[aria-expanded='true'] { + &[aria-expanded="true"] { &::after { transform: rotate(-90deg); - [dir='rtl'] & { + [dir="rtl"] & { transform: rotate(-90deg); } } diff --git a/core/modules/navigation/css/components/toolbar-popover.pcss.css b/core/modules/navigation/css/components/toolbar-popover.pcss.css index 0532e6176710..ecaca8bda872 100644 --- a/core/modules/navigation/css/components/toolbar-popover.pcss.css +++ b/core/modules/navigation/css/components/toolbar-popover.pcss.css @@ -1,4 +1,4 @@ -@import '../base/media-queries.pcss.css'; +@import "../base/media-queries.pcss.css"; .toolbar-popover { --safe-triangle-cursor-y: 100px; @@ -32,8 +32,10 @@ display: grid; overflow: auto; grid-auto-rows: max-content; - padding: var(--admin-toolbar-space-12) var(--admin-toolbar-space-16) var(--admin-toolbar-space-16) ; - transition: transform var(--admin-toolbar-transition), opacity var(--admin-toolbar-transition); + padding: var(--admin-toolbar-space-12) var(--admin-toolbar-space-16) var(--admin-toolbar-space-16); + transition: + transform var(--admin-toolbar-transition), + opacity var(--admin-toolbar-transition); transform: translateX(-100%); transform-origin: 0; opacity: 0; @@ -46,7 +48,7 @@ /* Hide the drop-shadow on the left side. */ clip-path: inset(0 -10rem 0 0); - [dir='rtl'] & { + [dir="rtl"] & { /* Hide the drop-shadow on the right side. */ clip-path: inset(0 0 0 -10rem); transform: translateX(0); @@ -57,9 +59,7 @@ padding-block-start: var(--admin-toolbar-space-16); transform: translateX(0); - filter: drop-shadow(0 0 72px rgba(0, 0, 0, 0.2)) - drop-shadow(0 0 8px rgba(0, 0, 0, 0.04)) - drop-shadow(0 0 40px rgba(0, 0, 0, 0.06)); + filter: drop-shadow(0 0 72px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 0 40px rgba(0, 0, 0, 0.06)); inline-size: var(--admin-toolbar-popover-width); inset-block-start: 0; inset-inline-start: 0; @@ -69,17 +69,12 @@ [data-toolbar-popover-safe-triangle] { position: fixed; display: none; - content: ''; + content: ""; inset: 0; - clip-path: polygon( - var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0), - var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0), - var(--safe-triangle-submenu-end-x, 0) max(var(--safe-triangle-submenu-end-y, 0), var(--safe-triangle-cursor-y, 0), 66vh) - ); + clip-path: polygon(var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0), var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0), var(--safe-triangle-submenu-end-x, 0) max(var(--safe-triangle-submenu-end-y, 0), var(--safe-triangle-cursor-y, 0), 66vh)); } -[data-toolbar-popover-control][aria-expanded='true'] - + [data-toolbar-popover-wrapper] { +[data-toolbar-popover-control][aria-expanded="true"] + [data-toolbar-popover-wrapper] { transform: translateX(0); opacity: 1; @@ -92,12 +87,8 @@ } } -[data-admin-toolbar='collapsed'] [data-toolbar-popover-wrapper] { - transform: translateX( - calc( - (16 * var(--admin-toolbar-rem) * -1) + var(--drupal-displace-offset-left) - ) - ); +[data-admin-toolbar="collapsed"] [data-toolbar-popover-wrapper] { + transform: translateX(calc((16 * var(--admin-toolbar-rem) * -1) + var(--drupal-displace-offset-left))); [dir="rtl"] & { transform: translateX(calc((16 * var(--admin-toolbar-rem)) + var(--drupal-displace-offset-right))); diff --git a/core/modules/navigation/css/components/tooltip.pcss.css b/core/modules/navigation/css/components/tooltip.pcss.css index 2b725c30aa88..7af2010c2f4f 100644 --- a/core/modules/navigation/css/components/tooltip.pcss.css +++ b/core/modules/navigation/css/components/tooltip.pcss.css @@ -9,7 +9,7 @@ z-index: var(--admin-toolbar-z-index-tooltip); display: none; padding-inline: var(--admin-toolbar-space-12); - padding-block: var(--admin-toolbar-space-8) ; + padding-block: var(--admin-toolbar-space-8); color: var(--admin-toolbar-color-white); border-radius: var(--admin-toolbar-space-8); background-color: var(--admin-toolbar-color-gray-990); @@ -23,6 +23,6 @@ display: block; } -[data-admin-toolbar='expanded'] [data-drupal-tooltip]:hover + .toolbar-block__title-tooltip { +[data-admin-toolbar="expanded"] [data-drupal-tooltip]:hover + .toolbar-block__title-tooltip { display: none; } diff --git a/core/modules/navigation/css/components/top-bar.pcss.css b/core/modules/navigation/css/components/top-bar.pcss.css index 22f38c054c4c..7fb795c1db4c 100644 --- a/core/modules/navigation/css/components/top-bar.pcss.css +++ b/core/modules/navigation/css/components/top-bar.pcss.css @@ -22,7 +22,9 @@ width: 100vw; padding-block: var(--admin-toolbar-space-12); padding-inline: calc(var(--drupal-displace-offset-left, var(--admin-toolbar-sidebar-width)) + var(--admin-toolbar-space-32)) var(--admin-toolbar-space-32); - box-shadow: 0 0 40px 0 var(--admin-toolbar-color-shadow-6), 0 4px 4px 0 var(--admin-toolbar-color-shadow-8); + box-shadow: + 0 0 40px 0 var(--admin-toolbar-color-shadow-6), + 0 4px 4px 0 var(--admin-toolbar-color-shadow-8); [dir="rtl"] & { padding-inline: calc(var(--drupal-displace-offset-right, var(--admin-toolbar-sidebar-width)) + var(--admin-toolbar-space-32)) var(--admin-toolbar-space-32); diff --git a/core/modules/node/css/node.module.css b/core/modules/node/css/node.module.css index c564633691c3..60a4f30a7d76 100644 --- a/core/modules/node/css/node.module.css +++ b/core/modules/node/css/node.module.css @@ -13,10 +13,7 @@ } /* Wide screens */ -@media - screen and (min-width: 780px), - (orientation: landscape) and (min-device-height: 780px) { - +@media screen and (min-width: 780px), (orientation: landscape) and (min-device-height: 780px) { .layout-region-node-main, .layout-region-node-footer { float: left; /* LTR */ @@ -63,9 +60,7 @@ * toolbar is on, we need to suppress layout for the original media width + the * toolbar width (240px). In this case, 240px + 780px. */ -@media - screen and (max-width: 1020px) { - +@media screen and (max-width: 1020px) { .toolbar-vertical.toolbar-tray-open .layout-region-node-main, .toolbar-vertical.toolbar-tray-open .layout-region-node-footer, .toolbar-vertical.toolbar-tray-open .layout-region-node-secondary { diff --git a/core/modules/system/css/system.admin.css b/core/modules/system/css/system.admin.css index 15232c2114ed..ea883e435464 100644 --- a/core/modules/system/css/system.admin.css +++ b/core/modules/system/css/system.admin.css @@ -20,7 +20,7 @@ margin: 0 2.5em; } .layout-column { - float: left; /* LTR */ + float: left; /* LTR */ box-sizing: border-box; } [dir="rtl"] .layout-column { @@ -371,7 +371,7 @@ small .admin-link::after { margin: 0; padding: 0 0.7em; list-style-type: none; - border-right: 1px solid #cdcdcd; /* LTR */ + border-right: 1px solid #cdcdcd; /* LTR */ } [dir="rtl"] .theme-selector .operations li { float: right; diff --git a/core/modules/views_ui/css/views_ui.admin.css b/core/modules/views_ui/css/views_ui.admin.css index aca14d88bf69..cea5388c5087 100644 --- a/core/modules/views_ui/css/views_ui.admin.css +++ b/core/modules/views_ui/css/views_ui.admin.css @@ -147,7 +147,8 @@ margin-bottom: 2em; } -@media screen and (min-width: 45em) { /* 720px */ +@media screen and (min-width: 45em) { + /* 720px */ .views-display-columns > * { float: left; /* LTR */ width: 32%; diff --git a/core/modules/views_ui/css/views_ui.admin.theme.css b/core/modules/views_ui/css/views_ui.admin.theme.css index 2d8fe5081f9b..529e8fa77c63 100644 --- a/core/modules/views_ui/css/views_ui.admin.theme.css +++ b/core/modules/views_ui/css/views_ui.admin.theme.css @@ -36,7 +36,9 @@ .views-admin a.icon { border: 1px solid #ddd; border-radius: 4px; - background: linear-gradient(-90deg, #fff 0, #e8e8e8 100%) no-repeat, repeat-y; + background: + linear-gradient(-90deg, #fff 0, #e8e8e8 100%) no-repeat, + repeat-y; box-shadow: 0 0 0 rgba(0, 0, 0, 0.3333) inset; } .views-admin a.icon:hover { @@ -78,28 +80,40 @@ background-position: center 3px; } .views-admin a.icon.add { - background-position: center 3px, left top; /* LTR */ + background-position: + center 3px, + left top; /* LTR */ } [dir="rtl"] .views-admin a.icon.add { - background-position: center 3px, right top; + background-position: + center 3px, + right top; } .views-admin .icon.delete { background-position: center -52px; } .views-admin a.icon.delete { - background-position: center -52px, left top; /* LTR */ + background-position: + center -52px, + left top; /* LTR */ } [dir="rtl"] .views-admin a.icon.delete { - background-position: center -52px, right top; + background-position: + center -52px, + right top; } .views-admin .icon.rearrange { background-position: center -111px; } .views-admin a.icon.rearrange { - background-position: center -111px, left top; /* LTR */ + background-position: + center -111px, + left top; /* LTR */ } [dir="rtl"] .views-admin a.icon.rearrange { - background-position: center -111px, right top; + background-position: + center -111px, + right top; } .views-displays .tabs a:hover > .icon.add { background-position: center -25px; @@ -484,7 +498,8 @@ td.group-title { vertical-align: top; } -@media screen and (min-width: 45em) { /* 720px */ +@media screen and (min-width: 45em) { + /* 720px */ .view-preview-form .form-type-textfield .description { white-space: nowrap; } diff --git a/core/package.json b/core/package.json index 60ff109d15c8..6b7b9b0c059a 100644 --- a/core/package.json +++ b/core/package.json @@ -94,6 +94,7 @@ "stylelint-config-standard": "^34.0.0", "stylelint-formatter-gitlab": "^1.0.2", "stylelint-order": "^6.0.3", + "stylelint-prettier": "^4.1.0", "tabbable": "^6.1.2", "terser": "^5.19.0", "terser-webpack-plugin": "^5.3.9", diff --git a/core/profiles/demo_umami/themes/umami/components/badge/badge.css b/core/profiles/demo_umami/themes/umami/components/badge/badge.css index e5488dd15230..1f30e5021cb3 100644 --- a/core/profiles/demo_umami/themes/umami/components/badge/badge.css +++ b/core/profiles/demo_umami/themes/umami/components/badge/badge.css @@ -5,7 +5,8 @@ } /* Large */ -@media screen and (min-width: 60rem) { /* 960px */ +@media screen and (min-width: 60rem) { + /* 960px */ .umami-badge__container { flex-direction: column; gap: 0; @@ -23,7 +24,8 @@ } /* Large */ -@media screen and (min-width: 60rem) { /* 960px */ +@media screen and (min-width: 60rem) { + /* 960px */ .umami-badge__icon { align-items: start; width: 56px; diff --git a/core/profiles/demo_umami/themes/umami/components/banner/banner.css b/core/profiles/demo_umami/themes/umami/components/banner/banner.css index 9558b818e7cd..b60dd0b5b9cc 100644 --- a/core/profiles/demo_umami/themes/umami/components/banner/banner.css +++ b/core/profiles/demo_umami/themes/umami/components/banner/banner.css @@ -17,7 +17,8 @@ } /* Medium */ -@media screen and (min-width: 48rem) { /* 768px */ +@media screen and (min-width: 48rem) { + /* 768px */ .banner { position: relative; /* Anchor absolutely positioned background image. */ background-color: #464646; @@ -51,7 +52,8 @@ } } /* Large */ -@media screen and (min-width: 60rem) { /* 960px */ +@media screen and (min-width: 60rem) { + /* 960px */ .banner__content { max-width: 41%; } @@ -60,7 +62,8 @@ } } /* Extra large + side margins */ -@media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */ +@media screen and (min-width: 80rem) { + /* 1200px (large) + 80px (side margins) = 1280px */ .banner__inner { padding: 0; } diff --git a/core/profiles/demo_umami/themes/umami/components/card/card.css b/core/profiles/demo_umami/themes/umami/components/card/card.css index 27233534d87f..aadfed67fa23 100644 --- a/core/profiles/demo_umami/themes/umami/components/card/card.css +++ b/core/profiles/demo_umami/themes/umami/components/card/card.css @@ -62,4 +62,4 @@ .umami-card .field--name-field-media-image img { display: block; width: 100%; -} \ No newline at end of file +} diff --git a/core/profiles/demo_umami/themes/umami/components/footer-block/footer-block.css b/core/profiles/demo_umami/themes/umami/components/footer-block/footer-block.css index 6cae3abc1cbe..f5f222137383 100644 --- a/core/profiles/demo_umami/themes/umami/components/footer-block/footer-block.css +++ b/core/profiles/demo_umami/themes/umami/components/footer-block/footer-block.css @@ -44,4 +44,4 @@ .footer-block__wrapper { flex-direction: row; } -} \ No newline at end of file +} diff --git a/core/profiles/demo_umami/themes/umami/components/header/header.css b/core/profiles/demo_umami/themes/umami/components/header/header.css index c5fa07a4a8d2..43de9a44d94a 100644 --- a/core/profiles/demo_umami/themes/umami/components/header/header.css +++ b/core/profiles/demo_umami/themes/umami/components/header/header.css @@ -7,14 +7,16 @@ } /* Medium */ -@media screen and (min-width: 48rem) { /* 768px */ +@media screen and (min-width: 48rem) { + /* 768px */ .umami-header { padding-top: 0; } } /* Extra large + side margins */ -@media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */ +@media screen and (min-width: 80rem) { + /* 1200px (large) + 80px (side margins) = 1280px */ .umami-header { padding: 0; } diff --git a/core/profiles/demo_umami/themes/umami/components/read-more/read-more.css b/core/profiles/demo_umami/themes/umami/components/read-more/read-more.css index 33110078bfda..cfce56c76896 100644 --- a/core/profiles/demo_umami/themes/umami/components/read-more/read-more.css +++ b/core/profiles/demo_umami/themes/umami/components/read-more/read-more.css @@ -13,7 +13,7 @@ border-bottom: 1px solid transparent; background-color: inherit; } -[dir=rtl] .read-more { +[dir="rtl"] .read-more { padding-right: unset; padding-left: 20px; } @@ -32,7 +32,7 @@ height: 14px; margin-top: -7px; } -[dir=rtl] .read-more__icon { +[dir="rtl"] .read-more__icon { right: unset; left: 0; transform: rotate(180deg); diff --git a/core/profiles/demo_umami/themes/umami/css/base.css b/core/profiles/demo_umami/themes/umami/css/base.css index eac142c1cb34..ed4f5ffa337c 100644 --- a/core/profiles/demo_umami/themes/umami/css/base.css +++ b/core/profiles/demo_umami/themes/umami/css/base.css @@ -103,14 +103,16 @@ blockquote p:last-child { margin-bottom: 0; } /* Small */ -@media screen and (min-width: 30rem) { /* 480px */ +@media screen and (min-width: 30rem) { + /* 480px */ blockquote { margin: 0 1.5rem 1.28rem; padding: 1.5rem; } } /* Medium */ -@media screen and (min-width: 40rem) { /* 640px */ +@media screen and (min-width: 40rem) { + /* 640px */ blockquote { margin: 0 2.5rem 1.28rem; padding: 3rem; @@ -138,7 +140,8 @@ h1 { line-height: 1.2; } /* Large */ -@media screen and (min-width: 60rem) { /* 960px */ +@media screen and (min-width: 60rem) { + /* 960px */ h1 { font-size: 2.369rem; } @@ -147,11 +150,12 @@ h1 { h2 { margin: 0 0 0.7rem 0; font-family: "Scope One", Georgia, serif; - font-size: 1.266rem; /* +2 based on 1.125 modular scale (major second) */ + font-size: 1.266rem; /* +2 based on 1.125 modular scale (major second) */ line-height: 1.2; } /* Large */ -@media screen and (min-width: 60rem) { /* 960px */ +@media screen and (min-width: 60rem) { + /* 960px */ h2 { font-size: 1.77rem; } @@ -161,10 +165,11 @@ h3 { margin: 0 0 0.96rem 0; font-family: "Scope One", Georgia, serif; font-size: 1.125rem; - line-height: 1.2;/* +1 based on 1.125 modular scale (major second) */ + line-height: 1.2; /* +1 based on 1.125 modular scale (major second) */ } /* Large */ -@media screen and (min-width: 60rem) { /* 960px */ +@media screen and (min-width: 60rem) { + /* 960px */ h3 { font-size: 1.5rem; } @@ -177,7 +182,8 @@ h4 { line-height: 1.2; } /* Large */ -@media screen and (min-width: 60rem) { /* 960px */ +@media screen and (min-width: 60rem) { + /* 960px */ h4 { font-size: 1.33rem; } @@ -190,7 +196,8 @@ h5 { line-height: 1.2; } /* Large */ -@media screen and (min-width: 60rem) { /* 960px */ +@media screen and (min-width: 60rem) { + /* 960px */ h5 { font-size: 1.25rem; } @@ -203,7 +210,8 @@ h6 { line-height: 1.2; } /* Large */ -@media screen and (min-width: 60rem) { /* 960px */ +@media screen and (min-width: 60rem) { + /* 960px */ h6 { font-size: 1rem; } diff --git a/core/profiles/demo_umami/themes/umami/css/classy/components/dialog.css b/core/profiles/demo_umami/themes/umami/css/classy/components/dialog.css index c57a6677459c..ed9d202bca87 100644 --- a/core/profiles/demo_umami/themes/umami/css/classy/components/dialog.css +++ b/core/profiles/demo_umami/themes/umami/css/classy/components/dialog.css @@ -13,7 +13,8 @@ background: #fff; } -@media all and (max-width: 48em) { /* 768px */ +@media all and (max-width: 48em) { + /* 768px */ .ui-dialog { width: 92% !important; } diff --git a/core/profiles/demo_umami/themes/umami/css/classy/components/progress.css b/core/profiles/demo_umami/themes/umami/css/classy/components/progress.css index 1579776f5258..f8561b2eaf60 100644 --- a/core/profiles/demo_umami/themes/umami/css/classy/components/progress.css +++ b/core/profiles/demo_umami/themes/umami/css/classy/components/progress.css @@ -23,9 +23,7 @@ border: 1px #07629a solid; border-radius: 10em; background: #057ec9; - background-image: - linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)), - linear-gradient(to right bottom, #0094f0 0%, #0094f0 25%, #007ecc 25%, #007ecc 50%, #0094f0 50%, #0094f0 75%, #0094f0 100%); + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)), linear-gradient(to right bottom, #0094f0 0%, #0094f0 25%, #007ecc 25%, #007ecc 50%, #0094f0 50%, #0094f0 75%, #0094f0 100%); background-size: 40px 40px; } [dir="rtl"] .progress__bar { @@ -47,6 +45,14 @@ * Progress bar animations. */ @keyframes animate-stripes { - 0% { background-position: 0 0, 0 0; } - 100% { background-position: 0 0, -80px 0; } + 0% { + background-position: + 0 0, + 0 0; + } + 100% { + background-position: + 0 0, + -80px 0; + } } diff --git a/core/profiles/demo_umami/themes/umami/css/components/blocks/help/help.css b/core/profiles/demo_umami/themes/umami/css/components/blocks/help/help.css index daab503b28b4..62bbd1203653 100644 --- a/core/profiles/demo_umami/themes/umami/css/components/blocks/help/help.css +++ b/core/profiles/demo_umami/themes/umami/css/components/blocks/help/help.css @@ -19,7 +19,7 @@ background-repeat: no-repeat; background-position: left 4px; /* LTR */ } -[dir=rtl] .block-help__container { +[dir="rtl"] .block-help__container { padding-right: 24px; padding-left: 0; background-position: right 4px; diff --git a/core/profiles/demo_umami/themes/umami/css/components/blocks/quicklinks/quicklinks.css b/core/profiles/demo_umami/themes/umami/css/components/blocks/quicklinks/quicklinks.css index ee73689f74cb..383b90a34453 100644 --- a/core/profiles/demo_umami/themes/umami/css/components/blocks/quicklinks/quicklinks.css +++ b/core/profiles/demo_umami/themes/umami/css/components/blocks/quicklinks/quicklinks.css @@ -7,21 +7,24 @@ background-color: #fff; } -@media screen and (min-width: 60rem) { /* 960px */ +@media screen and (min-width: 60rem) { + /* 960px */ .quicklinks { padding: 2rem 0; } } /* Small */ -@media screen and (min-width: 30rem) { /* 480px */ +@media screen and (min-width: 30rem) { + /* 480px */ .quicklinks__content { display: flex; flex-wrap: wrap; } } /* Large */ -@media screen and (min-width: 60rem) { /* 960px */ +@media screen and (min-width: 60rem) { + /* 960px */ .quicklinks__content { flex-wrap: nowrap; } @@ -34,7 +37,8 @@ text-align: center; } /* Small */ -@media screen and (min-width: 30rem) { /* 480px */ +@media screen and (min-width: 30rem) { + /* 480px */ .quicklinks__col { flex-basis: 50%; padding-top: 1rem; @@ -56,13 +60,15 @@ display: none; } /* Small */ -@media screen and (min-width: 30rem) { /* 480px */ +@media screen and (min-width: 30rem) { + /* 480px */ .quicklinks__col:nth-child(3)::after { display: none; } } /* Large */ -@media screen and (min-width: 60rem) { /* 960px */ +@media screen and (min-width: 60rem) { + /* 960px */ .quicklinks__col::after { position: absolute; top: 0; diff --git a/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search-results.css b/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search-results.css index 006b3216af1b..e80898f0acef 100644 --- a/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search-results.css +++ b/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search-results.css @@ -142,7 +142,7 @@ background: #fff; } /* Without this rule, another RTL rule from item-list.css will break the design */ -[dir=rtl] .search-results li { +[dir="rtl"] .search-results li { margin: 0 0 1rem 0; } diff --git a/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search.css b/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search.css index 834da8cef04d..8484effbcbc0 100644 --- a/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search.css +++ b/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search.css @@ -59,7 +59,7 @@ border-top-left-radius: 3px; /* LTR */ border-bottom-right-radius: 3px; /* LTR */ } -[dir=rtl] .search-block-form .form-type-search { +[dir="rtl"] .search-block-form .form-type-search { border-top-left-radius: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; @@ -86,10 +86,10 @@ .search-block-form .form-search:focus { border: 2px solid #008068; - border-top-left-radius: 2px; /* LTR */ + border-top-left-radius: 2px; /* LTR */ border-bottom-left-radius: 2px; /* LTR */ } -[dir=rtl] .search-block-form .form-search:focus { +[dir="rtl"] .search-block-form .form-search:focus { border-top-left-radius: 0; border-top-right-radius: 2px; border-bottom-right-radius: 2px; @@ -114,7 +114,7 @@ border-top-right-radius: 3px; /* LTR */ border-bottom-right-radius: 3px; /* LTR */ } -[dir=rtl] .search-block-form .form-actions { +[dir="rtl"] .search-block-form .form-actions { border-right: none; border-left: 1px solid #dbdbdb; border-top-left-radius: 3px; @@ -128,7 +128,9 @@ .search-block-form .form-submit { margin: 0; padding: 0.6em 1.25em 0.4em; - transition: background-color 0.5s ease, border 0.5s ease; + transition: + background-color 0.5s ease, + border 0.5s ease; color: #000; border: 2px solid #fff; background-color: #fff; @@ -140,7 +142,7 @@ border-top-left-radius: 0; /* LTR */ border-bottom-left-radius: 0; /* LTR */ } - [dir=rtl] .search-block-form .form-submit { + [dir="rtl"] .search-block-form .form-submit { border-top-left-radius: 3px; border-top-right-radius: 0; border-bottom-right-radius: 0; diff --git a/core/profiles/demo_umami/themes/umami/css/components/fields/recipe-instruction.css b/core/profiles/demo_umami/themes/umami/css/components/fields/recipe-instruction.css index d606aafa0f90..8b0095121a08 100644 --- a/core/profiles/demo_umami/themes/umami/css/components/fields/recipe-instruction.css +++ b/core/profiles/demo_umami/themes/umami/css/components/fields/recipe-instruction.css @@ -31,7 +31,7 @@ list-style: none; counter-increment: step-counter; } -[dir=rtl] .field--name-field-recipe-instruction ol > li { +[dir="rtl"] .field--name-field-recipe-instruction ol > li { padding: 0 2.5em 0.6em 0; } .field--name-field-recipe-instruction ol > li::before { @@ -42,7 +42,7 @@ color: #cc2a00; font-size: 1.5rem; } -[dir=rtl] .field--name-field-recipe-instruction ol > li::before { +[dir="rtl"] .field--name-field-recipe-instruction ol > li::before { right: 0; left: auto; } diff --git a/core/profiles/demo_umami/themes/umami/css/components/forms/contact.css b/core/profiles/demo_umami/themes/umami/css/components/forms/contact.css index 443f0b466198..71f2ed52facd 100644 --- a/core/profiles/demo_umami/themes/umami/css/components/forms/contact.css +++ b/core/profiles/demo_umami/themes/umami/css/components/forms/contact.css @@ -8,13 +8,15 @@ margin: auto auto 1rem; } -@media screen and (min-width: 30rem) { /* 480px */ +@media screen and (min-width: 30rem) { + /* 480px */ .contact-form { margin-bottom: 2rem; } } -@media screen and (min-width: 60rem) { /* 960px */ +@media screen and (min-width: 60rem) { + /* 960px */ .contact-form { margin-bottom: 3rem; } diff --git a/core/profiles/demo_umami/themes/umami/css/components/messages/messages.css b/core/profiles/demo_umami/themes/umami/css/components/messages/messages.css index 6c057d4fc781..c911bde630c3 100644 --- a/core/profiles/demo_umami/themes/umami/css/components/messages/messages.css +++ b/core/profiles/demo_umami/themes/umami/css/components/messages/messages.css @@ -21,7 +21,7 @@ padding-left: 24px; /* LTR */ background: no-repeat 0 center; /* LTR */ } -[dir=rtl] .messages__content { +[dir="rtl"] .messages__content { padding-right: 24px; padding-left: 0; background-position: right; diff --git a/core/profiles/demo_umami/themes/umami/css/components/navigation/breadcrumbs/breadcrumbs.css b/core/profiles/demo_umami/themes/umami/css/components/navigation/breadcrumbs/breadcrumbs.css index 896a2978c0e1..bd71fa51172a 100644 --- a/core/profiles/demo_umami/themes/umami/css/components/navigation/breadcrumbs/breadcrumbs.css +++ b/core/profiles/demo_umami/themes/umami/css/components/navigation/breadcrumbs/breadcrumbs.css @@ -9,7 +9,8 @@ display: inline-block; } /* Extra large + side margins */ -@media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */ +@media screen and (min-width: 80rem) { + /* 1200px (large) + 80px (side margins) = 1280px */ .breadcrumb { padding-right: 0; padding-left: 0; diff --git a/core/profiles/demo_umami/themes/umami/css/components/regions/bottom/bottom.css b/core/profiles/demo_umami/themes/umami/css/components/regions/bottom/bottom.css index 646c534d1487..0c10dce7b7b9 100644 --- a/core/profiles/demo_umami/themes/umami/css/components/regions/bottom/bottom.css +++ b/core/profiles/demo_umami/themes/umami/css/components/regions/bottom/bottom.css @@ -9,7 +9,8 @@ background: #fff; } /* Extra large + side margins */ -@media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */ +@media screen and (min-width: 80rem) { + /* 1200px (large) + 80px (side margins) = 1280px */ .layout-bottom { padding: 2rem 0; } diff --git a/core/profiles/demo_umami/themes/umami/css/components/regions/footer/footer.css b/core/profiles/demo_umami/themes/umami/css/components/regions/footer/footer.css index 7b792b5da59d..aad91b8bbcae 100644 --- a/core/profiles/demo_umami/themes/umami/css/components/regions/footer/footer.css +++ b/core/profiles/demo_umami/themes/umami/css/components/regions/footer/footer.css @@ -19,7 +19,8 @@ gap: 1.28rem; } /* Large */ -@media screen and (min-width: 60rem) { /* 960px */ +@media screen and (min-width: 60rem) { + /* 960px */ .footer { text-align: left; /* LTR */ } @@ -33,7 +34,8 @@ } } /* Extra large + side margins */ -@media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */ +@media screen and (min-width: 80rem) { + /* 1200px (large) + 80px (side margins) = 1280px */ .footer { padding: 2rem 0; } diff --git a/core/profiles/demo_umami/themes/umami/css/components/regions/highlighted/highlighted.css b/core/profiles/demo_umami/themes/umami/css/components/regions/highlighted/highlighted.css index 24a7b210f3ff..8ca089e3f38f 100644 --- a/core/profiles/demo_umami/themes/umami/css/components/regions/highlighted/highlighted.css +++ b/core/profiles/demo_umami/themes/umami/css/components/regions/highlighted/highlighted.css @@ -12,7 +12,8 @@ padding: 0 4%; } /* Extra large + side margins */ -@media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */ +@media screen and (min-width: 80rem) { + /* 1200px (large) + 80px (side margins) = 1280px */ .region-highlighted { padding: 0; } diff --git a/core/profiles/demo_umami/themes/umami/css/components/regions/pre-header/pre-header.css b/core/profiles/demo_umami/themes/umami/css/components/regions/pre-header/pre-header.css index 1dbed18cc9a6..2020a0664025 100644 --- a/core/profiles/demo_umami/themes/umami/css/components/regions/pre-header/pre-header.css +++ b/core/profiles/demo_umami/themes/umami/css/components/regions/pre-header/pre-header.css @@ -15,14 +15,16 @@ border-bottom: 1px solid #e6eee0; } /* Medium */ -@media screen and (min-width: 48rem) { /* 768px */ +@media screen and (min-width: 48rem) { + /* 768px */ .region-pre-header { padding-top: 0; padding-bottom: 0; } } /* Extra large + side margins */ -@media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */ +@media screen and (min-width: 80rem) { + /* 1200px (large) + 80px (side margins) = 1280px */ .region-pre-header { padding: 0; } diff --git a/core/profiles/demo_umami/themes/umami/css/components/regions/tabs/tabs.css b/core/profiles/demo_umami/themes/umami/css/components/regions/tabs/tabs.css index c68fe45c1380..9bda7b650e6c 100644 --- a/core/profiles/demo_umami/themes/umami/css/components/regions/tabs/tabs.css +++ b/core/profiles/demo_umami/themes/umami/css/components/regions/tabs/tabs.css @@ -11,7 +11,8 @@ padding: 0 4%; } /* Extra large + side margins */ -@media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */ +@media screen and (min-width: 80rem) { + /* 1200px (large) + 80px (side margins) = 1280px */ .region-tabs { padding: 0; } diff --git a/core/profiles/demo_umami/themes/umami/css/components/views/frontpage.css b/core/profiles/demo_umami/themes/umami/css/components/views/frontpage.css index 3768e9d25cae..308da728e93d 100644 --- a/core/profiles/demo_umami/themes/umami/css/components/views/frontpage.css +++ b/core/profiles/demo_umami/themes/umami/css/components/views/frontpage.css @@ -12,7 +12,8 @@ line-height: 1.2; } /* Large */ -@media screen and (min-width: 60em) { /* 960px */ +@media screen and (min-width: 60em) { + /* 960px */ .view-frontpage .view-header { margin-bottom: 3rem; padding-right: 2.37rem; diff --git a/core/profiles/demo_umami/themes/umami/css/components/views/promoted-items.css b/core/profiles/demo_umami/themes/umami/css/components/views/promoted-items.css index a3931be57750..45780cec054c 100644 --- a/core/profiles/demo_umami/themes/umami/css/components/views/promoted-items.css +++ b/core/profiles/demo_umami/themes/umami/css/components/views/promoted-items.css @@ -7,14 +7,16 @@ padding: 1rem 0 2rem; } /* Small */ -@media screen and (min-width: 30rem) { /* 480px */ +@media screen and (min-width: 30rem) { + /* 480px */ .view-promoted-items--single { padding-top: 2rem; padding-bottom: 3rem; } } /* Large */ -@media screen and (min-width: 60rem) { /* 960px */ +@media screen and (min-width: 60rem) { + /* 960px */ .view-promoted-items--single { display: flex; } @@ -28,13 +30,14 @@ } /* Large */ -@media screen and (min-width: 60rem) { /* 960px */ +@media screen and (min-width: 60rem) { + /* 960px */ .view-promoted-items--single > .view-content { display: flex; flex: 0 0 50%; margin-right: 14px; /* LTR */ } - [dir=rtl] .view-promoted-items--single > .view-content { + [dir="rtl"] .view-promoted-items--single > .view-content { margin-right: 0; margin-left: 14px; } @@ -44,54 +47,61 @@ margin-bottom: 14px; } /* Small */ -@media screen and (min-width: 30rem) { /* 480px */ +@media screen and (min-width: 30rem) { + /* 480px */ .view-promoted-items--single > .view-content .views-row { display: flex; margin-bottom: 28px; } } /* Large */ -@media screen and (min-width: 60rem) { /* 960px */ +@media screen and (min-width: 60rem) { + /* 960px */ .view-promoted-items--single > .view-content .views-row { margin-bottom: 0; } } /* Large */ -@media screen and (min-width: 60rem) { /* 960px */ +@media screen and (min-width: 60rem) { + /* 960px */ .view-promoted-items--single > .attachment-after { display: flex; margin-left: 14px; /* LTR */ } - [dir=rtl] .view-promoted-items--single > .attachment-after { + [dir="rtl"] .view-promoted-items--single > .attachment-after { margin-right: 14px; margin-left: 0; } } /* Large */ -@media screen and (min-width: 60rem) { /* 960px */ +@media screen and (min-width: 60rem) { + /* 960px */ .view-promoted-items--single .attachment-after .views-element-container { display: flex; } } /* Large */ -@media screen and (min-width: 60rem) { /* 960px */ +@media screen and (min-width: 60rem) { + /* 960px */ .view-promoted-items--single .attachment-after .view-promoted-items--double { display: flex; } } /* Small */ -@media screen and (min-width: 30rem) { /* 480px */ +@media screen and (min-width: 30rem) { + /* 480px */ .view-promoted-items--double { overflow-x: hidden; } } /* Small */ -@media screen and (min-width: 30rem) { /* 480px */ +@media screen and (min-width: 30rem) { + /* 480px */ .view-promoted-items--double .view-content { display: flex; margin: 0 -14px; @@ -99,7 +109,8 @@ } /* Small */ -@media screen and (min-width: 30rem) { /* 480px */ +@media screen and (min-width: 30rem) { + /* 480px */ .view-promoted-items--double .views-row { display: flex; width: calc(50% - 28px); @@ -114,7 +125,8 @@ padding: 0 4%; } /* Extra large + side margins */ -@media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */ +@media screen and (min-width: 80rem) { + /* 1200px (large) + 80px (side margins) = 1280px */ .path-frontpage .block-views-blockpromoted-items-block-1 { padding: 0; } diff --git a/core/profiles/demo_umami/themes/umami/css/layout/grid-3.css b/core/profiles/demo_umami/themes/umami/css/layout/grid-3.css index dee1559c1279..3dcd3fe04f87 100644 --- a/core/profiles/demo_umami/themes/umami/css/layout/grid-3.css +++ b/core/profiles/demo_umami/themes/umami/css/layout/grid-3.css @@ -7,7 +7,8 @@ margin-bottom: 28px; } /* Small */ -@media screen and (min-width: 30em) { /* 480px */ +@media screen and (min-width: 30em) { + /* 480px */ .grid--3 { overflow-x: hidden; } @@ -26,7 +27,8 @@ } } /* Large */ -@media screen and (min-width: 60em) { /* 960px */ +@media screen and (min-width: 60em) { + /* 960px */ .grid--3 .views-row { flex-basis: calc(33.3% - 28px); flex-grow: 0; diff --git a/core/profiles/demo_umami/themes/umami/css/layout/grid-4.css b/core/profiles/demo_umami/themes/umami/css/layout/grid-4.css index 3dd277f62dda..408ef2163e94 100644 --- a/core/profiles/demo_umami/themes/umami/css/layout/grid-4.css +++ b/core/profiles/demo_umami/themes/umami/css/layout/grid-4.css @@ -7,7 +7,8 @@ margin-bottom: 28px; } /* Small */ -@media screen and (min-width: 30em) { /* 480px */ +@media screen and (min-width: 30em) { + /* 480px */ .grid--4 { overflow-x: hidden; } @@ -26,7 +27,8 @@ } } /* Large */ -@media screen and (min-width: 60em) { /* 960px */ +@media screen and (min-width: 60em) { + /* 960px */ .grid--4 .views-row { flex-basis: calc(25% - 28px); flex-grow: 0; diff --git a/core/profiles/demo_umami/themes/umami/css/layout/layout-2-col.css b/core/profiles/demo_umami/themes/umami/css/layout/layout-2-col.css index 3ba52f7599ec..c78ddb28ce3e 100644 --- a/core/profiles/demo_umami/themes/umami/css/layout/layout-2-col.css +++ b/core/profiles/demo_umami/themes/umami/css/layout/layout-2-col.css @@ -3,7 +3,8 @@ * This file is used to create the layout when the theme has 2 columns. */ /* Large */ -@media screen and (min-width: 60rem) { /* 960px */ +@media screen and (min-width: 60rem) { + /* 960px */ .two-columns .main { display: flex; flex-wrap: wrap; diff --git a/core/profiles/demo_umami/themes/umami/css/layout/layout.css b/core/profiles/demo_umami/themes/umami/css/layout/layout.css index 992803fc039f..eb95145f335f 100644 --- a/core/profiles/demo_umami/themes/umami/css/layout/layout.css +++ b/core/profiles/demo_umami/themes/umami/css/layout/layout.css @@ -16,7 +16,8 @@ padding: 0 4%; } /* Extra large + side margins */ -@media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */ +@media screen and (min-width: 80rem) { + /* 1200px (large) + 80px (side margins) = 1280px */ .main { padding: 0; } diff --git a/core/profiles/demo_umami/themes/umami/layouts/fourcol_section/fourcol_section.css b/core/profiles/demo_umami/themes/umami/layouts/fourcol_section/fourcol_section.css index 8112681a05af..eb22ed840012 100644 --- a/core/profiles/demo_umami/themes/umami/layouts/fourcol_section/fourcol_section.css +++ b/core/profiles/demo_umami/themes/umami/layouts/fourcol_section/fourcol_section.css @@ -12,7 +12,8 @@ flex: 0 1 100%; } /* Medium */ -@media screen and (min-width: 48em) { /* 768px */ +@media screen and (min-width: 48em) { + /* 768px */ .layout--fourcol-section { margin-right: -1.5%; margin-left: -1.5%; @@ -24,7 +25,8 @@ } } /* Large */ -@media screen and (min-width: 60em) { /* 768px */ +@media screen and (min-width: 60em) { + /* 768px */ .layout--fourcol-section > .layout__region { flex: 0 1 22%; } diff --git a/core/profiles/demo_umami/themes/umami/layouts/oneplusfourgrid_section/oneplusfourgrid_section.css b/core/profiles/demo_umami/themes/umami/layouts/oneplusfourgrid_section/oneplusfourgrid_section.css index baaaf21bcf64..95cfed37cad3 100644 --- a/core/profiles/demo_umami/themes/umami/layouts/oneplusfourgrid_section/oneplusfourgrid_section.css +++ b/core/profiles/demo_umami/themes/umami/layouts/oneplusfourgrid_section/oneplusfourgrid_section.css @@ -19,7 +19,8 @@ } /* Large */ -@media screen and (min-width: 60rem) { /* 960px */ +@media screen and (min-width: 60rem) { + /* 960px */ .layout--oneplusfourgrid-section { margin-right: -1.5%; margin-left: -1.5%; diff --git a/core/profiles/demo_umami/themes/umami/layouts/threecol_section/threecol_section.css b/core/profiles/demo_umami/themes/umami/layouts/threecol_section/threecol_section.css index fca47fec7c57..c47bbbee5a28 100644 --- a/core/profiles/demo_umami/themes/umami/layouts/threecol_section/threecol_section.css +++ b/core/profiles/demo_umami/themes/umami/layouts/threecol_section/threecol_section.css @@ -12,7 +12,8 @@ flex: 0 1 100%; } /* Medium */ -@media screen and (min-width: 48em) { /* 768px */ +@media screen and (min-width: 48em) { + /* 768px */ .layout--threecol-section { margin-right: -1.5%; margin-left: -1.5%; diff --git a/core/profiles/demo_umami/themes/umami/layouts/twocol_section/twocol_section.css b/core/profiles/demo_umami/themes/umami/layouts/twocol_section/twocol_section.css index 74a7c99dfd82..79d6ad06c374 100644 --- a/core/profiles/demo_umami/themes/umami/layouts/twocol_section/twocol_section.css +++ b/core/profiles/demo_umami/themes/umami/layouts/twocol_section/twocol_section.css @@ -12,7 +12,8 @@ flex: 0 1 100%; } /* Medium */ -@media screen and (min-width: 48em) { /* 768px */ +@media screen and (min-width: 48em) { + /* 768px */ .layout--twocol-section { margin-right: -1.5%; margin-left: -1.5%; diff --git a/core/scripts/css/compile.js b/core/scripts/css/compile.js index 1711e046210a..e3a03396a128 100644 --- a/core/scripts/css/compile.js +++ b/core/scripts/css/compile.js @@ -68,10 +68,10 @@ module.exports = (filePath, callback) => { }) ]) .process(css, { from: filePath }) - .then(result => prettier.format(result.css, { - parser: 'css', - printWidth: 10000, - })) + .then(async result => { + const config = await prettier.resolveConfig(filePath); + return await prettier.format(result.css, config); + }) .then(callback) .catch(error => { log(error); diff --git a/core/themes/claro/css/components/action-link.pcss.css b/core/themes/claro/css/components/action-link.pcss.css index 51a0c9ed0109..4a9595987133 100644 --- a/core/themes/claro/css/components/action-link.pcss.css +++ b/core/themes/claro/css/components/action-link.pcss.css @@ -98,7 +98,6 @@ } .no-touchevents { - /* Small variant. */ & .action-link--small { padding: calc(var(--space-s) - ((var(--space-l) - var(--space-s)) / 2)) var(--space-s); @@ -145,7 +144,6 @@ } .action-link--icon-plus { - /* Plus */ &::before { content: ""; @@ -167,7 +165,6 @@ } &.action-link--danger { - /* Plus — danger */ &::before { background-image: url(../../images/icons/d72222/plus.svg); @@ -184,7 +181,6 @@ } .action-link--icon-trash { - /* Trash */ &::before { content: ""; @@ -206,7 +202,6 @@ } &.action-link--danger { - /* Trash — danger */ &::before { background-image: url(../../images/icons/d72222/trash.svg); @@ -223,7 +218,6 @@ } .action-link--icon-ex { - /* Ex */ &::before { content: ""; @@ -245,7 +239,6 @@ } &.action-link--danger { - /* Ex — danger */ &::before { background-image: url(../../images/icons/d72222/ex.svg); @@ -262,7 +255,6 @@ } .action-link--icon-checkmark { - /* Checkmark */ &::before { content: ""; @@ -284,7 +276,6 @@ } &.action-link--danger { - /* Checkmark — danger */ &::before { background-image: url(../../images/icons/d72222/checkmark.svg); @@ -301,7 +292,6 @@ } .action-link--icon-cog { - /* Cog */ &::before { content: ""; @@ -323,7 +313,6 @@ } &.action-link--danger { - /* Cog — danger */ &::before { background-image: url(../../images/icons/d72222/cog.svg); @@ -340,7 +329,6 @@ } .action-link--icon-show { - /* Show */ &::before { content: ""; @@ -362,7 +350,6 @@ } &.action-link--danger { - /* Show - danger */ &::before { background-image: url(../../images/icons/d72222/show.svg); @@ -379,7 +366,6 @@ } .action-link--icon-hide { - /* Hide */ &::before { content: ""; @@ -401,7 +387,6 @@ } &.action-link--danger { - /* Hide - danger */ &::before { background-image: url(../../images/icons/d72222/hide.svg); @@ -418,7 +403,6 @@ } .action-link--icon-key { - /* Key */ &::before { content: ""; @@ -440,7 +424,6 @@ } &.action-link--danger { - /* Key — danger */ &::before { background-image: url("../../images/icons/d72222/key.svg"); @@ -457,7 +440,6 @@ } .action-link--icon-questionmark { - /* Question Mark */ &::before { content: ""; @@ -479,7 +461,6 @@ } &.action-link--danger { - /* Question Mark - danger */ &::before { background-image: url("../../images/icons/d72222/questionmark.svg"); diff --git a/core/themes/claro/css/components/details.pcss.css b/core/themes/claro/css/components/details.pcss.css index 9a9703eb51b6..a83aa729425c 100644 --- a/core/themes/claro/css/components/details.pcss.css +++ b/core/themes/claro/css/components/details.pcss.css @@ -157,7 +157,9 @@ .claro-details__summary::before { width: 0.5625rem; height: 0.5625rem; - transition: transform var(--details-transform-transition-duration) ease-in 0s, margin var(--details-transform-transition-duration) ease-in 0s; + transition: + transform var(--details-transform-transition-duration) ease-in 0s, + margin var(--details-transform-transition-duration) ease-in 0s; transform: rotate(135deg); /* LTR */ border-block-start: 0.125rem solid; border-inline-end: 0.125rem solid; diff --git a/core/themes/claro/css/components/dialog.pcss.css b/core/themes/claro/css/components/dialog.pcss.css index 30673d76b8f4..45cfb35a5be6 100644 --- a/core/themes/claro/css/components/dialog.pcss.css +++ b/core/themes/claro/css/components/dialog.pcss.css @@ -23,7 +23,8 @@ box-shadow: var(--jui-dialog--focus-box-shadow); } -@media all and (max-width: 48em) { /* 768px */ +@media all and (max-width: 48em) { + /* 768px */ .ui-dialog:not(.ui-dialog-off-canvas) { min-width: 92%; max-width: 92%; @@ -111,7 +112,7 @@ .ui-dialog-buttonpane .ui-dialog-buttonset { display: flex; - gap: var(--space-s); + gap: var(--space-s); justify-content: flex-end; margin-block: var(--space-m); margin-inline-end: var(--space-l); diff --git a/core/themes/claro/css/components/dropbutton-noscript.pcss.css b/core/themes/claro/css/components/dropbutton-noscript.pcss.css index 862635f63c17..9c68d1337589 100644 --- a/core/themes/claro/css/components/dropbutton-noscript.pcss.css +++ b/core/themes/claro/css/components/dropbutton-noscript.pcss.css @@ -9,7 +9,7 @@ html { height: auto; } - .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type~.dropbutton__item { + .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item { visibility: visible; } } diff --git a/core/themes/claro/css/components/dropbutton.pcss.css b/core/themes/claro/css/components/dropbutton.pcss.css index e5258d2c4cb7..746d79c83ccb 100644 --- a/core/themes/claro/css/components/dropbutton.pcss.css +++ b/core/themes/claro/css/components/dropbutton.pcss.css @@ -157,7 +157,6 @@ } } - .dropbutton-wrapper.open .dropbutton__toggle::before { transform: translate(50%, -50%) rotate(180deg); [dir="rtl"] & { @@ -267,7 +266,9 @@ & > *:focus:hover, & > .button:focus:hover { - box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus); + box-shadow: + 0 0 0 2px var(--color-white), + 0 0 0 5px var(--color-focus); } & > *:focus { @@ -377,7 +378,7 @@ } /* States. */ -.dropbutton__item{ +.dropbutton__item { & > *:focus { position: relative; z-index: 3; @@ -394,6 +395,8 @@ &:first-of-type ~ & > *:focus { border-color: var(--color-focus) !important; /* 1 */ - box-shadow: inset 0 0 0 1px var(--color-focus), 0 0 0 1px var(--color-focus); + box-shadow: + inset 0 0 0 1px var(--color-focus), + 0 0 0 1px var(--color-focus); } } diff --git a/core/themes/claro/css/components/fieldset.pcss.css b/core/themes/claro/css/components/fieldset.pcss.css index 19beacd9d22f..4e4d17d4a5d1 100644 --- a/core/themes/claro/css/components/fieldset.pcss.css +++ b/core/themes/claro/css/components/fieldset.pcss.css @@ -111,9 +111,9 @@ /** * Remove the extra padding of container-inline wrapper if it's used inside a fieldset */ - & > .container-inline{ + & > .container-inline { padding: 0; - } + } } @media screen and (min-width: 48em) { diff --git a/core/themes/claro/css/components/form--checkbox-radio.pcss.css b/core/themes/claro/css/components/form--checkbox-radio.pcss.css index fa634b38eb24..94bcd446294b 100644 --- a/core/themes/claro/css/components/form--checkbox-radio.pcss.css +++ b/core/themes/claro/css/components/form--checkbox-radio.pcss.css @@ -69,7 +69,10 @@ &:focus:active, &:focus:hover { - box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input-fg-color); + box-shadow: + 0 0 0 2px var(--color-white), + 0 0 0 5px var(--color-focus), + inset 0 0 0 1px var(--input-fg-color); } } @@ -90,11 +93,17 @@ box-shadow: inset 0 0 0 1px var(--input--focus-border-color); &:focus { - box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--focus-border-color); + box-shadow: + 0 0 0 2px var(--color-white), + 0 0 0 5px var(--color-focus), + inset 0 0 0 1px var(--input--focus-border-color); &:active, &:hover { - box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input-fg-color); + box-shadow: + 0 0 0 2px var(--color-white), + 0 0 0 5px var(--color-focus), + inset 0 0 0 1px var(--input-fg-color); } } &:active, @@ -131,7 +140,10 @@ &:focus, &:focus:active, &:focus:hover { - box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--error-border-color); + box-shadow: + 0 0 0 2px var(--color-white), + 0 0 0 5px var(--color-focus), + inset 0 0 0 1px var(--input--error-border-color); } &:checked:active, &:checked:hover { @@ -150,7 +162,10 @@ background-image: url(../../images/icons/d72222/circle.svg); } .form-boolean--type-radio.error:checked:focus { - box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--error-border-color); + box-shadow: + 0 0 0 2px var(--color-white), + 0 0 0 5px var(--color-focus), + inset 0 0 0 1px var(--input--error-border-color); } /** diff --git a/core/themes/claro/css/components/form--password-confirm.pcss.css b/core/themes/claro/css/components/form--password-confirm.pcss.css index b66c138bcc37..a013469cbc75 100644 --- a/core/themes/claro/css/components/form--password-confirm.pcss.css +++ b/core/themes/claro/css/components/form--password-confirm.pcss.css @@ -23,7 +23,9 @@ @nest .js & { max-height: 10rem; - transition: max-height var(--speed-transition) ease-in-out, margin var(--speed-transition) ease-in-out; + transition: + max-height var(--speed-transition) ease-in-out, + margin var(--speed-transition) ease-in-out; } } diff --git a/core/themes/claro/css/components/form--select.pcss.css b/core/themes/claro/css/components/form--select.pcss.css index 96922b71fbec..6b4c992955cd 100644 --- a/core/themes/claro/css/components/form--select.pcss.css +++ b/core/themes/claro/css/components/form--select.pcss.css @@ -25,8 +25,7 @@ } @nest .no-touchevents & { - &.form-element--extrasmall, - &[name$="][_weight]"] { + &.form-element--extrasmall, &[name$="][_weight]"] { padding-inline-end: calc(1.5rem - var(--input-border-size)); background-size: 1.75rem 0.4375rem; /* w: 14px + (2 * 7px), h: 7px */ } diff --git a/core/themes/claro/css/components/form--text.pcss.css b/core/themes/claro/css/components/form--text.pcss.css index 1576960e2065..bbea06397a0d 100644 --- a/core/themes/claro/css/components/form--text.pcss.css +++ b/core/themes/claro/css/components/form--text.pcss.css @@ -71,10 +71,15 @@ box-shadow: inset 0 0 0 var(--input-border-size) var(--input--hover-border-color); } .form-element:focus { - box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus); + box-shadow: + 0 0 0 2px var(--color-white), + 0 0 0 5px var(--color-focus); } .form-element:hover:focus { - box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 var(--input-border-size) var(--input--hover-border-color); + box-shadow: + 0 0 0 2px var(--color-white), + 0 0 0 5px var(--color-focus), + inset 0 0 0 var(--input-border-size) var(--input--hover-border-color); } .form-element.error { @@ -85,7 +90,9 @@ box-shadow: none; } .form-element.error:hover:focus { - box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus); + box-shadow: + 0 0 0 2px var(--color-white), + 0 0 0 5px var(--color-focus); } .form-element--type-textarea.error + .cke { border-color: var(--input--error-border-color); diff --git a/core/themes/claro/css/components/icon-link.pcss.css b/core/themes/claro/css/components/icon-link.pcss.css index 411adb6313cb..0e8c7165152f 100644 --- a/core/themes/claro/css/components/icon-link.pcss.css +++ b/core/themes/claro/css/components/icon-link.pcss.css @@ -28,7 +28,9 @@ } &:focus { - box-shadow: 0 0 0 1.5px var(--color-white), 0 0 0 3.5px var(--color-focus); + box-shadow: + 0 0 0 1.5px var(--color-white), + 0 0 0 3.5px var(--color-focus); } &:active, @@ -40,6 +42,8 @@ .icon-link--small { &:focus { - box-shadow: 0 0 0 1px var(--color-white), 0 0 0 3px var(--color-focus); + box-shadow: + 0 0 0 1px var(--color-white), + 0 0 0 3px var(--color-focus); } } diff --git a/core/themes/claro/css/components/image-preview.pcss.css b/core/themes/claro/css/components/image-preview.pcss.css index 14a45f2f7d80..0bc34ea4e519 100644 --- a/core/themes/claro/css/components/image-preview.pcss.css +++ b/core/themes/claro/css/components/image-preview.pcss.css @@ -16,7 +16,11 @@ & img { background-image: linear-gradient(-45deg, var(--color-pattern) 25%, transparent 26%), linear-gradient(-45deg, var(--color-pattern) 25%, transparent 26%), linear-gradient(135deg, var(--color-pattern) 25%, transparent 26%), linear-gradient(135deg, var(--color-pattern) 25%, transparent 26%); - background-position: 0 0, var(--size-pattern-square) var(--size-pattern-square), var(--size-pattern-square) var(--size-pattern-square), 0 0; + background-position: + 0 0, + var(--size-pattern-square) var(--size-pattern-square), + var(--size-pattern-square) var(--size-pattern-square), + 0 0; background-size: calc(var(--size-pattern-square) * 2) calc(var(--size-pattern-square) * 2); } } diff --git a/core/themes/claro/css/components/jquery.ui/theme.pcss.css b/core/themes/claro/css/components/jquery.ui/theme.pcss.css index 5f4199a3d71e..02550a471f91 100644 --- a/core/themes/claro/css/components/jquery.ui/theme.pcss.css +++ b/core/themes/claro/css/components/jquery.ui/theme.pcss.css @@ -93,179 +93,525 @@ margin: 2px 0 0 3px; } /* positioning */ -.ui-icon-carat-1-ne { background-position: -16px 0; } -.ui-icon-carat-1-e { background-position: -32px 0; } -.ui-icon-carat-1-se { background-position: -48px 0; } -.ui-icon-carat-1-s { background-position: -64px 0; } -.ui-icon-carat-1-sw { background-position: -80px 0; } -.ui-icon-carat-1-w { background-position: -96px 0; } -.ui-icon-carat-1-nw { background-position: -112px 0; } -.ui-icon-carat-2-n-s { background-position: -128px 0; } -.ui-icon-carat-2-e-w { background-position: -144px 0; } -.ui-icon-triangle-1-n { background-position: 0 -16px; } -.ui-icon-triangle-1-ne { background-position: -16px -16px; } -.ui-icon-triangle-1-e { background-position: -32px -16px; } -.ui-icon-triangle-1-se { background-position: -48px -16px; } -.ui-icon-triangle-1-s { background-position: -64px -16px; } -.ui-icon-triangle-1-sw { background-position: -80px -16px; } -.ui-icon-triangle-1-w { background-position: -96px -16px; } -.ui-icon-triangle-1-nw { background-position: -112px -16px; } -.ui-icon-triangle-2-n-s { background-position: -128px -16px; } -.ui-icon-triangle-2-e-w { background-position: -144px -16px; } -.ui-icon-arrow-1-n { background-position: 0 -32px; } -.ui-icon-arrow-1-ne { background-position: -16px -32px; } -.ui-icon-arrow-1-e { background-position: -32px -32px; } -.ui-icon-arrow-1-se { background-position: -48px -32px; } -.ui-icon-arrow-1-s { background-position: -64px -32px; } -.ui-icon-arrow-1-sw { background-position: -80px -32px; } -.ui-icon-arrow-1-w { background-position: -96px -32px; } -.ui-icon-arrow-1-nw { background-position: -112px -32px; } -.ui-icon-arrow-2-n-s { background-position: -128px -32px; } -.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; } -.ui-icon-arrow-2-e-w { background-position: -160px -32px; } -.ui-icon-arrow-2-se-nw { background-position: -176px -32px; } -.ui-icon-arrowstop-1-n { background-position: -192px -32px; } -.ui-icon-arrowstop-1-e { background-position: -208px -32px; } -.ui-icon-arrowstop-1-s { background-position: -224px -32px; } -.ui-icon-arrowstop-1-w { background-position: -240px -32px; } -.ui-icon-arrowthick-1-n { background-position: 0 -48px; } -.ui-icon-arrowthick-1-ne { background-position: -16px -48px; } -.ui-icon-arrowthick-1-e { background-position: -32px -48px; } -.ui-icon-arrowthick-1-se { background-position: -48px -48px; } -.ui-icon-arrowthick-1-s { background-position: -64px -48px; } -.ui-icon-arrowthick-1-sw { background-position: -80px -48px; } -.ui-icon-arrowthick-1-w { background-position: -96px -48px; } -.ui-icon-arrowthick-1-nw { background-position: -112px -48px; } -.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; } -.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; } -.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; } -.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; } -.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; } -.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; } -.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; } -.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; } -.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; } -.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; } -.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; } -.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; } -.ui-icon-arrowreturn-1-w { background-position: -64px -64px; } -.ui-icon-arrowreturn-1-n { background-position: -80px -64px; } -.ui-icon-arrowreturn-1-e { background-position: -96px -64px; } -.ui-icon-arrowreturn-1-s { background-position: -112px -64px; } -.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; } -.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; } -.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; } -.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; } -.ui-icon-arrow-4 { background-position: 0 -80px; } -.ui-icon-arrow-4-diag { background-position: -16px -80px; } -.ui-icon-extlink { background-position: -32px -80px; } -.ui-icon-newwin { background-position: -48px -80px; } -.ui-icon-refresh { background-position: -64px -80px; } -.ui-icon-shuffle { background-position: -80px -80px; } -.ui-icon-transfer-e-w { background-position: -96px -80px; } -.ui-icon-transferthick-e-w { background-position: -112px -80px; } -.ui-icon-folder-collapsed { background-position: 0 -96px; } -.ui-icon-folder-open { background-position: -16px -96px; } -.ui-icon-document { background-position: -32px -96px; } -.ui-icon-document-b { background-position: -48px -96px; } -.ui-icon-note { background-position: -64px -96px; } -.ui-icon-mail-closed { background-position: -80px -96px; } -.ui-icon-mail-open { background-position: -96px -96px; } -.ui-icon-suitcase { background-position: -112px -96px; } -.ui-icon-comment { background-position: -128px -96px; } -.ui-icon-person { background-position: -144px -96px; } -.ui-icon-print { background-position: -160px -96px; } -.ui-icon-trash { background-position: -176px -96px; } -.ui-icon-locked { background-position: -192px -96px; } -.ui-icon-unlocked { background-position: -208px -96px; } -.ui-icon-bookmark { background-position: -224px -96px; } -.ui-icon-tag { background-position: -240px -96px; } -.ui-icon-home { background-position: 0 -112px; } -.ui-icon-flag { background-position: -16px -112px; } -.ui-icon-calendar { background-position: -32px -112px; } -.ui-icon-cart { background-position: -48px -112px; } -.ui-icon-pencil { background-position: -64px -112px; } -.ui-icon-clock { background-position: -80px -112px; } -.ui-icon-disk { background-position: -96px -112px; } -.ui-icon-calculator { background-position: -112px -112px; } -.ui-icon-zoomin { background-position: -128px -112px; } -.ui-icon-zoomout { background-position: -144px -112px; } -.ui-icon-search { background-position: -160px -112px; } -.ui-icon-wrench { background-position: -176px -112px; } -.ui-icon-gear { background-position: -192px -112px; } -.ui-icon-heart { background-position: -208px -112px; } -.ui-icon-star { background-position: -224px -112px; } -.ui-icon-link { background-position: -240px -112px; } -.ui-icon-cancel { background-position: 0 -128px; } -.ui-icon-plus { background-position: -16px -128px; } -.ui-icon-plusthick { background-position: -32px -128px; } -.ui-icon-minus { background-position: -48px -128px; } -.ui-icon-minusthick { background-position: -64px -128px; } -.ui-icon-close { background-position: -80px -128px; } -.ui-icon-closethick { background-position: -96px -128px; } -.ui-icon-key { background-position: -112px -128px; } -.ui-icon-lightbulb { background-position: -128px -128px; } -.ui-icon-scissors { background-position: -144px -128px; } -.ui-icon-clipboard { background-position: -160px -128px; } -.ui-icon-copy { background-position: -176px -128px; } -.ui-icon-contact { background-position: -192px -128px; } -.ui-icon-image { background-position: -208px -128px; } -.ui-icon-video { background-position: -224px -128px; } -.ui-icon-script { background-position: -240px -128px; } -.ui-icon-alert { background-position: 0 -144px; } -.ui-icon-info { background-position: -16px -144px; } -.ui-icon-notice { background-position: -32px -144px; } -.ui-icon-help { background-position: -48px -144px; } -.ui-icon-check { background-position: -64px -144px; } -.ui-icon-bullet { background-position: -80px -144px; } -.ui-icon-radio-off { background-position: -96px -144px; } -.ui-icon-radio-on { background-position: -112px -144px; } -.ui-icon-pin-w { background-position: -128px -144px; } -.ui-icon-pin-s { background-position: -144px -144px; } -.ui-icon-play { background-position: 0 -160px; } -.ui-icon-pause { background-position: -16px -160px; } -.ui-icon-seek-next { background-position: -32px -160px; } -.ui-icon-seek-prev { background-position: -48px -160px; } -.ui-icon-seek-end { background-position: -64px -160px; } -.ui-icon-seek-first { background-position: -80px -160px; } -.ui-icon-stop { background-position: -96px -160px; } -.ui-icon-eject { background-position: -112px -160px; } -.ui-icon-volume-off { background-position: -128px -160px; } -.ui-icon-volume-on { background-position: -144px -160px; } -.ui-icon-power { background-position: 0 -176px; } -.ui-icon-signal-diag { background-position: -16px -176px; } -.ui-icon-signal { background-position: -32px -176px; } -.ui-icon-battery-0 { background-position: -48px -176px; } -.ui-icon-battery-1 { background-position: -64px -176px; } -.ui-icon-battery-2 { background-position: -80px -176px; } -.ui-icon-battery-3 { background-position: -96px -176px; } -.ui-icon-circle-plus { background-position: 0 -192px; } -.ui-icon-circle-minus { background-position: -16px -192px; } -.ui-icon-circle-close { background-position: -32px -192px; } -.ui-icon-circle-triangle-e { background-position: -48px -192px; } -.ui-icon-circle-triangle-s { background-position: -64px -192px; } -.ui-icon-circle-triangle-w { background-position: -80px -192px; } -.ui-icon-circle-triangle-n { background-position: -96px -192px; } -.ui-icon-circle-arrow-e { background-position: -112px -192px; } -.ui-icon-circle-arrow-s { background-position: -128px -192px; } -.ui-icon-circle-arrow-w { background-position: -144px -192px; } -.ui-icon-circle-arrow-n { background-position: -160px -192px; } -.ui-icon-circle-zoomin { background-position: -176px -192px; } -.ui-icon-circle-zoomout { background-position: -192px -192px; } -.ui-icon-circle-check { background-position: -208px -192px; } -.ui-icon-circlesmall-plus { background-position: 0 -208px; } -.ui-icon-circlesmall-minus { background-position: -16px -208px; } -.ui-icon-circlesmall-close { background-position: -32px -208px; } -.ui-icon-squaresmall-plus { background-position: -48px -208px; } -.ui-icon-squaresmall-minus { background-position: -64px -208px; } -.ui-icon-squaresmall-close { background-position: -80px -208px; } -.ui-icon-grip-dotted-vertical { background-position: 0 -224px; } -.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; } -.ui-icon-grip-solid-vertical { background-position: -32px -224px; } -.ui-icon-grip-solid-horizontal { background-position: -48px -224px; } -.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } -.ui-icon-grip-diagonal-se { background-position: -80px -224px; } -.ui-icon-carat-1-n { background-position: 0 0; } +.ui-icon-carat-1-ne { + background-position: -16px 0; +} +.ui-icon-carat-1-e { + background-position: -32px 0; +} +.ui-icon-carat-1-se { + background-position: -48px 0; +} +.ui-icon-carat-1-s { + background-position: -64px 0; +} +.ui-icon-carat-1-sw { + background-position: -80px 0; +} +.ui-icon-carat-1-w { + background-position: -96px 0; +} +.ui-icon-carat-1-nw { + background-position: -112px 0; +} +.ui-icon-carat-2-n-s { + background-position: -128px 0; +} +.ui-icon-carat-2-e-w { + background-position: -144px 0; +} +.ui-icon-triangle-1-n { + background-position: 0 -16px; +} +.ui-icon-triangle-1-ne { + background-position: -16px -16px; +} +.ui-icon-triangle-1-e { + background-position: -32px -16px; +} +.ui-icon-triangle-1-se { + background-position: -48px -16px; +} +.ui-icon-triangle-1-s { + background-position: -64px -16px; +} +.ui-icon-triangle-1-sw { + background-position: -80px -16px; +} +.ui-icon-triangle-1-w { + background-position: -96px -16px; +} +.ui-icon-triangle-1-nw { + background-position: -112px -16px; +} +.ui-icon-triangle-2-n-s { + background-position: -128px -16px; +} +.ui-icon-triangle-2-e-w { + background-position: -144px -16px; +} +.ui-icon-arrow-1-n { + background-position: 0 -32px; +} +.ui-icon-arrow-1-ne { + background-position: -16px -32px; +} +.ui-icon-arrow-1-e { + background-position: -32px -32px; +} +.ui-icon-arrow-1-se { + background-position: -48px -32px; +} +.ui-icon-arrow-1-s { + background-position: -64px -32px; +} +.ui-icon-arrow-1-sw { + background-position: -80px -32px; +} +.ui-icon-arrow-1-w { + background-position: -96px -32px; +} +.ui-icon-arrow-1-nw { + background-position: -112px -32px; +} +.ui-icon-arrow-2-n-s { + background-position: -128px -32px; +} +.ui-icon-arrow-2-ne-sw { + background-position: -144px -32px; +} +.ui-icon-arrow-2-e-w { + background-position: -160px -32px; +} +.ui-icon-arrow-2-se-nw { + background-position: -176px -32px; +} +.ui-icon-arrowstop-1-n { + background-position: -192px -32px; +} +.ui-icon-arrowstop-1-e { + background-position: -208px -32px; +} +.ui-icon-arrowstop-1-s { + background-position: -224px -32px; +} +.ui-icon-arrowstop-1-w { + background-position: -240px -32px; +} +.ui-icon-arrowthick-1-n { + background-position: 0 -48px; +} +.ui-icon-arrowthick-1-ne { + background-position: -16px -48px; +} +.ui-icon-arrowthick-1-e { + background-position: -32px -48px; +} +.ui-icon-arrowthick-1-se { + background-position: -48px -48px; +} +.ui-icon-arrowthick-1-s { + background-position: -64px -48px; +} +.ui-icon-arrowthick-1-sw { + background-position: -80px -48px; +} +.ui-icon-arrowthick-1-w { + background-position: -96px -48px; +} +.ui-icon-arrowthick-1-nw { + background-position: -112px -48px; +} +.ui-icon-arrowthick-2-n-s { + background-position: -128px -48px; +} +.ui-icon-arrowthick-2-ne-sw { + background-position: -144px -48px; +} +.ui-icon-arrowthick-2-e-w { + background-position: -160px -48px; +} +.ui-icon-arrowthick-2-se-nw { + background-position: -176px -48px; +} +.ui-icon-arrowthickstop-1-n { + background-position: -192px -48px; +} +.ui-icon-arrowthickstop-1-e { + background-position: -208px -48px; +} +.ui-icon-arrowthickstop-1-s { + background-position: -224px -48px; +} +.ui-icon-arrowthickstop-1-w { + background-position: -240px -48px; +} +.ui-icon-arrowreturnthick-1-w { + background-position: 0 -64px; +} +.ui-icon-arrowreturnthick-1-n { + background-position: -16px -64px; +} +.ui-icon-arrowreturnthick-1-e { + background-position: -32px -64px; +} +.ui-icon-arrowreturnthick-1-s { + background-position: -48px -64px; +} +.ui-icon-arrowreturn-1-w { + background-position: -64px -64px; +} +.ui-icon-arrowreturn-1-n { + background-position: -80px -64px; +} +.ui-icon-arrowreturn-1-e { + background-position: -96px -64px; +} +.ui-icon-arrowreturn-1-s { + background-position: -112px -64px; +} +.ui-icon-arrowrefresh-1-w { + background-position: -128px -64px; +} +.ui-icon-arrowrefresh-1-n { + background-position: -144px -64px; +} +.ui-icon-arrowrefresh-1-e { + background-position: -160px -64px; +} +.ui-icon-arrowrefresh-1-s { + background-position: -176px -64px; +} +.ui-icon-arrow-4 { + background-position: 0 -80px; +} +.ui-icon-arrow-4-diag { + background-position: -16px -80px; +} +.ui-icon-extlink { + background-position: -32px -80px; +} +.ui-icon-newwin { + background-position: -48px -80px; +} +.ui-icon-refresh { + background-position: -64px -80px; +} +.ui-icon-shuffle { + background-position: -80px -80px; +} +.ui-icon-transfer-e-w { + background-position: -96px -80px; +} +.ui-icon-transferthick-e-w { + background-position: -112px -80px; +} +.ui-icon-folder-collapsed { + background-position: 0 -96px; +} +.ui-icon-folder-open { + background-position: -16px -96px; +} +.ui-icon-document { + background-position: -32px -96px; +} +.ui-icon-document-b { + background-position: -48px -96px; +} +.ui-icon-note { + background-position: -64px -96px; +} +.ui-icon-mail-closed { + background-position: -80px -96px; +} +.ui-icon-mail-open { + background-position: -96px -96px; +} +.ui-icon-suitcase { + background-position: -112px -96px; +} +.ui-icon-comment { + background-position: -128px -96px; +} +.ui-icon-person { + background-position: -144px -96px; +} +.ui-icon-print { + background-position: -160px -96px; +} +.ui-icon-trash { + background-position: -176px -96px; +} +.ui-icon-locked { + background-position: -192px -96px; +} +.ui-icon-unlocked { + background-position: -208px -96px; +} +.ui-icon-bookmark { + background-position: -224px -96px; +} +.ui-icon-tag { + background-position: -240px -96px; +} +.ui-icon-home { + background-position: 0 -112px; +} +.ui-icon-flag { + background-position: -16px -112px; +} +.ui-icon-calendar { + background-position: -32px -112px; +} +.ui-icon-cart { + background-position: -48px -112px; +} +.ui-icon-pencil { + background-position: -64px -112px; +} +.ui-icon-clock { + background-position: -80px -112px; +} +.ui-icon-disk { + background-position: -96px -112px; +} +.ui-icon-calculator { + background-position: -112px -112px; +} +.ui-icon-zoomin { + background-position: -128px -112px; +} +.ui-icon-zoomout { + background-position: -144px -112px; +} +.ui-icon-search { + background-position: -160px -112px; +} +.ui-icon-wrench { + background-position: -176px -112px; +} +.ui-icon-gear { + background-position: -192px -112px; +} +.ui-icon-heart { + background-position: -208px -112px; +} +.ui-icon-star { + background-position: -224px -112px; +} +.ui-icon-link { + background-position: -240px -112px; +} +.ui-icon-cancel { + background-position: 0 -128px; +} +.ui-icon-plus { + background-position: -16px -128px; +} +.ui-icon-plusthick { + background-position: -32px -128px; +} +.ui-icon-minus { + background-position: -48px -128px; +} +.ui-icon-minusthick { + background-position: -64px -128px; +} +.ui-icon-close { + background-position: -80px -128px; +} +.ui-icon-closethick { + background-position: -96px -128px; +} +.ui-icon-key { + background-position: -112px -128px; +} +.ui-icon-lightbulb { + background-position: -128px -128px; +} +.ui-icon-scissors { + background-position: -144px -128px; +} +.ui-icon-clipboard { + background-position: -160px -128px; +} +.ui-icon-copy { + background-position: -176px -128px; +} +.ui-icon-contact { + background-position: -192px -128px; +} +.ui-icon-image { + background-position: -208px -128px; +} +.ui-icon-video { + background-position: -224px -128px; +} +.ui-icon-script { + background-position: -240px -128px; +} +.ui-icon-alert { + background-position: 0 -144px; +} +.ui-icon-info { + background-position: -16px -144px; +} +.ui-icon-notice { + background-position: -32px -144px; +} +.ui-icon-help { + background-position: -48px -144px; +} +.ui-icon-check { + background-position: -64px -144px; +} +.ui-icon-bullet { + background-position: -80px -144px; +} +.ui-icon-radio-off { + background-position: -96px -144px; +} +.ui-icon-radio-on { + background-position: -112px -144px; +} +.ui-icon-pin-w { + background-position: -128px -144px; +} +.ui-icon-pin-s { + background-position: -144px -144px; +} +.ui-icon-play { + background-position: 0 -160px; +} +.ui-icon-pause { + background-position: -16px -160px; +} +.ui-icon-seek-next { + background-position: -32px -160px; +} +.ui-icon-seek-prev { + background-position: -48px -160px; +} +.ui-icon-seek-end { + background-position: -64px -160px; +} +.ui-icon-seek-first { + background-position: -80px -160px; +} +.ui-icon-stop { + background-position: -96px -160px; +} +.ui-icon-eject { + background-position: -112px -160px; +} +.ui-icon-volume-off { + background-position: -128px -160px; +} +.ui-icon-volume-on { + background-position: -144px -160px; +} +.ui-icon-power { + background-position: 0 -176px; +} +.ui-icon-signal-diag { + background-position: -16px -176px; +} +.ui-icon-signal { + background-position: -32px -176px; +} +.ui-icon-battery-0 { + background-position: -48px -176px; +} +.ui-icon-battery-1 { + background-position: -64px -176px; +} +.ui-icon-battery-2 { + background-position: -80px -176px; +} +.ui-icon-battery-3 { + background-position: -96px -176px; +} +.ui-icon-circle-plus { + background-position: 0 -192px; +} +.ui-icon-circle-minus { + background-position: -16px -192px; +} +.ui-icon-circle-close { + background-position: -32px -192px; +} +.ui-icon-circle-triangle-e { + background-position: -48px -192px; +} +.ui-icon-circle-triangle-s { + background-position: -64px -192px; +} +.ui-icon-circle-triangle-w { + background-position: -80px -192px; +} +.ui-icon-circle-triangle-n { + background-position: -96px -192px; +} +.ui-icon-circle-arrow-e { + background-position: -112px -192px; +} +.ui-icon-circle-arrow-s { + background-position: -128px -192px; +} +.ui-icon-circle-arrow-w { + background-position: -144px -192px; +} +.ui-icon-circle-arrow-n { + background-position: -160px -192px; +} +.ui-icon-circle-zoomin { + background-position: -176px -192px; +} +.ui-icon-circle-zoomout { + background-position: -192px -192px; +} +.ui-icon-circle-check { + background-position: -208px -192px; +} +.ui-icon-circlesmall-plus { + background-position: 0 -208px; +} +.ui-icon-circlesmall-minus { + background-position: -16px -208px; +} +.ui-icon-circlesmall-close { + background-position: -32px -208px; +} +.ui-icon-squaresmall-plus { + background-position: -48px -208px; +} +.ui-icon-squaresmall-minus { + background-position: -64px -208px; +} +.ui-icon-squaresmall-close { + background-position: -80px -208px; +} +.ui-icon-grip-dotted-vertical { + background-position: 0 -224px; +} +.ui-icon-grip-dotted-horizontal { + background-position: -16px -224px; +} +.ui-icon-grip-solid-vertical { + background-position: -32px -224px; +} +.ui-icon-grip-solid-horizontal { + background-position: -48px -224px; +} +.ui-icon-gripsmall-diagonal-se { + background-position: -64px -224px; +} +.ui-icon-grip-diagonal-se { + background-position: -80px -224px; +} +.ui-icon-carat-1-n { + background-position: 0 0; +} /** * Accordion diff --git a/core/themes/claro/css/components/shortcut.pcss.css b/core/themes/claro/css/components/shortcut.pcss.css index 04ede913b70d..72e157db6fc9 100644 --- a/core/themes/claro/css/components/shortcut.pcss.css +++ b/core/themes/claro/css/components/shortcut.pcss.css @@ -48,8 +48,7 @@ vertical-align: -0.0625rem; background: transparent url(../../images/shortcut/favstar.svg) left top / calc(var(--shortcut-icon-size) * 4) var(--shortcut-icon-size) no-repeat; - @nest .shortcut-action--add:hover &, - .shortcut-action--add:focus & { + @nest .shortcut-action--add:hover &, .shortcut-action--add:focus & { background-position: calc(-1 * var(--shortcut-icon-size)) top; } @@ -57,8 +56,7 @@ background-position: calc(-2 * var(--shortcut-icon-size)) top; } - @nest .shortcut-action--remove:focus &, - .shortcut-action--remove:hover & { + @nest .shortcut-action--remove:focus &, .shortcut-action--remove:hover & { background-position: calc(-3 * var(--shortcut-icon-size)) top; } diff --git a/core/themes/claro/css/components/system-admin--admin-list.pcss.css b/core/themes/claro/css/components/system-admin--admin-list.pcss.css index 03b5bed6d8d7..92f32d49b947 100644 --- a/core/themes/claro/css/components/system-admin--admin-list.pcss.css +++ b/core/themes/claro/css/components/system-admin--admin-list.pcss.css @@ -6,7 +6,7 @@ /** * Admin list (wrapper of admin items). */ - .admin-list { +.admin-list { margin-block: 1em 2em; padding: 0; } diff --git a/core/themes/claro/css/components/system-admin--modules.pcss.css b/core/themes/claro/css/components/system-admin--modules.pcss.css index da7b5aafe7b9..0e42fa310d1b 100644 --- a/core/themes/claro/css/components/system-admin--modules.pcss.css +++ b/core/themes/claro/css/components/system-admin--modules.pcss.css @@ -8,7 +8,8 @@ --module-table-cell-padding-horizontal: calc(var(--space-m) - (var(--input-border-size) * 2)); } -.modules-table-filter, .permissions-table-filter { +.modules-table-filter, +.permissions-table-filter { padding: 0.25rem var(--space-l); border: 1px solid var(--color-gray-200); border-radius: 2px 2px 0 0; @@ -16,7 +17,8 @@ } /* Visually hide the module filter input description. */ -.modules-table-filter .form-item__description, .permissions-table-filter .form-item__description { +.modules-table-filter .form-item__description, +.permissions-table-filter .form-item__description { position: absolute !important; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); diff --git a/core/themes/claro/css/components/tables.pcss.css b/core/themes/claro/css/components/tables.pcss.css index 1feaa6065aed..0d3e522db80d 100644 --- a/core/themes/claro/css/components/tables.pcss.css +++ b/core/themes/claro/css/components/tables.pcss.css @@ -74,7 +74,7 @@ th { opacity: 0.5; background: url(../../images/icons/000f33/sort--inactive.svg) no-repeat 50% 50%; background-size: contain; - + [dir="rtl"] & { /* Horizontally flip the element. */ transform: scaleX(-1); @@ -90,7 +90,6 @@ th { background: linktext; mask: url(../../images/icons/000f33/sort--inactive.svg) no-repeat 50% 50%; } - } } diff --git a/core/themes/claro/css/components/tablesort-indicator.pcss.css b/core/themes/claro/css/components/tablesort-indicator.pcss.css index 33a0fe618974..0cbdb709efc6 100644 --- a/core/themes/claro/css/components/tablesort-indicator.pcss.css +++ b/core/themes/claro/css/components/tablesort-indicator.pcss.css @@ -27,7 +27,6 @@ mask-repeat: no-repeat; mask-position: 0 50%; } - } .tablesort--asc { diff --git a/core/themes/claro/css/components/tabs.pcss.css b/core/themes/claro/css/components/tabs.pcss.css index c002c770b057..f34c438979f1 100644 --- a/core/themes/claro/css/components/tabs.pcss.css +++ b/core/themes/claro/css/components/tabs.pcss.css @@ -228,7 +228,9 @@ border: none; border-radius: var(--tabs-border-radius-size) var(--tabs-border-radius-size) 0 0; outline: 2px dotted transparent; - box-shadow: 0 0 0 2px var(--color-white), 0 0 0 calc(var(--tabs--focus-height) + 2px) var(--color-focus); + box-shadow: + 0 0 0 2px var(--color-white), + 0 0 0 calc(var(--tabs--focus-height) + 2px) var(--color-focus); } &:hover { color: var(--color-absolutezero-hover); @@ -254,7 +256,9 @@ & .tabs--primary { & .tabs__link { &:focus { - box-shadow: 0 0 0 2px var(--color-gray-050), 0 0 0 calc(var(--tabs--focus-height) + 2px) var(--color-focus); + box-shadow: + 0 0 0 2px var(--color-gray-050), + 0 0 0 calc(var(--tabs--focus-height) + 2px) var(--color-focus); } } } diff --git a/core/themes/claro/css/components/views_ui.admin.pcss.css b/core/themes/claro/css/components/views_ui.admin.pcss.css index 52f8b147d0d4..b4f1dd72e0b1 100644 --- a/core/themes/claro/css/components/views_ui.admin.pcss.css +++ b/core/themes/claro/css/components/views_ui.admin.pcss.css @@ -37,7 +37,8 @@ margin-inline: 0; } -@media screen and (min-width: 60rem) { /* 960px */ +@media screen and (min-width: 60rem) { + /* 960px */ .views-display-columns { & > * { float: left; /* LTR */ diff --git a/core/themes/claro/css/layout/system-admin--layout.pcss.css b/core/themes/claro/css/layout/system-admin--layout.pcss.css index a041c3df2d9a..4fe485131053 100644 --- a/core/themes/claro/css/layout/system-admin--layout.pcss.css +++ b/core/themes/claro/css/layout/system-admin--layout.pcss.css @@ -26,7 +26,7 @@ } .toolbar-tray-open:not(.toolbar-vertical) .layout-column, body:not(.toolbar-tray-open) .layout-column { - float: left; /* LTR */ + float: left; /* LTR */ box-sizing: border-box; padding-right: 1.5em; padding-left: 1.5em; @@ -59,7 +59,7 @@ margin-left: -1.5em; } .layout-column { - float: left; /* LTR */ + float: left; /* LTR */ box-sizing: border-box; padding-right: 1.5em; padding-left: 1.5em; diff --git a/core/themes/claro/css/theme/maintenance-page.pcss.css b/core/themes/claro/css/theme/maintenance-page.pcss.css index 6e164117b978..e4ec7bd69e9f 100644 --- a/core/themes/claro/css/theme/maintenance-page.pcss.css +++ b/core/themes/claro/css/theme/maintenance-page.pcss.css @@ -62,7 +62,8 @@ h3 { * Task list & step indicator. * Shows on both the install screen and the database update page. */ -@media all and (max-width: 48em) { /* 768px */ +@media all and (max-width: 48em) { + /* 768px */ header[role="banner"] { position: relative; } @@ -79,7 +80,8 @@ h3 { } } -@media all and (min-width: 48em) { /* 768px */ +@media all and (min-width: 48em) { + /* 768px */ .step-indicator { display: none; } @@ -138,13 +140,15 @@ h3 { background: #fff; box-shadow: var(--shadow-z3); } -.layout-container::after { /* No reason for a clearfix in the markup. */ +.layout-container::after { + /* No reason for a clearfix in the markup. */ display: table; clear: both; content: ""; } -@media all and (max-width: 48em) { /* 768px */ +@media all and (max-width: 48em) { + /* 768px */ .layout-container { margin: 1.25em; padding: var(--space-m) var(--space-l); @@ -155,7 +159,8 @@ h3 { } } -@media all and (min-width: 48em) { /* 768px */ +@media all and (min-width: 48em) { + /* 768px */ html { display: table; } diff --git a/core/themes/claro/css/theme/media-library.pcss.css b/core/themes/claro/css/theme/media-library.pcss.css index 50d219b52bf3..5c658f099aa7 100644 --- a/core/themes/claro/css/theme/media-library.pcss.css +++ b/core/themes/claro/css/theme/media-library.pcss.css @@ -139,7 +139,7 @@ border-left: var(--vertical-tabs-menu-link--active-border-size) solid var(--vertical-tabs-menu-link--active-border-color); /* LTR */ border-radius: var(--base-border-radius) 0 0 var(--base-border-radius); /* LTR */ } -[dir=rtl] .media-library-menu__link.active::before { +[dir="rtl"] .media-library-menu__link.active::before { border-right: var(--vertical-tabs-menu-link--active-border-size) solid var(--vertical-tabs-menu-link--active-border-color); border-left: 0; border-radius: 0 var(--base-border-radius) var(--base-border-radius) 0; @@ -218,7 +218,9 @@ /* Adjust the focus border on this element so it is not too close to buttons. */ .media-library-add-form__added-media:focus { - box-shadow: 0 0 0 calc(var(--focus-border-offset-size) + 2px) var(--color-white), 0 0 0 calc(var(--focus-border-size) + var(--focus-border-offset-size) + 2px) var(--color-focus); + box-shadow: + 0 0 0 calc(var(--focus-border-offset-size) + 2px) var(--color-white), + 0 0 0 calc(var(--focus-border-size) + var(--focus-border-offset-size) + 2px) var(--color-focus); } .media-library-add-form .file-upload-help { @@ -419,7 +421,10 @@ width: calc(100% - 16px); height: calc(100% - 16px); content: ""; - transition: border-color 0.2s, color 0.2s, background 0.2s; + transition: + border-color 0.2s, + color 0.2s, + background 0.2s; pointer-events: none; border: 1px solid #dbdbdb; border-radius: 2px; diff --git a/core/themes/claro/css/theme/views_ui.admin.theme.pcss.css b/core/themes/claro/css/theme/views_ui.admin.theme.pcss.css index 80372bfd1593..46c8e8b5e839 100644 --- a/core/themes/claro/css/theme/views_ui.admin.theme.pcss.css +++ b/core/themes/claro/css/theme/views_ui.admin.theme.pcss.css @@ -30,7 +30,9 @@ .views-admin a.icon { border: 1px solid #ddd; border-radius: 4px; - background: linear-gradient(-90deg, #fff 0, #e8e8e8 100%) no-repeat, repeat-y; + background: + linear-gradient(-90deg, #fff 0, #e8e8e8 100%) no-repeat, + repeat-y; box-shadow: 0 0 0 rgba(0, 0, 0, 0.3333) inset; } .views-admin a.icon:hover { @@ -72,19 +74,27 @@ background-position: center -52px; } .views-admin a.icon.delete { - background-position: center -52px, left top; /* LTR */ + background-position: + center -52px, + left top; /* LTR */ } [dir="rtl"] .views-admin a.icon.delete { - background-position: center -52px, right top; + background-position: + center -52px, + right top; } .views-admin .icon.rearrange { background-position: center -111px; } .views-admin a.icon.rearrange { - background-position: center -111px, left top; /* LTR */ + background-position: + center -111px, + left top; /* LTR */ } [dir="rtl"] .views-admin a.icon.rearrange { - background-position: center -111px, right top; + background-position: + center -111px, + right top; } details.box-padding { border: none; @@ -324,7 +334,8 @@ td.group-title { vertical-align: top; } -@media screen and (min-width: 45em) { /* 720px */ +@media screen and (min-width: 45em) { + /* 720px */ .view-preview-form .form-type-textfield .description { white-space: nowrap; } diff --git a/core/themes/olivero/css/base/media-queries.pcss.css b/core/themes/olivero/css/base/media-queries.pcss.css index ec87de15f412..d2368f0ecbeb 100644 --- a/core/themes/olivero/css/base/media-queries.pcss.css +++ b/core/themes/olivero/css/base/media-queries.pcss.css @@ -14,5 +14,5 @@ @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-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/core/themes/olivero/css/components/autocomplete-loading.module.pcss.css b/core/themes/olivero/css/components/autocomplete-loading.module.pcss.css index 2464789ae7d7..db532a6020b7 100644 --- a/core/themes/olivero/css/components/autocomplete-loading.module.pcss.css +++ b/core/themes/olivero/css/components/autocomplete-loading.module.pcss.css @@ -10,7 +10,7 @@ background-color: var(--color--white); background-image: url("../../images/magnifying-glass.svg"); background-repeat: no-repeat; - background-position: right var(--sp1) center; /* LTR */ + background-position: right var(--sp1) center; /* LTR */ &:disabled { background-color: var(--color--gray-100); diff --git a/core/themes/olivero/css/components/breadcrumb.pcss.css b/core/themes/olivero/css/components/breadcrumb.pcss.css index c050b9d8328c..8f88549859e8 100644 --- a/core/themes/olivero/css/components/breadcrumb.pcss.css +++ b/core/themes/olivero/css/components/breadcrumb.pcss.css @@ -76,7 +76,7 @@ .breadcrumb__item { display: inline-block; - &:nth-child(n+2)::before { + &:nth-child(n + 2)::before { display: inline-block; width: 8px; height: 8px; @@ -96,7 +96,7 @@ } } -[dir="rtl"] .breadcrumb__item:nth-child(n+2)::before { +[dir="rtl"] .breadcrumb__item:nth-child(n + 2)::before { transform: rotate(-45deg); } diff --git a/core/themes/olivero/css/components/form-boolean.pcss.css b/core/themes/olivero/css/components/form-boolean.pcss.css index 9064b97b230e..c1500d2bf4b2 100644 --- a/core/themes/olivero/css/components/form-boolean.pcss.css +++ b/core/themes/olivero/css/components/form-boolean.pcss.css @@ -85,12 +85,16 @@ input[type="radio"] { 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); + 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); + box-shadow: + 0 0 0 2px white, + 0 0 0 4px var(--color--red); } } diff --git a/core/themes/olivero/css/components/header-navigation.pcss.css b/core/themes/olivero/css/components/header-navigation.pcss.css index 9cf27bdb575d..b8b615e87117 100644 --- a/core/themes/olivero/css/components/header-navigation.pcss.css +++ b/core/themes/olivero/css/components/header-navigation.pcss.css @@ -65,7 +65,9 @@ * works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189 */ html.js .header-nav { - transition: visibility 0.2s, transform 0.2s; + transition: + visibility 0.2s, + transform 0.2s; } body:not(.is-always-mobile-nav) .header-nav { @@ -96,7 +98,9 @@ body.is-always-mobile-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; + transition: + transform 0.2s, + visibility 0.2s; border-top-width: calc(var(--drupal-displace-offset-top, 0px) + var(--sp11)); } diff --git a/core/themes/olivero/css/components/hero.pcss.css b/core/themes/olivero/css/components/hero.pcss.css index 34ec1f4fb682..a256af323bd7 100644 --- a/core/themes/olivero/css/components/hero.pcss.css +++ b/core/themes/olivero/css/components/hero.pcss.css @@ -8,7 +8,8 @@ .hero__content { grid-column: 1 / 7; - @media (--grid-md) { /* 700px */ + @media (--grid-md) { + /* 700px */ grid-column: 3 / 13; } diff --git a/core/themes/olivero/css/components/navigation/nav-primary-wide.pcss.css b/core/themes/olivero/css/components/navigation/nav-primary-wide.pcss.css index 9e042f3cf06a..24d5cdcedf0b 100644 --- a/core/themes/olivero/css/components/navigation/nav-primary-wide.pcss.css +++ b/core/themes/olivero/css/components/navigation/nav-primary-wide.pcss.css @@ -219,7 +219,10 @@ html.js body:not(.is-always-mobile-nav) { @media (--nav) { & .primary-nav__menu--level-2, & .primary-nav__menu-🥕 { - transition: visibility 0.2s, transform 0.2s, opacity 0.2s; + transition: + visibility 0.2s, + transform 0.2s, + opacity 0.2s; } } } diff --git a/core/themes/olivero/css/components/navigation/nav-primary.pcss.css b/core/themes/olivero/css/components/navigation/nav-primary.pcss.css index 199db17c8fd8..aab7afe5ec22 100644 --- a/core/themes/olivero/css/components/navigation/nav-primary.pcss.css +++ b/core/themes/olivero/css/components/navigation/nav-primary.pcss.css @@ -151,7 +151,10 @@ margin-block: 0; margin-inline-start: calc(-1 * var(--sp)); padding-inline-start: var(--sp2-5); - transition: opacity 0.2s, visibility 0.2s, max-height 0.2s; + transition: + opacity 0.2s, + visibility 0.2s, + max-height 0.2s; opacity: 0; border-inline-start: solid var(--sp) var(--color--primary-50); diff --git a/core/themes/olivero/css/components/navigation/nav-secondary.pcss.css b/core/themes/olivero/css/components/navigation/nav-secondary.pcss.css index ea22e93756ef..eabeeff71a1f 100644 --- a/core/themes/olivero/css/components/navigation/nav-secondary.pcss.css +++ b/core/themes/olivero/css/components/navigation/nav-secondary.pcss.css @@ -53,7 +53,9 @@ width: 100%; height: 0; content: ""; - transition: opacity 0.2s, transform 0.2s; + transition: + opacity 0.2s, + transform 0.2s; transform: translateY(5px); opacity: 0; /* Intentionally not using CSS logical properties. */ diff --git a/core/themes/olivero/css/components/node-teaser.pcss.css b/core/themes/olivero/css/components/node-teaser.pcss.css index ec6492c2a363..b34ccec40f95 100644 --- a/core/themes/olivero/css/components/node-teaser.pcss.css +++ b/core/themes/olivero/css/components/node-teaser.pcss.css @@ -29,4 +29,4 @@ margin-block-start: var(--sp2); } } -} \ No newline at end of file +} diff --git a/core/themes/olivero/css/components/node.pcss.css b/core/themes/olivero/css/components/node.pcss.css index 1f6c7ccedef7..e9bbf7639e43 100644 --- a/core/themes/olivero/css/components/node.pcss.css +++ b/core/themes/olivero/css/components/node.pcss.css @@ -33,7 +33,9 @@ .node__title { & a { padding-block-end: 3px; - transition: background-size 0.2s, color 0.2s; + transition: + background-size 0.2s, + color 0.2s; text-decoration: none; color: var(--color-text-neutral-loud); background-color: transparent; diff --git a/core/themes/olivero/css/components/search-results.pcss.css b/core/themes/olivero/css/components/search-results.pcss.css index 69a174bed3dc..592ef3c7d32a 100644 --- a/core/themes/olivero/css/components/search-results.pcss.css +++ b/core/themes/olivero/css/components/search-results.pcss.css @@ -27,7 +27,9 @@ & a { padding-block-end: 3px; - transition: background-size 0.2s, color 0.2s; + transition: + background-size 0.2s, + color 0.2s; text-decoration: none; background-color: transparent; background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */ diff --git a/core/themes/olivero/css/components/site-header.pcss.css b/core/themes/olivero/css/components/site-header.pcss.css index ee6822646357..d1ffafdacbdf 100644 --- a/core/themes/olivero/css/components/site-header.pcss.css +++ b/core/themes/olivero/css/components/site-header.pcss.css @@ -68,7 +68,10 @@ */ html.js body:not(.is-always-mobile-nav) .site-header__inner { @media (--nav) { - transition: opacity 0.3s, transform 0.3s, box-shadow 0.3s; + transition: + opacity 0.3s, + transform 0.3s, + box-shadow 0.3s; } } diff --git a/core/themes/olivero/css/components/tabs.pcss.css b/core/themes/olivero/css/components/tabs.pcss.css index 17dbf1981696..200749bb0150 100644 --- a/core/themes/olivero/css/components/tabs.pcss.css +++ b/core/themes/olivero/css/components/tabs.pcss.css @@ -173,7 +173,10 @@ inset-inline-start: 0; display: block; width: 100%; - transition: transform var(--tabs-transition-duration), opacity var(--tabs-transition-duration), top var(--tabs-transition-duration); + transition: + transform var(--tabs-transition-duration), + opacity var(--tabs-transition-duration), + top var(--tabs-transition-duration); border-block-start: solid 2px var(--tabs-highlight-color); &:nth-child(1) { diff --git a/core/themes/olivero/css/components/tags.pcss.css b/core/themes/olivero/css/components/tags.pcss.css index ca3711c73db6..1e5cd90c472b 100644 --- a/core/themes/olivero/css/components/tags.pcss.css +++ b/core/themes/olivero/css/components/tags.pcss.css @@ -53,7 +53,7 @@ margin-inline-end: calc(var(--sp0-5) / 2); } -.field--tags__item:nth-last-child(n+2)::after { +.field--tags__item:nth-last-child(n + 2)::after { content: ","; font-size: var(--font-size-base); line-height: 1.5; diff --git a/core/themes/olivero/css/components/vertical-tabs.pcss.css b/core/themes/olivero/css/components/vertical-tabs.pcss.css index b398a15d2b72..d19deb3d380d 100644 --- a/core/themes/olivero/css/components/vertical-tabs.pcss.css +++ b/core/themes/olivero/css/components/vertical-tabs.pcss.css @@ -58,7 +58,7 @@ display: none; } -.vertical-tabs__menu-item:nth-child(n+2) { +.vertical-tabs__menu-item:nth-child(n + 2) { border-block-start: var(--vertical-tabs-menu-border-width) solid var(--color--gray-95); } diff --git a/core/themes/stable9/css/announcements_feed/announcements_feed.toolbar.css b/core/themes/stable9/css/announcements_feed/announcements_feed.toolbar.css index 60e5a5c8924d..bb4dd444bbca 100644 --- a/core/themes/stable9/css/announcements_feed/announcements_feed.toolbar.css +++ b/core/themes/stable9/css/announcements_feed/announcements_feed.toolbar.css @@ -3,7 +3,6 @@ } @media (forced-colors: active) { - .toolbar .toolbar-icon.announce-canvas-link::before { background: linktext; -webkit-mask-image: url("data:image/svg+xml,%3csvg width='20' height='19' viewBox='0 0 20 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.73047 16.7648C6.00143 17.4831 6.6872 18 7.50009 18C8.31299 18 8.99876 17.4865 9.26972 16.7682C8.71107 16.8118 8.12231 16.8387 7.50009 16.8387C6.87788 16.8353 6.28912 16.8085 5.73047 16.7648Z' fill='white'/%3e%3cpath d='M14.331 13.4118H14.0801L12.4074 11.3979L11.5143 6.69897H11.5042C11.2333 5.05433 9.97881 3.74869 8.36976 3.39627C8.3731 3.38955 8.37979 3.38284 8.37979 3.37613L8.624 2.63772C8.74108 2.28529 8.53702 2 8.16905 2H6.83095C6.46298 2 6.25892 2.28529 6.37266 2.63772L6.61686 3.37613C6.62021 3.38284 6.62355 3.38955 6.6269 3.39627C5.01784 3.74869 3.76673 5.05433 3.49242 6.69897H3.48238L2.59255 11.3979L0.919938 13.4118H0.669046C0.30107 13.4118 0 13.7139 0 14.0831C0 14.4523 0.280999 14.8618 0.625558 14.996C0.625558 14.996 3.48573 16.0969 7.5 16.0969C11.5143 16.0969 14.3744 14.996 14.3744 14.996C14.719 14.8618 15 14.4523 15 14.0831C15 13.7139 14.6989 13.4118 14.331 13.4118ZM4.58296 6.95742L3.70317 11.8611L1.75624 14.0831H1.23439L3.21811 11.6933L4.15477 6.82652C4.28189 6.0579 4.68332 5.3799 5.24532 4.8798L5.49955 5.19866C5.03122 5.60478 4.68666 6.32305 4.58296 6.95742Z' fill='white'/%3e%3c/svg%3e"); diff --git a/core/themes/stable9/css/content_moderation/content_moderation.module.css b/core/themes/stable9/css/content_moderation/content_moderation.module.css index cf0115c09032..82eab95573b6 100644 --- a/core/themes/stable9/css/content_moderation/content_moderation.module.css +++ b/core/themes/stable9/css/content_moderation/content_moderation.module.css @@ -29,6 +29,6 @@ padding-bottom: 0.25em; } -.entity-moderation-form input[type=submit] { +.entity-moderation-form input[type="submit"] { margin-bottom: 1.2em; } diff --git a/core/themes/stable9/css/filter/filter.caption.css b/core/themes/stable9/css/filter/filter.caption.css index 34c0b1b8a8a2..b906775f89df 100644 --- a/core/themes/stable9/css/filter/filter.caption.css +++ b/core/themes/stable9/css/filter/filter.caption.css @@ -24,7 +24,7 @@ * * Based on http://codepen.io/flesler/pen/AEIFc. */ -.caption > figcaption[contenteditable=true]:empty::before { +.caption > figcaption[contenteditable="true"]:empty::before { content: attr(data-placeholder); font-style: italic; } diff --git a/core/themes/stable9/css/node/node.module.css b/core/themes/stable9/css/node/node.module.css index c564633691c3..60a4f30a7d76 100644 --- a/core/themes/stable9/css/node/node.module.css +++ b/core/themes/stable9/css/node/node.module.css @@ -13,10 +13,7 @@ } /* Wide screens */ -@media - screen and (min-width: 780px), - (orientation: landscape) and (min-device-height: 780px) { - +@media screen and (min-width: 780px), (orientation: landscape) and (min-device-height: 780px) { .layout-region-node-main, .layout-region-node-footer { float: left; /* LTR */ @@ -63,9 +60,7 @@ * toolbar is on, we need to suppress layout for the original media width + the * toolbar width (240px). In this case, 240px + 780px. */ -@media - screen and (max-width: 1020px) { - +@media screen and (max-width: 1020px) { .toolbar-vertical.toolbar-tray-open .layout-region-node-main, .toolbar-vertical.toolbar-tray-open .layout-region-node-footer, .toolbar-vertical.toolbar-tray-open .layout-region-node-secondary { diff --git a/core/themes/stable9/css/system/system.admin.css b/core/themes/stable9/css/system/system.admin.css index e6e09aaa7062..b922c87d5a6b 100644 --- a/core/themes/stable9/css/system/system.admin.css +++ b/core/themes/stable9/css/system/system.admin.css @@ -20,7 +20,7 @@ margin: 0 2.5em; } .layout-column { - float: left; /* LTR */ + float: left; /* LTR */ box-sizing: border-box; } [dir="rtl"] .layout-column { @@ -371,7 +371,7 @@ small .admin-link::after { margin: 0; padding: 0 0.7em; list-style-type: none; - border-right: 1px solid #cdcdcd; /* LTR */ + border-right: 1px solid #cdcdcd; /* LTR */ } [dir="rtl"] .theme-selector .operations li { float: right; diff --git a/core/themes/stable9/css/views_ui/views_ui.admin.css b/core/themes/stable9/css/views_ui/views_ui.admin.css index 2507d306578a..5e34e4675957 100644 --- a/core/themes/stable9/css/views_ui/views_ui.admin.css +++ b/core/themes/stable9/css/views_ui/views_ui.admin.css @@ -147,7 +147,8 @@ margin-bottom: 2em; } -@media screen and (min-width: 45em) { /* 720px */ +@media screen and (min-width: 45em) { + /* 720px */ .views-display-columns > * { float: left; /* LTR */ width: 32%; diff --git a/core/themes/stable9/css/views_ui/views_ui.admin.theme.css b/core/themes/stable9/css/views_ui/views_ui.admin.theme.css index 993229e26e77..a95a0c06a410 100644 --- a/core/themes/stable9/css/views_ui/views_ui.admin.theme.css +++ b/core/themes/stable9/css/views_ui/views_ui.admin.theme.css @@ -36,7 +36,9 @@ .views-admin a.icon { border: 1px solid #ddd; border-radius: 4px; - background: linear-gradient(-90deg, #fff 0, #e8e8e8 100%) no-repeat, repeat-y; + background: + linear-gradient(-90deg, #fff 0, #e8e8e8 100%) no-repeat, + repeat-y; box-shadow: 0 0 0 rgba(0, 0, 0, 0.3333) inset; } .views-admin a.icon:hover { @@ -78,28 +80,40 @@ background-position: center 3px; } .views-admin a.icon.add { - background-position: center 3px, left top; /* LTR */ + background-position: + center 3px, + left top; /* LTR */ } [dir="rtl"] .views-admin a.icon.add { - background-position: center 3px, right top; + background-position: + center 3px, + right top; } .views-admin .icon.delete { background-position: center -52px; } .views-admin a.icon.delete { - background-position: center -52px, left top; /* LTR */ + background-position: + center -52px, + left top; /* LTR */ } [dir="rtl"] .views-admin a.icon.delete { - background-position: center -52px, right top; + background-position: + center -52px, + right top; } .views-admin .icon.rearrange { background-position: center -111px; } .views-admin a.icon.rearrange { - background-position: center -111px, left top; /* LTR */ + background-position: + center -111px, + left top; /* LTR */ } [dir="rtl"] .views-admin a.icon.rearrange { - background-position: center -111px, right top; + background-position: + center -111px, + right top; } .views-displays .tabs a:hover > .icon.add { background-position: center -25px; @@ -484,7 +498,8 @@ td.group-title { vertical-align: top; } -@media screen and (min-width: 45em) { /* 720px */ +@media screen and (min-width: 45em) { + /* 720px */ .view-preview-form .form-type-textfield .description { white-space: nowrap; } diff --git a/core/themes/starterkit_theme/css/components/dialog.css b/core/themes/starterkit_theme/css/components/dialog.css index 16e17706030d..b66ca935eddd 100644 --- a/core/themes/starterkit_theme/css/components/dialog.css +++ b/core/themes/starterkit_theme/css/components/dialog.css @@ -13,7 +13,8 @@ background: #fff; } -@media all and (max-width: 48em) { /* 768px */ +@media all and (max-width: 48em) { + /* 768px */ .ui-dialog { width: 92% !important; } diff --git a/core/themes/starterkit_theme/css/components/messages.css b/core/themes/starterkit_theme/css/components/messages.css index be259304491d..4c41e4402e60 100644 --- a/core/themes/starterkit_theme/css/components/messages.css +++ b/core/themes/starterkit_theme/css/components/messages.css @@ -7,9 +7,9 @@ padding: 15px 20px 15px 35px; /* LTR */ word-wrap: break-word; border: 1px solid; - border-width: 1px 1px 1px 0; /* LTR */ + border-width: 1px 1px 1px 0; /* LTR */ border-radius: 2px; - background: no-repeat 10px 17px; /* LTR */ + background: no-repeat 10px 17px; /* LTR */ overflow-wrap: break-word; } [dir="rtl"] .messages { @@ -32,7 +32,7 @@ } .messages--status { color: #325e1c; - border-color: #c9e1bd #c9e1bd #c9e1bd transparent; /* LTR */ + border-color: #c9e1bd #c9e1bd #c9e1bd transparent; /* LTR */ background-color: #f3faef; background-image: url(../../images/icons/check.svg); box-shadow: -8px 0 0 #77b259; /* LTR */ @@ -44,7 +44,7 @@ } .messages--warning { color: #734c00; - border-color: #f4daa6 #f4daa6 #f4daa6 transparent; /* LTR */ + border-color: #f4daa6 #f4daa6 #f4daa6 transparent; /* LTR */ background-color: #fdf8ed; background-image: url(../../images/icons/warning.svg); box-shadow: -8px 0 0 #e09600; /* LTR */ @@ -55,7 +55,7 @@ } .messages--error { color: #a51b00; - border-color: #f9c9bf #f9c9bf #f9c9bf transparent; /* LTR */ + border-color: #f9c9bf #f9c9bf #f9c9bf transparent; /* LTR */ background-color: #fcf4f2; background-image: url(../../images/icons/error.svg); box-shadow: -8px 0 0 #e62600; /* LTR */ diff --git a/core/themes/starterkit_theme/css/components/progress.css b/core/themes/starterkit_theme/css/components/progress.css index 1579776f5258..f8561b2eaf60 100644 --- a/core/themes/starterkit_theme/css/components/progress.css +++ b/core/themes/starterkit_theme/css/components/progress.css @@ -23,9 +23,7 @@ border: 1px #07629a solid; border-radius: 10em; background: #057ec9; - background-image: - linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)), - linear-gradient(to right bottom, #0094f0 0%, #0094f0 25%, #007ecc 25%, #007ecc 50%, #0094f0 50%, #0094f0 75%, #0094f0 100%); + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)), linear-gradient(to right bottom, #0094f0 0%, #0094f0 25%, #007ecc 25%, #007ecc 50%, #0094f0 50%, #0094f0 75%, #0094f0 100%); background-size: 40px 40px; } [dir="rtl"] .progress__bar { @@ -47,6 +45,14 @@ * Progress bar animations. */ @keyframes animate-stripes { - 0% { background-position: 0 0, 0 0; } - 100% { background-position: 0 0, -80px 0; } + 0% { + background-position: + 0 0, + 0 0; + } + 100% { + background-position: + 0 0, + -80px 0; + } } diff --git a/core/yarn.lock b/core/yarn.lock index 907fc7f0cbe5..fac528df3d6d 100644 --- a/core/yarn.lock +++ b/core/yarn.lock @@ -1869,6 +1869,7 @@ __metadata: stylelint-config-standard: "npm:^34.0.0" stylelint-formatter-gitlab: "npm:^1.0.2" stylelint-order: "npm:^6.0.3" + stylelint-prettier: "npm:^4.1.0" tabbable: "npm:^6.1.2" terser: "npm:^5.19.0" terser-webpack-plugin: "npm:^5.3.9" @@ -7660,6 +7661,18 @@ __metadata: languageName: node linkType: hard +"stylelint-prettier@npm:^4.1.0": + version: 4.1.0 + resolution: "stylelint-prettier@npm:4.1.0" + dependencies: + prettier-linter-helpers: "npm:^1.0.0" + peerDependencies: + prettier: ">=3.0.0" + stylelint: ">=15.8.0" + checksum: 10c0/3824fa7fb78ac01f612490af677095c78a22d4a74fc49d0fa16c1c4345e7a015d3a62277ae5c4d7dbbf303c4fdc0eabe2709db3b8eac8e2c8c2130a3d4d6c62d + languageName: node + linkType: hard + "stylelint@npm:^15.10.1": version: 15.11.0 resolution: "stylelint@npm:15.11.0" -- GitLab