From 2c5fe17153ec48a85ed140c8cce73348da5c9c16 Mon Sep 17 00:00:00 2001 From: Bernardo Waldhelm Date: Wed, 7 Dec 2022 11:29:52 -0300 Subject: [PATCH] =?UTF-8?q?Adiconando=20altera=C3=A7=C3=B5es=20header=20mo?= =?UTF-8?q?bile?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/arquivos/sass/partials/_header.scss | 117 ++-- src/arquivos/sass/partials/_menu.scss | 511 +----------------- src/arquivos/sass/utils/_variaveis.scss | 1 + src/arquivos/sprite/bag-icon.png | Bin 847 -> 827 bytes src/arquivos/sprite/menu-icon.png | Bin 0 -> 737 bytes src/arquivos/sprite/user-icon.png | Bin 770 -> 822 bytes .../sub-templates/bernardo-header.html | 18 +- 7 files changed, 105 insertions(+), 542 deletions(-) create mode 100644 src/arquivos/sprite/menu-icon.png diff --git a/src/arquivos/sass/partials/_header.scss b/src/arquivos/sass/partials/_header.scss index 1a8661b..c0833b6 100644 --- a/src/arquivos/sass/partials/_header.scss +++ b/src/arquivos/sass/partials/_header.scss @@ -2,15 +2,65 @@ background: $black; padding: 28px 0; + @include mq(lg, max) { //trazendo do _mixing.scss + padding: 18px 0 0; + } + + &__wrapper { display: grid; grid-template-columns: 2fr 1fr 2fr; align-items: center; + + @include mq(lg, max) { //trazendo do _mixing.scss + grid-template-columns: repeat(3, 1fr); + } } &__logo { display: block; margin: 0 auto; + + @include mq(lg, max) { //trazendo do _mixing.scss + max-width: 66px; + } + } + + .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; + font-size: 10px; + line-height: 12px; + background: transparent; + color: $white; + } + + .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 { @@ -18,60 +68,41 @@ align-items: center; justify-content: flex-end; - .busca { + &__search-box { flex: 1; - display: flex; - align-items: center; max-width: 212px; - margin: 0; - padding: 8px 0; - border-bottom: 1px solid $white; - legend, - label, - select { + @include mq(lg, max) { //trazendo do _mixing.scss display: none; } - .fulltext-search-box { - flex: 1; - height: 23px; - outline: 0; - border: 0; - padding: 0; - font-size: 10px; - line-height: 12px; - background: transparent; - color: $white; - - + .busca{ + border-bottom: 1px solid $white; + padding: 8px 0; } - - .btn-buscar { - width: 23px; - height: 23px; - padding: 0; - border: 0; - outline: 0; - font-size: 0; - background-color: transparent; - - @extend .sprite; - @extend .sprite-search-icon; - } - } &__account-link{ display: flex; align-items: center; - &::before, &::after { + &::before, + &::after { content: ""; width: 1px; height: 19px; margin: 0 24px; background: $white; + + @include mq(lg, max) { //trazendo do _mixing.scss + margin: 0 16px; + } + } + + &::before { + @include mq(lg, max) { //trazendo do _mixing.scss + display: none; + } } } @@ -116,5 +147,19 @@ } } + + } + &__search-box { + margin-top: 18px; + border-top: 1px solid $gray; + + @include mq(lg, min) { + display: none; + } + + .busca{ + padding: 13px 0; + } + } } diff --git a/src/arquivos/sass/partials/_menu.scss b/src/arquivos/sass/partials/_menu.scss index afd0df8..53762a8 100644 --- a/src/arquivos/sass/partials/_menu.scss +++ b/src/arquivos/sass/partials/_menu.scss @@ -1,514 +1,17 @@ -/***************************************************************/ -/**-- Menu ------------------------------********************/ -/*-------------------------------------------------------------*/ +.menu { -.menu-principal { - position: initial; - - @include mq(lg, max) { - background-color: $white; - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05); - bottom: 0; - left: 0; - margin-left: -100%; - max-width: 375px; - overflow: hidden; - opacity: 0; + &__button { padding: 0; - position: fixed; - top: 0; - transition: all 0.45s ease-in-out; - visibility: hidden; - width: 100%; - z-index: map-get($z-index, menu); - } - - @include mq_range(lg, xl) { - padding-right: 0; - } - - &.mobile-open { - margin-left: 0; - opacity: 1; - visibility: visible; - } - - .header-menu-mobile { - display: none; - border-bottom: 1px solid #eee; - padding: 22px 15px 0; - margin: 0 -15px; - - @include mq(lg, max) { - display: block; - } - - p { - display: inline-block; - font-size: 12px; - letter-spacing: 0.5px; - margin: 0; - text-transform: uppercase; - padding: 0 16px; - } - - #close-menu-button { - background: transparent; - border: none; - cursor: pointer; - display: inline-block; - right: 16px; - outline: none; - position: absolute; - top: 17px; - - &::before { - border-left: 1px solid #eee; - content: ""; - display: block; - height: 36px; - position: absolute; - left: -20px; - top: -6px; - } - - span { - display: block; - padding: 12px; - position: relative; - - &::before, - &::after { - border: 1px solid #142032; - content: ""; - display: block; - left: 0; - position: absolute; - top: 12px; - width: 24px; - } - - &::before { - transform: rotate(45deg); - } - - &::after { - transform: rotate(-45deg); - } - } - } - - .busca { - background-color: #eee; - border-top: 1px solid #e5e5e5; - border-bottom: none; - max-width: 100%; - margin-top: 22px; - padding: 10px 0; - } - } - - .itens { - font-size: 14px; - margin: 0; - - @include mq(lg, max) { - bottom: 64px; - left: 0; - overflow-y: auto; - overflow-x: hidden; - position: absolute; - top: 117px; - width: 100%; - } - - &::-webkit-scrollbar { - width: 6px; - } - - &::-webkit-scrollbar-track { - background-color: hsla(0, 0%, 90%, 1); - } - - &::-webkit-scrollbar-thumb { - background-color: hsl(0, 0%, 77%); - } - - &::-webkit-scrollbar-thumb:hover { - background-color: darken(hsl(0, 0%, 77%), 10); - } - - > li { - display: inline-block; - line-height: 18px; - text-align: left; - vertical-align: top; - - @include mq(lg, max) { - align-items: center; - display: flex; - justify-content: space-between; - padding: 0 24px; - border-bottom: 1px solid #eee; - - a { - font-size: 16px; - padding: 17px 0px; - width: 100%; - } - } - - &:hover { - > a::after { - @include mq(lg, min) { - border-bottom-color: #f71963; - border-width: 4px; - } - } - } - - &:not(:last-child) { - @include mq(lg, min) { - border-right: 1px solid #000; - margin-right: 24px; - padding-right: 24px; - } - - @include mq_range(lg, xl) { - margin-right: 16px; - padding-right: 16px; - } - } - - > a { - display: inline-block; - position: relative; - - &:after { - @include mq(lg, min) { - bottom: 0; - border-bottom: 1px solid transparent; - content: ""; - left: 0; - position: absolute; - right: 0; - transition: all 0.15s ease-in-out; - width: 100%; - } - } - } - - .ver-departamento { - background-color: transparent; - border: none; - cursor: pointer; - display: inline-block; - text-indent: -9999px; - overflow: hidden; - font-size: 0; - outline: none; - opacity: 0.75; - - &:before { - @include pseudo(block, relative); - @extend .sprite; - @extend .sprite-arrow-right-gray; - } - - @include mq(lg, min) { - display: none; - } - } - } - - a { - color: #142032; - display: inline-block; - } - - .highlight { - color: #f71963; - font-weight: 700; - - &::before { - content: ""; - left: -20.5px; - position: absolute; - top: -2px; - @extend .sprite; - @extend .sprite-pinrinpinpin; - - @include mq(lg, max) { - top: 13px; - } - } - } - } - - .footer-menu-mobile { - background-color: #f71963; - bottom: 0; - left: 0; - padding: 17.5px 15px; - position: absolute; - right: 0; - text-align: center; + border: 0; + outline: 0; + background: transparent; @include mq(lg, min) { display: none; } - a { - color: $white; - font-size: 12px; - text-transform: uppercase; - - i { - margin-right: 18px; - } - } - } - - .m3-dropdown { - &:hover { - .m3-dropdown-menu { - @include mq(lg, min) { - max-height: 1000px; - opacity: 1; - top: 100%; - visibility: visible; - } - - &::before { - visibility: visible; - } - } - } - - .m3-dropdown-menu { - background-color: $white; - max-height: 0; - opacity: 0; - transition: all 0.4s ease-in-out; - visibility: hidden; - z-index: map-get($z-index, menu); - position: absolute; - left: 0; - right: 0; - width: 100%; - - @include mq(lg, max) { - border-bottom: 1px solid #eee; - bottom: 64px; - margin-left: 100%; - max-height: initial; - overflow-y: auto; - top: 0px; - transition: all 0.4s ease-in-out, top 0s ease-in-out; - } - - @include mq(lg, min) { - background: rgba(255, 255, 255, 0.95); - border-top: 1px solid hsla(0, 0%, 90%, 1); - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.02); - padding: 45px 0px 37px; - top: 70%; - transition: all 0.2s ease-in-out; - } - - &::before { - content: ""; - position: absolute; - left: 0; - right: 0; - top: -44px; - padding: 22px; - visibility: hidden; - - @include mq(lg, max) { - display: none; - } - } - - &::-webkit-scrollbar { - width: 6px; - } - - &::-webkit-scrollbar-track { - background-color: hsla(0, 0%, 90%, 1); - } - - &::-webkit-scrollbar-thumb { - background-color: hsl(0, 0%, 77%); - } - - &::-webkit-scrollbar-thumb:hover { - background-color: darken(hsl(0, 0%, 77%), 10); - } - - .btn-voltar { - border-bottom: 1px solid #eee; - padding: 7px 24px; - - @include mq(lg, min) { - display: none; - } - - button { - background-color: transparent; - border: none; - cursor: pointer; - font-size: 14px; - font-weight: 700; - outline: none; - padding: 0; - text-transform: uppercase; - - i { - transform: scale(0.5); - } - - span { - display: inline-block; - margin-left: 4px; - padding-top: 3px; - } - } - } - - > div { - @include mq(lg, min) { - align-items: center; - display: flex; - justify-content: flex-start; - } - - .links-menu { - min-width: 38%; - - @include mq(lg, max) { - padding: 0px 9px 36px; - } - - @include mq(lg, min) { - border-left: 1px solid #000; - padding-left: 16px; - } - - .link-departamento { - @include mq(lg, max) { - padding-top: 36px; - } - } - } - - .elementos-menu { - max-width: 438px; - width: 100%; - - @include mq(lg, max) { - display: none; - } - - img { - border-bottom: 5px solid #151728; - } - } - } - - ul { - display: inline-block; - - &:hover li { - opacity: 0.75; - } - - li:hover { - opacity: 1; - } - } - - li { - transition: all 0.1s ease-in-out; - - &:not(:last-child) { - @include mq(lg, min) { - margin-bottom: 16px; - } - } - - @include mq(lg, max) { - margin: 0; - } - - &.link-departamento { - font-size: 24px; - font-weight: 700; - margin-bottom: 24px; - - @include mq(lg, max) { - margin-bottom: 16px; - text-transform: lowercase; - - a { - border-bottom: 4px solid #f71963; - font-size: 18px; - padding: 0; - } - } - } - - &.ver-todos { - a { - color: #f71963; - font-weight: 700; - - @include mq(lg, max) { - font-size: 16px; - } - } - - i { - transform: scale(0.325); - } - } - } - - @include mq(lg, max) { - a { - font-size: 14px; - padding: 8px 0; - width: auto; - } - } - } - } - - .has-sub-menu-open { - @include mq(lg, max) { - position: initial; - transition: position 0.2s ease-in-out; - } - - .m3-dropdown-menu { - @include mq(lg, max) { - top: 117px; - } - } - } - - .sub-menu-open { - .m3-dropdown-menu { - @include mq(lg, max) { - margin-left: 0; - opacity: 1; - visibility: visible; - } - } - - > a:before { - opacity: 1; - transform: rotate(90deg) scale(0.5); + .main-menu { + display: none; } } } diff --git a/src/arquivos/sass/utils/_variaveis.scss b/src/arquivos/sass/utils/_variaveis.scss index 83143ae..c6cebb2 100644 --- a/src/arquivos/sass/utils/_variaveis.scss +++ b/src/arquivos/sass/utils/_variaveis.scss @@ -8,6 +8,7 @@ $font-height: 1.5; $black: #000; $white: #fff; $blue: #00c8ff; +$gray: #333; // Grid breakpoints diff --git a/src/arquivos/sprite/bag-icon.png b/src/arquivos/sprite/bag-icon.png index de679e7410edf3a52203046b1e16a4ad5b8187d8..c87c6d63ef3927fbd897a4e34c4453496cdeaf94 100644 GIT binary patch delta 788 zcmV+v1MB?H2D=6!iBL{Q4GJ0x0000DNk~Le0000i0000m2nGNE0BVq!;gKOVf6z%p zK~#7F)tTXS+At7+4_^PrnE-Wyx)anJkPYe)=mcehW&_9sd7XfCf+iDKnE*0@a)LYi z5R!Q^HWuG|@;y$nbevDRGXV5}F($)SVtd9`nT9R44fQEV0WxN5&QoFg4P$}^tQ>DX zVtcUO#Fk?#NLPt*|3~q*W2`kQe>*dN;TWC4wXly?EM7+3mzyShR&WjIaWhMZgu;X= zU}!`rRL~K;cTIC_U}(e!Dxo8emxqgGiosqM5?}lw=DsP!!A9!IWU_?w5 z){;zL2{0B%>rZoVd$-;Vj@4#xj6h$e-p=dG@9f6 z#KZNb!uI63*?OXE>5t(j9G>JF+qYYL4`%R#~XzP!`9LmmMwxjyQvXFXr z(@78en3J^WSwTnWUPT{^z%b2gLCZwXp&9{of6Ou4E=E%=;?~bA&$u$wCkJhOkHJZ$ zvc8QzDTGt(97|#R%o&&af5I;m5^j(y*5i(~U*?yikAc^C!nu|xU+D8!XWZ`W8p4aY zqt8U2d~bV%NKCVttY=qZUIl)8wxNlnQJJTIX^!di)DG)9wD_QD49$&g|U z9~JVq4qq@KS2V^NhK4A}3KF5BFkCHA4)^k6u@DcCfH9pCQS)jQJ?!J(h|h4WNyO$ars^uB7=?tiFAu-9f3@Q)IJCRrWxPQUU?F|L8|e72VkEGJn6^b2>4q+1oer&eRlBer#HJ|W|#(`>Qv z1?Y=w3RlAI@6J`*LX^%g_?X(=^O4)@Fy*IsE7@53;7`0f3dbX@Cy0B5;t0L zFA=cBPii3Kz(hTi11#}RS`l*KTpx4`SmIx_qAi84z3cV~p36n&fV+6l9T4u&D;+s8 zRz^+hfc?n}Vcmv!@*}$~Y(Rxn!g;=0Hw|7{d~e*8t?Xg)%I0 zBZb-l-g$DYf#AjFejX!mw7th_z(RgFf0&6wtb_~^x@e7s(g?YQJYoGG*(JynGQ@X1 z{O12&u*93LR63Az0W-M0X;M5G0mv68g?w)ju*3}uAyRiZHfdbkRS*;sjBK15p7vkv@8tEb;1TX@RyX9N%@JEH}ft>1N2E|Coa z00000ESk<_h?5&R+l!P*l9aJ^ow8H3>hf>X)rVV$%TfxAua8~|beL6^*B*6uT6gDZ ze+swmwU%uHedL;Px@8AfkEhLV)tfb+eWw1bL;+i|2-L{}&vKS$Pr31w-EvZcbrZ_8&KT@f*T(0!V-jNkdHH*mzn*6@Q>J5yr@A3F#k-ha5z>&6fMRBI^pHhs7b6qB+_9V67WeN_KCU zl0W*n3)Bg@QoV>s;W=iLtCy|H1Pt)jXl4zY3fsM*nN literal 0 HcmV?d00001 diff --git a/src/arquivos/sprite/user-icon.png b/src/arquivos/sprite/user-icon.png index 15dc1816171fc082d08d5eac7d5fa2aa42e7790f..f0e96d9d076b8325e1941cfcd6156b737e2f40e0 100644 GIT binary patch delta 783 zcmV+q1MvKU2DSzviBL{Q4GJ0x0000DNk~Le0000e0000m2nGNE0AqVNn~@df$EQO^?&p&TAn+{UKf8k1UW9Dd=@iW=}H>3o+_1|DFVh$a}Z4Gvi0z8nk zoC?%6^Y!HOVlf0uL9m2CkmZE_9n1|phmB`I1b9vwEB=7FAv$j$5@Ig4zB=!~A7dC?F85V`Aw~U%e252l0Cg;rKez*L)EB z@d?ATne;g!xhWza%y5{rmXH!Mt6`FAqOF~*RuG7onuM%IZc^elrBAeoOie=1zQC|9 z>9l<0kd+o}8EMIDXfQ<i`PjP2oq>x zCcJL@DD>J{t?D2~pg8CqthtZY>Z6V(io-J(8x=-Ocy{xnqrVn?&v0;h(l;@?mtOO`dF(_eGeE$gRf#ISg!4B2~Q}L;{!u?hdL6bnfhxNeJ z&pi?B_|K=cgc*?Q!is~)VW)(Jf$prSx|U^BDXq$+_UPV^o58L&K@_EL4NCniPGEm9vZfxq2T)-WLY#Pk3F N002ovPDHLkV1hMtX6OI_ delta 731 zcmV<10wn#m27(45iBL{Q4GJ0x0000DNk~Le0000a0000h2nGNE01#FxO_3orf0s!_ zK~#7F%~*kP+b|4-I)OF_H>fr!J3%~xM#u(sCull>y+ONy+X?JUAZ=iE0+gr#2WAwL zkf|hphodC}2R;YvHXB23rL=VH({WVwFWX46qK(M!otS z!CjG+yKXI)(OoeB=P49f7o%)?VOM? zjpz#S2D@gdtAi4td11l{??4**;|Gua$laO900dRj{5)L)e?&m7d8v){N1G zhL+6nD>}xsS$lpaf*zj31HJzmg^se|#A}CXY%wE|i(&N;4N%jJ*;_4Kh63^!r5iie zp|~{^_Ym)kwVHiy3VYsfe^3I7h%S3N%t&L|wu|gqm;)RGVNArlFJ9Si9rx3ujKv!r zzQi7HC}o(~exhF?=cWu|BIKP%ELc-1kDVrnIjz`5%i?jyku{QA;pK83c7NaZb%ue;W0NEQ7=|iyrd? zWbA6(%bmzI5CI1 zQU(sj^pkQIH__*jg
- +
+ + + +
+
- +
+ +