Amandaalmeida/vtex-cms-template-atualizado-amanda-almeida
1
0
Fork 0
forked from M3-Academy/vtex-cms-template-atualizado
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: Amandaalmeida:development
Branches Tags
Amandaalmeida:main
Amandaalmeida:feacture/main
Amandaalmeida:hotfix/project
Amandaalmeida:feature/footer
Amandaalmeida:feature/minicart
Amandaalmeida:development
Amandaalmeida:feature/menu
Amandaalmeida:feature/header
..
compare: Amandaalmeida:main
Branches Tags
Amandaalmeida:feacture/main
Amandaalmeida:hotfix/project
Amandaalmeida:feature/footer
Amandaalmeida:feature/minicart
Amandaalmeida:development
Amandaalmeida:feature/menu
Amandaalmeida:feature/header
Amandaalmeida:main

No commits in common. "development" and "main" have entirely different histories.
developmen ... main

66 changed files with 19968 additions and 2112 deletions
Show Stats Expand all files Collapse all files

21
dev/controles-vtex/fullTextSearchBox.html
View File

@ -24,22 +24,7 @@
<option value="64">Bota Fora Dondocas</option> <option value="64">Bota Fora Dondocas</option>
</select> </select>
<input type="hidden" id="ftIdxa28507c5599f4430a7cabd23249f99c3" value="" /> <input type="hidden" id="ftIdxa28507c5599f4430a7cabd23249f99c3" value="" />
<input <input id="ftBoxa28507c5599f4430a7cabd23249f99c3" class="fulltext-search-box ui-autocomplete-input" type="text" size="20"
id="ftBoxa28507c5599f4430a7cabd23249f99c3" accesskey="b" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true" value="Digite aqui" />
class="fulltext-search-box ui-autocomplete-input" <input id="ftBtna28507c5599f4430a7cabd23249f99c3" type="button" value="Buscar" class="btn-buscar" />
type="text"
size="20"
accesskey="b"
autocomplete="off"
role="textbox"
aria-autocomplete="list"
aria-haspopup="true"
value="OLÁ, O QUE DESEJA ENCONTRAR?"
/>
<input
id="ftBtna28507c5599f4430a7cabd23249f99c3"
type="button"
value="Buscar"
class="btn-buscar"
/>
</fieldset> </fieldset>

6
meta/loja.js
View File

@ -7,6 +7,10 @@ const menuElements = require("./pages/elementos-menu");
module.exports = { module.exports = {
accountName: "agenciamagma", accountName: "agenciamagma",
pages: [ pages: [
{ data: home, template: "amandaalmeida-home.html" } { data: home, template: "template-home.html" },
{ data: category, template: "template-categoria.html" },
{ data: product, template: "template-produto.html" },
{ data: institucional, template: "template-institucional.html" },
{ data: menuElements, template: "template-elementos-menu.html" },
], ],
}; };

19074
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@ -1,7 +1,7 @@
{ {
"author": "Agência M3", "author": "Agência M3",
"name": "tema-template", "name": "tema-template",
"shopName": "amandaalmeida", "shopName": "template",
"description": "Tema Vtex para loja Vtex", "description": "Tema Vtex para loja Vtex",
"version": "1.0.0", "version": "1.0.0",
"main": "index.js", "main": "index.js",
@ -12,7 +12,8 @@
"dev": "cross-env NODE_ENV=development gulp watch", "dev": "cross-env NODE_ENV=development gulp watch",
"dev:fast": "cross-env NODE_ENV=devfast gulp watch", "dev:fast": "cross-env NODE_ENV=devfast gulp watch",
"prod": "cross-env NODE_ENV=production gulp build", "prod": "cross-env NODE_ENV=production gulp build",
"format": "prettier --write \"src/arquivos/**/*.{js,jsx,scss}\"" "format": "prettier --write \"src/arquivos/**/*.{js,jsx,scss}\"",
"preinstall": "npx npm-force-resolutions"
}, },
"license": "ISC", "license": "ISC",
"devDependencies": { "devDependencies": {

BIN
src/arquivos/img/Logo-M3-amanda-almeida.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

62
src/arquivos/js/app/partials/Menu.js
View File

@ -1,48 +1,38 @@
import { isSmallerThen991 } from 'Helpers/MediasMatch'
export default class Menu { export default class Menu {
constructor() { constructor() {
this.selectors(); this.toggleMenuMobile();
this.events(); this.toggleSubCategories();
} }
selectors() { toggleMenuMobile() {
this.openMenuButton = $('.menu__button'); $("#open-menu-button, .show-menu .option").on("click", function () {
this.mainMenu = $(".main-menu"); $(".menu-principal").addClass("mobile-open");
this.closeMenuButton = $(".menu-header__close-button"); $("header.header").addClass("menu-mobile-open");
this.departmentLink = $(".main-menu__department-link"); });
this.closeSubmenuButton = $(".submenu__return-button")
$("#close-menu-button").on("click", function () {
$(".menu-principal").removeClass("mobile-open");
$("header.header").removeClass("menu-mobile-open");
});
} }
events() { toggleSubCategories() {
this.openMenuButton.click(this.openMenu.bind(this)); $(".m3-dropdown > button").on("click", function (event) {
this.closeMenuButton.click(this.closeMenu.bind(this)); event.preventDefault();
this.closeSubmenuButton.click(this.closeSubmenu); if ($(this).parent().hasClass("sub-menu-open")) {
$(this).parent().removeClass("sub-menu-open");
if (isSmallerThen991) { } else {
this.departmentLink.click(this.openSubmenu); $(this).parent().siblings().removeClass("sub-menu-open");
} $(this).parent().addClass("sub-menu-open");
} }
openMenu() { $(this).parents("ul.itens").toggleClass("has-sub-menu-open");
this.mainMenu.addClass("is-open"); });
}
closeMenu() { $(".m3-dropdown .btn-voltar").on("click", function () {
this.mainMenu.removeClass("is-open"); $(this).parents(".m3-dropdown").removeClass("sub-menu-open");
} $(this).parents("ul.itens").removeClass("has-sub-menu-open");
});
openSubmenu(e) {
e.preventDefault();
const link = $(e.target);
link.parents('.main-menu__department').find('.submenu').addClass("is-open")
}
closeSubmenu(e) {
e.preventDefault();
const button = $(e.target);
button.parents(".submenu").removeClass("is-open");
} }
} }

49
src/arquivos/sass/checkout/_checkout-carrinho.scss
View File

@ -14,8 +14,8 @@
} }
.cart-items thead tr { .cart-items thead tr {
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid $color-gray6;
color: #142032; color: $color-black2;
font-size: 11px; font-size: 11px;
th { th {
@ -53,7 +53,7 @@
} }
&.product-name { &.product-name {
color: #142032; color: $color-black2;
font-size: 12px; font-size: 12px;
@media (max-width: 490px) { @media (max-width: 490px) {
@ -96,7 +96,7 @@
} }
.icon-question-sign { .icon-question-sign {
color: #142032; color: $color-black2;
} }
} }
@ -108,7 +108,7 @@
input { input {
&[id^="item-quantity"] { &[id^="item-quantity"] {
border: 1px solid #142032; border: 1px solid $color-black2;
box-shadow: none; box-shadow: none;
border-radius: 0; border-radius: 0;
color: #000; color: #000;
@ -127,7 +127,7 @@
} }
.item-quantity-change { .item-quantity-change {
background-color: #f71963; background-color: $color-pink;
display: inline-block; display: inline-block;
padding: 16px; padding: 16px;
position: relative; position: relative;
@ -145,10 +145,9 @@
} }
i { i {
&::before, &::before,
&::after { &::after {
border-top: 1px solid #fff; border-top: 1px solid $color-white;
content: ""; content: "";
left: 12px; left: 12px;
position: absolute; position: absolute;
@ -178,33 +177,33 @@
#shipping-preview-container { #shipping-preview-container {
.srp-main-title { .srp-main-title {
color: #142032; color: $color-black2;
font-size: 24px; font-size: 24px;
font-weight: 700; font-weight: 700;
} }
.srp-description { .srp-description {
color: #142032; color: $color-black2;
font-size: 13px; font-size: 13px;
} }
#shipping-calculate-link, #shipping-calculate-link,
#cart-shipping-calculate { #cart-shipping-calculate {
background-color: hsla(0, 0%, 90%, 1); background-color: $color-gray;
border-radius: 0; border-radius: 0;
border: none; border: none;
color: #142032; color: $color-black2;
font-size: 14px; font-size: 14px;
outline: none; outline: none;
padding: 8px 10px; padding: 8px 10px;
transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out;
&:hover { &:hover {
background-color: lighten(hsla(0, 0%, 90%, 1), 5); background-color: lighten($color-gray, 5);
} }
&:active { &:active {
background-color: darken(hsla(0, 0%, 90%, 1), 5); background-color: darken($color-gray, 5);
} }
} }
@ -213,7 +212,7 @@
} }
.ship-postalCode a { .ship-postalCode a {
color: #f71963; color: $color-pink;
} }
} }
@ -235,8 +234,8 @@
} }
> div { > div {
background-color: #f5f5f5; background-color: $color-white2;
color: #142032; color: $color-black2;
display: block !important; display: block !important;
padding: 24px 15%; padding: 24px 15%;
@ -253,7 +252,7 @@
text-align: left; text-align: left;
label { label {
color: #6d6e70; color: $color-gray5;
font-size: 12px; font-size: 12px;
} }
} }
@ -272,7 +271,7 @@
#cart-coupon-add { #cart-coupon-add {
background-image: none; background-image: none;
background-color: #142032; background-color: $color-black2;
border-radius: 0; border-radius: 0;
border: none; border: none;
font-size: 0; font-size: 0;
@ -282,11 +281,11 @@
transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out;
&:hover { &:hover {
background-color: lighten(#142032, 5); background-color: lighten($color-black2, 5);
} }
&:active { &:active {
background-color: darken(#142032, 5); background-color: darken($color-black2, 5);
} }
&::before { &::before {
@ -300,7 +299,7 @@
} }
.accordion-group { .accordion-group {
border: 1px solid #f5f5f5; border: 1px solid $color-white2;
border-radius: 0; border-radius: 0;
color: #000; color: #000;
@ -313,7 +312,7 @@
} }
tfoot { tfoot {
background-color: #f5f5f5; background-color: $color-white2;
.info { .info {
text-transform: uppercase; text-transform: uppercase;
@ -360,7 +359,7 @@
#cart-choose-more-products { #cart-choose-more-products {
bottom: -26px; bottom: -26px;
color: #151728; color: $color-black4;
font-size: 12px; font-size: 12px;
left: 0; left: 0;
position: absolute; position: absolute;
@ -369,7 +368,7 @@
} }
#cart-to-orderform { #cart-to-orderform {
background-color: #2fab61; background-color: $color-green;
font-size: 14px; font-size: 14px;
font-weight: 700; font-weight: 700;
margin-top: 0; margin-top: 0;

8
src/arquivos/sass/checkout/_checkout-email.scss
View File

@ -1,6 +1,6 @@
.container-order-form { .container-order-form {
#orderform-to-cart { #orderform-to-cart {
color: #f71963; color: $color-pink;
text-decoration: underline; text-decoration: underline;
} }
@ -10,7 +10,7 @@
} }
#btn-client-pre-email { #btn-client-pre-email {
background-color: #f71963; background-color: $color-pink;
background-image: none; background-image: none;
border: none; border: none;
border-radius: 0; border-radius: 0;
@ -24,11 +24,11 @@
top: 0; top: 0;
&:hover { &:hover {
background-color: lighten(#f71963, 5); background-color: lighten($color-pink, 5);
} }
&:active { &:active {
background-color: darken(#f71963, 5); background-color: darken($color-pink, 5);
} }
} }
} }

17
src/arquivos/sass/checkout/_checkout-pagamento.scss
View File

@ -8,7 +8,6 @@
} }
.orderform-active { .orderform-active {
.step, .step,
.cart, .cart,
.totalizers { .totalizers {
@ -18,7 +17,7 @@
.accordion-group { .accordion-group {
.accordion-toggle .link-box-edit { .accordion-toggle .link-box-edit {
color: #f71963; color: $color-pink;
} }
.text input, .text input,
@ -56,15 +55,15 @@
} }
.vtex-omnishipping-1-x-summaryChange { .vtex-omnishipping-1-x-summaryChange {
border-color: #f71963; border-color: $color-pink;
color: #f71963; color: $color-pink;
} }
} }
.accordion-group button.submit, .accordion-group button.submit,
.payment-confirmation-wrap button.submit { .payment-confirmation-wrap button.submit {
background-image: none; background-image: none;
background-color: #2fab61; background-color: $color-green;
border: none; border: none;
border-radius: 0; border-radius: 0;
font-size: 14px; font-size: 14px;
@ -74,17 +73,17 @@
transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out;
&:hover { &:hover {
background-color: lighten(#2fab61, 5); background-color: lighten($color-green, 5);
} }
&:active { &:active {
background-color: darken(#2fab61, 5); background-color: darken($color-green, 5);
} }
} }
.cart-fixed { .cart-fixed {
#orderform-minicart-to-cart { #orderform-minicart-to-cart {
color: #151728; color: $color-black4;
display: block; display: block;
font-size: 12px; font-size: 12px;
text-decoration: underline; text-decoration: underline;
@ -96,7 +95,7 @@
} }
tfoot td { tfoot td {
color: #19273d; color: $color-black3;
text-transform: uppercase; text-transform: uppercase;
} }
} }

8
src/arquivos/sass/checkout/_checkout-vazio.scss
View File

@ -2,7 +2,7 @@
text-align: center; text-align: center;
.empty-cart-title { .empty-cart-title {
color: #142032; color: $color-black2;
font-size: 24px; font-size: 24px;
line-height: 29px; line-height: 29px;
} }
@ -14,7 +14,7 @@
} }
#cart-choose-products { #cart-choose-products {
background-color: #142032; background-color: $color-black2;
border-radius: 0; border-radius: 0;
border: none; border: none;
background-image: none; background-image: none;
@ -26,11 +26,11 @@
transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out;
&:hover { &:hover {
background-color: lighten(#142032, 5); background-color: lighten($color-black2, 5);
} }
&:active { &:active {
background-color: darken(#142032, 5); background-color: darken($color-black2, 5);
} }
&::before { &::before {

2
src/arquivos/sass/checkout/_checkout.scss
View File

@ -25,7 +25,6 @@ a:hover {
padding-top: 36px; padding-top: 36px;
} }
} }
.product-name a { .product-name a {
color: #333; color: #333;
} }
@ -51,7 +50,6 @@ a:hover {
.body-cart { .body-cart {
padding: 0; padding: 0;
} }
#cart-title { #cart-title {
display: none !important; display: none !important;
} }

2
src/arquivos/sass/components/_instagram-gallery.scss
View File

@ -60,7 +60,7 @@
a { a {
display: block; display: block;
color: #f71963; color: $color-pink;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;

63
src/arquivos/sass/components/_mini-cart.scss
View File

@ -26,7 +26,7 @@
} }
.mini-cart-container { .mini-cart-container {
background-color: #fff; background-color: $color-white;
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -51,8 +51,8 @@
} }
.mini-cart-header { .mini-cart-header {
border-bottom: 1px solid hsla(0, 0%, 90%, 1); border-bottom: 1px solid $color-gray;
color: #142032; color: $color-black2;
font-size: 12px; font-size: 12px;
letter-spacing: 0.5px; letter-spacing: 0.5px;
padding: 20px 15px 16px; padding: 20px 15px 16px;
@ -75,7 +75,7 @@
&::before, &::before,
&::after { &::after {
background-color: lighten(#142032, 10); background-color: lighten($color-black2, 10);
content: ""; content: "";
height: 2px; height: 2px;
left: 0.5px; left: 0.5px;
@ -95,10 +95,9 @@
&:hover, &:hover,
&:active { &:active {
&:before, &:before,
&:after { &:after {
background-color: #142032; background-color: $color-black2;
} }
} }
} }
@ -121,17 +120,17 @@
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background-color: hsla(0, 0%, 90%, 1); background-color: $color-gray;
border-radius: 15px; border-radius: 15px;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: hsl(0, 0%, 77%); background-color: $color-gray3;
border-radius: 15px; border-radius: 15px;
} }
&::-webkit-scrollbar-thumb:hover { &::-webkit-scrollbar-thumb:hover {
background-color: darken(hsl(0, 0%, 77%), 10); background-color: darken($color-gray3, 10);
} }
} }
@ -155,8 +154,8 @@
left: 0; left: 0;
right: 0; right: 0;
font-size: 0; font-size: 0;
border: 5px solid #fff; border: 5px solid $color-white;
border-top-color: #f71963; border-top-color: $color-pink;
border-radius: 50%; border-radius: 50%;
width: 30px; width: 30px;
height: 30px; height: 30px;
@ -173,7 +172,7 @@
li { li {
align-items: flex-start; align-items: flex-start;
border-bottom: 1px solid hsla(0, 0%, 90%, 1); border-bottom: 1px solid $color-gray;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 12px 0; padding: 12px 0;
@ -216,7 +215,7 @@
} }
.product-info { .product-info {
color: #142032; color: $color-black2;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
padding-left: 8px; padding-left: 8px;
@ -229,7 +228,7 @@
} }
.product-price { .product-price {
color: #000; color: $color-black;
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
margin-bottom: 8px; margin-bottom: 8px;
@ -251,8 +250,8 @@
} }
button { button {
background-color: #f71963; background-color: $color-pink;
color: #fff; color: $color-white;
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
line-height: 0; line-height: 0;
@ -262,16 +261,16 @@
padding: 0; padding: 0;
&:hover { &:hover {
background-color: lighten(#f71963, 5); background-color: lighten($color-pink, 5);
} }
&:active { &:active {
background-color: darken(#f71963, 10); background-color: darken($color-pink, 10);
} }
} }
.value { .value {
border: 1px solid #142032; border: 1px solid $color-black2;
box-shadow: none; box-shadow: none;
font-size: 14px; font-size: 14px;
margin: 0 -3px; margin: 0 -3px;
@ -303,17 +302,17 @@
&:hover, &:hover,
&:active { &:active {
border-color: darken(#142032, 15); border-color: darken($color-black2, 15);
&:after, &:after,
&:before { &:before {
border-color: darken(#142032, 15); border-color: darken($color-black2, 15);
} }
} }
&:after, &:after,
&:before { &:before {
border-bottom: 1.25px solid #142032; border-bottom: 1.25px solid $color-black2;
content: ""; content: "";
width: 16px; width: 16px;
position: absolute; position: absolute;
@ -338,21 +337,21 @@
.totals-container { .totals-container {
display: none; display: none;
background-color: #fff; background-color: $color-white;
border-top: 1px solid hsla(0, 0%, 90%, 1); border-top: 1px solid $color-gray;
margin: 0 16px; margin: 0 16px;
padding: 16px 0; padding: 16px 0;
} }
.total { .total {
color: hsla(220, 1%, 43%, 1); color: $color-gray2;
font-size: 12px; font-size: 12px;
line-height: 15px; line-height: 15px;
letter-spacing: 3px; letter-spacing: 3px;
text-transform: uppercase; text-transform: uppercase;
strong { strong {
color: #142032; color: $color-black2;
display: inline-block; display: inline-block;
font-weight: 700; font-weight: 700;
letter-spacing: 0; letter-spacing: 0;
@ -364,7 +363,7 @@
background-color: transparent; background-color: transparent;
border: none; border: none;
cursor: pointer; cursor: pointer;
color: #6d6e70; color: $color-gray5;
display: block; display: block;
font-size: 14px; font-size: 14px;
padding: 17px 15px; padding: 17px 15px;
@ -376,13 +375,13 @@
&:hover, &:hover,
&:active { &:active {
color: darken(#6d6e70, 15); color: darken($color-gray5, 15);
} }
} }
.finish-order { .finish-order {
background-color: #2fab61; background-color: $color-green;
color: #fff; color: $color-white;
display: block; display: block;
font-weight: 700; font-weight: 700;
font-size: 14px; font-size: 14px;
@ -393,11 +392,11 @@
width: 100%; width: 100%;
&:hover { &:hover {
background-color: lighten(#2fab61, 2.5); background-color: lighten($color-green, 2.5);
} }
&:active { &:active {
background-color: darken(#2fab61, 10); background-color: darken($color-green, 10);
} }
} }
} }

24
src/arquivos/sass/components/_newsletter.scss
View File

@ -3,7 +3,7 @@
/*-------------------------------------------------------------*/ /*-------------------------------------------------------------*/
.captacao-emails-newsletter { .captacao-emails-newsletter {
background-color: #f71963; background-color: $color-pink;
background-image: url("/arquivos/template-background-newsletter.png"); background-image: url("/arquivos/template-background-newsletter.png");
margin-top: 104px; margin-top: 104px;
padding: 12px 15px 24px; padding: 12px 15px 24px;
@ -25,7 +25,7 @@
} }
h3 { h3 {
color: #fff; color: $color-white;
font-size: 18px; font-size: 18px;
font-weight: normal; font-weight: normal;
line-height: 26px; line-height: 26px;
@ -91,12 +91,12 @@
} }
&::placeholder { &::placeholder {
color: #142032; color: $color-black2;
} }
&#m3-cn-button-ok { &#m3-cn-button-ok {
background-color: #142032; background-color: $color-black2;
color: #fff; color: $color-white;
cursor: pointer; cursor: pointer;
font-weight: 700; font-weight: 700;
font-size: 14px; font-size: 14px;
@ -109,11 +109,11 @@
} }
&:hover { &:hover {
background-color: lighten(#142032, 5); background-color: lighten($color-black2, 5);
} }
&:active { &:active {
background-color: darken(#142032, 5); background-color: darken($color-black2, 5);
} }
} }
} }
@ -123,10 +123,10 @@
text-align: center; text-align: center;
.m3-cn-error { .m3-cn-error {
background-color: #fff; background-color: $color-white;
border-radius: 2px; border-radius: 2px;
bottom: -28px; bottom: -28px;
color: hsla(348, 83%, 58%, 1); color: $color-pink3;
display: table; display: table;
left: 40%; left: 40%;
margin: auto; margin: auto;
@ -136,7 +136,7 @@
} }
.m3-cn-success { .m3-cn-success {
color: #fff; color: $color-white;
display: inline-block; display: inline-block;
font-size: 16px; font-size: 16px;
margin-right: 20px; margin-right: 20px;
@ -144,9 +144,9 @@
} }
.btn-voltar { .btn-voltar {
background-color: #fff; background-color: $color-white;
border-radius: 2px; border-radius: 2px;
color: #f71963; color: $color-pink;
display: inline-block; display: inline-block;
font-size: 14px; font-size: 14px;
line-height: 1; line-height: 1;

1
src/arquivos/sass/main.scss
View File

@ -24,4 +24,3 @@
@import "./partials/prateleira"; @import "./partials/prateleira";
@import "./partials/ajustes"; @import "./partials/ajustes";
@import "./partials/flags"; @import "./partials/flags";
@import "./partials/search";

87
src/arquivos/sass/pages/_categoria.scss
View File

@ -3,7 +3,7 @@
/*-------------------------------------------------------------*/ /*-------------------------------------------------------------*/
.categoria { .categoria {
color: #142032; color: $color-black2;
.bread-crumb { .bread-crumb {
margin-bottom: 54px; margin-bottom: 54px;
@ -15,7 +15,7 @@
.filtros-categoria { .filtros-categoria {
@include mq(md, max) { @include mq(md, max) {
background-color: #fff; background-color: $color-white;
bottom: 0; bottom: 0;
left: 0; left: 0;
margin-left: -100%; margin-left: -100%;
@ -26,7 +26,7 @@
transition: all 0.45s ease-in-out; transition: all 0.45s ease-in-out;
visibility: hidden; visibility: hidden;
width: 100%; width: 100%;
z-index: map-get($z-index, level-3); z-index: map-get($z-index, menu);
} }
&.mobile-open { &.mobile-open {
@ -38,7 +38,7 @@
} }
.topo-filtros { .topo-filtros {
border-bottom: 1px solid hsla(0, 0%, 90%, 1); border-bottom: 1px solid $color-gray;
@include mq(md, max) { @include mq(md, max) {
display: flex; display: flex;
@ -72,7 +72,7 @@
} }
&::before { &::before {
border-left: 1px solid #eee; border-left: 1px solid $color-gray4;
content: ""; content: "";
display: block; display: block;
height: 36px; height: 36px;
@ -88,7 +88,7 @@
&::before, &::before,
&::after { &::after {
border: 1px solid #142032; border: 1px solid $color-black2;
content: ""; content: "";
display: block; display: block;
left: 0; left: 0;
@ -109,7 +109,7 @@
} }
a { a {
color: #142032; color: $color-black2;
} }
.navigation-tabs { .navigation-tabs {
@ -151,11 +151,11 @@
label { label {
a { a {
color: #151728; color: $color-black4;
transition: ease-in 0.22s all; transition: ease-in 0.22s all;
&:hover { &:hover {
text-shadow: 0px 0px 0.55px #151728; text-shadow: 0px 0px 0.55px $color-black4;
} }
} }
} }
@ -169,22 +169,22 @@
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background-color: hsla(0, 0%, 90%, 1); background-color: $color-gray;
border-radius: 15px; border-radius: 15px;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: hsl(0, 0%, 77%); background-color: $color-gray3;
border-radius: 15px; border-radius: 15px;
} }
&::-webkit-scrollbar-thumb:hover { &::-webkit-scrollbar-thumb:hover {
background-color: darken(hsl(0, 0%, 77%), 10); background-color: darken($color-gray3, 10);
} }
} }
label { label {
color: #142032; color: $color-black2;
cursor: pointer; cursor: pointer;
display: block; display: block;
font-size: 14px; font-size: 14px;
@ -208,10 +208,10 @@
} }
& ~ .sr_box { & ~ .sr_box {
border: 1px solid #142032; border: 1px solid $color-black2;
border-radius: 50%; border-radius: 50%;
content: " "; content: " ";
color: hsl(0, 0%, 77%); color: $color-gray3;
display: inline-block; display: inline-block;
font-size: 13px; font-size: 13px;
font-weight: bold; font-weight: bold;
@ -247,13 +247,13 @@
&:hover ~ .sr_box { &:hover ~ .sr_box {
&::before { &::before {
background-color: lighten(#f71963, 15); background-color: lighten($color-pink, 15);
} }
} }
&:checked ~ .sr_box { &:checked ~ .sr_box {
&::before { &::before {
background-color: #f71963; background-color: $color-pink;
} }
} }
} }
@ -272,7 +272,7 @@
} }
.aply-filter-btn { .aply-filter-btn {
background-color: #eee; background-color: $color-gray4;
border: none; border: none;
bottom: 0; bottom: 0;
font-size: 14px; font-size: 14px;
@ -289,7 +289,7 @@
} }
&:active { &:active {
background-color: darken(#eee, 5); background-color: darken($color-gray4, 5);
} }
} }
} }
@ -334,7 +334,7 @@
.opcoes-resultado { .opcoes-resultado {
@include mq(md, max) { @include mq(md, max) {
align-items: center; align-items: center;
border: 1px solid hsla(0, 0%, 90%, 1); border: 1px solid $color-gray;
display: flex; display: flex;
justify-content: left; justify-content: left;
} }
@ -343,8 +343,8 @@
#open-filter-button { #open-filter-button {
background-color: transparent; background-color: transparent;
border: none; border: none;
border-right: 1px solid hsla(0, 0%, 90%, 1); border-right: 1px solid $color-gray;
color: #000; color: $color-black;
cursor: pointer; cursor: pointer;
display: none; display: none;
font-size: 16px; font-size: 16px;
@ -407,7 +407,7 @@
select { select {
background-color: transparent; background-color: transparent;
cursor: pointer; cursor: pointer;
color: hsla(220, 1%, 43%, 1); color: $color-gray2;
font-size: 14px; font-size: 14px;
margin-left: 8px; margin-left: 8px;
outline: none; outline: none;
@ -442,10 +442,10 @@
} }
.clear-filter-btn { .clear-filter-btn {
background-color: #142032; background-color: $color-black2;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
color: #fff; color: $color-white;
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
@ -458,11 +458,11 @@
width: 100%; width: 100%;
&:hover { &:hover {
background-color: lighten(#000, 2.5); background-color: lighten($color-black, 2.5);
} }
&:active { &:active {
background-color: darken(#000, 2.5); background-color: darken($color-black, 2.5);
} }
} }
@ -538,8 +538,8 @@
&.current { &.current {
a { a {
background-color: #000; background-color: $color-black;
color: #fff; color: $color-white;
pointer-events: none; pointer-events: none;
} }
} }
@ -552,7 +552,7 @@
font-size: 0; font-size: 0;
text-indent: -99999px; text-indent: -99999px;
overflow: hidden; overflow: hidden;
color: hsla(220, 1%, 43%, 1); color: $color-gray2;
&:before { &:before {
@include pseudo(block, relative, "\00BB"); @include pseudo(block, relative, "\00BB");
@ -561,44 +561,39 @@
line-height: 21px; line-height: 21px;
} }
} }
&.desativo a { &.desativo a {
color: hsl(0, 0%, 77%); color: $color-gray3;
pointer-events: none; pointer-events: none;
width: 0; width: 0;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
} }
} }
&#first a:before { &#first a:before {
content: "\00AB"; content: "\00AB";
} }
&#prev a:before { &#prev a:before {
content: "\2039"; content: "\2039";
} }
&#next a:before { &#next a:before {
content: "\203A"; content: "\203A";
} }
} }
a { a {
background-color: #fff; background-color: $color-white;
color: #000; color: $color-black;
padding: 4px 12px; padding: 4px 12px;
text-decoration: none; text-decoration: none;
display: block; display: block;
border: 1px solid #e5e5e5; border: 1px solid $color-gray6;
@include mq(md, min) { @include mq(md, min) {
&:hover { &:hover {
background-color: #e5e5e5; background-color: $color-gray6;
color: darken(#000, 15); color: darken($color-black, 15);
&:active { &:active {
color: darken(#000, 10); color: darken($color-black, 10);
} }
} }
} }
@ -618,9 +613,9 @@
text-align: center; text-align: center;
button { button {
background-color: #142032; background-color: $color-black2;
border: none; border: none;
color: #fff; color: $color-white;
cursor: pointer; cursor: pointer;
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
@ -633,11 +628,11 @@
width: 100%; width: 100%;
&:hover { &:hover {
background-color: lighten(#000, 2.5); background-color: lighten($color-black, 2.5);
} }
&:active { &:active {
background-color: darken(#000, 2.5); background-color: darken($color-black, 2.5);
} }
} }
} }

8
src/arquivos/sass/pages/_erro.scss
View File

@ -1,5 +1,5 @@
.pagina-erro { .pagina-erro {
color: #142032; color: $color-black2;
text-align: center; text-align: center;
display: block; display: block;
min-height: 40%; min-height: 40%;
@ -43,7 +43,7 @@
a.voltar-para-home { a.voltar-para-home {
color: #fff; color: #fff;
background: #142032; background: $color-black2;
display: inline-block; display: inline-block;
font-size: 14px; font-size: 14px;
margin: 1em auto 3em; margin: 1em auto 3em;
@ -52,11 +52,11 @@
transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out;
&:hover { &:hover {
background-color: lighten(#142032, 5); background-color: lighten($color-black2, 5);
} }
&:active { &:active {
background-color: darken(#142032, 5); background-color: darken($color-black2, 5);
} }
} }
} }

4
src/arquivos/sass/pages/_home.scss
View File

@ -79,7 +79,7 @@
} }
button { button {
background-color: #142032; background-color: $color-black2;
border: none; border: none;
cursor: pointer; cursor: pointer;
height: 10px; height: 10px;
@ -92,7 +92,7 @@
.slick-active { .slick-active {
button { button {
background-color: #f71963; background-color: $color-pink;
height: 16px; height: 16px;
width: 16px; width: 16px;
} }

22
src/arquivos/sass/pages/_institucional.scss
View File

@ -3,7 +3,7 @@
/*-------------------------------------------------------------*/ /*-------------------------------------------------------------*/
.institucional { .institucional {
color: #142032; color: $color-black2;
.breadcrumb { .breadcrumb {
font-size: 14px; font-size: 14px;
@ -15,8 +15,8 @@
display: inline-block; display: inline-block;
a { a {
border-right: 1px solid #142032; border-right: 1px solid $color-black2;
color: #142032; color: $color-black2;
margin-right: 7px; margin-right: 7px;
padding: 0px 9px 0px 0; padding: 0px 9px 0px 0;
} }
@ -48,27 +48,27 @@
padding: 4px 2px; padding: 4px 2px;
a { a {
border: 1px solid #142032; border: 1px solid $color-black2;
border-radius: 31px; border-radius: 31px;
color: #f71963; color: $color-pink;
display: block; display: block;
font-weight: 700; font-weight: 700;
padding: 8px 16px; padding: 8px 16px;
transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out;
&.ativo { &.ativo {
background-color: #142032; background-color: $color-black2;
color: #fff; color: $color-white;
} }
&:hover { &:hover {
background-color: lighten(#142032, 5); background-color: lighten($color-black2, 5);
color: #fff; color: $color-white;
} }
&:active { &:active {
background-color: darken(#142032, 10); background-color: darken($color-black2, 10);
color: #fff; color: $color-white;
} }
} }
} }

16
src/arquivos/sass/pages/_login.scss
View File

@ -22,9 +22,9 @@
.btn { .btn {
background-image: none; background-image: none;
background-color: #f5f5f5; background-color: $color-white2;
border-radius: 0; border-radius: 0;
border: 1px solid #e5e5e5; border: 1px solid $color-gray6;
box-shadow: none; box-shadow: none;
font-size: 14px; font-size: 14px;
outline: none; outline: none;
@ -33,25 +33,25 @@
transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out;
&:hover { &:hover {
background-color: lighten(#f5f5f5, 5); background-color: lighten($color-white2, 5);
} }
&:active { &:active {
background-color: darken(#f5f5f5, 5); background-color: darken($color-white2, 5);
} }
&.btn-success { &.btn-success {
background-color: #f71963; background-color: $color-pink;
font-size: 14px; font-size: 14px;
height: auto; height: auto;
padding: 14px 24px; padding: 14px 24px;
&:hover { &:hover {
background-color: lighten(#f71963, 5); background-color: lighten($color-pink, 5);
} }
&:active { &:active {
background-color: darken(#f71963, 5); background-color: darken($color-pink, 5);
} }
i { i {
@ -72,7 +72,7 @@
h4 { h4 {
&::before { &::before {
content: "Entrar"; content: "Entrar";
color: #142032; color: $color-black2;
display: block; display: block;
font-size: 22px; font-size: 22px;
font-weight: 700; font-weight: 700;

125
src/arquivos/sass/pages/_produto.scss
View File

@ -64,7 +64,6 @@
display: block; display: block;
} }
} }
.thumbs { .thumbs {
margin: 0 10px 0 0; margin: 0 10px 0 0;
max-width: 74px; max-width: 74px;
@ -100,7 +99,7 @@
&:hover, &:hover,
&:active { &:active {
@include mq(md, min) { @include mq(md, min) {
border: 1px solid #f71963; border: 1px solid $color-pink;
} }
} }
@ -159,7 +158,7 @@
} }
button { button {
background-color: #142032; background-color: $color-black2;
border: none; border: none;
cursor: pointer; cursor: pointer;
height: 10px; height: 10px;
@ -172,7 +171,7 @@
.slick-active { .slick-active {
button { button {
background-color: #f71963; background-color: $color-pink;
height: 16px; height: 16px;
width: 16px; width: 16px;
} }
@ -197,7 +196,7 @@
.product-reference { .product-reference {
font-size: 14px; font-size: 14px;
color: hsla(220, 1%, 43%, 1); color: $color-gray2;
.productReference { .productReference {
display: inline-block; display: inline-block;
@ -205,11 +204,11 @@
} }
.moduloPreco { .moduloPreco {
color: #142032; color: $color-black2;
margin: 30px 0; margin: 30px 0;
.valor-de { .valor-de {
color: hsla(220, 1%, 43%, 1); color: $color-gray2;
font-size: 14px; font-size: 14px;
text-transform: uppercase; text-transform: uppercase;
text-decoration: line-through; text-decoration: line-through;
@ -224,7 +223,7 @@
} }
.valor-por { .valor-por {
color: #142032; color: $color-black2;
font-size: 32px; font-size: 32px;
font-weight: 700; font-weight: 700;
@ -234,7 +233,7 @@
} }
.valor-dividido { .valor-dividido {
color: #6d6e70; color: $color-gray5;
font-size: 14px; font-size: 14px;
.numero-de-parcelas { .numero-de-parcelas {
@ -263,14 +262,14 @@
} }
&:before { &:before {
border-top: 1px solid hsl(0, 0%, 77%); border-top: 1px solid $color-gray3;
margin-top: 8px; margin-top: 8px;
padding-bottom: 10px; padding-bottom: 10px;
} }
&:after { &:after {
padding-top: 10px; padding-top: 10px;
border-bottom: 1px solid hsl(0, 0%, 77%); border-bottom: 1px solid $color-gray3;
} }
.value { .value {
@ -283,8 +282,8 @@
} }
.container-percentual { .container-percentual {
border: 1px dotted #2fab61; border: 1px dotted $color-green;
color: #2fab61; color: $color-green;
font-size: 10px; font-size: 10px;
padding: 4px 9px; padding: 4px 9px;
} }
@ -292,7 +291,7 @@
} }
.moduloAviseMe { .moduloAviseMe {
border-bottom: 1px solid hsla(0, 0%, 90%, 1); border-bottom: 1px solid $color-gray;
padding-bottom: 15px; padding-bottom: 15px;
margin: 20px 0; margin: 20px 0;
@ -306,7 +305,7 @@
} }
input { input {
border: 1px solid hsla(0, 0%, 90%, 1); border: 1px solid $color-gray;
display: inline-block; display: inline-block;
margin-bottom: 10px; margin-bottom: 10px;
padding: 10px; padding: 10px;
@ -318,9 +317,9 @@
} }
&#enviar-avise-me { &#enviar-avise-me {
background-color: #19273d; background-color: $color-black3;
border: none; border: none;
color: #fff; color: $color-white;
cursor: pointer; cursor: pointer;
font-size: 10px; font-size: 10px;
font-weight: 700; font-weight: 700;
@ -332,11 +331,11 @@
max-width: 200px; max-width: 200px;
&:hover { &:hover {
background-color: #000; background-color: $color-black;
} }
&:active { &:active {
background-color: #142032; background-color: $color-black2;
} }
} }
} }
@ -347,11 +346,11 @@
position: absolute; position: absolute;
&.msgSucesso { &.msgSucesso {
color: #2fab61; color: $color-green;
} }
&.msgErro { &.msgErro {
color: #f71963; color: $color-pink;
} }
} }
} }
@ -370,7 +369,7 @@
} }
li { li {
border: 1px solid hsla(0, 0%, 90%, 1); border: 1px solid $color-gray;
display: inline-block; display: inline-block;
max-width: 72px; max-width: 72px;
max-height: 96px; max-height: 96px;
@ -383,7 +382,7 @@
} }
&:hover { &:hover {
border: 2px solid hsl(0, 0%, 77%); border: 2px solid $color-gray3;
} }
img { img {
@ -409,7 +408,7 @@
.moduloSkus { .moduloSkus {
.titulo { .titulo {
color: #6d6e70; color: $color-gray5;
font-size: 16px; font-size: 16px;
} }
@ -449,10 +448,9 @@
} }
@include mq(lg) { @include mq(lg) {
&:hover label, &:hover label,
&:active label { &:active label {
background-color: hsl(0, 0%, 77%); background-color: $color-gray3;
} }
} }
} }
@ -462,16 +460,16 @@
&:checked + label { &:checked + label {
background-color: #fff; background-color: #fff;
border: 1px solid #f71963; border: 1px solid $color-pink;
} }
} }
label { label {
align-items: center; align-items: center;
background-color: hsla(0, 0%, 90%, 1); background-color: $color-gray;
border-radius: 4px; border-radius: 4px;
border: 1px solid transparent; border: 1px solid transparent;
color: #19273d; color: $color-black3;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
font-size: 14px; font-size: 14px;
@ -501,7 +499,7 @@
} }
.titulo { .titulo {
color: #6d6e70; color: $color-gray5;
display: block; display: block;
font-size: 16px; font-size: 16px;
margin-bottom: 8px; margin-bottom: 8px;
@ -527,8 +525,8 @@
} }
button { button {
background-color: #f71963; background-color: $color-pink;
color: #fff; color: $color-white;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
line-height: 0; line-height: 0;
@ -539,24 +537,23 @@
@include mq(lg) { @include mq(lg) {
&:hover { &:hover {
background-color: #f71963; background-color: $color-pink;
} }
} }
&:active { &:active {
background-color: #f71963; background-color: $color-pink;
} }
} }
.qtd-value { .qtd-value {
border: 1px solid #142032; border: 1px solid $color-black2;
color: #19273d; color: $color-black3;
font-size: 14px; font-size: 14px;
position: relative; position: relative;
width: 34px; width: 34px;
height: 32px; height: 32px;
-moz-appearance: textfield; -moz-appearance: textfield;
&::-webkit-outer-spin-button, &::-webkit-outer-spin-button,
&::-webkit-inner-spin-button { &::-webkit-inner-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
@ -569,7 +566,6 @@
} }
.guia-de-medidas { .guia-de-medidas {
&:before, &:before,
&:after { &:after {
content: ""; content: "";
@ -578,20 +574,20 @@
} }
&:before { &:before {
border-top: 1px solid hsl(0, 0%, 77%); border-top: 1px solid $color-gray3;
margin-top: 10px; margin-top: 10px;
padding-bottom: 6px; padding-bottom: 6px;
} }
&:after { &:after {
padding-top: 6px; padding-top: 6px;
border-bottom: 1px solid hsl(0, 0%, 77%); border-bottom: 1px solid $color-gray3;
} }
button { button {
background-color: transparent; background-color: transparent;
border: none; border: none;
color: hsla(220, 1%, 43%, 1); color: $color-gray2;
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 12px;
outline: none; outline: none;
@ -611,13 +607,13 @@
pointer-events: none; pointer-events: none;
.btn-compra { .btn-compra {
background-color: hsl(0, 0%, 77%); background-color: $color-gray3;
} }
} }
.btn-compra { .btn-compra {
background-color: #2fab61; background-color: $color-green;
color: #fff; color: $color-white;
cursor: pointer; cursor: pointer;
display: block; display: block;
font-size: 18px; font-size: 18px;
@ -636,25 +632,25 @@
@include mq(lg) { @include mq(lg) {
&:hover { &:hover {
background-color: hsla(138, 66%, 41%, 1); background-color: $color-green2;
} }
} }
&:active { &:active {
background-color: hsla(138, 50%, 41%, 1); background-color: $color-green3;
} }
} }
.erro-add-cart { .erro-add-cart {
bottom: -55px; bottom: -55px;
color: #f71963; color: $color-pink;
position: absolute; position: absolute;
font-weight: 700; font-weight: 700;
} }
} }
.compra-segura { .compra-segura {
color: #19273d; color: $color-black3;
font-size: 10px; font-size: 10px;
max-width: 270px; max-width: 270px;
text-align: center; text-align: center;
@ -678,7 +674,6 @@
} }
.descricao-produto { .descricao-produto {
&:before, &:before,
&:after { &:after {
content: ""; content: "";
@ -692,20 +687,20 @@
} }
&:before { &:before {
border-top: 1px solid #eee; border-top: 1px solid $color-gray4;
margin-top: 25px; margin-top: 25px;
padding-bottom: 16px; padding-bottom: 16px;
} }
&:after { &:after {
padding-top: 16px; padding-top: 16px;
border-bottom: 1px solid #eee; border-bottom: 1px solid $color-gray4;
} }
a { a {
background-color: transparent; background-color: transparent;
border: none; border: none;
color: #142032; color: $color-black2;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
outline: none; outline: none;
@ -734,14 +729,14 @@
} }
#descricao-completa { #descricao-completa {
color: #142032; color: $color-black2;
@include mq(md, max) { @include mq(md, max) {
padding: 0 15px; padding: 0 15px;
} }
> div { > div {
border-top: 1px solid #e5e5e5; border-top: 1px solid $color-gray6;
margin-top: 48px; margin-top: 48px;
@include mq(md, max) { @include mq(md, max) {
@ -758,7 +753,7 @@
} }
.descricao { .descricao {
color: #6d6e70; color: $color-gray5;
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
max-width: 960px; max-width: 960px;
@ -779,9 +774,11 @@
.ver-mais { .ver-mais {
align-items: flex-end; align-items: flex-end;
background: linear-gradient(to bottom, background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 0%,
rgba(255, 255, 255, 1) 75%); rgba(255, 255, 255, 1) 75%
);
bottom: 0; bottom: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -794,9 +791,9 @@
width: 100%; width: 100%;
button { button {
background-color: #19273d; background-color: $color-black3;
border: none; border: none;
color: #fff; color: $color-white;
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
@ -808,12 +805,12 @@
@include mq(lg) { @include mq(lg) {
&:hover { &:hover {
background-color: #000; background-color: $color-black;
} }
} }
&:active { &:active {
background-color: #142032; background-color: $color-black2;
} }
} }
} }
@ -823,11 +820,11 @@
.popup-add-cart, .popup-add-cart,
.modal-add-cart { .modal-add-cart {
align-items: center; align-items: center;
background-color: #142032; background-color: $color-black2;
bottom: 5%; bottom: 5%;
box-shadow: 0px 4px 16px rgba(125, 87, 98, 0.12); box-shadow: 0px 4px 16px rgba(125, 87, 98, 0.12);
border-radius: 100px; border-radius: 100px;
color: #fff; color: $color-white;
display: flex; display: flex;
font-size: 16px; font-size: 16px;
height: 90px; height: 90px;
@ -866,7 +863,7 @@
button { button {
background-color: transparent; background-color: transparent;
border: none; border: none;
color: #f71963; color: $color-pink;
cursor: pointer; cursor: pointer;
font-size: 16px; font-size: 16px;
margin-left: 12px; margin-left: 12px;

4
src/arquivos/sass/pages/_user-logado.scss
View File

@ -8,8 +8,8 @@ body.minhaConta {
} }
h1 { h1 {
border-bottom: 1px solid hsla(0, 0%, 90%, 1); border-bottom: 1px solid $color-gray;
color: #142032; color: $color-black2;
font-size: 30px; font-size: 30px;
margin-bottom: 28px; margin-bottom: 28px;
padding: 24px 14px 16px; padding: 24px 14px 16px;

2
src/arquivos/sass/partials/_ajustes.scss
View File

@ -8,7 +8,7 @@
right: 0; right: 0;
margin-right: 2em; margin-right: 2em;
position: fixed; position: fixed;
z-index: map-get($z-index, level-1-2); z-index: map-get($z-index, scroll-top);
@include mq(md, max) { @include mq(md, max) {
bottom: 6em; bottom: 6em;

6
src/arquivos/sass/partials/_breadcrumb.scss
View File

@ -20,7 +20,7 @@
a:after { a:after {
content: "Home"; content: "Home";
font-size: 14px; font-size: 14px;
border-right: 1px solid #142032; border-right: 1px solid $color-black2;
margin-right: -9px; margin-right: -9px;
padding: 0px 9px 0px 0; padding: 0px 9px 0px 0;
} }
@ -34,8 +34,8 @@
} }
a { a {
border-right: 1px solid #142032; border-right: 1px solid $color-black2;
color: #142032; color: $color-black2;
margin-right: 7px; margin-right: 7px;
padding: 0px 9px 0px 0; padding: 0px 9px 0px 0;
} }

6
src/arquivos/sass/partials/_flags.scss
View File

@ -7,7 +7,7 @@
p { p {
background-repeat: no-repeat; background-repeat: no-repeat;
color: #fff; color: $color-white;
display: none; display: none;
font-size: 11px; font-size: 11px;
float: right; float: right;
@ -19,7 +19,7 @@
text-indent: -9999px; text-indent: -9999px;
&.produto-off { &.produto-off {
background: #142032; background: $color-black2;
display: table; display: table;
float: left; float: left;
text-indent: 0; text-indent: 0;
@ -32,7 +32,7 @@
} }
&.novo { &.novo {
background-color: #f71963; background-color: $color-pink;
border-radius: 5px; border-radius: 5px;
display: table; display: table;
float: left; float: left;

36
src/arquivos/sass/partials/_footer.scss
View File

@ -3,10 +3,10 @@
/*-------------------------------------------------------------*/ /*-------------------------------------------------------------*/
.footer { .footer {
background-color: #142032; background-color: $color-black2;
.institucional-info { .institucional-info {
color: #fff; color: $color-white;
font-size: 14px; font-size: 14px;
margin: auto; margin: auto;
max-width: 950px; max-width: 950px;
@ -51,7 +51,7 @@
} }
a { a {
color: #fff; color: $color-white;
} }
.institucional-links { .institucional-links {
@ -60,9 +60,8 @@
.contato-sac { .contato-sac {
font-size: 12px; font-size: 12px;
@include mq(md, max) { @include mq(md, max) {
border-bottom: 1px solid #19273d; border-bottom: 1px solid $color-black3;
padding: 10px 0 20px; padding: 10px 0 20px;
} }
@ -89,7 +88,6 @@
p { p {
margin: 0; margin: 0;
span { span {
text-decoration: underline; text-decoration: underline;
} }
@ -124,12 +122,12 @@
} }
.selos { .selos {
border-top: 1px solid #19273d; border-top: 1px solid $color-black3;
padding: 5px 0; padding: 5px 0;
text-align: center; text-align: center;
@include mq(md, min) { @include mq(md, min) {
border-bottom: 1px solid #19273d; border-bottom: 1px solid $color-black3;
} }
.col-12 { .col-12 {
@ -140,7 +138,6 @@
ul { ul {
display: inline-block; display: inline-block;
@include mq(md, max) { @include mq(md, max) {
width: 100%; width: 100%;
} }
@ -150,12 +147,12 @@
padding-bottom: 10px; padding-bottom: 10px;
@include mq(md, max) { @include mq(md, max) {
border-bottom: 1px solid #19273d; border-bottom: 1px solid $color-black3;
padding-bottom: 25px; padding-bottom: 25px;
} }
@include mq(md, min) { @include mq(md, min) {
border-right: 1px solid hsla(0, 0%, 90%, 1); border-right: 1px solid $color-gray;
margin-right: 20px; margin-right: 20px;
padding-right: 20px; padding-right: 20px;
} }
@ -194,7 +191,7 @@
} }
p { p {
color: hsla(220, 1%, 43%, 1); color: $color-gray2;
margin: 0; margin: 0;
@include mq(md, max) { @include mq(md, max) {
@ -209,7 +206,7 @@
} }
a { a {
color: hsla(220, 1%, 43%, 1); color: $color-gray2;
display: inline-block; display: inline-block;
} }
@ -229,8 +226,8 @@
a:nth-child(2) { a:nth-child(2) {
@include mq(md, max) { @include mq(md, max) {
border-left: 1px solid hsla(0, 0%, 90%, 1); border-left: 1px solid $color-gray;
border-right: 1px solid hsla(0, 0%, 90%, 1); border-right: 1px solid $color-gray;
margin-right: 20px; margin-right: 20px;
margin-left: 20px; margin-left: 20px;
padding-right: 15px; padding-right: 15px;
@ -246,8 +243,8 @@
} }
.mobile-bottom-options { .mobile-bottom-options {
background-color: #fff; background-color: $color-white;
border-top: 1px solid hsla(0, 0%, 90%, 1); border-top: 1px solid $color-gray;
bottom: 0; bottom: 0;
left: 0; left: 0;
margin-bottom: -65px; margin-bottom: -65px;
@ -303,7 +300,6 @@
} }
.show-carrinho { .show-carrinho {
li:not(.amount-items), li:not(.amount-items),
strong, strong,
.title { .title {
@ -330,10 +326,10 @@
} }
.amount-items { .amount-items {
background-color: #142032; background-color: $color-black2;
border-radius: 50%; border-radius: 50%;
bottom: 2px; bottom: 2px;
color: #fff; color: $color-white;
font-size: 10px; font-size: 10px;
line-height: 1.3; line-height: 1.3;
min-width: 19px; min-width: 19px;

512
src/arquivos/sass/partials/_header.scss
View File

@ -1,133 +1,411 @@
.page-header { /***************************************************************/
background: $black-500; /**-- Header ------------------------------********************/
padding: 28px 0; /*-------------------------------------------------------------*/
position: relative; #ajaxBusy {
@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;
}
}
.user-items {
display: flex;
align-items: center;
justify-content: flex-end;
&__search-box {
flex: 1;
max-width: 212px;
@include mq(lg, max) {
display: none;
}
.busca {
padding: 8px 0;
border-bottom: 1px solid $white-500 ;
}
}
&__account-link {
display: flex;
align-items: center;
&::before,
&::after {
content: '';
width: 1px;
height: 19px;
margin: 0 24px;
background: $white-500;
@include mq(lg, max) {
margin: 0 16px;
}
}
&::before {
@include mq(lg, max) {
display: none;
}
}
}
&__minicart-button {
display: flex;
align-items: center;
position: relative;
padding: 0;
border: 0;
outline: 0;
background: transparent;
.portal-totalizers-ref {
.title,
.amount-products,
.amount-items strong,
.amount-kits,
.total-cart {
display: none;
}
}
.card-info {
margin: 0;
}
.amount-items-em {
display: flex;
align-items: center;
justify-content: center;
position: absolute; position: absolute;
top: 4px; top: 0;
right: -4px; left: 0;
width: 15px; background: #fff;
height: 15px; z-index: 15;
padding: 0px 16px;
line-height: 0.1;
opacity: 0.75;
&::after {
@include pseudo(inline-block);
border: solid 1px;
padding: 4px;
line-height: 0;
position: absolute;
right: 2px;
top: 35%;
border-color: $color-pink3 $color-gray4 $color-gray4 $color-gray4;
animation: spin 0.5s linear infinite;
border-radius: 50%; border-radius: 50%;
font-size: 9px; }
line-height: 11px; }
font-weight: bold; header {
font-style: normal; background: rgba(255, 255, 255, 0.95);
color: $white-500; top: 0;
background: $blue-500; transition: all 0.2s ease-in-out;
&.fixed {
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25);
position: fixed;
top: -30px;
left: 0;
right: 0;
z-index: 10;
@include mq(md, max) {
position: absolute;
}
.pink-bar {
opacity: 0;
visibility: hidden;
}
}
&.fixed-hide:not(.menu-mobile-open):not(.mini-cart-open):not(:hover) {
top: -130px;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.pink-bar {
background-color: $color-pink;
opacity: 1;
overflow: hidden;
transition: all 0.2s ease-in-out;
ul {
margin: 6px 0;
}
li {
display: inline-block;
&:not(:last-child) {
margin-right: 8px;
padding-right: 8px;
position: relative;
&::after {
border-right: 1px solid $color-white;
content: "";
height: 9px;
position: absolute;
right: 0;
top: 23%;
} }
} }
} }
&__search-box { a {
margin-top: 18px; color: $color-white;
border-top: 1px solid $gray-500; font-size: 12px;
text-transform: uppercase;
i {
vertical-align: sub;
}
}
}
.row {
align-items: center;
}
.principal {
border-bottom: 1px solid $color-gray;
padding: 20px 0;
position: relative;
@include mq(md, max) {
padding-bottom: 0;
}
> .container {
@include mq(md, max) {
max-width: 100%;
}
@include mq_range(md, xl) {
max-width: 98%;
}
}
}
.menu-mobile-abrir {
@include mq(lg, min) { @include mq(lg, min) {
display: none; display: none;
} }
button {
border: none;
background-color: transparent;
cursor: pointer;
outline: none;
}
}
.logo {
text-align: center;
@include mq(md, max) {
padding: 0;
}
img {
width: auto;
max-width: 100%;
@include mq(md, max) {
max-width: 100px;
}
}
}
.busca-desktop {
@include mq(md, max) {
display: none;
}
}
.busca-mobile {
margin-top: 20px;
padding: 0;
@include mq(md, min) {
display: none;
}
.busca { .busca {
padding: 13px 0; border-top: 1px solid $color-gray4;
border-bottom-color: $color-gray4;
padding: 5px 0;
}
}
.busca {
border-bottom: 1px solid $color-black2;
color: $color-black2;
font-size: 14px;
max-width: 330px;
margin: auto;
padding: 0;
text-align: center;
@include mq(md, max) {
max-width: 100%;
}
legend,
label,
select {
display: none;
}
input {
border: none;
outline: none;
padding: 8px 8px 8px 0;
&.fulltext-search-box {
background-color: transparent;
max-width: 300px;
margin-right: -5px;
width: 85%;
@include mq(md, max) {
max-width: 100%;
}
@include mq_range(md, lg) {
width: 80%;
}
}
&.btn-buscar {
background-color: transparent;
cursor: pointer;
font-size: 0;
padding: 8px;
@extend .sprite;
@extend .sprite-lupa;
}
}
}
.util-links {
align-items: center;
display: flex;
justify-content: flex-end;
text-align: right;
@include mq(md, max) {
padding-left: 0;
}
}
.links-usuario {
display: inline-block;
margin: 0 24px;
padding: 0 24px;
position: relative;
@include mq(md, max) {
margin: 0 14px;
padding: 0 14px;
}
@include mq_range(md, lg) {
margin: 0 16px;
padding: 0 16px;
}
&::before,
&::after {
border-right: 1px solid $color-black;
content: "";
height: 19px;
position: absolute;
top: 5px;
}
&::before {
left: 0;
@include mq(md, max) {
display: none;
}
}
&::after {
right: 0;
}
}
.carrinho {
display: inline-block;
position: relative;
a {
li:not(.amount-items),
strong,
.title {
display: none;
}
}
.AmountItemsInCart {
line-height: 0;
}
.portal-totalizers-ref {
display: inline-block;
vertical-align: top;
position: relative;
.cartInfoWrapper {
@extend .sprite;
@extend .sprite-sacola;
@include mq(md, max) {
margin-right: 5px;
}
}
.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;
}
}
}
}
}
.header-simples {
border-bottom: 1px solid $color-gray;
padding: 18px 0;
a {
color: #333;
}
.compra-segura {
font-weight: 600;
font-size: 17px;
text-align: right;
}
.header,
.compra-segura {
@include mq("sm", max) {
text-align: center;
padding: 4px 0;
font-size: 12px;
}
}
}
.ui-autocomplete {
&.autocompleteopen {
display: table !important;
}
background: white;
padding: 0;
z-index: 999 !important;
width: auto !important;
border: solid 1px #ccc;
box-shadow: 0px 1px 5px -4.5px rgba(0, 0, 0, 0.95);
li {
padding: 12px 32px 12px 16px;
overflow: hidden;
font-size: 0.9em !important;
&:nth-child(2n) {
background-color: $color-gray4;
}
a {
font-size: 14px;
cursor: pointer;
}
img {
margin-right: 10px;
width: auto;
vertical-align: middle;
}
}
}
.ui-autocomplete {
background: white;
border: solid 1px #ccc;
box-shadow: 0px 1px 5px -4.5px rgba(0, 0, 0, 0.95);
max-width: 260px;
padding: 0;
width: auto !important;
z-index: 999 !important;
&.autocompleteopen {
display: table !important;
}
li {
padding: 12px 32px 12px 16px;
overflow: hidden;
font-size: 0.9em !important;
&:nth-child(2n) {
background-color: $color-gray4;
}
a {
font-size: 14px;
cursor: pointer;
}
img {
margin-right: 10px;
width: auto;
vertical-align: middle;
} }
} }
} }

698
src/arquivos/sass/partials/_menu.scss
View File

@ -1,304 +1,514 @@
.menu { /***************************************************************/
align-self: stretch; /**-- Menu ------------------------------********************/
/*-------------------------------------------------------------*/
&__button {
padding: 0;
border: 0;
outline: 0;
background: transparent;
@include mq(lg, min) {
display: none;
}
}
.menu-header {
@include mq(lg, min) {
display: none;
}
&__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;
}
&__close-button {
display: flex;
align-items: center;
padding: 0;
border: 0;
outline: 0;
background: transparent;
position: relative;
&::before {
position: absolute;
content: '';
width: 1px;
height: 36px;
right: 27px;
background: $gray-100;
}
}
&__search-box {
background: $black-500;
.busca {
padding: 16px;
}
}
}
.main-menu {
height: 100%;
.menu-principal {
position: initial;
@include mq(lg, max) { @include mq(lg, max) {
display: flex; background-color: $color-white;
flex-direction: column; 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;
padding: 0;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; transition: all 0.45s ease-in-out;
z-index: map-get($z-index , level-5); visibility: hidden;
transform: translateX(-100%);
width: 100%; width: 100%;
height: 100%; z-index: map-get($z-index, menu);
background: $white-500;
transition: transform .2s ease-in-out;
} }
&.is-open { @include mq_range(lg, xl) {
transform: translateX(0); padding-right: 0;
} }
&__departments { &.mobile-open {
display: flex; margin-left: 0;
margin: 0;
@include mq(lg, max) {
flex: 1;
flex-direction: column;
position: relative;
overflow: hidden auto;
}
@include mq(lg, min) {
height: 100%;
}
}
&__department {
display: flex;
align-items: center;
@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;
text-decoration: underline;
color: $blue-500;
}
.submenu {
top: 100%;
opacity: 1; opacity: 1;
pointer-events: all; visibility: visible;
}
}
} }
.header-menu-mobile {
} display: none;
border-bottom: 1px solid $color-gray4;
&__department-link { padding: 22px 15px 0;
font-size: 12px; margin: 0 -15px;
line-height: 15px;
text-transform: uppercase;
color: $white-500;
@include mq(lg, max) { @include mq(lg, max) {
display: flex; display: block;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 20px 16px;
color: $black-500;
} }
@include mq(lg, min) { p {
i { display: inline-block;
display: none; 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 $color-gray4;
content: "";
display: block;
height: 36px;
position: absolute;
left: -20px;
top: -6px;
}
span {
display: block;
padding: 12px;
position: relative;
&::before,
&::after {
border: 1px solid $color-black2;
content: "";
display: block;
left: 0;
position: absolute;
top: 12px;
width: 24px;
}
&::before {
transform: rotate(45deg);
} }
&::after { &::after {
content: attr(title); transform: rotate(-45deg);
font-weight: bold;
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
} }
} }
} }
&__account-link { .busca {
background-color: $color-gray4;
border-top: 1px solid $color-gray6;
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: $color-gray;
}
&::-webkit-scrollbar-thumb {
background-color: $color-gray3;
}
&::-webkit-scrollbar-thumb:hover {
background-color: darken($color-gray3, 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 $color-gray4;
a {
font-size: 16px;
padding: 17px 0px;
width: 100%;
}
}
&:hover {
> a::after {
@include mq(lg, min) {
border-bottom-color: $color-pink;
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: $color-black2;
display: inline-block;
}
.highlight {
color: $color-pink;
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: $color-pink;
bottom: 0;
left: 0;
padding: 17.5px 15px;
position: absolute;
right: 0;
text-align: center;
@include mq(lg, min) { @include mq(lg, min) {
display: none; display: none;
} }
display: flex; a {
align-items: center; color: $color-white;
justify-content: center; font-size: 12px;
gap: 16px; text-transform: uppercase;
height: 64px;
font-size: 10px; i {
line-height: 12px; margin-right: 18px;
color: $white-500; }
background: $black-500;
} }
} }
.submenu { .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; position: absolute;
left: 0;
right: 0;
width: 100%; width: 100%;
@include mq(lg, max) { @include mq(lg, max) {
top: 0; border-bottom: 1px solid $color-gray4;
left: 100%; bottom: 64px;
height: 100%; margin-left: 100%;
overflow: auto; max-height: initial;
padding-bottom: 34px; overflow-y: auto;
background: $white-500; top: 0px;
transition: left .2s ease-in-out; transition: all 0.4s ease-in-out, top 0s ease-in-out;
} }
@include mq(lg, min) { @include mq(lg, min) {
top: calc(100% + 32px); background: rgba(255, 255, 255, 0.95);
left: 0; border-top: 1px solid $color-gray;
z-index: map-get($z-index, level-4); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.02);
padding: 30px 0 43px; padding: 45px 0px 37px;
background: rgba($white-500, 0.95); top: 70%;
box-shadow: 0px 4px 4px rgba($black-500, 0.02); transition: all 0.2s ease-in-out;
opacity: 0;
pointer-events: none;
transition: all 0.4s ease-in-out;
}
&.is-open {
left: 0;
} }
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 100%; right: 0;
width: 100%; top: -44px;
height: 28px; padding: 22px;
background: transparent; visibility: hidden;
}
.container {
@include mq(lg, max) { @include mq(lg, max) {
padding: 0 16px;
}
}
&__return-button {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
margin-bottom: 34px;
padding: 16px;
border: solid $gray-100;
border-width: 0 0 1px 0;
outline: 0;
text-align: left;
background: transparent;
@include mq(lg, min) {
display: none; display: none;
} }
} }
&__title { &::-webkit-scrollbar {
margin: 0 0 8px; width: 6px;
font-size: 20px;
line-height: 24px;
text-transform: uppercase;
color: $black-500;
@include mq(lg, max) {
font-size: 12px;
line-height: 14px;
text-decoration-line: underline;
color: $blue-500;
}
} }
&__categories-wrapper { &::-webkit-scrollbar-track {
margin-bottom: 16px; background-color: $color-gray;
}
&::-webkit-scrollbar-thumb {
background-color: $color-gray3;
}
&::-webkit-scrollbar-thumb:hover {
background-color: darken($color-gray3, 10);
}
.btn-voltar {
border-bottom: 1px solid $color-gray4;
padding: 7px 24px;
@include mq(lg, min) { @include mq(lg, min) {
display: flex; display: none;
margin-bottom: 8px;
}
} }
&__categories { button {
margin-right: 30px; background-color: transparent;
} border: none;
cursor: pointer;
&__category { font-size: 14px;
padding: 8px 0;
}
&__category-link {
font-size: 12px;
line-height: 15px;
color: $black-500;
}
&__see-all {
display: flex;
align-items: center;
gap: 9px;
font-weight: 700; font-weight: 700;
font-size: 12px; outline: none;
line-height: 15px; padding: 0;
color: $black-500; 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 $color-black4;
}
}
}
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 $color-pink;
font-size: 18px;
padding: 0;
}
}
}
&.ver-todos {
a {
color: $color-pink;
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);
} }
} }
} }

21
src/arquivos/sass/partials/_prateleira.scss
View File

@ -79,7 +79,7 @@
} }
button { button {
background-color: #142032; background-color: $color-black2;
border: none; border: none;
cursor: pointer; cursor: pointer;
height: 10px; height: 10px;
@ -92,7 +92,7 @@
.slick-active { .slick-active {
button { button {
background-color: #f71963; background-color: $color-pink;
height: 16px; height: 16px;
width: 16px; width: 16px;
} }
@ -100,7 +100,7 @@
} }
h2 { h2 {
color: #f71963; color: $color-pink;
font-size: 24px; font-size: 24px;
margin: 0 0 24px; margin: 0 0 24px;
text-align: center; text-align: center;
@ -187,9 +187,8 @@
> div { > div {
line-height: 1.3; line-height: 1.3;
} }
.antigo { .antigo {
color: hsla(220, 1%, 43%, 1); color: $color-gray2;
font-size: 14px; font-size: 14px;
min-height: 18px; min-height: 18px;
text-decoration: line-through; text-decoration: line-through;
@ -201,7 +200,7 @@
} }
.parcelado { .parcelado {
color: hsla(220, 1%, 43%, 1); color: $color-gray2;
font-size: 12px; font-size: 12px;
strong { strong {
@ -226,8 +225,8 @@
} }
a { a {
background-color: #2fab61; background-color: $color-green;
color: #fff; color: $color-white;
display: block; display: block;
font-size: 14px; font-size: 14px;
letter-spacing: 1px; letter-spacing: 1px;
@ -237,11 +236,11 @@
@include mq(lg) { @include mq(lg) {
&:hover { &:hover {
background-color: hsla(138, 66%, 41%, 1); background-color: $color-green2;
} }
&:active { &:active {
background-color: hsla(138, 50%, 41%, 1); background-color: $color-green3;
} }
} }
} }
@ -257,7 +256,7 @@
} }
.indisponivel { .indisponivel {
color: #f71963; color: $color-pink;
font-weight: bold; font-weight: bold;
margin: 5px 0; margin: 5px 0;
} }

37
src/arquivos/sass/partials/_search.scss
View File

@ -1,37 +0,0 @@
.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;
}
}

56
src/arquivos/sass/utils/_mixin.scss
View File

@ -7,7 +7,6 @@
right: auto; right: auto;
} }
} }
@mixin pseudo($display: block, $pos: absolute, $content: "") { @mixin pseudo($display: block, $pos: absolute, $content: "") {
content: $content; content: $content;
display: $display; display: $display;
@ -19,20 +18,16 @@
z-index: (map_get($z-index, $nome) + $soma); z-index: (map_get($z-index, $nome) + $soma);
} }
} }
@mixin position($top: false, $right: false, $bottom: false, $left: false) { @mixin position($top: false, $right: false, $bottom: false, $left: false) {
@if ($top) { @if ($top) {
top: $top; top: $top;
} }
@if ($right) { @if ($right) {
right: $right; right: $right;
} }
@if ($left) { @if ($left) {
left: $left; left: $left;
} }
@if ($bottom) { @if ($bottom) {
bottom: $bottom; bottom: $bottom;
} }
@ -40,55 +35,46 @@
@mixin responsive-ratio($x, $y, $pseudo: false) { @mixin responsive-ratio($x, $y, $pseudo: false) {
$padding: unquote(($y / $x) * 100 + "%"); $padding: unquote(($y / $x) * 100 + "%");
@if $pseudo { @if $pseudo {
&:before { &:before {
@include pseudo($pos: relative); @include pseudo($pos: relative);
width: 100%; width: 100%;
padding-top: $padding; padding-top: $padding;
} }
} } @else {
@else {
padding-top: $padding; padding-top: $padding;
} }
} }
@mixin css-triangle($color, @mixin css-triangle(
$color,
$direction, $direction,
$size: 6px, $size: 6px,
$position: absolute, $position: absolute,
$round: false) { $round: false
) {
@include pseudo($pos: $position); @include pseudo($pos: $position);
width: 0; width: 0;
height: 0; height: 0;
@if $round { @if $round {
border-radius: 3px; border-radius: 3px;
} }
@if $direction == down { @if $direction == down {
border-left: $size solid transparent; border-left: $size solid transparent;
border-right: $size solid transparent; border-right: $size solid transparent;
border-top: $size solid $color; border-top: $size solid $color;
margin-top: 0 - round($size / 2.5); margin-top: 0 - round($size / 2.5);
} } @else if $direction == up {
@else if $direction ==up {
border-left: $size solid transparent; border-left: $size solid transparent;
border-right: $size solid transparent; border-right: $size solid transparent;
border-bottom: $size solid $color; border-bottom: $size solid $color;
margin-bottom: 0 - round($size / 2.5); margin-bottom: 0 - round($size / 2.5);
} } @else if $direction == right {
@else if $direction ==right {
border-top: $size solid transparent; border-top: $size solid transparent;
border-bottom: $size solid transparent; border-bottom: $size solid transparent;
border-left: $size solid $color; border-left: $size solid $color;
margin-right: -$size; margin-right: -$size;
} } @else if $direction == left {
@else if $direction ==left {
border-top: $size solid transparent; border-top: $size solid transparent;
border-bottom: $size solid transparent; border-bottom: $size solid transparent;
border-right: $size solid $color; border-right: $size solid $color;
@ -100,19 +86,15 @@
&.placeholder { &.placeholder {
@content; @content;
} }
&:-moz-placeholder { &:-moz-placeholder {
@content; @content;
} }
&::-moz-placeholder { &::-moz-placeholder {
@content; @content;
} }
&:-ms-input-placeholder { &:-ms-input-placeholder {
@content; @content;
} }
&::-webkit-input-placeholder { &::-webkit-input-placeholder {
@content; @content;
} }
@ -120,9 +102,8 @@
@mixin hardware($backface: true, $perspective: 1000) { @mixin hardware($backface: true, $perspective: 1000) {
@if $backface { @if $backface {
-webkit-backface-visibility: hidden; backface-visibility: hidden;
} }
perspective: $perspective; perspective: $perspective;
} }
@ -143,7 +124,6 @@
position: relative; position: relative;
padding-right: $p-right; padding-right: $p-right;
display: inline-block; display: inline-block;
&:after { &:after {
content: " "; content: " ";
display: block; display: block;
@ -155,7 +135,6 @@
transform: translateY(-50%); transform: translateY(-50%);
background-color: $cor; background-color: $cor;
} }
&:last-child:after { &:last-child:after {
display: none; display: none;
} }
@ -164,11 +143,9 @@
@mixin mq($width, $type: min) { @mixin mq($width, $type: min) {
@if map_has_key($grid-breakpoints, $width) { @if map_has_key($grid-breakpoints, $width) {
$width: map_get($grid-breakpoints, $width); $width: map_get($grid-breakpoints, $width);
@if $type == max { @if $type == max {
$width: $width - 1px; $width: $width - 1px;
} }
@media only screen and (#{$type}-width: $width) { @media only screen and (#{$type}-width: $width) {
@content; @content;
} }
@ -176,11 +153,13 @@
} }
@mixin mq_range($min, $max) { @mixin mq_range($min, $max) {
@if (map_has_key($grid-breakpoints, $min) and map_has_key($grid-breakpoints, $max)) { @if (
map_has_key($grid-breakpoints, $min) and
map_has_key($grid-breakpoints, $max)
) {
$width_max: map_get($grid-breakpoints, $max); $width_max: map_get($grid-breakpoints, $max);
$width_min: map_get($grid-breakpoints, $min); $width_min: map_get($grid-breakpoints, $min);
$width_max: $width_max - 1px; $width_max: $width_max - 1px;
@media only screen and (min-width: $width_min) and (max-width: $width_max) { @media only screen and (min-width: $width_min) and (max-width: $width_max) {
@content; @content;
} }
@ -188,10 +167,8 @@
} }
@function map-get-next($map, $key, $fallback: false, $return: value) { @function map-get-next($map, $key, $fallback: false, $return: value) {
// Check if map is valid // Check if map is valid
@if type-of($map) == map { @if type-of($map) == map {
// Check if key exists in map // Check if key exists in map
@if map-has-key($map, $key) { @if map-has-key($map, $key) {
// Init index counter variable // Init index counter variable
@ -201,8 +178,7 @@
$key-index: false; $key-index: false;
// Traverse map for key // Traverse map for key
@each $map-key, @each $map-key, $map-value in $map {
$map-value in $map {
// Update index // Update index
$i: $i + 1; $i: $i + 1;
@ -215,9 +191,7 @@
@if $i == $key-index + 1 { @if $i == $key-index + 1 {
@if $return == key { @if $return == key {
@return $map-key; @return $map-key;
} } @else {
@else {
@return $map-value; @return $map-value;
} }
} }

2
src/arquivos/sass/utils/_normalize.scss
View File

@ -23,7 +23,7 @@ html {
*/ */
body { body {
color: #142032; color: $color-black2;
margin: 0; margin: 0;
} }

26
src/arquivos/sass/utils/_responsive-visibility.scss
View File

@ -3,7 +3,6 @@
@if $display==none { @if $display==none {
$display: block; $display: block;
} }
#{$parent} { #{$parent} {
display: $display !important; display: $display !important;
} }
@ -13,11 +12,9 @@
table#{$parent} { table#{$parent} {
display: table !important; display: table !important;
} }
tr#{$parent} { tr#{$parent} {
display: table-row !important; display: table-row !important;
} }
th#{$parent}, th#{$parent},
td#{$parent} { td#{$parent} {
display: table-cell !important; display: table-cell !important;
@ -31,24 +28,20 @@
} }
} }
@each $slug, @each $slug, $width in $grid-breakpoints {
$width in $grid-breakpoints {
$class: unquote(".visible-" + $slug); $class: unquote(".visible-" + $slug);
$classOnly: unquote(".visible-only-" + $slug); $classOnly: unquote(".visible-only-" + $slug);
@include invisibility($class); @include invisibility($class);
@include invisibility($classOnly); @include invisibility($classOnly);
} }
@each $slug, @each $slug, $width in $grid-breakpoints {
$width in $grid-breakpoints {
$class: unquote(".visible-" + $slug); $class: unquote(".visible-" + $slug);
$value: map-get-next($grid-breakpoints, $slug); $value: map-get-next($grid-breakpoints, $slug);
$media: "(max-width: "+ (($value)-1) +")"; $media: "(max-width: "+ (($value)-1) +")";
@if ($value == false) { @if ($value == false) {
$media: "(min-width: " + $width + ")"; $media: "(min-width: " + $width + ")";
} }
@media only screen and #{$media} { @media only screen and #{$media} {
@include visibility($class); @include visibility($class);
@include visibility($class + "-inline-block", inline-block); @include visibility($class + "-inline-block", inline-block);
@ -57,16 +50,13 @@ $width in $grid-breakpoints {
} }
} }
@each $slug, @each $slug, $width in $grid-breakpoints {
$width in $grid-breakpoints {
$class: unquote(".visible-only-" + $slug); $class: unquote(".visible-only-" + $slug);
$value: map-get-next($grid-breakpoints, $slug); $value: map-get-next($grid-breakpoints, $slug);
$media: "(min-width: " + $width + ") and (max-width: " + $value + ")"; $media: "(min-width: " + $width + ") and (max-width: " + $value + ")";
@if ($value == false) { @if ($value == false) {
$media: "(min-width: "+ (($width)+1) +")"; $media: "(min-width: "+ (($width)+1) +")";
} }
@media only screen and #{$media} { @media only screen and #{$media} {
@include visibility($class); @include visibility($class);
@include visibility($class + "-inline-block", inline-block); @include visibility($class + "-inline-block", inline-block);
@ -75,31 +65,25 @@ $width in $grid-breakpoints {
} }
} }
@each $slug, @each $slug, $width in $grid-breakpoints {
$width in $grid-breakpoints {
$class: unquote(".invisible-" + $slug); $class: unquote(".invisible-" + $slug);
$value: map-get-next($grid-breakpoints, $slug); $value: map-get-next($grid-breakpoints, $slug);
$media: "(max-width: "+ (($value)-1) +")"; $media: "(max-width: "+ (($value)-1) +")";
@if ($value == false) { @if ($value == false) {
$media: "(min-width: " + $width + ")"; $media: "(min-width: " + $width + ")";
} }
@media only screen and #{$media} { @media only screen and #{$media} {
@include invisibility($class); @include invisibility($class);
} }
} }
@each $slug, @each $slug, $width in $grid-breakpoints {
$width in $grid-breakpoints {
$class: unquote(".invisible-only-" + $slug); $class: unquote(".invisible-only-" + $slug);
$value: map-get-next($grid-breakpoints, $slug); $value: map-get-next($grid-breakpoints, $slug);
$media: "(min-width: " + $width + ") and (max-width: " + $value + ")"; $media: "(min-width: " + $width + ") and (max-width: " + $value + ")";
@if ($value == false) { @if ($value == false) {
$media: "(min-width: " + $width + ")"; $media: "(min-width: " + $width + ")";
} }
@media only screen and #{$media} { @media only screen and #{$media} {
@include invisibility($class); @include invisibility($class);
} }

50
src/arquivos/sass/utils/_variaveis.scss
View File

@ -1,19 +1,37 @@
// fonts // fonts
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Roboto&display=swap');
$font-family: 'Inter', sans-serif; $font-family: "Roboto", sans-serif;
$font-weight-light: 300; $font-weight-light: 300;
$font-weight-regular: 400; $font-weight-regular: 400;
$font-weight-heavy: 700; $font-weight-heavy: 700;
$font-height: 1.5; $font-height: 1.5;
// colors // colors
$black-500: #000; $color-black: #000;
$white-500: #fff; $color-black2: #142032;
$blue-500: #00C8FF; $color-black3: #19273d;
$gray-500: #333333; $color-black4: #151728;
$gray-200: #828282;
$gray-100: #E0E0E0;
$color-gray: hsla(0, 0%, 90%, 1);
$color-gray2: hsla(220, 1%, 43%, 1);
$color-gray3: hsl(0, 0%, 77%);
$color-gray4: #eee;
$color-gray5: #6d6e70;
$color-gray6: #e5e5e5;
$color-white: #fff;
$color-white2: #f5f5f5;
$color-pink: #f71963;
$color-pink2: hsla(348, 83%, 72%, 1);
$color-pink3: hsla(348, 83%, 58%, 1);
$color-purple: hsla(266, 70%, 52%, 1);
$color-green: #2fab61;
$color-green2: hsla(138, 66%, 41%, 1);
$color-green3: hsla(138, 50%, 41%, 1);
$color-green4: hsla(138, 59%, 34%, 1);
// universal // universal
@ -28,9 +46,13 @@ $grid-breakpoints: (
) !default; ) !default;
$z-index: ( $z-index: (
level-1: 5, menu: 15,
level-1-2: 7, popup-add-cart: 10,
level-2: 10, dropdown: 10,
level-3: 15, flag-prateleira: 5,
level-4: 20, comprar-flutuante: 5,
level-5: 25) !default; avise-me: 5,
scroll-top: 7,
header-fixo: 10,
popup-user: 15,
) !default;

BIN
src/arquivos/sprite/bag-icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 815 B

BIN
src/arquivos/sprite/close-icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 347 B

BIN
src/arquivos/sprite/lock-icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 527 B

BIN
src/arquivos/sprite/menu-arrow-icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 230 B

BIN
src/arquivos/sprite/menu-icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 734 B

BIN
src/arquivos/sprite/menu-left-arrow-icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 264 B

BIN
src/arquivos/sprite/menu-mobile-arrow-icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 271 B

BIN
src/arquivos/sprite/search-icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 602 B

BIN
src/arquivos/sprite/user-icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 821 B

105
src/controles-customizados/menuPrincipal.html
View File

@ -1,105 +0,0 @@
<nav class="main-menu">
<div class="menu-header">
<div class="menu-header__top-wrapper">
<div class="menu-header__text">
<i class="sprite sprite-lock-icon"></i>
COMPRA 100% SEGURA
</div>
<button class="menu-header__close-button" aria-label="Close">
<i class="sprite sprite-close-icon"></i>
</button>
</div>
<div class="menu-header__search-box">
<vtex.cmc:fullTextSearchBox />
</div>
</div>
<ul class="main-menu__departments">
<li class="main-menu__department">
<a class="main-menu__department-link" href="#" title="LOREM IPSUM">
LOREM IPSUM
<i class="sprite sprite-menu-mobile-arrow-icon"></i>
</a>
<div class="submenu">
<button class="submenu__return-button">
<i class="sprite sprite-menu-left-arrow-icon"></i>
VOLTAR
</button>
<div class="container">
<h2 class="submenu__title">LOREM IPSUM</h2>
<div class="submenu__categories-wrapper">
<ul class="submenu__categories">
<li class="submenu__category">
<a class="submenu__category-link" href="#"
>Lorem Ipsum</a
>
</li>
<li class="submenu__category">
<a class="submenu__category-link" href="#"
>Lorem Ipsum</a
>
</li>
<li class="submenu__category">
<a class="submenu__category-link" href="#"
>Lorem Ipsum</a
>
</li>
<li class="submenu__category">
<a class="submenu__category-link" href="#"
>Lorem Ipsum</a
>
</li>
</ul>
<ul class="submenu__categories">
<li class="submenu__category">
<a class="submenu__category-link" href="#"
>Lorem Ipsum</a
>
</li>
<li class="submenu__category">
<a class="submenu__category-link" href="#"
>Lorem Ipsum</a
>
</li>
<li class="submenu__category">
<a class="submenu__category-link" href="#"
>Lorem Ipsum</a
>
</li>
<li class="submenu__category">
<a class="submenu__category-link" href="#"
>Lorem Ipsum</a
>
</li>
</ul>
</div>
<a class="submenu__see-all" href="#"
>VER TODOS
<i class="sprite sprite-menu-arrow-icon"></i>
</a>
</div>
</div>
</li>
<li class="main-menu__department">
<a class="main-menu__department-link" href="#" title="LOREM IPSUM">
LOREM IPSUM
<i class="sprite sprite-menu-mobile-arrow-icon"></i>
</a>
</li>
<li class="main-menu__department">
<a class="main-menu__department-link" href="#" title="LOREM IPSUM">
LOREM IPSUM
<i class="sprite sprite-menu-mobile-arrow-icon"></i>
</a>
</li>
</ul>
<a class="main-menu__account-link" href="/account">
<i class="sprite sprite-user-icon"></i>
ENTRAR/MEUS PEDIDOS
</a>
</nav>

34
src/template-pagina/amandaalmeida-home.html
View File

@ -1,34 +0,0 @@
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:vtex="http://www.vtex.com.br/2009/vtex-common"
xmlns:vtex.cmc="http://www.vtex.com.br/2009/vtex-commerce"
lang="pt-br"
>
<head>
<meta name="page" content="home" page-id="homepage" />
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<vtex:metaTags />
<title>M3 - Amanda Almeida</title>
<vtex:template id="amandaalmeida-loads-header" />
</head>
<body>
<vtex:template id="amandaalmeida-header" />
<main class="home"></main>
<footer>
<vtex:template id="amandaalmeida-footer-newsletter" />
<vtex:template id="amandaalmeida-footer-links" />
<vtex:template id="amandaalmeida-footer" />
</footer>
<vtex:template id="amandaalmeida-loads-footer" />
</body>
</html>

38
src/template-pagina/sub-templates/amandaalmeida-header.html
View File

@ -1,38 +0,0 @@
<header class="page-header">
<div class="container">
<div class="page-header__wrapper">
<div class="menu">
<button aria-label="menu" class="menu__button">
<i class="sprite sprite-menu-icon"></i>
</button>
<vtex.cmc:menuPrincipal />
</div>
<a href="/"
><img
class="page-header__logo"
src="/arquivos/Logo-M3-amanda-almeida.png"
alt="Logo M3"
/></a>
<div class="user-items">
<div class="user-items__search-box">
<vtex.cmc:fullTextSearchBox />
</div>
<a class="user-items__account-link" href="/account"
><i class="sprite sprite-user-icon"></i
></a>
<button aria-label="Bag" class="user-items__minicart-button">
<i class="sprite sprite-bag-icon"></i>
<vtex.cmc:AmountItemsInCart />
</button>
</div>
</div>
</div>
<div class="page-header__search-box">
<div class="container">
<vtex.cmc:fullTextSearchBox />
</div>
</div>
</header>

11
src/template-pagina/sub-templates/amandaalmeida-loads-footer.html
View File

@ -1,11 +0,0 @@
<script
crossorigin="anonymous"
src="https://polyfill.io/v3/polyfill.min.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/proxy-polyfill@0.3.1/proxy.min.js"
integrity="sha256-aRX3NIXjCxT51wF6s9KHLiFrf5E0n1YzvDLAMzeAVzA="
crossorigin="anonymous"
></script>
<script src="/arquivos/amandaalmeida--main-bundle.js" async="async"></script>

6
src/template-pagina/sub-templates/amandaalmeida-loads-header.html
View File

@ -1,6 +0,0 @@
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="/arquivos/amandaalmeida--main.css" />

0
src/template-pagina/sub-templates/amandaalmeida-footer-links.html → src/template-pagina/sub-templates/template-footer-links.html
View File

0
src/template-pagina/sub-templates/amandaalmeida-footer-newsletter.html → src/template-pagina/sub-templates/template-footer-newsletter.html
View File

0
src/template-pagina/sub-templates/amandaalmeida-simples.html → src/template-pagina/sub-templates/template-footer-simples.html
View File

0
src/template-pagina/sub-templates/amandaalmeida-footer.html → src/template-pagina/sub-templates/template-footer.html
View File

0
src/template-pagina/sub-templates/amandaalmeida-header-simples.html → src/template-pagina/sub-templates/template-header-simples.html
View File

160
src/template-pagina/sub-templates/template-header.html Normal file
View File

@ -0,0 +1,160 @@
<header class="header">
<div class="pink-bar">
<div class="container">
<div class="row">
<div class="col-12">
<ul>
<li>
<a href="#">
<i class="sprite sprite-map-pointer-white"></i>
Guide Shop
</a>
</li>
<li>
<a href="/account">
Meus pedidos
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="principal">
<div class="container">
<div class="row">
<div class="col-4 menu-mobile-abrir">
<button aria-label="Abrir Menu" id="open-menu-button">
<i class="sprite sprite-menu"></i>
</button>
</div>
<div class="col-12 col-md-5 menu-principal">
<div class="header-menu-mobile">
<p>
<i class="sprite sprite-cadeado"></i>
<span>Compra 100% segura</span>
</p>
<button aria-label="Fechar Menu" id="close-menu-button">
<span></span>
</button>
<div class="fullTextSearchBox">
<vtex.cmc:fullTextSearchBox />
</div>
</div>
<nav role="navigation">
<ul class="itens nav navbar-nav" itemscope="itemscope"
itemtype="http://www.schema.org/SiteNavigationElement">
<li class="novidades" itemprop="name">
<a itemprop="url" class="titulo-departamento highlight"
href="/busca/?fq=H:143&#38;O=OrderByReleaseDateDESC" title="novidades">
novidades
</a>
</li>
<li class="calcados m3-dropdown" itemprop="name">
<a itemprop="url" class="titulo-departamento" href="/calcados" title="calçados">
calçados
</a>
<button class="ver-departamento">Abir departamento</button>
<div class="m3-dropdown-menu">
<div class="btn-voltar">
<button>
<i class="sprite sprite-arrow-left"></i>
<span>
Voltar
</span>
</button>
</div>
<div class="container">
<div class="links-menu">
<ul>
<li itemprop="name" class="link-departamento">
<a itemprop="url" href="/calcados" title="Calçados">
Calçados
</a>
</li>
<li itemprop="name">
<a itemprop="url" href="/calcados/sapatilha" title="Sapatilha">
Sapatilha
</a>
</li>
<li itemprop="name">
<a itemprop="url" href="/calcados/tenis" title="Tênis">
Tênis
</a>
</li>
<li itemprop="name">
<a itemprop="url" href="/calcados/scarpin" title="Scarpin">
Scarpin
</a>
</li>
<li itemprop="name">
<a itemprop="url" href="/calcados/bota" title="Bota">
Bota
</a>
</li>
<li itemprop="name" class="ver-todos">
<a itemprop="url" href="/calcados" title="ver todos">
ver todos
<i class="sprite sprite-arrow-right"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="sapatilha" itemprop="name">
<a itemprop="url" class="titulo-departamento" href="/calcados/sapatilha" title="sapatilha">
sapatilha
</a>
</li>
<li class="tênis" itemprop="name">
<a itemprop="url" class="titulo-departamento" href="/calcados/tenis" title="tênis">
tênis
</a>
</li>
</ul>
</nav>
<div class="footer-menu-mobile">
<a href="">
<i class="sprite sprite-user-white"></i>
<span>Entrar/Meus pedidos</span>
</a>
</div>
</div>
<div class="col-4 col-md-2 logo">
<a href="/" title="VTEX"><img src="/arquivos/template-logo.png" alt="VTEX" /></a>
</div>
<div class="col-4 col-md-5 util-links">
<div class="busca-desktop">
<div class="fullTextSearchBox">
<vtex.cmc:fullTextSearchBox />
</div>
</div>
<div class="links-usuario">
<a href="/account" title="minha-conta">
<i class="sprite sprite-user"></i>
</a>
</div>
<div class="carrinho">
<a href="/checkout/#cart">
<div class="AmountItemsInCart">
<i class="sprite sprite-shopping-bag"></i>
<vtex.cmc:AmountItemsInCart />
</div>
</a>
<div class="mini-cart">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 busca-mobile">
<div class="fullTextSearchBox">
<vtex.cmc:fullTextSearchBox />
</div>
</div>
</div>
</div>
</div>
</header>

5
src/template-pagina/sub-templates/template-loads-footer.html Normal file
View File

@ -0,0 +1,5 @@
<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/proxy-polyfill@0.3.1/proxy.min.js"
integrity="sha256-aRX3NIXjCxT51wF6s9KHLiFrf5E0n1YzvDLAMzeAVzA=" crossorigin="anonymous"></script>
<script src="/arquivos/template--main-bundle.js" async="async"></script>

6
src/template-pagina/sub-templates/template-loads-header.html Normal file
View File

@ -0,0 +1,6 @@
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="/arquivos/template--main.css" />

37
src/template-pagina/template-404.html Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:vtex="http://www.vtex.com.br/2009/vtex-common"
xmlns:vtex.cmc="http://www.vtex.com.br/2009/vtex-commerce" lang="pt-br">
<head>
<meta name="page" content="erro" page-id="404" />
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<vtex:template id="template-loads-header" />
</head>
<body >
<vtex:template id="template-header" />
<main class="pagina-erro erro-404">
<div class="col- text-center">
<h1>Página não encontrada.</h1>
<p>A página que vocês está tentando acessar está indisponível.</p>
<a href="/" class="voltar-para-home">voltar</a>
</div>
</main>
<footer >
<vtex:template id="template-footer-newsletter" />
<vtex:template id="template-footer-links" />
<vtex:template id="template-footer" />
</footer>
<vtex:template id="template-loads-footer" />
</body>
</html>

35
src/template-pagina/template-500.html Normal file
View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:vtex="http://www.vtex.com.br/2009/vtex-common"
xmlns:vtex.cmc="http://www.vtex.com.br/2009/vtex-commerce" lang="pt-br">
<head>
<meta name="page" content="erro" page-id="500" />
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<vtex:template id="template-loads-header" />
</head>
<body >
<vtex:template id="template-header" />
<main class="pagina-erro erro-500">
<h1>Algo deu errado.</h1>
<p>Sua solicitação não pode ser atendida devido a um erro inesperado.<br/> Tente novamente.</p>
<a href="/" class="voltar-para-home">voltar</a>
</main>
<footer >
<vtex:template id="template-footer-newsletter" />
<vtex:template id="template-footer-links" />
<vtex:template id="template-footer" />
</footer>
<vtex:template id="template-loads-footer" />
</body>
</html>

32
src/template-pagina/template-buscavazia.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:vtex="http://www.vtex.com.br/2009/vtex-common"
xmlns:vtex.cmc="http://www.vtex.com.br/2009/vtex-commerce" lang="pt-br">
<head>
<meta name="page" content="erro" page-id="busca-vazia" />
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<vtex:metaTags />
<vtex:template id="template-loads-header" />
</head>
<body >
<vtex:template id="template-header" />
<main class="pagina-erro busca-vazia">
<h1>Sua busca por <span class="search-term">""</span> não gerou nenhum resultado.</h1>
<p>Verifique os termos buscados e tente novamente.</p>
<a href="/" class="voltar-para-home">voltar</a>
</main>
<footer >
<vtex:template id="template-footer-newsletter" />
<vtex:template id="template-footer-links" />
<vtex:template id="template-footer" />
</footer>
<vtex:template id="template-loads-footer" />
</body>
</html>

79
src/template-pagina/template-categoria.html Normal file
View File

@ -0,0 +1,79 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:vtex="http://www.vtex.com.br/2009/vtex-common"
xmlns:vtex.cmc="http://www.vtex.com.br/2009/vtex-commerce" lang="pt-br">
<head>
<meta name="page" content="categoria" page-id="categoria" />
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<vtex:metaTags />
<vtex:contentPlaceHolder id="htmlSeo" />
<title>Template</title>
<vtex:template id="template-loads-header" />
</head>
<body>
<vtex:template id="template-header" />
<vtex:template id="template-menu" />
<main class="categoria">
<section class="site-linha">
<div class="container">
<div class="row">
<div class="breadcrumb col-12">
<vtex.cmc:breadCrumb />
</div>
<div class="col-12 col-md-4 col-lg-3">
<div class="filtros-categoria ">
<div class="topo-filtros">
<h3>
Filtrar busca
</h3>
<button aria-label="Fechar Filtros" id="close-filter-button">
<span></span>
</button>
</div>
<vtex.cmc:searchNavigator />
<button class="clear-filter-btn">
Remover filtros
</button>
<button class="aply-filter-btn">
Aplicar filtros
</button>
</div>
</div>
<div class="col-12 col-md-8 col-lg-9">
<div class="topo-resultado">
<vtex.cmc:searchTitle />
<div class="opcoes-resultado">
<button aria-label="Abrir Filtros" id="open-filter-button">
Filtrar
</button>
</div>
<button class="clear-filter-btn">
Remover filtros
</button>
</div>
<div class="produtos-da-categoria">
<vtex.cmc:searchResult layout="46b0e7f2-15ee-4789-a75e-280e389d2b8f" itemCount="12"
columnCount="12" />
</div>
</div>
</div>
</div>
</section>
</main>
<footer>
<vtex:template id="template-footer-newsletter" />
<vtex:template id="template-footer-links" />
<vtex:template id="template-footer" />
</footer>
<vtex:template id="template-loads-footer" />
</body>
</html>

19
src/template-pagina/template-elementos-menu.html Normal file
View File

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:vtex="http://www.vtex.com.br/2009/vtex-common" xmlns:vtex.cmc="http://www.vtex.com.br/2009/vtex-commerce" lang="pt-br">
<head>
<meta name="page" content="home" page-id="homepage" />
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<section>
<!-- <div class="produtos-menu">
<vtex:contentPlaceHolder id="produtos-menu" />
</div> -->
<div class="banners-menu">
<vtex:contentPlaceHolder id="banners-menu" />
</div>
</section>
</body>
</html>

127
src/template-pagina/template-home.html Normal file
View File

@ -0,0 +1,127 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:vtex="http://www.vtex.com.br/2009/vtex-common"
xmlns:vtex.cmc="http://www.vtex.com.br/2009/vtex-commerce" lang="pt-br">
<head>
<meta name="page" content="home" page-id="homepage" />
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<vtex:metaTags />
<vtex:contentPlaceHolder id="htmlSeo" />
<title>Template</title>
<vtex:template id="template-loads-header" />
</head>
<body>
<vtex:template id="template-header" />
<main class="home">
<section class="main-gallery">
<div class="desktop">
<vtex:contentPlaceHolder id="slide-principal" />
</div>
<div class="mobile">
<vtex:contentPlaceHolder id="slide-principal-mobile" />
</div>
</section>
<section class="container tipbar">
<div class="row">
<div class="col-12">
<ul>
<li>
<i class="sprite sprite-credit-card"></i>
<p>
parcelamento
<span>
até <strong>10x sem juros</strong>
</span>
</p>
</li>
<li>
<i class="sprite sprite-truck"></i>
<p>
frete grátis
<span>
acima de <strong>R$399,00</strong>
</span>
</p>
</li>
<li>
<i class="sprite sprite-discount-tag"></i>
<p>
desconto de
<span>
<strong>10%off</strong> no boleto
</span>
</p>
</li>
</ul>
</div>
</div>
</section>
<section class="container mosaico-home">
<div class="row">
<div class="banners-left banner col-12 col-md-4">
<vtex:contentPlaceHolder id="banner-01" />
</div>
<div class="banners-right col-12 col-md-8 row">
<div class="banner col-12 col-md-6">
<vtex:contentPlaceHolder id="banner-02" />
</div>
<div class="banner col-12 col-md-6">
<vtex:contentPlaceHolder id="banner-03" />
</div>
<div class="banner col-12">
<vtex:contentPlaceHolder id="banner-04" />
</div>
</div>
</div>
</section>
<section class="instagramGallery">
<div class="container">
<div class="instagramGallery__row">
<div class="instagramGallery__photos"></div>
<div class="instagramGallery__link">
<i class="sprite sprite-instagram-black"></i>
<p>
<i>#</i>osqueridinhos
<a href="#" target="_blank">
ver todos <i class="sprite sprite-arrow-right"></i>
</a>
</p>
</div>
</div>
</div>
</section>
<section class="container mosaico-home-footer">
<div class="banner desktop">
<vtex:contentPlaceHolder id="banner-05" />
</div>
<div class="banner mobile">
<vtex:contentPlaceHolder id="mobile-banner-05" />
</div>
</section>
</main>
<footer>
<vtex:template id="template-footer-newsletter" />
<vtex:template id="template-footer-links" />
<vtex:template id="template-footer" />
</footer>
<vtex:template id="template-loads-footer" />
</body>
</html>

55
src/template-pagina/template-institucional.html Normal file
View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:vtex="http://www.vtex.com.br/2009/vtex-common"
xmlns:vtex.cmc="http://www.vtex.com.br/2009/vtex-commerce"
lang="pt-br"
>
<head>
<meta name="page" content="institucional" page-id="institucional" />
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<vtex:metaTags />
<vtex:contentPlaceHolder id="htmlSeo" />
<title>Template</title>
<vtex:template id="template-loads-header" />
</head>
<body>
<vtex:template id="template-header" />
<main class="institucional container">
<div class="row">
<div class="col-12 breadcrumb">
<ul>
<li>
<a href="/">
Home
</a>
</li>
<li>
<span>
Institucional
</span>
</li>
</ul>
</div>
<div class="col-12 navegacao">
<vtex.cmc:navegacaoInstitucional />
</div>
<div class="col-12 conteudo">
<vtex:contentPlaceHolder id="texto-institucional" />
</div>
</div>
</main>
<footer>
<vtex:template id="template-footer-newsletter" />
<vtex:template id="template-footer-links" />
<vtex:template id="template-footer" />
</footer>
<vtex:template id="template-loads-footer" />
</body>
</html>

35
src/template-pagina/template-login.html Normal file
View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:vtex="http://www.vtex.com.br/2009/vtex-common"
xmlns:vtex.cmc="http://www.vtex.com.br/2009/vtex-commerce" lang="pt-br">
<head>
<meta name="page" content="login" page-id="login" />
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<vtex:contentPlaceHolder id="htmlSeo" />
<title>Template</title>
<vtex:template id="template-loads-header" />
</head>
<body >
<vtex:template id="template-header" />
<main class="login">
<section id="login-content" class="container">
<vtex.cmc:userLogin/>
</section>
</main>
<footer >
<vtex:template id="template-footer-newsletter" />
<vtex:template id="template-footer-links" />
<vtex:template id="template-footer" />
</footer>
<vtex:template id="template-loads-footer" />
</body>
</html>

39
src/template-pagina/template-minha-conta.html Normal file
View File

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:vtex="http://www.vtex.com.br/2009/vtex-common"
xmlns:vtex.cmc="http://www.vtex.com.br/2009/vtex-commerce" lang="pt-br">
<head>
<meta name="page" content="minhaConta" page-id="minha-conta" />
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<vtex:contentPlaceHolder id="htmlSeo" />
<title>Template</title>
<vtex:template id="template-loads-header" />
<link rel="stylesheet" href="/arquivos/template--user-pages.css" type="text/css" />
</head>
<body class="minha-conta">
<vtex:template id="template-header" />
<section id="account-content" class="container">
<div class="row">
<div class="col-12">
<h1>Minha Conta</h1>
</div>
<div class="col-12 accountUserProfile">
<vtex.cmc:accountUserProfile />
</div>
</div>
</section><!-- #content -->
<footer>
<vtex:template id="template-footer-newsletter" />
<vtex:template id="template-footer-links" />
<vtex:template id="template-footer" />
</footer>
<script src="/arquivos/bootstrap.min.js"></script>
<vtex:template id="template-loads-footer" />
</body>
</html>

103
src/template-pagina/template-produto.html Normal file
View File

@ -0,0 +1,103 @@
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:vtex="http://www.vtex.com.br/2009/vtex-common"
xmlns:vtex.cmc="http://www.vtex.com.br/2009/vtex-commerce"
lang="pt-br"
>
<head>
<meta name="page" content="produto" page-id="produto-padrao" />
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<vtex:metaTags />
<vtex:contentPlaceHolder id="htmlSeo" />
<title>Template</title>
<vtex:template id="template-loads-header" />
</head>
<body class="produto">
<vtex:template id="template-header" />
<main class="produto">
<section class="container">
<div class="row">
<div class="col-12 breadcrumb">
<vtex.cmc:breadCrumb />
</div>
</div>
<div class="row">
<div class="col-12 col-lg-7">
<div class="product-image">
<vtex.cmc:ProductImage />
</div>
</div>
<div class="col-12 col-lg-5">
<div class="product-info">
<h1 class="nome-produto" itemprop="name">
<vtex.cmc:productName />
</h1>
<div class="product-reference">
<span>REF.: </span>
<vtex.cmc:productReference />
</div>
<div class="moduloPreco"></div>
<div class="moduloAviseMe"></div>
<div class="moduloSkus"></div>
<div class="similares"></div>
<div class="moduloQuantidade"></div>
<div class="moduloBotaoDeCompra"></div>
<div class="compra-segura">
<p>
<span>compra segura</span
><i class="sprite sprite-cadeado"></i>
</p>
</div>
<div class="descricao-produto">
<a
href="#descricao-completa"
title="Descrição do Produto"
>
<i class="sprite sprite-arrow-down-pink"></i>
Descrição do produto
</a>
</div>
</div>
</div>
</div>
</section>
<section class="container">
<div class="row prateleira-de-produtos">
<div class="col-12">
<vtex:contentPlaceHolder id="prateleira-padrao" />
</div>
</div>
</section>
<section class="container">
<div id="descricao-completa" class="row">
<div class="col-12">
<h2>Descrição</h2>
<div class="descricao" itemprop="description">
<vtex.cmc:ProductDescription />
</div>
</div>
</div>
</section>
</main>
<vtex.cmc:dataLayerProduto />
<vtex.cmc:skuJson />
<footer>
<vtex:template id="template-footer-newsletter" />
<vtex:template id="template-footer-links" />
<vtex:template id="template-footer" />
</footer>
<vtex:template id="template-loads-footer" />
</body>
</html>