Skip to content
Snippets Groups Projects

Issue #3332701: Refactor Claro's tablesort-indicator stylesheet

Open Issue #3332701: Refactor Claro's tablesort-indicator stylesheet
issue/drupal-3332701:3332701-refactor-claros-tablesort-indicator into 10.1.x
3 unresolved threads
Open Royal Simpson Pinto requested to merge issue/drupal-3332701:3332701-refactor-claros-tablesort-indicator into 10.1.x
3 unresolved threads
Compare
and
1 file
+ 19
− 32
Compare changes
  • Side-by-side
  • Inline
core/themes/claro/css/components/tablesort-indicator.pcss.css
+ 19
− 32
@@ -6,50 +6,37 @@
.tablesort {
position: absolute;
top: 50%;
right: 1rem;
inline-start: 1rem;
width: 0.875rem; /* 14px */
height: 1rem; /* 16px */
margin-top: -0.5rem; /* -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--ltr.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"] & {
inline-start: auto;
inline-end: 1rem; /* 16px */
background-image: url(../../images/icons/000f33/sort--inactive--rtl.svg);
}
}
[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-repeat: no-repeat;
mask-position: 0 50%;
&.tablesort--asc {
opacity: 1;
background-image: url(../../images/icons/003ecc/sort--asc.svg);
}
}
.tablesort--asc,
[dir="rtl"] .tablesort--asc {
opacity: 1;
background-image: url(../../images/icons/003ecc/sort--asc.svg);
@media (forced-colors: active) {
background: linktext;
mask-image: url(../../images/icons/003ecc/sort--asc.svg);
&.tablesort--desc {
opacity: 1;
background-image: url(../../images/icons/003ecc/sort--desc.svg);
}
}
.tablesort--desc,
[dir="rtl"] .tablesort--desc {
opacity: 1;
background-image: url(../../images/icons/003ecc/sort--desc.svg);
@media (forced-colors: active) {
background: linktext;
mask-image: url(../../images/icons/003ecc/sort--desc.svg);
background-color: linktext;
-webkit-mask-image: url(../../images/icons/000f33/sort--inactive--ltr.svg);
mask-image: url(../../images/icons/000f33/sort--inactive--ltr.svg);
mask-repeat: no-repeat;
mask-position: 0 50%;
}
}