From 414084723438399c14b021771c5c756b7da426f5 Mon Sep 17 00:00:00 2001 From: ThiagoDuutra Date: Tue, 6 Dec 2022 15:22:04 -0300 Subject: [PATCH] feat: header mobile --- src/arquivos/sass/partials/_header.scss | 104 ++-- src/arquivos/sass/partials/_menu.scss | 512 +----------------- src/arquivos/sass/utils/_variaveis.scss | 1 + src/arquivos/sprite/menu-mobile.png | Bin 0 -> 734 bytes src/arquivos/sprite/user-icon.png | Bin 772 -> 821 bytes .../sub-templates/thiagodutra-header.html | 16 +- 6 files changed, 95 insertions(+), 538 deletions(-) create mode 100644 src/arquivos/sprite/menu-mobile.png diff --git a/src/arquivos/sass/partials/_header.scss b/src/arquivos/sass/partials/_header.scss index 12523d0..c9f6191 100644 --- a/src/arquivos/sass/partials/_header.scss +++ b/src/arquivos/sass/partials/_header.scss @@ -2,15 +2,63 @@ background-color: $color-black; padding: 28px 0; + @include mq(lg, max) { + padding: 18px 0 0; + } + &__wrapper { display: grid; grid-template-columns: 2fr 1fr 2fr; align-items: center; + + @include mq(lg, max) { + grid-template-columns: repeat(3, 1fr); + } } &__logo { display: block; margin: 0 auto; + + @include mq(lg, max) { + max-width: 66px; + } + } + + .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; + line-height: 12px; + outline: 0; + color: $color-white; + } + + .btn-buscar { + width: 31px; + height: 23px; + padding: 0; + border: 0; + outline: 0; + font-size: 0; + background-color: transparent; + + @extend .sprite; + @extend .sprite-search-icon; + } } .user-items { @@ -18,42 +66,17 @@ align-items: center; justify-content: flex-end; - .busca { - display: flex; - align-items: center; + &__search-box { flex: 1; max-width: 212px; - margin: 0; - padding: 8px 0; - border-bottom: 1px solid $color-white; - legend, - label, - select { + + @include mq(lg, max) { display: none; } - .fulltext-search-box { - flex: 1; - height: 23px; - padding: 0; - border: 0; - background: transparent; - line-height: 12px; - outline: 0; - color: $color-white; - } - - .btn-buscar { - width: 31px; - height: 23px; - padding: 0; - border: 0; - outline: 0; - font-size: 0; - background-color: transparent; - - @extend .sprite; - @extend .sprite-search-icon; + .busca { + padding: 8px 0; + border-bottom: 1px solid $color-white; } } @@ -68,6 +91,12 @@ margin: 0 24px; background: $color-white; } + + &::before { + @include mq(lg, max) { + margin: 0 16px; + } + } } &__minicart-button { @@ -109,4 +138,17 @@ } } } + + &__search-box { + margin-top: 18px; + border-top: 1px solid $color-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 6378b86..577cd86 100644 --- a/src/arquivos/sass/partials/_menu.scss +++ b/src/arquivos/sass/partials/_menu.scss @@ -1,514 +1,16 @@ -/***************************************************************/ -/**-- Menu ------------------------------********************/ -/*-------------------------------------------------------------*/ - -.menu-principal { - position: initial; - - @include mq(lg, max) { - background-color: $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; +.menu { + &__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: #e6e6e6; - } - - &::-webkit-scrollbar-thumb { - background-color: #c4c4c4; - } - - &::-webkit-scrollbar-thumb:hover { - background-color: darken(#c4c4c4, 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 $color-black; - 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: $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: $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 #e6e6e6; - 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: #e6e6e6; - } - - &::-webkit-scrollbar-thumb { - background-color: #c4c4c4; - } - - &::-webkit-scrollbar-thumb:hover { - background-color: darken(#c4c4c4, 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 $color-black; - 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 0359d29..667197b 100644 --- a/src/arquivos/sass/utils/_variaveis.scss +++ b/src/arquivos/sass/utils/_variaveis.scss @@ -9,6 +9,7 @@ $font-height: 1.5; $color-black: #000; $color-white: #fff; $color-blue: #00c8ff; +$color-gray: #333; // Grid breakpoints diff --git a/src/arquivos/sprite/menu-mobile.png b/src/arquivos/sprite/menu-mobile.png new file mode 100644 index 0000000000000000000000000000000000000000..8c9f9070c0abc1462a1b51a2345a1212924cfded GIT binary patch literal 734 zcmV<40wMj0P)o5$*m3MD|j*vIOg9#cYpiBTv08Buc0GOa*0$_rM4cH*wfNT(?T0Kl^oVZPn%jN&O z)3sInktmjAxk+8u=S1|tGNWl>Se6MJpyV$pO_S;mP4CUSYz%Nib~#Lqisg;~00000 zz(h$<4Wb%EHHc~u0000008EgCdS*n`r6H*Xsb@x3U2ck@z8O<>IfwzqQeC1N1ONa4 z0GKqb#Sj-avbPthk|e2O+d8_R*lEkZP1_u98`h;1xW6vrQeeWYwtRGGn`_&Zr~gm5 zZI`OMZkeNO=t_4SPoE1NH)~$|OWm2t0Bpq~&}JUEmb1Kh^v0vR=eY`=>zxKB#sI=C zOX0g9R;KVdz#BhMPTi2D{LEt>x4GS+#FWDYOQ!zhLr#L^jTt%|DXCMk1|O6d13Z#_ zGdupNK`0}86xIiY&Ufwe+dhdgfIR#Y%a!NalEv_HeG2qXH6S*{yP|k3F|@3xRbbT} zOzer!3)x_Jx>e}S$?u}2uPo=aM~(u0&d8?F!CWEA0Ga_rTsK&dy~(!YCGqQj9(fPU zXLMX~g#`^jY!(n+$)>4oO59|I4x5Z>pN$CjdC(OnuF!j0+~-g*3hq2pEmSm zWG%3E+Ae)#I@f19e(AZE)?c;AxAE)1UZVHE#(o=3%MuS{m6)No(g2K{Pq%fr)H=^M Qt^fc407*qoM6N<$f)%+$!vFvP literal 0 HcmV?d00001 diff --git a/src/arquivos/sprite/user-icon.png b/src/arquivos/sprite/user-icon.png index 0d10115e7111dcebeb19e4b55409a79e8f7a2b41..20bce267ce7287ab4457028936242e6870c4c0a5 100644 GIT binary patch delta 782 zcmV+p1M&QX2DJtuiBL{Q4GJ0x0000DNk~Le0000e0000m2nGNE0AqVNn~@SB8Y}*QsUZe0ArfLPR=zqPz#nGb z{DF8FUFECbMbKIh4aB1v7;_LI7MudXFE=;AVEi`(rE5MxJe2w2yC-`Qf7F8!!Nz__ z1kB6Tz6v2OKJ#@0@i4lzuR;jHUwowEnd6-Nxq3ee}!*xp4X98*k4Q= zU>6!>@W#M?LUQP(P_Pi7IK`lZRdM?nmIK2@NrE*j2QPe8?}hulAc7`={0Pf|sh=An zSo5EUrGy!f>%xkI$YCdKVKYDsueaO$R+f>cv?`N2qI*9sd%M~QQRD$g;ee5QG>=bv zE~Rk=4u7R8rBPO{WPzYP1t2%8k!PB(ON|g4ip6|=8bYn*yOyI}^^KOD*w!5na9u*) z3nD?g1)cYtG^x{2$Dq0xyA?*nDHN=svyuxnbe4W$QY7^(_3<3|3psYyC+pq>mH+?% M07*qoM6N<$g3)nYd;kCd delta 733 zcmV<30wVpj280G7iBL{Q4GJ0x0000DNk~Le0000a0000h2nGNE01#FxO_3orf0;={ zK~#7F%~*?(6EO_c(f~^ZxC7Dwrh;4tqyy+6p#qKyE*&sbuuwsA73@+$mI{P5mU24Z zUTkf=2XDsXSx2&;<&T~NFawC#hVm(t@1gYgfCIOEgqK1X>?V{G=F!g~)>w?g0NYUQ zRMXE;?n629_bQZkp?GDpYntW@f7C`Gvq@&}FW7o~yp$elLk&Q6TVU_B57a~w9cS?K z%5M#|z$b^$ff3}xzIP?|ub>Q`>tA5UebUE8loFCXa{xQ!1iBLAETLr2`~f@0XZo5) zr~*cd@kssiN``PWzbZRZbgYWe zg^HHUaT6V5+N=YA6G0CTxsTdEBv(gWu<+Vr9(PzEu74yf3zD_N5Z`f4twI1{4wf?CG&UMzC+6_{}?Q7%#$*A zN?3rH9)GRhTytI&wMcccI;4jjx6gTV)x!DhMug<}4e;+E;;q$+f6??@SqSZa`3#cC zEPBi{I45T!H1Nk74S%)N0*@(rdq}0}`C^2H!Iy8Bjx9g#@M-GkYu?%zb0zgf=_pMd zC+5&L%E3XDpQK&fM4v}henZ@Q14IEf%AgSUL(6@apa{g%p1QP8$xMEsUBk P00000NkvXXu0mjfGh0?N diff --git a/src/template-pagina/sub-templates/thiagodutra-header.html b/src/template-pagina/sub-templates/thiagodutra-header.html index e9223bb..c096804 100644 --- a/src/template-pagina/sub-templates/thiagodutra-header.html +++ b/src/template-pagina/sub-templates/thiagodutra-header.html @@ -1,7 +1,12 @@
- +
+ + +
- +
+ +
@@ -23,4 +30,9 @@
+
+
+ +
+