Skip to content

Commit

Permalink
feat(ld-pagination): add dots and on brand color modes
Browse files Browse the repository at this point in the history
Co-authored-by: René Schubert <1551001+renet@users.noreply.github.com>
  • Loading branch information
Tabanion and renet authored May 30, 2022
1 parent 67e6026 commit 9e60ed7
Show file tree
Hide file tree
Showing 163 changed files with 4,171 additions and 791 deletions.
2,399 changes: 2,259 additions & 140 deletions screenshot/builds/master.json

Large diffs are not rendered by default.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
151 changes: 143 additions & 8 deletions src/liquid/components/ld-pagination/ld-pagination.shadow.css
Original file line number Diff line number Diff line change
@@ -1,31 +1,70 @@
.ld-pagination {
/* Not using 0s here because we rely on the transition end event. */
--ld-pagination-animation-duration: 1ms;
--ld-pagination-sm-item-size: 2rem;
--ld-pagination-md-item-size: 2.5rem;
--ld-pagination-lg-item-size: 3.125rem;
--ld-pagination-column-size: calc(
--ld-pagination-column-size: var(--ld-pagination-default-column-size);
--ld-pagination-default-column-size: calc(
var(--ld-pagination-item-size) + var(--ld-pagination-items-space)
);
--ld-pagination-more-indicator-font: var(--ld-typo-body-m);
--ld-pagination-dot-col: var(--ld-thm-primary-alpha-low);
--ld-pagination-dots-indicator-size: calc(
var(--ld-pagination-dots-size) + var(--ld-sp-8)
);
--ld-pagination-dots-indicator-size-active: calc(
var(--ld-pagination-dots-size) + var(--ld-sp-12)
);
--ld-pagination-dots-sm-size: 0.25rem;
--ld-pagination-dots-md-size: 0.375rem;
--ld-pagination-dots-lg-size: 0.5rem;
--ld-pagination-dots-size: var(--ld-pagination-dots-md-size);
--ld-pagination-dots-sm-space: var(--ld-sp-8);
--ld-pagination-dots-md-space: var(--ld-sp-12);
--ld-pagination-dots-lg-space: var(--ld-sp-16);
--ld-pagination-dots-space: var(--ld-pagination-dots-md-space);
--ld-pagination-item-size: var(--ld-pagination-md-item-size);
--ld-pagination-items-space: var(--ld-sp-4);
--ld-pagination-marker-col: var(--ld-thm-primary-alpha-lowest);
--ld-pagination-more-indicator-font: var(--ld-typo-body-m);
--ld-pagination-primary-col: var(--ld-thm-primary);
--ld-pagination-selected-col: var(--thm-primary-active);

align-items: center;
display: inline-flex;
list-style: none;
margin: 0;
overflow: hidden;
/* for the focus outline */
padding: var(--ld-sp-1);
position: relative;

&--sm {
--ld-pagination-more-indicator-font: var(--ld-typo-body-s);
--ld-pagination-item-size: var(--ld-pagination-sm-item-size);
--ld-pagination-dots-size: var(--ld-pagination-dots-sm-size);
--ld-pagination-dots-space: var(--ld-pagination-dots-sm-space);
}

&--lg {
--ld-pagination-more-indicator-font: var(--ld-typo-body-l);
--ld-pagination-item-size: var(--ld-pagination-lg-item-size);
--ld-pagination-dots-size: var(--ld-pagination-dots-lg-size);
--ld-pagination-dots-space: var(--ld-pagination-dots-lg-space);
}

&--brand-color {
--ld-pagination-marker-col: var(--ld-col-wht-alpha-lowest);
--ld-pagination-dot-col: var(--ld-col-wht-alpha-low);
--ld-pagination-primary-col: var(--ld-col-wht);
--ld-pagination-selected-col: var(--ld-col-wht);

ld-button::part(button) {
color: var(--ld-col-wht);

&:hover {
background-color: var(--ld-col-wht-alpha-low);
}
}
}
}

Expand Down Expand Up @@ -54,7 +93,7 @@
}

.ld-pagination__more-indicator {
color: var(--ld-thm-primary);
color: var(--ld-pagination-primary-col);
font: var(--ld-pagination-more-indicator-font);
font-weight: 700;
height: var(--ld-pagination-item-size);
Expand Down Expand Up @@ -83,6 +122,10 @@
width: calc(
var(--ld-pagination-slider-cols) * var(--ld-pagination-column-size)
);

&--transitioning {
overflow: hidden;
}
}

.ld-pagination__items {
Expand All @@ -108,17 +151,21 @@
}

&--selected ld-button {
--ld-button-bg-color: transparent;
--ld-button-bg-col: transparent;

&::part(button) {
color: var(--thm-primary-active);
color: var(--ld-pagination-selected-col);
font-weight: 900;
}

.ld-pagination__dot {
background-color: var(--ld-pagination-primary-col);
}
}
}

.ld-pagination__marker {
background: var(--ld-thm-primary-alpha-lowest);
background: var(--ld-pagination-marker-col);
border-radius: var(--ld-br-m);
height: var(--ld-pagination-item-size);
position: absolute;
Expand All @@ -127,5 +174,93 @@
transform: translateX(
calc(var(--ld-pagination-column-size) * var(--ld-pagination-selected-index))
);
transition: transform 100ms ease;
transition: transform var(--ld-pagination-animation-duration) ease,
opacity var(--ld-pagination-animation-duration) ease;

@media (prefers-reduced-motion: no-preference) {
--ld-pagination-animation-duration: 0.1s;
}

&--hidden {
opacity: 0;
}
}

.ld-pagination--dots {
--ld-pagination-item-size: var(--ld-pagination-dots-size);
--ld-pagination-items-space: var(--ld-pagination-dots-space);
--ld-pagination-column-size: max(
var(--ld-pagination-default-column-size),
var(--ld-pagination-dots-indicator-size)
);

.ld-pagination__arrow:not(:last-child),
.ld-pagination__sticky {
margin-right: var(--ld-sp-4);
}

.ld-pagination__slide-wrapper {
height: var(--ld-pagination-column-size);
margin-right: var(--ld-sp-4);
}

.ld-pagination__item {
align-items: center;
display: flex;
height: var(--ld-pagination-column-size);
justify-content: center;
left: calc(
var(--ld-pagination-item-pos) * var(--ld-pagination-column-size)
);
width: var(--ld-pagination-column-size);

&:not(.ld-pagination__item--selected) .ld-pagination__dot::after {
background-color: var(--ld-pagination-primary-col);
opacity: 0.7;
}
}
}

.ld-pagination__dot {
align-items: center;
display: flex;
justify-content: center;
height: var(--ld-pagination-column-size);
width: var(--ld-pagination-column-size);

&::part(button) {
align-items: center;
border-radius: var(--ld-br-full);
display: flex;
height: var(--ld-pagination-dots-indicator-size);
justify-content: center;
min-height: auto;
min-width: auto;
position: absolute;
width: var(--ld-pagination-dots-indicator-size);

&:active {
height: var(--ld-pagination-dots-indicator-size-active);
width: var(--ld-pagination-dots-indicator-size-active);
}

&:focus {
outline-offset: calc(var(--ld-sp-1) * -1);
outline-color: var(--ld-thm-primary);

&:not(:focus-visible) {
outline: none;
}
}
}

&::after {
background-color: var(--ld-pagination-dot-col);
border-radius: 50%;
content: '';
height: var(--ld-pagination-dots-size);
pointer-events: none;
position: absolute;
width: var(--ld-pagination-dots-size);
}
}
Loading

0 comments on commit 9e60ed7

Please sign in to comment.