Skip to content

Commit

Permalink
feat(pagination): evo updates part 1 (#1435)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ianmcburnie
ianmcburnie committed Jul 21, 2021
1 parent 66136dd commit 0f4316f
Show file tree
Hide file tree
Showing 10 changed files with 148 additions and 75 deletions.
6 changes: 3 additions & 3 deletions dist/icon-button/ds4/icon-button.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ button.icon-btn:focus > svg,
a.icon-link:focus > svg,
button.icon-btn:hover > svg,
a.icon-link:hover > svg {
fill: var(--icon-button-icon-hover-foreground-color, #333);
fill: var(--icon-button-icon-hover-foreground-color, #555);
}
button.icon-btn:not(:focus-visible),
a.icon-link:not(:focus-visible) {
Expand Down Expand Up @@ -60,7 +60,7 @@ a[aria-disabled="true"].icon-link:hover > svg {
}
a.icon-link:visited:hover > svg,
a.icon-link:visited:focus > svg {
fill: var(--icon-button-icon-hover-foreground-color, #333);
fill: var(--icon-button-icon-hover-foreground-color, #555);
}
button.icon-btn--badged,
a.icon-link--badged {
Expand All @@ -86,6 +86,6 @@ a.icon-link--badged .badge {
--icon-button-badge-border-color: #171717;
--icon-button-icon-foreground-color: #dcdcdc;
--icon-button-icon-active-foreground-color: #dcdcdc;
--icon-button-icon-hover-foreground-color: #5192ff;
--icon-button-icon-hover-foreground-color: #dcdcdc;
}
}
6 changes: 3 additions & 3 deletions dist/icon-button/ds6/icon-button.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ button.icon-btn:focus > svg,
a.icon-link:focus > svg,
button.icon-btn:hover > svg,
a.icon-link:hover > svg {
fill: var(--icon-button-icon-hover-foreground-color, #3665f3);
fill: var(--icon-button-icon-hover-foreground-color, #111820);
}
button.icon-btn:not(:focus-visible),
a.icon-link:not(:focus-visible) {
Expand Down Expand Up @@ -60,7 +60,7 @@ a[aria-disabled="true"].icon-link:hover > svg {
}
a.icon-link:visited:hover > svg,
a.icon-link:visited:focus > svg {
fill: var(--icon-button-icon-hover-foreground-color, #3665f3);
fill: var(--icon-button-icon-hover-foreground-color, #111820);
}
button.icon-btn--badged,
a.icon-link--badged {
Expand All @@ -86,6 +86,6 @@ a.icon-link--badged .badge {
--icon-button-badge-border-color: #171717;
--icon-button-icon-foreground-color: #dcdcdc;
--icon-button-icon-active-foreground-color: #dcdcdc;
--icon-button-icon-hover-foreground-color: #5192ff;
--icon-button-icon-hover-foreground-color: #dcdcdc;
}
}
60 changes: 43 additions & 17 deletions dist/pagination/ds4/pagination.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ nav.pagination {
align-items: center;
display: inline-flex;
justify-content: center;
color: var(--pagination-item-foreground-color, #555);
color: var(--pagination-item-foreground-color, #707070);
font-family: inherit;
font-size: 1rem;
margin: 8px 0;
Expand All @@ -19,10 +19,9 @@ ol.pagination__items {
justify-content: center;
box-sizing: border-box;
flex-wrap: wrap;
height: 48px;
height: 44px;
list-style-type: none;
margin: 0;
overflow: hidden;
padding: 0;
}
ol.pagination__items li:not([hidden]) {
Expand All @@ -37,35 +36,50 @@ button.pagination__previous {
align-items: center;
display: inline-flex;
justify-content: center;
outline-offset: -4px;
}
a.pagination__next,
button.pagination__next {
margin-left: 8px;
}
a.pagination__previous,
button.pagination__previous {
margin-right: 8px;
}
.pagination__item {
align-items: center;
display: inline-flex;
justify-content: center;
box-sizing: border-box;
font-weight: 400;
height: 48px;
margin: 0 4px;
outline-offset: -4px;
width: 48px;
height: 44px;
width: 44px;
}
.pagination__item:active {
color: var(--pagination-item-active-foreground-color, #333);
}
.pagination__item:focus,
.pagination__item:hover {
color: var(--pagination-item-hover-foreground-color, #333);
text-decoration: underline;
color: var(--pagination-item-hover-foreground-color, #00489f);
}
.pagination__item[aria-current="page"] {
background-color: var(--pagination-item-current-background-color, #eee);
border-color: var(--pagination-item-current-border-color, transparent);
border-radius: var(--pagination-item-current-border-radius, 0);
border-style: solid;
border-width: 2px;
color: var(--pagination-item-current-foreground-color, #333);
font-weight: 500;
position: relative;
}
.pagination__item[aria-current="page"]::after {
background-color: currentColor;
border-radius: 4px;
bottom: 0;
content: "";
display: block;
height: 2px;
left: calc(50% - 10px);
position: absolute;
width: 20px;
}
.pagination__item[aria-current="page"]:hover,
.pagination__item[aria-current="page"]:focus {
color: #00489f;
}
button.pagination__item {
background: none;
Expand All @@ -89,14 +103,26 @@ a.pagination__item:focus:not(:focus-visible),
button.pagination__item:focus:not(:focus-visible) {
outline: none;
}
@media (min-width: 601px) {
[dir="rtl"] a.pagination__next,
[dir="rtl"] button.pagination__next {
margin-left: 0;
margin-right: 8px;
}
[dir="rtl"] a.pagination__previous,
[dir="rtl"] button.pagination__previous {
margin-left: 8px;
margin-right: 0;
}
@media (min-width: 600px) {
nav.pagination {
margin: 16px 0;
}
}
@media (prefers-color-scheme: dark) {
.pagination {
--pagination-item-foreground-color: #dcdcdc;
--pagination-item-foreground-color: #9c9c9c;
--pagination-item-current-foreground-color: #dcdcdc;
--pagination-item-hover-foreground-color: #5192ff;
--pagination-item-active-foreground-color: #dcdcdc;
}
}
60 changes: 43 additions & 17 deletions dist/pagination/ds6/pagination.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ nav.pagination {
align-items: center;
display: inline-flex;
justify-content: center;
color: var(--pagination-item-foreground-color, #111820);
color: var(--pagination-item-foreground-color, #707070);
font-family: inherit;
font-size: 1rem;
margin: 8px 0;
Expand All @@ -19,10 +19,9 @@ ol.pagination__items {
justify-content: center;
box-sizing: border-box;
flex-wrap: wrap;
height: 48px;
height: 44px;
list-style-type: none;
margin: 0;
overflow: hidden;
padding: 0;
}
ol.pagination__items li:not([hidden]) {
Expand All @@ -37,35 +36,50 @@ button.pagination__previous {
align-items: center;
display: inline-flex;
justify-content: center;
outline-offset: -4px;
}
a.pagination__next,
button.pagination__next {
margin-left: 8px;
}
a.pagination__previous,
button.pagination__previous {
margin-right: 8px;
}
.pagination__item {
align-items: center;
display: inline-flex;
justify-content: center;
box-sizing: border-box;
font-weight: 500;
height: 48px;
margin: 0 4px;
outline-offset: -4px;
width: 48px;
height: 44px;
width: 44px;
}
.pagination__item:active {
color: var(--pagination-item-active-foreground-color, #111820);
}
.pagination__item:focus,
.pagination__item:hover {
color: var(--pagination-item-hover-foreground-color, #2b0eaf);
text-decoration: underline;
}
.pagination__item[aria-current="page"] {
background-color: var(--pagination-item-current-background-color, transparent);
border-color: var(--pagination-item-current-border-color, #3665f3);
border-radius: var(--pagination-item-current-border-radius, 8px);
border-style: solid;
border-width: 2px;
color: var(--pagination-item-current-foreground-color, #3665f3);
color: var(--pagination-item-current-foreground-color, #111820);
font-weight: 700;
position: relative;
}
.pagination__item[aria-current="page"]::after {
background-color: currentColor;
border-radius: 4px;
bottom: 0;
content: "";
display: block;
height: 2px;
left: calc(50% - 10px);
position: absolute;
width: 20px;
}
.pagination__item[aria-current="page"]:hover,
.pagination__item[aria-current="page"]:focus {
color: #2b0eaf;
}
button.pagination__item {
background: none;
Expand All @@ -89,14 +103,26 @@ a.pagination__item:focus:not(:focus-visible),
button.pagination__item:focus:not(:focus-visible) {
outline: none;
}
@media (min-width: 601px) {
[dir="rtl"] a.pagination__next,
[dir="rtl"] button.pagination__next {
margin-left: 0;
margin-right: 8px;
}
[dir="rtl"] a.pagination__previous,
[dir="rtl"] button.pagination__previous {
margin-left: 8px;
margin-right: 0;
}
@media (min-width: 600px) {
nav.pagination {
margin: 16px 0;
}
}
@media (prefers-color-scheme: dark) {
.pagination {
--pagination-item-foreground-color: #dcdcdc;
--pagination-item-foreground-color: #9c9c9c;
--pagination-item-current-foreground-color: #dcdcdc;
--pagination-item-hover-foreground-color: #5192ff;
--pagination-item-active-foreground-color: #dcdcdc;
}
}
4 changes: 2 additions & 2 deletions docs/_includes/common/pagination.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -339,7 +339,7 @@ <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
<div class="demo__inner">
<nav class="pagination" aria-labelledby="pagination-heading-4" role="navigation">
<span aria-live="polite" role="status">
<h2 class="clipped" id="pagination-heading-3">Results Pagination - Page 1</h2>
<h2 class="clipped" id="pagination-heading-3">Results Pagination - Page 2</h2>
</span>
<a aria-label="Previous Page" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
<svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
Expand Down Expand Up @@ -392,7 +392,7 @@ <h2 class="clipped" id="pagination-heading-3">Results Pagination - Page 1</h2>
{% highlight html %}
<nav class="pagination pagination--fluid" aria-labelledby="pagination-heading" role="navigation">
<span aria-live="off" role="status">
<h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
<h2 class="clipped" id="pagination-heading">Results Pagination - Page 2</h2>
</span>
<a aria-label="Previous Page" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
<svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
Expand Down
4 changes: 2 additions & 2 deletions src/less/icon-button/base/icon-button.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
@icon-button-badge-font-size: @font-size-small;
@icon-button-icon-foreground-color: @color-icon-actionable-default;
@icon-button-icon-active-foreground-color: @color-icon-actionable-active;
@icon-button-icon-hover-foreground-color: @color-icon-actionable-hover;
@icon-button-icon-hover-foreground-color: @icon-button-icon-foreground-color;
@icon-button-background-color: @color-grey1;

a.icon-link {
Expand Down Expand Up @@ -109,6 +109,6 @@ a.icon-link--badged {
--icon-button-badge-border-color: @color-background-default-dark-mode;
--icon-button-icon-foreground-color: @color-text-default-dark-mode;
--icon-button-icon-active-foreground-color: @color-text-default-dark-mode;
--icon-button-icon-hover-foreground-color: @color-b4-dark-mode;
--icon-button-icon-hover-foreground-color: @color-text-default-dark-mode;
}
}
Loading

0 comments on commit 0f4316f

Please sign in to comment.