new

siatko · Nov 10, 2017 · e4128b0 · e4128b0
1 parent 6a6ab4f
commit e4128b0
Show file tree

Hide file tree

Showing 6 changed files with 195 additions and 2 deletions.
diff --git a/dist/yacssfw.css b/dist/yacssfw.css
@@ -490,6 +490,65 @@ h6 {
 .Header__Logo a {
   display: block;
 }
+.Nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.Nav ul li {
+  background: #454545;
+  width: 100%;
+  text-align: center;
+  transition: all 0.3s;
+}
+.Nav ul li a {
+  display: block;
+  width: 100%;
+  padding: 5px 0;
+  color: #b6b6b6;
+  text-decoration: none;
+  transition: all 0.3s;
+}
+.Nav ul li:hover {
+  background: #b6b6b6;
+  transition: all 0.3s;
+}
+.Nav ul li:hover a {
+  color: #454545;
+  transition: all 0.3s;
+}
+.Nav--xs ul {
+  display: block;
+}
+@media (max-width: 779px) {
+  .Nav--xs ul {
+    display: flex !important;
+  }
+}
+.Nav--sm ul {
+  display: block;
+}
+@media (min-width: 780px) and (max-width: 989px) {
+  .Nav--sm ul {
+    display: flex !important;
+  }
+}
+.Nav--md ul {
+  display: block;
+}
+@media (min-width: 990px) and (max-width: 1199px) {
+  .Nav--md ul {
+    display: flex !important;
+  }
+}
+.Nav--lg ul {
+  display: block;
+}
+@media (min-width: 1200px) {
+  .Nav--lg ul {
+    display: flex !important;
+  }
+}
 .Capsule {
   padding: 0 10px;
   margin: 0 auto;

diff --git a/dist/yacssfw.min.css b/dist/yacssfw.min.css
diff --git a/index.html b/index.html
@@ -1247,7 +1247,14 @@ <h4>Dropup</h4>
 <section>
     <h2 class="content">NavBar</h2>
     <div class="Capsule">
-
+        <nav class="Nav Nav--lg Nav--md">
+            <ul>
+                <li><a href="">Home</a></li>
+                <li><a href="">About</a></li>
+                <li><a href="">Business</a></li>
+                <li><a href="">Links</a></li>
+            </ul>
+        </nav>
     </div>
 </section>
 <script src="src/vendor/jquery/jquery-3.2.1.min.js"></script>

diff --git a/src/less/layout/_Nav.less b/src/less/layout/_Nav.less
@@ -0,0 +1,67 @@
+//==============================================================================
+// N A V
+//==============================================================================
+.Nav {
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    li {
+      background: @color-dark;
+      width: 100%;
+      text-align: center;
+      transition: all @transform;
+      a {
+        display: block;
+        width: 100%;
+        padding: 5px 0;
+        color: @color-light;
+        text-decoration: none;
+        transition: all @transform;
+      }
+      &:hover {
+        background: @color-light;
+        transition: all @transform;
+        a {
+          color: @color-dark;
+          transition: all @transform;
+        }
+      }
+    }
+  }
+  //----------------------------------------------------------------------------
+  // Nav--modifier
+  //----------------------------------------------------------------------------
+  &--xs {
+    ul {
+      display: block;
+      @media (max-width: @bp-XS-max) {
+        display: flex !important;
+      }
+    }
+  }
+  &--sm {
+    ul {
+      display: block;
+      @media (min-width: @bp-SM-min) and (max-width: @bp-SM-max) {
+        display: flex !important;
+      }
+    }
+  }
+  &--md {
+    ul {
+      display: block;
+      @media (min-width: @bp-MD-min) and (max-width: @bp-MD-max) {
+        display: flex !important;
+      }
+    }
+  }
+  &--lg {
+    ul {
+      display: block;
+      @media (min-width: @bp-LG-min) {
+        display: flex !important;
+      }
+    }
+  }
+}
diff --git a/src/less/main.css b/src/less/main.css
@@ -490,6 +490,65 @@ h6 {
 .Header__Logo a {
   display: block;
 }
+.Nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.Nav ul li {
+  background: #454545;
+  width: 100%;
+  text-align: center;
+  transition: all 0.3s;
+}
+.Nav ul li a {
+  display: block;
+  width: 100%;
+  padding: 5px 0;
+  color: #b6b6b6;
+  text-decoration: none;
+  transition: all 0.3s;
+}
+.Nav ul li:hover {
+  background: #b6b6b6;
+  transition: all 0.3s;
+}
+.Nav ul li:hover a {
+  color: #454545;
+  transition: all 0.3s;
+}
+.Nav--xs ul {
+  display: block;
+}
+@media (max-width: 779px) {
+  .Nav--xs ul {
+    display: flex !important;
+  }
+}
+.Nav--sm ul {
+  display: block;
+}
+@media (min-width: 780px) and (max-width: 989px) {
+  .Nav--sm ul {
+    display: flex !important;
+  }
+}
+.Nav--md ul {
+  display: block;
+}
+@media (min-width: 990px) and (max-width: 1199px) {
+  .Nav--md ul {
+    display: flex !important;
+  }
+}
+.Nav--lg ul {
+  display: block;
+}
+@media (min-width: 1200px) {
+  .Nav--lg ul {
+    display: flex !important;
+  }
+}
 .Capsule {
   padding: 0 10px;
   margin: 0 auto;

diff --git a/src/less/main.less b/src/less/main.less
@@ -16,6 +16,7 @@
 // L A Y O U T
 //==============================================================================
 @import "layout/_Header";
+@import "layout/_Nav";
 @import "layout/_Capsule";
 @import "layout/_Flex";
 @import "layout/_Col";