Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Issue #3332701 by Gauravvvv, shmy, royalpinto007, Meeni_Dhobale, mherchel, smustgrave: Refactor Claro's tablesort-indicator stylesheet

merge-requests/6673/head
nod_ 2024-02-19 11:42:32 +01:00
parent 6db12006ec
commit 9e0ed313c7
No known key found for this signature in database
GPG Key ID: 76624892606FA197
6 changed files with 73 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
core/themes/claro/css/components/tables.css
View File

@ -91,6 +91,19 @@ th {
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) {
-webkit-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%;
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;
@ -100,17 +113,6 @@ th {
}
}
[dir="rtl"] :is(.sortable-heading > a::after) {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M12.25.25v1.5H1.75V.25zm0 3v1.5h-7.5v-1.5zm0 3v1.5h-4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
[dir="rtl"] :is(.sortable-heading > a::after) {
-webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M12.25.25v1.5H1.75V.25zm0 3v1.5h-7.5v-1.5zm0 3v1.5h-4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e") no-repeat 50% 50%;
mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M12.25.25v1.5H1.75V.25zm0 3v1.5h-7.5v-1.5zm0 3v1.5h-4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e") no-repeat 50% 50%;
}
}
.sortable-heading.is-active > a {
color: var(--color-absolutezero);
}

51
core/themes/claro/css/components/tables.pcss.css
View File

@ -72,22 +72,25 @@ th {
margin-block-start: -0.5rem;
content: "";
opacity: 0.5;
background: url(../../images/icons/000f33/sort--inactive--ltr.svg) no-repeat 50% 50%;
background: url(../../images/icons/000f33/sort--inactive.svg) no-repeat 50% 50%;
background-size: contain;
[dir="rtl"] & {
/* Horizontally flip the element. */
transform: scaleX(-1);
background-image: url(../../images/icons/000f33/sort--inactive.svg);
@media (forced-colors: active) {
mask: url(../../images/icons/000f33/sort--inactive.svg) no-repeat 50% 50%;
}
}
@media (forced-colors: active) {
opacity: 1;
background: linktext;
mask: url(../../images/icons/000f33/sort--inactive--ltr.svg) no-repeat 50% 50%;
mask: url(../../images/icons/000f33/sort--inactive.svg) no-repeat 50% 50%;
}
@nest [dir="rtl"] & {
background-image: url(../../images/icons/000f33/sort--inactive--rtl.svg);
@media (forced-colors: active) {
mask: url(../../images/icons/000f33/sort--inactive--rtl.svg) no-repeat 50% 50%;
}
}
}
}
@ -137,11 +140,11 @@ td {
padding: var(--space-xs) var(--space-m);
text-align: start;
@nest & .item-list ul {
& .item-list ul {
margin: 0;
}
@nest &.is-active {
&.is-active {
background: none;
}
}
@ -150,19 +153,21 @@ td {
* Target every .form-element input that parent is a form-item of a table cell.
* This ignores the filter format select of the textarea editor.
*/
td > .form-item > .form-element,
td > .ajax-new-content > .form-item > .form-element,
td > .form-item > .claro-autocomplete,
td > .form-item > .claro-autocomplete > .form-element,
td > .ajax-new-content > .form-item > .claro-autocomplete,
td > .ajax-new-content > .form-item > .claro-autocomplete > .form-element {
width: 100%;
}
td {
& > .form-item > .form-element,
& > .ajax-new-content > .form-item > .form-element,
& > .form-item > .claro-autocomplete,
& > .form-item > .claro-autocomplete > .form-element,
& > .ajax-new-content > .form-item > .claro-autocomplete,
& > .ajax-new-content > .form-item > .claro-autocomplete > .form-element {
width: 100%;
}
td > .form-item > .form-element--type-select,
td > .ajax-new-content > .form-item > .form-element--type-select {
width: max-content;
min-width: 100%;
& > .form-item > .form-element--type-select,
& > .ajax-new-content > .form-item > .form-element--type-select {
width: max-content;
min-width: 100%;
}
}
/* Win over table-file-multiple-widget. */

47
core/themes/claro/css/components/tablesort-indicator.css
View File

@ -13,15 +13,22 @@
.tablesort {
position: absolute;
top: 50%;
right: 1rem;
width: 0.875rem; /* 14px */
height: 1rem; /* 16px */
margin-top: -0.5rem; /* -8px */
inset-inline-end: 1rem;
width: 0.875rem;
height: var(--space-m);
margin-block-start: -0.5rem;
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 0 50%;
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");
background-repeat: no-repeat;
background-position: 0 50%;
background-size: auto;
}
[dir="rtl"] .tablesort {
/* Horizontally flip the element. */
transform: scaleX(-1);
}
@media (forced-colors: active) {
.tablesort {
background: linktext;
@ -34,48 +41,26 @@
}
}
[dir="rtl"] .tablesort {
right: auto;
left: 1rem; /* 16px */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M12.25.25v1.5H1.75V.25zm0 3v1.5h-7.5v-1.5zm0 3v1.5h-4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
[dir="rtl"] .tablesort {
background: linktext;
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M12.25.25v1.5H1.75V.25zm0 3v1.5h-7.5v-1.5zm0 3v1.5h-4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M12.25.25v1.5H1.75V.25zm0 3v1.5h-7.5v-1.5zm0 3v1.5h-4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: 0 50%;
mask-position: 0 50%;
}
}
.tablesort--asc,
[dir="rtl"] .tablesort--asc {
.tablesort--asc {
opacity: 1;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M5 .44L.719 4.718 1.78 5.78 4.25 3.313v7.937h1.5V3.312l2.469 2.47L9.28 4.718 5 .439z' fill='%23003ecc'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
.tablesort--asc,
[dir="rtl"] .tablesort--asc {
.tablesort--asc {
background: linktext;
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M5 .44L.719 4.718 1.78 5.78 4.25 3.313v7.937h1.5V3.312l2.469 2.47L9.28 4.718 5 .439z' fill='%23003ecc'/%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M5 .44L.719 4.718 1.78 5.78 4.25 3.313v7.937h1.5V3.312l2.469 2.47L9.28 4.718 5 .439z' fill='%23003ecc'/%3e%3c/svg%3e");
}
}
.tablesort--desc,
[dir="rtl"] .tablesort--desc {
.tablesort--desc {
opacity: 1;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M4.25.75v7.938l-2.469-2.47L.72 7.282 5 11.561l4.281-4.28L8.22 6.22 5.75 8.687V.75h-1.5z' fill='%23003ecc'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
.tablesort--desc,
[dir="rtl"] .tablesort--desc {
.tablesort--desc {
background: linktext;
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M4.25.75v7.938l-2.469-2.47L.72 7.282 5 11.561l4.281-4.28L8.22 6.22 5.75 8.687V.75h-1.5z' fill='%23003ecc'/%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M4.25.75v7.938l-2.469-2.47L.72 7.282 5 11.561l4.281-4.28L8.22 6.22 5.75 8.687V.75h-1.5z' fill='%23003ecc'/%3e%3c/svg%3e");

36
core/themes/claro/css/components/tablesort-indicator.pcss.css
View File

@ -6,35 +6,31 @@
.tablesort {
position: absolute;
top: 50%;
right: 1rem;
width: 0.875rem; /* 14px */
height: 1rem; /* 16px */
margin-top: -0.5rem; /* -8px */
inset-inline-end: 1rem;
width: 14px;
height: var(--space-m);
margin-block-start: -8px;
opacity: 0.5;
background: url(../../images/icons/000f33/sort--inactive--ltr.svg) no-repeat 0 50%;
background-image: url(../../images/icons/000f33/sort--inactive.svg);
background-repeat: no-repeat;
background-position: 0 50%;
background-size: auto;
@media (forced-colors: active) {
background: linktext;
mask-image: url(../../images/icons/000f33/sort--inactive--ltr.svg);
mask-repeat: no-repeat;
mask-position: 0 50%;
[dir="rtl"] & {
/* Horizontally flip the element. */
transform: scaleX(-1);
}
}
[dir="rtl"] .tablesort {
right: auto;
left: 1rem; /* 16px */
background-image: url(../../images/icons/000f33/sort--inactive--rtl.svg);
@media (forced-colors: active) {
background: linktext;
mask-image: url(../../images/icons/000f33/sort--inactive--rtl.svg);
mask-image: url(../../images/icons/000f33/sort--inactive.svg);
mask-repeat: no-repeat;
mask-position: 0 50%;
}
}
.tablesort--asc,
[dir="rtl"] .tablesort--asc {
.tablesort--asc {
opacity: 1;
background-image: url(../../images/icons/003ecc/sort--asc.svg);
@ -43,8 +39,8 @@
mask-image: url(../../images/icons/003ecc/sort--asc.svg);
}
}
.tablesort--desc,
[dir="rtl"] .tablesort--desc {
.tablesort--desc {
opacity: 1;
background-image: url(../../images/icons/003ecc/sort--desc.svg);

1
core/themes/claro/images/icons/000f33/sort--inactive--rtl.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="8"><path d="M12.25.25v1.5H1.75V.25zm0 3v1.5h-7.5v-1.5zm0 3v1.5h-4.5v-1.5z" fill="#000f33"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 156 B

0
core/themes/claro/images/icons/000f33/sort--inactive--ltr.svg → core/themes/claro/images/icons/000f33/sort--inactive.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 153 B

After

Width:  |  Height:  |  Size: 153 B