From 921f1bd2bbba78ff499344769906de5df483d522 Mon Sep 17 00:00:00 2001 From: Gabriel Ferraz Date: Wed, 7 Dec 2022 17:42:08 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20cria=C3=A7=C3=A3o=20do=20menu=20no=20mo?= =?UTF-8?q?bile?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/arquivos/sass/main.scss | 1 + src/arquivos/sass/partials/_header.scss | 35 ---- src/arquivos/sass/partials/_menu.scss | 162 ++++++++++++++++-- src/arquivos/sass/partials/_search.scss | 34 ++++ src/arquivos/sass/utils/_variaveis.scss | 6 +- src/arquivos/sprite/back-icon.png | Bin 0 -> 271 bytes src/arquivos/sprite/close-menu-icon.png | Bin 0 -> 366 bytes src/arquivos/sprite/lock-icon.png | Bin 0 -> 538 bytes .../sprite/menu-mobile-arrow-icon.png | Bin 0 -> 273 bytes src/controles-customizados/menuPrincipal.html | 58 +++++-- 10 files changed, 231 insertions(+), 65 deletions(-) create mode 100644 src/arquivos/sass/partials/_search.scss create mode 100644 src/arquivos/sprite/back-icon.png create mode 100644 src/arquivos/sprite/close-menu-icon.png create mode 100644 src/arquivos/sprite/lock-icon.png create mode 100644 src/arquivos/sprite/menu-mobile-arrow-icon.png diff --git a/src/arquivos/sass/main.scss b/src/arquivos/sass/main.scss index d75e9b2..4275639 100644 --- a/src/arquivos/sass/main.scss +++ b/src/arquivos/sass/main.scss @@ -18,6 +18,7 @@ @import "./partials/header"; @import "./partials/menu"; +@import "./partials/search"; @import "./partials/barraDeVantagens"; @import "./partials/footer"; @import "./partials/breadcrumb"; diff --git a/src/arquivos/sass/partials/_header.scss b/src/arquivos/sass/partials/_header.scss index ecb31d1..b8d5b27 100644 --- a/src/arquivos/sass/partials/_header.scss +++ b/src/arquivos/sass/partials/_header.scss @@ -25,41 +25,6 @@ } } - .busca { - display: flex; - align-items: center; - margin: 0; - - legend, - label, - select { - display: none; - } - .fulltext-search-box { - flex: 1; - height: 23px; - outline: 0; - border: 0; - padding: 0; - line-height: 12px; - font-size: 10px; - color: $white; - background-color: transparent; - } - .btn-buscar { - width: 23px; - height: 23px; - padding: 0; - border: 0; - outline: 0; - font-size: 0; - background-color: transparent; - - @extend .sprite; - @extend .sprite-search-icon; - } - } - .user-items { display: flex; align-items: center; diff --git a/src/arquivos/sass/partials/_menu.scss b/src/arquivos/sass/partials/_menu.scss index 3b82d39..3b8b87a 100644 --- a/src/arquivos/sass/partials/_menu.scss +++ b/src/arquivos/sass/partials/_menu.scss @@ -12,20 +12,84 @@ } } + .menu-header { + &__top-wrapper { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px; + } + + &__text { + display: flex; + align-items: center; + line-height: 15px; + font-size: 12px; + color: $gray-200; + + i { + margin-right: 10px; + } + } + + &__close-button { + padding: 0; + border: 0; + outline: 0; + background: transparent; + } + + &__search-box { + background: $black; + + .busca { + padding: 16px; + } + } + } + .main-menu { height: 100%; + @include mq(lg, max) { + display: flex; + flex-direction: column; + position: fixed; + top: 0; + left: 0; + z-index: map-get($z-index, menu); + transform: translateX(-100%); + width: 100%; + height: 100%; + background: $white; + } + &__departments { display: flex; - height: 100%; margin: 0; + + @include mq(lg, max) { + flex: 1; + flex-direction: column; + position: relative; + overflow: hidden auto; + } + + @include mq(lg, min) { + height: 100%; + } } &__department { display: flex; align-items: center; - margin-right: 40px; + + @include mq(lg, max) { + border-bottom: 1px solid $gray-100; + } @include mq(lg, min) { + margin-right: 40px; + &:hover { .main-menu__department-link { text-decoration: underline; @@ -45,7 +109,16 @@ font-size: 12px; color: $white; - &:hover { + @include mq(lg, max) { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + padding: 20px 16px; + color: $black; + } + + @include mq(lg, min) { &::after { content: attr(title); display: block; @@ -56,20 +129,47 @@ } } } + + &__accont-link { + display: flex; + align-items: center; + justify-content: center; + height: 64px; + line-height: 12px; + font-size: 10px; + color: $white; + background: $black; + + i { + margin-right: 16px; + } + } } .submenu { position: absolute; - top: calc(100% + 32px); - left: 0; - z-index: map-get($z-index, menu); width: 100%; - padding: 30px 0 43px; - background: rgba($white, 0.95); - box-shadow: 0px 4px 4px rgba($black, 0.02); - opacity: 0; - pointer-events: none; - transition: all 0.2s ease-in-out; + + @include mq(lg, max) { + top: 0; + left: 100%; + height: 100%; + overflow: auto; + padding-bottom: 34px; + background: $white; + } + + @include mq(lg, min) { + top: calc(100% + 32px); + left: 0; + z-index: map-get($z-index, menu); + padding: 30px 0 43px; + background: rgba($white, 0.95); + box-shadow: 0px 4px 4px rgba($black, 0.02); + opacity: 0; + pointer-events: none; + transition: all 0.2s ease-in-out; + } & ::before { content: ""; @@ -81,15 +181,49 @@ background: transparent; } + .container { + @include mq(lg, max) { + padding: 0 16px; + } + } + + &__return-button { + display: flex; + align-items: center; + width: 100%; + margin-bottom: 34px; + padding: 16px; + border: solid $gray-100; + border-width: 0 0 1px 0; + outline: 0; + text-align: left; + background: transparent; + + i { + margin-right: 8px; + } + } + &__title { margin: 0 0 8px; line-height: 24px; font-size: 20px; + + @include mq(lg, max) { + line-height: 14px; + font-size: 12px; + text-decoration-line: underline; + color: $blue; + } } &__categories-wrapper { - display: flex; - margin-bottom: 8px; + margin-bottom: 16px; + + @include mq(lg, min) { + display: flex; + margin-bottom: 8px; + } } &__categories { diff --git a/src/arquivos/sass/partials/_search.scss b/src/arquivos/sass/partials/_search.scss new file mode 100644 index 0000000..1b5f43d --- /dev/null +++ b/src/arquivos/sass/partials/_search.scss @@ -0,0 +1,34 @@ +.busca { + display: flex; + align-items: center; + margin: 0; + + legend, + label, + select { + display: none; + } + .fulltext-search-box { + flex: 1; + height: 23px; + outline: 0; + border: 0; + padding: 0; + line-height: 12px; + font-size: 10px; + color: $white; + background-color: transparent; + } + .btn-buscar { + width: 23px; + height: 23px; + padding: 0; + border: 0; + outline: 0; + font-size: 0; + background-color: transparent; + + @extend .sprite; + @extend .sprite-search-icon; + } +} diff --git a/src/arquivos/sass/utils/_variaveis.scss b/src/arquivos/sass/utils/_variaveis.scss index e7f8984..02dec20 100644 --- a/src/arquivos/sass/utils/_variaveis.scss +++ b/src/arquivos/sass/utils/_variaveis.scss @@ -7,8 +7,12 @@ $font-height: 1.5; // colors $black: #000; $white: #fff; -$blue: #00c8ff; + $gray: #333; +$gray-100: #e0e0e0; +$gray-200: #828282; + +$blue: #00c8ff; // Grid breakpoints diff --git a/src/arquivos/sprite/back-icon.png b/src/arquivos/sprite/back-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..82a786ce5d69f5f04499306cd569f2a007546014 GIT binary patch literal 271 zcmeAS@N?(olHy`uVBq!ia0vp^Ahr+(8<0%e?(YqxI14-?iy0WiR6&^0Gf3qFP>``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eB{t{0Y$B+uf-b-(JnG|{09&F#y&}sNF-93R- z{bFDVQ}_i=8Ao>u^8^OpJOkEKuuVbJfVWtG=oHM2q5&y=zLNH|)&2As1v|mv;IZ znzopr0NV#%i~s-t literal 0 HcmV?d00001 diff --git a/src/arquivos/sprite/close-menu-icon.png b/src/arquivos/sprite/close-menu-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..b4cf54dd78f91c7b221c19d8097dfbaf2a5e2e35 GIT binary patch literal 366 zcmeAS@N?(olHy`uVBq!ia0vp^svyk41|*NpQ(y*CoCO|{#S9E$KnXEbM$aIX4?sc2 z;vjb?hIQv;UIIBR>5jgR3=A9lx&I`x0_B)JT^vIy7>{1g=RIT~!1}>kpn+9Ifl+;R z^TP!HQ!)vR+!_u{LJPbzB$lkHe}C8e-t^Lwe<#J2e>(YQ_xHV=_8)A2#$A_BzyEx9 zb3yaf91oTwZHh*}_sHxx!N}Zp;>_;%ihmxoa65AWg~g9FEfiV8>#Xa+-4+&*FHzN4 zb?}1p6|QEn6=H0;0h&BI0eU<+0bFGpnU*G`Es&YPsi9Jq>g{gGmGb)+n-otqP?QT8>!;CQZ8zU*NpL+jee2n#2@`s|Fg) zU5N^fn-Ue8HziDFd?EklVKq-XkRkq!l}nP>LD4U4f%uFQx$By3n3mMuJSxz;BKj{$S{m3%d!)$57%|0E+0nM28U3*XbXXz~DJfUfN88~v28Gwc5Y$U}#7vMh-V2hftdBl+hqTULuC z-{>qU`5(>?EL)BeDzI9X?`W(5z!q((+M(nv$B-Lfjy6>pgKI2eo)Pw#;w68Ua*`x$ zA{=rKB28u!A^RMlEl2Qv;TRKC(7>nx;BceKT(cW+5wf|^M3BES0@Lw4o6Y2hdPUpF literal 0 HcmV?d00001 diff --git a/src/arquivos/sprite/menu-mobile-arrow-icon.png b/src/arquivos/sprite/menu-mobile-arrow-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..e90833ca8adfb6e83e3f72a783da9a01c22ab319 GIT binary patch literal 273 zcmeAS@N?(olHy`uVBq!ia0vp^Ahr+(8<0%e?(YqxI14-?iy0WiR6&^0Gf3qFP>``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eB{xVM&$B+uf-b)vG4=D&RT)4NfLAiv*+~BX` z!_zw&wJjR&y10Ls?GSTN(8_5)C(FTr%Uf)#rXRRF(R~O10g2BpM<##&r?m8siHicm zoaCOh0*}^iwVPzHHhLw$DNp6*YjMF;~*!nV8WKEpe)_Y0$ RZVS-G44$rjF6*2UngG* +
+
+
+ + COMPRA 100% SEGURA +
+ + +
+ +
+ +
+
+