update
This commit is contained in:
parent
5665b5a31f
commit
ec10216244
@ -1,4 +1,5 @@
|
||||
.page-header {
|
||||
position: relative;
|
||||
padding: 28px 0;
|
||||
background: $black-500;
|
||||
// O include está puxando a classe mq no SCSS mixin. O lg(max-width: 991px) é um tamanho já armazenado e o max é de max-width.
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
.menu {
|
||||
align-self: stretch;
|
||||
|
||||
&__button {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
@ -12,14 +14,19 @@
|
||||
}
|
||||
|
||||
.main-menu {
|
||||
height: 100%;
|
||||
|
||||
&__departments {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__department {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 40px;
|
||||
|
||||
// O include está puxando a classe mq no SCSS mixin. O lg(min-width: 991px) é um tamanho já armazenado e o min é de min-width.
|
||||
@include mq(lg, min) {
|
||||
&:hover {
|
||||
.main-menu__department-link {
|
||||
@ -27,6 +34,12 @@
|
||||
color: $blue-500;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.submenu {
|
||||
top: 100%;
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -35,19 +48,91 @@
|
||||
font-size: 12px;
|
||||
line-height: 15px;
|
||||
color: $white-500;
|
||||
|
||||
// O include está puxando a classe mq no SCSS mixin. O lg(min-width: 991px) é um tamanho já armazenado e o min é de min-width.
|
||||
@include mq(lg, min) {
|
||||
// Técnica usada para quando aplicar bold no hover o elemento não mexer toda a tela.
|
||||
&::after {
|
||||
display: block;
|
||||
// O conteúdo vai ser o atributo title.
|
||||
content: attr(title);
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
font-weight: bold;
|
||||
visibility: hidden;
|
||||
&::after {
|
||||
display: block;
|
||||
// O conteúdo vai ser o atributo title.
|
||||
content: attr(title);
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
font-weight: bold;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submenu {
|
||||
position: absolute;
|
||||
// Significa que o submenu vai estar a 100% mais 32px do topo do header.
|
||||
top: calc(100% + 32px);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
// O map-get é usado para acessar atributos de uma variável. O primeiro valor é o nome da variável(presente em variables) e o segundo o nome do elemento a ser puxado.
|
||||
z-index: map-get($z-index, level-4);
|
||||
padding: 30px 0 43px;
|
||||
background: rgba($white-500, 0.95);
|
||||
box-shadow: 0px 4px 4px rgba($black-500, 0.02);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: all 0.4s ease-in-out;
|
||||
|
||||
// Usado para fazer as LI preencher todo o submenu assim não fechando quando o mouse estiver sobre ele.
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 100%;
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
margin: 0 0 8px;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
&__categories-wrapper {
|
||||
display: flex;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
&__categories {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
&__category {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
&__category-link {
|
||||
line-height: 15px;
|
||||
font-size: 12px;
|
||||
color: $black-500;
|
||||
transition: color 0.2s linear;
|
||||
// O include está puxando a classe mq no SCSS mixin. O lg(min-width: 991px) é um tamanho já armazenado e o min é de min-width.
|
||||
@include mq(lg, min) {
|
||||
&:hover {
|
||||
color: $blue-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__see-all {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 700;
|
||||
line-height: 15px;
|
||||
font-size: 12px;
|
||||
color: $black-500;
|
||||
|
||||
i {
|
||||
margin-left: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,7 +23,7 @@ html {
|
||||
*/
|
||||
|
||||
body {
|
||||
color: #142032;
|
||||
color: $black-500;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
// fonts
|
||||
// Fonts
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
|
||||
|
||||
@ -9,15 +9,13 @@ $font-weight-regular: 400;
|
||||
$font-weight-heavy: 700;
|
||||
$font-height: 1.5;
|
||||
|
||||
// colors
|
||||
// Colors
|
||||
|
||||
$black-500: #000000;
|
||||
$white-500: #ffffff;
|
||||
$blue-500: #00C8FF;
|
||||
$gray-500: #333333;
|
||||
|
||||
// universal
|
||||
|
||||
// Grid breakpoints
|
||||
|
||||
$grid-breakpoints: (
|
||||
@ -28,14 +26,12 @@ $grid-breakpoints: (
|
||||
xl: 1200px,
|
||||
) !default;
|
||||
|
||||
// Z-index
|
||||
|
||||
$z-index: (
|
||||
menu: 15,
|
||||
popup-add-cart: 10,
|
||||
dropdown: 10,
|
||||
flag-prateleira: 5,
|
||||
comprar-flutuante: 5,
|
||||
avise-me: 5,
|
||||
scroll-top: 7,
|
||||
header-fixo: 10,
|
||||
popup-user: 15,
|
||||
level-1: 5,
|
||||
level-2: 10,
|
||||
level-3: 15,
|
||||
level-4: 20,
|
||||
level-5: 25,
|
||||
) !default;
|
||||
|
||||
BIN
src/arquivos/sprite/menu-arrow-icon.png
Normal file
BIN
src/arquivos/sprite/menu-arrow-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 230 B |
@ -2,6 +2,56 @@
|
||||
<ul class="main-menu__departments">
|
||||
<li class="main-menu__department">
|
||||
<a href="#" class="main-menu__department-link" title="LOREM IPSUM">LOREM IPSUM</a>
|
||||
|
||||
<div class="submenu">
|
||||
<div class="container">
|
||||
<h2 class="submenu__title">LOREM IPSUM</h2>
|
||||
|
||||
<div class="submenu__categories-wrapper">
|
||||
<ul class="submenu__categories">
|
||||
<li class="submenu__category">
|
||||
<a href="" class="submenu__category-link">Lorem ipsum</a>
|
||||
</li class="submenu__category">
|
||||
|
||||
<li class="submenu__category">
|
||||
<a href="" class="submenu__category-link">Lorem ipsum</a>
|
||||
</li class="submenu__category">
|
||||
|
||||
<li class="submenu__category">
|
||||
<a href="" class="submenu__category-link">Lorem ipsum</a>
|
||||
</li class="submenu__category">
|
||||
|
||||
<li class="submenu__category">
|
||||
<a href="" class="submenu__category-link">Lorem ipsum</a>
|
||||
</li class="submenu__category">
|
||||
</ul>
|
||||
|
||||
<ul class="submenu__categories">
|
||||
<li class="submenu__category">
|
||||
<a href="" class="submenu__category-link">Lorem ipsum</a>
|
||||
</li class="submenu__category">
|
||||
|
||||
<li class="submenu__category">
|
||||
<a href="" class="submenu__category-link">Lorem ipsum</a>
|
||||
</li class="submenu__category">
|
||||
|
||||
<li class="submenu__category">
|
||||
<a href="" class="submenu__category-link">Lorem ipsum</a>
|
||||
</li class="submenu__category">
|
||||
|
||||
<li class="submenu__category">
|
||||
<a href="" class="submenu__category-link">Lorem ipsum</a>
|
||||
</li class="submenu__category">
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<a href="" class="submenu__see-all">
|
||||
VER TODOS
|
||||
<!--O sprite adiciona um fundo e a segunda classe adiciona a imagem. -->
|
||||
<i class="sprite sprite-menu-arrow-icon"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="main-menu__department">
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
</button>
|
||||
|
||||
<!-- Está chamando o arquivo HTML presente em controles customizados. -->
|
||||
<vtex.cmc:menuPrincipal/>
|
||||
<vtex.cmc:menuPrincipal />
|
||||
</div>
|
||||
|
||||
<a href="/">
|
||||
@ -40,7 +40,5 @@
|
||||
<!-- Cria o input de busca VTEX. -->
|
||||
<vtex.cmc:fullTextSearchBox />
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user