87 lines
1.8 KiB
SCSS
Vendored
87 lines
1.8 KiB
SCSS
Vendored
body.offcanvas-active{
|
|
overflow:hidden;
|
|
}
|
|
.horizontal-nav{
|
|
background: inherit;
|
|
.offcanvas-header{ display:none; pointer-events:none;}
|
|
}
|
|
|
|
.screen-darken{
|
|
height: 100%; width:0%;
|
|
z-index: 30;
|
|
position: fixed; top: 0; right: 0;
|
|
opacity:0; visibility:hidden;
|
|
background-color: rgba($dark, 0.6);
|
|
transition:opacity .2s linear, visibility 0.2s, width 2s ease-in;
|
|
}
|
|
|
|
.screen-darken.active{
|
|
z-index:10;
|
|
transition:opacity .3s ease, width 0s;
|
|
opacity:1;
|
|
width:100%;
|
|
visibility:visible;
|
|
}
|
|
|
|
/* ============ mobile view ============ */
|
|
@include media-breakpoint-down(xl) {
|
|
.iq-navbar {
|
|
.navbar-brand {
|
|
margin-left: 2rem;
|
|
}
|
|
}
|
|
.horizontal-nav{
|
|
.offcanvas-header{ opacity: 1;display: flex; justify-content: space-between; align-items: center;pointer-events:auto; }
|
|
}
|
|
|
|
.horizontal-nav{
|
|
&.mobile-offcanvas{
|
|
background: $white;
|
|
visibility: hidden;
|
|
transform:translateX(-100%);
|
|
border-radius:0;
|
|
display:block;
|
|
position: fixed; top: 0; left:0;
|
|
height: 100%; width:80%;
|
|
z-index: 1200;
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
transition: visibility .3s ease-in-out, transform .3s ease-in-out;
|
|
}
|
|
|
|
&.mobile-offcanvas.show{
|
|
visibility: visible; transform: translateX(0);
|
|
}
|
|
&.mobile-offcanvas .container, &.mobile-offcanvas .container-fluid{
|
|
display: block;
|
|
}
|
|
}
|
|
.iq-navbar {
|
|
.mobile-offcanvas{
|
|
&:not(.horizontal-nav) {
|
|
.navbar-brand {
|
|
align-items: center;
|
|
flex: 1;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@include media-breakpoint-down(lg) {
|
|
.iq-navbar {
|
|
.navbar-collapse{
|
|
&:not(.offcanvas-collapse) {
|
|
.navbar-nav{
|
|
flex-direction: row;
|
|
float: right;
|
|
align-items: center;
|
|
li {
|
|
padding:.5rem 1.5rem .0rem 0rem !important
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
} |