From 8d2fa91700bcc478cf6ac212a81f5e9ed7d615b4 Mon Sep 17 00:00:00 2001 From: Saulo Klein Nery Date: Thu, 8 Dec 2022 16:52:28 -0300 Subject: [PATCH] feat: Cria a area de links do footer --- src/arquivos/sass/components/_newsletter.scss | 6 +- src/arquivos/sass/partials/_footer.scss | 371 ++---------------- src/arquivos/sprite/face-icon.png | Bin 0 -> 380 bytes src/arquivos/sprite/insta-icon.png | Bin 0 -> 920 bytes src/arquivos/sprite/ytb-icon.png | Bin 0 -> 467 bytes .../sauloklein-footer-links.html | 159 +++++--- 6 files changed, 139 insertions(+), 397 deletions(-) create mode 100644 src/arquivos/sprite/face-icon.png create mode 100644 src/arquivos/sprite/insta-icon.png create mode 100644 src/arquivos/sprite/ytb-icon.png diff --git a/src/arquivos/sass/components/_newsletter.scss b/src/arquivos/sass/components/_newsletter.scss index ae3e73c..a82e700 100644 --- a/src/arquivos/sass/components/_newsletter.scss +++ b/src/arquivos/sass/components/_newsletter.scss @@ -3,8 +3,10 @@ padding: 24px 15px; &__wrapper { - margin: 0 auto; - max-width: 698px; + @include mq(lg, min) { + margin: 0 auto; + max-width: 698px; + } } &__title { diff --git a/src/arquivos/sass/partials/_footer.scss b/src/arquivos/sass/partials/_footer.scss index 4216cff..5de7b31 100644 --- a/src/arquivos/sass/partials/_footer.scss +++ b/src/arquivos/sass/partials/_footer.scss @@ -1,360 +1,63 @@ -/***************************************************************/ -/**-- Footer ------------------------------********************/ -/*-------------------------------------------------------------*/ - -.footer { - background-color: $color-black2; - - .institucional-info { - color: $color-white; - font-size: 14px; - margin: auto; - max-width: 950px; - padding: 0 15px 25px; - - @include mq(md, max) { - font-size: 16px; - padding-left: 0; - padding-right: 0; - } - - .titulo { - font-size: 16px; - margin: 27px 0 17px; - - @include mq(md, max) { - font-size: 22px; - text-align: center; - } - } - - ul { - margin: 0; - - @include mq(md, max) { - max-width: 310px; - margin: auto; - padding: 0 10px; - } - - &:hover li a { - opacity: 0.7; - } - - li a { - transition: all 0.15s linear; - - &:hover { - opacity: 1; - } - } - } - - a { - color: $color-white; - } - - .institucional-links { - font-size: 16px; - } - - .contato-sac { - font-size: 12px; - @include mq(md, max) { - border-bottom: 1px solid $color-black3; - padding: 10px 0 20px; - } - - @include mq(md, max) { - font-size: 16px; - } - - li { - margin-bottom: 8px; - - &:last-child() { - font-size: 10px; - text-transform: uppercase; - - @include mq(md, max) { - font-size: 14px; - } - - strong { - display: block; - } - } - } - - p { - margin: 0; - span { - text-decoration: underline; - } - } - } - - .redes-sociais { - h3 { - @include mq(md, max) { - display: none; - } - } - - ul { - @include mq(md, max) { - margin-top: 25px; - text-align: center; - } - } - - li { - display: inline-block; - margin-right: 6px; - } - - i { - @include mq(md, min) { - transform: scale(0.8); - } - } - } +.footer-links { + @include mq(md, min) { + padding: 29px 0 25px; + border-bottom: 1px solid $gray-100; } - .selos { - border-top: 1px solid $color-black3; - padding: 5px 0; - text-align: center; + &__wrapper { + display: grid; + grid-template-columns: repeat(3, max-content); + justify-content: center; @include mq(md, min) { - border-bottom: 1px solid $color-black3; + gap: 148px; } - .col-12 { - @include mq(md, max) { - padding: 0; - } - } - - ul { - display: inline-block; - @include mq(md, max) { - width: 100%; - } - - &.pagamento { - padding-top: 10px; - padding-bottom: 10px; - - @include mq(md, max) { - border-bottom: 1px solid $color-black3; - padding-bottom: 25px; - } - - @include mq(md, min) { - border-right: 1px solid $color-gray; - margin-right: 20px; - padding-right: 20px; - } - - li { - &:not(:last-child) { - @include mq(md, min) { - padding-right: 5px; - } - } - } - } - - &.certificados { - li { - &:not(:last-child) { - padding-right: 10px; - } - } - } - - li { - display: inline-block; - } - } - } - - .razao { - font-size: 10px; - max-width: 1500px; - margin: auto; - padding: 15px; - @include mq(md, max) { - padding-top: 10px; - } - - p { - color: $color-gray2; - margin: 0; - - @include mq(md, max) { - text-align: center; - } - - span { - @include mq(md, max) { - display: block; - } - } - } - - a { - color: $color-gray2; - display: inline-block; - } - - .cnpj { - @include mq(md, max) { - padding: 20px 15px; - } - } - - .desenvolvimento { - text-align: right; - - @include mq(md, max) { - text-align: center; - padding: 20px 15px 0; - } - - a:nth-child(2) { - @include mq(md, max) { - border-left: 1px solid $color-gray; - border-right: 1px solid $color-gray; - margin-right: 20px; - margin-left: 20px; - padding-right: 15px; - padding-left: 15px; - } - } - - span { - display: inline-block; - } + grid-template-columns: 1fr; } } -} -.mobile-bottom-options { - background-color: $color-white; - border-top: 1px solid $color-gray; - bottom: 0; - left: 0; - margin-bottom: -65px; - opacity: 0; - position: fixed; - right: 0; - transition: all 0.2s ease-in-out; - visibility: hidden; - z-index: 6; - - &.active { - margin-bottom: 0; - opacity: 1; - visibility: visible; + &__block { + @include mq(md, max) { + padding: 24px 15px; + border-bottom: 1px solid $gray-100; + } } - ul { - display: flex; - align-items: center; - justify-content: center; + &__title { + margin: 0 0 10px; + font-size: 12px; + line-height: 15px; margin: 0; } - li { - display: inline-block; - width: 33%; - } + .items-list { + margin: 0; - .option { - background-color: transparent; - border: none; - cursor: pointer; - display: block; - height: 66px; - outline: none; - padding: 10px; - width: 100%; - - &::before { - content: ""; - display: block; - margin: auto; - - @extend .sprite; - } - } - - .show-search { - .option:before { - @extend .sprite; - @extend .sprite-lupa; - } - } - - .show-carrinho { - li:not(.amount-items), - strong, - .title { - display: none; + &--social-networks { + display: grid; + grid-auto-flow: column; + grid-auto-columns: max-content; + align-items: center; + gap: 16px; } - .AmountItemsInCart { - line-height: 0; - text-align: center; + &__item { + padding: 4px 0; + line-height: 12px; + font-size: 10px; } - .portal-totalizers-ref { - display: inline-block; - vertical-align: top; - position: relative; + &__link { + color: $black-500; + transition: color 0.2s linear; - .cartInfoWrapper { - @extend .sprite; - @extend .sprite-sacola; - - @include mq(md, max) { - margin-right: 5px; + @include mq(lg, min) { + &:hover { + color: $blue-500; } } - - .amount-items { - background-color: $color-black2; - border-radius: 50%; - bottom: 2px; - color: $color-white; - font-size: 10px; - line-height: 1.3; - min-width: 19px; - text-align: center; - padding: 3px 4px; - position: absolute; - right: -8px; - - @include mq(md, max) { - right: -3px; - } - - em { - font-style: normal; - } - } - } - } - - .show-menu { - margin-top: -2px; - - .option:before { - @extend .sprite; - @extend .sprite-menu-bottom; } } } diff --git a/src/arquivos/sprite/face-icon.png b/src/arquivos/sprite/face-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..18d1024fd36b34a74fa8a17220a33efaec696b9f GIT binary patch literal 380 zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTC&H|6fVg?2=RS;(M3{v?36l5$8 za(7}_cTVOdki(Mh=(29Lx@w{V`^;wWtw#?|n~xN6YV7)3zP>vL=>KZ>9IcPbDj@Cp~QU zxN!f&@(UjqzjNOtC!w|PC)45C%ej|GT(=2TIQHY&N+!uPoeiyipOqR_zjQ2g*3^u1 z?4P^f+p{9a%Q;`ay<-$gZ}IK77P&ab>GgqK!Xg(%IF>dk@i2z^G@O0IDmLNa`R~7{ zl?xvF=VG}_{FC5WIYZ8`;**>j)-sx@9XQ5v0H6hhENSN7^H<0l9_UR8hSZ5Tol>CcIC(G6h7CulSbPV U=3Vq-0tOa?r>mdKI;Vst0I4gN3IG5A literal 0 HcmV?d00001 diff --git a/src/arquivos/sprite/insta-icon.png b/src/arquivos/sprite/insta-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..66a6e68527dcb03c53a8c2e449cc044e755c0392 GIT binary patch literal 920 zcmV;J184k+P)FV00009a7bBm000&x z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP{4kaKM!6sHjTF<5 z{vGtix)t@LQqmjyvk;YDaeXWt*NrGk-xjy1Yi);c@JO;GA4;cAks>c`XYCh?J*A2_ zM|-&_{}E;4pCRmA15W}s@W)EI_7(Nm-UP1uUAg`Z0q~sxso@mi zkWxIf)Hmok1H8MExVAw!eu^?n>mDBPC7|j2H^QN%5DR#~mjH=!j(&Jo+VDC7hAiS) z!IyxHG=%)uDqV=MlvW7a z!Hv>hO`8$IaayP;ib$1}wlA+m=$CrPb$2{J$dERt*Xk1THT#}-V!3tq$!*4lj8;eA zW7KtJFh3a7{XCwbS(9=d>@h#c0FhO1u25$;r?v2m7XP$am;(v+OLLw_pJZiMYQU8v zTptE{(svQ+<%e#TQsQVZ$N7crUyOr$6eG)n>Dn(66d${t(AL9TY=w?^!ur=pGyzqi@Ht#{RFZW>H4k=wx(`P)E2Q=CAo!jrS!Ux2^zHgl5N7 z4bA6~8lBQpKY)(htV>#qOBa$(azdIsY%uacB*IPt?7-m}SN3WmN&+ZwD2yJB4hYAV z8Q{Vjx*!Go)6N7w!08Gua`+uzmsg_~@b-+Rs3pKBIAri!E-u;tU*Mn-p7LKT>g5|K zksc*%7ZTo)9>wqgYd{O3$`PpDA4+9&S78J>aYUR!#FHMH{{g)b?aiFP&Hn%Z002ov JPDHLkV1m0!!k_>E literal 0 HcmV?d00001 diff --git a/src/template-pagina/sub-templates/sauloklein-footer-links.html b/src/template-pagina/sub-templates/sauloklein-footer-links.html index 1d3da0c..f59330b 100644 --- a/src/template-pagina/sub-templates/sauloklein-footer-links.html +++ b/src/template-pagina/sub-templates/sauloklein-footer-links.html @@ -1,64 +1,101 @@ -
-
-
-
-
-

Dúvidas

- -
-
-

Fale Conosco

- -
-
-

Fique Ligado

- -
-
+
+
+
+

DÚVIDAS

+ + +
+ +
+

FALE CONOSCO

+ + +
+ +
+

FIQUE LIGADO

+ +