Compare commits

..

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

65 changed files with 20054 additions and 2163 deletions

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>

View File

@ -6,5 +6,11 @@ const menuElements = require("./pages/elementos-menu");
module.exports = { module.exports = {
accountName: "agenciamagma", accountName: "agenciamagma",
pages: [{ data: home, template: "rafaelsampaio-home.html" }], pages: [
{ 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" },
],
}; };

19013
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,7 +1,7 @@
{ {
"author": "Agência M3", "author": "Agência M3",
"name": "tema-template", "name": "tema-template",
"shopName": "rafaelsampaio", "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",

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -64,7 +64,7 @@ const app = new Container({
], ],
}); });
app.bind(Minicart.name, ".minicart__drawer"); app.bind(Minicart.name, ".carrinho .mini-cart");
app.bind(Newsletter.name, { app.bind(Newsletter.name, {
elemento: ".news-form", elemento: ".news-form",
textButtom: "Cadastre-se", textButtom: "Cadastre-se",

View File

@ -1,28 +1,45 @@
import { isSmallerThen991 } from "Helpers/MediasMatch"; import { isSmallerThen768 } from "Helpers/MediasMatch";
export default class FixedHeader { export default class FixedHeader {
constructor() { constructor() {
if (!isSmallerThen991) { if (!isSmallerThen768) {
this.selectors(); this.fixedHeader();
this.events();
} }
} }
selectors() { fixedHeader() {
this.pageHeader = $(".page-header"); var lastScroll = 0;
} var timer, scrollTop, headerHeight;
var element = $("header.header");
events() { $(document).scroll(function (e) {
$(document).scroll(this.fixHeader.bind(this)); headerHeight = element.height();
} scrollTop = $(document).scrollTop();
fixHeader() { if (scrollTop > 1) {
const topScroll = $(document).scrollTop(); $("body").css("padding-top", headerHeight);
element.addClass("fixed");
if (topScroll > 200) { if (timer) {
this.pageHeader.addClass("is-fixed"); window.clearTimeout(timer);
} else { }
this.pageHeader.removeClass("is-fixed");
} timer = window.setTimeout(function () {
if (
scrollTop > lastScroll &&
scrollTop > element.height() + 20
) {
element.addClass("fixed-hide");
} else {
element.removeClass("fixed-hide");
}
lastScroll = $(document).scrollTop();
}, 50);
} else {
element.removeClass("fixed");
$("body").css("padding-top", 0);
}
});
} }
} }

View File

@ -6,32 +6,25 @@ export default class Minicart {
const structure = ` const structure = `
<div class="mini-cart-container"> <div class="mini-cart-container">
<div class="mini-cart-header"> <div class="mini-cart-header">
<div class="mini-cart-header__text"> <i class="sprite sprite-cadeado"></i>
<i class="sprite sprite-lock-icon"></i> <span>
<span> COMPRA 100% SEGURA
COMPRA 100% SEGURA </span>
</span> <button class="btn-close" aria-label="fechar carrinho">
</div> fechar
</button>
<div class="mini-cart-header__close-button">
<button class="btn-close" aria-label="fechar carrinho">
<i class="sprite sprite-close-menu-icon"></i>
</button>
</div>
</div> </div>
<div class="mini-cart-main"> <div class="mini-cart-main">
<div class="wait-screen"></div> <div class="wait-screen"></div>
<ul class="product-list"> <ul class="product-list"></ul>
</ul>
</div> </div>
<div class="mini-cart-footer"> <div class="mini-cart-footer">
<div class="totals-container"> <div class="totals-container">
<div class="qtd-items"> <div class="qtd-items">
<strong>Total</strong> Total de <span class="value">0</span> itens
<strong>R$<span class="value">R$3.799,05</span></strong>
</div> </div>
<div class="total"> <div class="total">
Subtotal: Subtotal: <strong>R$<span class="value">00,00</span></strong>
</div> </div>
</div> </div>
<button class="continue-buying" aria-label="Continuar comprando"> <button class="continue-buying" aria-label="Continuar comprando">
@ -64,7 +57,7 @@ export default class Minicart {
<li id="${i + "-" + items[i].uniqueId}" class="product"> <li id="${i + "-" + items[i].uniqueId}" class="product">
<div class="product-image"> <div class="product-image">
<a href="${items[i].detailUrl}" title="${items[i].name}"> <a href="${items[i].detailUrl}" title="${items[i].name}">
<img src="${alterarTamanhoImagemSrcVtex(items[i].imageUrl, 80, 102)}" alt="${ <img src="${alterarTamanhoImagemSrcVtex(items[i].imageUrl, 85, 100)}" alt="${
items[i].name items[i].name
}"> }">
</a> </a>
@ -297,6 +290,8 @@ export default class Minicart {
} }
this.createMiniCartStructure(element); this.createMiniCartStructure(element);
this.configureEvents(".minicart__button"); this.configureEvents(
"header .carrinho> a, .mobile-bottom-options .portal-totalizers-ref, .popup-add-cart .cart"
);
} }
} }

View File

@ -1,49 +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.returnButton = $(".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.returnButton.click(this.closeSubmenu.bind(this));
if (isSmallerThen991) { if ($(this).parent().hasClass("sub-menu-open")) {
this.departmentLink.click(this.openSubmenu.bind(this)); $(this).parent().removeClass("sub-menu-open");
} } else {
} $(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(event) {
event.preventDefault();
const link = $(event.target);
link.parents(".main-menu__department")
.find(".submenu")
.addClass("is-open");
}
closeSubmenu(event) {
const button = $(event.target);
button.parents(".submenu").removeClass("is-open");
} }
} }

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;
@ -147,7 +147,7 @@
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;
@ -177,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);
} }
} }
@ -212,7 +212,7 @@
} }
.ship-postalCode a { .ship-postalCode a {
color: #f71963; color: $color-pink;
} }
} }
@ -234,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%;
@ -252,7 +252,7 @@
text-align: left; text-align: left;
label { label {
color: #6d6e70; color: $color-gray5;
font-size: 12px; font-size: 12px;
} }
} }
@ -271,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;
@ -281,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 {
@ -299,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;
@ -312,7 +312,7 @@
} }
tfoot { tfoot {
background-color: #f5f5f5; background-color: $color-white2;
.info { .info {
text-transform: uppercase; text-transform: uppercase;
@ -359,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;
@ -368,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;

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);
} }
} }
} }

View File

@ -17,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,
@ -55,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;
@ -73,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;
@ -95,7 +95,7 @@
} }
tfoot td { tfoot td {
color: #19273d; color: $color-black3;
text-transform: uppercase; text-transform: uppercase;
} }
} }

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 {

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;

View File

@ -1,66 +1,21 @@
.minicart { .mini-cart {
position: relative; height: 475px;
max-height: 200px;
opacity: 0;
position: absolute;
right: 0px;
top: 50px;
transition: all 0.3s ease-in-out;
visibility: hidden;
width: 375px;
z-index: 16;
&__button { @include mq(md, max) {
position: relative; bottom: 0;
padding: 0; height: 100%;
border: 0; left: 0;
outline: 0; position: fixed;
background: transparent; top: 0;
cursor: pointer;
.portal-totalizers-ref {
.title,
.amount-products,
.amount-items strong,
.amount-kits,
.total-cart {
display: none;
}
}
.cart-info {
margin: 0;
}
.amount-items-em {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 4px;
right: -4px;
width: 15px;
height: 15px;
border-radius: 50%;
line-height: 11px;
font-size: 9px;
font-weight: bold;
font-style: normal;
color: $white-500;
background: $blue-500;
}
}
&__drawer {
height: 475px;
max-height: 200px;
opacity: 0;
position: absolute;
right: 0px;
top: 80px;
transition: all 0.3s ease-in-out;
visibility: hidden;
width: 375px;
z-index: 16;
@include mq(md, max) {
bottom: 0;
height: 100%;
left: 0;
position: fixed;
top: 0;
}
} }
} }
@ -71,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;
@ -96,39 +51,54 @@
} }
.mini-cart-header { .mini-cart-header {
display: flex; border-bottom: 1px solid $color-gray;
align-items: center; color: $color-black2;
justify-content: space-between; font-size: 12px;
letter-spacing: 0.5px; letter-spacing: 0.5px;
padding: 20px 15px 16px; padding: 20px 15px 16px;
position: relative; position: relative;
text-align: left; text-align: left;
text-transform: uppercase; text-transform: uppercase;
&__text { span {
display: flex; margin-left: 4px;
align-items: center;
span {
color: $gray-300;
font-weight: 400;
font-size: 12px;
line-height: 15px;
margin-left: 10px;
height: 15px;
}
} }
&__close-button { .btn-close {
display: flex; border: none;
justify-content: flex-end; background-color: transparent;
width: 16%; font-size: 0;
height: 36px; padding: 12px;
border-left: 1px solid $gray-100; position: absolute;
right: 30px;
top: 14px;
button { &::before,
border: none; &::after {
background-color: transparent; background-color: lighten($color-black2, 10);
content: "";
height: 2px;
left: 0.5px;
position: absolute;
top: 11px;
transition: all 0.15s ease-in-out;
width: 24px;
}
&:before {
transform: rotate(45deg);
}
&:after {
transform: rotate(-45deg);
}
&:hover,
&:active {
&:before,
&:after {
background-color: $color-black2;
}
} }
} }
} }
@ -150,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);
} }
} }
@ -184,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;
@ -202,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;
@ -236,10 +206,6 @@
a { a {
display: block; display: block;
img {
border: 1px solid $gray-100;
}
} }
} }
@ -249,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;
@ -257,20 +223,15 @@
width: 100%; width: 100%;
.name { .name {
font-weight: 500; font-size: 14px;
font-size: 10px; line-height: 17px;
line-height: 12px;
text-transform: uppercase;
color: $black-500;
} }
.product-price { .product-price {
font-weight: 900; color: $color-black;
font-size: 13px; font-size: 18px;
line-height: 16px; font-weight: 700;
text-transform: uppercase; margin-bottom: 8px;
color: $black-500;
margin-bottom: 16px;
} }
.value, .value,
@ -289,9 +250,9 @@
} }
button { button {
background-color: $black-500; background-color: $color-pink;
color: $white-500; color: $color-white;
font-weight: 700; font-weight: 500;
font-size: 16px; font-size: 16px;
line-height: 0; line-height: 0;
width: 32px; width: 32px;
@ -300,19 +261,19 @@
padding: 0; padding: 0;
&:hover { &:hover {
background-color: lighten($black-500, 5); background-color: lighten($color-pink, 5);
} }
&:active { &:active {
background-color: darken($black-500, 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 -4px; margin: 0 -3px;
width: 32px; width: 32px;
-moz-appearance: textfield; -moz-appearance: textfield;
@ -341,17 +302,17 @@
&:hover, &:hover,
&:active { &:active {
border-color: darken($gray-200, 15); border-color: darken($color-black2, 15);
&:after, &:after,
&:before { &:before {
border-color: darken($gray-200, 15); border-color: darken($color-black2, 15);
} }
} }
&:after, &:after,
&:before { &:before {
border-bottom: 1.25px solid $gray-200; border-bottom: 1.25px solid $color-black2;
content: ""; content: "";
width: 16px; width: 16px;
position: absolute; position: absolute;
@ -376,47 +337,35 @@
.totals-container { .totals-container {
display: none; display: none;
justify-content: center; background-color: $color-white;
background-color: #fff; border-top: 1px solid $color-gray;
margin: 0 16px; margin: 0 16px;
padding: 16px 0; padding: 16px 0;
.qtd-items {
display: flex;
justify-content: space-between;
width: 81.633%;
strong {
display: inline-block;
letter-spacing: 0;
float: right;
font-weight: 900;
font-size: 13px;
line-height: 16px;
text-align: center;
text-transform: uppercase;
color: $black-500;
}
}
} }
.total { .total {
display: none; color: $color-gray2;
color: hsla(220, 1%, 43%, 1);
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 {
color: $color-black2;
display: inline-block;
font-weight: 700;
letter-spacing: 0;
float: right;
}
} }
.continue-buying { .continue-buying {
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: 10px; font-size: 14px;
line-height: 12px;
padding: 17px 15px; padding: 17px 15px;
position: relative; position: relative;
transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out;
@ -426,13 +375,13 @@
&:hover, &:hover,
&:active { &:active {
color: darken(#6d6e70, 15); color: darken($color-gray5, 15);
} }
} }
.finish-order { .finish-order {
background-color: $black-500; 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;
@ -443,18 +392,12 @@
width: 100%; width: 100%;
&:hover { &:hover {
background-color: lighten($black-500, 2.5); background-color: lighten($color-green, 2.5);
} }
&:active { &:active {
background-color: darken($black-500, 10); background-color: darken($color-green, 10);
} }
} }
} }
&.have-item {
.totals-container {
display: flex;
}
}
} }

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;

View File

@ -18,7 +18,6 @@
@import "./partials/header"; @import "./partials/header";
@import "./partials/menu"; @import "./partials/menu";
@import "./partials/search";
@import "./partials/barraDeVantagens"; @import "./partials/barraDeVantagens";
@import "./partials/footer"; @import "./partials/footer";
@import "./partials/breadcrumb"; @import "./partials/breadcrumb";

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%;
@ -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");
@ -562,7 +562,7 @@
} }
} }
&.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;
@ -580,20 +580,20 @@
} }
} }
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);
} }
} }
} }
@ -613,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;
@ -628,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);
} }
} }
} }

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);
} }
} }
} }

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;
} }

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;
} }
} }
} }

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;

View File

@ -99,7 +99,7 @@
&:hover, &:hover,
&:active { &:active {
@include mq(md, min) { @include mq(md, min) {
border: 1px solid #f71963; border: 1px solid $color-pink;
} }
} }
@ -158,7 +158,7 @@
} }
button { button {
background-color: #142032; background-color: $color-black2;
border: none; border: none;
cursor: pointer; cursor: pointer;
height: 10px; height: 10px;
@ -171,7 +171,7 @@
.slick-active { .slick-active {
button { button {
background-color: #f71963; background-color: $color-pink;
height: 16px; height: 16px;
width: 16px; width: 16px;
} }
@ -196,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;
@ -204,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;
@ -223,7 +223,7 @@
} }
.valor-por { .valor-por {
color: #142032; color: $color-black2;
font-size: 32px; font-size: 32px;
font-weight: 700; font-weight: 700;
@ -233,7 +233,7 @@
} }
.valor-dividido { .valor-dividido {
color: #6d6e70; color: $color-gray5;
font-size: 14px; font-size: 14px;
.numero-de-parcelas { .numero-de-parcelas {
@ -262,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 {
@ -282,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;
} }
@ -291,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;
@ -305,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;
@ -317,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;
@ -331,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;
} }
} }
} }
@ -346,11 +346,11 @@
position: absolute; position: absolute;
&.msgSucesso { &.msgSucesso {
color: #2fab61; color: $color-green;
} }
&.msgErro { &.msgErro {
color: #f71963; color: $color-pink;
} }
} }
} }
@ -369,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;
@ -382,7 +382,7 @@
} }
&:hover { &:hover {
border: 2px solid hsl(0, 0%, 77%); border: 2px solid $color-gray3;
} }
img { img {
@ -408,7 +408,7 @@
.moduloSkus { .moduloSkus {
.titulo { .titulo {
color: #6d6e70; color: $color-gray5;
font-size: 16px; font-size: 16px;
} }
@ -450,7 +450,7 @@
@include mq(lg) { @include mq(lg) {
&:hover label, &:hover label,
&:active label { &:active label {
background-color: hsl(0, 0%, 77%); background-color: $color-gray3;
} }
} }
} }
@ -460,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;
@ -499,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;
@ -525,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;
@ -537,18 +537,18 @@
@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;
@ -574,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;
@ -607,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;
@ -632,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;
@ -687,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;
@ -729,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) {
@ -753,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;
@ -791,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;
@ -805,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;
} }
} }
} }
@ -820,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;
@ -863,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;

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;

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;
} }

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;

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 {
@ -61,7 +61,7 @@
.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;
} }
@ -122,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 {
@ -147,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;
} }
@ -191,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) {
@ -206,7 +206,7 @@
} }
a { a {
color: hsla(220, 1%, 43%, 1); color: $color-gray2;
display: inline-block; display: inline-block;
} }
@ -226,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;
@ -243,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;
@ -326,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;

View File

@ -1,93 +1,411 @@
.page-header { /***************************************************************/
padding: 28px 0; /**-- Header ------------------------------********************/
background: $black-500; /*-------------------------------------------------------------*/
#ajaxBusy {
position: absolute;
top: 0;
left: 0;
background: #fff;
z-index: 15;
padding: 0px 16px;
line-height: 0.1;
opacity: 0.75;
@include mq(lg, max) { &::after {
padding: 18px 0 0; @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%;
} }
}
header {
background: rgba(255, 255, 255, 0.95);
top: 0;
transition: all 0.2s ease-in-out;
@include mq(lg, min) { &.fixed {
position: sticky; box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25);
top: 0; position: fixed;
} top: -30px;
left: 0;
right: 0;
z-index: 10;
&.is-fixed { @include mq(md, max) {
background: rgba($black-500, 0.9); position: absolute;
} }
&__wrapper { .pink-bar {
display: grid; opacity: 0;
grid-template-columns: 2fr 1fr 2fr; visibility: hidden;
align-items: center;
@include mq(lg, max) {
grid-template-columns: repeat(3, 1fr);
} }
} }
&__logo { &.fixed-hide:not(.menu-mobile-open):not(.mini-cart-open):not(:hover) {
display: block; top: -130px;
margin: 0 auto; opacity: 0;
visibility: hidden;
@include mq(lg, max) { pointer-events: none;
max-width: 66px;
}
} }
.user-items { .pink-bar {
display: flex; background-color: $color-pink;
align-items: center; opacity: 1;
justify-content: flex-end; overflow: hidden;
transition: all 0.2s ease-in-out;
&__search-box { ul {
flex: 1; margin: 6px 0;
max-width: 212px;
@include mq(lg, max) {
display: none;
}
.busca {
padding: 8px 0;
border-bottom: 1px solid $white-500;
}
} }
&__account-link { li {
display: flex; display: inline-block;
align-items: center;
&::before, &:not(:last-child) {
&::after { margin-right: 8px;
content: ""; padding-right: 8px;
width: 1px; position: relative;
height: 19px;
margin: 0 24px;
background: $white-500;
@include mq(lg, max) { &::after {
margin: 0 16px; border-right: 1px solid $color-white;
} content: "";
} height: 9px;
position: absolute;
&::before { right: 0;
@include mq(lg, max) { top: 23%;
display: none;
} }
} }
} }
a {
color: $color-white;
font-size: 12px;
text-transform: uppercase;
i {
vertical-align: sub;
}
}
} }
&__search-box { .row {
margin-top: 18px; align-items: center;
border-top: 1px solid $gray-500; }
.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;
} }
} }
} }

View File

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

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;
@ -188,7 +188,7 @@
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;
@ -200,7 +200,7 @@
} }
.parcelado { .parcelado {
color: hsla(220, 1%, 43%, 1); color: $color-gray2;
font-size: 12px; font-size: 12px;
strong { strong {
@ -225,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;
@ -236,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;
} }
} }
} }
@ -256,7 +256,7 @@
} }
.indisponivel { .indisponivel {
color: #f71963; color: $color-pink;
font-weight: bold; font-weight: bold;
margin: 5px 0; margin: 5px 0;
} }

View File

@ -1,36 +0,0 @@
.busca {
display: flex;
align-items: center;
margin: 0;
legend,
label,
select {
display: none;
}
.fulltext-search-box {
flex: 1;
height: 23px;
background: transparent;
outline: 0;
color: $white-500;
font-size: 10px;
line-height: 12px;
padding: 0;
border: 0;
}
.btn-buscar {
width: 23px;
height: 23px;
padding: 0;
border: 0;
outline: 0;
font-size: 0;
background-color: transparent;
@extend .sprite;
@extend .sprite-search-icon;
}
}

View File

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

View File

@ -1,18 +1,39 @@
// fonts // fonts
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
$font-family: "Inter", sans-serif; $font-family: "Roboto", sans-serif;
$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-heavy: 700;
$font-height: 1.5; $font-height: 1.5;
// colors // colors
$color-black: #000;
$color-black2: #142032;
$color-black3: #19273d;
$color-black4: #151728;
$black-500: #000000; $color-gray: hsla(0, 0%, 90%, 1);
$white-500: #ffffff; $color-gray2: hsla(220, 1%, 43%, 1);
$blue-500: #00c8ff; $color-gray3: hsl(0, 0%, 77%);
$color-gray4: #eee;
$color-gray5: #6d6e70;
$color-gray6: #e5e5e5;
$gray-100: #e0e0e0; $color-white: #fff;
$gray-200: #828282; $color-white2: #f5f5f5;
$gray-300: #6d6e70;
$gray-500: #333333; $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
// Grid breakpoints // Grid breakpoints
@ -25,9 +46,13 @@ $grid-breakpoints: (
) !default; ) !default;
$z-index: ( $z-index: (
Level-1: 5, menu: 15,
Level-2: 10, popup-add-cart: 10,
Level-3: 15, dropdown: 10,
Level-4: 20, flag-prateleira: 5,
Level-5: 25, comprar-flutuante: 5,
avise-me: 5,
scroll-top: 7,
header-fixo: 10,
popup-user: 15,
) !default; ) !default;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 812 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 366 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 538 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 230 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 740 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 271 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 273 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 607 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 833 B

View File

@ -1,215 +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">
<i class="sprite sprite-close-menu-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>
<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>
<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>
</ul>
<a class="main-menu__account-link" href="/account">
<i class="sprite sprite-user-icon"></i>
ENTRAR/MEUS PEDIDOS
</a>
</nav>

View File

@ -1,31 +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 - Rafael Sampaio</title>
<vtex:template id="rafaelsampaio-loads-header" />
</head>
<body>
<vtex:template id="rafaelsampaio-header" />
<main class="home" style="height: 600px"></main>
<footer>
<vtex:template id="rafaelsampaio-footer-newsletter" />
<vtex:template id="rafaelsampaio-footer-links" />
<vtex:template id="rafaelsampaio-footer" />
</footer>
<vtex:template id="rafaelsampaio-loads-footer" />
</body>
</html>

View File

@ -1,46 +0,0 @@
<header class="page-header">
<div class="container">
<div class="page-header__wrapper">
<div class="menu">
<button class="menu__button">
<i class="sprite sprite-menu-icon"></i>
</button>
<vtex.cmc:menuPrincipal />
</div>
<a href="/">
<img
class="page-header__logo"
src="/arquivos/m3-rafaelsampaio-logo.png"
alt="Logo M3 Rafael Sampaio"
/>
</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>
<div class="minicart">
<button class="minicart__button">
<i class="sprite sprite-bag-icon"></i>
<vtex.cmc:AmountItemsInCart />
</button>
<div class="minicart__drawer"></div>
</div>
</div>
</div>
</div>
<div class="page-header__search-box">
<div class="container">
<vtex.cmc:fullTextSearchBox />
</div>
</div>
</header>

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/rafaelsampaio--main-bundle.js" async="async"></script>

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/rafaelsampaio--main.css" />

View File

@ -0,0 +1,47 @@
<section class=" footer">
<div class="selos">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<ul class="pagamento">
<li><i class="sprite sprite-master"></i></li>
<li><i class="sprite sprite-visa"></i></li>
<li><i class="sprite sprite-diners"></i></li>
<li><i class="sprite sprite-elo"></i></li>
<li><i class="sprite sprite-hiper"></i></li>
<li><i class="sprite sprite-pagseguro"></i></li>
<li><i class="sprite sprite-boleto"></i></li>
</ul>
<ul class="certificados">
<li><i class="sprite sprite-vtex-pci"></i></li>
<li><i class="sprite sprite-google-safe-browser"></i></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid razao">
<div class="row">
<div class="col-12 col-md-6 cnpj">
<p>
Copyright &#9400; 2019 - Loja Sweeter Comércio Eletrônico | <span>CNPJ: 000.000.000/0001-00</span>
</p>
<p>
Rua 7 de Setembro, 3795 Centro - São Paulo/SP
</p>
</div>
<div class="col-12 col-md-6 desenvolvimento">
<a href="#" target="_blank">
<i class="sprite sprite-varejo-tech"></i>
</a>
<a href="#" target="_blank">
<i class="sprite sprite-vtex"></i>
</a>
<a href="https://digitalm3.com.br/" target="_blank">
<span>Developed by </span>
<i class="sprite sprite-m3"></i>
</a>
</div>
</div>
</div>
</section>

View File

@ -0,0 +1,16 @@
<header class="header-simples">
<div class="container-fluid">
<div class="row justify-content-between" >
<div class="col-12 col-sm-6">
<a href="/" class="logo">
<img src="/arquivos/template-logo.png" alt="VTEX"/>
</a>
</div>
<div class="col ">
<div class="compra-segura">
<span><i class="sprite sprite-cadeado"></i>Compra 100% segura</span>
</div>
</div>
</div>
</div>
</header>

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>

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>

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" />

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>