From 3895e08f1a36a84294ce3c3f05b0eedcc72cbf73 Mon Sep 17 00:00:00 2001 From: Saulo Klein Nery Date: Wed, 7 Dec 2022 18:14:24 -0300 Subject: [PATCH] feat: Cria menu deskotp --- src/arquivos/sass/partials/_header.scss | 5 + src/arquivos/sass/partials/_menu.scss | 118 +++++++++++++++++- src/arquivos/sass/utils/_normalize.scss | 2 +- src/arquivos/sprite/right-arrow-icon.png | Bin 0 -> 230 bytes src/controles-customizados/menuPrincipal.html | 78 ++++++++++++ .../sub-templates/sauloklein-header.html | 2 +- 6 files changed, 202 insertions(+), 3 deletions(-) create mode 100644 src/arquivos/sprite/right-arrow-icon.png create mode 100644 src/controles-customizados/menuPrincipal.html diff --git a/src/arquivos/sass/partials/_header.scss b/src/arquivos/sass/partials/_header.scss index dc2e808..ae90bb3 100644 --- a/src/arquivos/sass/partials/_header.scss +++ b/src/arquivos/sass/partials/_header.scss @@ -1,6 +1,7 @@ .page-header { background: $black-500; padding: 28px 0 29px; + position: relative; @include mq(lg, max) { padding: 18px 0 0; @@ -149,5 +150,9 @@ &__search-box { margin-top: 18px; border-top: 1px solid; + + @include mq(lg, min) { + display: none; + } } } diff --git a/src/arquivos/sass/partials/_menu.scss b/src/arquivos/sass/partials/_menu.scss index 5de6830..b5d4dab 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; @@ -11,6 +13,120 @@ } .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 { + font-weight: 700; + text-decoration: underline; + 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); + font-weight: bold; + display: block; + height: 0; + overflow: hidden; + visibility: hidden; + } + } + } + } + + .submenu { + opacity: 0; + pointer-events: none; + position: absolute; + top: calc(100% + 32px); + width: 100%; + z-index: map-get($z-index, level-4); + left: 0; + padding: 30px 0 43px; + background: rgba(255, 255, 255, 0.95); + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.02); + transition: all 0.2s ease-in-out; + + &::before { + content: ""; + position: absolute; + left: 0; + bottom: 100%; + display: block; + width: 100%; + height: 28px; + background: transparent; + } + + &__title { + font-size: 20px; + margin: 0; + line-height: 24px; + margin-bottom: 16px; + } + + &__categories-wrapper { + display: flex; + margin-bottom: 8px; + } + + &__categories { + margin-right: 30px; + } + + &__category { + padding: 8px 0; + } + + &__category-link, + &__see-all { + line-height: 15px; + color: $black-500; + font-size: 12px; + } + + &__category-link { + transition: color 0.2s linear; + + @include mq(lg, min) { + &:hover { + color: $blue-500; + } + } + } + + &__see-all { + font-weight: bold; + display: flex; + align-items: center; + margin-right: 9px; + } } } diff --git a/src/arquivos/sass/utils/_normalize.scss b/src/arquivos/sass/utils/_normalize.scss index 8b291cf..e61f344 100644 --- a/src/arquivos/sass/utils/_normalize.scss +++ b/src/arquivos/sass/utils/_normalize.scss @@ -23,7 +23,7 @@ html { */ body { - color: $color-black2; + color: $black-500; margin: 0; } diff --git a/src/arquivos/sprite/right-arrow-icon.png b/src/arquivos/sprite/right-arrow-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..539b8defb799aaebce4bd813bb853560dd13b122 GIT binary patch literal 230 zcmeAS@N?(olHy`uVBq!ia0vp^JU}eQ!3HG1Sky`ZDb50q$YP+FDhM-r2B~}i3NjW4 zxjQkeJ16rJ$YDu$^mSxl*x1kgCy^D%ul96t45?t;Ix&&AK|!R&U)O;pH-Sa@#sLkf zgK8lg8U=e6@P632*SB7yz&Y>tu^aoCk1;oR7VL66YRfTAYoTD&-Et>IorQ~1^NkMu za?d;ww5nBi>z2p=PM%pR6vOwb=>mt W286x2l@Shf27{-opUXO@geCy{=1*n- literal 0 HcmV?d00001 diff --git a/src/controles-customizados/menuPrincipal.html b/src/controles-customizados/menuPrincipal.html new file mode 100644 index 0000000..8e75f50 --- /dev/null +++ b/src/controles-customizados/menuPrincipal.html @@ -0,0 +1,78 @@ + diff --git a/src/template-pagina/sub-templates/sauloklein-header.html b/src/template-pagina/sub-templates/sauloklein-header.html index 272a82f..8356179 100644 --- a/src/template-pagina/sub-templates/sauloklein-header.html +++ b/src/template-pagina/sub-templates/sauloklein-header.html @@ -6,7 +6,7 @@ - +