diff --git a/src/arquivos/sass/partials/_header.scss b/src/arquivos/sass/partials/_header.scss index bd94e1d..9f22b0f 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 0px; background: $black-500; diff --git a/src/arquivos/sass/partials/_menu.scss b/src/arquivos/sass/partials/_menu.scss index 577cd86..7aea93f 100644 --- a/src/arquivos/sass/partials/_menu.scss +++ b/src/arquivos/sass/partials/_menu.scss @@ -1,4 +1,5 @@ .menu { + align-self: stretch; &__button { padding: 0; border: 0; @@ -11,6 +12,119 @@ } .main-menu { - display: none; + height: 100%; + &__departments { + display: flex; + margin: 0; + height: 100%; + } + + &__department { + display: flex; + align-items: center; + margin-right: 40px; + + @include mq(lg, min) { + &:hover { + .main-menu__department-link { + text-decoration: underline; + font-weight: 700; + color: $blue-500; + } + + .submenu { + top: 100%; + opacity: 1; + pointer-events: all; + } + } + } + } + + &__department-link { + font-size: 12px; + line-height: 15px; + color: $white-500; + + @include mq(lg, min) { + &::after { + content: attr(title); + display: block; + height: 0; + overflow: hidden; + font-weight: bold; + visibility: hidden; + } + } + } + } + + .submenu { + position: absolute; + top: calc(100% + 32px); + left: 0; + z-index: map-get($z-index, level-4); + width: 100%; + 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.2s ease-in-out; + + &::before { + content: ""; + position: absolute; + bottom: 100%; + left: 0; + width: 100%; + height: 28px; + background: transparent; + } + + &__title { + margin: 0 0 8px; + line-height: 24px; + font-size: 20px; + } + + &__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; + + @include mq(lg, min) { + &:hover { + color: $blue-500; + } + } + } + + &__see-all { + display: flex; + align-items: center; + line-height: 15px; + font-size: 12px; + font-weight: bold; + 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 429c29b..8252166 100644 --- a/src/arquivos/sass/utils/_variaveis.scss +++ b/src/arquivos/sass/utils/_variaveis.scss @@ -36,5 +36,5 @@ $z-index: ( // avise-me: 5, // scroll-top: 7, // header-fixo: 10, - // popup-user: 15,,,,,,,,,,, + // popup-user: 15,,,,,,,,,,,, ) !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..539b8de 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 new file mode 100644 index 0000000..4f2a596 --- /dev/null +++ b/src/controles-customizados/menuPrincipal.html @@ -0,0 +1,63 @@ + diff --git a/src/template-pagina/sub-templates/thiagobronisio-header.html b/src/template-pagina/sub-templates/thiagobronisio-header.html index 1a302f1..338bbd8 100644 --- a/src/template-pagina/sub-templates/thiagobronisio-header.html +++ b/src/template-pagina/sub-templates/thiagobronisio-header.html @@ -7,7 +7,7 @@ - +