From f429abacdc17ffaeb14fcf24c3e9f3330142f865 Mon Sep 17 00:00:00 2001
From: Lauri Eskola <lauri.eskola@acquia.com>
Date: Fri, 30 Apr 2021 14:33:57 +0300
Subject: [PATCH] Issue #3196874 by andy-blum, mherchel: BEMifying Olivero's
 book pager

---
 core/themes/olivero/css/components/book.css   | 79 +++++++++----------
 .../olivero/css/components/book.pcss.css      | 13 ++-
 .../navigation/book-navigation.html.twig      |  2 +-
 3 files changed, 44 insertions(+), 50 deletions(-)

diff --git a/core/themes/olivero/css/components/book.css b/core/themes/olivero/css/components/book.css
index 28d6f3fba57..9a7d297b269 100644
--- a/core/themes/olivero/css/components/book.css
+++ b/core/themes/olivero/css/components/book.css
@@ -11,35 +11,35 @@
  */
 
 [dir="ltr"] .book-pager {
-  margin-left: 0
+  margin-left: 0;
 }
 
 [dir="rtl"] .book-pager {
-  margin-right: 0
+  margin-right: 0;
 }
 
 [dir="ltr"] .book-pager {
-  margin-right: 0
+  margin-right: 0;
 }
 
 [dir="rtl"] .book-pager {
-  margin-left: 0
+  margin-left: 0;
 }
 
 [dir="ltr"] .book-pager {
-  padding-left: 0
+  padding-left: 0;
 }
 
 [dir="rtl"] .book-pager {
-  padding-right: 0
+  padding-right: 0;
 }
 
 [dir="ltr"] .book-pager {
-  padding-right: 0
+  padding-right: 0;
 }
 
 [dir="rtl"] .book-pager {
-  padding-left: 0
+  padding-left: 0;
 }
 
 .book-pager {
@@ -49,17 +49,9 @@
   padding-top: 0;
   padding-bottom: 1.125rem;
   list-style: none;
-  border-bottom: solid 1px #0d77b5
+  border-bottom: solid 1px #0d77b5;
 }
 
-.book-pager a {
-    text-decoration: none;
-    color: #0d77b5;
-    font-family: "Lora", "georgia", serif;
-    font-size: 1.125rem;
-    font-weight: 600;
-  }
-
 .book-pager__item {
   display: inline-block
 }
@@ -81,41 +73,46 @@
 @media (min-width: 31.25rem) {
 
 [dir="ltr"] .book-pager__item--next {
-    margin-left: auto
+    margin-left: auto;
   }
 
 [dir="rtl"] .book-pager__item--next {
-    margin-right: auto
+    margin-right: auto;
   }
 
 [dir="ltr"] .book-pager__item--next {
-    text-align: right
+    text-align: right;
   }
 
 [dir="rtl"] .book-pager__item--next {
-    text-align: left
+    text-align: left;
   }
   }
 
 .book-pager__link {
   display: inline-flex;
   align-items: center;
+  text-decoration: none;
+  color: #0d77b5;
+  font-family: "Lora", "georgia", serif;
+  font-size: 1.125rem;
+  font-weight: 600;
 }
 
 [dir="ltr"] .book-pager__link--previous:before {
-    margin-right: 0.25em
+    margin-right: 0.25em;
 }
 
 [dir="rtl"] .book-pager__link--previous:before {
-    margin-left: 0.25em
+    margin-left: 0.25em;
 }
 
 [dir="ltr"] .book-pager__link--previous:before {
-    border-left: solid 3px currentColor
+    border-left: solid 3px currentColor;
 }
 
 [dir="rtl"] .book-pager__link--previous:before {
-    border-right: solid 3px currentColor
+    border-right: solid 3px currentColor;
 }
 
 .book-pager__link--previous:before {
@@ -128,19 +125,19 @@
   }
 
 [dir="ltr"] .book-pager__link--next:after {
-    margin-left: 0.25em
+    margin-left: 0.25em;
 }
 
 [dir="rtl"] .book-pager__link--next:after {
-    margin-right: 0.25em
+    margin-right: 0.25em;
 }
 
 [dir="ltr"] .book-pager__link--next:after {
-    border-left: solid 3px currentColor
+    border-left: solid 3px currentColor;
 }
 
 [dir="rtl"] .book-pager__link--next:after {
-    border-right: solid 3px currentColor
+    border-right: solid 3px currentColor;
 }
 
 .book-pager__link--next:after {
@@ -153,35 +150,35 @@
   }
 
 [dir="ltr"] .book-navigation__menu {
-  margin-left: 0
+  margin-left: 0;
 }
 
 [dir="rtl"] .book-navigation__menu {
-  margin-right: 0
+  margin-right: 0;
 }
 
 [dir="ltr"] .book-navigation__menu {
-  margin-right: 0
+  margin-right: 0;
 }
 
 [dir="rtl"] .book-navigation__menu {
-  margin-left: 0
+  margin-left: 0;
 }
 
 [dir="ltr"] .book-navigation__menu {
-  padding-left: 0
+  padding-left: 0;
 }
 
 [dir="rtl"] .book-navigation__menu {
-  padding-right: 0
+  padding-right: 0;
 }
 
 [dir="ltr"] .book-navigation__menu {
-  padding-right: 0
+  padding-right: 0;
 }
 
 [dir="rtl"] .book-navigation__menu {
-  padding-left: 0
+  padding-left: 0;
 }
 
 .book-navigation__menu {
@@ -193,19 +190,19 @@
 }
 
 [dir="ltr"] .book-navigation__item {
-  padding-left: 0
+  padding-left: 0;
 }
 
 [dir="rtl"] .book-navigation__item {
-  padding-right: 0
+  padding-right: 0;
 }
 
 [dir="ltr"] .book-navigation__item {
-  padding-right: 0
+  padding-right: 0;
 }
 
 [dir="rtl"] .book-navigation__item {
-  padding-left: 0
+  padding-left: 0;
 }
 
 .book-navigation__item {
diff --git a/core/themes/olivero/css/components/book.pcss.css b/core/themes/olivero/css/components/book.pcss.css
index a35c4207eb0..eb9db5b81e3 100644
--- a/core/themes/olivero/css/components/book.pcss.css
+++ b/core/themes/olivero/css/components/book.pcss.css
@@ -16,14 +16,6 @@
   padding-inline-end: 0;
   list-style: none;
   border-block-end: solid 1px var(--color--blue-20);
-
-  & a {
-    text-decoration: none;
-    color: var(--color--blue-20);
-    font-family: var(--font-serif);
-    font-size: 18px;
-    font-weight: 600;
-  }
 }
 
 .book-pager__item {
@@ -50,6 +42,11 @@
 .book-pager__link {
   display: inline-flex;
   align-items: center;
+  text-decoration: none;
+  color: var(--color--blue-20);
+  font-family: var(--font-serif);
+  font-size: 18px;
+  font-weight: 600;
 }
 
 .book-pager__link--previous {
diff --git a/core/themes/olivero/templates/navigation/book-navigation.html.twig b/core/themes/olivero/templates/navigation/book-navigation.html.twig
index 10e8a10633e..0a53b671345 100644
--- a/core/themes/olivero/templates/navigation/book-navigation.html.twig
+++ b/core/themes/olivero/templates/navigation/book-navigation.html.twig
@@ -43,7 +43,7 @@
       {% endif %}
       {% if parent_url %}
         <li class="book-pager__item book-pager__item--center">
-          <a href="{{ parent_url }}" title="{{ 'Go to parent page'|t }}">{{ 'Up'|t }}</a>
+          <a class="book-pager__link book-pager__link--center" href="{{ parent_url }}" title="{{ 'Go to parent page'|t }}">{{ 'Up'|t }}</a>
         </li>
       {% endif %}
       {% if next_url %}