From 6811b1270be49293983430c2854bf59270f41b80 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cain=C3=A3=20Milech?= Date: Tue, 6 Dec 2022 17:51:04 -0300 Subject: [PATCH] feat: adiciona menu mobile --- src/arquivos/sass/main.scss | 1 + src/arquivos/sass/partials/_menu.scss | 89 +++++++++++++++++- src/arquivos/sass/partials/_search.scss | 38 ++++++++ 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 -> 536 bytes .../sprite/menu-mobile-arrow-icon.png | Bin 0 -> 267 bytes src/controles-customizados/menuPrincipal.html | 48 +++++++--- 8 files changed, 166 insertions(+), 13 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-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/_menu.scss b/src/arquivos/sass/partials/_menu.scss index 1473ea5..7d5014d 100644 --- a/src/arquivos/sass/partials/_menu.scss +++ b/src/arquivos/sass/partials/_menu.scss @@ -11,21 +11,82 @@ } } + .menu-header { + &__top-wrapper { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px; + } + + &__text { + display: flex; + align-items: center; + color: $gray-200; + font-size: 12px; + line-height: 15px; + + 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); + width: 100%; + height: 100%; + background: $white-500; + } + &__departments { display: flex; margin: 0; - height: 100%; + + @include mq(lg, max) { + flex: 1; /*para empurrar o account para baixo*/ + flex-direction: column; + } + + @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 { font-weight: 700; @@ -48,6 +109,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,6 +129,21 @@ } } } + + &__account-link { + display: flex; + align-items: center; + justify-content: center; + height: 64px; + background: $black-500; + font-size: 10px; + line-height: 12px; + color: $white-500; + + i { + margin-right: 16px; + } + } } .submenu { diff --git a/src/arquivos/sass/partials/_search.scss b/src/arquivos/sass/partials/_search.scss new file mode 100644 index 0000000..8e4f9cd --- /dev/null +++ b/src/arquivos/sass/partials/_search.scss @@ -0,0 +1,38 @@ +.busca { + display: flex; + align-items: center; + + margin: 0; + + legend, + label, + select { + display: none; + } + + .fulltext-search-box { + flex: 1; + height: 23px; + padding: 0; + border: 0; + background: transparent; + outline: 0; + color: $white-500; + font-size: 10px; + line-height: 12px; + } + + .btn-buscar { + width: 23px; + height: 23px; + padding: 0; + border: 0; + outline: 0; + font-size: 0; + background-color: transparent; + + /*quando ja tem estrutuura, e temos que substituir*/ + @extend .sprite; + @extend .sprite-search-icon; + } +} diff --git a/src/arquivos/sass/utils/_variaveis.scss b/src/arquivos/sass/utils/_variaveis.scss index 1992c4c..cb83cda 100644 --- a/src/arquivos/sass/utils/_variaveis.scss +++ b/src/arquivos/sass/utils/_variaveis.scss @@ -9,6 +9,9 @@ $font-height: 1.5; $black-500: #000; $white-500: #fff; $blue-500: #00c8ff; + +$gray-100: #e0e0e0; +$gray-200: #828282; $gray-500: #333; // 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..cc8c56c475a823a14ec8ba1c0eb7087d445188ee GIT binary patch literal 536 zcmV+z0_XjSP)Ag|dMbe}f$c5N^9bvbE)LZ-5d?t?f+uus>IVmV-EOzO zC;(?Yo6SOy-_ihJeT=q(e`?z2eu;5lB?G*jCfAo~RZ9F4gInOu_q`~Chz z#$mw8x&dEYdjo8&L-p)GNeIXknPVh+-otZ%EX(YM(}{#Y#$R1?7EKI=3w4AXoPE_Q zq`FDa>I)UpdCQsaavFlt7u?fJGj(7t?_fzI0(>#b a%jO$Yl)r?`u71@30000``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eB{sK=I$B+uf-g9?(TNHR05~9R*@V;}~A^4>= z{q6zLISzA=h}Nhnu6e-G_kc;D+c8;Wg4&-cHA`8SUO6G5-D9{_ASrF4LzL)R`R6g- zn*TL#{Q9lldNB9OzJ)YL--^HtmA4ceLwS`66)KURBQf6yQG z`drlQ-z5tdrN0(f6rsSrlcnea=lu(O#S^&CII_#Um=kp3D4WESh9xUSPHO<&%HZkh K=d#Wzp$Py7_F{Pe literal 0 HcmV?d00001 diff --git a/src/controles-customizados/menuPrincipal.html b/src/controles-customizados/menuPrincipal.html index 99c5fbf..6e5bfab 100644 --- a/src/controles-customizados/menuPrincipal.html +++ b/src/controles-customizados/menuPrincipal.html @@ -1,7 +1,24 @@