Skip to content

Commit

Permalink
Add image filters and do UX tweaks for swatches (#3334)
Browse files Browse the repository at this point in the history 
* Add image filters and do UX tweaks for swatches

* Andy PR changes

* Change how default presentation is set
  • Loading branch information
@jas7457
jas7457 committed Mar 14, 2024
1 parent d1a6939 commit 5a332f5
Show file tree
Hide file tree
Showing 4 changed files with 302 additions and 138 deletions.
168 changes: 141 additions & 27 deletions assets/component-facets.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -300,13 +300,18 @@
}

.facets-layout-grid {
--swatch-input--size: 2.4rem;

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
text-align: center;
padding: 2rem 2.4rem;
gap: 3rem 1rem;
}

.facets-layout-list--swatch {
--swatch-input--size: 2.4rem;
}

.facets-layout-grid.facets-layout-grid {
gap: 1rem;
}

.facets-layout-grid.facets__list--vertical {
Expand All @@ -319,8 +324,8 @@
}

/* Hover/focus state */
.facets-layout-list .facets__label:hover .facet-checkbox__text,
.facets-layout-list input:focus ~ .facet-checkbox__text {
.facets-layout-list .facets__label:hover .facet-checkbox__text-label,
.facets-layout-list input:focus ~ .facet-checkbox__text-label {
text-decoration: underline;
}

Expand All @@ -331,18 +336,111 @@
.facets-layout-grid .facets__label {
display: flex;
flex-direction: column;
gap: 0.8rem;
padding: 0;
height: 100%;
font-size: 1.3rem;
}

.facets__item label,
.facets__item input[type='checkbox'] {
/* Image filter specific styles */
.facets-layout-grid .facets__image-wrapper {
display: block;
position: relative;
aspect-ratio: 1 / 1;
min-height: 0;
padding: 0.4rem;
}

.facets__image {
width: 100%;
height: 100%;
object-fit: contain;
}

/* Default state */
.facets-layout-grid--image .facets__label {
outline-style: solid;
outline-color: transparent;
transition-property: outline-color, outline-width, box-shadow;
transition-duration: var(--duration-short);
transition-timing-function: ease;
}

.facets-layout-grid--image .facet-checkbox__text {
padding: 0.4rem;
}

/* Active state */
.facets-layout-grid--image .facets__label.active {
outline-color: rgb(var(--color-foreground));
outline-width: 0.1rem;
}

/* Hover state */
.facets-layout-grid--image .facets__label:hover {
outline-color: rgba(var(--color-foreground), 0.4);
outline-width: 0.2rem;
}

/* Focus visible */
.facets-layout-grid--image .facets__label:has(:focus-visible) {
outline-color: rgba(var(--color-foreground), 0.5);
outline-width: 0.2rem;
box-shadow: 0px 0px 3px 1px rgba(var(--color-foreground), 0.25);
}

/* Focused state */
.facets-layout-grid--image .facets__label.active:has(:focus-visible) {
outline-color: rgb(var(--color-foreground));
outline-width: 0.1rem;
box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.5),
0 0 0.7rem 0.1rem rgba(var(--color-foreground), 0.25);
}

/* Disabled state */
.facets-layout-grid--image .facets__label.disabled {
/* Note: disabled gets its transparency set by a parent, so no need to set an alpha here. Also, we move the outline to the child when disabled */
outline: none;
}

.facets-layout-grid--image .facets__label.disabled .facets__image-wrapper {
outline: 0.1rem solid rgb(var(--color-foreground));
}

.facets-layout-grid--image .facets__label.disabled .facets__image-wrapper:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
/* 100% * square root of 2, this is not a magic number, it is math! */
width: 141.4%;
height: 0.1rem;
background-color: rgb(var(--color-foreground));
transform: rotate(-45deg);
transform-origin: left;
}

.facets-layout-grid--image .facets__label.disabled .disabled-line {
position: absolute;
inset: 0;
height: 100%;
width: 100%;
background: transparent;
margin: 0;
}

.facets-layout-grid--image .facets__label.disabled .disabled-line line {
stroke: rgb(var(--color-foreground));
stroke-width: 1;
}

/* End of image filter specific styles */

.list-menu__item label,
.list-menu__item input[type='checkbox'] {
cursor: pointer;
}

.facets__label {
.facet-checkbox {
padding: 1rem 2rem 1rem 0;
flex-grow: 1;
position: relative;
Expand All @@ -352,24 +450,32 @@
}

/* Hover, active, and focus states */
:is(.facets__label:hover, .facets__label.active, .facets__label:has(:focus-visible)) {
.facets__label:hover,
.facets__label.active,
.facets__label:has(:focus-visible) {
color: rgba(var(--color-foreground), 1);
}

/* Focus states for older browsers */
@supports not selector(:has(a, b)) {
.facets__label:focus-within {
color: rgba(var(--color-foreground), 1);
}
/* Disabled state */
.facets-layout .facets__label.disabled {
pointer-events: none;
}

/* Disabled state */
.facets__label.disabled {
.facets-layout:not(.facets-layout-list--swatch, .facets-layout-grid--image) .facets__label.disabled {
opacity: 0.4;
}

.facets-layout-grid--image .facets__label.disabled .facets__image-wrapper {
opacity: 0.2;
}

:is(.facets-layout-list--swatch, .facets-layout-grid--image) .facets__label.disabled .facet-checkbox__text {
opacity: 0.4;
pointer-events: none;
}

.facets-layout-list input[type='checkbox'] {
/* End disabled state */

.facets-layout-list--text input[type='checkbox'] {
position: absolute;
opacity: 1;
width: 1.6rem;
Expand All @@ -381,17 +487,25 @@
-webkit-appearance: none;
}

.facets-layout-grid input[type='checkbox'] {
.facets-layout-grid input[type='checkbox'],
.facets-layout-list--swatch input[type='checkbox'] {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
inset: 0;
z-index: 1;
margin: 0;
opacity: 0;
}

.facets-layout-list--swatch .facets__label {
display: flex;
align-items: center;
gap: 0.8rem;
}

.swatch-input-wrapper {
display: flex;
}

.no-js .facet-checkbox input[type='checkbox'] {
z-index: 0;
}
Expand Down Expand Up @@ -486,7 +600,7 @@ span.active-facets__button-inner {
min-width: 0;
padding: 0.5rem 1rem;
display: flex;
align-items: stretch;
align-items: center;
}

span.active-facets__button-inner:before,
Expand Down
48 changes: 30 additions & 18 deletions assets/component-swatch-input.css
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,52 @@
/* swatch-input lives in its own file for reusability of the swatch in other areas than the product form context */
.swatch-input__input + .swatch-input__label {
--swatch-input--border-radius: 50%;

display: inline-block;
max-width: 100%;
border-radius: var(--swatch-input--border-radius);
cursor: pointer;
outline-offset: 0.2rem;
outline-color: transparent;
outline-style: solid;
transition-property: outline-color, outline-width, box-shadow;
transition-duration: var(--duration-short);
transition-timing-function: ease;
forced-color-adjust: none;
}

.swatch-input__input + .swatch-input__label.swatch-input__label--square {
--swatch-input--border-radius: 0.2rem;
}

/* Active state */
.swatch-input__input:active + .swatch-input__label,
.swatch-input__input:checked + .swatch-input__label {
outline: 0.1rem solid rgb(var(--color-foreground));
}

/* Hover state */
.swatch-input__input + .swatch-input__label:hover,
.swatch-input__input:hover + .swatch-input__label {
outline: 0.2rem solid rgba(var(--color-foreground), 0.4);
}

.swatch-input__input:active + .swatch-input__label,
.swatch-input__input:checked + .swatch-input__label {
/* Focus visible */
.swatch-input__input:focus-visible + .swatch-input__label {
outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
box-shadow: 0 0 0 0.2rem rgb(var(--color-background)), 0 0 0.1rem 0.5rem rgba(var(--color-foreground), 0.25);
}

/* Active and focused */
.swatch-input__input:active:focus-visible + .swatch-input__label,
.swatch-input__input:checked:focus-visible + .swatch-input__label {
outline: 0.1rem solid rgb(var(--color-foreground));
box-shadow: 0 0 0 0.2rem rgb(var(--color-background)), 0 0 0.1rem 0.4rem rgba(var(--color-foreground), 0.25);
}

/* Visually disabled */
.swatch-input__input.visually-disabled:not(:active):not(:checked) + .swatch-input__label {
transition: none;
}
.swatch-input__input.visually-disabled:not(:active):not(:checked) + .swatch-input__label:hover {
outline: none;
}
Expand All @@ -34,25 +56,17 @@
pointer-events: none;
}

/* Focus visible */
.swatch-input__input:focus-visible + .swatch-input__label {
box-shadow: 0 0 0 0.5rem rgb(var(--color-background)), 0 0 0 0.7rem rgba(var(--color-foreground), 0.55);
}

/* Overrides for swatch snippet when used inside disabled swatch-input */
.swatch-input__input:disabled + .swatch-input__label > .swatch,
.swatch-input__input.visually-disabled + .swatch-input__label > .swatch {
position: relative;
overflow: hidden;
}

/* Display white semi-transparent overlay over swatch when input is disabled */
.swatch-input__input:disabled + .swatch-input__label > .swatch::before,
.swatch-input__input.visually-disabled + .swatch-input__label > .swatch::before {
content: '';
position: absolute;
inset: 0;
background: rgba(250, 250, 250, 0.5);
/* Disabled styles */
.swatch-input__input:disabled + .swatch-input__label > .swatch,
.swatch-input__input.visually-disabled + .swatch-input__label > .swatch {
opacity: 0.4;
}

/* Display crossed out line over swatch when input is disabled */
Expand All @@ -61,15 +75,13 @@
/* Diagonal of a square = length of the side * sqrt(2) */
--diagonal--size: calc(var(--swatch-input--size) * 1.414);
--crossed-line--size: 0.1rem;
--crossed-line--color: rgb(0, 0, 0);

content: '';
position: absolute;
bottom: calc(var(--crossed-line--size) * -0.5);
left: 0;
width: var(--diagonal--size);
height: var(--crossed-line--size);
background-color: var(--crossed-line--color);
background-color: rgb(var(--color-foreground));
transform: rotate(-45deg);
transform-origin: left;
}
2 changes: 1 addition & 1 deletion assets/component-swatch.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
background-position: var(--swatch-focal-point, initial);
background-size: cover;
background-origin: border-box;
border: 0.1rem solid rgba(var(--color-foreground), 0.45);
border: 0.1rem solid rgba(var(--color-foreground), 0.15);
border-radius: var(--swatch--border-radius);
}

Expand Down
Loading

0 comments on commit 5a332f5

Please sign in to comment.