Merge pull request #1860 from Kajabi/fix/pl-nav-sizing-color-updates

fix(nav): Adjust sizing and color of text and icon
Kajabi · Jan 23, 2024 · 175a2d7 · 175a2d7
2 parents 9948869 + 1769d47
commit 175a2d7
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_nav_link.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_nav_link.html.erb
@@ -22,7 +22,7 @@ attributes = component.attributes.present? ? component.attributes : {}
 %>
 <%= link_to component.link, method: component.method, class: "sage-nav__link #{active_class} #{component_class} #{nav_link_icon_class}", **attributes do %>
   <% if component.icon %>
-    <i class="sage-icon-<%= component.icon %>-lg sage-nav__icon"></i>
+    <i class="sage-icon-<%= component.icon %> sage-nav__icon"></i>
   <% end %>
   <span class="sage-nav__label">
     <%= component.text %>

diff --git a/packages/sage-assets/lib/stylesheets/components/_nav.scss b/packages/sage-assets/lib/stylesheets/components/_nav.scss
@@ -4,11 +4,11 @@
 /// @group sage
 ////
 
-$-nav-color-text: sage-color(charcoal, 500);
+$-nav-color-text: sage-color(charcoal, 300);
 $-nav-color-focus: sage-color(grey, 500);
 $-nav-color-background: sage-color(grey, 300);
 $-nav-color-background-hover: sage-color(grey, 300);
-$-nav-icon-size: rem(20px);
+$-nav-icon-size: rem(16px);
 $-nav-icon-spacing: rem(8px);
 $-nav-subitem-border-width: rem(2px);
 
@@ -49,6 +49,7 @@ $-nav-subitem-border-width: rem(2px);
   transition-property: background, box-shadow;
 
   &:hover {
+    color: $-nav-color-text;
     background-color: $-nav-color-background-hover;
   }
 }