diff --git a/src/arquivos/sass/partials/_header.scss b/src/arquivos/sass/partials/_header.scss index e6579b7..e298b80 100644 --- a/src/arquivos/sass/partials/_header.scss +++ b/src/arquivos/sass/partials/_header.scss @@ -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. diff --git a/src/arquivos/sass/partials/_menu.scss b/src/arquivos/sass/partials/_menu.scss index 46eb98b..824c5ac 100644 --- a/src/arquivos/sass/partials/_menu.scss +++ b/src/arquivos/sass/partials/_menu.scss @@ -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; + } + } + } } diff --git a/src/arquivos/sass/utils/_normalize.scss b/src/arquivos/sass/utils/_normalize.scss index 69d0d98..e61f344 100644 --- a/src/arquivos/sass/utils/_normalize.scss +++ b/src/arquivos/sass/utils/_normalize.scss @@ -23,7 +23,7 @@ html { */ body { - color: #142032; + color: $black-500; margin: 0; } diff --git a/src/arquivos/sass/utils/_variaveis.scss b/src/arquivos/sass/utils/_variaveis.scss index 870afbb..547cad7 100644 --- a/src/arquivos/sass/utils/_variaveis.scss +++ b/src/arquivos/sass/utils/_variaveis.scss @@ -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; diff --git a/src/arquivos/sprite/menu-arrow-icon.png b/src/arquivos/sprite/menu-arrow-icon.png new file mode 100644 index 0000000..0843e37 Binary files /dev/null and b/src/arquivos/sprite/menu-arrow-icon.png differ diff --git a/src/controles-customizados/menuPrincipal.html b/src/controles-customizados/menuPrincipal.html index 03aec35..cc00939 100644 --- a/src/controles-customizados/menuPrincipal.html +++ b/src/controles-customizados/menuPrincipal.html @@ -2,6 +2,56 @@