From 4860073ec06ce766a4aab214a7e429a64f5cba50 Mon Sep 17 00:00:00 2001 From: Holger Koenemann Date: Fri, 19 Dec 2014 09:18:26 +0100 Subject: [PATCH] Adding jasny bootstrap off canvas nav --- css/jasny-bootstrap.css | 407 ++++++++++++++++++++++++++++++++++++ css/jasny-bootstrap.min.css | 7 + inc/enqueue.php | 2 + js/jasny-bootstrap.js | 369 ++++++++++++++++++++++++++++++++ js/jasny-bootstrap.min.js | 7 + 5 files changed, 792 insertions(+) create mode 100755 css/jasny-bootstrap.css create mode 100755 css/jasny-bootstrap.min.css create mode 100755 js/jasny-bootstrap.js create mode 100755 js/jasny-bootstrap.min.js diff --git a/css/jasny-bootstrap.css b/css/jasny-bootstrap.css new file mode 100755 index 0000000..ae3206c --- /dev/null +++ b/css/jasny-bootstrap.css @@ -0,0 +1,407 @@ +/*! + * Jasny Bootstrap v3.1.0 (http://jasny.github.com/bootstrap) + * Copyright 2011-2014 Arnold Daniels. + * Licensed under Apache-2.0 (https://github.com/jasny/bootstrap/blob/master/LICENSE) + */ + +.nav-tabs-bottom { + border-bottom: 0; + border-top: 1px solid #dddddd; +} +.nav-tabs-bottom > li { + margin-bottom: 0; + margin-top: -1px; +} +.nav-tabs-bottom > li > a { + border-radius: 0 0 4px 4px; +} +.nav-tabs-bottom > li > a:hover, +.nav-tabs-bottom > li > a:focus, +.nav-tabs-bottom > li.active > a, +.nav-tabs-bottom > li.active > a:hover, +.nav-tabs-bottom > li.active > a:focus { + border: 1px solid #dddddd; + border-top-color: transparent; +} +.nav-tabs-left { + border-bottom: 0; + border-right: 1px solid #dddddd; +} +.nav-tabs-left > li { + margin-bottom: 0; + margin-right: -1px; + float: none; +} +.nav-tabs-left > li > a { + border-radius: 4px 0 0 4px; + margin-right: 0; + margin-bottom: 2px; +} +.nav-tabs-left > li > a:hover, +.nav-tabs-left > li > a:focus, +.nav-tabs-left > li.active > a, +.nav-tabs-left > li.active > a:hover, +.nav-tabs-left > li.active > a:focus { + border: 1px solid #dddddd; + border-right-color: transparent; +} +.row > .nav-tabs-left { + padding-right: 0; + padding-left: 15px; + margin-right: -1px; + position: relative; + z-index: 1; +} +.row > .nav-tabs-left + .tab-content { + border-left: 1px solid #dddddd; +} +.nav-tabs-right { + border-bottom: 0; + border-left: 1px solid #dddddd; +} +.nav-tabs-right > li { + margin-bottom: 0; + margin-left: -1px; + float: none; +} +.nav-tabs-right > li > a { + border-radius: 0 4px 4px 0; + margin-left: 0; + margin-bottom: 2px; +} +.nav-tabs-right > li > a:hover, +.nav-tabs-right > li > a:focus, +.nav-tabs-right > li.active > a, +.nav-tabs-right > li.active > a:hover, +.nav-tabs-right > li.active > a:focus { + border: 1px solid #dddddd; + border-left-color: transparent; +} +.row > .nav-tabs-right { + padding-left: 0; + padding-right: 15px; +} +.navmenu, +.navbar-offcanvas { + width: 300px; + height: auto; + border-width: 1px; + border-style: solid; + border-radius: 4px; +} +.navmenu-fixed-left, +.navmenu-fixed-right, +.navbar-offcanvas { + position: fixed; + z-index: 1030; + top: 0; + bottom: 0; + overflow-y: auto; + border-radius: 0; +} +.navmenu-fixed-left, +.navbar-offcanvas.navmenu-fixed-left { + left: 0; + right: auto; + border-width: 0 1px 0 0; +} +.navmenu-fixed-right, +.navbar-offcanvas { + left: auto; + right: 0; + border-width: 0 0 0 1px; +} +.navmenu-nav { + margin-bottom: 10px; +} +.navmenu-nav.dropdown-menu { + position: static; + margin: 0; + padding-top: 0; + float: none; + border: none; + -webkit-box-shadow: none; + box-shadow: none; + border-radius: 0; +} +.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; + font-size: 18px; + line-height: 20px; + padding: 10px 15px; + margin: 10px 0; +} +.navmenu-brand:hover, +.navmenu-brand:focus { + text-decoration: none; +} +.navmenu-default, +.navbar-default .navbar-offcanvas { + background-color: #f8f8f8; + border-color: #e7e7e7; +} +.navmenu-default .navmenu-brand, +.navbar-default .navbar-offcanvas .navmenu-brand { + color: #777777; +} +.navmenu-default .navmenu-brand:hover, +.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, +.navbar-default .navbar-offcanvas .navmenu-text { + color: #777777; +} +.navmenu-default .navmenu-nav > .dropdown > a:hover .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, +.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 { + background-color: #e7e7e7; + color: #555555; +} +.navmenu-default .navmenu-nav > .open > a .caret, +.navbar-default .navbar-offcanvas .navmenu-nav > .open > a .caret, +.navmenu-default .navmenu-nav > .open > a:hover .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, +.navbar-default .navbar-offcanvas .navmenu-nav > .dropdown > a .caret { + border-top-color: #777777; + border-bottom-color: #777777; +} +.navmenu-default .navmenu-nav.dropdown-menu, +.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu { + background-color: #e7e7e7; +} +.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, +.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, +.navbar-default .navbar-offcanvas .navmenu-nav > li > a { + color: #777777; +} +.navmenu-default .navmenu-nav > li > a:hover, +.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, +.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, +.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, +.navbar-inverse .navbar-offcanvas { + background-color: #222222; + border-color: #080808; +} +.navmenu-inverse .navmenu-brand, +.navbar-inverse .navbar-offcanvas .navmenu-brand { + color: #999999; +} +.navmenu-inverse .navmenu-brand:hover, +.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, +.navbar-inverse .navbar-offcanvas .navmenu-text { + color: #999999; +} +.navmenu-inverse .navmenu-nav > .dropdown > a:hover .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, +.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 { + background-color: #080808; + color: #ffffff; +} +.navmenu-inverse .navmenu-nav > .open > a .caret, +.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a .caret, +.navmenu-inverse .navmenu-nav > .open > a:hover .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, +.navbar-inverse .navbar-offcanvas .navmenu-nav > .dropdown > a .caret { + border-top-color: #999999; + border-bottom-color: #999999; +} +.navmenu-inverse .navmenu-nav.dropdown-menu, +.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu { + background-color: #080808; +} +.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, +.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, +.navbar-inverse .navbar-offcanvas .navmenu-nav > li > a { + color: #999999; +} +.navmenu-inverse .navmenu-nav > li > a:hover, +.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, +.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, +.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; +} +.offcanvas { + display: none; +} +.offcanvas.in { + display: block; +} +@media (max-width: 767px) { + .offcanvas-xs { + display: none; + } + .offcanvas-xs.in { + display: block; + } +} +@media (max-width: 991px) { + .offcanvas-sm { + display: none; + } + .offcanvas-sm.in { + display: block; + } +} +@media (max-width: 1199px) { + .offcanvas-md { + display: none; + } + .offcanvas-md.in { + display: block; + } +} +.offcanvas-lg { + display: none; +} +.offcanvas-lg.in { + display: block; +} +.canvas-sliding { + -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 { + height: 0px !important; + width: 0px !important; + overflow: hidden !important; + border: none !important; + margin: 0px !important; + padding: 0px !important; + position: absolute !important; + top: auto !important; + left: auto !important; + bottom: 0px !important; + right: 0px !important; + opacity: 0 !important; +} diff --git a/css/jasny-bootstrap.min.css b/css/jasny-bootstrap.min.css new file mode 100755 index 0000000..2557cc4 --- /dev/null +++ b/css/jasny-bootstrap.min.css @@ -0,0 +1,7 @@ +/*! + * Jasny Bootstrap v3.1.0 (http://jasny.github.com/bootstrap) + * Copyright 2011-2014 Arnold Daniels. + * Licensed under Apache-2.0 (https://github.com/jasny/bootstrap/blob/master/LICENSE) + */ + +.nav-tabs-bottom{border-bottom:0;border-top:1px solid #ddd}.nav-tabs-bottom>li{margin-bottom:0;margin-top:-1px}.nav-tabs-bottom>li>a{border-radius:0 0 4px 4px}.nav-tabs-bottom>li>a:hover,.nav-tabs-bottom>li>a:focus,.nav-tabs-bottom>li.active>a,.nav-tabs-bottom>li.active>a:hover,.nav-tabs-bottom>li.active>a:focus{border:1px solid #ddd;border-top-color:transparent}.nav-tabs-left{border-bottom:0;border-right:1px solid #ddd}.nav-tabs-left>li{margin-bottom:0;margin-right:-1px;float:none}.nav-tabs-left>li>a{border-radius:4px 0 0 4px;margin-right:0;margin-bottom:2px}.nav-tabs-left>li>a:hover,.nav-tabs-left>li>a:focus,.nav-tabs-left>li.active>a,.nav-tabs-left>li.active>a:hover,.nav-tabs-left>li.active>a:focus{border:1px solid #ddd;border-right-color:transparent}.row>.nav-tabs-left{padding-right:0;padding-left:15px;margin-right:-1px;position:relative;z-index:1}.row>.nav-tabs-left+.tab-content{border-left:1px solid #ddd}.nav-tabs-right{border-bottom:0;border-left:1px solid #ddd}.nav-tabs-right>li{margin-bottom:0;margin-left:-1px;float:none}.nav-tabs-right>li>a{border-radius:0 4px 4px 0;margin-left:0;margin-bottom:2px}.nav-tabs-right>li>a:hover,.nav-tabs-right>li>a:focus,.nav-tabs-right>li.active>a,.nav-tabs-right>li.active>a:hover,.nav-tabs-right>li.active>a:focus{border:1px solid #ddd;border-left-color:transparent}.row>.nav-tabs-right{padding-left:0;padding-right:15px}.navmenu,.navbar-offcanvas{width:300px;height:auto;border-width:1px;border-style:solid;border-radius:4px}.navmenu-fixed-left,.navmenu-fixed-right,.navbar-offcanvas{position:fixed;z-index:1030;top:0;bottom:0;overflow-y:auto;border-radius:0}.navmenu-fixed-left,.navbar-offcanvas.navmenu-fixed-left{left:0;right:auto;border-width:0 1px 0 0}.navmenu-fixed-right,.navbar-offcanvas{left:auto;right:0;border-width:0 0 0 1px}.navmenu-nav{margin-bottom:10px}.navmenu-nav.dropdown-menu{position:static;margin:0;padding-top:0;float:none;border:none;-webkit-box-shadow:none;box-shadow:none;border-radius:0}.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;font-size:18px;line-height:20px;padding:10px 15px;margin:10px 0}.navmenu-brand:hover,.navmenu-brand:focus{text-decoration:none}.navmenu-default,.navbar-default .navbar-offcanvas{background-color:#f8f8f8;border-color:#e7e7e7}.navmenu-default .navmenu-brand,.navbar-default .navbar-offcanvas .navmenu-brand{color:#777}.navmenu-default .navmenu-brand:hover,.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,.navbar-default .navbar-offcanvas .navmenu-text{color:#777}.navmenu-default .navmenu-nav>.dropdown>a:hover .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:#333;border-bottom-color:#333}.navmenu-default .navmenu-nav>.open>a,.navbar-default .navbar-offcanvas .navmenu-nav>.open>a,.navmenu-default .navmenu-nav>.open>a:hover,.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{background-color:#e7e7e7;color:#555}.navmenu-default .navmenu-nav>.open>a .caret,.navbar-default .navbar-offcanvas .navmenu-nav>.open>a .caret,.navmenu-default .navmenu-nav>.open>a:hover .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:#555;border-bottom-color:#555}.navmenu-default .navmenu-nav>.dropdown>a .caret,.navbar-default .navbar-offcanvas .navmenu-nav>.dropdown>a .caret{border-top-color:#777;border-bottom-color:#777}.navmenu-default .navmenu-nav.dropdown-menu,.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu{background-color:#e7e7e7}.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,.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,.navbar-default .navbar-offcanvas .navmenu-nav>li>a{color:#777}.navmenu-default .navmenu-nav>li>a:hover,.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:#333;background-color:transparent}.navmenu-default .navmenu-nav>.active>a,.navbar-default .navbar-offcanvas .navmenu-nav>.active>a,.navmenu-default .navmenu-nav>.active>a:hover,.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:#555;background-color:#e7e7e7}.navmenu-default .navmenu-nav>.disabled>a,.navbar-default .navbar-offcanvas .navmenu-nav>.disabled>a,.navmenu-default .navmenu-nav>.disabled>a:hover,.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:#ccc;background-color:transparent}.navmenu-inverse,.navbar-inverse .navbar-offcanvas{background-color:#222;border-color:#080808}.navmenu-inverse .navmenu-brand,.navbar-inverse .navbar-offcanvas .navmenu-brand{color:#999}.navmenu-inverse .navmenu-brand:hover,.navbar-inverse .navbar-offcanvas .navmenu-brand:hover,.navmenu-inverse .navmenu-brand:focus,.navbar-inverse .navbar-offcanvas .navmenu-brand:focus{color:#fff;background-color:transparent}.navmenu-inverse .navmenu-text,.navbar-inverse .navbar-offcanvas .navmenu-text{color:#999}.navmenu-inverse .navmenu-nav>.dropdown>a:hover .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:#fff;border-bottom-color:#fff}.navmenu-inverse .navmenu-nav>.open>a,.navbar-inverse .navbar-offcanvas .navmenu-nav>.open>a,.navmenu-inverse .navmenu-nav>.open>a:hover,.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{background-color:#080808;color:#fff}.navmenu-inverse .navmenu-nav>.open>a .caret,.navbar-inverse .navbar-offcanvas .navmenu-nav>.open>a .caret,.navmenu-inverse .navmenu-nav>.open>a:hover .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:#fff;border-bottom-color:#fff}.navmenu-inverse .navmenu-nav>.dropdown>a .caret,.navbar-inverse .navbar-offcanvas .navmenu-nav>.dropdown>a .caret{border-top-color:#999;border-bottom-color:#999}.navmenu-inverse .navmenu-nav.dropdown-menu,.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu{background-color:#080808}.navmenu-inverse .navmenu-nav.dropdown-menu>.divider,.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu>.divider{background-color:#222}.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,.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:#000}.navmenu-inverse .navmenu-nav>li>a,.navbar-inverse .navbar-offcanvas .navmenu-nav>li>a{color:#999}.navmenu-inverse .navmenu-nav>li>a:hover,.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:#fff;background-color:transparent}.navmenu-inverse .navmenu-nav>.active>a,.navbar-inverse .navbar-offcanvas .navmenu-nav>.active>a,.navmenu-inverse .navmenu-nav>.active>a:hover,.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:#fff;background-color:#080808}.navmenu-inverse .navmenu-nav>.disabled>a,.navbar-inverse .navbar-offcanvas .navmenu-nav>.disabled>a,.navmenu-inverse .navmenu-nav>.disabled>a:hover,.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:#444;background-color:transparent}.offcanvas{display:none}.offcanvas.in{display:block}@media (max-width:767px){.offcanvas-xs{display:none}.offcanvas-xs.in{display:block}}@media (max-width:991px){.offcanvas-sm{display:none}.offcanvas-sm.in{display:block}}@media (max-width:1199px){.offcanvas-md{display:none}.offcanvas-md.in{display:block}}.offcanvas-lg{display:none}.offcanvas-lg.in{display:block}.canvas-sliding{-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{height:0px !important;width:0px !important;overflow:hidden !important;border:none !important;margin:0px !important;padding:0px !important;position:absolute !important;top:auto !important;left:auto !important;bottom:0px !important;right:0px !important;opacity:0 !important} \ No newline at end of file diff --git a/inc/enqueue.php b/inc/enqueue.php index e49be06..d12b81b 100644 --- a/inc/enqueue.php +++ b/inc/enqueue.php @@ -3,9 +3,11 @@ function understrap_scripts() { wp_enqueue_style( 'understrap-theme', get_stylesheet_directory_uri() . '/css/theme.css', array(), '0.1', false ); wp_enqueue_style( 'understrap-carousel-style', get_stylesheet_directory_uri() . '/css/owl.carousel.css', array(), '20024', false ); + wp_enqueue_style( 'understrap-off-canvas-style', get_stylesheet_directory_uri() . '/css/jasny-bootstrap.min.css', array(), '310', false ); wp_enqueue_script('jquery'); wp_enqueue_script( 'understrap-navigation', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '20120206', true ); wp_enqueue_script( 'understrap-carousel-script', get_template_directory_uri() . '/js/owl.carousel.min.js', array(), '20024', true ); + wp_enqueue_script( 'understrap-off-canvas-script', get_template_directory_uri() . '/js/jasny-bootstrap.min.js', array(), '310', true ); wp_enqueue_script( 'understrap-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true ); if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' ); diff --git a/js/jasny-bootstrap.js b/js/jasny-bootstrap.js new file mode 100755 index 0000000..29c5cf5 --- /dev/null +++ b/js/jasny-bootstrap.js @@ -0,0 +1,369 @@ +/* ======================================================================== + * Bootstrap: offcanvas.js v3.1.3 + * http://jasny.github.io/bootstrap/javascript/#offcanvas + * ======================================================================== + * Copyright 2013-2014 Arnold Daniels + * + * Licensed under the Apache License, Version 2.0 (the "License") + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ======================================================================== */ + ++function ($) { "use strict"; + + // OFFCANVAS PUBLIC CLASS DEFINITION + // ================================= + + var OffCanvas = function (element, options) { + this.$element = $(element) + this.options = $.extend({}, OffCanvas.DEFAULTS, options) + this.state = null + this.placement = null + + if (this.options.recalc) { + this.calcClone() + $(window).on('resize', $.proxy(this.recalc, this)) + } + + if (this.options.autohide) + $(document).on('click', $.proxy(this.autohide, this)) + + if (this.options.toggle) this.toggle() + + if (this.options.disablescrolling) { + this.options.disableScrolling = this.options.disablescrolling + delete this.options.disablescrolling + } + } + + OffCanvas.DEFAULTS = { + toggle: true, + placement: 'auto', + autohide: true, + recalc: true, + disableScrolling: true + } + + OffCanvas.prototype.offset = function () { + switch (this.placement) { + case 'left': + case 'right': return this.$element.outerWidth() + case 'top': + case 'bottom': return this.$element.outerHeight() + } + } + + OffCanvas.prototype.calcPlacement = function () { + if (this.options.placement !== 'auto') { + this.placement = this.options.placement + return + } + + if (!this.$element.hasClass('in')) { + this.$element.css('visiblity', 'hidden !important').addClass('in') + } + + var horizontal = $(window).width() / this.$element.width() + var vertical = $(window).height() / this.$element.height() + + 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) + var size_b = parseInt(element.css(b), 10) + + return size_a > size_b ? b : a + } + + this.placement = horizontal >= vertical ? ab('left', 'right') : ab('top', 'bottom') + + if (this.$element.css('visibility') === 'hidden !important') { + this.$element.removeClass('in').css('visiblity', '') + } + } + + 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.placement] = "+=" + offset + return elements.animate(anim, 350, callback) + } + + var placement = this.placement + var 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.disableScrolling = function() { + var bodyWidth = $('body').width() + var prop = 'padding-' + this.opposite(this.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 + + this.state = 'slide-in' + this.calcPlacement(); + + var elements = this.getCanvasElements() + var placement = this.placement + var opposite = this.opposite(placement) + var offset = this.offset() + + if (elements.index(this.$element) !== -1) { + $(this.$element).data('offcanvas-style', $(this.$element).attr('style') || '') + this.$element.css(placement, -1 * offset) + this.$element.css(placement); // Workaround: Need to get the CSS property for it to be applied before the next line of code + } + + elements.addClass('canvas-sliding').each(function() { + if ($(this).data('offcanvas-style') === undefined) $(this).data('offcanvas-style', $(this).attr('style') || '') + if ($(this).css('position') === 'static') $(this).css('position', 'relative') + if (($(this).css(placement) === 'auto' || $(this).css(placement) === '0px') && + ($(this).css(opposite) === 'auto' || $(this).css(opposite) === '0px')) { + $(this).css(placement, 0) + } + }) + + if (this.options.disableScrolling) this.disableScrolling() + + var complete = function () { + if (this.state != 'slide-in') return + + this.state = 'slid' + + elements.removeClass('canvas-sliding').addClass('canvas-slid') + this.$element.trigger('shown.bs.offcanvas') + } + + setTimeout($.proxy(function() { + this.$element.addClass('in') + this.slide(elements, offset, $.proxy(complete, this)) + }, this), 1) + } + + OffCanvas.prototype.hide = function (fast) { + if (this.state !== 'slid') return + + var startEvent = $.Event('hide.bs.offcanvas') + this.$element.trigger(startEvent) + if (startEvent.isDefaultPrevented()) return + + this.state = 'slide-out' + + var elements = $('.canvas-slid') + var placement = this.placement + var offset = -1 * this.offset() + + var complete = function () { + if (this.state != 'slide-out') return + + this.state = null + this.placement = null + + this.$element.removeClass('in') + + elements.removeClass('canvas-sliding') + elements.add(this.$element).add('body').each(function() { + $(this).attr('style', $(this).data('offcanvas-style')).removeData('offcanvas-style') + }) + + this.$element.trigger('hidden.bs.offcanvas') + } + + elements.removeClass('canvas-slid').addClass('canvas-sliding') + + setTimeout($.proxy(function() { + this.slide(elements, offset, $.proxy(complete, this)) + }, this), 1) + } + + OffCanvas.prototype.toggle = function () { + if (this.state === 'slide-in' || this.state === 'slide-out') return + this[this.state === 'slid' ? 'hide' : 'show']() + } + + OffCanvas.prototype.calcClone = function() { + this.$calcClone = this.$element.clone() + .html('') + .addClass('offcanvas-clone').removeClass('in') + .appendTo($('body')) + } + + OffCanvas.prototype.recalc = function () { + if (this.$calcClone.css('display') === 'none' || (this.state !== 'slid' && this.state !== 'slide-in')) return + + this.state = null + this.placement = null + var elements = this.getCanvasElements() + + this.$element.removeClass('in') + + elements.removeClass('canvas-slid') + elements.add(this.$element).add('body').each(function() { + $(this).attr('style', $(this).data('offcanvas-style')).removeData('offcanvas-style') + }) + } + + OffCanvas.prototype.autohide = function (e) { + if ($(e.target).closest(this.$element).length === 0) this.hide() + } + + // OFFCANVAS PLUGIN DEFINITION + // ========================== + + var old = $.fn.offcanvas + + $.fn.offcanvas = function (option) { + return this.each(function () { + var $this = $(this) + var data = $this.data('bs.offcanvas') + var options = $.extend({}, OffCanvas.DEFAULTS, $this.data(), typeof option === 'object' && option) + + if (!data) $this.data('bs.offcanvas', (data = new OffCanvas(this, options))) + if (typeof option === 'string') data[option]() + }) + } + + $.fn.offcanvas.Constructor = OffCanvas + + + // OFFCANVAS NO CONFLICT + // ==================== + + $.fn.offcanvas.noConflict = function () { + $.fn.offcanvas = old + return this + } + + + // OFFCANVAS DATA-API + // ================= + + $(document).on('click.bs.offcanvas.data-api', '[data-toggle=offcanvas]', function (e) { + var $this = $(this), href + var target = $this.attr('data-target') + || e.preventDefault() + || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7 + var $canvas = $(target) + var data = $canvas.data('bs.offcanvas') + var option = data ? 'toggle' : $this.data() + + e.stopPropagation() + + if (data) data.toggle() + else $canvas.offcanvas(option) + }) + +}(window.jQuery); + +/* ======================================================================== + * Bootstrap: transition.js v3.1.3 + * http://getbootstrap.com/javascript/#transitions + * ======================================================================== + * Copyright 2011-2014 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + * ======================================================================== */ + + ++function ($) { + 'use strict'; + + // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/) + // ============================================================ + + function transitionEnd() { + var el = document.createElement('bootstrap') + + var transEndEventNames = { + WebkitTransition : 'webkitTransitionEnd', + MozTransition : 'transitionend', + OTransition : 'oTransitionEnd otransitionend', + transition : 'transitionend' + } + + for (var name in transEndEventNames) { + if (el.style[name] !== undefined) { + return { end: transEndEventNames[name] } + } + } + + return false // explicit for ie8 ( ._.) + } + + if ($.support.transition !== undefined) return // Prevent conflict with Twitter Bootstrap + + // http://blog.alexmaccaw.com/css-transitions + $.fn.emulateTransitionEnd = function (duration) { + var called = false, $el = this + $(this).one($.support.transition.end, function () { called = true }) + var callback = function () { if (!called) $($el).trigger($.support.transition.end) } + setTimeout(callback, duration) + return this + } + + $(function () { + $.support.transition = transitionEnd() + }) + +}(window.jQuery); diff --git a/js/jasny-bootstrap.min.js b/js/jasny-bootstrap.min.js new file mode 100755 index 0000000..198093e --- /dev/null +++ b/js/jasny-bootstrap.min.js @@ -0,0 +1,7 @@ +/*! + * Jasny Bootstrap v3.1.0 (http://jasny.github.com/bootstrap) + * Copyright 2011-2014 Arnold Daniels. + * Licensed under Apache-2.0 (https://github.com/jasny/bootstrap/blob/master/LICENSE) + */ + ++function(a){"use strict";var b=function(c,d){this.$element=a(c),this.options=a.extend({},b.DEFAULTS,d),this.state=null,this.placement=null,this.options.recalc&&(this.calcClone(),a(window).on("resize",a.proxy(this.recalc,this))),this.options.autohide&&a(document).on("click",a.proxy(this.autohide,this)),this.options.toggle&&this.toggle(),this.options.disablescrolling&&(this.options.disableScrolling=this.options.disablescrolling,delete this.options.disablescrolling)};b.DEFAULTS={toggle:!0,placement:"auto",autohide:!0,recalc:!0,disableScrolling:!0},b.prototype.offset=function(){switch(this.placement){case"left":case"right":return this.$element.outerWidth();case"top":case"bottom":return this.$element.outerHeight()}},b.prototype.calcPlacement=function(){function e(a,b){if(d.css(b)==="auto")return a;if(d.css(a)==="auto")return b;var c=parseInt(d.css(a),10),e=parseInt(d.css(b),10);return c>e?b:a}if(this.options.placement!=="auto"){this.placement=this.options.placement;return}this.$element.hasClass("in")||this.$element.css("visiblity","hidden !important").addClass("in");var b=a(window).width()/this.$element.width(),c=a(window).height()/this.$element.height(),d=this.$element;this.placement=b>=c?e("left","right"):e("top","bottom"),this.$element.css("visibility")==="hidden !important"&&this.$element.removeClass("in").css("visiblity","")},b.prototype.opposite=function(a){switch(a){case"top":return"bottom";case"left":return"right";case"bottom":return"top";case"right":return"left"}},b.prototype.getCanvasElements=function(){var b=this.options.canvas?a(this.options.canvas):this.$element,c=b.find("*").filter(function(){return a(this).css("position")==="fixed"}).not(this.options.exclude);return b.add(c)},b.prototype.slide=function(b,c,d){if(!a.support.transition){var e={};return e[this.placement]="+="+c,b.animate(e,350,d)}var f=this.placement,g=this.opposite(f);b.each(function(){a(this).css(f)!=="auto"&&a(this).css(f,(parseInt(a(this).css(f),10)||0)+c),a(this).css(g)!=="auto"&&a(this).css(g,(parseInt(a(this).css(g),10)||0)-c)}),this.$element.one(a.support.transition.end,d).emulateTransitionEnd(350)},b.prototype.disableScrolling=function(){var b=a("body").width(),c="padding-"+this.opposite(this.placement);a("body").data("offcanvas-style")===undefined&&a("body").data("offcanvas-style",a("body").attr("style")||""),a("body").css("overflow","hidden");if(a("body").width()>b){var d=parseInt(a("body").css(c),10)+a("body").width()-b;setTimeout(function(){a("body").css(c,d)},1)}},b.prototype.show=function(){if(this.state)return;var b=a.Event("show.bs.offcanvas");this.$element.trigger(b);if(b.isDefaultPrevented())return;this.state="slide-in",this.calcPlacement();var c=this.getCanvasElements(),d=this.placement,e=this.opposite(d),f=this.offset();c.index(this.$element)!==-1&&(a(this.$element).data("offcanvas-style",a(this.$element).attr("style")||""),this.$element.css(d,-1*f),this.$element.css(d)),c.addClass("canvas-sliding").each(function(){a(this).data("offcanvas-style")===undefined&&a(this).data("offcanvas-style",a(this).attr("style")||""),a(this).css("position")==="static"&&a(this).css("position","relative"),(a(this).css(d)==="auto"||a(this).css(d)==="0px")&&(a(this).css(e)==="auto"||a(this).css(e)==="0px")&&a(this).css(d,0)}),this.options.disableScrolling&&this.disableScrolling();var g=function(){if(this.state!="slide-in")return;this.state="slid",c.removeClass("canvas-sliding").addClass("canvas-slid"),this.$element.trigger("shown.bs.offcanvas")};setTimeout(a.proxy(function(){this.$element.addClass("in"),this.slide(c,f,a.proxy(g,this))},this),1)},b.prototype.hide=function(b){if(this.state!=="slid")return;var c=a.Event("hide.bs.offcanvas");this.$element.trigger(c);if(c.isDefaultPrevented())return;this.state="slide-out";var d=a(".canvas-slid"),e=this.placement,f=-1*this.offset(),g=function(){if(this.state!="slide-out")return;this.state=null,this.placement=null,this.$element.removeClass("in"),d.removeClass("canvas-sliding"),d.add(this.$element).add("body").each(function(){a(this).attr("style",a(this).data("offcanvas-style")).removeData("offcanvas-style")}),this.$element.trigger("hidden.bs.offcanvas")};d.removeClass("canvas-slid").addClass("canvas-sliding"),setTimeout(a.proxy(function(){this.slide(d,f,a.proxy(g,this))},this),1)},b.prototype.toggle=function(){if(this.state==="slide-in"||this.state==="slide-out")return;this[this.state==="slid"?"hide":"show"]()},b.prototype.calcClone=function(){this.$calcClone=this.$element.clone().html("").addClass("offcanvas-clone").removeClass("in").appendTo(a("body"))},b.prototype.recalc=function(){if(this.$calcClone.css("display")==="none"||this.state!=="slid"&&this.state!=="slide-in")return;this.state=null,this.placement=null;var b=this.getCanvasElements();this.$element.removeClass("in"),b.removeClass("canvas-slid"),b.add(this.$element).add("body").each(function(){a(this).attr("style",a(this).data("offcanvas-style")).removeData("offcanvas-style")})},b.prototype.autohide=function(b){a(b.target).closest(this.$element).length===0&&this.hide()};var c=a.fn.offcanvas;a.fn.offcanvas=function(c){return this.each(function(){var d=a(this),e=d.data("bs.offcanvas"),f=a.extend({},b.DEFAULTS,d.data(),typeof c=="object"&&c);e||d.data("bs.offcanvas",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.offcanvas.Constructor=b,a.fn.offcanvas.noConflict=function(){return a.fn.offcanvas=c,this},a(document).on("click.bs.offcanvas.data-api","[data-toggle=offcanvas]",function(b){var c=a(this),d,e=c.attr("data-target")||b.preventDefault()||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,""),f=a(e),g=f.data("bs.offcanvas"),h=g?"toggle":c.data();b.stopPropagation(),g?g.toggle():f.offcanvas(h)})}(window.jQuery),+function(a){function b(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var c in b)if(a.style[c]!==undefined)return{end:b[c]};return!1}"use strict";if(a.support.transition!==undefined)return;a.fn.emulateTransitionEnd=function(b){var c=!1,d=this;a(this).one(a.support.transition.end,function(){c=!0});var e=function(){c||a(d).trigger(a.support.transition.end)};return setTimeout(e,b),this},a(function(){a.support.transition=b()})}(window.jQuery) \ No newline at end of file