gin-pager.pcss.css

Same filename and directory in other branches
  1. main core/themes/default_admin/migration/css/base/gin-pager.pcss.css
.pager__link {
  color: var(--gin-color-text);
  background-color: transparent;
}

.pager__link.is-active,
.pager__item--current {
  color: var(--gin-bg-app);
}

.pager__link:hover,
.pager__link.is-active:hover {
  color: var(--gin-color-button-text);
  background: var(--gin-color-primary-hover);
}

.pager__item--first .pager__link::before {
  mask-image: var(--admin-icon-first);
}

.pager__item--previous .pager__link::before {
  mask-image: var(--admin-icon-prev);
}

.pager__item--next .pager__link::after {
  mask-image: var(--admin-icon-next);
}

.pager__item--last .pager__link::after {
  mask-image: var(--admin-icon-last);
}

.pager__item--first .pager__link,
.pager__item--previous .pager__link,
.pager__item--next .pager__link,
.pager__item--last .pager__link {
  &::before,
  &::after {
    background: var(--gin-color-text-light);
  }

  &:hover::before,
  &:hover::after {
    background: var(--gin-bg-app);
  }
}

.pager__link.is-active,
.pager__item--current {
  background-color: var(--gin-color-primary);
}

File

View on git.drupalcode.org

core/themes/default_admin/migration/css/base/gin-pager.pcss.css

View source 
  1. .pager__link {

  2.   color: var(--gin-color-text);

  3.   background-color: transparent;

  4. }

  5. 

  6. .pager__link.is-active,

  7. .pager__item--current {

  8.   color: var(--gin-bg-app);

  9. }

  10. 

  11. .pager__link:hover,

  12. .pager__link.is-active:hover {

  13.   color: var(--gin-color-button-text);

  14.   background: var(--gin-color-primary-hover);

  15. }

  16. 

  17. .pager__item--first .pager__link::before {

  18.   mask-image: var(--admin-icon-first);

  19. }

  20. 

  21. .pager__item--previous .pager__link::before {

  22.   mask-image: var(--admin-icon-prev);

  23. }

  24. 

  25. .pager__item--next .pager__link::after {

  26.   mask-image: var(--admin-icon-next);

  27. }

  28. 

  29. .pager__item--last .pager__link::after {

  30.   mask-image: var(--admin-icon-last);

  31. }

  32. 

  33. .pager__item--first .pager__link,

  34. .pager__item--previous .pager__link,

  35. .pager__item--next .pager__link,

  36. .pager__item--last .pager__link {

  37.   &::before,

  38.   &::after {

  39.     background: var(--gin-color-text-light);

  40.   }

  41. 

  42.   &:hover::before,

  43.   &:hover::after {

  44.     background: var(--gin-bg-app);

  45.   }

  46. }

  47. 

  48. .pager__link.is-active,

  49. .pager__item--current {

  50.   background-color: var(--gin-color-primary);

  51. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.