Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Issue #1912608 by Cottser, ckrina, jamesquinton, lauriii, jwilson3, mgifford, scaragucc' | criz: Update pagination markup for new CSS standards and improved accessibility.

8.0.x
webchick 2014-09-27 00:34:33 -07:00
parent 35fcfc4dbb
commit ddbd7f66cd
9 changed files with 250 additions and 268 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

242
core/includes/pager.inc
View File

@ -182,15 +182,7 @@ function template_preprocess_pager(&$variables) {
return;
}
// Fill in default link labels.
$tags = &$variables['tags'];
$tags += array(
t('« first'),
t('‹ previous'),
'',
t('next ›'),
t('last »'),
);
$tags = $variables['tags'];
// Calculate various markers within this pager piece:
// Middle is used to "center" pages around the current page.
@ -219,196 +211,72 @@ function template_preprocess_pager(&$variables) {
}
// End of generation loop preparation.
$li_first = '';
$li_previous = '';
$li_next = '';
$li_last = '';
$current_path = current_path();
// Create the "first" and "previous" links if we are not on the first page.
if ($pager_page_array[$element] > 0) {
$li_first = array(
'#type' => 'link',
'#title' => $tags[0],
'#href' => $current_path,
'#options' => array(
'query' => pager_query_add_page($parameters, $element, 0),
'attributes' => array(
'title' => t('Go to first page'),
),
// Below is ignored by default, supplied to support hook_link_alter
// implementations.
'pager_context' => array(
'link_type' => 'first',
'element' => $element,
),
),
$items['first'] = array();
$options = array(
'query' => pager_query_add_page($parameters, $element, 0),
);
$li_previous = array(
'#type' => 'link',
'#title' => $tags[1],
'#href' => $current_path,
'#options' => array(
'query' => pager_query_add_page($parameters, $element, $pager_page_array[$element] - 1),
'attributes' => array(
'title' => t('Go to previous page'),
'rel' => 'prev',
),
// Below is ignored by default, supplied to support hook_link_alter
// implementations.
'pager_context' => array(
'link_type' => 'previous',
'element' => $element,
),
),
$items['first']['href'] = url($current_path, $options);
if (isset($tags[0])) {
$items['first']['text'] = $tags[0];
}
$items['previous'] = array();
$options = array(
'query' => pager_query_add_page($parameters, $element, $pager_page_array[$element] - 1),
);
$items['previous']['href'] = url($current_path, $options);
if (isset($tags[1])) {
$items['previous']['text'] = $tags[1];
}
}
// Create the "last" and "next" links if we are not on the last page.
if ($pager_page_array[$element] < ($pager_total[$element] - 1)) {
$li_next = array(
'#type' => 'link',
'#title' => $tags[3],
'#href' => $current_path,
'#options' => array(
'query' => pager_query_add_page($parameters, $element, $pager_page_array[$element] + 1),
'attributes' => array(
'title' => t('Go to next page'),
'rel' => 'next',
),
// Below is ignored by default, supplied to support hook_link_alter
// implementations.
'pager_context' => array(
'link_type' => 'next',
'element' => $element,
),
),
);
$li_last = array(
'#type' => 'link',
'#title' => $tags[4],
'#href' => $current_path,
'#options' => array(
'query' => pager_query_add_page($parameters, $element, $pager_total[$element] - 1),
'attributes' => array(
'title' => t('Go to last page'),
),
// Below is ignored by default, supplied to support hook_link_alter
// implementations.
'pager_context' => array(
'link_type' => 'last',
'element' => $element,
),
),
);
if ($i != $pager_max) {
// Add an ellipsis if there are further previous pages.
if ($i > 1) {
$variables['ellipses']['previous'] = TRUE;
}
// Now generate the actual pager piece.
for (; $i <= $pager_last && $i <= $pager_max; $i++) {
$options = array(
'query' => pager_query_add_page($parameters, $element, $i - 1),
);
$items['pages'][$i]['href'] = url($current_path, $options);
if ($i == $pager_current) {
$variables['current'] = $i;
}
}
// Add an ellipsis if there are further next pages.
if ($i < $pager_max) {
$variables['ellipses']['next'] = TRUE;
}
}
if ($pager_total[$element] > 1) {
if ($li_first) {
$items[] = array(
'#wrapper_attributes' => array('class' => array('pager-first')),
'link' => $li_first,
);
}
if ($li_previous) {
$items[] = array(
'#wrapper_attributes' => array('class' => array('pager-previous')),
'link' => $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' => '…',
);
}
// 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),
),
),
),
);
}
if ($i == $pager_current) {
$items[] = array(
'#wrapper_attributes' => array('class' => array('pager-current')),
'#markup' => $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' => ($i - $pager_current),
),
),
),
);
}
}
// Check whether there are further next pages.
if ($i < $pager_max) {
$items[] = array(
'#wrapper_attributes' => array('class' => array('pager-ellipsis')),
'#markup' => '…',
);
}
}
// End generation.
if ($li_next) {
$items[] = array(
'#wrapper_attributes' => array('class' => array('pager-next')),
'link' => $li_next,
);
}
if ($li_last) {
$items[] = array(
'#wrapper_attributes' => array('class' => array('pager-last')),
'link' => $li_last,
);
}
$variables['items'] = array(
'#theme' => 'item_list__pager',
'#items' => $items,
'#attributes' => array('class' => array('pager')),
// Create the "next" and "last" links if we are not on the last page.
if ($pager_page_array[$element] < ($pager_max - 1)) {
$items['next'] = array();
$options = array(
'query' => pager_query_add_page($parameters, $element, $pager_page_array[$element] + 1),
);
$items['next']['href'] = url($current_path, $options);
if (isset($tags[3])) {
$items['next']['text'] = $tags[3];
}
$items['last'] = array();
$options = array(
'query' => pager_query_add_page($parameters, $element, $pager_max - 1),
);
$items['last']['href'] = url($current_path, $options);
if (isset($tags[4])) {
$items['last']['text'] = $tags[4];
}
}
$variables['items'] = $items;
}
/**

4
core/modules/aggregator/src/Tests/AggregatorRenderingTest.php
View File

@ -97,7 +97,7 @@ class AggregatorRenderingTest extends AggregatorTestBase {
// 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.
@ -127,7 +127,7 @@ class AggregatorRenderingTest extends AggregatorTestBase {
// 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));

37
core/modules/comment/src/Tests/CommentPagerTest.php
View File

@ -8,6 +8,7 @@
namespace Drupal\comment\Tests;
use Drupal\comment\CommentManagerInterface;
use Drupal\Component\Utility\String;
/**
* Tests paging of comments and their settings.
@ -329,22 +330,52 @@ class CommentPagerTest extends CommentTestBase {
$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->clickLinkWithXPath('//a[@rel="next"]');
// 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->clickLinkWithXPath('//a[@rel="next"]', 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->clickLinkWithXPath('//a[@rel="next"]');
// Check only one pager updated.
$this->assertRaw('Comment 2 on field comment');
$this->assertRaw('Comment 2 on field comment_2');
}
/**
* Follows a link found at a give xpath query.
*
* Will click the first link found with the given xpath query by default,
* or a later one if an index is given.
*
* If the link is discovered and clicked, the test passes. Fail otherwise.
*
* @param string $xpath
* Xpath query that targets an anchor tag, or set of anchor tags.
* @param int $index
* Link position counting from zero.
*
* @return string|false
* Page contents on success, or FALSE on failure.
*
* @see WebTestBase::clickLink()
*/
protected function clickLinkWithXPath($xpath, $index = 0) {
$url_before = $this->getUrl();
$urls = $this->xpath($xpath);
if (isset($urls[$index])) {
$url_target = $this->getAbsoluteUrl($urls[$index]['href']);
$this->pass(String::format('Clicked link %label (@url_target) from @url_before', array('%label' => $xpath, '@url_target' => $url_target, '@url_before' => $url_before)), 'Browser');
return $this->drupalGet($url_target);
}
$this->fail(String::format('Link %label does not exist on @url_before', array('%label' => $xpath, '@url_before' => $url_before)), 'Browser');
return FALSE;
}
}

6
core/modules/system/css/system.theme.css
View File

@ -165,17 +165,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;
}

29
core/modules/system/src/Tests/Pager/PagerTest.php
View File

@ -55,7 +55,7 @@ class PagerTest extends WebTestBase {
$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));
@ -69,7 +69,7 @@ class PagerTest extends WebTestBase {
* 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.
@ -92,14 +92,13 @@ class PagerTest extends WebTestBase {
// 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($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]);
}
@ -108,24 +107,24 @@ class PagerTest extends WebTestBase {
// 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.');
}
}

87
core/modules/system/templates/pager.html.twig
View File

@ -5,6 +5,26 @@
*
* Available variables:
* - items: List of pager items.
* The list is keyed by the following elements:
* - first: Item for the first page; not present on the first page of results.
* - previous: Item for the previous page; not present on the first page
* of results.
* - next: Item for the next page; not present on the last page of results.
* - last: Item for the last page; not present on the last page of results.
* - pages: List of pages, keyed by page number.
* Sub-sub elements:
* items.first, items.previous, items.next, items.last, and each item inside
* items.pages contain the following elements:
* - href: URL with appropriate query parameters for the item.
* - attributes: A keyed list of HTML attributes for the item.
* - text: The visible text used for the item link, such as "‹ previous"
* or "next ›".
* - current: The page number of the current page.
* - ellipses: If there are more pages than the quantity allows, then an
* ellipsis before or after the listed pages may be present.
* - previous: Present if the currently visible list of pages does not start
* at the first page.
* - next: Present if the visible list of pages ends before the last page.
*
* @see template_preprocess_pager()
*
@ -12,6 +32,69 @@
*/
#}
{% if items %}
<h2 class="visually-hidden">{{ 'Pages'|t }}</h2>
{{ items }}
<nav class="pager" role="navigation" aria-labelledby="pagination-heading">
<h4 id="pagination-heading" class="visually-hidden">{{ 'Pagination'|t }}</h4>
<ul class="pager__items">
{# Print first item if we are not on the first page. #}
{% if items.first %}
<li class="pager__item pager__item--first">
<a href="{{ items.first.href }}" title="{{ 'Go to first page'|t }}"{{ items.first.attributes }}>
<span class="visually-hidden">{{ 'First page'|t }}</span>
<span aria-hidden="true">{{ items.first.text|default('« first'|t) }}</span>
</a>
</li>
{% endif %}
{# Print previous item if we are not on the first page. #}
{% if items.previous %}
<li class="pager__item pager__item--previous">
<a href="{{ items.previous.href }}" title="{{ 'Go to previous page'|t }}" rel="prev"{{ items.previous.attributes }}>
<span class="visually-hidden">{{ 'Previous page'|t }}</span>
<span aria-hidden="true">{{ items.previous.text|default('‹ previous'|t) }}</span>
</a>
</li>
{% endif %}
{# Add an ellipsis if there are further previous pages. #}
{% if ellipses.previous %}
<li class="pager__item pager__item--ellipsis" role="presentation">&hellip;</li>
{% endif %}
{# Now generate the actual pager piece. #}
{% for key, item in items.pages %}
<li class="pager__item{{ current == key ? ' is-active' : '' }}">
{% if current == key %}
{% set title = 'Current page'|t %}
{% else %}
{% set title = 'Go to page @key'|t({'@key': key}) %}
{% endif %}
<a href="{{ item.href }}" title="{{ title }}"{{ item.attributes }}>
<span class="visually-hidden">
{{ current == key ? 'Current page'|t : 'Page'|t }}
</span>
{{- key -}}
</a>
</li>
{% endfor %}
{# Add an ellipsis if there are further next pages. #}
{% if ellipses.next %}
<li class="pager__item pager__item--ellipsis" role="presentation">&hellip;</li>
{% endif %}
{# Print next item if we are not on the last page. #}
{% if items.next %}
<li class="pager__item pager__item--next">
<a href="{{ items.next.href }}" title="{{ 'Go to next page'|t }}" rel="next"{{ items.next.attributes }}>
<span class="visually-hidden">{{ 'Next page'|t }}</span>
<span aria-hidden="true">{{ items.next.text|default('next ›'|t) }}</span>
</a>
</li>
{% endif %}
{# Print last item if we are not on the last page. #}
{% if items.last %}
<li class="pager__item pager__item--last">
<a href="{{ items.last.href }}" title="{{ 'Go to last page'|t }}"{{ items.last.attributes }}>
<span class="visually-hidden">{{ 'Last page'|t }}</span>
<span aria-hidden="true">{{ items.last.text|default('last »'|t) }}</span>
</a>
</li>
{% endif %}
</ul>
</nav>
{% endif %}

54
core/modules/views_ui/src/Tests/PreviewTest.php
View File

@ -107,59 +107,59 @@ class PreviewTest extends UITestBase {
$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);

25
core/themes/bartik/css/style.css
View File

@ -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,29 @@ table ul.links li {
font-size: 0.923em;
text-shadow: 0 0 0 !important;
}
.item-list .pager {
font-size: 0.929em;
.pager .pager__items {
padding: 0;
}
.item-list .pager li {
.pager__item {
font-size: 0.929em;
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 {

34
core/themes/seven/css/components/pager.css
View File

@ -1,46 +1,42 @@
/**
* Pagination.
* The item-list CSS uses quite strong selectors, we have to match them here to
* override.
*/
.item-list .pager li {
.pager__items {
margin: 0.25em 0 0.25em 1.5em;
padding: 0;
}
.pager__item {
display: inline-block;
color: #8c8c8c;
font-size: 1.08em;
padding: 0 0.6em;
margin: 0;
padding: 0 0.4em;
}
.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 2px;
text-decoration: none;
-webkit-transition: border-bottom-color 0.2s;
transition: border-bottom-color 0.2s;
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;
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;
}