Topo - Modelo 06
Modelo 06 para o topo da loja virtual.
# HTML
{% set usuario = store.userStore() %}
{% set paginasTopo = store.getDynamicPages({text_upper:true}) %}
{% set categorias = store.categories() %}
{% set categorias_menu = store.categoriesMenu({menu:'all'}) %}
{% set carrinho = store.cart() %}
{% set whatsapp = store.getWhatsappAttendance() %}
{% set ofertasPeriodicas = store.periodicOffers() %}
<header class="block">
{% if ofertasPeriodicas[0].id %}
<component data-modulo="ofertasperiodicas" loading="false" data-paddingtop="false" data-hidescroll="false"></component>
{% endif %}
<div class="header">
<div class="d-flex flex-row align-items-center">
<div class="openmenu-mobile hamburger-icon d-md-none">
<span class="hamburger"></span>
</div>
<div class="busca_btn_mobile d-flex d-md-none">
<svg class="svg-icon" viewBox="0 0 20 20">
<path fill="none" d="M12.323,2.398c-0.741-0.312-1.523-0.472-2.319-0.472c-2.394,0-4.544,1.423-5.476,3.625C3.907,7.013,3.896,8.629,4.49,10.102c0.528,1.304,1.494,2.333,2.72,2.99L5.467,17.33c-0.113,0.273,0.018,0.59,0.292,0.703c0.068,0.027,0.137,0.041,0.206,0.041c0.211,0,0.412-0.127,0.498-0.334l1.74-4.23c0.583,0.186,1.18,0.309,1.795,0.309c2.394,0,4.544-1.424,5.478-3.629C16.755,7.173,15.342,3.68,12.323,2.398z M14.488,9.77c-0.769,1.807-2.529,2.975-4.49,2.975c-0.651,0-1.291-0.131-1.897-0.387c-0.002-0.004-0.002-0.004-0.002-0.004c-0.003,0-0.003,0-0.003,0s0,0,0,0c-1.195-0.508-2.121-1.452-2.607-2.656c-0.489-1.205-0.477-2.53,0.03-3.727c0.764-1.805,2.525-2.969,4.487-2.969c0.651,0,1.292,0.129,1.898,0.386C14.374,4.438,15.533,7.3,14.488,9.77z"></path>
</svg>
</div>
{% if not is_mobile %}
<h1 class="d-none d-md-block">
<a href="./" class="btLogo" style="background-image:url('{{ store.getLogo() }}');" aria-label="Página inicial">
{{ seo.title }}
</a>
</h1>
{% endif %}
</div>
{% if is_mobile %}
<h1 class="Logo_mobile">
<a href="./" class="btLogo_mobile" style="background-image:url('{{ store.getLogo() }}');">
{{ seo.title }}
</a>
</h1>
{% endif %}
<div class="hamburger-scroll__container">
<div class="hamburger-scroll">
<span class="hamburger_item"></span>
<span class="hamburger_item"></span>
<span class="hamburger_item"></span>
</div>
<div class="hamburger-scroll__label">
Abrir/Fechar Departamentos
</div>
</div>
{% if not global.var_mostruario or (global.var_mostruario and not global.var_bloquear_cadastros) %}
<div class="conta" id="login_btn">
<div class="login_btn" >
<svg class="svg-icon" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
</svg>
</div>
<div class="login__label">
{% if not usuario.logged %}
<h4 class="mb-1 login_head">Olá Visitante!</h4>
<a href="" class="mymodal login_btn" data-include="inc.php?meio=inc_login" data-width="400" title="Efetuar login">
Faça Login ou Cadastre-se
</a>
{% else%}
{% set usuarioNome = usuario.data.nome|split(' ')[0] %}
<h4 class="login_head mb-1">Olá {{ usuarioNome|capitalize }} !</h4>
<div class="login_group">
<a href="central/" class="login_btn">Minha Conta</a>
|
<a href="#" class="login_btn b-desconectar">Sair</a>
</div>
{% endif %}
</div>
</div>
{% endif %}
<div class="search_desktop d-none d-md-block search" id="searchDesktop">
<form action="busca/" method="get">
<input type="text" class="form-control" name="q" aria-label="Buscar" data-url="produtos_autocomplete.php" placeholder="Buscar">
<button type="submit" class="busca_btn" aria-label="Pesquisar">
<svg class="svg-icon" viewBox="0 0 20 20">
<path fill="none" d="M12.323,2.398c-0.741-0.312-1.523-0.472-2.319-0.472c-2.394,0-4.544,1.423-5.476,3.625C3.907,7.013,3.896,8.629,4.49,10.102c0.528,1.304,1.494,2.333,2.72,2.99L5.467,17.33c-0.113,0.273,0.018,0.59,0.292,0.703c0.068,0.027,0.137,0.041,0.206,0.041c0.211,0,0.412-0.127,0.498-0.334l1.74-4.23c0.583,0.186,1.18,0.309,1.795,0.309c2.394,0,4.544-1.424,5.478-3.629C16.755,7.173,15.342,3.68,12.323,2.398z M14.488,9.77c-0.769,1.807-2.529,2.975-4.49,2.975c-0.651,0-1.291-0.131-1.897-0.387c-0.002-0.004-0.002-0.004-0.002-0.004c-0.003,0-0.003,0-0.003,0s0,0,0,0c-1.195-0.508-2.121-1.452-2.607-2.656c-0.489-1.205-0.477-2.53,0.03-3.727c0.764-1.805,2.525-2.969,4.487-2.969c0.651,0,1.292,0.129,1.898,0.386C14.374,4.438,15.533,7.3,14.488,9.77z"></path>
</svg>
</button>
</form>
</div>
<div class="d-flex flex-row align-items-center justify-content-between ml-2">
{% if whatsapp.online %}
<div class="wpp_link mr-4">
<div class="brand_logo">
<i class="fa fa-whatsapp"></i>
</div>
<div class="wpp_lable">
<span class="call">WhatsApp SAC</span>
<span class="wpp_tell"><a href="{{ whatsapp.url }}" target="_blank">{{ whatsapp.numero_raw }}</a></span>
</div>
</div>
{% endif %}
{% if not global.var_mostruario %}
<div class="cart_container" id="cartBtn">
<div class="cart">
<svg class="svg-icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 1a2 2 0 0 0-2 2v4.5a.5.5 0 0 1-1 0V3a3 3 0 0 1 6 0v4.5a.5.5 0 0 1-1 0V3a2 2 0 0 0-2-2z"/>
<path fill-rule="evenodd" d="M3.405 6a.5.5 0 0 0-.498.45l-.912 6.9A1.5 1.5 0 0 0 3.488 15h9.024a1.5 1.5 0 0 0 1.493-1.65l-.913-6.9a.5.5 0 0 0-.497-.45h-9.19zm-1.493.35A1.5 1.5 0 0 1 3.405 5h9.19a1.5 1.5 0 0 1 1.493 1.35L15 13.252A2.5 2.5 0 0 1 12.512 16H3.488A2.5 2.5 0 0 1 1 13.251l.912-6.9z"/>
</svg>
<span class="sup">{{ carrinho.total_items }}</span>
</div>
<div class="cart-total cart__label">
<span class="text__lable">minhas compras</span>
<span class="cart-total-label total__lable">R${{ carrinho.cart.amount.total|valor }}</span>
</div>
</div>
{% endif %}
</div>
</div>
{% if show_menu != false or page != 'principal.php' %}
<div class="links d-none d-md-block">
<div class="central">
<ul class="categorias_desk">
{% for cat in categorias_menu|filter(cat => cat.menu == '1')|slice(0,10) %}
<li>
<a class="links_item" href="{{ cat.url }}" target="{{ cat.target }}">
{{ cat.icone_categoria|raw }}
<span {% if cat.cor != '' %} style="color:{{ cat.cor }}" {% endif %}>{{ cat.nome }}</span>
</a>
{% if cat.subs|length >= 1 %}
<div class="dropdown">
<ul class="list_l2">
{% for level2 in cat.subs %}
<li class="l2_item">
<a href="{{ level2.url }}" target="{{ level2.target }}">
<span>
{{ level2.icone_categoria|raw }}
{{ level2.nome }}
</span>
{% if level2.subs|length >= 1 %}
<i class="fa fa-angle-right"></i>
{% endif %}
</a>
{% if level2.subs|length >= 1 %}
<ul class="list_l3">
{% for level3 in level2.subs %}
<li class="l3_item"><a href="{{ level3.url }}" target="{{ level3.target }}">{{ level3.nome }}</a></li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% if cat.banner != ''%}
<div class="bnr">
{{ cat.banner|raw }}
</div>
{% endif %}
</div>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
</div>
{% endif %}
<div id="mobile-menu-topo" class="mobileMenu">
<div class="nav-menu mobileContainer">
<nav class="mobileNav">
{% if not global.var_mostruario or (global.var_mostruario and not global.var_bloquear_cadastros) %}
<li class="login_mobile">
{% if not usuario.logged %}
<div class="login_ico" >
<svg class="svg-icon" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
</svg>
</div>
<div class="login_group">
<span class="mb-1 login_head">Olá <b>Visitante</b> !</span>
<a href="" class="mymodal login_btn mb-1" data-include="inc.php?meio=inc_login" data-width="300" title="Efetuar login">Faça seu <b>login</b></a>
</div>
{% else %}
{% set usuarioNome = usuario.data.nome|split(' ')[0] %}
<div class="login_ico" >
<svg class="svg-icon" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
</svg>
</div>
<div class="login_group">
<span class="mb-1 login_head">Olá <b>{{ usuarioNome|capitalize }}</b> !</span>
<span class="btn_navLogin">
<a href="central/" class="mb-1">Minha Conta </a>
|
<a href="#" id="b-desconectar"> Sair</a>
</span>
</div>
{% endif %}
</li>
{% endif %}
{% if kits_config.total >= 1 and kits_config.show_menu == '1' %}
<li><a class="navItem" href="{{ kits_config.url }}">{{ kits_config.names }}</a></li>
{% endif %}
{% for categoria in categorias_menu|filter(cat => cat.menu_mobile == '1') %}
<li>
<a class="navItem" href="{{ categoria.url }}" target="{{ categoria.target }}"{{ categoria.cor != '' ? (' style="color:' ~ categoria.cor ~ '"')|raw : '' }}>
{{ categoria.nome }}
</a>
{% if categoria.subs >= 1 %}
<div class="btDropdown">
<i class="fa fa-angle-right"></i>
</div>
{% endif %}
{% if categoria.subs >= 1 %}
<ul class="subCategoria level2">
<li class="lvlBack">
<div class="btDropdown">
<i class="fa fa-angle-left"></i>
</div>
</li>
{% for level2 in categoria.subs %}
<li>
<a class="navItem" href="{{ level2.url }}" target="{{ level2.target }}"{{ level2.cor != '' ? (' style="color:' ~ level2.cor ~ '"')|raw : '' }}>
{{ level2.nome }}
</a>
{% if level2.subs >= 1 %}
<div class="btDropdown">
<i class="fa fa-angle-right"></i>
</div>
{% endif %}
{% if level2.subs >= 1 %}
<ul class="subCategoria level3">
<li class="lvlBack">
<div class="btDropdown">
<i class="fa fa-angle-left"></i>
</div>
</li>
{% for level3 in level2.subs %}
<li>
<a class="navItem font-weight-bold" href="{{ level3.url }}" target="{{ level3.target }}"{{ level3.cor != '' ? (' style="color:' ~ level3.cor ~ '"')|raw : '' }}>
{{ level3.nome }}
</a>
</li>
{% endfor %}
</ul >
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</nav>
</div>
</div>
<div class="search" id="searchMobile">
<form action="busca/" method="get">
<input type="text" class="form-control" name="q" data-url="produtos_autocomplete.php" placeholder="Digite o que está procurando!">
<button type="submit">
<svg class="svg-icon" viewBox="0 0 20 20">
<path fill="none" d="M12.323,2.398c-0.741-0.312-1.523-0.472-2.319-0.472c-2.394,0-4.544,1.423-5.476,3.625C3.907,7.013,3.896,8.629,4.49,10.102c0.528,1.304,1.494,2.333,2.72,2.99L5.467,17.33c-0.113,0.273,0.018,0.59,0.292,0.703c0.068,0.027,0.137,0.041,0.206,0.041c0.211,0,0.412-0.127,0.498-0.334l1.74-4.23c0.583,0.186,1.18,0.309,1.795,0.309c2.394,0,4.544-1.424,5.478-3.629C16.755,7.173,15.342,3.68,12.323,2.398z M14.488,9.77c-0.769,1.807-2.529,2.975-4.49,2.975c-0.651,0-1.291-0.131-1.897-0.387c-0.002-0.004-0.002-0.004-0.002-0.004c-0.003,0-0.003,0-0.003,0s0,0,0,0c-1.195-0.508-2.121-1.452-2.607-2.656c-0.489-1.205-0.477-2.53,0.03-3.727c0.764-1.805,2.525-2.969,4.487-2.969c0.651,0,1.292,0.129,1.898,0.386C14.374,4.438,15.533,7.3,14.488,9.77z"></path>
</svg>
</button>
</form>
</div>
</header>
<div class="suspended-cart">
<div class="cover"></div>
<div class="drop"></div>
</div>
<script>
$(function(){
loadSuspendedCart();
var hTopo = $('header').outerHeight(true);
setTimeout(function(){
hTopo = $('header').outerHeight(true);
}, 500);
$(window).scroll(function(){
let scr = $(this).scrollTop();
if(scr >= hTopo){
if(!$('header').hasClass('scroll'))
$('header').addClass('scroll');
if($('header').hasClass('scroll'))
$('#geral').css("padding-top", hTopo);
}else{
if($('header').hasClass('scroll'))
$('header').removeClass('scroll');
if(!$('header').hasClass('scroll'))
$('#geral').css("padding-top", 0);
}
});
// carrinho suspenso
$('.suspended-cart').on('click', '.cover, .fechar', function(e){
e.preventDefault();
$('.suspended-cart').removeClass('open');
$('body').css({'overflow': 'inherit'});
}).on('click', '.item-delete', function(){
let sku = $(this).parents('.item').data('sku');
if(confirm('Confirma a remoção deste produto?'))
cartRemoveProduct(sku);
}).on('click', '.item-delete-kit', function(){
let id = $(this).parents('.item').data('kitid');
if(confirm('Confirma a remoção deste Kit completo?'))
cartRemoveKit(id);
});
$('header .cart_container').on('click', function(){
openSuspendedCart();
});
totalItensCarrinho.registerListener(function(){
loadSuspendedCart();
});
onAddProductCart.registerListener(function(){
openSuspendedCart();
});
//
// abre e fecha o menu
$('.openmenu-mobile').click(function(e){
e.preventDefault();
$('#mobile-menu-topo').toggleClass('open');
document.location.hash = '#menu';
$('body').toggleClass('no-scroll noscroll');
});
$('header').on('click', '#mobile-menu-topo', function(e){
if(!$(e.target).closest("#mobile-menu-topo .nav-menu, #obile-menu-topo .b-desconectar").length)
window.history.back();
});
$(window).on('popstate', function(e){
let hash = document.location.hash;
if(hash == ''){
$('#mobile-menu-topo').removeClass('open');
}
});
//
// anima hamburger icon do menu
$(".hamburger-icon").click(function () {
$('#modalDesktop').toggleClass('active');
$('.subCategoria').removeClass('slide');
$('#searchMobile').removeClass('show');
$('.busca_btn_mobile').removeClass('active')
if($('body').hasClass('noscroll')){
$('body').removeClass('noscroll');
}else{
$('body').addClass('noscroll');
}
});
$("#modalDesktop").click(function () {
$('body').removeClass('noscroll no-scroll');
$(this).removeClass('active');
$('.subCategoria').removeClass('slide');
});
$(".hamburger-scroll").click(function () {
$('.hamburger-scroll').toggleClass('open');
$('.links').toggleClass('open');
});
//
$('.btDropdown').click(function(){
$(this).parent('li').children('.subCategoria').toggleClass('slide');
});
$('.lvlBack').click(function(){
$(this).parent('.subCategoria').toggleClass('slide');
});
$('.busca_btn_mobile').click(function(){
$('#searchMobile').toggleClass('show');
$('.busca_btn_mobile').toggleClass('active');
$(".hamburger-icon").removeClass("active")
$('.subCategoria').removeClass('slide');
$('.mobileMenu').removeClass('open');
$('#modalDesktop').removeClass('active')
});
$('.close_modal').click(function(){
$('#modalDesktop').removeClass('active');
$('#searchMobile').removeClass('active');
});
setTimeout(function(){
$('.mobileMenu.hasOffer .mobileContainer').css({'padding-top':$('header').outerHeight(true)});
}, 1500);
});
function openSuspendedCart(){
$('.suspended-cart').addClass('open');
$('body').css({'overflow': 'hidden'});
}
function loadSuspendedCart(){
$.post('load-twig.php', {folder:'includes', file:'suspended-cart.html'}, function(d){
$('.suspended-cart .drop').html(d);
});
}
</script>
// SCSS/CSS
.svg-icon {
width: 2.5rem;
height: 2.5rem;
}
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
fill: #000;
}
.svg-icon circle {
stroke: #000;
stroke-width: 1;
}
body{
&.noscroll{
position: relative;
overflow-Y: hidden;
}
}
// Estilizando e animando Hamburguer icone
.hamburger-icon {
position: relative;
padding: 0 0.75rem;
display: block;
width: 30px;
height: 30px;
cursor: pointer;
z-index: 9999;
}
.hamburger {
width: 20px;
height: 2px;
background-color: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: 0.5s;
}
.hamburger:before,
.hamburger:after {
content: "";
position: absolute;
width: 20px;
height: 2px;
background-color: #000;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: all 500ms ease-in-out;
}
.hamburger:before {
top: -7px;
}
.hamburger:after {
top: 7px;
}
.hamburger-icon.active .hamburger {
background-color: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}
.hamburger-icon.active .hamburger:before {
top: 0;
background-color: #000;
transform: rotate(45deg);
}
.hamburger-icon.active .hamburger:after {
top: 0;
background-color: #000;
transform: rotate(135deg);
}
.hamburger-scroll__container{
display: none;
flex-direction: row;
justify-content: space-between;
align-items: center;
visibility: hidden;
opacity: 0;
.hamburger-scroll__label{
width: 95px;
margin-left: 0.5rem;
padding: 0.25rem;
}
.hamburger-scroll {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
position: relative;
width: 30px;
height: 25px;
cursor: pointer;
z-index: 9999;
.hamburger_item {
width: 100%;
height: 5px;
background-color: transparent;
border: 1px solid #000;
transition: all 250ms ease-in;
}
}
.hamburger-scroll.open .hamburger_item {
background-color: #000;
}
}
#searchMobile {
width: 100%;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
height: 0;
visibility: hidden;
background-color: #f4f4f4;
padding: 0.5rem;
transition: all 250ms ease-in-out;
&.show{
opacity: 1;
height: auto;
visibility: visible;
input{
height: 50px;
}
}
@media(min-width:768px){
display: none;
}
input {
width: 100%;
background-color: #fff;
color: #000;
padding: 0 75px 0 20px;
line-height: 50px;
position: relative;
height: 0;
border: solid 1px #C1C1C1;
border-radius: 0;
box-shadow: none !important;
}
button {
width: 2rem;
height: 2rem;
display: flex;
justify-content: center;
align-items: center;
background-color: transparent;
color: #777;
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
outline: none;
&:hover{
color:#333;
}
.svg-icon {
width: 1.25rem;
height: 1.25rem;
transform: rotate(-65deg);
}
.svg-icon circle {
stroke: #777;
}
}
.boxquery {
width: 100%;
left: 0;
right: auto;
color: #000;
top: 50px;
border-radius: 4px;
overflow: hidden;
border: none;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
.foto {
width: 50px;
height: 50px;
float: left;
background-color: #eee;
margin-right: 10px;
position: relative;
overflow: hidden;
}
.det {
width: calc(100% - 60px);
float: left;
h3 {
font-size: 16px;
line-height: 18px;
margin-bottom: 5px;
}
p {
font-size: 16px;
line-height: 18px;
color: #000;
font-weight: bold;
}
}
}
}
.conta {
display: none;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
color: #000;
position: relative;
margin: 0 10px;
.login__label{
width: 160px;
margin-left: 0.5rem;
padding: 0.25rem;
.login_btn{
color: #000;
&:hover{
opacity: 0.7;
}
}
}
@media(min-width:768px){
margin: 0 25px;
display: flex;
}
}
.wpp_link{
display:none;
@media(min-width:1025px){
display:flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
min-width: 165px;
margin-left: 20px;
.brand_logo{
font-size: 2.5rem;
margin-right: 0.5rem;
}
.wpp_lable{
display:flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
a{
text-decoration: none;
font-size: 1rem;
color: #000;
&:hover{
opacity: 0.7;
}
}
}
}
}
.busca_btn_mobile{
margin-left: 0.5rem;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
transition: all 250ms ease-in-out;
.svg-icon {
transform: rotate(-65deg);
width: 2rem;
height: 2rem;
}
&.active{
background-color: #f4f4f4;
}
}
.svg-icon polygon,
.svg-icon rect {
fill: #c1c1c1 !important;
}
.busca_btn_mobile.active .svg-icon circle {
stroke: #c1c1c1 !important;
}
header{
width:100%;
position: relative;
z-index: 999;
background-color: #FFF;
transition: all 250ms ease-in-out;
&.scroll{
background-color: #f5f5f5;
position: fixed;
top: 0;
left: 0;
.conta{
display: none;
}
.hamburger-scroll__container{
@media(min-width:768px){
visibility: visible;
opacity: 1;
display: flex;
}
}
.links{
opacity: 0;
height: 0;
&.over{
opacity: 1;
height: auto;
}
}
.btLogo {
@media(min-width: 768px){
width: 160px;
height: 80px;
}
}
}
.header{
max-width: 100%;
margin-left:auto;
margin-right:auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0.5rem;
transition: all 250ms;
@media(min-width:768px){
justify-content: space-around;
}
@media(min-width:1368px){
max-width: 90%;
}
.Logo_desktop{
display: none;
@media(min-width:768px){
display: block;
margin-left: 0;
}
}
.search_desktop{
width: 40%;
position: relative;
input {
width: 100%;
float: left;
background-color: #fff;
color: #000;
padding: 0 75px 0 20px;
line-height: 50px;
height: 50px;
border: solid 1px #C1C1C1;
box-shadow: none !important;
}
button {
width: 50px;
height: 50px;
float: left;
background-color: transparent;
color: #777;
font-size: 20px;
position: absolute;
right: 0;
top: 0;
outline: none;
&:active {
opacity: 0.7;
color:#333;
}
&.busca_btn{
transform: rotate(-65deg);
}
.svg-icon {
width: 1.25rem;
height: 1.25rem;
}
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
fill: #777;
}
.svg-icon circle {
stroke: #777;
}
}
.boxquery {
width: 100%;
left: 0;
right: auto;
color: #000;
top: 65px;
border-radius: 4px;
overflow: hidden;
border: none;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
.foto {
width: 50px;
height: 50px;
float: left;
background-color: #eee;
margin-right: 10px;
position: relative;
overflow: hidden;
}
.det {
width: calc(100% - 60px);
float: left;
h3 {
font-size: 16px;
line-height: 18px;
margin-bottom: 5px;
}
p {
font-size: 16px;
line-height: 18px;
color: #000;
font-weight: bold;
}
}
}
}
&:hover,
&.scroll{
.categorias_desk .links_item{
color:#000;
}
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
//fill: #000;
}
.svg-icon circle {
stroke: #000;
}
.hamburger,
.hamburger:before,
.hamburger:after{
background-color: #000;
}
.hamburger-icon.active .hamburger{
background-color: transparent;
}
}
}
.links{
width: 100%;
float: left;
background-color: #F5F5F5;
&.open{
visibility: visible;
opacity: 1;
height: auto;
}
.categorias_desk{
width: 100%;
display: flex;
justify-content: space-around;
list-style: none;
> li{
position: relative;
white-space: nowrap;
> a{
height: 60px;
font-size: 14px;
line-height: 60px;
text-transform: uppercase;
color: #000;
padding: 0 15px;
display: inline-block;
&::before{
content: '';
height: 1px;
position: absolute;
bottom: 10px;
background: #fff;
transition: all 300ms ease-in-out;
}
}
&:hover{
> a{
&::before{
left: 10%;
right: 10%;
background: linear-gradient(to right, #fff 0%, #ccc 50%, #fff 100%);
}
}
.dropdown{
visibility: visible;
opacity: 1;
}
}
&:nth-last-child(-n+4){
.dropdown{
left: auto;
right: 0;
.list_l2{
order: 2;
.l2_item{
.list_l3{
left: -100%;
}
}
}
}
}
.dropdown{
max-width: 600px;
display: flex;
flex-direction:row;
justify-content:space-between;
align-items: flex-start;
position: absolute;
top: 100%;
left: 0;
z-index: 99;
visibility: hidden;
opacity: 0;
background-color: #fff;
border-top: 1px solid #EDEDED;
box-shadow: 0 1px 3px 0 rgba(27,36,50,0.4);
padding: 0;
.bnr{
width: 340px;
img{
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
}
.list_l2{
width: 260px;
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 5px 0;
list-style: none;
.l2_item{
display: block;
width:100%;
position: relative;
> a{
width:100%;
padding: 0.5rem 0.75rem;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
text-transform: uppercase;
font-size: 11px;
color: #222;
transition: all 250ms ease-in-out;
z-index: 4001;
}
&:hover{
> a{
color: #fff;
background-color: #222;
}
.list_l3{
visibility: visible;
opacity: 1;
}
}
.list_l3{
width: 260px;
position: absolute;
top: -1px;
left: 100%;
z-index: 999;
visibility: hidden;
opacity: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 5px 0;
list-style: none;
box-shadow: 0 1px 3px 0 rgba(27,36,50,0.4);
transition: all 250ms ease-in-out;
background-color: #FFF;
.l3_item{
display: block;
width:100%;
> a{
width:100%;
padding: 0.5rem 0.75rem;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
text-transform: uppercase;
font-size: 11px;
color: #222;
transition: all 200ms ease-in-out;
&:hover{
color: #fff;
background-color: #222;
}
}
}
}
}
}
}
}
}
}
.busca_btn{
display: flex;
justify-content: center;
align-items: center;
width: 2.5rem;
height: 2.5rem;
margin: 0 5px;
cursor: pointer;
transform: rotate(-65deg);
}
.cart_container{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
cursor: pointer;
.cart {
margin: 0 5px;
position: relative;
.sup {
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, 50%);
width: 0.8rem;
height: 0.8rem;
line-height: 0.8rem;
font-size: 0.8rem;
font-weight: 700;
display: flex;
justify-content: center;
align-items: center;
background-color: transparent;
color: #383838;
text-align: center;
@media(min-width:768px){
top: 35%;
}
}
.svg-icon {
@media(min-width:768px){
width: 2.5rem;
height: 2.5rem;
}
width: 2rem;
height: 2rem;
}
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
fill: #383838;
}
.svg-icon circle {
stroke: #383838;
stroke-width: 1;
}
}
.cart__label{
width: 115px;
padding: 0.25rem;
text-transform: uppercase;
display: none;
flex-direction: column;
justify-content: center;
align-items: flex-start;
.total__lable{
font-size: 1rem
}
@media(min-width: 1025px){
display: flex
}
}
}
}
.modal-desktop{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
backdrop-filter: blur(3px);
background-color: rgba(0, 0, 0, 0.5);
z-index: 10;
transition: all 250ms ease-in-out;
&.active{
visibility: visible;
opacity: 1;
}
}
.Logo_mobile{
width: 100%;
margin: 0;
height: 75px;
position: relative;
@media(min-width:768px){
display: none;
}
}
.btLogo_mobile {
position: absolute;
top: 45%;
left: 40%;
transform: translate(-50%, -50%);
display: block;
text-align: center;
width: 120px;
height: 75px;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
overflow: hidden;
color: transparent;
text-indent: -9999px;
}
.btLogo {
width: 240px;
height: 140px;
display: block;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
overflow: hidden;
margin: 5px;
color: transparent;
text-indent: -9999px;
}
.mobileMenu{
position: fixed;
top: 0;
left: -100%;
width: 310px;
min-height: 100vw;
backdrop-filter: blur(3px);
background-color: rgba(0, 0, 0, 0.5);
transition: all 250ms ease-in-out;
z-index: -1;
&.open{
left: 0;
}
.mobileContainer{
background-color: #f4f4f4;
width: 100%;
height: 100vh;
overflow-y: auto;
transition: all 250ms ease-in-out;
padding-top: 75px;
&::-webkit-scrollbar{
display: none;
}
}
}
.mobileNav{
border-bottom: 0.75rem solid #ecf0f1;
background-color: #f4f4f4;
list-style: none;
&:last-child{
border-bottom: none;
}
li{
text-transform: uppercase;
border-bottom: 1px solid #cecece;
display: flex;
justify-content: space-between;
align-items: center;
&:last-of-type {
border-bottom: none;
}
.navItem{
width: calc(100% - 50px);
font-size: 1rem;
color: #343434;
padding: 1rem;
text-decoration:none;
}
&:not(.login_mobile):active{
background-color: #ccc;
}
.btDropdown{
display: inline-flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-size: 1.5rem;
width: 36px;
height: 36px;
border-radius: 4px;
margin: 0 10px;
background-color: #000;
color: #FFF;
&:active{
opacity: 0.7;
}
}
&.login_mobile{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 1rem;
.login_ico{
width: 80px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.login_group{
background-color: transparent;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
.login_head{
width: 100%;
display: block;
text-transform: capitalize;
text-align: left;
font-size: 1rem;
}
.btn_navLogin{
width: 100%;
}
a{
text-transform: capitalize;
color: #000;
&:active{
opacity: 0.7;
}
}
}
}
}
}
.subCategoria{
overflow: hidden;
list-style: none;
.lvlBack{
font-weight: 900;
font-size: 1rem;
}
&.level2{
height: 100vh;
overflow-y: auto;
padding-top: 75px;
position: fixed;
top:0;
left:-100%;
width: 100%;
background-color: #f4f4f4;
transition: all 250ms ease;
&::-webkit-scrollbar{
display: none;
}
&.slide{
left:0;
}
.btDropdown{
background-color: #000;
}
.lvlBack{
.btDropdown{
background-color: rgba(0,0,0,0);
color: #000;
margin-left: 0;
height: 50px;
}
}
}
&.level3{
height: 100vh;
overflow-y: auto;
padding-top: 75px;
position: fixed;
top:0;
left:-100%;
width: 100%;
background-color: #f4f4f4;
transition: all 250ms ease;
&::-webkit-scrollbar{
display: none;
}
&.slide{
left:0;
}
}
li{
border-bottom: 1px solid #fff;
&:last-of-type{
border-bottom: none;
}
}
a{
font-size: 0.65rem;
color: #555555;
text-transform: uppercase;
text-decoration:none;
padding-bottom: 1.5rem;
}
}
.suspended-cart{
position: fixed;
z-index: 9999999999;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
&.open{
visibility: visible;
.cover{
visibility: visible;
opacity: 1;
}
.drop{
right: 0;
}
}
.cover{
background-color: rgba(0,0,0,0.7);
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: all .25s;
}
.drop{
position: fixed;
top: 0;
right: -500px;
width: 100%;
max-width: 500px;
height: 100%;
background-color: #FFF;
z-index: 2;
transition: all .25s;
.drop-header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
border-bottom: solid 1px #DDD;
h3{
font-size: 20px;
font-weight: bold;
}
.fechar{
width: 35px;
height: 35px;
border: solid 1px #DDD;
border-radius: 3px;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
cursor: pointer;
}
}
.msg-empty{
padding: 30px;
font-size: 23px;
line-height: 26px;
text-align: center;
}
.drop-list{
height: calc(100% - 290px);
overflow: auto;
.item{
padding: 20px;
.foto{
width: 100px;
display: inline-block;
margin-right: 20px;
vertical-align: top;
}
.det{
width: calc(100% - 130px);
display: inline-block;
vertical-align: top;
position: relative;
.produto{
width: calc(100% - 30px);
display: inline-block;
}
.valores{
margin-top: 10px;
display: flex;
justify-content: space-between;
}
.item-delete{
width: 25px;
height: 25px;
position: absolute;
top: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border: solid 1px #DDD;
border-radius: 3px;
}
}
}
}
.drop-footer{
padding: 20px;
.item{
display: flex;
justify-content: space-between;
padding: 5px 0;
}
.botoes{
display: flex;
justify-content: space-between;
padding-top: 15px;
margin-top: 10px;
border-top: solid 1px #DDD;
text-align: center;
line-height: 15px;
a{
margin-left: 10px;
border: solid 1px #666;
color: #000;
font-size: 12px;
width: 50%;
display: flex;
justify-content: center;
align-items: center;
height: 60px;
padding: 5px;
&:active{
opacity: 0.7;
}
&:first-child{
margin-left: 0;
}
&.bt-finalizar{
background-color: #666;
color: #FFF;
}
}
}
}
}
}