Commit 30a1e232 authored by Cristina Chumillas's avatar Cristina Chumillas
Browse files

Issue #3332430 by hot_sauce, Gauravvvv, smustgrave, Stockfoot, lauriii:... 

Issue #3332430 by hot_sauce, Gauravvvv, smustgrave, Stockfoot, lauriii: Refactor Claro's pager stylesheet
parent 0a42d222

core/themes/claro/css/components/pager.css

+30 −89
Original line number Diff line number Diff line
@@ -4,197 +4,138 @@ 
 * https://www.drupal.org/node/3084859

 * @preserve

 */



/**

 * @file

 * Styles for Claro's Pagination.

 */



:root {

  /**

  * Pager.

  */

.pager {

  --pager-size: 2rem; /* --space-m × 2 */

  --pager-border-width: 0.125rem; /* 2px */

  --pager-fg-color: var(--color-gray-800);

  --pager-bg-color: var(--color-white);

  --pager--hover-bg-color: var(--color-bgblue-active);

  --pager--focus-bg-color: var(--color-focus);

  --pager--active-fg-color: var(--color-white);

  --pager--active-bg-color: var(--color-absolutezero);

  --pager-hover-bg-color: var(--color-bgblue-active);

  --pager-focus-bg-color: var(--color-focus);

  --pager-active-fg-color: var(--color-white);

  --pager-active-bg-color: var(--color-absolutezero);

  --pager-border-radius--action: var(--pager-border-width);

}



.pager {

  margin-top: var(--space-m);

  margin-bottom: var(--space-m);

  margin-block: var(--space-m);

}



.pager__items {

  display: flex;

  flex-wrap: wrap;

  align-items: flex-end;

  justify-content: center;

  margin: var(--space-m) 0; /* LTR */

  margin: var(--space-m) 0;

  list-style: none;

  text-align: center;

  font-weight: bold;

}



[dir="rtl"] .pager__items {

  margin: var(--space-m) 0;

}



.pager__item {

  display: inline-block;

  margin-right: calc(var(--space-xs) / 2);

  margin-left: calc(var(--space-xs) / 2);

  margin-inline: calc(var(--space-xs) / 2);

  vertical-align: top;

}



.pager__link,

.pager__item--current {

  display: flex;

  align-items: center;

  justify-content: center;

  box-sizing: border-box;

  min-width: var(--pager-size);

  height: var(--pager-size);

  padding-right: var(--space-xs);

  padding-left: var(--space-xs);

  min-inline-size: var(--pager-size);

  block-size: var(--pager-size);

  padding-inline: var(--space-xs);

  text-decoration: none;

  color: var(--pager-fg-color);

  border-radius: var(--space-m); /* Pager size ÷ 2 */

  background: var(--pager-bg-color); /* Make sure that the text is visible on dark background. */

  line-height: 1;

}



.pager__link:hover,

.pager__link:focus,

.pager__link:active {

  text-decoration: none;

}



.pager__link:hover,

.pager__link.is-active:hover {

  color: var(--pager-fg-color);

  background: var(--pager--hover-bg-color);

  background: var(--pager-hover-bg-color);

}



.pager__link--action-link {

  border-radius: var(--pager-border-radius--action);

}



/* Active number link. */



.pager__link.is-active,

.pager__item--current {

  color: var(--pager--active-fg-color);

  color: var(--pager-active-fg-color);

  border: var(--pager-border-width) solid transparent;

  background: var(--pager--active-bg-color);

  background: var(--pager-active-bg-color);

}



.pager__item--first .pager__link::before {

  background-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 2v12M14 2L8 8l6 6' stroke='%23545560' stroke-width='2'/%3e%3c/svg%3e");

  --background-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 2v12M14 2L8 8l6 6' stroke='%23545560' stroke-width='2'/%3e%3c/svg%3e");

}



.pager__item--previous .pager__link::before {

  background-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11 2L5 8l6 6' stroke='%23545560' stroke-width='2'/%3e%3c/svg%3e");

  --background-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11 2L5 8l6 6' stroke='%23545560' stroke-width='2'/%3e%3c/svg%3e");

}



.pager__item--next .pager__link::after {

  background-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5 14l6-6-6-6' stroke='%23545560' stroke-width='2'/%3e%3c/svg%3e");

  --background-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5 14l6-6-6-6' stroke='%23545560' stroke-width='2'/%3e%3c/svg%3e");

}



.pager__item--last .pager__link::after {

  background-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14 14V2M2 14l6-6-6-6' stroke='%23545560' stroke-width='2'/%3e%3c/svg%3e");

  --background-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14 14V2M2 14l6-6-6-6' stroke='%23545560' stroke-width='2'/%3e%3c/svg%3e");

}



.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;

  width: 1rem;

  height: 1rem;

  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 {

    -webkit-mask-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 2v12M14 2L8 8l6 6' stroke='%23545560' stroke-width='2'/%3e%3c/svg%3e");

    mask-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 2v12M14 2L8 8l6 6' stroke='%23545560' stroke-width='2'/%3e%3c/svg%3e");

  }

  .pager__item--previous .pager__link::before {

    -webkit-mask-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11 2L5 8l6 6' stroke='%23545560' stroke-width='2'/%3e%3c/svg%3e");

    mask-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11 2L5 8l6 6' stroke='%23545560' stroke-width='2'/%3e%3c/svg%3e");

  }

  .pager__item--next .pager__link::after {

    -webkit-mask-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5 14l6-6-6-6' stroke='%23545560' stroke-width='2'/%3e%3c/svg%3e");

    mask-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5 14l6-6-6-6' stroke='%23545560' stroke-width='2'/%3e%3c/svg%3e");

  }

  .pager__item--last .pager__link::after {

    -webkit-mask-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14 14V2M2 14l6-6-6-6' stroke='%23545560' stroke-width='2'/%3e%3c/svg%3e");

    mask-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14 14V2M2 14l6-6-6-6' stroke='%23545560' stroke-width='2'/%3e%3c/svg%3e");

  }

  .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;

    -webkit-mask-image: var(--background-image);

    mask-image: var(--background-image);

    -webkit-mask-repeat: no-repeat;

    mask-repeat: no-repeat;

    -webkit-mask-position: center;

    mask-position: center;

  }

}



[dir="rtl"] .pager__item--first .pager__link::before,

[dir="rtl"] .pager__item--previous .pager__link::before,

[dir="rtl"] .pager__item--next .pager__link::after,

[dir="rtl"] .pager__item--last .pager__link::after {

  transform: scaleX(-1);

}



.pager__item--mini {

  margin-right: calc(var(--space-m) / 2);

  margin-left: calc(var(--space-m) / 2);

  margin-inline: calc(var(--space-m) / 2);

}



.pager__link--mini {

  border-radius: 50%;

}



/**

* On the mini pager, remove margins for the previous and next icons.

* Margins are not needed here as there is no accompanying text.

*/



.pager__link--mini::before {

  margin-right: 0;

  margin-left: 0;

  margin-inline: 0;

}



.pager__item-title--backwards {

  margin-left: 0.5rem; /* LTR */

  margin-inline-start: 0.5rem;

}



[dir="rtl"] .pager__item-title--backwards {

  margin-right: 0.5rem;

  margin-left: 0;

}



.pager__item-title--forward {

  margin-right: 0.5rem; /* LTR */

}



[dir="rtl"] .pager__item-title--forward {

  margin-right: 0;

  margin-left: 0.5rem;

  margin-inline-end: 0.5rem;

}



@media (forced-colors: active) {

core/themes/claro/css/components/pager.pcss.css

+29 −61
Original line number Diff line number Diff line
@@ -2,25 +2,18 @@ 
 * @file

 * Styles for Claro's Pagination.

 */



:root {

  /**

  * Pager.

  */

.pager {

  --pager-size: 2rem; /* --space-m × 2 */

  --pager-border-width: 0.125rem; /* 2px */

  --pager-fg-color: var(--color-gray-800);

  --pager-bg-color: var(--color-white);

  --pager--hover-bg-color: var(--color-bgblue-active);

  --pager--focus-bg-color: var(--color-focus);

  --pager--active-fg-color: var(--color-white);

  --pager--active-bg-color: var(--color-absolutezero);

  --pager-hover-bg-color: var(--color-bgblue-active);

  --pager-focus-bg-color: var(--color-focus);

  --pager-active-fg-color: var(--color-white);

  --pager-active-bg-color: var(--color-absolutezero);

  --pager-border-radius--action: var(--pager-border-width);

}



.pager {

  margin-top: var(--space-m);

  margin-bottom: var(--space-m);

  margin-block: var(--space-m);

}



.pager__items {
@@ -28,19 +21,15 @@ 
  flex-wrap: wrap;

  align-items: flex-end;

  justify-content: center;

  margin: var(--space-m) 0; /* LTR */

  margin: var(--space-m) 0;

  list-style: none;

  text-align: center;

  font-weight: bold;

}

[dir="rtl"] .pager__items {

  margin: var(--space-m) 0;

}



.pager__item {

  display: inline-block;

  margin-right: calc(var(--space-xs) / 2);

  margin-left: calc(var(--space-xs) / 2);

  margin-inline: calc(var(--space-xs) / 2);

  vertical-align: top;

}
@@ -50,10 +39,9 @@ 
  align-items: center;

  justify-content: center;

  box-sizing: border-box;

  min-width: var(--pager-size);

  height: var(--pager-size);

  padding-right: var(--space-xs);

  padding-left: var(--space-xs);

  min-inline-size: var(--pager-size);

  block-size: var(--pager-size);

  padding-inline: var(--space-xs);

  text-decoration: none;

  color: var(--pager-fg-color);

  border-radius: var(--space-m); /* Pager size ÷ 2 */
@@ -68,7 +56,7 @@ 
.pager__link:hover,

.pager__link.is-active:hover {

  color: var(--pager-fg-color);

  background: var(--pager--hover-bg-color);

  background: var(--pager-hover-bg-color);

}

.pager__link--action-link {

  border-radius: var(--pager-border-radius--action);
@@ -76,21 +64,21 @@ 
/* Active number link. */

.pager__link.is-active,

.pager__item--current {

  color: var(--pager--active-fg-color);

  color: var(--pager-active-fg-color);

  border: var(--pager-border-width) solid transparent;

  background: var(--pager--active-bg-color);

  background: var(--pager-active-bg-color);

}

.pager__item--first .pager__link::before {

  background-image: url(../../images/icons/545560/pager-first.svg);

  --background-image: url(../../images/icons/545560/pager-first.svg);

}

.pager__item--previous .pager__link::before {

  background-image: url(../../images/icons/545560/pager-prev.svg);

  --background-image: url(../../images/icons/545560/pager-prev.svg);

}

.pager__item--next .pager__link::after {

  background-image: url(../../images/icons/545560/pager-next.svg);

  --background-image: url(../../images/icons/545560/pager-next.svg);

}

.pager__item--last .pager__link::after {

  background-image: url(../../images/icons/545560/pager-last.svg);

  --background-image: url(../../images/icons/545560/pager-last.svg);

}

.pager__item--first .pager__link::before,

.pager__item--previous .pager__link::before,
@@ -98,32 +86,22 @@ 
.pager__item--last .pager__link::after {

  position: relative;

  display: inline-block;

  width: 1rem;

  height: 1rem;

  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 {

    mask-image: url(../../images/icons/545560/pager-first.svg);

  }

  .pager__item--previous .pager__link::before {

    mask-image: url(../../images/icons/545560/pager-prev.svg);

  }

  .pager__item--next .pager__link::after {

    mask-image: url(../../images/icons/545560/pager-next.svg);

  }

  .pager__item--last .pager__link::after {

    mask-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 {

    background-color: linktext;

    background-image: none;

    mask-image: var(--background-image);

    mask-repeat: no-repeat;

    mask-position: center;

  }
@@ -137,8 +115,7 @@ 
}



.pager__item--mini {

  margin-right: calc(var(--space-m) / 2);

  margin-left: calc(var(--space-m) / 2);

  margin-inline: calc(var(--space-m) / 2);

}

.pager__link--mini {

  border-radius: 50%;
@@ -149,24 +126,15 @@ 
* Margins are not needed here as there is no accompanying text.

*/

.pager__link--mini::before {

  margin-right: 0;

  margin-left: 0;

  margin-inline: 0;

}



.pager__item-title--backwards {

  margin-left: 0.5rem; /* LTR */

}

[dir="rtl"] .pager__item-title--backwards {

  margin-right: 0.5rem;

  margin-left: 0;

  margin-inline-start: 0.5rem;

}



.pager__item-title--forward {

  margin-right: 0.5rem; /* LTR */

}

[dir="rtl"] .pager__item-title--forward {

  margin-right: 0;

  margin-left: 0.5rem;

  margin-inline-end: 0.5rem;

}



@media (forced-colors: active) {