Your IP : 216.73.216.162
lebauwcentre/wp-content/themes/customify/assets/sass/site/header/_header_mobile_sidebar.scss 0000644 00000027311 15114245666 0031630 0 ustar 00 home/xbodynamge /* Header mobile sidebar */
$menu_sidebar_width: 360px;
$menu_sidebar_active_z_index: 999900;
$menu_sidebar_content_max_width: 48em;
$menu_sidebar_content_gutter: 1.5em;
$menu_sidebar_boxshadow: 0px 0px 10px 0px rgba(0,0,0,0.4);
/* - General */
.body-y-hidden {
overflow: hidden !important;
}
#page {
transition: transform .7s ease;
}
body {
&:before {
transition: all .5s linear;
position: fixed;
top: 0px;
right: 0px;
left: 0px;
bottom: 0px;
z-index: -1;
content: " ";
background: rgba( 0, 0, 0, .5 );
visibility: hidden;
opacity: 0;
}
&.menu_sidebar_dropdown {
&:before {
display: none;
}
}
}
.header-menu-sidebar {
padding: 0;
position: fixed;
width: 100%;
max-width: 100%;
top: 0;
z-index: $menu_sidebar_active_z_index;
visibility: hidden;
.builder-item-sidebar {
padding: 1.4em 1.5em;
border-bottom: 1px solid transparent;
&:last-of-type {
border-bottom: none;
}
&.mobile-item--primary-menu, &.mobile-item--secondary-menu, &.mobile-item--menu {
padding: 0px;
}
}
.nav-menu-mobile .nav-toggle-icon {
color: currentColor;
&:hover, &:focus {
background: rgba(0,0,0,0.01);
}
}
// Light mode
&.light-mode {
.sub-menu a,
.cart-item-link,
.item--html a,
.nav-menu a {
color: $dark_color_link;
&:hover {
color: $dark_color_link_hover;
}
}
.cart-icon {
color: $dark_color_link_hover;
}
//a:not(.customify-btn) {
// color: $dark_color;
// &:hover {
// color: $dark_color_link_hover;
// }
//}
.builder-item-sidebar {
border-color: $dark_color_border;
&:before {
background: $dark_color_border;
}
}
.header-menu-sidebar-bg {
&:before {
background: $light_bg;
}
}
.nav-menu-mobile .menu li a, .sub-menu, .nav-menu-mobile .nav-toggle-icon { border-color: $dark_color_border }
.nav-menu-mobile .nav-toggle-icon {
&:hover, &:focus {
background: rgba(0,0,0,0.01);
}
}
.menu {
li {
border-color: $dark_color_border;
}
}
}
// Dark mode
&.dark-mode {
.sub-menu a,
.cart-item-link,
.item--html a,
.nav-menu a, .nav-menu .nav-toggle-icon {
color: $light_color_link;
&:hover {
color: $light_color_link_hover;
}
}
.cart-icon {
color: $light_color_link_hover;
}
.builder-item-sidebar {
border-color: $light_color_border;
&:before {
background: $light_color_border;
}
}
.header-menu-sidebar-bg {
&:before {
background: $dark_bg;
}
}
.nav-menu-mobile .menu li a, .sub-menu, .nav-menu-mobile .nav-toggle-icon { border-color: $light_color_border }
.nav-menu-mobile .nav-toggle-icon {
&:hover, &:focus {
background: rgba(0,0,0,0.01);
}
}
.menu {
li {
border-color: $light_color_border;
}
}
}
}
.header-menu-sidebar-bg {
position: relative;
word-wrap: break-word;
min-height: 100%;
display: block;
&:before {
content: "";
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
display: block;
min-height: 100%;
}
}
.header-menu-sidebar-inner {
position: relative;
word-wrap: break-word;
min-height: 100%;
display: block;
padding: 1.2em 0;
}
/* Type : Overlay */
.menu_sidebar_slide_overlay {
.header-menu-sidebar {
box-shadow: none;
transition: all .5s linear;
z-index: 0;
opacity: 0;
top: 0px;
width: 100%;
right: 0px;
bottom: 0px;
}
.builder-item-sidebar {
text-align: center;
padding: 2em 1.5em;
border: none;
position: relative;
&:before {
content: "";
width: 8%;
height: 2px;
display: block;
background: $light_color_border;
position: absolute;
bottom: 0px;
left: 46%;
@include mq(max-md) {
width: 16%;
left: 42%;
}
}
&:last-child {
&:before {
content: none;
}
}
&[class*="-menu"] {
padding: 2.5em 1.5em;
}
}
// Menu style
.nav-menu-mobile {
.menu {
li {
a {
border: none;
font-size: 140%;
text-transform: uppercase;
font-weight: 500;
.nav-toggle-icon {
display: inline-block;
position: relative;
border: 0px none;
margin-right: -1.3em;
top: -2px;
padding: 0.28em 0.5em;
}
}
}
}
.sub-menu {
border: none;
li {
a {
text-transform: none;
padding: 0.35em 1.5em;
font-size: 100%;
}
}
}
}
.header-menu-sidebar-bg {
position: absolute;
top: 0px; left: 0px; width: 100%;
}
.header-menu-sidebar-inner {
max-width: $menu_sidebar_content_max_width;
margin: ( $menu_sidebar_content_gutter * 2) auto;
padding: 0;
}
.dark-mode {
.header-menu-sidebar-bg {
&:before {
background: $dark_bg;
}
}
}
.light-mode {
&.close-sidebar-panel {
.hamburger-inner {
background: $dark_color;
&:before, &::after {
background: inherit;
}
}
&:hover {
.hamburger-inner {
background: $dark_color_link_hover;
}
}
}
}
}
/* Type: Slide from left */
.menu_sidebar_slide_left {
.header-menu-sidebar {
box-shadow: $menu_sidebar_boxshadow;
width: $menu_sidebar_width;
left: 0;
transform: translate3d( - 100% ,0,0);
transition: transform .5s cubic-bezier(.79,.14,.15,.86);
@include mq( max-xs ) {
width: auto;
right: 45px;
}
}
}
/* Type: Slide from right */
.menu_sidebar_slide_right {
.header-menu-sidebar {
box-shadow: $menu_sidebar_boxshadow;
transition: transform .5s cubic-bezier(.79,.14,.15,.86);
transform: translate3d( 200%,0,0);
width: $menu_sidebar_width;
right: 0;
@include mq( max-xs ) {
width: auto;
left: 45px;
}
}
}
/* Type: Toggle dropdown */
.menu_sidebar_dropdown {
.header-menu-sidebar {
position: relative;
///transition: all .5s linear;
height: 0px;
display: block;
visibility: visible;
z-index: $menu_sidebar_active_z_index;
overflow: hidden;
}
.header-menu-sidebar-inner {
max-width: $menu_sidebar_content_max_width;
margin: 0 auto;
}
.header-menu-sidebar-bg {
&:before {
box-shadow: inset 0px 0px 12px 0px rgba(0,0,0,0.05);
}
}
}
/* Hiding Menu Sidebar animation. */
.hiding-header-menu-sidebar {
overflow-x: hidden;
position: relative;
width: 100%;
display: block;
&.menu_sidebar_slide_overlay {
.header-menu-sidebar {
z-index: 0;
opacity: 0;
height: 100%;
}
}
&.menu_sidebar_slide_left{
.header-menu-sidebar {
height: 100%;
transform: translateX(-100%);
transition: transform .5s cubic-bezier(.79, .14, .15, .86);
}
}
//left: 0;
.header-menu-sidebar {
visibility: visible;
}
&.menu_sidebar_slide_right {
.header-menu-sidebar {
transform: translateX(200%);
height: 100%;
}
}
}
/* Showing Menu Sidebar animation. */
.is-menu-sidebar, .is-mobile-form-panel {
//overflow: hidden;
overflow-x: hidden;
#wpadminbar {
// display: none;
}
#page {
// position: fixed;
// transform: scale3d(.9,.9,.9);
// box-shadow: 0 0 46px #000;
}
}
.is-menu-sidebar {
//overflow: hidden;
.header-menu-sidebar {
overflow: auto;
}
&.menu_sidebar_slide_overlay {
overflow: initial;
position: relative;
width: 100%;
display: block;
.header-menu-sidebar {
z-index: $menu_sidebar_active_z_index;
opacity: 1;
visibility: visible;
}
.menu-mobile-toggle {
opacity: 0;
}
}
&.menu_sidebar_slide_left {
overflow: initial;
position: relative;
width: 100%;
display: block;
.header-menu-sidebar {
z-index: $menu_sidebar_active_z_index;
height: 100vh;
transform: translate3d(0, 0, 0);
left: 0;
visibility: visible;
}
.menu-mobile-toggle {
opacity: 0;
}
}
&.menu_sidebar_slide_right {
overflow: initial;
position: relative;
width: 100%;
display: block;
.header-menu-sidebar {
z-index: $menu_sidebar_active_z_index;
height: 100vh;
max-width: 100vw;
transform: translate3d(0, 0, 0);
right: 0;
visibility: visible;
}
.menu-mobile-toggle {
opacity: 0;
}
}
&.menu_sidebar_dropdown {
//overflow: hidden;
.header-menu-sidebar {
z-index: 10;
//height: auto;
visibility: visible;
}
}
}
/* Close Button */
$close_size: 35px;
.close-sidebar-panel {
display: none;
z-index: $menu_sidebar_active_z_index + 10;
cursor: pointer;
position: fixed;
top: 10px;
right: 12px;
.hamburger-inner {
background: $light_color;
&:before, &::after {
background: inherit;
}
}
&:hover {
.hamburger-inner {
background: $light_color_link_hover;
}
}
}
.menu_sidebar_slide_right {
.close-sidebar-panel {
top: 10px;
right: auto;
left: 12px;
}
}
.menu_sidebar_dropdown {
.close-sidebar-panel {
display: none !important;
}
}
.is-menu-sidebar, .is-mobile-form-panel {
//transform-origin: 35px 50px 0;
//box-shadow: 0 0 46px #000;
&:before {
z-index: $menu_sidebar_active_z_index - 3;
visibility: visible;
opacity: 1;
}
.close-sidebar-panel {
display: inline-block;
}
}
/* - Item showing animation */
.header-menu-sidebar {
.item--inner {
transition: transform .3s, opacity .3s;
transform: translateY(45px);
opacity: 0;
//transition-delay: .2s;
}
}
.is-menu-sidebar, .is-mobile-form-panel {
.header-menu-sidebar {
.item--inner {
opacity: 1;
transform: translateY(0);
}
}
}
.mobile-item--search_box{
.search-form-fields{
width: 100%;
}
}