Follow-up from 📌 Split tablesort.module.css out to its own library and attach it via tablesort Active .
Claro has several different files for table styling, but there is no clear separation between the files as to what's targeting what kind of table.
There are broadly three kinds of tables that get rendered by Drupal:
1. HTML table
2. HTML table with tablesort
3. HTML table with tableselect
These are styled by the following files:
css/components/tables.css
css/components/tableselect.css
css/classy/components/tablesort.css
css/components/tablesort-indicator.css
tables.css defines all of these styles, which afaict should be in tablesort.css:
.sortable-heading > a {
display: block;
padding-block: var(--space-xs);
padding-inline: 0 1.5rem;
-webkit-text-decoration: none;
text-decoration: none;
color: inherit;
}
.sortable-heading > a:focus,
.sortable-heading > a:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.sortable-heading > a:focus::before,
.sortable-heading > a:hover::before {
border-color: inherit;
}
.sortable-heading > a:focus::after,
.sortable-heading > a:hover::after {
opacity: 1;
}
.sortable-heading > a::before {
position: absolute;
z-index: 0;
inset-block-start: 0;
inset-inline-end: 1rem;
inset-block-end: 0;
inset-inline-start: 1rem;
display: block;
content: "";
border-bottom: 0.125rem solid transparent;
.sortable-heading > a::after {
position: absolute;
inset-block-start: 50%;
inset-inline-end: 1rem;
width: 0.875rem;
height: 1rem;
margin-block-start: -0.5rem;
content: "";
opacity: 0.5;
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M1.75.25v1.5h10.5V.25zm0 3v1.5h7.5v-1.5zm0 3v1.5h4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e") no-repeat 50% 50%;
background-size: contain;
}
[dir="rtl"] :is(.sortable-heading > a::after) {
/* Horizontally flip the element. */
transform: scaleX(-1);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M1.75.25v1.5h10.5V.25zm0 3v1.5h7.5v-1.5zm0 3v1.5h4.5v-1. 5z' fill='%23000f33'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
[dir="rtl"] :is(.sortable-heading > a::after) {
mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M1.75.25v1.5h10.5V.25zm0 3v1.5h7.5v-1.5zm0 3v1.5h4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e") no-repeat 50% 50%;
}
}
@media (forced-colors: active) {
.sortable-heading > a::after {
opacity: 1;
background: linktext;
mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M1.75.25v1.5h10.5V.25zm0 3v1.5h7.5v-1.5zm0 3v1.5h4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e") no-repeat 50% 50%;
}
}
.sortable-heading.is-active > a {
color: var(--color-absolutezero);
}
.sortable-heading.is-active > a::before {
border-bottom: 0.1875rem solid var(--color-absolutezero);
}
.sortable-heading.is-active > a::after {
content: none;
}
td.is-active {
background: none;
}
Move the tablesort-specific CSS to tablesort.css, manually test for regressions.
Additionally, we could audit for duplicated selectors and remove any rules that will never be used.
Please review the changes.
I removed this piece of code as i think we dont need this part and also tested in local.
.sortable-heading > a:focus,
.sortable-heading > a:hover {
-webkit-text-decoration: none;
text-decoration: none;
}