From c0e6a5e22565685ddf167ff7773cb8f2ff336c06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cain=C3=A3=20Milech?= Date: Wed, 7 Dec 2022 21:52:37 -0300 Subject: [PATCH] feat: adiciona footer links mobile e desktop --- src/arquivos/sass/components/_newsletter.scss | 6 +- src/arquivos/sass/partials/_footer.scss | 390 ++---------------- src/arquivos/sprite/facebook-icon.png | Bin 0 -> 381 bytes src/arquivos/sprite/instagram-icon.png | Bin 0 -> 928 bytes src/arquivos/sprite/youtube-icon.png | Bin 0 -> 496 bytes .../sub-templates/caina-footer-links.html | 141 ++++--- 6 files changed, 129 insertions(+), 408 deletions(-) create mode 100644 src/arquivos/sprite/facebook-icon.png create mode 100644 src/arquivos/sprite/instagram-icon.png create mode 100644 src/arquivos/sprite/youtube-icon.png diff --git a/src/arquivos/sass/components/_newsletter.scss b/src/arquivos/sass/components/_newsletter.scss index 85d9c5f..e69b807 100644 --- a/src/arquivos/sass/components/_newsletter.scss +++ b/src/arquivos/sass/components/_newsletter.scss @@ -3,8 +3,10 @@ padding: 24px 15px; &__wrapper { - max-width: 698px; - margin: 0 auto; + @include mq(lg, min) { + max-width: 698px; + margin: 0 auto; + } } &__title { diff --git a/src/arquivos/sass/partials/_footer.scss b/src/arquivos/sass/partials/_footer.scss index 5699a6c..a36f38c 100644 --- a/src/arquivos/sass/partials/_footer.scss +++ b/src/arquivos/sass/partials/_footer.scss @@ -1,360 +1,60 @@ -/***************************************************************/ -/**-- Footer ------------------------------********************/ -/*-------------------------------------------------------------*/ - -.footer { - background-color: #142032; - - .institucional-info { - color: #fff; - 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: #fff; - } - - .institucional-links { - font-size: 16px; - } - - .contato-sac { - font-size: 12px; - @include mq(md, max) { - border-bottom: 1px solid #19273d; - 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: 1px solid $gray-100; } - .selos { - border-top: 1px solid #19273d; - padding: 5px 0; - text-align: center; - - @include mq(md, min) { - border-bottom: 1px solid #19273d; - } - - .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 #19273d; - padding-bottom: 25px; - } - - @include mq(md, min) { - border-right: 1px solid hsla(0, 0%, 90%, 1); - 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: hsla(220, 1%, 43%, 1); - margin: 0; - - @include mq(md, max) { - text-align: center; - } - - span { - @include mq(md, max) { - display: block; - } - } - } - - a { - color: hsla(220, 1%, 43%, 1); - 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 hsla(0, 0%, 90%, 1); - border-right: 1px solid hsla(0, 0%, 90%, 1); - margin-right: 20px; - margin-left: 20px; - padding-right: 15px; - padding-left: 15px; - } - } - - span { - display: inline-block; - } - } - } -} - -.mobile-bottom-options { - background-color: #fff; - border-top: 1px solid hsla(0, 0%, 90%, 1); - 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; - } - - ul { - display: flex; - align-items: center; + &__wrapper { + display: grid; + grid-template-columns: repeat(3, max-content); + gap: 148px; justify-content: center; + + @include mq(md, max) { + grid-template-columns: 1fr; + gap: 0; + } + } + + &__block { + @include mq(md, max) { + padding: 24px 15px; + border-bottom: 1px solid $gray-100; + } + } + + &__title { + margin: 0 0 10px; + line-height: 15px; + font-size: 12px; + } + + &__items-list { margin: 0; - } - li { - display: inline-block; - width: 33%; - } - - .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; + &--social-networks { + display: grid; + grid-auto-flow: column; + grid-auto-columns: max-content; + gap: 16px; + align-items: center; } } - .show-search { - .option:before { - @extend .sprite; - @extend .sprite-lupa; - } + &__item { + padding: 4px 0; + line-height: 12px; + font-size: 10px; } - .show-carrinho { - li:not(.amount-items), - strong, - .title { - display: none; - } + &__link { + color: $black-500; + transition: color 0.2s linear; - .AmountItemsInCart { - line-height: 0; - text-align: center; - } - - .portal-totalizers-ref { - display: inline-block; - vertical-align: top; - position: relative; - - .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: #142032; - border-radius: 50%; - bottom: 2px; - color: #fff; - 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/facebook-icon.png b/src/arquivos/sprite/facebook-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..da39568c61a2162ae6841f8fd8f98c381fc8dca7 GIT binary patch literal 381 zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTC&H|6fVg?2=RS;(M3{v?36l5$8 za(7}_cTVOdki(Mh=_>sHUHT2cb9pW9OB=2 z_<7s?RzHca29xfd2;e+xE^*%`cEN!y&sH)?E;IKRU9lmdQN-$OH_NpP%FTR!L3 zAJefI&DiswZxq*YAJxz7p3%#>!I05R?Z7b>h{j~59G`~XWe$>o!s{lRic~UOY}}?G T8kf5m7+MUTu6{1-oD!M<&kKzT literal 0 HcmV?d00001 diff --git a/src/arquivos/sprite/instagram-icon.png b/src/arquivos/sprite/instagram-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..bfe4ac0660a9a2830d5250c820635cc998e2b5f1 GIT binary patch literal 928 zcmV;R17G}!P)FV00009a7bBm000&x z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yPC#KRt`|u?SKGah!k)GNXTmn`B0YA)kW$0xqrmPDGb` zS~7);D;$%lR`!jde2L8_$k!l0gH-f`+sZ9*w<&{swjLDNRifB zItpEqN9;NAO0NfO<%fc0M7du;kN%p=;Hkr=45(Aj#FfpraL1u_p7S$p(8C+g3wbc( z@}ob(o~#R1PJ7DiD*TL9p>Ld@apb;N*IKvnHHW^oBp(?`amm}QQoBe|ZRI=lTC!2~ zo+Is54dtBtbm9M^sQ7T3^h4ahnxu0gKE8)H%A9O~CofBtI@)zg>S(jT&V4)`8!#bV zaV-(I{hwU~p2MXfpM{%T{qZv;} zE;KXht!S4wISyAj=bz1DU&!rDppkfDGZP7-*w4+1XkdD)Z`wvSFt$ScNG=2iJ-og-!7-1_fqwjR# zSZW}J3(k+nPWoQ0-ugp#iG6S-RQx-zt>_0wy?)4G#uhsH$Xy<3!<-L8k&>3ks`}sl z*<**p{_JyZnbE=jh6?Ik*qZ(omOfh zgD@C`uTckRCWt#hI|8H73EB-xCuur~*`VD3cY@FfQvbz`5aA_p7?b#uE|EZjJ8XVG z03wk{Br<`Uo^#3xwf{PIP7F$?u4Be&5M`yU4pzqi^^W$3c`_fW@w&w0V_SeCK(k#c zn$jrJ+62hf3=ZIc$`QiY_F9I#Hd8+5!7DchQ*7yiiID{D6mamuIUN@b--QFwz2F;Eg^-_g$tdAV73JE@ze{9Y?vj#LDD%ujs{?J-BcNIF26MKXiL_F!H`LQ23x;|zo ma4-YM4g7DKMIw>NHSi1loAPszl{eS`0000 -
-
-
-
-

Dúvidas

- -
-
-

Fale Conosco

- -
-
-

Fique Ligado

- -
-
+
+
+
+

DÚVIDAS

+ + +
+ +
+

FALE CONOSCO

+ + +
+ +
+

FIQUE LIGADO

+ +