From 99f4179d83d93f82d189fa1d684f64a850817668 Mon Sep 17 00:00:00 2001 From: amanda almeida Date: Wed, 7 Dec 2022 23:18:02 -0300 Subject: [PATCH] feat(menu-mobile): Adiciona menu mobilea pagina --- src/arquivos/sass/main.scss | 1 + src/arquivos/sass/partials/_header.scss | 37 ------- src/arquivos/sass/partials/_menu.scss | 103 +++++++++++++++++- src/arquivos/sass/partials/_search.scss | 37 +++++++ src/arquivos/sass/utils/_variaveis.scss | 3 + src/arquivos/sprite/close-icon.png | Bin 0 -> 347 bytes src/arquivos/sprite/lock-icon.png | Bin 0 -> 527 bytes .../sprite/menu-mobile-arrow-icon.png | Bin 0 -> 271 bytes src/controles-customizados/menuPrincipal.html | 57 +++++++--- 9 files changed, 181 insertions(+), 57 deletions(-) create mode 100644 src/arquivos/sass/partials/_search.scss create mode 100644 src/arquivos/sprite/close-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..be7643f 100644 --- a/src/arquivos/sass/main.scss +++ b/src/arquivos/sass/main.scss @@ -24,3 +24,4 @@ @import "./partials/prateleira"; @import "./partials/ajustes"; @import "./partials/flags"; +@import "./partials/search"; diff --git a/src/arquivos/sass/partials/_header.scss b/src/arquivos/sass/partials/_header.scss index cba2411..6cc0448 100644 --- a/src/arquivos/sass/partials/_header.scss +++ b/src/arquivos/sass/partials/_header.scss @@ -28,43 +28,6 @@ } } - .busca { - display: flex; - align-items: center; - margin: 0; - - - legend, - label, - select { - display: none; - } - - .fulltext-search-box { - flex: 1; - height: 23px; - padding: 0; - border: 0; - outline: 0; - background: transparent; - - 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; - @extend .sprite; - @extend .sprite-search-icon; - } - } .user-items { display: flex; diff --git a/src/arquivos/sass/partials/_menu.scss b/src/arquivos/sass/partials/_menu.scss index a3224b4..913a679 100644 --- a/src/arquivos/sass/partials/_menu.scss +++ b/src/arquivos/sass/partials/_menu.scss @@ -12,21 +12,90 @@ } } + .menu-header { + &__top-wrapper { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px; + } + + &__text { + display: flex; + align-items: center; + gap: 10px; + font-size: 12px; + line-height: 15px; + color: $gray-200; + + &::after { + content: ''; + width: 1px; + height: 36px; + margin-left: 128px; + background: $gray-100; + } + } + + &__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; + 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; @@ -51,9 +120,24 @@ text-transform: uppercase; - color: #FFFFFF; + 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) { + i { + display: none; + } + &::after { content: attr(title); font-weight: bold; @@ -64,6 +148,18 @@ } } } + + &__account-link { + display: flex; + align-items: center; + justify-content: center; + gap: 16px; + height: 64px; + font-size: 10px; + line-height: 12px; + color: $white-500; + background: $black-500; + } } .submenu { @@ -79,6 +175,7 @@ pointer-events: none; transition: all 0.4s ease-in-out; + &::before { content: ""; position: absolute; diff --git a/src/arquivos/sass/partials/_search.scss b/src/arquivos/sass/partials/_search.scss new file mode 100644 index 0000000..6ac4a68 --- /dev/null +++ b/src/arquivos/sass/partials/_search.scss @@ -0,0 +1,37 @@ +.busca { + display: flex; + align-items: center; + margin: 0; + + + legend, + label, + select { + display: none; + } + + .fulltext-search-box { + flex: 1; + height: 23px; + padding: 0; + border: 0; + outline: 0; + background: transparent; + + 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; + @extend .sprite; + @extend .sprite-search-icon; + } +} diff --git a/src/arquivos/sass/utils/_variaveis.scss b/src/arquivos/sass/utils/_variaveis.scss index 196e2a4..7594801 100644 --- a/src/arquivos/sass/utils/_variaveis.scss +++ b/src/arquivos/sass/utils/_variaveis.scss @@ -11,6 +11,9 @@ $black-500: #000; $white-500: #fff; $blue-500: #00C8FF; $gray-500: #333333; +$gray-200: #828282; +$gray-100: #E0E0E0; + // universal diff --git a/src/arquivos/sprite/close-icon.png b/src/arquivos/sprite/close-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..fee5ccd2394b855ee5db9784604edcf3959f455d GIT binary patch literal 347 zcmeAS@N?(olHy`uVBq!ia0vp^svyk41|*NpQ(y*CoCO|{#S9E$KnXEbM$aIX4?sc2 z;vjb?hIQv;UIIBR>5jgR3=A9lx&I`x0{I_2T^vIy7>{1b=VdbFVf~;c;lLy`p+Q(J zk*~~eLIa!10tQZxhS)=g?k=5P8vXm%r0*-ezj=Rq?(qLkQU6Z=L+VfCisZL2*4FJ6 zGRxdp{>ULCBI#S-X9WXhmLBH4MgFOd3OZ}JoDLsR5LqLc!uy&n@?e|eEd$dDVm`7a zT*k~_51nybYarpl)!dx5VYm1Swqj<_1ib}9?@l~(E8;3&sd~RvnuG6l^|zDUVZYm% z8WT+g7A6J>@Lc0EYX91FCSkEc=?pOs-etT}ZIO+;60a>tli*TmTj;2C;|as9=Do$| pQ!OkTwrvnyp<>nG#iZ*HuaKBK>Cipz*Fe8Bc)I$ztaD0e0sx3Tdv5>$ 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..bcd4dab5cae2f100f8d0c3fa85e0f1ecc9072d6b GIT binary patch literal 527 zcmV+q0`UEbP)v~|HXEW%uv)DGEOU@c-B6&-a=DCH z4s_H)h%IPJJ%Eg2&zMNtUDL5;mYxt@xHQxgVUVsStw#P5g=niC$ySlEg^pn0lSqE{T%;U*FI#$mNME^fUZiym$O6vI! zh*aC z%Gz^B2>%^mx~?(z3&ZRY(&wSw(is?k7NN&?G#+9J2M^fje+SnzEMkn8#W(1(o|aub RJ2L6``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eB{t{0Y$B+uf-g6gu4=D(+CHzljG`}Et=fICc zs|%UK3z$lUWDlk@C9=A|;D}}TV6Y`KYC#Osor&)sEZADdY+?0WFX+_!WdcWDoOvF{ zkvKJ|UFk`w_s?x@g67F*ruK*LdR^IbxrT@5q|~u3tJ@6cFKrRu(6ZT}eI-k0hPmeN zH{I86?f(96;;Fvb)8d~CxVMXmaBo>4xNf0+j-%lUR^AViPCu>$^vJh8ZeILFRNMjR OUItHBKbLh*2~7Y2r)2a1 literal 0 HcmV?d00001 diff --git a/src/controles-customizados/menuPrincipal.html b/src/controles-customizados/menuPrincipal.html index a4b0f4e..8162991 100644 --- a/src/controles-customizados/menuPrincipal.html +++ b/src/controles-customizados/menuPrincipal.html @@ -1,9 +1,25 @@