File tree Expand file tree Collapse file tree 2 files changed +32
-5
lines changed Expand file tree Collapse file tree 2 files changed +32
-5
lines changed Original file line number Diff line number Diff line change @@ -486,7 +486,7 @@ atomic-search-layout atomic-layout-section[section="search"] {
486
486
border : none;
487
487
font-size : 1.25rem ;
488
488
width : 100% ;
489
- padding : 0.5rem ;
489
+ padding : 0.5rem 0.5 rem 0.5 rem 1 rem ; /* 1rem to vertically align with searchbar text */
490
490
cursor : pointer;
491
491
}
492
492
@@ -508,6 +508,33 @@ atomic-search-layout atomic-layout-section[section="search"] {
508
508
box-shadow : 3px 3px 0px var (--color-shadow );
509
509
}
510
510
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
+
511
538
.product-selector p {
512
539
font-size : 0.75rem ;
513
540
color : var (--color-product-title );
Original file line number Diff line number Diff line change 22
22
23
23
< button class ="product-selector-button " id ="product-selector-button ">
24
24
{{/* 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 "/>
29
29
</ svg >
30
30
</ div >
31
31
</ button >
You can’t perform that action at this time.
0 commit comments