refactored navbar-container

franken-ui · May 9, 2016 · d30f1a4 · d30f1a4
1 parent 00e6fc9
commit d30f1a4
Show file tree

Hide file tree

Showing 6 changed files with 245 additions and 237 deletions.
diff --git a/src/less/core/navbar.less b/src/less/core/navbar.less
@@ -3,7 +3,8 @@
 //
 // Component:       `uk-navbar`
 //
-// Sub-objects:     `uk-navbar-left`
+// Sub-objects:     `uk-navbar-container`
+//                  `uk-navbar-left`
 //                  `uk-navbar-right`
 //                  `uk-navbar-center`
 //                  `uk-navbar-nav`
@@ -13,8 +14,7 @@
 //                  `uk-navbar-subtitle`
 //                  `uk-navbar-dropbar`
 //
-// Modifiers:       `uk-navbar-container`
-//                  `uk-navbar-transparent`
+// Modifiers:       `uk-navbar-transparent`
 //                  `uk-navbar-dropdown-stack`
 //
 // Adopted:         `uk-navbar-dropdown` + Modifiers
@@ -81,7 +81,6 @@
 
 /*
  * 1. Create position context to center navbar group
- * 2. Style
  */
 
 .uk-navbar {
@@ -90,12 +89,26 @@
     display: flex;
     /* 1 */
     position: relative;
-    /* 2 */
-    background: @navbar-background;
     .hook-navbar;
 }
 
 
+/* Container
+ ========================================================================== */
+
+.uk-navbar-container {
+    background: @navbar-background;
+    .hook-navbar-container;
+}
+
+/*
+ * Remove pseudo elements created by micro clearfix as precaution (if Container component is used)
+ */
+
+.uk-navbar-container > ::before,
+.uk-navbar-container > ::after { display: none !important; }
+
+
 /* Groups
  ========================================================================== */
 
@@ -275,30 +288,6 @@
 }
 
 
-/* Container
- ========================================================================== */
-
-/*
- * Use this class if a container wraps the navbar groups inside the navbar.
- * 2. Take the full width
- * 3. Remove pseudo elements created by micro clearfix
- */
-
-.uk-navbar-container > * {
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-    /* 2 */
-    -ms-flex: 1;
-    -webkit-flex: 1;
-    flex: 1;
-}
-
-/* 3 */
-.uk-navbar-container > ::before,
-.uk-navbar-container > ::after { display: none !important; }
-
-
 /* Style modifier
  ========================================================================== */
 
@@ -464,6 +453,7 @@
 .hook-navbar-misc;
 
 .hook-navbar() {}
+.hook-navbar-container() {}
 .hook-navbar-nav-item() {}
 .hook-navbar-nav-item-hover() {}
 .hook-navbar-nav-item-onclick() {}

diff --git a/src/less/theme/navbar.less b/src/less/theme/navbar.less
@@ -11,15 +11,21 @@
 @navbar-dropdown-background:                    @global-background;
 @navbar-dropdown-grid-gutter-horizontal:        (@navbar-dropdown-padding * 2);
 
+
 // Component
 // ========================================================================
 
 .hook-navbar() {}
 
 
-// Nav
+// Container
 // ========================================================================
 
+.hook-navbar-container() {}
+
+
+// Nav
+// ========================================================================
 
 .hook-navbar-nav-item() {}
 
@@ -105,26 +111,16 @@
      * Navbar
      */
 
-    /* Phone landscape and bigger */
-    @media (min-width: @breakpoint-small) {
-
-        .uk-navbar:not(.uk-navbar-container) {
-            padding-left: @navbar-nav-item-padding-horizontal;
-            padding-right: @navbar-nav-item-padding-horizontal;
-        }
-
-    }
-
-    .uk-navbar-container .uk-navbar-left { margin-left: -@navbar-nav-item-padding-horizontal; }
-    .uk-navbar-container .uk-navbar-right { margin-right: -@navbar-nav-item-padding-horizontal; }
+    .uk-navbar-container > .uk-container .uk-navbar-left { margin-left: -@navbar-nav-item-padding-horizontal; }
+    .uk-navbar-container > .uk-container .uk-navbar-right { margin-right: -@navbar-nav-item-padding-horizontal; }
 
     /*
      * Dropdown
      * Note: Don't adjust if boundary-align is true
      */
 
-    .uk-navbar-dropdown-top-left:not(.uk-navbar-dropdown-boundary),
-    .uk-navbar-dropdown-bottom-left:not(.uk-navbar-dropdown-boundary) { margin-left: @navbar-nav-item-padding-horizontal - 25px; }
+    // .uk-navbar-dropdown-top-left:not(.uk-navbar-dropdown-boundary),
+    // .uk-navbar-dropdown-bottom-left:not(.uk-navbar-dropdown-boundary) { margin-left: @navbar-nav-item-padding-horizontal - 25px; }
 
     /*
      * Nav

diff --git a/tests/badge.html b/tests/badge.html
@@ -30,7 +30,7 @@ <h1>Badge</h1>
 
                     <h2>Navbar</h2>
 
-                    <nav class="uk-navbar uk-margin" uk-navbar>
+                    <nav class="uk-navbar uk-navbar-container uk-margin" uk-navbar>
                         <div class="uk-navbar-left">
 
                             <ul class="uk-navbar-nav">

diff --git a/tests/inverse.html b/tests/inverse.html
@@ -181,7 +181,7 @@ <h3>Badge</h3>
 
                         <h3>Navbar</h3>
 
-                        <nav class="uk-navbar uk-navbar-transparent" uk-navbar>
+                        <nav class="uk-navbar uk-navbar-container uk-navbar-transparent" uk-navbar>
                             <div class="uk-navbar-left">
                                 <ul class="uk-navbar-nav">
                                     <li class="uk-active"><a href="">Active</a></li>
@@ -473,7 +473,7 @@ <h3>Badge</h3>
 
                         <h3>Navbar</h3>
 
-                        <nav class="uk-navbar uk-navbar-transparent" uk-navbar>
+                        <nav class="uk-navbar uk-navbar-container uk-navbar-transparent" uk-navbar>
                             <div class="uk-navbar-left">
                                 <ul class="uk-navbar-nav">
                                     <li class="uk-active"><a href="">Active</a></li>