Commit eb3c7a01 authored by Gábor Hojtsy's avatar Gábor Hojtsy

Issue #3072772 by katherined, lauriii, bnjmnm, DyanneNova, Gábor Hojtsy,...

Issue #3072772 by katherined, lauriii, bnjmnm, DyanneNova, Gábor Hojtsy, ckrina, antonellasev: Initial Claro design for the modules page
parent 22d9036c
......@@ -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().
*/
......
......@@ -222,7 +222,7 @@ pre {
}
details {
line-height: 1.295em;
line-height: 1.295rem;
}
details summary {
......
......@@ -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;
......
......@@ -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.
*/
......
......@@ -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;
}
}
......@@ -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;
}
}
......@@ -138,7 +138,7 @@
.claro-details__summary::before {
position: absolute;
top: 50%;
top: 1.75rem;
left: 0.75rem; /* LTR */
display: inline-block;
width: 1rem;
......
......@@ -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);
......
......@@ -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;
}
......@@ -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;