From 9e0ed313c78c189641068dbdb45f21dad86fc81a Mon Sep 17 00:00:00 2001
From: nod_ <nod_@598310.no-reply.drupal.org>
Date: Mon, 19 Feb 2024 11:42:32 +0100
Subject: [PATCH] Issue #3332701 by Gauravvvv, shmy, royalpinto007,
Meeni_Dhobale, mherchel, smustgrave: Refactor Claro's tablesort-indicator
stylesheet
---
core/themes/claro/css/components/tables.css | 22 ++++----
.../claro/css/components/tables.pcss.css | 51 ++++++++++---------
.../css/components/tablesort-indicator.css | 47 ++++++-----------
.../components/tablesort-indicator.pcss.css | 36 ++++++-------
.../icons/000f33/sort--inactive--rtl.svg | 1 -
...--inactive--ltr.svg => sort--inactive.svg} | 0
6 files changed, 72 insertions(+), 85 deletions(-)
delete mode 100644 core/themes/claro/images/icons/000f33/sort--inactive--rtl.svg
rename core/themes/claro/images/icons/000f33/{sort--inactive--ltr.svg => sort--inactive.svg} (100%)
diff --git a/core/themes/claro/css/components/tables.css b/core/themes/claro/css/components/tables.css
index b20d4bfce4be..5e89b8e741e0 100644
--- a/core/themes/claro/css/components/tables.css
+++ b/core/themes/claro/css/components/tables.css
@@ -91,23 +91,25 @@ 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) {
- .sortable-heading > a::after {
- opacity: 1;
- background: linktext;
+ [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%;
}
}
-[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 > a::after {
+ opacity: 1;
+ background: linktext;
+ -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%;
}
}
diff --git a/core/themes/claro/css/components/tables.pcss.css b/core/themes/claro/css/components/tables.pcss.css
index f7d29ceab73b..1feaa6065aed 100644
--- a/core/themes/claro/css/components/tables.pcss.css
+++ b/core/themes/claro/css/components/tables.pcss.css
@@ -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. */
diff --git a/core/themes/claro/css/components/tablesort-indicator.css b/core/themes/claro/css/components/tablesort-indicator.css
index e06f77342160..dd17663c333c 100644
--- a/core/themes/claro/css/components/tablesort-indicator.css
+++ b/core/themes/claro/css/components/tablesort-indicator.css
@@ -13,38 +13,27 @@
.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;
}
-@media (forced-colors: active) {
- .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='M1.75.25v1.5h10.5V.25zm0 3v1.5h7.5v-1.5zm0 3v1.5h4.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='M1.75.25v1.5h10.5V.25zm0 3v1.5h7.5v-1.5zm0 3v1.5h4.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%;
- }
-}
-
[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");
+ /* Horizontally flip the element. */
+ transform: scaleX(-1);
}
@media (forced-colors: active) {
- [dir="rtl"] .tablesort {
+ .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-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");
+ mask-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");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: 0 50%;
@@ -52,30 +41,26 @@
}
}
-.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");
diff --git a/core/themes/claro/css/components/tablesort-indicator.pcss.css b/core/themes/claro/css/components/tablesort-indicator.pcss.css
index d87dc60b4f1b..33a0fe618974 100644
--- a/core/themes/claro/css/components/tablesort-indicator.pcss.css
+++ b/core/themes/claro/css/components/tablesort-indicator.pcss.css
@@ -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);
diff --git a/core/themes/claro/images/icons/000f33/sort--inactive--rtl.svg b/core/themes/claro/images/icons/000f33/sort--inactive--rtl.svg
deleted file mode 100644
index f78854f62086..000000000000
--- a/core/themes/claro/images/icons/000f33/sort--inactive--rtl.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/core/themes/claro/images/icons/000f33/sort--inactive--ltr.svg b/core/themes/claro/images/icons/000f33/sort--inactive.svg
similarity index 100%
rename from core/themes/claro/images/icons/000f33/sort--inactive--ltr.svg
rename to core/themes/claro/images/icons/000f33/sort--inactive.svg
--
GitLab