Skip to content
Snippets Groups Projects
Verified Commit 9e0ed313 authored by Théodore Biadala's avatar Théodore Biadala
Browse files

Issue #3332701 by Gauravvvv, shmy, royalpinto007, Meeni_Dhobale, mherchel,... 

Issue #3332701 by Gauravvvv, shmy, royalpinto007, Meeni_Dhobale, mherchel, smustgrave: Refactor Claro's tablesort-indicator stylesheet
parent 6db12006
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 72 additions and 85 deletions
core/themes/claro/css/components/tables.css
+ 12
− 10
View file @ 9e0ed313
...@@ -91,23 +91,25 @@ th { ...@@ -91,23 +91,25 @@ th {
background-size: contain; 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) { @media (forced-colors: active) {
.sortable-heading > a::after { [dir="rtl"] :is(.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%; -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%; 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) { @media (forced-colors: active) {
[dir="rtl"] :is(.sortable-heading > a::after) { .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%; opacity: 1;
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%; 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%;
} }
} }
......
core/themes/claro/css/components/tables.pcss.css
+ 28
− 23
View file @ 9e0ed313
...@@ -72,22 +72,25 @@ th { ...@@ -72,22 +72,25 @@ th {
margin-block-start: -0.5rem; margin-block-start: -0.5rem;
content: ""; content: "";
opacity: 0.5; 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; 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) { @media (forced-colors: active) {
opacity: 1; opacity: 1;
background: linktext; 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 { ...@@ -137,11 +140,11 @@ td {
padding: var(--space-xs) var(--space-m); padding: var(--space-xs) var(--space-m);
text-align: start; text-align: start;
@nest & .item-list ul { & .item-list ul {
margin: 0; margin: 0;
} }
@nest &.is-active { &.is-active {
background: none; background: none;
} }
} }
...@@ -150,19 +153,21 @@ td { ...@@ -150,19 +153,21 @@ td {
* Target every .form-element input that parent is a form-item of a table cell. * 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. * This ignores the filter format select of the textarea editor.
*/ */
td > .form-item > .form-element, td {
td > .ajax-new-content > .form-item > .form-element, & > .form-item > .form-element,
td > .form-item > .claro-autocomplete, & > .ajax-new-content > .form-item > .form-element,
td > .form-item > .claro-autocomplete > .form-element, & > .form-item > .claro-autocomplete,
td > .ajax-new-content > .form-item > .claro-autocomplete, & > .form-item > .claro-autocomplete > .form-element,
td > .ajax-new-content > .form-item > .claro-autocomplete > .form-element { & > .ajax-new-content > .form-item > .claro-autocomplete,
width: 100%; & > .ajax-new-content > .form-item > .claro-autocomplete > .form-element {
} width: 100%;
}
td > .form-item > .form-element--type-select, & > .form-item > .form-element--type-select,
td > .ajax-new-content > .form-item > .form-element--type-select { & > .ajax-new-content > .form-item > .form-element--type-select {
width: max-content; width: max-content;
min-width: 100%; min-width: 100%;
}
} }
/* Win over table-file-multiple-widget. */ /* Win over table-file-multiple-widget. */
......
core/themes/claro/css/components/tablesort-indicator.css
+ 16
− 31
View file @ 9e0ed313
...@@ -13,38 +13,27 @@ ...@@ -13,38 +13,27 @@
.tablesort { .tablesort {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 1rem; inset-inline-end: 1rem;
width: 0.875rem; /* 14px */ width: 0.875rem;
height: 1rem; /* 16px */ height: var(--space-m);
margin-top: -0.5rem; /* -8px */ margin-block-start: -0.5rem;
opacity: 0.5; 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; 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 { [dir="rtl"] .tablesort {
right: auto; /* Horizontally flip the element. */
left: 1rem; /* 16px */ 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='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) { @media (forced-colors: active) {
[dir="rtl"] .tablesort { .tablesort {
background: linktext; 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"); -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='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='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; -webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: 0 50%; -webkit-mask-position: 0 50%;
...@@ -52,30 +41,26 @@ ...@@ -52,30 +41,26 @@
} }
} }
.tablesort--asc, .tablesort--asc {
[dir="rtl"] .tablesort--asc {
opacity: 1; 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"); 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) { @media (forced-colors: active) {
.tablesort--asc, .tablesort--asc {
[dir="rtl"] .tablesort--asc {
background: linktext; 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"); -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"); 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, .tablesort--desc {
[dir="rtl"] .tablesort--desc {
opacity: 1; 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"); 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) { @media (forced-colors: active) {
.tablesort--desc, .tablesort--desc {
[dir="rtl"] .tablesort--desc {
background: linktext; 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"); -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"); 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");
......
core/themes/claro/css/components/tablesort-indicator.pcss.css
+ 16
− 20
View file @ 9e0ed313
...@@ -6,35 +6,31 @@ ...@@ -6,35 +6,31 @@
.tablesort { .tablesort {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 1rem; inset-inline-end: 1rem;
width: 0.875rem; /* 14px */ width: 14px;
height: 1rem; /* 16px */ height: var(--space-m);
margin-top: -0.5rem; /* -8px */ margin-block-start: -8px;
opacity: 0.5; 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; background-size: auto;
@media (forced-colors: active) { [dir="rtl"] & {
background: linktext; /* Horizontally flip the element. */
mask-image: url(../../images/icons/000f33/sort--inactive--ltr.svg); transform: scaleX(-1);
mask-repeat: no-repeat;
mask-position: 0 50%;
} }
}
[dir="rtl"] .tablesort {
right: auto;
left: 1rem; /* 16px */
background-image: url(../../images/icons/000f33/sort--inactive--rtl.svg);
@media (forced-colors: active) { @media (forced-colors: active) {
background: linktext; 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-repeat: no-repeat;
mask-position: 0 50%; mask-position: 0 50%;
} }
} }
.tablesort--asc,
[dir="rtl"] .tablesort--asc { .tablesort--asc {
opacity: 1; opacity: 1;
background-image: url(../../images/icons/003ecc/sort--asc.svg); background-image: url(../../images/icons/003ecc/sort--asc.svg);
...@@ -43,8 +39,8 @@ ...@@ -43,8 +39,8 @@
mask-image: url(../../images/icons/003ecc/sort--asc.svg); mask-image: url(../../images/icons/003ecc/sort--asc.svg);
} }
} }
.tablesort--desc,
[dir="rtl"] .tablesort--desc { .tablesort--desc {
opacity: 1; opacity: 1;
background-image: url(../../images/icons/003ecc/sort--desc.svg); background-image: url(../../images/icons/003ecc/sort--desc.svg);
......
core/themes/claro/images/icons/000f33/sort--inactive--rtl.svg deleted 100644 → 0
+ 0
− 1
View file @ 6db12006
<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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment