From eb3c7a019fab69886f56cc1a057d889e06e05f28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A1bor=20Hojtsy?= <gabor@hojtsy.hu>
Date: Thu, 15 Oct 2020 13:45:52 +0200
Subject: [PATCH] =?UTF-8?q?Issue=20#3072772=20by=20katherined,=20lauriii,?=
=?UTF-8?q?=20bnjmnm,=20DyanneNova,=20G=C3=A1bor=20Hojtsy,=20ckrina,=20ant?=
=?UTF-8?q?onellasev:=20Initial=20Claro=20design=20for=20the=20modules=20p?=
=?UTF-8?q?age?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
core/themes/claro/claro.theme | 35 +++
core/themes/claro/css/base/elements.css | 2 +-
core/themes/claro/css/base/elements.pcss.css | 2 +-
core/themes/claro/css/base/variables.pcss.css | 1 +
.../claro/css/components/action-link.css | 70 ++++++
.../claro/css/components/action-link.pcss.css | 58 +++++
core/themes/claro/css/components/details.css | 2 +-
.../claro/css/components/details.pcss.css | 2 +-
.../css/components/system-admin--modules.css | 203 +++++++++-------
.../components/system-admin--modules.pcss.css | 229 +++++++++++-------
core/themes/claro/images/icons/00309e/key.svg | 1 +
.../images/icons/00309e/questionmark.svg | 1 +
core/themes/claro/images/icons/0036b1/key.svg | 1 +
.../images/icons/0036b1/questionmark.svg | 1 +
core/themes/claro/images/icons/545560/key.svg | 1 +
.../images/icons/545560/questionmark.svg | 1 +
core/themes/claro/images/icons/ab1b1b/key.svg | 1 +
.../images/icons/ab1b1b/questionmark.svg | 1 +
core/themes/claro/images/icons/c11f1f/key.svg | 1 +
.../images/icons/c11f1f/questionmark.svg | 1 +
core/themes/claro/images/icons/d72222/key.svg | 1 +
.../images/icons/d72222/questionmark.svg | 1 +
.../claro/images/icons/windowText/key.svg | 1 +
.../images/icons/windowText/questionmark.svg | 1 +
.../admin/system-modules-details.html.twig | 75 ++++++
core/themes/claro/templates/details.html.twig | 7 +-
26 files changed, 518 insertions(+), 182 deletions(-)
create mode 100644 core/themes/claro/images/icons/00309e/key.svg
create mode 100644 core/themes/claro/images/icons/00309e/questionmark.svg
create mode 100644 core/themes/claro/images/icons/0036b1/key.svg
create mode 100644 core/themes/claro/images/icons/0036b1/questionmark.svg
create mode 100644 core/themes/claro/images/icons/545560/key.svg
create mode 100644 core/themes/claro/images/icons/545560/questionmark.svg
create mode 100644 core/themes/claro/images/icons/ab1b1b/key.svg
create mode 100644 core/themes/claro/images/icons/ab1b1b/questionmark.svg
create mode 100644 core/themes/claro/images/icons/c11f1f/key.svg
create mode 100644 core/themes/claro/images/icons/c11f1f/questionmark.svg
create mode 100644 core/themes/claro/images/icons/d72222/key.svg
create mode 100644 core/themes/claro/images/icons/d72222/questionmark.svg
create mode 100644 core/themes/claro/images/icons/windowText/key.svg
create mode 100644 core/themes/claro/images/icons/windowText/questionmark.svg
create mode 100644 core/themes/claro/templates/admin/system-modules-details.html.twig
diff --git a/core/themes/claro/claro.theme b/core/themes/claro/claro.theme
index 6cc8734a4063..7ecf9940b8b4 100644
--- a/core/themes/claro/claro.theme
+++ b/core/themes/claro/claro.theme
@@ -724,6 +724,41 @@ function claro_form_views_exposed_form_alter(&$form, FormStateInterface $form_st
$form['#attributes']['aria-label'] = t('Filter the contents of the %view_title view', ['%view_title' => $view_title]);
}
+/**
+ * Implements hook_form_FORM_ID_alter() for the system_modules form.
+ */
+function claro_form_system_modules_alter(&$form, FormStateInterface $form_state) {
+ if (isset($form['filters'])) {
+ $form['filters']['#attributes']['class'][] = 'modules-table-filter';
+ if (isset($form['filters']['text'])) {
+ unset($form['filters']['text']['#title_display']);
+ $form['filters']['text']['#title'] = t('Filter');
+ }
+ }
+
+ // Convert module links to action links.
+ foreach (Element::children($form['modules']) as $key) {
+ $link_key_to_action_link_type = [
+ 'help' => 'questionmark',
+ 'permissions' => 'key',
+ 'configure' => 'cog',
+ ];
+ if (isset($form['modules'][$key]['#type']) && $form['modules'][$key]['#type'] === 'details') {
+ $form['modules'][$key]['#module_package_listing'] = TRUE;
+ foreach (Element::children($form['modules'][$key]) as $module_key) {
+ if (isset($form['modules'][$key][$module_key]['links'])) {
+ foreach ($form['modules'][$key][$module_key]['links'] as $link_key => &$link) {
+ $action_link_type = $link_key_to_action_link_type[$link_key];
+ $link['#options']['attributes']['class'][] = 'action-link';
+ $link['#options']['attributes']['class'][] = 'action-link--small';
+ $link['#options']['attributes']['class'][] = "action-link--icon-$action_link_type";
+ }
+ }
+ }
+ }
+ }
+}
+
/**
* Implements hook_preprocess_form_element().
*/
diff --git a/core/themes/claro/css/base/elements.css b/core/themes/claro/css/base/elements.css
index 345ffc387d56..fb2be4b3ed9a 100644
--- a/core/themes/claro/css/base/elements.css
+++ b/core/themes/claro/css/base/elements.css
@@ -222,7 +222,7 @@ pre {
}
details {
- line-height: 1.295em;
+ line-height: 1.295rem;
}
details summary {
diff --git a/core/themes/claro/css/base/elements.pcss.css b/core/themes/claro/css/base/elements.pcss.css
index 0e1591ed9e0e..27c2148d3224 100644
--- a/core/themes/claro/css/base/elements.pcss.css
+++ b/core/themes/claro/css/base/elements.pcss.css
@@ -184,7 +184,7 @@ pre {
white-space: pre-wrap;
}
details {
- line-height: 1.295em;
+ line-height: var(--details-line-height);
}
details summary {
padding: 0.95em 1.45em;
diff --git a/core/themes/claro/css/base/variables.pcss.css b/core/themes/claro/css/base/variables.pcss.css
index 290f3cef1e62..a11c984ad0bd 100644
--- a/core/themes/claro/css/base/variables.pcss.css
+++ b/core/themes/claro/css/base/variables.pcss.css
@@ -133,6 +133,7 @@
--details-bg-color-transition-duration: 0.12s;
--details-box-shadow-transition-duration: 0.2s;
--details-transform-transition-duration: 0.12s;
+ --details-line-height: 1.295rem;
/**
* Buttons.
*/
diff --git a/core/themes/claro/css/components/action-link.css b/core/themes/claro/css/components/action-link.css
index 5e7ef9affc6f..adf2a4033ec9 100644
--- a/core/themes/claro/css/components/action-link.css
+++ b/core/themes/claro/css/components/action-link.css
@@ -452,3 +452,73 @@
background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' viewBox='0 0 16 16' fill='windowText' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.0106399 1.6964404-.0106399.0106426 12.072 12.07205-.6964.696467-2.077627-2.077613c-1.015347.38784-2.1292399.602013-3.297973.602013-3.6363601 0-6.7418187-2.073333-8-5 .64703865-1.5050798 1.7826266-2.7844797 3.2277199-3.6722797l-2.2277199-2.2277203.7071066-.707096zm2.98936 6.3035598c0-.54608.1459066-1.0580666.4008533-1.4991333l4.0982932 4.0982801c-.4410666.25496-.9530666.400853-1.4991464.400853-1.6568535 0-3-1.343146-3-3z'/%3e%3cpath d='m5.1510932 3.4439603 1.75984 1.75984c.3376-.1315867.7048933-.2038 1.0890666-.2038 1.6568533-.0000003 3.0000002 1.3431466 3.0000002 2.9999997 0 .3841735-.07221.7514668-.2038 1.0890668l2.344093 2.3440932c1.269973-.871746 2.26864-2.0582932 2.859707-3.43316-1.258134-2.9266664-4.36364-5-8-5-.9987733 0-1.9575066.1564134-2.8489066.44396z'/%3e%3c/svg%3e");
}
}
+
+/* Key */
+
+.action-link--icon-key::before {
+ content: "";
+ background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%23545560'/%3e%3c/svg%3e");
+}
+
+.action-link--icon-key:hover::before {
+ background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%230036B1'/%3e%3c/svg%3e");
+}
+
+.action-link--icon-key:active::before {
+ background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%2300309e'/%3e%3c/svg%3e");
+}
+
+/* Key — danger */
+
+.action-link--icon-key.action-link--danger::before {
+ background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%23d72222'/%3e%3c/svg%3e");
+}
+
+.action-link--icon-key.action-link--danger:hover::before {
+ background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%23c11f1f'/%3e%3c/svg%3e");
+}
+
+.action-link--icon-key.action-link--danger:active::before {
+ background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%23ab1b1b'/%3e%3c/svg%3e");
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .action-link--icon-key.action-link--icon-key.action-link--icon-key::before {
+ background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='windowText'/%3e%3c/svg%3e") !important;
+ }
+}
+
+/* Question Mark */
+
+.action-link--icon-questionmark::before {
+ content: "";
+ background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%23545560'/%3e%3c/svg%3e");
+}
+
+.action-link--icon-questionmark:hover::before {
+ background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%230036B1'/%3e%3c/svg%3e");
+}
+
+.action-link--icon-questionmark:active::before {
+ background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%2300309e'/%3e%3c/svg%3e");
+}
+
+/* Question Mark - danger */
+
+.action-link--icon-questionmark.action-link--danger::before {
+ background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%23d72222'/%3e%3c/svg%3e");
+}
+
+.action-link--icon-questionmark.action-link--danger:hover::before {
+ background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%23c11f1f'/%3e%3c/svg%3e");
+}
+
+.action-link--icon-questionmark.action-link--danger:active::before {
+ background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%23ab1b1b'/%3e%3c/svg%3e");
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .action-link--icon-questionmark.action-link--icon-questionmark.action-link--icon-questionmark::before {
+ background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='windowText'/%3e%3c/svg%3e") !important;
+ }
+}
diff --git a/core/themes/claro/css/components/action-link.pcss.css b/core/themes/claro/css/components/action-link.pcss.css
index c281c0e600bc..4fd41de11175 100644
--- a/core/themes/claro/css/components/action-link.pcss.css
+++ b/core/themes/claro/css/components/action-link.pcss.css
@@ -384,3 +384,61 @@
background-image: url(../../images/icons/windowText/hide.svg);
}
}
+
+/* Key */
+.action-link--icon-key::before {
+ content: "";
+ background-image: url("../../images/icons/545560/key.svg");
+}
+.action-link--icon-key:hover::before {
+ background-image: url("../../images/icons/0036b1/key.svg");
+}
+.action-link--icon-key:active::before {
+ background-image: url("../../images/icons/00309e/key.svg");
+}
+
+/* Key — danger */
+.action-link--icon-key.action-link--danger::before {
+ background-image: url("../../images/icons/d72222/key.svg");
+}
+.action-link--icon-key.action-link--danger:hover::before {
+ background-image: url("../../images/icons/c11f1f/key.svg");
+}
+.action-link--icon-key.action-link--danger:active::before {
+ background-image: url("../../images/icons/ab1b1b/key.svg");
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .action-link--icon-key.action-link--icon-key.action-link--icon-key::before {
+ background-image: url("../../images/icons/windowText/key.svg") !important;
+ }
+}
+
+/* Question Mark */
+.action-link--icon-questionmark::before {
+ content: "";
+ background-image: url("../../images/icons/545560/questionmark.svg");
+}
+.action-link--icon-questionmark:hover::before {
+ background-image: url("../../images/icons/0036b1/questionmark.svg");
+}
+.action-link--icon-questionmark:active::before {
+ background-image: url("../../images/icons/00309e/questionmark.svg");
+}
+
+/* Question Mark - danger */
+.action-link--icon-questionmark.action-link--danger::before {
+ background-image: url("../../images/icons/d72222/questionmark.svg");
+}
+.action-link--icon-questionmark.action-link--danger:hover::before {
+ background-image: url("../../images/icons/c11f1f/questionmark.svg");
+}
+.action-link--icon-questionmark.action-link--danger:active::before {
+ background-image: url("../../images/icons/ab1b1b/questionmark.svg");
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .action-link--icon-questionmark.action-link--icon-questionmark.action-link--icon-questionmark::before {
+ background-image: url("../../images/icons/windowText/questionmark.svg") !important;
+ }
+}
diff --git a/core/themes/claro/css/components/details.css b/core/themes/claro/css/components/details.css
index a078e3ada920..fd5ba82dd05d 100644
--- a/core/themes/claro/css/components/details.css
+++ b/core/themes/claro/css/components/details.css
@@ -138,7 +138,7 @@
.claro-details__summary::before {
position: absolute;
- top: 50%;
+ top: 1.75rem;
left: 0.75rem; /* LTR */
display: inline-block;
width: 1rem;
diff --git a/core/themes/claro/css/components/details.pcss.css b/core/themes/claro/css/components/details.pcss.css
index b9f8452bf1d2..2e4330a712c1 100644
--- a/core/themes/claro/css/components/details.pcss.css
+++ b/core/themes/claro/css/components/details.pcss.css
@@ -132,7 +132,7 @@
.claro-details__summary::before {
position: absolute;
- top: 50%;
+ top: calc(var(--space-m) + var(--space-s));
left: var(--space-s); /* LTR */
display: inline-block;
width: var(--space-m);
diff --git a/core/themes/claro/css/components/system-admin--modules.css b/core/themes/claro/css/components/system-admin--modules.css
index ab2f4e3457dd..84641a0ee1a2 100644
--- a/core/themes/claro/css/components/system-admin--modules.css
+++ b/core/themes/claro/css/components/system-admin--modules.css
@@ -10,154 +10,177 @@
* System admin module: modules page.
*/
-.system-modules thead > tr {
- border: 0;
+.modules-table-filter {
+ padding: 0.25rem 1.5rem;
+ border: 1px solid #d4d4d8;
+ border-radius: 2px 2px 0 0;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
-.system-modules div.incompatible {
- font-weight: bold;
+/* Visually hide the module filter input description. */
+
+.modules-table-filter .form-item__description {
+ position: absolute !important;
+ overflow: hidden;
+ clip: rect(1px, 1px, 1px, 1px);
+ width: 1px;
+ height: 1px;
+ word-wrap: normal;
}
-.system-modules td.checkbox {
- width: 4%;
- min-width: 25px;
- padding-left: 1rem; /* LTR */
+.claro-details.claro-details--package-listing,
+.claro-details.module-list__module-details {
+ margin-top: 2rem;
+ margin-bottom: 0;
+ border: none;
+ box-shadow: none;
}
-[dir="rtl"] .system-modules td.checkbox {
- padding-right: 1rem;
+.claro-details__wrapper.claro-details__wrapper--package-listing {
+ margin: 0;
}
-.system-modules td.module {
- width: 25%;
+.claro-details__summary.claro-details__summary--package-listing {
+ color: #222330;
+ border-radius: 4px;
+ background: #f3f4f9;
+ font-size: 1.125rem; /* 18px */
+ line-height: 1.424rem; /* 23px */
}
-.system-modules td {
- vertical-align: top;
+.module-list {
+ margin-top: 0;
}
-.system-modules label,
-.system-modules-uninstall label {
- color: #1d1d1d;
- font-size: 1.15em;
+.module-list__module {
+ color: #222330;
+ border-bottom: 1px solid #d4d4d8;
+ background: none;
}
-.system-modules details {
- color: #5c5c5b;
+.module-list__module:hover {
+ background: none;
}
-.system-modules details[open] {
- overflow: visible;
+.module-list__module td {
height: auto;
- white-space: normal;
+ padding: 1rem calc(1rem - 2px);
+ vertical-align: top;
}
-.system-modules details[open] summary .text {
- text-transform: none;
- -webkit-hyphens: auto;
- -ms-hyphens: auto;
- hyphens: auto;
-}
+/* Set width only on wider view where description is visible by default. */
-.system-modules td details a {
- color: #5c5c5b;
- border: 0;
+@media screen and (min-width: 60em) {
+ td.module-list__module {
+ width: 25%;
+ }
}
-.system-modules td details {
- margin: 0;
- border: 0;
+.module-list__module-name {
+ font-weight: bold;
}
-.system-modules td details summary {
- padding: 0;
- cursor: default;
- text-transform: none;
- font-weight: normal;
+.module-list__checkbox {
+ padding-left: 0.6875rem; /* LTR */
+ text-align: left; /* LTR */
}
-.system-modules td {
- padding-left: 0; /* LTR */
+[dir="rtl"] .module-list__checkbox {
+ padding-right: 0.6875rem;
+ padding-left: calc(1rem - 2px);
+ text-align: right;
}
-[dir="rtl"] .system-modules td {
- padding-right: 0;
- padding-left: 12px;
+.module-list__checkbox .form-type--checkbox {
+ margin: 0;
+ line-height: 1.295rem;
}
-@media screen and (max-width: 40em) {
- .system-modules td.name {
- width: 20%;
- }
- .system-modules td.description {
- width: 40%;
- }
+.module-list__checkbox .form-checkbox:not([disabled]) {
+ cursor: pointer;
}
-.system-modules .requirements {
- max-width: 490px;
- padding: 5px 0;
+td.module-list__checkbox {
+ width: 4%;
}
-.system-modules .links {
- overflow: hidden; /* prevents collapse */
+td.module-list__description {
+ padding-top: 0;
+ padding-right: 0;
+ padding-bottom: 0;
}
-.system-modules .checkbox {
- margin: 0 5px;
+.claro-details.module-list__module-details {
+ margin: 0;
}
-.system-modules .checkbox .form-item {
- margin-top: 0;
- margin-bottom: 0;
+.claro-details__summary.module-list__module-summary {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ font-weight: normal;
+ line-height: 1.295rem;
}
-.admin-requirements,
-.admin-required {
- color: #666;
- font-size: 0.9em;
+.module-details__description {
+ font-size: 0.75rem;
+ line-height: 0.9375rem;
}
-.admin-enabled {
- color: #080;
+.claro-details__wrapper.module-details__wrapper {
+ margin-top: 0;
+ margin-bottom: 0;
}
-.admin-missing {
- color: #f00;
+.module-details__requirements {
+ margin-bottom: 1rem;
}
-.module-link {
- display: block;
- float: left; /* LTR */
- margin-top: 2px;
- padding: 2px 20px;
- white-space: nowrap;
+.module-details__links {
+ position: relative;
+ /* Negative margin matches the value of action link's top padding. */
+ margin-top: -0.375rem;
+ margin-bottom: 1rem;
}
-[dir="rtl"] .module-link {
- float: right;
+.module-details__links .action-link + .action-link {
+ margin-left: 0; /* LTR */
}
-.module-link-help {
- background: url("data:image/svg+xml,%3csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393-.168.148-.35.299-.545.447l-.203.189-.141.129-.096.17-.021.235v.63h-2.001v-.704c.026-.396.078-.73.204-.999.125-.269.271-.498.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18c.098-.152.168-.323.168-.518 0-.552-.447-1-1-1s-1.002.448-1.002 1h-2c0-1.657 1.343-3 3.002-3 1.656 0 3 1.343 3 3zm-1.75 6.619c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625z' fill='%23787878'/%3e%3c/svg%3e") 0 50% no-repeat; /* LTR */
+[dir="rtl"] .module-details__links .action-link + .action-link {
+ margin-right: 0;
}
-[dir="rtl"] .module-link-help {
- background-position: top 50% right 0;
+.claro-details .tableresponsive-toggle {
+ padding: 1rem 1rem 1rem 0;
}
-.module-link-permissions {
- background: url("data:image/svg+xml,%3csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m13.727 7.714c-1.309-1.308-3.248-1.569-4.827-.818l-5.899-5.896h-3.001v2h1v1.618l.378.382h1.622v1h1v1.622h1.622l.864.862-.986 1.016.992.99c-.062 1.162.335 2.346 1.223 3.234 1.66 1.653 4.352 1.653 6.012 0 1.658-1.66 1.658-4.351 0-6.01zm-.829 5.182c-.646.646-1.693.646-2.338 0-.646-.646-.646-1.692 0-2.338.645-.646 1.688-.646 2.338 0 .645.646.645 1.694 0 2.338z' fill='%23787878'/%3e%3c/svg%3e") 0 50% no-repeat; /* LTR */
+.claro-details .tableresponsive-toggle::before {
+ /* This adjustment is necessary for better alignment with the adjacent button
+ text. */
+ position: relative;
+ top: -1px;
+ display: inline-block;
+ width: 2rem;
+ height: 1.25rem;
+ content: "";
+ cursor: pointer;
+ vertical-align: text-top;
+ background: url("data:image/svg+xml,%3csvg height='16' stroke='%23545560' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e") no-repeat center;
+ background-size: contain;
}
-[dir="rtl"] .module-link-permissions {
- background-position: top 50% right 0;
+.claro-details .tableresponsive-toggle:hover {
+ color: #0036b1;
+ background-color: #f0f5fd;
}
-.module-link-configure {
- background: url("data:image/svg+xml,%3csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m15.176 9.041c.045-.327.076-.658.076-.998 0-.36-.035-.71-.086-1.056l-2.275-.293c-.115-.426-.283-.827-.498-1.201l1.396-1.808c-.416-.551-.906-1.039-1.459-1.452l-1.807 1.391c-.373-.215-.774-.383-1.2-.499l-.292-2.252c-.338-.048-.677-.081-1.029-.081s-.694.033-1.032.082l-.291 2.251c-.426.116-.826.284-1.2.499l-1.805-1.391c-.552.413-1.044.901-1.459 1.452l1.395 1.808c-.215.374-.383.774-.499 1.2l-2.276.294c-.05.346-.085.696-.085 1.056 0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2l-1.417 1.836c.411.55.896 1.038 1.443 1.452l1.842-1.42c.374.215.774.383 1.2.498l.298 2.311c.337.047.677.08 1.025.08s.688-.033 1.021-.08l.299-2.311c.426-.115.826-.283 1.201-.498l1.842 1.42c.547-.414 1.031-.902 1.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514c-1.406 0-2.543-1.137-2.543-2.541 0-1.402 1.137-2.541 2.543-2.541 1.402 0 2.541 1.138 2.541 2.541 0 1.404-1.139 2.541-2.541 2.541z' fill='%23787878'/%3e%3c/svg%3e") 0 50% no-repeat; /* LTR */
+.claro-details .tableresponsive-toggle:hover::before {
+ background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%230036b1' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e");
}
-[dir="rtl"] .module-link-configure {
- background-position: top 50% right 0;
+.claro-details .tableresponsive-toggle-columns button {
+ margin-top: 0.5rem;
+ text-decoration: none;
+ color: #545560;
+ font-weight: bold;
}
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 8450d0341c8a..1d81598b2cf1 100644
--- a/core/themes/claro/css/components/system-admin--modules.pcss.css
+++ b/core/themes/claro/css/components/system-admin--modules.pcss.css
@@ -3,123 +3,178 @@
* System admin module: modules page.
*/
-.system-modules thead > tr {
- border: 0;
+@import "../base/variables.pcss.css";
+
+:root {
+ --module-table-cell-padding-vertical: var(--space-m);
+ --module-table-cell-padding-horizontal: calc(var(--space-m) - (var(--input-border-size) * 2));
}
-.system-modules div.incompatible {
- font-weight: bold;
+
+.modules-table-filter {
+ padding: 0.25rem var(--space-l);
+ border: 1px solid var(--color-lightgray);
+ border-radius: 2px 2px 0 0;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
-.system-modules td.checkbox {
- width: 4%;
- min-width: 25px;
- padding-left: 1rem; /* LTR */
+
+/* Visually hide the module filter input description. */
+.modules-table-filter .form-item__description {
+ position: absolute !important;
+ overflow: hidden;
+ clip: rect(1px, 1px, 1px, 1px);
+ width: 1px;
+ height: 1px;
+ word-wrap: normal;
}
-[dir="rtl"] .system-modules td.checkbox {
- padding-right: 1rem;
+
+.claro-details.claro-details--package-listing,
+.claro-details.module-list__module-details {
+ margin-top: 2rem;
+ margin-bottom: 0;
+ border: none;
+ box-shadow: none;
}
-.system-modules td.module {
- width: 25%;
+
+.claro-details__wrapper.claro-details__wrapper--package-listing {
+ margin: 0;
}
-.system-modules td {
- vertical-align: top;
+
+.claro-details__summary.claro-details__summary--package-listing {
+ color: var(--color-text);
+ border-radius: 4px;
+ background: var(--color-whitesmoke);
+ font-size: 1.125rem; /* 18px */
+ line-height: 1.424rem; /* 23px */
}
-.system-modules label,
-.system-modules-uninstall label {
- color: #1d1d1d;
- font-size: 1.15em;
+
+.module-list {
+ margin-top: 0;
}
-.system-modules details {
- color: #5c5c5b;
+
+.module-list__module {
+ color: var(--color-text);
+ border-bottom: 1px solid var(--color-lightgray);
+ background: none;
+}
+
+.module-list__module:hover {
+ background: none;
}
-.system-modules details[open] {
- overflow: visible;
+
+.module-list__module td {
height: auto;
- white-space: normal;
+ padding: var(--module-table-cell-padding-vertical) var(--module-table-cell-padding-horizontal);
+ vertical-align: top;
+}
+
+/* Set width only on wider view where description is visible by default. */
+@media screen and (min-width: 60em) {
+ td.module-list__module {
+ width: 25%;
+ }
+}
+
+.module-list__module-name {
+ font-weight: bold;
}
-.system-modules details[open] summary .text {
- text-transform: none;
- hyphens: auto;
+
+.module-list__checkbox {
+ padding-left: 0.6875rem; /* LTR */
+ text-align: left; /* LTR */
}
-.system-modules td details a {
- color: #5c5c5b;
- border: 0;
+[dir="rtl"] .module-list__checkbox {
+ padding-right: 0.6875rem;
+ padding-left: var(--module-table-cell-padding-horizontal);
+ text-align: right;
}
-.system-modules td details {
+
+.module-list__checkbox .form-type--checkbox {
margin: 0;
- border: 0;
+ line-height: var(--details-line-height);
}
-.system-modules td details summary {
- padding: 0;
- cursor: default;
- text-transform: none;
- font-weight: normal;
+
+.module-list__checkbox .form-checkbox:not([disabled]) {
+ cursor: pointer;
}
-.system-modules td {
- padding-left: 0; /* LTR */
+
+td.module-list__checkbox {
+ width: 4%;
}
-[dir="rtl"] .system-modules td {
+
+td.module-list__description {
+ padding-top: 0;
padding-right: 0;
- padding-left: 12px;
+ padding-bottom: 0;
}
-@media screen and (max-width: 40em) {
- .system-modules td.name {
- width: 20%;
- }
- .system-modules td.description {
- width: 40%;
- }
-}
-.system-modules .requirements {
- max-width: 490px;
- padding: 5px 0;
+.claro-details.module-list__module-details {
+ margin: 0;
}
-.system-modules .links {
- overflow: hidden; /* prevents collapse */
+
+.claro-details__summary.module-list__module-summary {
+ padding-top: var(--module-table-cell-padding-vertical);
+ padding-bottom: var(--module-table-cell-padding-vertical);
+ font-weight: normal;
+ line-height: var(--details-line-height);
}
-.system-modules .checkbox {
- margin: 0 5px;
+
+.module-details__description {
+ font-size: var(--space-s);
+ line-height: 0.9375rem;
}
-.system-modules .checkbox .form-item {
+
+.claro-details__wrapper.module-details__wrapper {
margin-top: 0;
margin-bottom: 0;
}
-.admin-requirements,
-.admin-required {
- color: #666;
- font-size: 0.9em;
-}
-.admin-enabled {
- color: #080;
-}
-.admin-missing {
- color: #f00;
-}
-.module-link {
- display: block;
- float: left; /* LTR */
- margin-top: 2px;
- padding: 2px 20px;
- white-space: nowrap;
+
+.module-details__requirements {
+ margin-bottom: var(--space-m);
}
-[dir="rtl"] .module-link {
- float: right;
+
+.module-details__links {
+ position: relative;
+ /* Negative margin matches the value of action link's top padding. */
+ margin-top: calc((var(--space-s) - ((var(--space-l) - var(--space-s)) / 2)) * -1);
+ margin-bottom: var(--space-m);
}
-.module-link-help {
- background: url(../../images/core/787878/questionmark-disc.svg) 0 50% no-repeat; /* LTR */
+
+.module-details__links .action-link + .action-link {
+ margin-left: 0; /* LTR */
}
-[dir="rtl"] .module-link-help {
- background-position: top 50% right 0;
+[dir="rtl"] .module-details__links .action-link + .action-link {
+ margin-right: 0;
}
-.module-link-permissions {
- background: url(../../images/core/787878/key.svg) 0 50% no-repeat; /* LTR */
+
+.claro-details .tableresponsive-toggle {
+ padding: var(--space-m) var(--space-m) var(--space-m) 0;
+}
+.claro-details .tableresponsive-toggle::before {
+ /* This adjustment is necessary for better alignment with the adjacent button
+ text. */
+ position: relative;
+ top: -1px;
+ display: inline-block;
+ width: calc(var(--space-m) * 2);
+ height: 1.25rem;
+ content: "";
+ cursor: pointer;
+ vertical-align: text-top;
+ background: url(../../images/icons/545560/plus.svg) no-repeat center;
+ background-size: contain;
}
-[dir="rtl"] .module-link-permissions {
- background-position: top 50% right 0;
+
+.claro-details .tableresponsive-toggle:hover {
+ color: var(--color-absolutezero-hover);
+ background-color: var(--color-bgblue-hover);
}
-.module-link-configure {
- background: url(../../images/core/787878/cog.svg) 0 50% no-repeat; /* LTR */
+.claro-details .tableresponsive-toggle:hover::before {
+ background-image: url(../../images/icons/0036b1/plus.svg);
}
-[dir="rtl"] .module-link-configure {
- background-position: top 50% right 0;
+
+.claro-details .tableresponsive-toggle-columns button {
+ margin-top: var(--space-xs);
+ text-decoration: none;
+ color: var(--color-davysgray);
+ font-weight: bold;
}
diff --git a/core/themes/claro/images/icons/00309e/key.svg b/core/themes/claro/images/icons/00309e/key.svg
new file mode 100644
index 000000000000..91dc9783fd6e
--- /dev/null
+++ b/core/themes/claro/images/icons/00309e/key.svg
@@ -0,0 +1 @@
+<svg width="15" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z" fill="#00309e"/></svg>
diff --git a/core/themes/claro/images/icons/00309e/questionmark.svg b/core/themes/claro/images/icons/00309e/questionmark.svg
new file mode 100644
index 000000000000..caf07449d96b
--- /dev/null
+++ b/core/themes/claro/images/icons/00309e/questionmark.svg
@@ -0,0 +1 @@
+<svg width="15" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z" fill="#00309e"/></svg>
diff --git a/core/themes/claro/images/icons/0036b1/key.svg b/core/themes/claro/images/icons/0036b1/key.svg
new file mode 100644
index 000000000000..e4ba6ef1fb15
--- /dev/null
+++ b/core/themes/claro/images/icons/0036b1/key.svg
@@ -0,0 +1 @@
+<svg width="15" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z" fill="#0036B1"/></svg>
diff --git a/core/themes/claro/images/icons/0036b1/questionmark.svg b/core/themes/claro/images/icons/0036b1/questionmark.svg
new file mode 100644
index 000000000000..81dd3ef440d4
--- /dev/null
+++ b/core/themes/claro/images/icons/0036b1/questionmark.svg
@@ -0,0 +1 @@
+<svg width="15" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z" fill="#0036B1"/></svg>
diff --git a/core/themes/claro/images/icons/545560/key.svg b/core/themes/claro/images/icons/545560/key.svg
new file mode 100644
index 000000000000..b41eaf39c57b
--- /dev/null
+++ b/core/themes/claro/images/icons/545560/key.svg
@@ -0,0 +1 @@
+<svg width="15" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z" fill="#545560"/></svg>
diff --git a/core/themes/claro/images/icons/545560/questionmark.svg b/core/themes/claro/images/icons/545560/questionmark.svg
new file mode 100644
index 000000000000..e8f23cc5abc0
--- /dev/null
+++ b/core/themes/claro/images/icons/545560/questionmark.svg
@@ -0,0 +1 @@
+<svg width="15" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z" fill="#545560"/></svg>
diff --git a/core/themes/claro/images/icons/ab1b1b/key.svg b/core/themes/claro/images/icons/ab1b1b/key.svg
new file mode 100644
index 000000000000..78a74f3031be
--- /dev/null
+++ b/core/themes/claro/images/icons/ab1b1b/key.svg
@@ -0,0 +1 @@
+<svg width="15" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z" fill="#ab1b1b"/></svg>
diff --git a/core/themes/claro/images/icons/ab1b1b/questionmark.svg b/core/themes/claro/images/icons/ab1b1b/questionmark.svg
new file mode 100644
index 000000000000..d374fe1d1211
--- /dev/null
+++ b/core/themes/claro/images/icons/ab1b1b/questionmark.svg
@@ -0,0 +1 @@
+<svg width="15" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z" fill="#ab1b1b"/></svg>
diff --git a/core/themes/claro/images/icons/c11f1f/key.svg b/core/themes/claro/images/icons/c11f1f/key.svg
new file mode 100644
index 000000000000..a457a7eb9706
--- /dev/null
+++ b/core/themes/claro/images/icons/c11f1f/key.svg
@@ -0,0 +1 @@
+<svg width="15" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z" fill="#c11f1f"/></svg>
diff --git a/core/themes/claro/images/icons/c11f1f/questionmark.svg b/core/themes/claro/images/icons/c11f1f/questionmark.svg
new file mode 100644
index 000000000000..50465c47b40b
--- /dev/null
+++ b/core/themes/claro/images/icons/c11f1f/questionmark.svg
@@ -0,0 +1 @@
+<svg width="15" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z" fill="#c11f1f"/></svg>
diff --git a/core/themes/claro/images/icons/d72222/key.svg b/core/themes/claro/images/icons/d72222/key.svg
new file mode 100644
index 000000000000..97f995770c34
--- /dev/null
+++ b/core/themes/claro/images/icons/d72222/key.svg
@@ -0,0 +1 @@
+<svg width="15" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z" fill="#d72222"/></svg>
diff --git a/core/themes/claro/images/icons/d72222/questionmark.svg b/core/themes/claro/images/icons/d72222/questionmark.svg
new file mode 100644
index 000000000000..5747fc800c52
--- /dev/null
+++ b/core/themes/claro/images/icons/d72222/questionmark.svg
@@ -0,0 +1 @@
+<svg width="15" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z" fill="#d72222"/></svg>
diff --git a/core/themes/claro/images/icons/windowText/key.svg b/core/themes/claro/images/icons/windowText/key.svg
new file mode 100644
index 000000000000..790a3a6081f5
--- /dev/null
+++ b/core/themes/claro/images/icons/windowText/key.svg
@@ -0,0 +1 @@
+<svg width="15" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z" fill="windowText"/></svg>
diff --git a/core/themes/claro/images/icons/windowText/questionmark.svg b/core/themes/claro/images/icons/windowText/questionmark.svg
new file mode 100644
index 000000000000..d3dc4a97f762
--- /dev/null
+++ b/core/themes/claro/images/icons/windowText/questionmark.svg
@@ -0,0 +1 @@
+<svg width="15" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z" fill="windowText"/></svg>
diff --git a/core/themes/claro/templates/admin/system-modules-details.html.twig b/core/themes/claro/templates/admin/system-modules-details.html.twig
new file mode 100644
index 000000000000..d2acf3854011
--- /dev/null
+++ b/core/themes/claro/templates/admin/system-modules-details.html.twig
@@ -0,0 +1,75 @@
+{#
+/**
+ * @file
+ * Default theme implementation for the modules listing page.
+ *
+ * Displays a list of all packages in a project.
+ *
+ * Available variables:
+ * - modules: Contains multiple module instances. Each module contains:
+ * - attributes: Attributes on the row.
+ * - checkbox: A checkbox for enabling the module.
+ * - name: The human-readable name of the module.
+ * - id: A unique identifier for interacting with the details element.
+ * - enable_id: A unique identifier for interacting with the checkbox element.
+ * - description: The description of the module.
+ * - machine_name: The module's machine name.
+ * - version: Information about the module version.
+ * - requires: A list of modules that this module requires.
+ * - required_by: A list of modules that require this module.
+ * - links: A list of administration links provided by the module.
+ *
+ * @see template_preprocess_system_modules_details()
+ *
+ * @ingroup themeable
+ */
+#}
+<table class="responsive-enabled module-list">
+ <thead>
+ <tr>
+ <th class="checkbox visually-hidden">{{ 'Installed'|t }}</th>
+ <th class="name visually-hidden">{{ 'Name'|t }}</th>
+ <th class="description visually-hidden priority-low">{{ 'Description'|t }}</th>
+ </tr>
+ </thead>
+ <tbody>
+ {% for module in modules %}
+ <tr{{ module.attributes.addClass('module-list__module') }}>
+ <td class="module-list__checkbox">
+ {{ module.checkbox }}
+ </td>
+ <td class="module-list__module">
+ <label id="{{ module.id }}" for="{{ module.enable_id }}" class="module-list__module-name table-filter-text-source">{{ module.name }}</label>
+ </td>
+ <td class="expand priority-low module-list__description">
+ <details class="js-form-wrapper form-wrapper module-list__module-details claro-details" id="{{ module.enable_id }}-description">
+ <summary aria-controls="{{ module.enable_id }}-description" role="button" aria-expanded="false" class="claro-details__summary module-list__module-summary"><span class="text module-description">{{ module.description }}</span></summary>
+ <div class="claro-details__wrapper module-details__wrapper">
+ <div class="module-details__description">
+ <div class="module-details__requirements">
+ <div class="module-details__requirement">{{ 'Machine name: <span dir="ltr" class="table-filter-text-source">@machine-name</span>'|t({'@machine-name': module.machine_name }) }}</div>
+ {% if module.version %}
+ <div class="module-details__requirement">{{ 'Version: @module-version'|t({'@module-version': module.version }) }}</div>
+ {% endif %}
+ {% if module.requires %}
+ <div class="module-details__requirement">{{ 'Requires: @module-list'|t({'@module-list': module.requires }) }}</div>
+ {% endif %}
+ {% if module.required_by %}
+ <div class="module-details__requirement">{{ 'Required by: @module-list'|t({'@module-list': module.required_by }) }}</div>
+ {% endif %}
+ </div>
+ {% if module.links %}
+ <div class="module-details__links">
+ {% for link_type in ['help', 'permissions', 'configure'] %}
+ {{ module.links[link_type] }}
+ {% endfor %}
+ </div>
+ {% endif %}
+ </div>
+ </div>
+ </details>
+ </td>
+ </tr>
+ {% endfor %}
+ </tbody>
+</table>
diff --git a/core/themes/claro/templates/details.html.twig b/core/themes/claro/templates/details.html.twig
index 88f72ee1369d..dfd58d498592 100644
--- a/core/themes/claro/templates/details.html.twig
+++ b/core/themes/claro/templates/details.html.twig
@@ -29,6 +29,7 @@
'claro-details',
accordion ? 'claro-details--accordion',
accordion_item ? 'claro-details--accordion-item',
+ element['#module_package_listing'] ? 'claro-details--package-listing',
]
%}
{%
@@ -37,6 +38,7 @@
'details-wrapper',
accordion ? 'claro-details__wrapper--accordion',
accordion_item ? 'claro-details__wrapper--accordion-item',
+ element['#module_package_listing'] ? 'claro-details__wrapper--package-listing',
]
%}
{%
@@ -44,6 +46,7 @@
'claro-details__content',
accordion ? 'claro-details__content--accordion',
accordion_item ? 'claro-details__content--accordion-item',
+ element['#module_package_listing'] ? 'claro-details__content--package-listing',
]
%}
<details{{ attributes.addClass(classes) }}>
@@ -55,7 +58,9 @@
required ? 'form-required',
accordion ? 'claro-details__summary--accordion',
accordion_item ? 'claro-details__summary--accordion-item',
- ]
+ element['#module_package_listing'] ? 'claro-details__summary--package-listing',
+
+ ]
%}
<summary{{ summary_attributes.addClass(summary_classes) }}>
{{- title -}}
--
GitLab