_responsive_navbar.scss in furatto-0.0.2

- old
+ new

@@ -10,30 +10,34 @@
 //Tablets and below
 //------------------------------------
 
 @media (max-width: $nav-bar-collapse-width) {
 
+  .panels {
+    display: block;
+  }
+
+  .panel-content {
+    padding-top: 0 !important;
+  }
+
   /*Unfix top navbar*/
   /*Remove any padding from the body */
   
-  body {
-    padding: 0px;
-  }
-
   .navbar {
     .menu-trigger {
       float: left;
       display: block;
-      /*width: 18px;*/
-      /*padding: 7px 10px;*/
       margin-left: 5px;
       margin-right: 5px;
       color: $navbar-text;
       font-size: 50px;
       line-height: $base-line-height;
       padding-top: $base-line-height - 5;
       margin-bottom: 7px; /*compensate the navbar height*/
+
+      @include touch-callout;
     }
   }
 
   .navbar {
     .navbar-inner {
@@ -49,21 +53,13 @@
 
   .navbar-fixed-bottom {
     margin-top: $base-line-height;
   }
 
-  .navbar .container {
-    width: auto;
-    padding: 0;
-  }
-
   // Account for brand name
   .navbar .nav .brand {
     display: block;
-    /*padding-left: 10px;*/
-    /*padding-right: 10px;*/
-    /*margin: 0 0 0 -5px;*/
   }
 
   // COLLAPSIBLE NAVBAR
   // ------------------
   // Nav collapse clears brand
@@ -74,10 +70,13 @@
   .nav-collapse .nav {
     float: none;
     margin: 0 0 ($base-line-height / 2);
     display: none;
   }
+  .nav-collapse .search-navbar-form {
+    display: none;
+  }
   .nav-collapse .nav > li {
     float: none;
   }
 
   .nav-collapse .nav > li > a {
@@ -113,20 +112,10 @@
   .nav-collapse .dropdown-menu a:hover,
   .nav-collapse .dropdown-menu a:focus {
     background-color: $navbar-bg-color;
   }
 
-  .navbar-inverse .nav-collapse .nav > li > a,
-  .navbar-inverse .nav-collapse .dropdown-menu a {
-    /*color: @navbarInverseLinkColor;*/
-  }
-  .navbar-inverse .nav-collapse .nav > li > a:hover,
-  .navbar-inverse .nav-collapse .nav > li > a:focus,
-  .navbar-inverse .nav-collapse .dropdown-menu a:hover,
-  .navbar-inverse .nav-collapse .dropdown-menu a:focus {
-    /*background-color: @navbarInverseBackground;*/
-  }
   // Buttons in the navbar
   .nav-collapse.in .btn-group {
     margin-top: 5px;
     padding: 0;
   }
@@ -141,12 +130,10 @@
     max-width: none;
     margin: 0 15px;
     padding: 0;
     background-color: transparent;
     border: none;
-    /*.border-radius(0);*/
-    /*.box-shadow(none);*/
   }
   .nav-collapse .open > .dropdown-menu { 
     display: block; 
   }
 
@@ -169,9 +156,33 @@
  .navbar-static .navbar-inner {
     padding-left:  10px;
     padding-right: 10px;
   }
   
+}
+
+.navbar-inverse {
+  [data-toggle="panel"] {
+    color: $navbar-inverse-text;
+  }
+}
+
+.panel-content, .panel-left, .panel-content {
+  position: absolute;
+}
+
+.panel-content {
+  z-index: 2;
+  overflow: auto;
+
+  backface-visibility:hidden;
+  -webkit-backface-visibility:hidden; /* Chrome and Safari */
+  -moz-backface-visibility:hidden; /* Firefox */
+  -ms-backface-visibility:hidden; /* Internet Explorer 10+ */
+}
+
+.panels {
+  position: absolute;
 }
 
 @media (min-width: $nav-bar-collapse-width-desktop) {
 
   // Required to make the collapsing navbar work on regular desktops