Problem/Motivation
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;
}
Steps to reproduce
Proposed resolution
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.
Remaining tasks
User interface changes
Introduced terminology
API changes
Data model changes
Release notes snippet