Fixes/1.4.1 (#80)

* chore: update default nav button styling

* update pkg version

---------

Co-authored-by: medevod <medevod@github.com>

Author: medevod

demo/sections/nav-section.html

@@ -1,7 +1,9 @@
 <section id="nav-section">
   <h2>Navs</h2>
-  <p>Navs are used to navigate through
-    the application. Below, you will find examples of how to use the nav system to create a variety of nav states.</p>
+  <p>
+    Navs are used to navigate through the application. Below, you will find
+    examples of how to use the nav system to create a variety of nav states.
+  </p>
   <div data-toggle="htmlpreview">
     <h3>Nav vertical (default)</h3>
     <code>mg-nav</code>
@@ -11,10 +13,9 @@ <h3>Nav vertical (default)</h3>
       <li><a href="#contact">Contact</a></li>
       <li><a href="#about">About</a></li>
     </ul>
-
   </div>
   <div data-toggle="htmlpreview">
-    <h3>Nav inline </h3>
+    <h3>Nav inline</h3>
     <code>mg-nav mg-nav--inline</code>
     <ul class="mg-nav mg-nav--inline" data-toggle="nav">
       <li class="active"><a href="#home">Home</a></li>
@@ -25,33 +26,40 @@ <h3>Nav inline </h3>
   </div>
 
   <div data-toggle="htmlpreview">
-    <h3>Nav buttons</h3>
+    <h3>Nav buttons</h3>    
     <code>mg-nav mg-nav--buttons </code>
     <ul class="mg-nav mg-nav--buttons" data-toggle="nav">
       <li class="active"><a class="mg-button" href="#home">Home</a></li>
       <li><a class="mg-button" href="#news">News</a></li>
       <li><a class="mg-button" href="#contact">Contact</a></li>
       <li><a class="mg-button" href="#about">About</a></li>
     </ul>
-  </div>
+  </div>  
+  <h3>Nav buttons with custom background</h3>
+  <code>+ mg-bg-quinary</code>
+  <ul class="mg-nav mg-nav--buttons mg-bg-quinary mg-rounded" data-toggle="nav">
+    <li class="active"><a class="mg-button" href="#home">Home</a></li>
+    <li><a class="mg-button" href="#news">News</a></li>
+    <li><a class="mg-button" href="#contact">Contact</a></li>
+    <li><a class="mg-button" href="#about">About</a></li>
+  </ul>
+</div>
   <div data-toggle="htmlpreview">
     <h3>Nav buttons (wrapped)</h3>
-    <code>mg-nav mg-nav--buttons mg-wrap</code>
-    <ul class="mg-nav mg-nav--buttons mg-wrap" data-toggle="nav">
+    <code>+ mg-wrap</code>
+    <ul class="mg-nav mg-nav--buttons mg-wrap " data-toggle="nav">
       <li class="active"><a class="mg-button" href="#home">Home</a></li>
       <li><a class="mg-button" href="#news">News</a></li>
       <li><a class="mg-button" href="#contact">Contact</a></li>
       <li><a class="mg-button" href="#about">About</a></li>
     </ul>
     <h3>Nav buttons (vertical)</h3>
-    <code>mg-nav mg-nav--buttons mg-col</code>
+    <code>+ mg-col</code>
     <ul class="mg-nav mg-nav--buttons mg-col mg-x12 mg-m2" data-toggle="nav">
       <li class="active"><a class="mg-button" href="#home">Home</a></li>
-      <li><a class="mg-button" href="#news">News</a></li>
+      <li><a class="mg-button mg-bg-red" href="#news">News</a></li>
       <li><a class="mg-button" href="#contact">Contact</a></li>
       <li><a class="mg-button" href="#about">About</a></li>
     </ul>
   </div>
-
-
-</section>
+</section>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "mgplus",
   "private": false,
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "mgplus a micro CSS library",
   "homepage": "https://evodim.github.io/mgplus",
   "repository": "https://github.com/Evodim/mgplus",

src/scss/extensions/mg-nav.scss

@@ -25,7 +25,7 @@
     font-weight: bold;
   }
 
-  & li>a {
+  & li a {
     width: 100%;
     cursor: pointer;
     text-decoration: none;
@@ -71,17 +71,23 @@
     background-color: transparent;
   }
 
-  & li>button,
-  & li>.mg-button {
-    border: none;
+  & li button,
+  & li .mg-button {
+    border: 0.2rem solid transparent;
     background-color: transparent;
     margin-bottom: 0;
   }
 
-  & li.active>button,
-  & li.active>.mg-button {
-    background-color: $color-primary;
-    color: $color-light;
+  & li button:hover,
+  & li .mg-button:hover {
+    color: $color-secondary;
+  }
 
+  & li.active button,
+  & li.active .mg-button {
+    border: 0.2rem solid $color-primary;
+    color: $color-secondary;
   }
+
+
 }