From 9e0ed313c78c189641068dbdb45f21dad86fc81a Mon Sep 17 00:00:00 2001 From: nod_ 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 | 24 +++++---- .../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, 73 insertions(+), 86 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 b20d4bfce4b..5e89b8e741e 100644 --- a/core/themes/claro/css/components/tables.css +++ b/core/themes/claro/css/components/tables.css @@ -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); } diff --git a/core/themes/claro/css/components/tables.pcss.css b/core/themes/claro/css/components/tables.pcss.css index f7d29ceab73..1feaa6065ae 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 e06f7734216..dd17663c333 100644 --- a/core/themes/claro/css/components/tablesort-indicator.css +++ b/core/themes/claro/css/components/tablesort-indicator.css @@ -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"); diff --git a/core/themes/claro/css/components/tablesort-indicator.pcss.css b/core/themes/claro/css/components/tablesort-indicator.pcss.css index d87dc60b4f1..33a0fe61897 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 f78854f6208..00000000000 --- a/core/themes/claro/images/icons/000f33/sort--inactive--rtl.svg +++ /dev/null @@ -1 +0,0 @@ - \ 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