Refactor Claro's pager stylesheet

I am working on this.

I have attached the patch and before/after screenshots for reference. please review
Before patch:

After patch:

Checked changes - looks good

+RTBC

hotsaucedesign → closed merge request !3494

Patch #5 appears good.

Thanks for the screenshots!

@Gauravvv

Thank you for the work on your patch. I was working on an MR as part of Florida DrupalCamp last week and got around to finally pushing it up today.

In comparing my MR with your patch, I think there is still room for improvement on this to help modernize the CSS more.

- For .pager__link, .pager__item--current we can do more conversion to CSS Logical properties by changing min-width and height to min-inline-size and block-size respectively

- We can move the CSS variables out of :root and into the .pager class since all of these will apply to anything within pager since it's best practice to not use :root if we don't have to

- In addition, the naming conventions for the pager variables wasn't consistent. Some used one - and some used two, so I adjusted that for consistency sake.

- We can also make CSS variables out of the background images for the .pager__item classes, and then further consolidate the @media (forced-colors: active) query to use these for the mask-image as well like this

.pager__item--first .pager__link::before {
  --background-image: url(../../images/icons/545560/pager-first.svg);
}
.pager__item--previous .pager__link::before {
  --background-image: url(../../images/icons/545560/pager-prev.svg);
}
.pager__item--next .pager__link::after {
  --background-image: url(../../images/icons/545560/pager-next.svg);
}
.pager__item--last .pager__link::after {
  --background-image: url(../../images/icons/545560/pager-last.svg);
}
.pager__item--first .pager__link::before,
.pager__item--previous .pager__link::before,
.pager__item--next .pager__link::after,
.pager__item--last .pager__link::after {
  position: relative;
  display: inline-block;
  inline-size: 1rem;
  block-size: 1rem;
  content: "";
  background-image: var(--background-image);
  background-repeat: no-repeat;
  background-position: center;
}

@media (forced-colors: active) {
  .pager__item--first .pager__link::before,
  .pager__item--previous .pager__link::before,
  .pager__item--next .pager__link::after,
  .pager__item--last .pager__link::after {
    background-color: linktext;
    background-image: none;
    mask-image: var(--background-image);
    mask-repeat: no-repeat;
    mask-position: center;
  }
}

This is, admittedly, my first contribution to Drupal directly but I think that with some tweaking between the patch and the MR we can find the best solutions here.

Hi @hotsaucedesign, You have assigned the issue to yourself and there were no updates for the last 5 days. So I picked up the issue. I will make sure to ask first then only I will pick issues. thankyou

Nesting looks good. Adding some screenshots to show they have not broken anything (that I see).

RTL seems working

Committed 30a1e23 and pushed to 10.1.x. Thanks!

Note about the unresolved comment by @lauriii about the background image: the answer given by @hot_sauce about making it easier to theme forced-colors made sense to me, plus discussed with @lauriii and he's OK with the existing state.

Automatically closed - issue fixed for 2 weeks with no activity.