Skip to content

Commit c744bcf

Browse files
committed
fix: Added animation to chevron + alignment fixed
1 parent 711affc commit c744bcf

File tree

2 files changed

+32
-5
lines changed

2 files changed

+32
-5
lines changed

assets/css/v2/style.css

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -486,7 +486,7 @@ atomic-search-layout atomic-layout-section[section="search"] {
486486
border: none;
487487
font-size: 1.25rem;
488488
width: 100%;
489-
padding: 0.5rem;
489+
padding: 0.5rem 0.5rem 0.5rem 1rem; /* 1rem to vertically align with searchbar text */
490490
cursor: pointer;
491491
}
492492

@@ -508,6 +508,33 @@ atomic-search-layout atomic-layout-section[section="search"] {
508508
box-shadow: 3px 3px 0px var(--color-shadow);
509509
}
510510

511+
@keyframes rotateAnimationToCloseIcon {
512+
0% {
513+
transform: rotate(0deg);
514+
}
515+
100% {
516+
transform: rotate(180deg);
517+
}
518+
}
519+
520+
@keyframes rotateAnimationToOpenIcon {
521+
0% {
522+
transform: rotate(180deg);
523+
}
524+
100% {
525+
transform: rotate(0deg);
526+
}
527+
}
528+
529+
button:has(~ .product-selector[style*="block"])
530+
> .product-selector-button-icon {
531+
animation: rotateAnimationToCloseIcon 0.25s ease-in-out forwards;
532+
}
533+
534+
button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
535+
animation: rotateAnimationToOpenIcon 0.25s ease-in-out forwards;
536+
}
537+
511538
.product-selector p {
512539
font-size: 0.75rem;
513540
color: var(--color-product-title);

layouts/partials/sidebar-v2.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,10 @@
2222

2323
<button class="product-selector-button" id="product-selector-button">
2424
{{/* product name and selector */}}
25-
<div class="product-selector-name">{{ $productName }}</div>
26-
<div class="product-selector-button-icon">
27-
<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="product-selector-expand-icon">
28-
<path d="M1 13L7 7L0.999999 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="product-selector-expand-icon"/>
25+
<div class="product-selector-name" id="product-selector-name">{{ $productName }}</div>
26+
<div class="product-selector-button-icon" id="product-selector-button-icon">
27+
<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg" id="product-selector-chevron-icon">
28+
<path d="M1 13L7 7L0.999999 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="product-selector-chevron-icon"/>
2929
</svg>
3030
</div>
3131
</button>

0 commit comments

Comments
 (0)