feat: align with garden styles

zendesk · Jul 14, 2023 · 610cf69 · 610cf69
1 parent 82b4c97
commit 610cf69
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 10 deletions.
diff --git a/style.css b/style.css
@@ -4551,9 +4551,9 @@ html[dir=rtl] .notification-left-aligned {
 
 .dropdown-menu {
   background: #fff;
-  border: 1px solid #87929D;
+  border: 1px solid #d8dcde;
   border-radius: 3px;
-  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 20px 30px 0px rgba(23, 73, 77, 0.15);
   display: none;
   font-size: 14px;
   font-style: normal;
@@ -4574,7 +4574,7 @@ html[dir=rtl] .notification-left-aligned {
   margin: 4px 0;
 }
 .dropdown-menu [role=menuitem] {
-  color: #333;
+  color: #2f3941;
   cursor: pointer;
   display: block;
   padding: 7px 40px 7px 20px;
@@ -4590,9 +4590,9 @@ html[dir=rtl] .notification-left-aligned {
   padding: 7px 20px 7px 40px;
 }
 .dropdown-menu [role=menuitem]:hover, .dropdown-menu [role=menuitem]:focus {
-  background: #f3f3f3;
+  background: rgba(31, 115, 183, 0.08);
   text-decoration: none;
-  color: #333;
+  color: #2f3941;
 }
 .dropdown-menu [role=menuitem][aria-selected=true] {
   cursor: default;

diff --git a/styles/_dropdowns.scss b/styles/_dropdowns.scss
@@ -27,9 +27,9 @@
 
 .dropdown-menu {
   background: #fff;
-  border: 1px solid $high-contrast-border-color;
+  border: 1px solid $menu-border-color;
   border-radius: 3px;
-  box-shadow: 0 1px 5px rgba(0, 0, 0 , .1);
+  box-shadow: 0px 20px 30px 0px rgba(23, 73, 77, 0.15);
   display: none;
   font-size: 14px;
   font-style: normal;
@@ -52,7 +52,7 @@
   }
 
   [role="menuitem"] {
-    color: #333;
+    color: #2f3941;
     cursor: pointer;
     display: block;
     padding: 7px 40px 7px 20px;
@@ -69,9 +69,9 @@
     }
     &:hover,
     &:focus {
-      background: #f3f3f3;
+      background: rgba(31, 115, 183, 0.08);
       text-decoration: none;
-      color: #333;
+      color: #2f3941;
     }
 
     &[aria-selected="true"] {

diff --git a/styles/_variables.scss b/styles/_variables.scss
@@ -15,6 +15,7 @@ $font-size-smaller: 11px;
 
 $high-contrast-border-color: #87929D; // maintains a 3:1 contrast ratio with default background color (#FFF). Use for controls and inputs
 $low-contrast-border-color: #ddd; // less than 3:1 contrast ratio with default background color. Use for elements that do not require user interaction
+$menu-border-color: #d8dcde;
 
 $button-color: $brand_color;