[fix] always show saved item remove button on mobile and adjust spacing

cupoftea4 · Nov 30, 2024 · b6d26c3 · b6d26c3
1 parent 0efdd97
commit b6d26c3
Showing 1 changed file with 27 additions and 15 deletions.
diff --git a/src/features/header/components/SavedMenu.module.scss b/src/features/header/components/SavedMenu.module.scss
@@ -1,5 +1,5 @@
-@use '../../../styles/utils' as *;
-@use '../../../styles/variables' as *;
+@use "../../../styles/utils" as *;
+@use "../../../styles/variables" as *;
 
 .saved {
   position: relative;
@@ -15,7 +15,7 @@ $icon-size: 0.875rem;
   left: -190%;
   &.home {
     left: auto;
-    right: -90%;
+    right: -70%;
   }
   @include tablet {
     width: 13rem;
@@ -25,19 +25,26 @@ $icon-size: 0.875rem;
   .saved-menu {
     z-index: 101;
     animation: show-menu 0.1s ease-in-out forwards;
-    background: linear-gradient(190deg, var(--accent-clr) -8.75%, rgba(255, 255, 255, 0.07) 83.95%);
+    background: linear-gradient(
+      190deg,
+      var(--accent-clr) -8.75%,
+      rgba(255, 255, 255, 0.07) 83.95%
+    );
     border: var(--border-clr) solid 1px;
     border-radius: $border-radius;
     box-shadow: 2px 2px 11px 0px rgba(0, 0, 0, 0.15);
     backdrop-filter: blur(40px);
     -webkit-backdrop-filter: blur(40px);
-    padding: 1.5rem 0;
-  
+    padding: 1rem 0;
+
     .title {
       font-weight: $semi-bold-font;
       font-size: 0.875rem;
       padding: 0 1.625rem;
       display: inline-block;
+      margin-bottom: 0.25rem;
+      width: 100%;
+      text-align: center;
     }
     ul {
       list-style: none;
@@ -47,35 +54,41 @@ $icon-size: 0.875rem;
         padding: 0.375rem 1.5rem;
         align-items: center;
         position: relative;
-        &:hover, &.selected {
+        &:hover,
+        &.selected {
           background-color: var(--accent-clr);
           cursor: pointer;
         }
         /* Remove Item Icon */
-        .remove {
-          display: none;
+        @include can-hover {
+          .remove {
+            display: none;
+          }
         }
-        &:hover .remove {
+        .remove {
           position: absolute;
           right: 1.5rem;
-          display: block;
           width: $icon-size;
           height: $icon-size;
           transition: transform 0.2s ease-in-out;
           cursor: pointer;
-          &:hover, &:focus {
+          &:hover,
+          &:focus {
             outline: none;
             transform: scale(1.15);
           }
         }
+        &:hover .remove {
+          display: block;
+        }
       }
       .list-item {
         flex-grow: 1;
         .name {
           display: flex;
           align-items: center;
           gap: 0.5rem;
-          width: calc(100% - $icon-size - .5rem);
+          width: calc(100% - $icon-size - 0.5rem);
         }
         .check-mark {
           width: $icon-size;
@@ -84,14 +97,13 @@ $icon-size: 0.875rem;
         }
       }
     }
-
   }
 }
 
 @keyframes show-menu {
   0% {
     opacity: 0;
-    transform: translate(0, .5rem);
+    transform: translate(0, 0.5rem);
   }
   100% {
     opacity: 1;