diff -u b/css/src/components/pager.css b/css/src/components/pager.css --- b/css/src/components/pager.css +++ b/css/src/components/pager.css @@ -41,7 +41,7 @@ .pager__item { display: inline-block; - margin: 0 0.25rem; + margin: 0 calc(var(--space-xs) / 2); } .pager__item:first-child { margin-left: 0; @@ -49,9 +49,6 @@ .pager__item:last-child { margin-right: 0; } -.pager__item--ellipsis { - margin: 0; -} .pager__item--action { order: 2; } @@ -65,8 +62,8 @@ .pager__link { display: inline-block; min-width: var(--pager-size); - padding-right: var(--pager-border-width); /* Pager border width, for simplicity. */ - padding-left: var(--pager-border-width); + padding-right: 9px; + padding-left: 9px; box-sizing: border-box; border-radius: var(--space-m); /* Pager size ÷ 2 */ background: var(--pager-bg); /* Make sure that the text is visible on dark background. */ @@ -79,35 +76,22 @@ text-decoration: none; } .pager__link:focus { - box-shadow: 0 0 0 0.125rem var(--pager-bg), 0 0 0 0.3125rem var(--pager-bg--focus); + box-shadow: 0 0 0 var(--pager-border-width) var(--pager-bg), 0 0 0 0.3125rem var(--pager-bg--focus); + outline: 1px dotted transparent; position: relative; } .pager__link:hover { - padding-right: 0; - padding-left: 0; - border: var(--pager-border-width) solid var(--pager-bg--hover); background: var(--pager-bg--hover); - line-height: calc(var(--pager-size) - (2 * var(--pager-border-width))); /* 1.75rem = 2rem − (2 × 0.125rem) */ } .pager__link--action-link { - padding-right: var(--space-xs); - padding-left: var(--space-xs); border-radius: var(--pager-action-border-radius); } -.pager__link--action-link:hover { - padding-right: calc(var(--space-xs) - 0.125rem); - padding-left: calc(var(--space-xs) - 0.125rem); -} /* Active number link. */ .pager__link.is-active { background: var(--pager-bg--active); color: var(--pager-fg--active); } -/* Active number link. */ -.pager__link.is-active:hover { - border-color: var(--pager-bg--active); -} .pager__icon { height: var(--font-size-base);