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 {
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%;
}
}
......
core/themes/claro/css/components/tables.pcss.css
+ 28
− 23
View file @ 9e0ed313
......@@ -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. */
......
core/themes/claro/css/components/tablesort-indicator.css
+ 16
− 31
View file @ 9e0ed313
......@@ -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");
......
core/themes/claro/css/components/tablesort-indicator.pcss.css
+ 16
− 20
View file @ 9e0ed313
......@@ -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);
......
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