🎨 Updated Overflow Menu appearance

codewithkyle · codewithkyle · commit c3c53bd6b39d · 2023-03-21T11:18:56.000-04:00
diff --git a/src/framework/components/overflow-menu/overflow-menu.scss b/src/framework/components/overflow-menu/overflow-menu.scss
@@ -11,7 +11,7 @@ overflow-menu {
         transition: all 150ms var(--ease-in-out);
         user-select: none;
         cursor: pointer;
-        color: var(--grey-600);
+        color: var(--grey-400);
         outline-offset: 0;
 
         &:focus-visible {
@@ -101,15 +101,12 @@ overflow-menu-container {
 
         &:hover,
         &:focus-visible {
-            color: var(--grey-800);
-
             &::before {
                 opacity: 0.05;
             }
         }
 
         &:active {
-            color: var(--grey-800);
             outline-offset: 0;
 
             &::before {
@@ -137,10 +134,10 @@ overflow-menu-container {
                 background-color: var(--danger-500);
             }
 
-            &:hover,
-            &:focus-visible,
-            &:active {
-                color: var(--danger-800);
+            i {
+                svg {
+                    color: var(--danger-700);
+                }
             }
         }
 
@@ -156,6 +153,7 @@ overflow-menu-container {
             svg {
                 width: 18px;
                 height: 18px;
+                color: var(--grey-600);
             }
         }
     }

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ overflow-menu {`
`11`	`11`	`transition: all 150ms var(--ease-in-out);`
`12`	`12`	`user-select: none;`
`13`	`13`	`cursor: pointer;`
`14`		`- color: var(--grey-600);`
	`14`	`+ color: var(--grey-400);`
`15`	`15`	`outline-offset: 0;`
`16`	`16`
`17`	`17`	`&:focus-visible {`
`@@ -101,15 +101,12 @@ overflow-menu-container {`
`101`	`101`
`102`	`102`	`&:hover,`
`103`	`103`	`&:focus-visible {`
`104`		`- color: var(--grey-800);`
`105`		`-`
`106`	`104`	`&::before {`
`107`	`105`	`opacity: 0.05;`
`108`	`106`	`}`
`109`	`107`	`}`
`110`	`108`
`111`	`109`	`&:active {`
`112`		`- color: var(--grey-800);`
`113`	`110`	`outline-offset: 0;`
`114`	`111`
`115`	`112`	`&::before {`
`@@ -137,10 +134,10 @@ overflow-menu-container {`
`137`	`134`	`background-color: var(--danger-500);`
`138`	`135`	`}`
`139`	`136`
`140`		`- &:hover,`
`141`		`- &:focus-visible,`
`142`		`- &:active {`
`143`		`- color: var(--danger-800);`
	`137`	`+ i {`
	`138`	`+ svg {`
	`139`	`+ color: var(--danger-700);`
	`140`	`+ }`
`144`	`141`	`}`
`145`	`142`	`}`
`146`	`143`
`@@ -156,6 +153,7 @@ overflow-menu-container {`
`156`	`153`	`svg {`
`157`	`154`	`width: 18px;`
`158`	`155`	`height: 18px;`
	`156`	`+ color: var(--grey-600);`
`159`	`157`	`}`
`160`	`158`	`}`
`161`	`159`	`}`