Файловый менеджер - Редактировать - /home2/cocinasdalloway/public_html/tienda/wp-content/themes/negan/assets/scss/site/header/_header-mobile.scss
Назад
.dl-menuwrapper { width: 100%; float: left; position: relative; -webkit-perspective: 1000px; perspective: 1000px; -webkit-perspective-origin: 50% 200%; perspective-origin: 50% 200%; z-index: 9; ul { padding: 0; list-style: none; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .dl-subview{ li.dl-subviewopen, li.dl-subviewopen, li.dl-subview, .dl-submenu{ border: none; } } li { position: relative; &:first-child{ border-top: none; } a { display: block; position: relative; padding: 12px 30px; line-height: 30px; .mm-text{ display: block; } .mm-desc { font-size: 12px; line-height: normal; } .mm-icon{ width: 30px; font-size: 18px; margin-left: -10px; &[class*="la-icon-"]{ vertical-align: top; } } } &.active > a{ } &.dl-back{ > a{ text-align: right; } } > a:not(:only-child){ &:after{ font-family: FontAwesome; content: "\f105"; position: absolute; right: 20px; top: 12px; font-size: 16px; } } &.dl-back > a{ &:before{ font-family: FontAwesome; content: "\f177"; float: left; } } .dl-submenu { display: none; } } .dl-menu { margin: 0; position: absolute; width: 100%; opacity: 0; pointer-events: none; -webkit-transform: translateY(10px); transform: translateY(10px); -webkit-backface-visibility: hidden; backface-visibility: hidden; &.dl-menu-toggle { transition: all 0.3s ease; -webkit-transition: all 0.3s ease; } &.dl-menuopen { opacity: 1; pointer-events: auto; -webkit-transform: translateY(0px); transform: translateY(0px); } } > .dl-submenu{ position: absolute; width: 100%; top: 0; left: 0; margin: 0; } } .dl-menu{ &.dl-subview{ li{ &, &.dl-subviewopen > a, &.dl-subview > a{ display: none; } &.dl-subview, &.dl-subview .dl-submenu, &.dl-subviewopen, &.dl-subviewopen > .dl-submenu, &.dl-subviewopen .dl-submenu > li{ display: block; } } } } /* No JS Fallback */ .no-js{ .dl-menuwrapper { .dl-menu { position: relative; opacity: 1; -webkit-transform: none; transform: none; } li { .dl-submenu { display: block; } &.dl-back { display: none; } > a:not(:only-child) { &:after { content: ''; } } } } } /* Animation classes for moving out and in */ .dl-menu{ // Effect 01 &.dl-animate-out-1 { -webkit-animation: MenuAnimOut1 0.4s; animation: MenuAnimOut1 0.4s; } &.dl-animate-in-1 { -webkit-animation: MenuAnimIn1 0.3s; animation: MenuAnimIn1 0.3s; } // Effect 02 &.dl-animate-out-2 { -webkit-animation: MenuAnimOut2 0.3s ease-in-out; animation: MenuAnimOut2 0.3s ease-in-out; } &.dl-animate-in-2 { -webkit-animation: MenuAnimIn2 0.3s ease-in-out; animation: MenuAnimIn2 0.3s ease-in-out; } // Effect 03 &.dl-animate-out-3 { -webkit-animation: MenuAnimOut3 0.4s ease; animation: MenuAnimOut3 0.4s ease; } &.dl-animate-in-3 { -webkit-animation: MenuAnimIn3 0.4s ease; animation: MenuAnimIn3 0.4s ease; } // Effect 04 &.dl-animate-out-4 { -webkit-animation: MenuAnimOut4 0.4s ease; animation: MenuAnimOut4 0.4s ease; } &.dl-animate-in-4 { -webkit-animation: MenuAnimIn4 0.4s ease; animation: MenuAnimIn4 0.4s ease; } // Effect 05 &.dl-animate-out-5 { -webkit-animation: MenuAnimOut5 0.4s ease; animation: MenuAnimOut5 0.4s ease; } &.dl-animate-in-5 { -webkit-animation: MenuAnimIn5 0.4s ease; animation: MenuAnimIn5 0.4s ease; } } .dl-menuwrapper > .dl-submenu.dl-animate-in-1 { -webkit-animation: SubMenuAnimIn1 0.4s ease; animation: SubMenuAnimIn1 0.4s ease; } .dl-menuwrapper > .dl-submenu.dl-animate-in-2 { -webkit-animation: SubMenuAnimIn2 0.3s ease-in-out; animation: SubMenuAnimIn2 0.3s ease-in-out; } .dl-menuwrapper > .dl-submenu.dl-animate-in-3 { -webkit-animation: SubMenuAnimIn3 0.4s ease; animation: SubMenuAnimIn3 0.4s ease; } .dl-menuwrapper > .dl-submenu.dl-animate-in-4 { -webkit-animation: SubMenuAnimIn4 0.4s ease; animation: SubMenuAnimIn4 0.4s ease; } .dl-menuwrapper > .dl-submenu.dl-animate-in-5 { -webkit-animation: SubMenuAnimIn5 0.4s ease; animation: SubMenuAnimIn5 0.4s ease; } .dl-menuwrapper > .dl-submenu.dl-animate-out-1 { -webkit-animation: SubMenuAnimOut1 0.4s ease; animation: SubMenuAnimOut1 0.4s ease; } .dl-menuwrapper > .dl-submenu.dl-animate-out-2 { -webkit-animation: SubMenuAnimOut2 0.3s ease-in-out; animation: SubMenuAnimOut2 0.3s ease-in-out; } .dl-menuwrapper > .dl-submenu.dl-animate-out-3 { -webkit-animation: SubMenuAnimOut3 0.4s ease; animation: SubMenuAnimOut3 0.4s ease; } .dl-menuwrapper > .dl-submenu.dl-animate-out-4 { -webkit-animation: SubMenuAnimOut4 0.4s ease; animation: SubMenuAnimOut4 0.4s ease; } .dl-menuwrapper > .dl-submenu.dl-animate-out-5 { -webkit-animation: SubMenuAnimOut5 0.4s ease; animation: SubMenuAnimOut5 0.4s ease; } @-webkit-keyframes MenuAnimOut1 { 0% { } 50% { -webkit-transform: translateZ(-250px) rotateY(30deg); } 75% { -webkit-transform: translateZ(-372.5px) rotateY(15deg); opacity: .5; } 100% { -webkit-transform: translateZ(-500px) rotateY(0deg); opacity: 0; } } @-webkit-keyframes MenuAnimOut2 { 0% { } 100% { -webkit-transform: translateX(-100%); opacity: 0; } } @-webkit-keyframes MenuAnimOut3 { 0% { } 100% { -webkit-transform: translateZ(300px); opacity: 0; } } @-webkit-keyframes MenuAnimOut4 { 0% { } 100% { -webkit-transform: translateZ(-300px); opacity: 0; } } @-webkit-keyframes MenuAnimOut5 { 0% { } 100% { -webkit-transform: translateY(40%); opacity: 0; } } @keyframes MenuAnimOut1 { 0% { } 50% { -webkit-transform: translateZ(-250px) rotateY(30deg); transform: translateZ(-250px) rotateY(30deg); } 75% { -webkit-transform: translateZ(-372.5px) rotateY(15deg); transform: translateZ(-372.5px) rotateY(15deg); opacity: .5; } 100% { -webkit-transform: translateZ(-500px) rotateY(0deg); transform: translateZ(-500px) rotateY(0deg); opacity: 0; } } @keyframes MenuAnimOut2 { 0% { } 100% { -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; } } @keyframes MenuAnimOut3 { 0% { } 100% { -webkit-transform: translateZ(300px); transform: translateZ(300px); opacity: 0; } } @keyframes MenuAnimOut4 { 0% { } 100% { -webkit-transform: translateZ(-300px); transform: translateZ(-300px); opacity: 0; } } @keyframes MenuAnimOut5 { 0% { } 100% { -webkit-transform: translateY(40%); transform: translateY(40%); opacity: 0; } } @-webkit-keyframes MenuAnimIn1 { 0% { -webkit-transform: translateZ(-500px) rotateY(0deg); opacity: 0; } 20% { -webkit-transform: translateZ(-250px) rotateY(30deg); opacity: 0.5; } 100% { -webkit-transform: translateZ(0px) rotateY(0deg); opacity: 1; } } @-webkit-keyframes MenuAnimIn2 { 0% { -webkit-transform: translateX(-100%); opacity: 0; } 100% { -webkit-transform: translateX(0px); opacity: 1; } } @-webkit-keyframes MenuAnimIn3 { 0% { -webkit-transform: translateZ(300px); opacity: 0; } 100% { -webkit-transform: translateZ(0px); opacity: 1; } } @-webkit-keyframes MenuAnimIn4 { 0% { -webkit-transform: translateZ(-300px); opacity: 0; } 100% { -webkit-transform: translateZ(0px); opacity: 1; } } @-webkit-keyframes MenuAnimIn5 { 0% { -webkit-transform: translateY(40%); opacity: 0; } 100% { -webkit-transform: translateY(0); opacity: 1; } } @keyframes MenuAnimIn1 { 0% { -webkit-transform: translateZ(-500px) rotateY(0deg); transform: translateZ(-500px) rotateY(0deg); opacity: 0; } 20% { -webkit-transform: translateZ(-250px) rotateY(30deg); transform: translateZ(-250px) rotateY(30deg); opacity: 0.5; } 100% { -webkit-transform: translateZ(0px) rotateY(0deg); transform: translateZ(0px) rotateY(0deg); opacity: 1; } } @keyframes MenuAnimIn2 { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); opacity: 1; } } @keyframes MenuAnimIn3 { 0% { -webkit-transform: translateZ(300px); transform: translateZ(300px); opacity: 0; } 100% { -webkit-transform: translateZ(0px); transform: translateZ(0px); opacity: 1; } } @keyframes MenuAnimIn4 { 0% { -webkit-transform: translateZ(-300px); transform: translateZ(-300px); opacity: 0; } 100% { -webkit-transform: translateZ(0px); transform: translateZ(0px); opacity: 1; } } @keyframes MenuAnimIn5 { 0% { -webkit-transform: translateY(40%); transform: translateY(40%); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @-webkit-keyframes SubMenuAnimIn1 { 0% { -webkit-transform: translateX(50%); opacity: 0; } 100% { -webkit-transform: translateX(0px); opacity: 1; } } @-webkit-keyframes SubMenuAnimIn2 { 0% { -webkit-transform: translateX(100%); opacity: 0; } 100% { -webkit-transform: translateX(0px); opacity: 1; } } @-webkit-keyframes SubMenuAnimIn3 { 0% { -webkit-transform: translateZ(-300px); opacity: 0; } 100% { -webkit-transform: translateZ(0px); opacity: 1; } } @-webkit-keyframes SubMenuAnimIn4 { 0% { -webkit-transform: translateZ(300px); opacity: 0; } 100% { -webkit-transform: translateZ(0px); opacity: 1; } } @-webkit-keyframes SubMenuAnimIn5 { 0% { -webkit-transform: translateZ(-200px); opacity: 0; } 100% { -webkit-transform: translateZ(0); opacity: 1; } } @keyframes SubMenuAnimIn1 { 0% { -webkit-transform: translateX(50%); transform: translateX(50%); opacity: 0; } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); opacity: 1; } } @keyframes SubMenuAnimIn2 { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 0; } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); opacity: 1; } } @keyframes SubMenuAnimIn3 { 0% { -webkit-transform: translateZ(-300px); transform: translateZ(-300px); opacity: 0; } 100% { -webkit-transform: translateZ(0px); transform: translateZ(0px); opacity: 1; } } @keyframes SubMenuAnimIn4 { 0% { -webkit-transform: translateZ(300px); transform: translateZ(300px); opacity: 0; } 100% { -webkit-transform: translateZ(0px); transform: translateZ(0px); opacity: 1; } } @keyframes SubMenuAnimIn5 { 0% { -webkit-transform: translateZ(-200px); transform: translateZ(-200px); opacity: 0; } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } @-webkit-keyframes SubMenuAnimOut1 { 0% { -webkit-transform: translateX(0%); opacity: 1; } 100% { -webkit-transform: translateX(50%); opacity: 0; } } @-webkit-keyframes SubMenuAnimOut2 { 0% { -webkit-transform: translateX(0%); opacity: 1; } 100% { -webkit-transform: translateX(100%); opacity: 0; } } @-webkit-keyframes SubMenuAnimOut3 { 0% { -webkit-transform: translateZ(0px); opacity: 1; } 100% { -webkit-transform: translateZ(-300px); opacity: 0; } } @-webkit-keyframes SubMenuAnimOut4 { 0% { -webkit-transform: translateZ(0px); opacity: 1; } 100% { -webkit-transform: translateZ(300px); opacity: 0; } } @-webkit-keyframes SubMenuAnimOut5 { 0% { -webkit-transform: translateZ(0); opacity: 1; } 100% { -webkit-transform: translateZ(-200px); opacity: 0; } } @keyframes SubMenuAnimOut1 { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1; } 100% { -webkit-transform: translateX(50%); transform: translateX(50%); opacity: 0; } } @keyframes SubMenuAnimOut2 { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1; } 100% { -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 0; } } @keyframes SubMenuAnimOut3 { 0% { -webkit-transform: translateZ(0px); transform: translateZ(0px); opacity: 1; } 100% { -webkit-transform: translateZ(-300px); transform: translateZ(-300px); opacity: 0; } } @keyframes SubMenuAnimOut4 { 0% { -webkit-transform: translateZ(0px); transform: translateZ(0px); opacity: 1; } 100% { -webkit-transform: translateZ(300px); transform: translateZ(300px); opacity: 0; } } @keyframes SubMenuAnimOut5 { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } 100% { -webkit-transform: translateZ(-200px); transform: translateZ(-200px); opacity: 0; } } .site-header-mobile{ display: none; .site-branding{ img{ max-height: 100%; position: absolute; top: 50%; } } .header-main{ position: relative; .header__action--cart{ margin: 0 10px 0 0; } .header-right { padding: 30px 0; float: right; } .header__action--account-menu{ .menu{ padding: 15px 0; } } .header__action--mobilemenu{ padding: 0 10px; } .btn-mobile-menu-trigger{ font-size: 32px; } .header-component-outer{ float: left; } .header-component-outer_2{ float: right; } .la_compt_iem{ > a.component-target{ font-size: 18px !important; } &.header_component--aside, &.header_component--primary-menu{ > .component-target{ font-size: 30px !important; } } } } .mobile-menu-wrap { position: absolute; width: 100%; top: 100%; z-index: 9; left: 0; opacity: 0; visibility: hidden; pointer-events: none; -webkit-transform: translateY(10px); transform: translateY(10px); -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; text-transform: uppercase; font-weight: bold; .open-mobile-menu &{ opacity: 1; visibility: visible; pointer-events: auto; -webkit-transform: translateY(0px); transform: translateY(0px); } } &.is-sticky{ .site-header-inner { position: fixed; width: 100%; z-index: 10; top: 0; left: 0; animation: header-active-sticky 400ms ease-in-out; -webkit-animation: header-active-sticky 400ms ease-in-out; } } } .la-enable-fullpage.enable-header-transparency .site-header-mobile { position: absolute; width: 100%; left: 0; z-index: 10; } body.open-mobile-menu{ overflow: hidden; .la-overlay-global { visibility: visible; opacity: 0.7; z-index: 3; transition: none; -webkit-transition: none; } .mobile-menu-wrap{ .dl-menu{ max-height: 75vh; overflow: auto; } } } .header-mb-v1{ .site-header-mobile{ .site-branding { img { left: 50%; @include translate2d(-50%,-50%); -webkit-transform: translate(-webkit-calc(-50% + 1px),-webkit-calc(-50% + 1px)); } } .header-component-outer_logo{ width: 40%; left: 30%; position: relative; } .header-component-outer_1{ width: 30%; position: relative; left: -40%; } .header-component-outer_2{ max-width: 30%; } } } .header-mb-v2{ .site-header-mobile{ .site-branding { img { @include translate2d(0,-50%); -webkit-transform: translate(0,-webkit-calc(-50% + 1px)); } } .header-component-outer_1{ float: right; } } } .header-mb-v3{ .site-header-mobile{ .site-branding { img { right: 0; @include translate2d(0,-50%); -webkit-transform: translate(0,-webkit-calc(-50% + 1px)); } } .header-component-outer_logo{ float: right; } } } .header-mb-v4{ .site-header-mobile{ .site-branding { img { left: 50%; @include translate2d(-50%,-50%); -webkit-transform: translate(-webkit-calc(-50% + 1px),-webkit-calc(-50% + 1px)); } } .header-component-outer_logo{ width: 100%; position: relative; } } }
| ver. 1.4 |
Github
|
.
| PHP 8.2.22 | Генерация страницы: 0 |
proxy
|
phpinfo
|
Настройка