Merge branch 'master' of github.com:jasny/bootstrap

Working on major fix for offcanvas
Adding offcanvas navbar

README.md

@@ -18,7 +18,7 @@ Three quick start options are available:
 
 * [Download the latest release](https://github.com/jasny/bootstrap/releases/tag/v3.0.0-p7).
 * Clone the repo: `git clone git://github.com/jasny/bootstrap.git`.
-* Install with [Bower](http://bower.io): `bower install jasny/bootstrap`.
+* Install with [Bower](http://bower.io): `bower install bootstrap=jasny/bootstrap`. To install Jasny Bootstrap next to Twitter Bootstrap use `bower install jasny-bootstrap=jasny/bootstrap`.
 
 Read the [Getting Started page](http://jasny.github.io/bootstrap/getting-started/) for information on the framework contents, templates and examples, and more.
 

dist/css/bootstrap.css

@@ -5021,7 +5021,8 @@ textarea.input-group-sm > .input-group-btn > .btn {
   color: #ffffff;
 }
 
-.navmenu {
+.navmenu,
+.navbar-offcanvas {
   width: 300px;
   height: 100%;
   border-style: solid;
@@ -5030,14 +5031,16 @@ textarea.input-group-sm > .input-group-btn > .btn {
 }
 
 .navmenu-fixed-left,
-.navmenu-fixed-right {
+.navmenu-fixed-right,
+.navbar-offcanvas {
   position: fixed;
   top: 0;
   z-index: 1030;
   border-radius: 0;
 }
 
-.navmenu-fixed-left {
+.navmenu-fixed-left,
+.navbar-offcanvas {
   left: 0;
   border-width: 0 1px 0 0;
 }
@@ -5062,6 +5065,34 @@ textarea.input-group-sm > .input-group-btn > .btn {
           box-shadow: none;
 }
 
+.navbar-offcanvas .navbar-nav {
+  margin: 0;
+}
+
+@media (min-width: 768px) {
+  .navbar-offcanvas {
+    width: auto;
+    border-top: 0;
+    box-shadow: none;
+  }
+  .navbar-offcanvas.offcanvas {
+    position: static;
+    display: block !important;
+    height: auto !important;
+    padding-bottom: 0;
+    overflow: visible !important;
+  }
+  .navbar-offcanvas .navbar-nav.navbar-left:first-child {
+    margin-left: -15px;
+  }
+  .navbar-offcanvas .navbar-nav.navbar-right:last-child {
+    margin-right: -15px;
+  }
+  .navbar-offcanvas .navmenu-brand {
+    display: none;
+  }
+}
+
 .navmenu-brand {
   display: block;
   padding: 10px 15px;
@@ -5075,166 +5106,222 @@ textarea.input-group-sm > .input-group-btn > .btn {
   text-decoration: none;
 }
 
-.navmenu-default {
+.navmenu-default,
+.navbar-default .navbar-offcanvas {
   background-color: #f8f8f8;
   border-color: #e7e7e7;
 }
 
-.navmenu-default .navmenu-brand {
+.navmenu-default .navmenu-brand,
+.navbar-default .navbar-offcanvas .navmenu-brand {
   color: #777777;
 }
 
 .navmenu-default .navmenu-brand:hover,
-.navmenu-default .navmenu-brand:focus {
+.navbar-default .navbar-offcanvas .navmenu-brand:hover,
+.navmenu-default .navmenu-brand:focus,
+.navbar-default .navbar-offcanvas .navmenu-brand:focus {
   color: #5e5e5e;
   background-color: transparent;
 }
 
-.navmenu-default .navmenu-text {
+.navmenu-default .navmenu-text,
+.navbar-default .navbar-offcanvas .navmenu-text {
   color: #777777;
 }
 
 .navmenu-default .navmenu-nav > .dropdown > a:hover .caret,
-.navmenu-default .navmenu-nav > .dropdown > a:focus .caret {
+.navbar-default .navbar-offcanvas .navmenu-nav > .dropdown > a:hover .caret,
+.navmenu-default .navmenu-nav > .dropdown > a:focus .caret,
+.navbar-default .navbar-offcanvas .navmenu-nav > .dropdown > a:focus .caret {
   border-top-color: #333333;
   border-bottom-color: #333333;
 }
 
 .navmenu-default .navmenu-nav > .open > a,
+.navbar-default .navbar-offcanvas .navmenu-nav > .open > a,
 .navmenu-default .navmenu-nav > .open > a:hover,
-.navmenu-default .navmenu-nav > .open > a:focus {
+.navbar-default .navbar-offcanvas .navmenu-nav > .open > a:hover,
+.navmenu-default .navmenu-nav > .open > a:focus,
+.navbar-default .navbar-offcanvas .navmenu-nav > .open > a:focus {
   color: #555555;
   background-color: #e7e7e7;
 }
 
 .navmenu-default .navmenu-nav > .open > a .caret,
+.navbar-default .navbar-offcanvas .navmenu-nav > .open > a .caret,
 .navmenu-default .navmenu-nav > .open > a:hover .caret,
-.navmenu-default .navmenu-nav > .open > a:focus .caret {
+.navbar-default .navbar-offcanvas .navmenu-nav > .open > a:hover .caret,
+.navmenu-default .navmenu-nav > .open > a:focus .caret,
+.navbar-default .navbar-offcanvas .navmenu-nav > .open > a:focus .caret {
   border-top-color: #555555;
   border-bottom-color: #555555;
 }
 
-.navmenu-default .navmenu-nav > .dropdown > a .caret {
+.navmenu-default .navmenu-nav > .dropdown > a .caret,
+.navbar-default .navbar-offcanvas .navmenu-nav > .dropdown > a .caret {
   border-top-color: #777777;
   border-bottom-color: #777777;
 }
 
-.navmenu-default .navmenu-nav.dropdown-menu {
+.navmenu-default .navmenu-nav.dropdown-menu,
+.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu {
   background-color: #e7e7e7;
 }
 
-.navmenu-default .navmenu-nav.dropdown-menu > .divider {
+.navmenu-default .navmenu-nav.dropdown-menu > .divider,
+.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu > .divider {
   background-color: #f8f8f8;
 }
 
 .navmenu-default .navmenu-nav.dropdown-menu > .active > a,
+.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a,
 .navmenu-default .navmenu-nav.dropdown-menu > .active > a:hover,
-.navmenu-default .navmenu-nav.dropdown-menu > .active > a:focus {
+.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a:hover,
+.navmenu-default .navmenu-nav.dropdown-menu > .active > a:focus,
+.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a:focus {
   background-color: #d7d7d7;
 }
 
-.navmenu-default .navmenu-nav > li > a {
+.navmenu-default .navmenu-nav > li > a,
+.navbar-default .navbar-offcanvas .navmenu-nav > li > a {
   color: #777777;
 }
 
 .navmenu-default .navmenu-nav > li > a:hover,
-.navmenu-default .navmenu-nav > li > a:focus {
+.navbar-default .navbar-offcanvas .navmenu-nav > li > a:hover,
+.navmenu-default .navmenu-nav > li > a:focus,
+.navbar-default .navbar-offcanvas .navmenu-nav > li > a:focus {
   color: #333333;
   background-color: transparent;
 }
 
 .navmenu-default .navmenu-nav > .active > a,
+.navbar-default .navbar-offcanvas .navmenu-nav > .active > a,
 .navmenu-default .navmenu-nav > .active > a:hover,
-.navmenu-default .navmenu-nav > .active > a:focus {
+.navbar-default .navbar-offcanvas .navmenu-nav > .active > a:hover,
+.navmenu-default .navmenu-nav > .active > a:focus,
+.navbar-default .navbar-offcanvas .navmenu-nav > .active > a:focus {
   color: #555555;
   background-color: #e7e7e7;
 }
 
 .navmenu-default .navmenu-nav > .disabled > a,
+.navbar-default .navbar-offcanvas .navmenu-nav > .disabled > a,
 .navmenu-default .navmenu-nav > .disabled > a:hover,
-.navmenu-default .navmenu-nav > .disabled > a:focus {
+.navbar-default .navbar-offcanvas .navmenu-nav > .disabled > a:hover,
+.navmenu-default .navmenu-nav > .disabled > a:focus,
+.navbar-default .navbar-offcanvas .navmenu-nav > .disabled > a:focus {
   color: #cccccc;
   background-color: transparent;
 }
 
-.navmenu-inverse {
+.navmenu-inverse,
+.navbar-inverse .navbar-offcanvas {
   background-color: #222222;
   border-color: #080808;
 }
 
-.navmenu-inverse .navmenu-brand {
+.navmenu-inverse .navmenu-brand,
+.navbar-inverse .navbar-offcanvas .navmenu-brand {
   color: #999999;
 }
 
 .navmenu-inverse .navmenu-brand:hover,
-.navmenu-inverse .navmenu-brand:focus {
+.navbar-inverse .navbar-offcanvas .navmenu-brand:hover,
+.navmenu-inverse .navmenu-brand:focus,
+.navbar-inverse .navbar-offcanvas .navmenu-brand:focus {
   color: #ffffff;
   background-color: transparent;
 }
 
-.navmenu-inverse .navmenu-text {
+.navmenu-inverse .navmenu-text,
+.navbar-inverse .navbar-offcanvas .navmenu-text {
   color: #999999;
 }
 
 .navmenu-inverse .navmenu-nav > .dropdown > a:hover .caret,
-.navmenu-inverse .navmenu-nav > .dropdown > a:focus .caret {
+.navbar-inverse .navbar-offcanvas .navmenu-nav > .dropdown > a:hover .caret,
+.navmenu-inverse .navmenu-nav > .dropdown > a:focus .caret,
+.navbar-inverse .navbar-offcanvas .navmenu-nav > .dropdown > a:focus .caret {
   border-top-color: #ffffff;
   border-bottom-color: #ffffff;
 }
 
 .navmenu-inverse .navmenu-nav > .open > a,
+.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a,
 .navmenu-inverse .navmenu-nav > .open > a:hover,
-.navmenu-inverse .navmenu-nav > .open > a:focus {
+.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a:hover,
+.navmenu-inverse .navmenu-nav > .open > a:focus,
+.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a:focus {
   color: #ffffff;
   background-color: #080808;
 }
 
 .navmenu-inverse .navmenu-nav > .open > a .caret,
+.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a .caret,
 .navmenu-inverse .navmenu-nav > .open > a:hover .caret,
-.navmenu-inverse .navmenu-nav > .open > a:focus .caret {
+.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a:hover .caret,
+.navmenu-inverse .navmenu-nav > .open > a:focus .caret,
+.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a:focus .caret {
   border-top-color: #ffffff;
   border-bottom-color: #ffffff;
 }
 
-.navmenu-inverse .navmenu-nav > .dropdown > a .caret {
+.navmenu-inverse .navmenu-nav > .dropdown > a .caret,
+.navbar-inverse .navbar-offcanvas .navmenu-nav > .dropdown > a .caret {
   border-top-color: #999999;
   border-bottom-color: #999999;
 }
 
-.navmenu-inverse .navmenu-nav.dropdown-menu {
+.navmenu-inverse .navmenu-nav.dropdown-menu,
+.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu {
   background-color: #080808;
 }
 
-.navmenu-inverse .navmenu-nav.dropdown-menu > .divider {
+.navmenu-inverse .navmenu-nav.dropdown-menu > .divider,
+.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu > .divider {
   background-color: #222222;
 }
 
 .navmenu-inverse .navmenu-nav.dropdown-menu > .active > a,
+.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a,
 .navmenu-inverse .navmenu-nav.dropdown-menu > .active > a:hover,
-.navmenu-inverse .navmenu-nav.dropdown-menu > .active > a:focus {
+.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a:hover,
+.navmenu-inverse .navmenu-nav.dropdown-menu > .active > a:focus,
+.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a:focus {
   background-color: #000000;
 }
 
-.navmenu-inverse .navmenu-nav > li > a {
+.navmenu-inverse .navmenu-nav > li > a,
+.navbar-inverse .navbar-offcanvas .navmenu-nav > li > a {
   color: #999999;
 }
 
 .navmenu-inverse .navmenu-nav > li > a:hover,
-.navmenu-inverse .navmenu-nav > li > a:focus {
+.navbar-inverse .navbar-offcanvas .navmenu-nav > li > a:hover,
+.navmenu-inverse .navmenu-nav > li > a:focus,
+.navbar-inverse .navbar-offcanvas .navmenu-nav > li > a:focus {
   color: #ffffff;
   background-color: transparent;
 }
 
 .navmenu-inverse .navmenu-nav > .active > a,
+.navbar-inverse .navbar-offcanvas .navmenu-nav > .active > a,
 .navmenu-inverse .navmenu-nav > .active > a:hover,
-.navmenu-inverse .navmenu-nav > .active > a:focus {
+.navbar-inverse .navbar-offcanvas .navmenu-nav > .active > a:hover,
+.navmenu-inverse .navmenu-nav > .active > a:focus,
+.navbar-inverse .navbar-offcanvas .navmenu-nav > .active > a:focus {
   color: #ffffff;
   background-color: #080808;
 }
 
 .navmenu-inverse .navmenu-nav > .disabled > a,
+.navbar-inverse .navbar-offcanvas .navmenu-nav > .disabled > a,
 .navmenu-inverse .navmenu-nav > .disabled > a:hover,
-.navmenu-inverse .navmenu-nav > .disabled > a:focus {
+.navbar-inverse .navbar-offcanvas .navmenu-nav > .disabled > a:hover,
+.navmenu-inverse .navmenu-nav > .disabled > a:focus,
+.navbar-inverse .navbar-offcanvas .navmenu-nav > .disabled > a:focus {
   color: #444444;
   background-color: transparent;
 }
@@ -6996,8 +7083,8 @@ button.close {
 }
 
 .canvas-sliding {
-  -webkit-transition: -webkit-transform 0.35s;
-          transition: transform 0.35s, -ms-transform 0.35s;
+  -webkit-transition: top 0.35s, left 0.35s, bottom 0.35s, right 0.35s;
+          transition: top 0.35s, left 0.35s, bottom 0.35s, right 0.35s;
 }
 
 .offcanvas-clone {

dist/extend/css/jasny-bootstrap.css

@@ -534,7 +534,8 @@ input[type="button"].btn-block {
   padding-left: 0;
 }
 
-.navmenu {
+.navmenu,
+.navbar-offcanvas {
   width: 300px;
   height: 100%;
   border-style: solid;
@@ -543,14 +544,16 @@ input[type="button"].btn-block {
 }
 
 .navmenu-fixed-left,
-.navmenu-fixed-right {
+.navmenu-fixed-right,
+.navbar-offcanvas {
   position: fixed;
   top: 0;
   z-index: 1030;
   border-radius: 0;
 }
 
-.navmenu-fixed-left {
+.navmenu-fixed-left,
+.navbar-offcanvas {
   left: 0;
   border-width: 0 1px 0 0;
 }
@@ -575,6 +578,34 @@ input[type="button"].btn-block {
           box-shadow: none;
 }
 
+.navbar-offcanvas .navbar-nav {
+  margin: 0;
+}
+
+@media (min-width: 768px) {
+  .navbar-offcanvas {
+    width: auto;
+    border-top: 0;
+    box-shadow: none;
+  }
+  .navbar-offcanvas.offcanvas {
+    position: static;
+    display: block !important;
+    height: auto !important;
+    padding-bottom: 0;
+    overflow: visible !important;
+  }
+  .navbar-offcanvas .navbar-nav.navbar-left:first-child {
+    margin-left: -15px;
+  }
+  .navbar-offcanvas .navbar-nav.navbar-right:last-child {
+    margin-right: -15px;
+  }
+  .navbar-offcanvas .navmenu-brand {
+    display: none;
+  }
+}
+
 .navmenu-brand {
   display: block;
   padding: 10px 15px;
@@ -588,166 +619,222 @@ input[type="button"].btn-block {
   text-decoration: none;
 }
 
-.navmenu-default {
+.navmenu-default,
+.navbar-default .navbar-offcanvas {
   background-color: #f8f8f8;
   border-color: #e7e7e7;
 }
 
-.navmenu-default .navmenu-brand {
+.navmenu-default .navmenu-brand,
+.navbar-default .navbar-offcanvas .navmenu-brand {
   color: #777777;
 }
 
 .navmenu-default .navmenu-brand:hover,
-.navmenu-default .navmenu-brand:focus {
+.navbar-default .navbar-offcanvas .navmenu-brand:hover,
+.navmenu-default .navmenu-brand:focus,
+.navbar-default .navbar-offcanvas .navmenu-brand:focus {
   color: #5e5e5e;
   background-color: transparent;
 }
 
-.navmenu-default .navmenu-text {
+.navmenu-default .navmenu-text,
+.navbar-default .navbar-offcanvas .navmenu-text {
   color: #777777;
 }
 
 .navmenu-default .navmenu-nav > .dropdown > a:hover .caret,
-.navmenu-default .navmenu-nav > .dropdown > a:focus .caret {
+.navbar-default .navbar-offcanvas .navmenu-nav > .dropdown > a:hover .caret,
+.navmenu-default .navmenu-nav > .dropdown > a:focus .caret,
+.navbar-default .navbar-offcanvas .navmenu-nav > .dropdown > a:focus .caret {
   border-top-color: #333333;
   border-bottom-color: #333333;
 }
 
 .navmenu-default .navmenu-nav > .open > a,
+.navbar-default .navbar-offcanvas .navmenu-nav > .open > a,
 .navmenu-default .navmenu-nav > .open > a:hover,
-.navmenu-default .navmenu-nav > .open > a:focus {
+.navbar-default .navbar-offcanvas .navmenu-nav > .open > a:hover,
+.navmenu-default .navmenu-nav > .open > a:focus,
+.navbar-default .navbar-offcanvas .navmenu-nav > .open > a:focus {
   color: #555555;
   background-color: #e7e7e7;
 }
 
 .navmenu-default .navmenu-nav > .open > a .caret,
+.navbar-default .navbar-offcanvas .navmenu-nav > .open > a .caret,
 .navmenu-default .navmenu-nav > .open > a:hover .caret,
-.navmenu-default .navmenu-nav > .open > a:focus .caret {
+.navbar-default .navbar-offcanvas .navmenu-nav > .open > a:hover .caret,
+.navmenu-default .navmenu-nav > .open > a:focus .caret,
+.navbar-default .navbar-offcanvas .navmenu-nav > .open > a:focus .caret {
   border-top-color: #555555;
   border-bottom-color: #555555;
 }
 
-.navmenu-default .navmenu-nav > .dropdown > a .caret {
+.navmenu-default .navmenu-nav > .dropdown > a .caret,
+.navbar-default .navbar-offcanvas .navmenu-nav > .dropdown > a .caret {
   border-top-color: #777777;
   border-bottom-color: #777777;
 }
 
-.navmenu-default .navmenu-nav.dropdown-menu {
+.navmenu-default .navmenu-nav.dropdown-menu,
+.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu {
   background-color: #e7e7e7;
 }
 
-.navmenu-default .navmenu-nav.dropdown-menu > .divider {
+.navmenu-default .navmenu-nav.dropdown-menu > .divider,
+.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu > .divider {
   background-color: #f8f8f8;
 }
 
 .navmenu-default .navmenu-nav.dropdown-menu > .active > a,
+.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a,
 .navmenu-default .navmenu-nav.dropdown-menu > .active > a:hover,
-.navmenu-default .navmenu-nav.dropdown-menu > .active > a:focus {
+.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a:hover,
+.navmenu-default .navmenu-nav.dropdown-menu > .active > a:focus,
+.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a:focus {
   background-color: #d7d7d7;
 }
 
-.navmenu-default .navmenu-nav > li > a {
+.navmenu-default .navmenu-nav > li > a,
+.navbar-default .navbar-offcanvas .navmenu-nav > li > a {
   color: #777777;
 }
 
 .navmenu-default .navmenu-nav > li > a:hover,
-.navmenu-default .navmenu-nav > li > a:focus {
+.navbar-default .navbar-offcanvas .navmenu-nav > li > a:hover,
+.navmenu-default .navmenu-nav > li > a:focus,
+.navbar-default .navbar-offcanvas .navmenu-nav > li > a:focus {
   color: #333333;
   background-color: transparent;
 }
 
 .navmenu-default .navmenu-nav > .active > a,
+.navbar-default .navbar-offcanvas .navmenu-nav > .active > a,
 .navmenu-default .navmenu-nav > .active > a:hover,
-.navmenu-default .navmenu-nav > .active > a:focus {
+.navbar-default .navbar-offcanvas .navmenu-nav > .active > a:hover,
+.navmenu-default .navmenu-nav > .active > a:focus,
+.navbar-default .navbar-offcanvas .navmenu-nav > .active > a:focus {
   color: #555555;
   background-color: #e7e7e7;
 }
 
 .navmenu-default .navmenu-nav > .disabled > a,
+.navbar-default .navbar-offcanvas .navmenu-nav > .disabled > a,
 .navmenu-default .navmenu-nav > .disabled > a:hover,
-.navmenu-default .navmenu-nav > .disabled > a:focus {
+.navbar-default .navbar-offcanvas .navmenu-nav > .disabled > a:hover,
+.navmenu-default .navmenu-nav > .disabled > a:focus,
+.navbar-default .navbar-offcanvas .navmenu-nav > .disabled > a:focus {
   color: #cccccc;
   background-color: transparent;
 }
 
-.navmenu-inverse {
+.navmenu-inverse,
+.navbar-inverse .navbar-offcanvas {
   background-color: #222222;
   border-color: #080808;
 }
 
-.navmenu-inverse .navmenu-brand {
+.navmenu-inverse .navmenu-brand,
+.navbar-inverse .navbar-offcanvas .navmenu-brand {
   color: #999999;
 }
 
 .navmenu-inverse .navmenu-brand:hover,
-.navmenu-inverse .navmenu-brand:focus {
+.navbar-inverse .navbar-offcanvas .navmenu-brand:hover,
+.navmenu-inverse .navmenu-brand:focus,
+.navbar-inverse .navbar-offcanvas .navmenu-brand:focus {
   color: #ffffff;
   background-color: transparent;
 }
 
-.navmenu-inverse .navmenu-text {
+.navmenu-inverse .navmenu-text,
+.navbar-inverse .navbar-offcanvas .navmenu-text {
   color: #999999;
 }
 
 .navmenu-inverse .navmenu-nav > .dropdown > a:hover .caret,
-.navmenu-inverse .navmenu-nav > .dropdown > a:focus .caret {
+.navbar-inverse .navbar-offcanvas .navmenu-nav > .dropdown > a:hover .caret,
+.navmenu-inverse .navmenu-nav > .dropdown > a:focus .caret,
+.navbar-inverse .navbar-offcanvas .navmenu-nav > .dropdown > a:focus .caret {
   border-top-color: #ffffff;
   border-bottom-color: #ffffff;
 }
 
 .navmenu-inverse .navmenu-nav > .open > a,
+.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a,
 .navmenu-inverse .navmenu-nav > .open > a:hover,
-.navmenu-inverse .navmenu-nav > .open > a:focus {
+.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a:hover,
+.navmenu-inverse .navmenu-nav > .open > a:focus,
+.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a:focus {
   color: #ffffff;
   background-color: #080808;
 }
 
 .navmenu-inverse .navmenu-nav > .open > a .caret,
+.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a .caret,
 .navmenu-inverse .navmenu-nav > .open > a:hover .caret,
-.navmenu-inverse .navmenu-nav > .open > a:focus .caret {
+.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a:hover .caret,
+.navmenu-inverse .navmenu-nav > .open > a:focus .caret,
+.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a:focus .caret {
   border-top-color: #ffffff;
   border-bottom-color: #ffffff;
 }
 
-.navmenu-inverse .navmenu-nav > .dropdown > a .caret {
+.navmenu-inverse .navmenu-nav > .dropdown > a .caret,
+.navbar-inverse .navbar-offcanvas .navmenu-nav > .dropdown > a .caret {
   border-top-color: #999999;
   border-bottom-color: #999999;
 }
 
-.navmenu-inverse .navmenu-nav.dropdown-menu {
+.navmenu-inverse .navmenu-nav.dropdown-menu,
+.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu {
   background-color: #080808;
 }
 
-.navmenu-inverse .navmenu-nav.dropdown-menu > .divider {
+.navmenu-inverse .navmenu-nav.dropdown-menu > .divider,
+.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu > .divider {
   background-color: #222222;
 }
 
 .navmenu-inverse .navmenu-nav.dropdown-menu > .active > a,
+.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a,
 .navmenu-inverse .navmenu-nav.dropdown-menu > .active > a:hover,
-.navmenu-inverse .navmenu-nav.dropdown-menu > .active > a:focus {
+.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a:hover,
+.navmenu-inverse .navmenu-nav.dropdown-menu > .active > a:focus,
+.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a:focus {
   background-color: #000000;
 }
 
-.navmenu-inverse .navmenu-nav > li > a {
+.navmenu-inverse .navmenu-nav > li > a,
+.navbar-inverse .navbar-offcanvas .navmenu-nav > li > a {
   color: #999999;
 }
 
 .navmenu-inverse .navmenu-nav > li > a:hover,
-.navmenu-inverse .navmenu-nav > li > a:focus {
+.navbar-inverse .navbar-offcanvas .navmenu-nav > li > a:hover,
+.navmenu-inverse .navmenu-nav > li > a:focus,
+.navbar-inverse .navbar-offcanvas .navmenu-nav > li > a:focus {
   color: #ffffff;
   background-color: transparent;
 }
 
 .navmenu-inverse .navmenu-nav > .active > a,
+.navbar-inverse .navbar-offcanvas .navmenu-nav > .active > a,
 .navmenu-inverse .navmenu-nav > .active > a:hover,
-.navmenu-inverse .navmenu-nav > .active > a:focus {
+.navbar-inverse .navbar-offcanvas .navmenu-nav > .active > a:hover,
+.navmenu-inverse .navmenu-nav > .active > a:focus,
+.navbar-inverse .navbar-offcanvas .navmenu-nav > .active > a:focus {
   color: #ffffff;
   background-color: #080808;
 }
 
 .navmenu-inverse .navmenu-nav > .disabled > a,
+.navbar-inverse .navbar-offcanvas .navmenu-nav > .disabled > a,
 .navmenu-inverse .navmenu-nav > .disabled > a:hover,
-.navmenu-inverse .navmenu-nav > .disabled > a:focus {
+.navbar-inverse .navbar-offcanvas .navmenu-nav > .disabled > a:hover,
+.navmenu-inverse .navmenu-nav > .disabled > a:focus,
+.navbar-inverse .navbar-offcanvas .navmenu-nav > .disabled > a:focus {
   color: #444444;
   background-color: transparent;
 }
@@ -841,8 +928,8 @@ input[type="button"].btn-block {
 }
 
 .canvas-sliding {
-  -webkit-transition: -webkit-transform 0.35s;
-          transition: transform 0.35s, -ms-transform 0.35s;
+  -webkit-transition: top 0.35s, left 0.35s, bottom 0.35s, right 0.35s;
+          transition: top 0.35s, left 0.35s, bottom 0.35s, right 0.35s;
 }
 
 .offcanvas-clone {

dist/extend/js/jasny-bootstrap.js

@@ -1,13 +1,13 @@
 /*!
  * Jasny Bootstrap v3.0.1-p7, maintained by @ArnoldDaniels
- * Copyright 2013 Twitter, Inc
+ * Copyright 2014 Twitter, Inc
  * Licensed under http://www.apache.org/licenses/LICENSE-2.0
  */
 
 if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery") }
 
 /* ========================================================================
- * Bootstrap: offcanvas.js v3.0.0-p7
+ * Bootstrap: offcanvas.js v3.0.3-p7
  * http://jasny.github.io/bootstrap/javascript.html#offcanvas
  * 
  * Based on Boostrap collapse.js by Twitter, Inc. 
@@ -30,22 +30,13 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
 +function ($) { "use strict";
 
   // OFFCANVAS PUBLIC CLASS DEFINITION
-  // ================================
+  // =================================
 
   var OffCanvas = function (element, options) {
-    this.$element      = $(element)
-    this.$canvas       = options.canvas ? $(options.canvas) : this.$element
-    this.options       = $.extend({}, OffCanvas.DEFAULTS, options)
-    this.transitioning = null
+    this.$element = $(element)
+    this.options  = $.extend({}, OffCanvas.DEFAULTS, options)
+    this.state    = null
     
-    this.calcTransform()
-
-    // If transform or transition aren't supported just slide the element
-    if (!this.transform) this.$canvas = this.$element
-
-    if (this.options.placement === 'auto')
-      this.options.placement = this.calcPlacement()
-
     if (this.options.recalc) {
       this.calcClone()
       $(window).on('resize.bs.offcanvas', $.proxy(this.recalc, this))
@@ -54,74 +45,16 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
     if (this.options.autohide)
       $(document).on('click.bs.offcanvas', $.proxy(this.autohide, this))
 
-    // Workaround: IE doesn't move fixed elements with translate
-    var isIE = window.navigator.appName == 'Microsoft Internet Explorer'
-    if (isIE && this.$canvas !== this.$element) {
-      var elems = this.$canvas.find('*').filter(function() {
-        return $(this).css("position") === 'fixed'
-      })
-      this.$canvas = this.$canvas.add(elems)
-    }
-
     if (this.options.toggle) this.toggle()
   }
 
   OffCanvas.DEFAULTS = {
     toggle: true,
-    placement: 'auto',
+    placement: 'left',
     autohide: true,
     recalc: true
   }
 
-  OffCanvas.prototype.calcTransform = function() {
-    this.transform = false
-
-    // Don't use transform with jQuery animations just to move the element
-    if (!$.support.transition && this.$canvas === this.$element) return
-
-    var $el = $('<div style="visibility: hidden"></div>'),
-        props = {
-          'transform':'transform',
-          'webkitTransform':'-webkit-transform',
-          'OTransform':'-o-transform',
-          'msTransform':'-ms-transform',
-          'MozTransform':'-moz-transform'
-        }
-
-    // Add it to the body to get the computed style.
-    $el.appendTo($('body'))
-
-    for (var prop in props) {
-      if ($el[0].style[prop] === undefined) continue
-
-      $el[0].style[prop] = "translate3d(1px,1px,1px)"
-      var m = window.getComputedStyle($el[0]).getPropertyValue(props[prop])
-      this.transform = props[prop]
-      this.translate = m.match(/^matrix3d/) ? 'translate3d' : 'translate'
-      break
-    }
-
-    $el.remove()
-  }
-
-  OffCanvas.prototype.calcPlacement = function () {
-    var horizontal = $(window).width() / this.$element.width(),
-        vertical = $(window).height() / this.$element.height(),
-        $element = this.$element
-    
-    function ab(a, b) {
-      if ($element.css(b) === 'auto') return a
-      if ($element.css(a) === 'auto') return b
-      
-      var size_a = parseInt($element.css(a), 10),
-          size_b = parseInt($element.css(b), 10)
-  
-      return size_a > size_b ? b : a
-    }
-    
-    return horizontal > vertical ? ab('left', 'right') : ab('top', 'bottom')
-  }
-
   OffCanvas.prototype.offset = function () {
     switch (this.options.placement) {
       case 'left':
@@ -130,115 +63,168 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
       case 'bottom': return this.$element.outerHeight()
     }
   }
-
-  OffCanvas.prototype.slideTransform = function (offset, callback) {
-    var placement = this.options.placement,
-        prop = this.transform
-
-    offset *= (placement === 'right' || placement === 'bottom' ? -1 : 1)
-
-    var css = placement === 'left' || placement === 'right' ?
-        "{}px, 0" : "0, {}px"
-    if (this.translate === 'translate3d') css += ', 0'
-    css = this.translate + "(" + css + ")"
-
-    // Use jQuery animation if CSS transitions aren't supported
-    if (!$.support.transition) {
-      return this.$canvas.animate({ borderSpacing: offset }, {
-        step: function(now, fx) {
-          $(this).css(prop, css.replace('{}', now))
-        },
-        complete: callback,
-        duration: 350
-      })
+  
+  OffCanvas.prototype.calcPlacement = function () {
+    var horizontal = $(window).width() / this.$element.width(),
+        vertical = $(window).height() / this.$element.height()
+        
+    if (!this.$element.hasClass('in')) {
+      this.$element.css('visiblity', 'hidden !important').addClass('in')
+    } 
+    
+    var element = this.$element
+    function ab(a, b) {
+      if (element.css(b) === 'auto') return a
+      if (element.css(a) === 'auto') return b
+      
+      var size_a = parseInt(element.css(a), 10),
+          size_b = parseInt(element.css(b), 10)
+  
+      return size_a > size_b ? b : a
+    }
+    
+    this.options.placement = horizontal > vertical ? ab('left', 'right') : ab('top', 'bottom')
+    
+    if (this.$element.css('visibility') === 'hidden !important') {
+      this.$element.removeClass('in').css('visiblity', '')
     }
-
-    this.$canvas.css(prop, css.replace('{}', offset))
-
-    this.$element
-      .one($.support.transition.end, callback)
-      .emulateTransitionEnd(350)
   }
-
-  OffCanvas.prototype.slidePosition = function (offset, callback) {
+  
+  OffCanvas.prototype.opposite = function (placement) {
+    switch (placement) {
+      case 'top':    return 'bottom'
+      case 'left':   return 'right'
+      case 'bottom': return 'top'
+      case 'right':  return 'left'
+    }
+  }
+  
+  OffCanvas.prototype.getCanvasElements = function() {
+    // Return a set containing the canvas plus all fixed elements
+    var canvas = this.options.canvas ? $(this.options.canvas) : this.$element
+    
+    var fixed_elements = canvas.find('*').filter(function() {
+      return $(this).css('position') === 'fixed'
+    }).not(this.options.exclude)
+    
+    return canvas.add(fixed_elements)
+  }
+  
+  OffCanvas.prototype.slide = function (elements, offset, callback) {
     // Use jQuery animation if CSS transitions aren't supported
     if (!$.support.transition) {
       var anim = {}
-      anim[this.options.placement] = offset
-      return this.$canvas.animate(anim, 350, callback)
+      anim[this.options.placement] = "+=" + offset
+      return elements.animate(anim, 350, callback)
     }
 
-    this.$canvas.css(this.options.placement, offset)
-
+    var placement = this.options.placement,
+        opposite = this.opposite(placement)
+    
+    elements.each(function() {
+      if ($(this).css(placement) !== 'auto')
+        $(this).css(placement, (parseInt($(this).css(placement), 10) || 0) + offset)
+      
+      if ($(this).css(opposite) !== 'auto')
+        $(this).css(opposite, (parseInt($(this).css(opposite), 10) || 0) - offset)
+    })
+    
     this.$element
       .one($.support.transition.end, callback)
       .emulateTransitionEnd(350)
   }
 
-  OffCanvas.prototype.show = function () {
-    if (this.transitioning || this.$canvas.hasClass('canvas-slid')) return
+  OffCanvas.prototype.disableScrolling = function() {
+    var bodyWidth = $('body').width()
+    var prop = 'padding-' + this.opposite(this.options.placement)
 
+    if ($('body').data('offcanvas-style') === undefined) $('body').data('offcanvas-style', $('body').attr('style'))
+    
+    $('body').css('overflow', 'hidden')
+
+    if ($('body').width() > bodyWidth) {
+      var padding = parseInt($('body').css(prop), 10) + $('body').width() - bodyWidth
+      
+      setTimeout(function() {
+        $('body').css(prop, padding)
+      }, 1)
+    }
+  }
+
+  OffCanvas.prototype.show = function () {
+    if (this.state) return
+    
     var startEvent = $.Event('show.bs.offcanvas')
     this.$element.trigger(startEvent)
     if (startEvent.isDefaultPrevented()) return
 
-    var complete = function () {
-      this.$canvas
-        .addClass('canvas-slid')
-        .removeClass('canvas-sliding')
+    if (this.options.placement === 'auto') this.calcPlacement()
 
-      this.transitioning = 0
+    this.state = 'sliding'
+
+    var elements = this.getCanvasElements()
+    var offset = this.offset(),
+        placement = this.options.placement,
+        opposite = this.opposite(placement)
+
+    elements.addClass('canvas-sliding').each(function() {
+      $(this).data('offcanvas-style', $(this).attr('style') || '')
+      if ($(this).css('position') === 'static') $(this).css('position', 'relative')
+      if ($(this).css(placement) === 'auto' && $(this).css(opposite) === 'auto') $(this).css(placement, 0)
+    })
+    
+    if (elements.index(this.$element) !== -1) this.$element.css(placement, -1 * offset)
+
+    this.disableScrolling()
+    
+    var complete = function () {
+      this.state = 'slid'
+
+      elements.removeClass('canvas-sliding').addClass('canvas-slid')
       this.$element.trigger('shown.bs.offcanvas')
     }
-    
-    if (!this.$element.is(':visible') || !this.transform)
-      this.$element.css(this.options.placement, -1 * this.offset() + "px")
-    this.$element.addClass('in')
 
-    this.$canvas.addClass('canvas-sliding')
-    if (this.$canvas != this.$element) $('body').css('overflow-x', 'hidden')
-
-    this.transitioning = 1
-
-    if (this.transform) this.slideTransform(this.offset(), $.proxy(complete, this))
-    else this.slidePosition(0, $.proxy(complete, this))
+    setTimeout($.proxy(function() {
+      this.$element.addClass('in')
+      this.slide(elements, offset, $.proxy(complete, this))
+    }, this), 1)
   }
 
   OffCanvas.prototype.hide = function (fast) {
-    if (this.transitioning || !this.$canvas.hasClass('canvas-slid')) return
+    if (this.state !== 'slid') return
 
     var startEvent = $.Event('hide.bs.offcanvas')
     this.$element.trigger(startEvent)
     if (startEvent.isDefaultPrevented()) return
 
+    this.state = 'sliding'
+
+    var elements = $('.canvas-slid')
+    var offset = -1 * this.offset()
+
     var complete = function () {
-      this.transitioning = 0
+      this.state = null
 
-      this.$element
-        .removeClass('in')
-        .css('left', '').css('right', '').css('top', '').css('bottom', '')
-
-      this.$canvas
-        .removeClass('canvas-sliding canvas-slid')
-        .css('transform', '')
-
-      $('body').css('overflow-x', '')
+      this.$element.removeClass('in')
       
+      elements.removeClass('canvas-sliding')
+      elements.add('body').each(function() {
+        $(this).attr('style', $(this).data('offcanvas-style')).removeData('offcanvas-style')
+      })
+
       this.$element.trigger('hidden.bs.offcanvas')
     }
 
-    if (fast) return complete.call(this)
-
-    this.$canvas.removeClass('canvas-slid').addClass('canvas-sliding')
-
-    this.transitioning = 1
-
-    if (this.transform) this.slideTransform(0, $.proxy(complete, this))
-    else this.slidePosition(-1 * this.offset(), $.proxy(complete, this))
+    elements.removeClass('canvas-slid').addClass('canvas-sliding')
+    
+    setTimeout($.proxy(function() {
+      this.slide(elements, offset, $.proxy(complete, this))
+    }, this), 1)
   }
 
   OffCanvas.prototype.toggle = function () {
-    this[this.$canvas.hasClass('canvas-slid') ? 'hide' : 'show']()
+    if (this.state === 'sliding') return
+    this[this.state === 'slid' ? 'hide' : 'show']()
   }
 
   OffCanvas.prototype.calcClone = function() {
@@ -249,7 +235,17 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
   }
 
   OffCanvas.prototype.recalc = function () {
-    if (this.$calcClone.css('display') !== 'none') this.hide(true)
+    if (this.state() !== 'slid' || this.$calcClone.css('display') === 'none') return
+    
+    var offset = -1 * this.offset()
+    
+    var placement = this.options.placement
+    this.getCanvasElements().each(function() {
+      $(this).css(placement, (parseInt($(this).css(placement), 10) || 0) + offset)
+    }).removeClass('canvas-slid')
+    
+    $('body').css('overflow', '')
+    this.$element.css(placement, '').removeClass('in canvas-slid')
   }
   
   OffCanvas.prototype.autohide = function (e) {
@@ -824,7 +820,8 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
       var element = this.$element
 
       reader.onload = function(re) {
-        var $img = $('<img>').attr('src', re.target.result)
+        var $img = $('<img>') // .attr('src', re.target.result)
+        $img[0].src = re.target.result
         e.target.files[0].result = re.target.result
         
         element.find('.fileinput-filename').text(file.name)

dist/js/bootstrap.js

@@ -1,6 +1,6 @@
 /*!
  * Jasny Bootstrap v3.0.1-p7, maintained by @ArnoldDaniels
- * Copyright 2013 Twitter, Inc
+ * Copyright 2014 Twitter, Inc
  * Licensed under http://www.apache.org/licenses/LICENSE-2.0
  */
 
@@ -2001,7 +2001,7 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
 }(window.jQuery);
 
 /* ========================================================================
- * Bootstrap: offcanvas.js v3.0.0-p7
+ * Bootstrap: offcanvas.js v3.0.3-p7
  * http://jasny.github.io/bootstrap/javascript.html#offcanvas
  * 
  * Based on Boostrap collapse.js by Twitter, Inc. 
@@ -2024,22 +2024,13 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
 +function ($) { "use strict";
 
   // OFFCANVAS PUBLIC CLASS DEFINITION
-  // ================================
+  // =================================
 
   var OffCanvas = function (element, options) {
-    this.$element      = $(element)
-    this.$canvas       = options.canvas ? $(options.canvas) : this.$element
-    this.options       = $.extend({}, OffCanvas.DEFAULTS, options)
-    this.transitioning = null
+    this.$element = $(element)
+    this.options  = $.extend({}, OffCanvas.DEFAULTS, options)
+    this.state    = null
     
-    this.calcTransform()
-
-    // If transform or transition aren't supported just slide the element
-    if (!this.transform) this.$canvas = this.$element
-
-    if (this.options.placement === 'auto')
-      this.options.placement = this.calcPlacement()
-
     if (this.options.recalc) {
       this.calcClone()
       $(window).on('resize.bs.offcanvas', $.proxy(this.recalc, this))
@@ -2048,74 +2039,16 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
     if (this.options.autohide)
       $(document).on('click.bs.offcanvas', $.proxy(this.autohide, this))
 
-    // Workaround: IE doesn't move fixed elements with translate
-    var isIE = window.navigator.appName == 'Microsoft Internet Explorer'
-    if (isIE && this.$canvas !== this.$element) {
-      var elems = this.$canvas.find('*').filter(function() {
-        return $(this).css("position") === 'fixed'
-      })
-      this.$canvas = this.$canvas.add(elems)
-    }
-
     if (this.options.toggle) this.toggle()
   }
 
   OffCanvas.DEFAULTS = {
     toggle: true,
-    placement: 'auto',
+    placement: 'left',
     autohide: true,
     recalc: true
   }
 
-  OffCanvas.prototype.calcTransform = function() {
-    this.transform = false
-
-    // Don't use transform with jQuery animations just to move the element
-    if (!$.support.transition && this.$canvas === this.$element) return
-
-    var $el = $('<div style="visibility: hidden"></div>'),
-        props = {
-          'transform':'transform',
-          'webkitTransform':'-webkit-transform',
-          'OTransform':'-o-transform',
-          'msTransform':'-ms-transform',
-          'MozTransform':'-moz-transform'
-        }
-
-    // Add it to the body to get the computed style.
-    $el.appendTo($('body'))
-
-    for (var prop in props) {
-      if ($el[0].style[prop] === undefined) continue
-
-      $el[0].style[prop] = "translate3d(1px,1px,1px)"
-      var m = window.getComputedStyle($el[0]).getPropertyValue(props[prop])
-      this.transform = props[prop]
-      this.translate = m.match(/^matrix3d/) ? 'translate3d' : 'translate'
-      break
-    }
-
-    $el.remove()
-  }
-
-  OffCanvas.prototype.calcPlacement = function () {
-    var horizontal = $(window).width() / this.$element.width(),
-        vertical = $(window).height() / this.$element.height(),
-        $element = this.$element
-    
-    function ab(a, b) {
-      if ($element.css(b) === 'auto') return a
-      if ($element.css(a) === 'auto') return b
-      
-      var size_a = parseInt($element.css(a), 10),
-          size_b = parseInt($element.css(b), 10)
-  
-      return size_a > size_b ? b : a
-    }
-    
-    return horizontal > vertical ? ab('left', 'right') : ab('top', 'bottom')
-  }
-
   OffCanvas.prototype.offset = function () {
     switch (this.options.placement) {
       case 'left':
@@ -2124,115 +2057,168 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
       case 'bottom': return this.$element.outerHeight()
     }
   }
-
-  OffCanvas.prototype.slideTransform = function (offset, callback) {
-    var placement = this.options.placement,
-        prop = this.transform
-
-    offset *= (placement === 'right' || placement === 'bottom' ? -1 : 1)
-
-    var css = placement === 'left' || placement === 'right' ?
-        "{}px, 0" : "0, {}px"
-    if (this.translate === 'translate3d') css += ', 0'
-    css = this.translate + "(" + css + ")"
-
-    // Use jQuery animation if CSS transitions aren't supported
-    if (!$.support.transition) {
-      return this.$canvas.animate({ borderSpacing: offset }, {
-        step: function(now, fx) {
-          $(this).css(prop, css.replace('{}', now))
-        },
-        complete: callback,
-        duration: 350
-      })
+  
+  OffCanvas.prototype.calcPlacement = function () {
+    var horizontal = $(window).width() / this.$element.width(),
+        vertical = $(window).height() / this.$element.height()
+        
+    if (!this.$element.hasClass('in')) {
+      this.$element.css('visiblity', 'hidden !important').addClass('in')
+    } 
+    
+    var element = this.$element
+    function ab(a, b) {
+      if (element.css(b) === 'auto') return a
+      if (element.css(a) === 'auto') return b
+      
+      var size_a = parseInt(element.css(a), 10),
+          size_b = parseInt(element.css(b), 10)
+  
+      return size_a > size_b ? b : a
+    }
+    
+    this.options.placement = horizontal > vertical ? ab('left', 'right') : ab('top', 'bottom')
+    
+    if (this.$element.css('visibility') === 'hidden !important') {
+      this.$element.removeClass('in').css('visiblity', '')
     }
-
-    this.$canvas.css(prop, css.replace('{}', offset))
-
-    this.$element
-      .one($.support.transition.end, callback)
-      .emulateTransitionEnd(350)
   }
-
-  OffCanvas.prototype.slidePosition = function (offset, callback) {
+  
+  OffCanvas.prototype.opposite = function (placement) {
+    switch (placement) {
+      case 'top':    return 'bottom'
+      case 'left':   return 'right'
+      case 'bottom': return 'top'
+      case 'right':  return 'left'
+    }
+  }
+  
+  OffCanvas.prototype.getCanvasElements = function() {
+    // Return a set containing the canvas plus all fixed elements
+    var canvas = this.options.canvas ? $(this.options.canvas) : this.$element
+    
+    var fixed_elements = canvas.find('*').filter(function() {
+      return $(this).css('position') === 'fixed'
+    }).not(this.options.exclude)
+    
+    return canvas.add(fixed_elements)
+  }
+  
+  OffCanvas.prototype.slide = function (elements, offset, callback) {
     // Use jQuery animation if CSS transitions aren't supported
     if (!$.support.transition) {
       var anim = {}
-      anim[this.options.placement] = offset
-      return this.$canvas.animate(anim, 350, callback)
+      anim[this.options.placement] = "+=" + offset
+      return elements.animate(anim, 350, callback)
     }
 
-    this.$canvas.css(this.options.placement, offset)
-
+    var placement = this.options.placement,
+        opposite = this.opposite(placement)
+    
+    elements.each(function() {
+      if ($(this).css(placement) !== 'auto')
+        $(this).css(placement, (parseInt($(this).css(placement), 10) || 0) + offset)
+      
+      if ($(this).css(opposite) !== 'auto')
+        $(this).css(opposite, (parseInt($(this).css(opposite), 10) || 0) - offset)
+    })
+    
     this.$element
       .one($.support.transition.end, callback)
       .emulateTransitionEnd(350)
   }
 
-  OffCanvas.prototype.show = function () {
-    if (this.transitioning || this.$canvas.hasClass('canvas-slid')) return
+  OffCanvas.prototype.disableScrolling = function() {
+    var bodyWidth = $('body').width()
+    var prop = 'padding-' + this.opposite(this.options.placement)
 
+    if ($('body').data('offcanvas-style') === undefined) $('body').data('offcanvas-style', $('body').attr('style'))
+    
+    $('body').css('overflow', 'hidden')
+
+    if ($('body').width() > bodyWidth) {
+      var padding = parseInt($('body').css(prop), 10) + $('body').width() - bodyWidth
+      
+      setTimeout(function() {
+        $('body').css(prop, padding)
+      }, 1)
+    }
+  }
+
+  OffCanvas.prototype.show = function () {
+    if (this.state) return
+    
     var startEvent = $.Event('show.bs.offcanvas')
     this.$element.trigger(startEvent)
     if (startEvent.isDefaultPrevented()) return
 
-    var complete = function () {
-      this.$canvas
-        .addClass('canvas-slid')
-        .removeClass('canvas-sliding')
+    if (this.options.placement === 'auto') this.calcPlacement()
 
-      this.transitioning = 0
+    this.state = 'sliding'
+
+    var elements = this.getCanvasElements()
+    var offset = this.offset(),
+        placement = this.options.placement,
+        opposite = this.opposite(placement)
+
+    elements.addClass('canvas-sliding').each(function() {
+      $(this).data('offcanvas-style', $(this).attr('style') || '')
+      if ($(this).css('position') === 'static') $(this).css('position', 'relative')
+      if ($(this).css(placement) === 'auto' && $(this).css(opposite) === 'auto') $(this).css(placement, 0)
+    })
+    
+    if (elements.index(this.$element) !== -1) this.$element.css(placement, -1 * offset)
+
+    this.disableScrolling()
+    
+    var complete = function () {
+      this.state = 'slid'
+
+      elements.removeClass('canvas-sliding').addClass('canvas-slid')
       this.$element.trigger('shown.bs.offcanvas')
     }
-    
-    if (!this.$element.is(':visible') || !this.transform)
-      this.$element.css(this.options.placement, -1 * this.offset() + "px")
-    this.$element.addClass('in')
 
-    this.$canvas.addClass('canvas-sliding')
-    if (this.$canvas != this.$element) $('body').css('overflow-x', 'hidden')
-
-    this.transitioning = 1
-
-    if (this.transform) this.slideTransform(this.offset(), $.proxy(complete, this))
-    else this.slidePosition(0, $.proxy(complete, this))
+    setTimeout($.proxy(function() {
+      this.$element.addClass('in')
+      this.slide(elements, offset, $.proxy(complete, this))
+    }, this), 1)
   }
 
   OffCanvas.prototype.hide = function (fast) {
-    if (this.transitioning || !this.$canvas.hasClass('canvas-slid')) return
+    if (this.state !== 'slid') return
 
     var startEvent = $.Event('hide.bs.offcanvas')
     this.$element.trigger(startEvent)
     if (startEvent.isDefaultPrevented()) return
 
+    this.state = 'sliding'
+
+    var elements = $('.canvas-slid')
+    var offset = -1 * this.offset()
+
     var complete = function () {
-      this.transitioning = 0
+      this.state = null
 
-      this.$element
-        .removeClass('in')
-        .css('left', '').css('right', '').css('top', '').css('bottom', '')
-
-      this.$canvas
-        .removeClass('canvas-sliding canvas-slid')
-        .css('transform', '')
-
-      $('body').css('overflow-x', '')
+      this.$element.removeClass('in')
       
+      elements.removeClass('canvas-sliding')
+      elements.add('body').each(function() {
+        $(this).attr('style', $(this).data('offcanvas-style')).removeData('offcanvas-style')
+      })
+
       this.$element.trigger('hidden.bs.offcanvas')
     }
 
-    if (fast) return complete.call(this)
-
-    this.$canvas.removeClass('canvas-slid').addClass('canvas-sliding')
-
-    this.transitioning = 1
-
-    if (this.transform) this.slideTransform(0, $.proxy(complete, this))
-    else this.slidePosition(-1 * this.offset(), $.proxy(complete, this))
+    elements.removeClass('canvas-slid').addClass('canvas-sliding')
+    
+    setTimeout($.proxy(function() {
+      this.slide(elements, offset, $.proxy(complete, this))
+    }, this), 1)
   }
 
   OffCanvas.prototype.toggle = function () {
-    this[this.$canvas.hasClass('canvas-slid') ? 'hide' : 'show']()
+    if (this.state === 'sliding') return
+    this[this.state === 'slid' ? 'hide' : 'show']()
   }
 
   OffCanvas.prototype.calcClone = function() {
@@ -2243,7 +2229,17 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
   }
 
   OffCanvas.prototype.recalc = function () {
-    if (this.$calcClone.css('display') !== 'none') this.hide(true)
+    if (this.state() !== 'slid' || this.$calcClone.css('display') === 'none') return
+    
+    var offset = -1 * this.offset()
+    
+    var placement = this.options.placement
+    this.getCanvasElements().each(function() {
+      $(this).css(placement, (parseInt($(this).css(placement), 10) || 0) + offset)
+    }).removeClass('canvas-slid')
+    
+    $('body').css('overflow', '')
+    this.$element.css(placement, '').removeClass('in canvas-slid')
   }
   
   OffCanvas.prototype.autohide = function (e) {
@@ -2818,7 +2814,8 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
       var element = this.$element
 
       reader.onload = function(re) {
-        var $img = $('<img>').attr('src', re.target.result)
+        var $img = $('<img>') // .attr('src', re.target.result)
+        $img[0].src = re.target.result
         e.target.files[0].result = re.target.result
         
         element.find('.fileinput-filename').text(file.name)

docs-assets/css/docs.css

@@ -528,7 +528,7 @@ span.hidden-sm {
   .bs-docs-home .aboutme {
     float: left;
     width: 330px !important;
-    margin: 0 0 30px !important;
+    margin: 0 !important;
   }
   .bs-docs-home .bs-social,
   .bs-docs-home .bs-masthead-links {

examples/navbar-offcanvas/index.html

@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
+
+    <title>Navbar Template for Bootstrap</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="../../dist/css/bootstrap.css" rel="stylesheet">
+
+    <!-- Custom styles for this template -->
+    <link href="navbar-offcanvas.css" rel="stylesheet">
+
+    <!-- Just for debugging purposes. Don't actually copy this line! -->
+    <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
+
+    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!--[if lt IE 9]>
+      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
+    <![endif]-->
+  </head>
+
+  <body>
+
+    <div class="container">
+
+      <!-- Static navbar -->
+      <div class="navbar navbar-fixed-top navbar-default">
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navbar-offcanvas" data-canvas="body">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="navbar-brand" href="#">Project name</a>
+        </div>
+        <div class="navbar-offcanvas offcanvas">
+          <a class="navmenu-brand" href="#">Project name</a>
+          <ul class="nav navbar-nav">
+            <li class="active"><a href="#">Link</a></li>
+            <li><a href="#">Link</a></li>
+            <li><a href="#">Link</a></li>
+            <li class="dropdown">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+              <ul class="dropdown-menu">
+                <li><a href="#">Action</a></li>
+                <li><a href="#">Another action</a></li>
+                <li><a href="#">Something else here</a></li>
+                <li class="divider"></li>
+                <li class="dropdown-header">Nav header</li>
+                <li><a href="#">Separated link</a></li>
+                <li><a href="#">One more separated link</a></li>
+              </ul>
+            </li>
+          </ul>
+          <ul class="nav navbar-nav navbar-right">
+            <li><a href="../navbar/">Default</a></li>
+            <li><a href="../navbar-static-top/">Static top</a></li>
+            <li><a href="../navbar-fixed-top/">Fixed top</a></li>
+            <li class="active"><a href="./">Offcanvas</a></li>
+          </ul>
+        </div><!--/.nav-collapse -->
+      </div>
+
+      <!-- Main component for a primary marketing message or call to action -->
+      <div class="jumbotron">
+        <h1>Offcanvas Navbar example</h1>
+      <p>This example demonstrates using the offcanvas plugin with the navbar.</p>
+      </div>
+
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in bibendum enim. Proin fringilla rutrum congue. Etiam sit amet vulputate libero, at volutpat quam. Ut hendrerit leo nec dictum tempus. Duis molestie vel leo a vulputate. Donec bibendum pulvinar sapien, quis hendrerit lorem iaculis vitae. Nulla sed velit lorem. Vivamus nec lacus semper augue auctor gravida. Aenean molestie magna vulputate velit auctor, sit amet dapibus leo placerat. Suspendisse lacus dolor, egestas bibendum imperdiet ut, viverra ac odio. Sed elementum libero in dui tempus tempor.
+      </p>
+      <p>
+        Aenean non diam nulla. Sed mattis, dolor quis sollicitudin aliquet, lectus lorem viverra tellus, in sagittis est ante eget lacus. Aliquam sem purus, auctor non mattis et, hendrerit id sem. Vestibulum leo magna, gravida in interdum quis, congue vitae elit. Phasellus viverra congue lorem. Pellentesque vulputate, neque sed faucibus sollicitudin, turpis augue dapibus mauris, eget dapibus dui ante a enim. In mattis libero eu semper vestibulum. Nunc feugiat nisl eu neque vulputate, ac pellentesque orci aliquam. Sed a purus ac eros molestie consectetur. Mauris iaculis justo in accumsan posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus porta, metus nec condimentum fermentum, quam justo imperdiet elit, vel lacinia mauris mi at mauris.
+      </p>
+      <p>
+        Aliquam convallis eros eget ante ultrices tristique. Nam porttitor orci nisl, non tristique sem molestie nec. Morbi ultrices molestie velit a tristique. Nulla et ligula sed nulla tempor sagittis non id libero. Aenean ac porta sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut dictum erat id eros suscipit pulvinar. Nulla fringilla hendrerit nisi, quis luctus urna tempus ac. Vivamus tempus dui velit, a luctus eros gravida ac.
+      </p>
+      <p>
+        Sed placerat scelerisque mauris ut consectetur. Donec tristique, lacus eget molestie pulvinar, mi risus ultricies mauris, ornare interdum turpis nisl id elit. Proin id justo elementum ante tristique feugiat ut et nulla. Aliquam sit amet justo sapien. Aliquam congue diam sit amet nisl tristique ornare. Sed libero tellus, faucibus vel viverra egestas, hendrerit non lorem. Nam feugiat massa eu tempor consectetur. Donec non mi id nisl varius elementum in et leo. Cras fermentum lectus felis, quis imperdiet arcu ullamcorper id.
+      </p>
+      <p>
+        Nulla sed dui erat. Mauris pretium facilisis fermentum. Nullam et leo lacus. Pellentesque id mollis augue. Curabitur vitae felis mi. Vestibulum leo ante, accumsan vel mollis egestas, elementum eget nulla. Cras ornare pulvinar risus at dictum. Proin quis odio ac eros rhoncus euismod id quis justo. Nulla et risus nec neque tincidunt rutrum. Sed tortor leo, adipiscing vel lorem sed, luctus mattis dolor. Phasellus sem mi, luctus eget nulla ac, vehicula varius dolor. Nulla nec viverra tortor, id vehicula odio. Mauris augue nulla, mollis eget mauris a, rhoncus blandit augue.
+      </p>
+      <p>
+        In hac habitasse platea dictumst. Aliquam tempor quis ipsum a vestibulum. Vivamus viverra orci justo, mattis posuere nisl eleifend sit amet. Integer et lacinia augue. Nunc vulputate feugiat interdum. In pellentesque nibh quis erat facilisis rutrum. Sed ac sagittis elit, sit amet pretium massa. In id imperdiet nibh. In faucibus mi laoreet, rhoncus leo at, fringilla nisl. Praesent hendrerit, risus ut placerat mattis, sapien felis dapibus quam, eu rutrum metus dolor fringilla massa. Sed eget convallis erat, id gravida diam.
+      </p>
+      <p>
+        Suspendisse eget commodo nulla. Quisque imperdiet magna auctor erat ullamcorper, in lacinia lacus scelerisque. Etiam a mi vitae sapien viverra ultricies a at nisl. Aenean eget sem ac metus auctor porttitor quis in velit. Etiam fermentum rutrum dolor sed imperdiet. Donec vitae egestas orci. Pellentesque tincidunt ipsum nulla, eget bibendum turpis aliquet pretium. Fusce nec mi ut lorem commodo rhoncus at eget enim. Aliquam ultricies arcu scelerisque leo tempus blandit. Donec aliquam sit amet sem vitae mattis.
+      </p>
+      <p>
+        Suspendisse vitae pellentesque ipsum, id vulputate ligula. Nunc convallis iaculis lacus, vitae viverra risus tincidunt eget. Quisque dictum commodo hendrerit. Ut egestas rhoncus facilisis. Phasellus at magna vitae nibh condimentum interdum sit amet sit amet felis. Integer nec ligula iaculis, pulvinar est ac, molestie dui. Vivamus et commodo ipsum. Pellentesque mollis mollis magna ut dapibus. Praesent ante eros, pulvinar ac aliquam eget, posuere at risus. Proin in ante quis ante imperdiet rutrum nec eu nibh. Nam euismod purus sagittis dui scelerisque, nec ornare arcu eleifend. Integer ac nibh eros. Pellentesque vel dolor sed nunc adipiscing tincidunt.
+      </p>      
+    </div> <!-- /container -->
+
+
+    <!-- Bootstrap core JavaScript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="../../dist/js/bootstrap.min.js"></script>
+    <script src="../../js/offcanvas.js"></script>
+  </body>
+</html>

examples/navbar-offcanvas/navbar-offcanvas.css

@@ -0,0 +1,10 @@
+body {
+  padding-top: 80px;
+  padding-bottom: 20px;
+}
+
+@media (min-width: 992px) {
+  .navbar {
+    padding-right: 15px;
+  }
+}

examples/navmenu-push/index.html

@@ -69,7 +69,7 @@
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="../../assets/js/jquery.js"></script>
+    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
     <script src="../../dist/js/bootstrap.min.js"></script>
     <script src="../../js/offcanvas.js"></script>
   </body>

examples/navmenu-push/navmenu-push.css

@@ -7,18 +7,13 @@ body {
 }
 
 .navbar-toggle {
-  float: left;
   margin-left: 15px;
-}
-
-.navmenu.canvas-sliding,
-.navmenu.canvas-slid {
-  z-index: 2000;
+  float: left;
 }
 
 @media (min-width: 0px) {
   .navbar-toggle {
-    display: block;
+    display: block; /* force showing the toggle */
   }
 }
 
@@ -27,8 +22,8 @@ body {
     padding: 0;
   }
   .navbar {
-    width: 0; /* Don't show the menu */
-    height: 0;
-    overflow: visible; /* Do show the contents (the button) */
+    right: auto;
+    background: none;
+    border: none;
   }
 }

examples/navmenu-reveal/index.html

@@ -63,6 +63,7 @@
           <h1>Off Canvas Reveal Menu Template</h1>
         </div>
         <p class="lead">This example demonstrates the use of the offcanvas plugin with a reveal effect.</p>
+        <p>On the contrary of the push effect, the menu doesn't move with the canvas.</p>
         <p>You get the reveal effect by wrapping the content in a div and setting the <code>canvas</code> option to target that div.</p>
         <p>Note that in this example, the navmenu doesn't have the <code>.offcanvas</code> class, but is placed under the canvas by setting the <code>z-index</code>.</p>
         <p>Also take a look at the examples for a navmenu with <a href="../navmenu">slide in effect</a> and <a href="../navmenu-push">push effect</a>.</p>
@@ -73,7 +74,7 @@
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="../../assets/js/jquery.js"></script>
+    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
     <script src="../../dist/js/bootstrap.min.js"></script>
     <script src="../../js/offcanvas.js"></script>
   </body>

examples/navmenu-reveal/navmenu-reveal.css

@@ -3,20 +3,16 @@ html, body {
 }
 
 .navbar-toggle {
-  float: left;
   margin-left: 15px;
 }
 
 .navmenu {
   z-index: 1;
 }
-.navmenu.canvas-sliding,
-.navmenu.canvas-slid {
-  z-index: 2000;
-}
 
 .canvas {
   position: relative;
+  left: 0;
   z-index: 2;
   padding: 50px 0 0 0;
   background: #fff;
@@ -25,7 +21,7 @@ html, body {
 
 @media (min-width: 0px) {
   .navbar-toggle {
-    display: block;
+    display: block; /* force showing the toggle */
   }
 }
 
@@ -34,9 +30,9 @@ html, body {
     padding: 0;
   }
   .navbar {
-    width: 0; /* Don't show the menu */
-    height: 0;
-    overflow: visible; /* Do show the contents (the button) */
+    right: auto;
+    background: none;
+    border: none;
   }
   .canvas {
     padding: 0;

examples/navmenu/index.html

@@ -70,7 +70,7 @@
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="../../assets/js/jquery.js"></script>
+    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
     <script src="../../dist/js/bootstrap.min.js"></script>
     <script src="../../js/offcanvas.js"></script>
   </body>

index.html

@@ -7,7 +7,7 @@ base_url: "./"
 <main class="bs-masthead" id="content" role="main">
   <div class="container">
     <h1>{{ page.title }}</h1>
-    <p class="lead">The sleek and powerfull front-end framework you know and love, plus everything it's missing.</p>
+    <p class="lead">The sleek and powerful front-end framework you know and love, plus everything it's missing.</p>
     <p>
       <a href="{{ site.download_dist }}" class="btn btn-outline-inverse btn-lg" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}']);">Download Bootstrap</a>
       <a href="{{ site.download_extend }}" class="btn btn-outline-inverse btn-lg" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Extend {{ site.current_version }}']);">Extend Bootstrap</a>

js/fileinput.js

@@ -75,7 +75,8 @@
       var element = this.$element
 
       reader.onload = function(re) {
-        var $img = $('<img>').attr('src', re.target.result)
+        var $img = $('<img>') // .attr('src', re.target.result)
+        $img[0].src = re.target.result
         e.target.files[0].result = re.target.result
         
         element.find('.fileinput-filename').text(file.name)

js/offcanvas.js

@@ -1,5 +1,5 @@
 /* ========================================================================
- * Bootstrap: offcanvas.js v3.0.0-p7
+ * Bootstrap: offcanvas.js v3.0.3-p7
  * http://jasny.github.io/bootstrap/javascript.html#offcanvas
  * 
  * Based on Boostrap collapse.js by Twitter, Inc. 
@@ -22,22 +22,13 @@
 +function ($) { "use strict";
 
   // OFFCANVAS PUBLIC CLASS DEFINITION
-  // ================================
+  // =================================
 
   var OffCanvas = function (element, options) {
-    this.$element      = $(element)
-    this.$canvas       = options.canvas ? $(options.canvas) : this.$element
-    this.options       = $.extend({}, OffCanvas.DEFAULTS, options)
-    this.transitioning = null
+    this.$element = $(element)
+    this.options  = $.extend({}, OffCanvas.DEFAULTS, options)
+    this.state    = null
     
-    this.calcTransform()
-
-    // If transform or transition aren't supported just slide the element
-    if (!this.transform) this.$canvas = this.$element
-
-    if (this.options.placement === 'auto')
-      this.options.placement = this.calcPlacement()
-
     if (this.options.recalc) {
       this.calcClone()
       $(window).on('resize.bs.offcanvas', $.proxy(this.recalc, this))
@@ -46,74 +37,16 @@
     if (this.options.autohide)
       $(document).on('click.bs.offcanvas', $.proxy(this.autohide, this))
 
-    // Workaround: IE doesn't move fixed elements with translate
-    var isIE = window.navigator.appName == 'Microsoft Internet Explorer'
-    if (isIE && this.$canvas !== this.$element) {
-      var elems = this.$canvas.find('*').filter(function() {
-        return $(this).css("position") === 'fixed'
-      })
-      this.$canvas = this.$canvas.add(elems)
-    }
-
     if (this.options.toggle) this.toggle()
   }
 
   OffCanvas.DEFAULTS = {
     toggle: true,
-    placement: 'auto',
+    placement: 'left',
     autohide: true,
     recalc: true
   }
 
-  OffCanvas.prototype.calcTransform = function() {
-    this.transform = false
-
-    // Don't use transform with jQuery animations just to move the element
-    if (!$.support.transition && this.$canvas === this.$element) return
-
-    var $el = $('<div style="visibility: hidden"></div>'),
-        props = {
-          'transform':'transform',
-          'webkitTransform':'-webkit-transform',
-          'OTransform':'-o-transform',
-          'msTransform':'-ms-transform',
-          'MozTransform':'-moz-transform'
-        }
-
-    // Add it to the body to get the computed style.
-    $el.appendTo($('body'))
-
-    for (var prop in props) {
-      if ($el[0].style[prop] === undefined) continue
-
-      $el[0].style[prop] = "translate3d(1px,1px,1px)"
-      var m = window.getComputedStyle($el[0]).getPropertyValue(props[prop])
-      this.transform = props[prop]
-      this.translate = m.match(/^matrix3d/) ? 'translate3d' : 'translate'
-      break
-    }
-
-    $el.remove()
-  }
-
-  OffCanvas.prototype.calcPlacement = function () {
-    var horizontal = $(window).width() / this.$element.width(),
-        vertical = $(window).height() / this.$element.height(),
-        $element = this.$element
-    
-    function ab(a, b) {
-      if ($element.css(b) === 'auto') return a
-      if ($element.css(a) === 'auto') return b
-      
-      var size_a = parseInt($element.css(a), 10),
-          size_b = parseInt($element.css(b), 10)
-  
-      return size_a > size_b ? b : a
-    }
-    
-    return horizontal > vertical ? ab('left', 'right') : ab('top', 'bottom')
-  }
-
   OffCanvas.prototype.offset = function () {
     switch (this.options.placement) {
       case 'left':
@@ -122,115 +55,168 @@
       case 'bottom': return this.$element.outerHeight()
     }
   }
-
-  OffCanvas.prototype.slideTransform = function (offset, callback) {
-    var placement = this.options.placement,
-        prop = this.transform
-
-    offset *= (placement === 'right' || placement === 'bottom' ? -1 : 1)
-
-    var css = placement === 'left' || placement === 'right' ?
-        "{}px, 0" : "0, {}px"
-    if (this.translate === 'translate3d') css += ', 0'
-    css = this.translate + "(" + css + ")"
-
-    // Use jQuery animation if CSS transitions aren't supported
-    if (!$.support.transition) {
-      return this.$canvas.animate({ borderSpacing: offset }, {
-        step: function(now, fx) {
-          $(this).css(prop, css.replace('{}', now))
-        },
-        complete: callback,
-        duration: 350
-      })
+  
+  OffCanvas.prototype.calcPlacement = function () {
+    var horizontal = $(window).width() / this.$element.width(),
+        vertical = $(window).height() / this.$element.height()
+        
+    if (!this.$element.hasClass('in')) {
+      this.$element.css('visiblity', 'hidden !important').addClass('in')
+    } 
+    
+    var element = this.$element
+    function ab(a, b) {
+      if (element.css(b) === 'auto') return a
+      if (element.css(a) === 'auto') return b
+      
+      var size_a = parseInt(element.css(a), 10),
+          size_b = parseInt(element.css(b), 10)
+  
+      return size_a > size_b ? b : a
+    }
+    
+    this.options.placement = horizontal > vertical ? ab('left', 'right') : ab('top', 'bottom')
+    
+    if (this.$element.css('visibility') === 'hidden !important') {
+      this.$element.removeClass('in').css('visiblity', '')
     }
-
-    this.$canvas.css(prop, css.replace('{}', offset))
-
-    this.$element
-      .one($.support.transition.end, callback)
-      .emulateTransitionEnd(350)
   }
-
-  OffCanvas.prototype.slidePosition = function (offset, callback) {
+  
+  OffCanvas.prototype.opposite = function (placement) {
+    switch (placement) {
+      case 'top':    return 'bottom'
+      case 'left':   return 'right'
+      case 'bottom': return 'top'
+      case 'right':  return 'left'
+    }
+  }
+  
+  OffCanvas.prototype.getCanvasElements = function() {
+    // Return a set containing the canvas plus all fixed elements
+    var canvas = this.options.canvas ? $(this.options.canvas) : this.$element
+    
+    var fixed_elements = canvas.find('*').filter(function() {
+      return $(this).css('position') === 'fixed'
+    }).not(this.options.exclude)
+    
+    return canvas.add(fixed_elements)
+  }
+  
+  OffCanvas.prototype.slide = function (elements, offset, callback) {
     // Use jQuery animation if CSS transitions aren't supported
     if (!$.support.transition) {
       var anim = {}
-      anim[this.options.placement] = offset
-      return this.$canvas.animate(anim, 350, callback)
+      anim[this.options.placement] = "+=" + offset
+      return elements.animate(anim, 350, callback)
     }
 
-    this.$canvas.css(this.options.placement, offset)
-
+    var placement = this.options.placement,
+        opposite = this.opposite(placement)
+    
+    elements.each(function() {
+      if ($(this).css(placement) !== 'auto')
+        $(this).css(placement, (parseInt($(this).css(placement), 10) || 0) + offset)
+      
+      if ($(this).css(opposite) !== 'auto')
+        $(this).css(opposite, (parseInt($(this).css(opposite), 10) || 0) - offset)
+    })
+    
     this.$element
       .one($.support.transition.end, callback)
       .emulateTransitionEnd(350)
   }
 
-  OffCanvas.prototype.show = function () {
-    if (this.transitioning || this.$canvas.hasClass('canvas-slid')) return
+  OffCanvas.prototype.disableScrolling = function() {
+    var bodyWidth = $('body').width()
+    var prop = 'padding-' + this.opposite(this.options.placement)
 
+    if ($('body').data('offcanvas-style') === undefined) $('body').data('offcanvas-style', $('body').attr('style'))
+    
+    $('body').css('overflow', 'hidden')
+
+    if ($('body').width() > bodyWidth) {
+      var padding = parseInt($('body').css(prop), 10) + $('body').width() - bodyWidth
+      
+      setTimeout(function() {
+        $('body').css(prop, padding)
+      }, 1)
+    }
+  }
+
+  OffCanvas.prototype.show = function () {
+    if (this.state) return
+    
     var startEvent = $.Event('show.bs.offcanvas')
     this.$element.trigger(startEvent)
     if (startEvent.isDefaultPrevented()) return
 
-    var complete = function () {
-      this.$canvas
-        .addClass('canvas-slid')
-        .removeClass('canvas-sliding')
+    if (this.options.placement === 'auto') this.calcPlacement()
 
-      this.transitioning = 0
+    this.state = 'sliding'
+
+    var elements = this.getCanvasElements()
+    var offset = this.offset(),
+        placement = this.options.placement,
+        opposite = this.opposite(placement)
+
+    elements.addClass('canvas-sliding').each(function() {
+      $(this).data('offcanvas-style', $(this).attr('style') || '')
+      if ($(this).css('position') === 'static') $(this).css('position', 'relative')
+      if ($(this).css(placement) === 'auto' && $(this).css(opposite) === 'auto') $(this).css(placement, 0)
+    })
+    
+    if (elements.index(this.$element) !== -1) this.$element.css(placement, -1 * offset)
+
+    this.disableScrolling()
+    
+    var complete = function () {
+      this.state = 'slid'
+
+      elements.removeClass('canvas-sliding').addClass('canvas-slid')
       this.$element.trigger('shown.bs.offcanvas')
     }
-    
-    if (!this.$element.is(':visible') || !this.transform)
-      this.$element.css(this.options.placement, -1 * this.offset() + "px")
-    this.$element.addClass('in')
 
-    this.$canvas.addClass('canvas-sliding')
-    if (this.$canvas != this.$element) $('body').css('overflow-x', 'hidden')
-
-    this.transitioning = 1
-
-    if (this.transform) this.slideTransform(this.offset(), $.proxy(complete, this))
-    else this.slidePosition(0, $.proxy(complete, this))
+    setTimeout($.proxy(function() {
+      this.$element.addClass('in')
+      this.slide(elements, offset, $.proxy(complete, this))
+    }, this), 1)
   }
 
   OffCanvas.prototype.hide = function (fast) {
-    if (this.transitioning || !this.$canvas.hasClass('canvas-slid')) return
+    if (this.state !== 'slid') return
 
     var startEvent = $.Event('hide.bs.offcanvas')
     this.$element.trigger(startEvent)
     if (startEvent.isDefaultPrevented()) return
 
+    this.state = 'sliding'
+
+    var elements = $('.canvas-slid')
+    var offset = -1 * this.offset()
+
     var complete = function () {
-      this.transitioning = 0
+      this.state = null
 
-      this.$element
-        .removeClass('in')
-        .css('left', '').css('right', '').css('top', '').css('bottom', '')
-
-      this.$canvas
-        .removeClass('canvas-sliding canvas-slid')
-        .css('transform', '')
-
-      $('body').css('overflow-x', '')
+      this.$element.removeClass('in')
       
+      elements.removeClass('canvas-sliding')
+      elements.add('body').each(function() {
+        $(this).attr('style', $(this).data('offcanvas-style')).removeData('offcanvas-style')
+      })
+
       this.$element.trigger('hidden.bs.offcanvas')
     }
 
-    if (fast) return complete.call(this)
-
-    this.$canvas.removeClass('canvas-slid').addClass('canvas-sliding')
-
-    this.transitioning = 1
-
-    if (this.transform) this.slideTransform(0, $.proxy(complete, this))
-    else this.slidePosition(-1 * this.offset(), $.proxy(complete, this))
+    elements.removeClass('canvas-slid').addClass('canvas-sliding')
+    
+    setTimeout($.proxy(function() {
+      this.slide(elements, offset, $.proxy(complete, this))
+    }, this), 1)
   }
 
   OffCanvas.prototype.toggle = function () {
-    this[this.$canvas.hasClass('canvas-slid') ? 'hide' : 'show']()
+    if (this.state === 'sliding') return
+    this[this.state === 'slid' ? 'hide' : 'show']()
   }
 
   OffCanvas.prototype.calcClone = function() {
@@ -241,7 +227,17 @@
   }
 
   OffCanvas.prototype.recalc = function () {
-    if (this.$calcClone.css('display') !== 'none') this.hide(true)
+    if (this.state() !== 'slid' || this.$calcClone.css('display') === 'none') return
+    
+    var offset = -1 * this.offset()
+    
+    var placement = this.options.placement
+    this.getCanvasElements().each(function() {
+      $(this).css(placement, (parseInt($(this).css(placement), 10) || 0) + offset)
+    }).removeClass('canvas-slid')
+    
+    $('body').css('overflow', '')
+    this.$element.css(placement, '').removeClass('in canvas-slid')
   }
   
   OffCanvas.prototype.autohide = function (e) {

less/navmenu.less

@@ -1,5 +1,5 @@
 //
-// Navmenu
+// Navmenu and offcanvas navbar
 // --------------------------------------------------
 
 
@@ -8,7 +8,8 @@
 // Provide a static navmenu from which we expand to create the fixed navmenu
 // variations.
 
-.navmenu {
+.navmenu,
+.navbar-offcanvas {
   width: @navmenu-width;
   height: 100%;
   border-width: 1px;
@@ -17,13 +18,15 @@
 }
 
 .navmenu-fixed-left,
-.navmenu-fixed-right {
+.navmenu-fixed-right,
+.navbar-offcanvas {
   position: fixed;
   z-index: @zindex-navmenu-fixed;
   top: 0;
   border-radius: 0;
 }
-.navmenu-fixed-left {
+.navmenu-fixed-left,
+.navbar-offcanvas {
   left: 0;
   border-width: 0 1px 0 0;
 }
@@ -46,6 +49,38 @@
   }
 }
 
+.navbar-offcanvas {
+  .navbar-nav {
+    margin: 0;
+  }
+
+  @media (min-width: @grid-float-breakpoint) {
+    width: auto;
+    border-top: 0;
+    box-shadow: none;
+
+    &.offcanvas {
+      position: static;
+      display: block !important;
+      height: auto !important;
+      padding-bottom: 0; // Override default setting
+      overflow: visible !important;
+    }
+
+    // Account for first and last children spacing
+    .navbar-nav.navbar-left:first-child {
+      margin-left: -@navbar-padding-horizontal;
+    }
+    .navbar-nav.navbar-right:last-child {
+      margin-right: -@navbar-padding-horizontal;
+    }
+
+    .navmenu-brand {
+      display: none;
+    }
+  }
+}
+
 // Brand/project name
 
 .navmenu-brand {
@@ -64,7 +99,8 @@
 // --------------------------------------------------
 
 // Default navmenu
-.navmenu-default {
+.navmenu-default,
+.navbar-default .navbar-offcanvas {
   background-color: @navmenu-default-bg;
   border-color: @navmenu-default-border;
 
@@ -148,7 +184,8 @@
 }
 
 // Inverse navmenu
-.navmenu-inverse {
+.navmenu-inverse,
+.navbar-inverse .navbar-offcanvas {
   background-color: @navmenu-inverse-bg;
   border-color: @navmenu-inverse-border;
 

less/offcanvas.less

@@ -29,8 +29,8 @@
 }
 
 .canvas-sliding {
-  -webkit-transition: -webkit-transform 0.35s;
-          transition: transform 0.35s, -ms-transform 0.35s;
+  -webkit-transition: top 0.35s, left 0.35s, bottom 0.35s, right 0.35s;
+          transition: top 0.35s, left 0.35s, bottom 0.35s, right 0.35s;
 }
 
 .offcanvas-clone {