_navbar.scss in magic_stylez-0.0.0.48

- old
+ new

@@ -6,10 +6,12 @@
 // $navbar-height:                    50px !default;
 // $navbar-height-lg:                 60px !default;
 // $navbar-height-xl:                 80px !default;
 // 
 // $subnav-height:                    50px !default;
+// $subnav-background:                #069 !default;
+// $subnav-color:                     #fff !default;
 // 
 // $navbar-margin-bottom:             $line-height-computed !default;
 // $navbar-border-radius:             $border-radius-base !default;
 // $navbar-padding-horizontal:        floor(($grid-gutter-width / 2)) !default;
 // $navbar-padding-vertical:          (($navbar-height - $line-height-computed) / 2) !default;
@@ -92,10 +94,15 @@
 	&.navbar-xl { @include sized-navbar( $navbar-height-xl ); }
 	
 }
 
 
+
+
+
+
+
 body, #body, #container, .main-content, .main_content {
 	
 	&.fixed-nav-xs { padding-top: $navbar-height-xs; }
 	&.fixed-nav-sm { padding-top: $navbar-height-sm; }
 	&.fixed-nav    { padding-top: $navbar-height; }
@@ -134,16 +141,127 @@
 			}
 		}
 	}
 }
 
+.navbar-sub-nav {
+    display: block;
+    float: none;
+}
 
-@include responsiveStep-md {
+
+@mixin calculate_subnav_position( $that-header-height: 50px ) {
+    &.fixed-sub-nav { padding-top: $subnav-height + $that-header-height; }
+	.navbar-sub-nav { top: $that-header-height; }
+}
+
+@include responsiveStep-sm {
     
+    .navbar-sub-nav {
+        $padHorizontal: floor(($subnav-height - $line-height-computed) / 2);
+        $lineHeight: $subnav-height - $padHorizontal * 2;
+        
+        display: block; position: relative;
+        margin: 0; padding: 0;
+        
+        height:     $subnav-height;
+        min-height: $subnav-height;
+        
+        position: fixed;
+        left: 0;
+        right: 0;
+        top: 100%;
+        margin-top: 1px;
+        
+        background: $subnav-background;
+        
+        
+        
+        
+        // a:not(.btn) { }
+        
+        
+        &, & > .nav.navbar-nav {
+            list-style: none;
+            
+            &, & > li, & > li > a { color: $subnav-color; }
+            & > li > a:hover { color: $subnav-hover-color; }
+            & > li > a:active { color: $subnav-active-color; }
+            & > li {
+                float: left;
+                position: relative;
+                display: block;
+            }
+            
+            & > .open > a {
+                background: darken($subnav-background, 5%);
+                color: #fff;
+            }
+            
+            & > li > a, & > a  {
+                
+                display: block; position: relative;
+    			padding: $padHorizontal $navbar-padding-horizontal;
+    			line-height: $lineHeight;
+			
+    			&.btn {
+    				@if ($lineHeight + 10) > ($subnav-height - 5) {
+    					margin: 4px 5px;
+    					@include vertical-padding( $padHorizontal - 5px );
+    					line-height: $lineHeight;
+    				} @else {
+    					margin: #{$padHorizontal - 6px} 5px;
+    					@include vertical-padding( 5px );
+    					line-height: $lineHeight;
+					
+    					@if ($lineHeight + 16) < ($subnav-height - 5) {
+    						&.btn-lg {
+    							margin: #{$padHorizontal - 9px} 5px;
+    							@include vertical-padding( 8px );
+    						}
+    					}
+					
+    					&.btn-sm {
+    						margin: #{$padHorizontal - 4px} 5px;
+    						@include vertical-padding( 3px );
+    					}
+    					&.btn-xs {
+    						margin: #{$padHorizontal - 2px} 5px;
+    						@include vertical-padding( 1px );
+    					}
+					
+    				}
+    			}
+    		}
+        }
+        
+    		
+        
+    }
+    
 	body, #body, #container, .main-content, .main_content {
-    	&.fixed-sub-nav.fixed-nav-xs { padding-top: $subnav-height + $navbar-height-xs; }
-    	&.fixed-sub-nav.fixed-nav-sm { padding-top: $subnav-height + $navbar-height-sm; }
-    	&.fixed-sub-nav.fixed-nav    { padding-top: $subnav-height + $navbar-height; }
-    	&.fixed-sub-nav.fixed-nav-lg { padding-top: $subnav-height + $navbar-height-lg; }
-    	&.fixed-sub-nav.fixed-nav-xl { padding-top: $subnav-height + $navbar-height-xl; }
+	    
+	    &.fixed-nav-xs { @include calculate_subnav_position( $navbar-height-xs ); }
+    	&.fixed-nav-sm { @include calculate_subnav_position( $navbar-height-sm ); }
+    	&.fixed-nav    { @include calculate_subnav_position( $navbar-height ); }
+    	&.fixed-nav-lg { @include calculate_subnav_position( $navbar-height-lg ); }
+    	&.fixed-nav-xl { @include calculate_subnav_position( $navbar-height-xl ); }
+	    
     }
-}
\ No newline at end of file
+    
+    .corset .navbar-sub-nav { @include horizontal-padding( 5% ); }
+    
+    .navbar.navbar-fixed-top {
+        .navbar-collapse {
+            .nav.navbar-nav.navbar-left { margin-left: -15px; }
+            .nav.navbar-nav.navbar-right { margin-right: -15px; }
+        }
+        .navbar-header { margin-left: -15px; }
+        .navbar-header + .navbar-collapse > .nav.navbar-nav.navbar-left { margin-left: 0; }
+    }
+    
+}
+
+@include responsiveStep-lg {
+    .corset .navbar-sub-nav { @include horizontal-padding( 10% ); }
+}
+