diff --git a/core/includes/pager.inc b/core/includes/pager.inc index 3dae62e..4af6d88 100644 --- a/core/includes/pager.inc +++ b/core/includes/pager.inc @@ -185,9 +185,13 @@ function template_preprocess_pager(&$variables) { // Fill in default link labels. $tags = &$variables['tags']; $tags += array( + t('First page'), + t('Previous page'), + t('Current page'), + t('Next page'), + t('Last page'), t('« first'), - t('‹ previous'), - '', + t('‹ prev'), t('next ›'), t('last »'), ); @@ -229,9 +233,10 @@ function template_preprocess_pager(&$variables) { if ($pager_page_array[$element] > 0) { $li_first = array( '#type' => 'link', - '#title' => $tags[0], + '#title' => '', '#href' => $current_path, '#options' => array( + 'html' => TRUE, 'query' => pager_query_add_page($parameters, $element, 0), 'attributes' => array( 'title' => t('Go to first page'), @@ -246,9 +251,10 @@ function template_preprocess_pager(&$variables) { ); $li_previous = array( '#type' => 'link', - '#title' => $tags[1], + '#title' => '', '#href' => $current_path, '#options' => array( + 'html' => TRUE, 'query' => pager_query_add_page($parameters, $element, $pager_page_array[$element] - 1), 'attributes' => array( 'title' => t('Go to previous page'), @@ -268,9 +274,10 @@ function template_preprocess_pager(&$variables) { if ($pager_page_array[$element] < ($pager_total[$element] - 1)) { $li_next = array( '#type' => 'link', - '#title' => $tags[3], + '#title' => '', '#href' => $current_path, '#options' => array( + 'html' => TRUE, 'query' => pager_query_add_page($parameters, $element, $pager_page_array[$element] + 1), 'attributes' => array( 'title' => t('Go to next page'), @@ -286,9 +293,10 @@ function template_preprocess_pager(&$variables) { ); $li_last = array( '#type' => 'link', - '#title' => $tags[4], + '#title' =>'', '#href' => $current_path, '#options' => array( + 'html' => TRUE, 'query' => pager_query_add_page($parameters, $element, $pager_total[$element] - 1), 'attributes' => array( 'title' => t('Go to last page'), @@ -305,109 +313,61 @@ function template_preprocess_pager(&$variables) { if ($pager_total[$element] > 1) { if ($li_first) { - $items[] = array( - '#wrapper_attributes' => array('class' => array('pager-first')), - 'link' => $li_first, - ); + $items['first'] = $li_first; } if ($li_previous) { - $items[] = array( - '#wrapper_attributes' => array('class' => array('pager-previous')), - 'link' => $li_previous, - ); + $items['previous'] = $li_previous; } // When there is more than one page, create the pager list. if ($i != $pager_max) { // Check whether there are further previous pages. if ($i > 1) { - $items[] = array( - '#wrapper_attributes' => array('class' => array('pager-ellipsis')), - '#markup' => '…', - ); + $items['ellipsis']['previous'] = TRUE; } // Now generate the actual pager piece. for (; $i <= $pager_last && $i <= $pager_max; $i++) { - if ($i < $pager_current) { - $items[] = array( - '#wrapper_attributes' => array('class' => array('pager-item')), - 'link' => array( - '#type' => 'link', - '#title' => $i, - '#href' => $current_path, - '#options' => array( - 'query' => pager_query_add_page($parameters, $element, $i - 1), - 'attributes' => array( - 'title' => t('Go to page @number', array('@number' => $i)), - ), - // Below is ignored by default, supplied to support hook_link_alter - // implementations. - 'pager_context' => array( - 'link_type' => 'item', - 'element' => $element, - 'interval' => ($pager_current - $i), - ), - ), - ), - ); - } + $link_title = ' ' . $i; + $title_attribute = t('Go to page @number', array('@number' => $i)); if ($i == $pager_current) { - $items[] = array( - '#wrapper_attributes' => array('class' => array('pager-current')), - '#markup' => $i, - ); + $items['current'] = $i; + $link_title = ' ' . $i; + $title_attribute = $tags[2]; } - if ($i > $pager_current) { - $items[] = array( - '#wrapper_attributes' => array('class' => array('pager-item')), - 'link' => array( - '#type' => 'link', - '#title' => $i, - '#href' => $current_path, - '#options' => array( - 'query' => pager_query_add_page($parameters, $element, $i - 1), - 'attributes' => array( - 'title' => t('Go to page @number', array('@number' => $i)), - ), - // Below is ignored by default, supplied to support hook_link_alter - // implementations. - 'pager_context' => array( - 'link_type' => 'item', - 'element' => $element, - 'interval' => ($i - $pager_current), - ), - ), + $items['pages'][$i] = array( + '#type' => 'link', + '#title' => $link_title, + '#href' => $current_path, + '#options' => array( + 'html' => TRUE, + 'query' => pager_query_add_page($parameters, $element, $i - 1), + 'attributes' => array( + 'title' => $title_attribute, ), - ); - } + // Below is ignored by default, supplied to support hook_link_alter + // implementations. + 'pager_context' => array( + 'link_type' => 'item', + 'element' => $element, + 'interval' => abs($pager_current - $i), + ), + ), + ); } // Check whether there are further next pages. if ($i < $pager_max) { - $items[] = array( - '#wrapper_attributes' => array('class' => array('pager-ellipsis')), - '#markup' => '…', - ); + $items['ellipsis']['next'] = TRUE; } } // End generation. if ($li_next) { - $items[] = array( - '#wrapper_attributes' => array('class' => array('pager-next')), - 'link' => $li_next, - ); + $items['next'] = $li_next; } if ($li_last) { - $items[] = array( - '#wrapper_attributes' => array('class' => array('pager-last')), - 'link' => $li_last, - ); + $items['last'] = $li_last; } - $variables['items'] = array( - '#theme' => 'item_list__pager', - '#items' => $items, - '#attributes' => array('class' => array('pager')), - ); + $variables['items'] = $items; } } diff --git a/core/modules/aggregator/src/Tests/AggregatorRenderingTest.php b/core/modules/aggregator/src/Tests/AggregatorRenderingTest.php index d967d1b..c9c5fd5 100644 --- a/core/modules/aggregator/src/Tests/AggregatorRenderingTest.php +++ b/core/modules/aggregator/src/Tests/AggregatorRenderingTest.php @@ -97,7 +97,7 @@ public function testFeedPage() { // Check for presence of an aggregator pager. $this->drupalGet('aggregator'); - $elements = $this->xpath("//ul[@class=:class]", array(':class' => 'pager')); + $elements = $this->xpath("//ul[@class=:class]", array(':class' => 'pager__items')); $this->assertTrue(!empty($elements), 'Individual source page contains a pager.'); // Check for sources page title. @@ -115,7 +115,7 @@ public function testFeedPage() { // Check for the presence of a pager. $this->drupalGet('aggregator/sources/' . $feed->id()); - $elements = $this->xpath("//ul[@class=:class]", array(':class' => 'pager')); + $elements = $this->xpath("//ul[@class=:class]", array(':class' => 'pager__items')); $this->assertTrue(!empty($elements), 'Individual source page contains a pager.'); $cache_tags = explode(' ', $this->drupalGetHeader('X-Drupal-Cache-Tags')); $this->assertTrue(in_array('aggregator_feed:' . $feed->id(), $cache_tags)); diff --git a/core/modules/comment/src/Tests/CommentPagerTest.php b/core/modules/comment/src/Tests/CommentPagerTest.php index ab37998..cac2d23 100644 --- a/core/modules/comment/src/Tests/CommentPagerTest.php +++ b/core/modules/comment/src/Tests/CommentPagerTest.php @@ -329,19 +329,19 @@ function testTwoPagers() { $this->assertRaw('Comment 1 on field comment'); $this->assertRaw('Comment 1 on field comment_2'); // Navigate to next page of field 1. - $this->clickLink('next ›'); + $this->clickLink('Next page'); // Check only one pager updated. $this->assertRaw('Comment 2 on field comment'); $this->assertRaw('Comment 1 on field comment_2'); // Return to page 1. $this->drupalGet('node/' . $node->id()); // Navigate to next page of field 2. - $this->clickLink('next ›', 1); + $this->clickLink('Next page', 1); // Check only one pager updated. $this->assertRaw('Comment 1 on field comment'); $this->assertRaw('Comment 2 on field comment_2'); // Navigate to next page of field 1. - $this->clickLink('next ›'); + $this->clickLink('Next page'); // Check only one pager updated. $this->assertRaw('Comment 2 on field comment'); $this->assertRaw('Comment 2 on field comment_2'); diff --git a/core/modules/system/css/system.theme.css b/core/modules/system/css/system.theme.css index f3a7490..e7088b8 100644 --- a/core/modules/system/css/system.theme.css +++ b/core/modules/system/css/system.theme.css @@ -163,17 +163,17 @@ abbr.ajax-changed { /** * Markup generated by pager.html.twig. */ -.item-list .pager { +.pager__items { clear: both; text-align: center; } -.item-list .pager li { +.pager__item { background-image: none; display: inline; list-style-type: none; padding: 0.5em; } -.pager-current { +.pager__item.is-active { font-weight: bold; } diff --git a/core/modules/system/src/Tests/Pager/PagerTest.php b/core/modules/system/src/Tests/Pager/PagerTest.php index 1f3fe4d..2bd8f4f 100644 --- a/core/modules/system/src/Tests/Pager/PagerTest.php +++ b/core/modules/system/src/Tests/Pager/PagerTest.php @@ -54,7 +54,7 @@ function testActiveClass() { $this->assertPagerItems($current_page); // Verify last page. - $elements = $this->xpath('//li[contains(@class, :class)]/a', array(':class' => 'pager-last')); + $elements = $this->xpath('//li[contains(@class, :class)]/a', array(':class' => 'pager__item-last')); preg_match('@page=(\d+)@', $elements[0]['href'], $matches); $current_page = (int) $matches[1]; $this->drupalGet($GLOBALS['base_root'] . $elements[0]['href'], array('external' => TRUE)); @@ -68,7 +68,7 @@ function testActiveClass() { * The current pager page the internal browser is on. */ protected function assertPagerItems($current_page) { - $elements = $this->xpath('//ul[@class=:class]/li', array(':class' => 'pager')); + $elements = $this->xpath('//ul[@class=:class]/li', array(':class' => 'pager__items')); $this->assertTrue(!empty($elements), 'Pager found.'); // Make current page 1-based. @@ -91,14 +91,13 @@ protected function assertPagerItems($current_page) { // Make item/page index 1-based. $page++; if ($current_page == $page) { - $this->assertClass($element, 'pager-current', 'Item for current page has .pager-current class.'); - $this->assertFalse(isset($element->a), 'Item for current page has no link.'); + $this->assertClass($element, 'is-active', 'Element for current page has .is-active class.'); + $this->assertTrue(isset($element->a), 'Element for current page has link.'); } else { - $this->assertNoClass($element, 'pager-current', "Item for page $page has no .pager-current class."); - $this->assertClass($element, 'pager-item', "Item for page $page has .pager-item class."); + $this->assertNoClass($element, 'is-active', "Element for page $page has no .is-active class."); + $this->assertClass($element, 'pager__item', "Element for page $page has .pager__item class."); $this->assertTrue($element->a, "Link to page $page found."); - $this->assertNoClass($element->a, 'active', "Link to page $page is not active."); } unset($elements[--$page]); } @@ -107,24 +106,24 @@ protected function assertPagerItems($current_page) { // Verify first/previous and next/last items and links. if (isset($first)) { - $this->assertClass($first, 'pager-first', 'Item for first page has .pager-first class.'); + $this->assertClass($first, 'pager__item-first', 'Element for first page has .pager__item-first class.'); $this->assertTrue($first->a, 'Link to first page found.'); - $this->assertNoClass($first->a, 'active', 'Link to first page is not active.'); + $this->assertNoClass($first->a, 'is-active', 'Link to first page is not active.'); } if (isset($previous)) { - $this->assertClass($previous, 'pager-previous', 'Item for first page has .pager-previous class.'); + $this->assertClass($previous, 'pager__item-previous', 'Element for first page has .pager__item-previous class.'); $this->assertTrue($previous->a, 'Link to previous page found.'); - $this->assertNoClass($previous->a, 'active', 'Link to previous page is not active.'); + $this->assertNoClass($previous->a, 'is-active', 'Link to previous page is not active.'); } if (isset($next)) { - $this->assertClass($next, 'pager-next', 'Item for next page has .pager-next class.'); + $this->assertClass($next, 'pager__item-next', 'Element for next page has .pager__item-next class.'); $this->assertTrue($next->a, 'Link to next page found.'); - $this->assertNoClass($next->a, 'active', 'Link to next page is not active.'); + $this->assertNoClass($next->a, 'is-active', 'Link to next page is not active.'); } if (isset($last)) { - $this->assertClass($last, 'pager-last', 'Item for last page has .pager-last class.'); + $this->assertClass($last, 'pager__item-last', 'Element for last page has .pager__item-last class.'); $this->assertTrue($last->a, 'Link to last page found.'); - $this->assertNoClass($last->a, 'active', 'Link to last page is not active.'); + $this->assertNoClass($last->a, 'is-active', 'Link to last page is not active.'); } } diff --git a/core/modules/system/templates/pager.html.twig b/core/modules/system/templates/pager.html.twig index 47b20a7..f5cd355 100644 --- a/core/modules/system/templates/pager.html.twig +++ b/core/modules/system/templates/pager.html.twig @@ -12,6 +12,30 @@ */ #} {% if items %} - - {{ items }} + {% endif %} diff --git a/core/modules/views_ui/src/Tests/PreviewTest.php b/core/modules/views_ui/src/Tests/PreviewTest.php index c251149..7674ebf 100644 --- a/core/modules/views_ui/src/Tests/PreviewTest.php +++ b/core/modules/views_ui/src/Tests/PreviewTest.php @@ -106,98 +106,98 @@ public function testPreviewWithPagersUI() { $this->getPreviewAJAX('test_pager_full', 'default', 5); // Test that the pager is present and rendered. - $elements = $this->xpath('//ul[@class = "pager"]/li'); + $elements = $this->xpath('//ul[contains(@class, :class)]/li', array(':class' => 'pager__items')); $this->assertTrue(!empty($elements), 'Full pager found.'); // Verify elements and links to pages. // We expect to find 5 elements: current page == 1, links to pages 2 and // and 3, links to 'next >' and 'last >>' pages. - $this->assertClass($elements[0], 'pager-current', 'Element for current page has .pager-current class.'); - $this->assertFalse(isset($elements[0]->a), 'Element for current page has no link.'); + $this->assertClass($elements[0], 'is-active', 'Element for current page has .is-active class.'); + $this->assertTrue($elements[0]->a, 'Element for current page has link.'); - $this->assertClass($elements[1], 'pager-item', "Element for page 2 has .pager-item class."); - $this->assertTrue($elements[1]->a, "Link to page 2 found."); + $this->assertClass($elements[1], 'pager__item', 'Element for page 2 has .pager__item class.'); + $this->assertTrue($elements[1]->a, 'Link to page 2 found.'); - $this->assertClass($elements[2], 'pager-item', "Element for page 3 has .pager-item class."); - $this->assertTrue($elements[2]->a, "Link to page 3 found."); + $this->assertClass($elements[2], 'pager__item', 'Element for page 3 has .pager__item class.'); + $this->assertTrue($elements[2]->a, 'Link to page 3 found.'); - $this->assertClass($elements[3], 'pager-next', "Element for next page has .pager-next class."); - $this->assertTrue($elements[3]->a, "Link to next page found."); + $this->assertClass($elements[3], 'pager__item-next', 'Element for next page has .pager__item-next class.'); + $this->assertTrue($elements[3]->a, 'Link to next page found.'); - $this->assertClass($elements[4], 'pager-last', "Element for last page has .pager-last class."); - $this->assertTrue($elements[4]->a, "Link to last page found."); + $this->assertClass($elements[4], 'pager__item-last', 'Element for last page has .pager__item-last class.'); + $this->assertTrue($elements[4]->a, 'Link to last page found.'); // Navigate to next page. - $elements = $this->xpath('//li[contains(@class, :class)]/a', array(':class' => 'pager-next')); + $elements = $this->xpath('//li[contains(@class, :class)]/a', array(':class' => 'pager__item-next')); $this->clickPreviewLinkAJAX($elements[0]['href'], 5); // Test that the pager is present and rendered. - $elements = $this->xpath('//ul[@class = "pager"]/li'); + $elements = $this->xpath('//ul[contains(@class, :class)]/li', array(':class' => 'pager__items')); $this->assertTrue(!empty($elements), 'Full pager found.'); // Verify elements and links to pages. // We expect to find 7 elements: links to '<< first' and '< previous' // pages, link to page 1, current page == 2, link to page 3 and links // to 'next >' and 'last >>' pages. - $this->assertClass($elements[0], 'pager-first', "Element for next page has .pager-first class."); - $this->assertTrue($elements[0]->a, "Link to first page found."); + $this->assertClass($elements[0], 'pager__item-first', 'Element for first page has .pager__item-first class.'); + $this->assertTrue($elements[0]->a, 'Link to first page found.'); - $this->assertClass($elements[1], 'pager-previous', "Element for previous page has .pager-previous class."); - $this->assertTrue($elements[1]->a, "Link to previous page found."); + $this->assertClass($elements[1], 'pager__item-previous', 'Element for previous page has .pager__item-previous class.'); + $this->assertTrue($elements[1]->a, 'Link to previous page found.'); - $this->assertClass($elements[2], 'pager-item', "Element for page 1 has .pager-item class."); - $this->assertTrue($elements[2]->a, "Link to page 1 found."); + $this->assertClass($elements[2], 'pager__item', 'Element for page 1 has .pager__item class.'); + $this->assertTrue($elements[2]->a, 'Link to page 1 found.'); - $this->assertClass($elements[3], 'pager-current', 'Element for current page has .pager-current class.'); - $this->assertFalse(isset($elements[3]->a), 'Element for current page has no link.'); + $this->assertClass($elements[3], 'is-active', 'Element for current page has .is-active class.'); + $this->assertTrue($elements[3]->a, 'Element for current page has link.'); - $this->assertClass($elements[4], 'pager-item', "Element for page 3 has .pager-item class."); - $this->assertTrue($elements[4]->a, "Link to page 3 found."); + $this->assertClass($elements[4], 'pager__item', 'Element for page 3 has .pager__item class.'); + $this->assertTrue($elements[4]->a, 'Link to page 3 found.'); - $this->assertClass($elements[5], 'pager-next', "Element for next page has .pager-next class."); - $this->assertTrue($elements[5]->a, "Link to next page found."); + $this->assertClass($elements[5], 'pager__item-next', 'Element for next page has .pager__item-next class.'); + $this->assertTrue($elements[5]->a, 'Link to next page found.'); - $this->assertClass($elements[6], 'pager-last', "Element for last page has .pager-last class."); - $this->assertTrue($elements[6]->a, "Link to last page found."); + $this->assertClass($elements[6], 'pager__item-last', 'Element for last page has .pager__item-last class.'); + $this->assertTrue($elements[6]->a, 'Link to last page found.'); // Test Mini Pager. $this->getPreviewAJAX('test_mini_pager', 'default', 3); // Test that the pager is present and rendered. - $elements = $this->xpath('//ul[@class = "pager"]/li'); + $elements = $this->xpath('//ul[contains(@class, :class)]/li', array(':class' => 'pager__items')); $this->assertTrue(!empty($elements), 'Mini pager found.'); // Verify elements and links to pages. // We expect to find 3 elements: previous and current pages, with no link, // and next page with a link. - $this->assertClass($elements[0], 'pager-previous', 'Element for previous page has .pager-previous class.'); - $this->assertFalse(isset($elements[0]->a), 'Element for previous page has no link.'); + $this->assertClass($elements[0], 'pager__item-previous', 'Element for previous page has .pager__item-previous class.'); + $this->assertFalse($elements[0]->a, 'Element for previous page has link.'); - $this->assertClass($elements[1], 'pager-current', 'Element for current page has .pager-current class.'); - $this->assertFalse(isset($elements[1]->a), 'Element for current page has no link.'); + $this->assertClass($elements[1], 'is-active', 'Element for current page has .is-active class.'); + $this->assertTrue($elements[1]->a, 'Element for current page has link.'); - $this->assertClass($elements[2], 'pager-next', "Element for next page has .pager-next class."); - $this->assertTrue($elements[2]->a, "Link to next page found."); + $this->assertClass($elements[2], 'pager__item-next', 'Element for next page has .pager__item-next class.'); + $this->assertTrue($elements[2]->a, 'Link to next page found.'); // Navigate to next page. - $elements = $this->xpath('//li[contains(@class, :class)]/a', array(':class' => 'pager-next')); + $elements = $this->xpath('//li[contains(@class, :class)]/a', array(':class' => 'pager__item-next')); $this->clickPreviewLinkAJAX($elements[0]['href'], 3); // Test that the pager is present and rendered. - $elements = $this->xpath('//ul[@class = "pager"]/li'); + $elements = $this->xpath('//ul[contains(@class, :class)]/li', array(':class' => 'pager__items')); $this->assertTrue(!empty($elements), 'Mini pager found.'); // Verify elements and links to pages. // We expect to find 3 elements: previous page with a link, current // page with no link, and next page with a link. - $this->assertClass($elements[0], 'pager-previous', 'Element for previous page has .pager-previous class.'); - $this->assertTrue($elements[0]->a, "Link to previous page found."); + $this->assertClass($elements[0], 'pager__item-previous', 'Element for previous page has .pager__item-previous class.'); + $this->assertTrue($elements[0]->a, 'Link to previous page found.'); - $this->assertClass($elements[1], 'pager-current', 'Element for current page has .pager-current class.'); - $this->assertFalse(isset($elements[1]->a), 'Element for current page has no link.'); + $this->assertClass($elements[1], 'is-active', 'Element for current page has .is-active class.'); + $this->assertFalse($elements[1]->a, 'Element for current page has link.'); - $this->assertClass($elements[2], 'pager-next', "Element for next page has .pager-next class."); - $this->assertTrue($elements[2]->a, "Link to next page found."); + $this->assertClass($elements[2], 'pager__item-next', 'Element for next page has .pager__item-next class.'); + $this->assertTrue($elements[2]->a, 'Link to next page found.'); } /** diff --git a/core/themes/bartik/css/style.css b/core/themes/bartik/css/style.css index c866079..8257c10 100644 --- a/core/themes/bartik/css/style.css +++ b/core/themes/bartik/css/style.css @@ -129,7 +129,7 @@ body, ul.contextual-links, ul.links, ul.primary, -.item-list .pager, +.pager__items, div.field-type-taxonomy-term-reference, div.messages, .node__meta, @@ -277,24 +277,26 @@ table ul.links li { font-size: 0.923em; text-shadow: 0 0 0 !important; } -.item-list .pager { +.pager__items { font-size: 0.929em; -} -.item-list .pager li { padding: 10px 15px; } -.item-list .pager a { +.pager__item a { display: inline-block; } -.item-list .pager li.pager-first, -.item-list .pager li.pager-previous { +.pager__item.is-active a { + color: #3B3B3B; + border-bottom: 0; +} +.pager__item-first, +.pager__item-previous { padding: 10px 10px 10px 0; } -.item-list .pager li.pager-ellipsis { +.pager__item-ellipsis { padding: 10px 0; } -.item-list .pager li.pager-last, -.item-list .pager li.pager-next { +.pager__item-last, +.pager__item-next { padding: 10px 0 10px 10px; } ul.menu li { diff --git a/core/themes/seven/css/style.css b/core/themes/seven/css/style.css index ff81295..b1af160 100644 --- a/core/themes/seven/css/style.css +++ b/core/themes/seven/css/style.css @@ -477,21 +477,21 @@ div.submitted { /** * Pagination. - * The item-list CSS uses quite strong selectors, we have to match them here to - * override. */ -.item-list .pager li { +.pager__items { + margin-bottom: .5em; +} +.pager__item { display: inline-block; color: #8c8c8c; font-size: 1.08em; padding: 0 0.6em; margin: 0; } -.item-list .pager a, -.item-list .pager .pager-current { +.pager__item a { border-bottom: 2px solid transparent; line-height: 1.55em; - padding: 0 5px; + padding: 0 5px 3px; text-decoration: none; -webkit-transition: border-bottom-color 0.2s; -moz-transition: border-bottom-color 0.2s; @@ -499,28 +499,24 @@ div.submitted { font-weight: 600; -webkit-font-smoothing: antialiased; } -.item-list .pager a { - padding-bottom: 3px; -} -.item-list .pager .pager-current { +.pager__item.is-active a { border-bottom-width: 3px; border-bottom-color: #2a678c; + padding-bottom: 2px; color: #2a678c; - margin: 0 5px; font-weight: 700; } -.item-list .pager a:focus, -.item-list .pager a:hover { +.pager__item a:focus, +.pager__item a:hover { border-bottom-color: #3395d2; color: #3395d2; } -.item-list .pager-next a, -.item-list .pager-last a, -.item-list .pager-first a, -.item-list .pager-previous a { +.pager__item-next a, +.pager__item-last a, +.pager__item-first a, +.pager__item-previous a { border-bottom-width: 0; color: #2a678c; - font-weight: 600; } /**