From bbc9681b849dbf73ece975e88dae81ea9b6e858a Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Fri, 9 Dec 2022 08:56:22 -0300 Subject: [PATCH] Cria o menu mobile --- src/arquivos/sass/main.scss | 1 + src/arquivos/sass/partials/_header.scss | 40 ----- src/arquivos/sass/partials/_menu.scss | 157 ++++++++++++++++-- src/arquivos/sass/partials/_search.scss | 39 +++++ src/arquivos/sass/utils/_variaveis.scss | 3 + src/arquivos/sprite/close-menu-icon.png | Bin 0 -> 348 bytes src/arquivos/sprite/lock-icon.png | Bin 0 -> 540 bytes src/arquivos/sprite/menu-left-arrow-icon.png | Bin 0 -> 275 bytes .../sprite/menu-mobile-arrow-icon.png | Bin 0 -> 272 bytes src/controles-customizados/menuPrincipal.html | 42 ++++- 10 files changed, 226 insertions(+), 56 deletions(-) create mode 100644 src/arquivos/sass/partials/_search.scss 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-left-arrow-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 4fc63fb..6f82ba2 100644 --- a/src/arquivos/sass/partials/_header.scss +++ b/src/arquivos/sass/partials/_header.scss @@ -26,46 +26,6 @@ } } - .busca { - display: flex; - align-items: center; - margin: 0; - padding: 0; - padding: 8px 0; - border-bottom: 1px solid $white-500; - - legend, - label, - select { - display: none; - } - - .fulltext-search-box { - flex: 1; - height: 23px; - padding: 0; - border: 0; - outline: 0; - font-size: 10px; - line-height: 12px; - color: $white-500; - background: 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 f556f19..c2ec9f2 100644 --- a/src/arquivos/sass/partials/_menu.scss +++ b/src/arquivos/sass/partials/_menu.scss @@ -12,21 +12,85 @@ } } + .menu-header { + &__top-wrapper { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px; + } + + &__text { + display: flex; + align-items: center; + font-size: 12px; + line-height: 15px; + color: $gray-200; + + i { + margin-right: 10px; + } + } + + &__close-button { + padding: 0; + border: 0; + outline: 0; + background: transparent; + } + + &__search-box { + background: $black-500; + + .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, level-5); + transform: translateX(-100%); + width: 100%; + height: 100%; + background: $white-500; + } + &__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; @@ -48,6 +112,15 @@ line-height: 15px; color: $white-500; + @include mq(lg, max) { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + padding: 20px 16px; + color: $black-500; + } + @include mq(lg, min) { &::after { content: attr(title); @@ -59,20 +132,44 @@ } } } + + &__account-link { + display: flex; + align-items: center; + justify-content: center; + height: 64px; + font-size: 10px; + line-height: 12px; + color: $white-500; + background: $black-500; + } } .submenu { position: absolute; - top: calc(100% + 32px); - left: 0; width: 100%; - padding: 30px 0 43px; - z-index: map-get($z-index, level-4); - 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; + + @include mq(lg, max) { + top: 0; + left: 100%; + height: 100%; + overflow: auto; + padding-bottom: 34px; + background: $white-500; + } + + @include mq(lg, min) { + position: absolute; + top: calc(100% + 32px); + left: 0; + padding: 30px 0 43px; + z-index: map-get($z-index, level-4); + 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: ''; @@ -84,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; font-size: 20px; line-height: 24px; + + @include mq(lg, max) { + font-size: 12px; + line-height: 14px; + text-decoration: underline; + color: $blue-500; + } } &__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..347d2e6 --- /dev/null +++ b/src/arquivos/sass/partials/_search.scss @@ -0,0 +1,39 @@ +.busca { + display: flex; + align-items: center; + margin: 0; + padding: 0; + padding: 8px 0; + border-bottom: 1px solid $white-500; + + legend, + label, + select { + display: none; + } + + .fulltext-search-box { + flex: 1; + height: 23px; + padding: 0; + border: 0; + outline: 0; + font-size: 10px; + line-height: 12px; + color: $white-500; + background: 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 710aa1f..f2995c4 100644 --- a/src/arquivos/sass/utils/_variaveis.scss +++ b/src/arquivos/sass/utils/_variaveis.scss @@ -12,6 +12,9 @@ $font-height: 1.5; $black-500: #000; $white-500: #fff; $blue-500: #00C8FF; + +$gray-100: #E0E0E0; +$gray-200: #828282; $gray-500: #333333; // universal diff --git a/src/arquivos/sprite/close-menu-icon.png b/src/arquivos/sprite/close-menu-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..adb1940303bc9f5ec3476cc69762e832efc438f4 GIT binary patch literal 348 zcmeAS@N?(olHy`uVBq!ia0vp^svyk41|*NpQ(y*CoCO|{#S9E$KnXEbM$aIX4?sc2 z;vjb?hIQv;UIIBR>5jgR3=A9lx&I`x0{I_3T^vIy7>{1b=VdbFVf~;c;lLy`p+Q*f zp-hh7ga$U11q_@X4Y7v~-Ca7pH2U|iN#9p`fAjwK+~NP7qW+!!ht!|N70GX5tgYKC zWLCJb{E0(GM9Q~$&m0rjI3(Dsp3Xbfv+ q?c|xvoWUL4=%vOU;JJYH1-E8u?qrM27r23*XYh3Ob6Mw<&;$U|)_olS literal 0 HcmV?d00001 diff --git a/src/arquivos/sprite/lock-icon.png b/src/arquivos/sprite/lock-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..ef0e900e30796d1851c48bee20ee5e70c0859f18 GIT binary patch literal 540 zcmV+%0^|LOP)n5Z~<}rUO$!w1T7rQ$ft54+{A69xHHCL6QozgOCoc18D%rw+xVl0bOR`n_;}$ z-@E z+-x?RIew0k21Va>U5{$u`@RQ9ZiW1|Ua#Ntja^~7TH~oOcr0_xMsWiqbqe8=;2E6c zo)o~%FC>Z~j^hX9BB zPlH-rR9NWL)O?dt8>G6h-G7LBci^;;4N-nyoUh7c?ZkoM=0W47Nk{R@q*Hbf)jU@Z5f>=AXD;>1R* z1Fc@0J}_df9U=NYKvIvp-7Ynp^@2)I?EnU!wMHfSpG7FaGxY?1g*d2)7k)VL>y0`D e=GGZ`^Zx(^xxuF~rO0000``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eB{t8bQ$B+uf-b?p64;cuseR%(hsfokx9!C?$ zKC8~YMZ!Cp{1p5yaEh33VAl8&$@|@^|oRH=%R-&&by=lR*Ynor$Yfm_HubLD&p}ni^tCNGd%OpWIZ`srD8&mBc-PB_F zn|jP`9}M2{xz$i6r%Rx3TO{}Nz=-4nvZYnO7;c{|@c)<+ RUI=tEgQu&X%Q~loCIGyiVfp|7 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..1c74f7b71350f48b02e3844e693a48f8083966fe GIT binary patch literal 272 zcmeAS@N?(olHy`uVBq!ia0vp^Ahr+(8<0%e?(YqxI14-?iy0WiR6&^0Gf3qFP>``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eB{!&jD$B+uf-iv{}hZO|a9^6e#;4|agyg_`P zIr~-v*4rXJhjhNoY)M!sq_vPu;csTfV$R?>Yqs)UvVY5)@pxZu^RuIZ%f7A@T9&IXbkC79J&|uS%gmpf zwA$bF{#a{n_h|Adx%O}V&jl7OmlEM#<;ZR0B)rDaa0lDj58ZdB1@s8M-PE>@{m(}; Qpo1AaUHx3vIVCg!05yzbhX4Qo literal 0 HcmV?d00001 diff --git a/src/controles-customizados/menuPrincipal.html b/src/controles-customizados/menuPrincipal.html index 16945ee..874f999 100644 --- a/src/controles-customizados/menuPrincipal.html +++ b/src/controles-customizados/menuPrincipal.html @@ -1,9 +1,34 @@