rename sidebar to mobile nav to avoid conflict
This commit is contained in:
captainill
parent
558c1773c4
commit
c903a064bb
|
|
@ -11,9 +11,9 @@
|
|||
|
||||
constructor: function(){
|
||||
this.$body = $('body');
|
||||
this.$overlay = $('.sidebar-overlay');
|
||||
this.$sidebar = $('#sidebar');
|
||||
this.$sidebarHeader = $('#sidebar .sidebar-header');
|
||||
this.$overlay = $('.mobile-nav-overlay');
|
||||
this.$sidebar = $('#mobile-nav');
|
||||
this.$sidebarHeader = $('#mobile-nav .mobile-nav-header');
|
||||
this.$toggleButton = $('.navbar-toggle');
|
||||
this.sidebarImg = this.$sidebarHeader.css('background-image');
|
||||
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
|
||||
_this.$toggleButton.on('click', function() {
|
||||
_this.$sidebar.toggleClass('open');
|
||||
if ((_this.$sidebar.hasClass('sidebar-fixed-left') || _this.$sidebar.hasClass('sidebar-fixed-right')) && _this.$sidebar.hasClass('open')) {
|
||||
if ((_this.$sidebar.hasClass('mobile-nav-fixed-left') || _this.$sidebar.hasClass('mobile-nav-fixed-right')) && _this.$sidebar.hasClass('open')) {
|
||||
_this.$overlay.addClass('active');
|
||||
_this.$body.css('overflow', 'hidden');
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
<!-- Overlay for fixed sidebar -->
|
||||
<div class="sidebar-overlay"></div>
|
||||
<!-- Overlay for fixed mobile-nav -->
|
||||
<div class="mobile-nav-overlay"></div>
|
||||
|
||||
<!-- Material sidebar -->
|
||||
<aside id="sidebar" class="sidebar sidebar-default sidebar-fixed-right" role="navigation">
|
||||
<!-- Sidebar header -->
|
||||
<div class="sidebar-header header-cover">
|
||||
<!-- Sidebar brand image -->
|
||||
<div class="sidebar-image">
|
||||
<a class="sidebar-logo" href="/">Vagrant</a>
|
||||
<!-- Material mobile-nav -->
|
||||
<aside id="mobile-nav" class="mobile-nav mobile-nav-default mobile-nav-fixed-right" role="navigation">
|
||||
<!-- mobile-nav header -->
|
||||
<div class="mobile-nav-header header-cover">
|
||||
<!-- mobile-nav brand image -->
|
||||
<div class="mobile-nav-image">
|
||||
<a class="mobile-nav-logo" href="/">Vagrant</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<ul class="main nav sidebar-nav">
|
||||
<!-- mobile-nav navigation -->
|
||||
<ul class="main nav mobile-nav-nav">
|
||||
<li class="pill"><a href="/vmware">VMware Integration</a></li>
|
||||
<li><a href="/downloads.html">Downloads</a></li>
|
||||
<li><a href="https://docs.vagrantup.com/">Documentation</a></li>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
background-color: @white;
|
||||
z-index: 9999999999;
|
||||
z-index: 1001;
|
||||
|
||||
&.docs {
|
||||
background: @gray-background;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
//
|
||||
// Hashicorp Sidebar
|
||||
// Hashicorp mobile-nav
|
||||
// - Shared throughout projects
|
||||
// - Edits should not be made here
|
||||
// --------------------------------------------------
|
||||
|
|
@ -22,22 +22,22 @@
|
|||
@link-disabled-color: @gray-light;
|
||||
@link-disabled-bg: transparent;
|
||||
|
||||
/* -- Sidebar style ------------------------------- */
|
||||
/* -- mobile-nav style ------------------------------- */
|
||||
|
||||
// Sidebar variables
|
||||
// mobile-nav variables
|
||||
// --------------------------------------------------
|
||||
@zindex-sidebar-fixed: 1035;
|
||||
@zindex-mobile-nav-fixed: 1035;
|
||||
|
||||
@sidebar-desktop-width: 280px;
|
||||
@sidebar-width: 240px;
|
||||
@mobile-nav-desktop-width: 280px;
|
||||
@mobile-nav-width: 240px;
|
||||
|
||||
@sidebar-padding: 16px;
|
||||
@sidebar-divider: @sidebar-padding/2;
|
||||
@mobile-nav-padding: 16px;
|
||||
@mobile-nav-divider: @mobile-nav-padding/2;
|
||||
|
||||
@sidebar-icon-width: 40px;
|
||||
@sidebar-icon-height: 20px;
|
||||
@mobile-nav-icon-width: 40px;
|
||||
@mobile-nav-icon-height: 20px;
|
||||
|
||||
.sidebar-nav-base {
|
||||
.mobile-nav-nav-base {
|
||||
text-align: center;
|
||||
|
||||
&:last-child{
|
||||
|
|
@ -105,13 +105,13 @@
|
|||
}
|
||||
|
||||
//
|
||||
// Sidebar
|
||||
// mobile-nav
|
||||
// --------------------------------------------------
|
||||
|
||||
// Sidebar Elements
|
||||
// mobile-nav Elements
|
||||
//
|
||||
// Basic style of sidebar elements
|
||||
.sidebar {
|
||||
// Basic style of mobile-nav elements
|
||||
.mobile-nav {
|
||||
position: relative;
|
||||
display: block;
|
||||
min-height: 100%;
|
||||
|
|
@ -127,22 +127,22 @@
|
|||
list-style-type: none;
|
||||
}
|
||||
|
||||
.sidebar-divider, .divider {
|
||||
.mobile-nav-divider, .divider {
|
||||
width: 80%;
|
||||
height: 1px;
|
||||
margin: 8px auto;
|
||||
background-color: lighten(@gray, 20%);
|
||||
}
|
||||
|
||||
// Sidebar heading
|
||||
// mobile-nav heading
|
||||
//----------------
|
||||
.sidebar-header {
|
||||
.mobile-nav-header {
|
||||
position: relative;
|
||||
margin-bottom: @sidebar-padding;
|
||||
margin-bottom: @mobile-nav-padding;
|
||||
.transition(all .2s ease-in-out);
|
||||
}
|
||||
|
||||
.sidebar-image {
|
||||
.mobile-nav-image {
|
||||
padding-top: 24px;
|
||||
img {
|
||||
display: block;
|
||||
|
|
@ -151,14 +151,14 @@
|
|||
}
|
||||
|
||||
|
||||
// Sidebar icons
|
||||
// mobile-nav icons
|
||||
//----------------
|
||||
.sidebar-icon {
|
||||
.mobile-nav-icon {
|
||||
display: inline-block;
|
||||
height: @sidebar-icon-height;
|
||||
margin-right: @sidebar-divider;
|
||||
height: @mobile-nav-icon-height;
|
||||
margin-right: @mobile-nav-divider;
|
||||
text-align: left;
|
||||
font-size: @sidebar-icon-height;
|
||||
font-size: @mobile-nav-icon-height;
|
||||
vertical-align: middle;
|
||||
|
||||
&:before, &:after {
|
||||
|
|
@ -166,11 +166,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
.mobile-nav-nav {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
.sidebar-nav-base();
|
||||
.mobile-nav-nav-base();
|
||||
|
||||
// Links
|
||||
//----------------
|
||||
|
|
@ -197,73 +197,73 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Sidebar toggling
|
||||
// mobile-nav toggling
|
||||
//
|
||||
// Hide sidebar
|
||||
.sidebar {
|
||||
// Hide mobile-nav
|
||||
.mobile-nav {
|
||||
width: 0;
|
||||
.translate3d(-@sidebar-desktop-width, 0, 0);
|
||||
.translate3d(-@mobile-nav-desktop-width, 0, 0);
|
||||
|
||||
&.open {
|
||||
min-width: @sidebar-desktop-width;
|
||||
width: @sidebar-desktop-width;
|
||||
min-width: @mobile-nav-desktop-width;
|
||||
width: @mobile-nav-desktop-width;
|
||||
.translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar positions: fix the left/right sidebars
|
||||
.sidebar-fixed-left,
|
||||
.sidebar-fixed-right,
|
||||
.sidebar-stacked {
|
||||
// mobile-nav positions: fix the left/right mobile-navs
|
||||
.mobile-nav-fixed-left,
|
||||
.mobile-nav-fixed-right,
|
||||
.mobile-nav-stacked {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: @zindex-sidebar-fixed;
|
||||
z-index: @zindex-mobile-nav-fixed;
|
||||
}
|
||||
.sidebar-stacked {
|
||||
.mobile-nav-stacked {
|
||||
left: 0;
|
||||
}
|
||||
.sidebar-fixed-left {
|
||||
.mobile-nav-fixed-left {
|
||||
left: 0;
|
||||
box-shadow: 2px 0px 25px rgba(0,0,0,0.15);
|
||||
-webkit-box-shadow: 2px 0px 25px rgba(0,0,0,0.15);
|
||||
}
|
||||
.sidebar-fixed-right {
|
||||
.mobile-nav-fixed-right {
|
||||
right: 0;
|
||||
box-shadow: 0px 2px 25px rgba(0,0,0,0.15);
|
||||
-webkit-box-shadow: 0px 2px 25px rgba(0,0,0,0.15);
|
||||
|
||||
.translate3d(@sidebar-desktop-width, 0, 0);
|
||||
.translate3d(@mobile-nav-desktop-width, 0, 0);
|
||||
&.open {
|
||||
.translate3d(0, 0, 0);
|
||||
}
|
||||
.icon-material-sidebar-arrow:before {
|
||||
.icon-material-mobile-nav-arrow:before {
|
||||
content: "\e614"; // icon-material-arrow-forward
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar size
|
||||
// mobile-nav size
|
||||
//
|
||||
// Change size of sidebar and sidebar elements on small screens
|
||||
// Change size of mobile-nav and mobile-nav elements on small screens
|
||||
@media (max-width: @screen-tablet) {
|
||||
.sidebar.open {
|
||||
min-width: @sidebar-width;
|
||||
width: @sidebar-width;
|
||||
.mobile-nav.open {
|
||||
min-width: @mobile-nav-width;
|
||||
width: @mobile-nav-width;
|
||||
}
|
||||
|
||||
.sidebar .sidebar-header {
|
||||
//height: @sidebar-width * 9/16; // 16:9 header dimension
|
||||
.mobile-nav .mobile-nav-header {
|
||||
//height: @mobile-nav-width * 9/16; // 16:9 header dimension
|
||||
}
|
||||
|
||||
.sidebar .sidebar-image {
|
||||
.mobile-nav .mobile-nav-image {
|
||||
/* img {
|
||||
width: @sidebar-width/4 - @sidebar-padding;
|
||||
height: @sidebar-width/4 - @sidebar-padding;
|
||||
width: @mobile-nav-width/4 - @mobile-nav-padding;
|
||||
height: @mobile-nav-width/4 - @mobile-nav-padding;
|
||||
} */
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-overlay {
|
||||
.mobile-nav-overlay {
|
||||
visibility: hidden;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -272,7 +272,7 @@
|
|||
bottom: 0;
|
||||
opacity: 0;
|
||||
background: @white;
|
||||
z-index: @zindex-sidebar-fixed - 1;
|
||||
z-index: @zindex-mobile-nav-fixed - 1;
|
||||
|
||||
-webkit-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
|
||||
-moz-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
|
||||
|
|
@ -284,7 +284,7 @@
|
|||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.sidebar-overlay.active {
|
||||
.mobile-nav-overlay.active {
|
||||
opacity: 0.3;
|
||||
visibility: visible;
|
||||
-webkit-transition-delay: 0;
|
||||
|
|
|
|||
Loading…
Reference in New Issue