Compare commits
16 Commits
Author | SHA1 | Date | |
---|---|---|---|
7017186bc0 | |||
b7a5c6a975 | |||
2e03035571 | |||
d61a1a612d | |||
1aac68a22a | |||
36d69c682a | |||
9524fba138 | |||
a72396a436 | |||
bd6abf0b09 | |||
f2425407ea | |||
8d6065d95d | |||
ee9f332933 | |||
738eab0adc | |||
4f70839f1e | |||
2c5fe17153 | |||
a68a084de8 |
@ -24,7 +24,22 @@
|
||||
<option value="64">Bota Fora Dondocas</option>
|
||||
</select>
|
||||
<input type="hidden" id="ftIdxa28507c5599f4430a7cabd23249f99c3" value="" />
|
||||
<input id="ftBoxa28507c5599f4430a7cabd23249f99c3" class="fulltext-search-box ui-autocomplete-input" type="text" size="20"
|
||||
accesskey="b" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true" value="Digite aqui" />
|
||||
<input id="ftBtna28507c5599f4430a7cabd23249f99c3" type="button" value="Buscar" class="btn-buscar" />
|
||||
<input
|
||||
id="ftBoxa28507c5599f4430a7cabd23249f99c3"
|
||||
class="fulltext-search-box ui-autocomplete-input"
|
||||
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>
|
||||
|
@ -6,11 +6,5 @@ const menuElements = require("./pages/elementos-menu");
|
||||
|
||||
module.exports = {
|
||||
accountName: "agenciamagma",
|
||||
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" },
|
||||
],
|
||||
pages: [{ data: home, template: "bernardo-home.html" }],
|
||||
};
|
||||
|
@ -1,31 +1,20 @@
|
||||
module.exports = {
|
||||
contentPlaceHolders: [
|
||||
{
|
||||
// Registra o contentPlaceholder
|
||||
id: "htmlSeo",
|
||||
objects: [
|
||||
// Registra os objetos vtex
|
||||
{
|
||||
type: "html",
|
||||
name: "Html SEO",
|
||||
contents: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "slide-principal",
|
||||
id: "banners-principais-desktop",
|
||||
objects: [
|
||||
// cada objeto dento do array será um banner
|
||||
{
|
||||
type: "banner",
|
||||
name: "banner principal",
|
||||
name: "Banner Principal Desktop 01",
|
||||
contents: [
|
||||
{
|
||||
name: "banner principal content",
|
||||
name: "Banner Principal Desktop 01",
|
||||
active: true,
|
||||
type: "image",
|
||||
file: "slide-principal.png",
|
||||
width: 1920,
|
||||
height: 500,
|
||||
file: "banner-principal.png",
|
||||
width: 1440,
|
||||
height: 532,
|
||||
// "category": "*",
|
||||
// "brand": "*"
|
||||
// "period": ""
|
||||
@ -34,48 +23,125 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
type: "banner",
|
||||
name: "banner principal-2",
|
||||
name: "Banner Principal Desktop 02",
|
||||
contents: [
|
||||
{
|
||||
name: "banner principal content",
|
||||
name: "Banner Principal Desktop 02",
|
||||
active: true,
|
||||
type: "image",
|
||||
file: "slide-principal.png",
|
||||
width: 1920,
|
||||
height: 500,
|
||||
width: 1440,
|
||||
height: 532,
|
||||
// "category": "*",
|
||||
// "brand": "*"
|
||||
// "period": ""
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "banner",
|
||||
name: "Banner Principal Desktop 03",
|
||||
contents: [
|
||||
{
|
||||
name: "Banner Principal Desktop 03",
|
||||
active: true,
|
||||
type: "image",
|
||||
file: "banner-principal.png",
|
||||
width: 1440,
|
||||
height: 532,
|
||||
// "category": "*",
|
||||
// "brand": "*"
|
||||
// "period": ""
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "banner",
|
||||
name: "Banner Principal Desktop 04",
|
||||
contents: [
|
||||
{
|
||||
name: "Banner Principal Desktop 04",
|
||||
active: true,
|
||||
type: "image",
|
||||
file: "slide-principal.png",
|
||||
width: 1440,
|
||||
height: 532,
|
||||
// "category": "*",
|
||||
// "brand": "*"
|
||||
// "period": ""
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "slide-principal-mobile",
|
||||
id: "banners-principais-mobile",
|
||||
objects: [
|
||||
{
|
||||
type: "banner",
|
||||
name: "banner principal mobile",
|
||||
name: "Banner Principal Mobile 01",
|
||||
contents: [
|
||||
{
|
||||
name: "banner principal mobile content",
|
||||
name: "Banner Principal Mobile 01",
|
||||
active: true,
|
||||
type: "image",
|
||||
file: "slide-principal-mobile.png",
|
||||
width: 500,
|
||||
height: 500,
|
||||
file: "banner-principal-mobile.png",
|
||||
width: 375,
|
||||
height: 342,
|
||||
// "category": "*",
|
||||
// "brand": "*"
|
||||
// "period": ""
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "banner",
|
||||
name: "banner principal mobile 2",
|
||||
name: "Banner Principal Mobile 02",
|
||||
contents: [
|
||||
{
|
||||
name: "banner principal mobile 2 content",
|
||||
name: "Banner Principal Mobile 02",
|
||||
active: true,
|
||||
type: "image",
|
||||
file: "slide-principal-mobile.png",
|
||||
width: 500,
|
||||
height: 500,
|
||||
width: 375,
|
||||
height: 342,
|
||||
// "category": "*",
|
||||
// "brand": "*"
|
||||
// "period": ""
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "banner",
|
||||
name: "Banner Principal Mobile 03",
|
||||
contents: [
|
||||
{
|
||||
name: "Banner Principal Mobile 03",
|
||||
active: true,
|
||||
type: "image",
|
||||
file: "banner-principal-mobile.png",
|
||||
width: 375,
|
||||
height: 342,
|
||||
// "category": "*",
|
||||
// "brand": "*"
|
||||
// "period": ""
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "banner",
|
||||
name: "Banner Principal Mobile 04",
|
||||
contents: [
|
||||
{
|
||||
name: "Banner Principal Mobile 04",
|
||||
active: true,
|
||||
type: "image",
|
||||
file: "slide-principal-mobile.png",
|
||||
width: 375,
|
||||
height: 342,
|
||||
// "category": "*",
|
||||
// "brand": "*"
|
||||
// "period": ""
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -198,5 +264,20 @@ module.exports = {
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "prateleira-01",
|
||||
objects: [
|
||||
{
|
||||
type: "Produtos Relacionados",
|
||||
name: "CONFIRA NOSSAS NOVIDADES", //titulo do "carousel"/prateleira
|
||||
properties: {
|
||||
layout: "bernardo-prateleira-padrao", // mesmo nome do arquivo em template-prateleira
|
||||
type: "QuemViuViuTambem",
|
||||
"number-of-columns": 12,
|
||||
"number-of-items": 12,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
19107
package-lock.json
generated
@ -1,7 +1,7 @@
|
||||
{
|
||||
"author": "Agência M3",
|
||||
"name": "tema-template",
|
||||
"shopName": "template",
|
||||
"shopName": "bernardo",
|
||||
"description": "Tema Vtex para loja Vtex",
|
||||
"version": "1.0.0",
|
||||
"main": "index.js",
|
||||
@ -12,8 +12,7 @@
|
||||
"dev": "cross-env NODE_ENV=development gulp watch",
|
||||
"dev:fast": "cross-env NODE_ENV=devfast gulp watch",
|
||||
"prod": "cross-env NODE_ENV=production gulp build",
|
||||
"format": "prettier --write \"src/arquivos/**/*.{js,jsx,scss}\"",
|
||||
"preinstall": "npx npm-force-resolutions"
|
||||
"format": "prettier --write \"src/arquivos/**/*.{js,jsx,scss}\""
|
||||
},
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
|
BIN
src/arquivos/img/banner-principal-mobile.png
Normal file
After Width: | Height: | Size: 143 KiB |
BIN
src/arquivos/img/banner-principal.png
Normal file
After Width: | Height: | Size: 603 KiB |
BIN
src/arquivos/img/m3-bernardo-logo.png
Normal file
After Width: | Height: | Size: 1.5 KiB |
@ -20,6 +20,7 @@ import Promocao from "./partials/Promocao";
|
||||
import MenuContents from "./partials/MenuContents";
|
||||
import Login from "./partials/Login";
|
||||
import Prateleira from "./components/Prateleira/Prateleira";
|
||||
import Shelf from "./partials/Shelf";
|
||||
|
||||
import PrateleiraService from "./components/Prateleira/PrateleiraService";
|
||||
|
||||
@ -38,6 +39,7 @@ const app = new Container({
|
||||
ScrollToTop,
|
||||
AutoComplete,
|
||||
Prateleira,
|
||||
Shelf,
|
||||
],
|
||||
services: [PrateleiraService],
|
||||
pages: [
|
||||
@ -64,10 +66,10 @@ const app = new Container({
|
||||
],
|
||||
});
|
||||
|
||||
app.bind(Minicart.name, ".carrinho .mini-cart");
|
||||
app.bind(Minicart.name, ".minicart__drawer");
|
||||
app.bind(Newsletter.name, {
|
||||
elemento: ".news-form",
|
||||
textButtom: "Cadastre-se",
|
||||
elemento: ".footer-newsletter__form",
|
||||
textButtom: "CADASTRE-SE",
|
||||
});
|
||||
|
||||
export default app;
|
||||
|
@ -1,45 +1,28 @@
|
||||
import { isSmallerThen768 } from "Helpers/MediasMatch";
|
||||
import { isSmallerThen991 } from "Helpers/MediasMatch";
|
||||
|
||||
export default class FixedHeader {
|
||||
constructor() {
|
||||
if (!isSmallerThen768) {
|
||||
this.fixedHeader();
|
||||
if (!isSmallerThen991) {
|
||||
this.selectors();
|
||||
this.events();
|
||||
}
|
||||
}
|
||||
|
||||
fixedHeader() {
|
||||
var lastScroll = 0;
|
||||
var timer, scrollTop, headerHeight;
|
||||
var element = $("header.header");
|
||||
selectors() {
|
||||
this.pageHeader = $(".page-header");
|
||||
}
|
||||
|
||||
$(document).scroll(function (e) {
|
||||
headerHeight = element.height();
|
||||
scrollTop = $(document).scrollTop();
|
||||
events() {
|
||||
$(document).scroll(this.fixHeader.bind(this));
|
||||
}
|
||||
|
||||
if (scrollTop > 1) {
|
||||
$("body").css("padding-top", headerHeight);
|
||||
element.addClass("fixed");
|
||||
fixHeader() {
|
||||
const topScrool = $(document).scrollTop();
|
||||
|
||||
if (timer) {
|
||||
window.clearTimeout(timer);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
if (topScrool > 200) {
|
||||
this.pageHeader.addClass("isFixed");
|
||||
} else {
|
||||
this.pageHeader.removeClass("isFixed");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -6,7 +6,7 @@ export default class Minicart {
|
||||
const structure = `
|
||||
<div class="mini-cart-container">
|
||||
<div class="mini-cart-header">
|
||||
<i class="sprite sprite-cadeado"></i>
|
||||
<i class="sprite sprite-lock-cart-icon"></i>
|
||||
<span>
|
||||
COMPRA 100% SEGURA
|
||||
</span>
|
||||
@ -20,12 +20,10 @@ export default class Minicart {
|
||||
</div>
|
||||
<div class="mini-cart-footer">
|
||||
<div class="totals-container">
|
||||
<div class="qtd-items">
|
||||
Total de <span class="value">0</span> itens
|
||||
</div>
|
||||
<div class="total">
|
||||
Subtotal: <strong>R$<span class="value">00,00</span></strong>
|
||||
<div> Total:</div> <strong>R$<span class="value">00,00</span></strong>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<button class="continue-buying" aria-label="Continuar comprando">
|
||||
Continuar comprando
|
||||
@ -290,8 +288,6 @@ export default class Minicart {
|
||||
}
|
||||
|
||||
this.createMiniCartStructure(element);
|
||||
this.configureEvents(
|
||||
"header .carrinho> a, .mobile-bottom-options .portal-totalizers-ref, .popup-add-cart .cart"
|
||||
);
|
||||
this.configureEvents(".minicart__button");
|
||||
}
|
||||
}
|
||||
|
@ -96,8 +96,8 @@ export default class Prateleira {
|
||||
//ex atualziar
|
||||
atualizar() {
|
||||
this.flagDeDesconto();
|
||||
this.precoParcelado();
|
||||
this.precoBoleto();
|
||||
// this.precoParcelado();
|
||||
// this.precoBoleto();
|
||||
}
|
||||
|
||||
criarHtmlPrecoBoleto(valor) {
|
||||
@ -123,7 +123,7 @@ export default class Prateleira {
|
||||
createFlagDesconto($elemento, percentualDeDesconto) {
|
||||
var $flag = $("<p />")
|
||||
.addClass("flag produto-off")
|
||||
.text(percentualDeDesconto + "%");
|
||||
.text(percentualDeDesconto + "%OFF");
|
||||
$elemento.find(".flags-product .DiscountHightLight").append($flag);
|
||||
}
|
||||
|
||||
|
@ -1,38 +1,17 @@
|
||||
import {
|
||||
bannerHome,
|
||||
barraDeVantagens,
|
||||
naveguePorCategorias,
|
||||
} from "App/functions/slide";
|
||||
|
||||
import InstagramGallery from "../components/InstagramGallery";
|
||||
|
||||
import slickConfig from "Config/slick";
|
||||
export default class Home {
|
||||
constructor() {
|
||||
bannerHome(".main-gallery");
|
||||
barraDeVantagens(".tipbar ul");
|
||||
naveguePorCategorias(".categorias-home .categorias");
|
||||
|
||||
new InstagramGallery({
|
||||
gallery: ".instagramGallery__photos",
|
||||
account: "agenciam3",
|
||||
limit: 6,
|
||||
});
|
||||
this.selectors();
|
||||
this.createSliders();
|
||||
}
|
||||
|
||||
naveguePorCategorias() {
|
||||
// preencher titulos
|
||||
var $container = $(".home-categories .categorias");
|
||||
$container.find(".box-banner").each(function (i, el) {
|
||||
const $banner = $(el);
|
||||
let name;
|
||||
selectors() {
|
||||
this.desktopMainBaners = $(".main-banners__desktop");
|
||||
this.mobileMainBaners = $(".main-banners__mobile");
|
||||
}
|
||||
|
||||
name = $banner.find("img").prop("alt");
|
||||
let $titulo = $("<span />", {
|
||||
text: name,
|
||||
class: "nome-categoria",
|
||||
});
|
||||
$banner.find("img").after($titulo);
|
||||
});
|
||||
slide.naveguePorCategorias($container);
|
||||
createSliders() {
|
||||
this.desktopMainBaners.slick(slickConfig.home.desktopMainBanners);
|
||||
this.mobileMainBaners.slick(slickConfig.home.mobileMainBanners);
|
||||
}
|
||||
}
|
||||
|
@ -1,38 +1,49 @@
|
||||
import { isSmallerThen991 } from "Helpers/MediasMatch";
|
||||
export default class Menu {
|
||||
constructor() {
|
||||
this.toggleMenuMobile();
|
||||
this.toggleSubCategories();
|
||||
this.selectors();
|
||||
this.events();
|
||||
}
|
||||
|
||||
toggleMenuMobile() {
|
||||
$("#open-menu-button, .show-menu .option").on("click", function () {
|
||||
$(".menu-principal").addClass("mobile-open");
|
||||
$("header.header").addClass("menu-mobile-open");
|
||||
});
|
||||
|
||||
$("#close-menu-button").on("click", function () {
|
||||
$(".menu-principal").removeClass("mobile-open");
|
||||
$("header.header").removeClass("menu-mobile-open");
|
||||
});
|
||||
selectors() {
|
||||
this.openMenuButton = $(".menu__button");
|
||||
this.mainMenu = $(".main-menu");
|
||||
this.closeMenuButton = $(".menu-header__close-button");
|
||||
this.departmentsLink = $(".main-menu__department__link");
|
||||
this.returnSubmenu = $(".submenu__return-button");
|
||||
}
|
||||
|
||||
toggleSubCategories() {
|
||||
$(".m3-dropdown > button").on("click", function (event) {
|
||||
event.preventDefault();
|
||||
events() {
|
||||
this.openMenuButton.click(this.openMenu.bind(this));
|
||||
this.closeMenuButton.click(this.closeMenu.bind(this));
|
||||
this.returnSubmenu.click(this.closeSubmenu);
|
||||
|
||||
if ($(this).parent().hasClass("sub-menu-open")) {
|
||||
$(this).parent().removeClass("sub-menu-open");
|
||||
} else {
|
||||
$(this).parent().siblings().removeClass("sub-menu-open");
|
||||
$(this).parent().addClass("sub-menu-open");
|
||||
}
|
||||
if (isSmallerThen991) {
|
||||
this.departmentsLink.click(this.openSubmenu);
|
||||
}
|
||||
}
|
||||
|
||||
$(this).parents("ul.itens").toggleClass("has-sub-menu-open");
|
||||
});
|
||||
openMenu() {
|
||||
this.mainMenu.addClass("isOpen");
|
||||
}
|
||||
|
||||
$(".m3-dropdown .btn-voltar").on("click", function () {
|
||||
$(this).parents(".m3-dropdown").removeClass("sub-menu-open");
|
||||
$(this).parents("ul.itens").removeClass("has-sub-menu-open");
|
||||
});
|
||||
closeMenu() {
|
||||
this.mainMenu.removeClass("isOpen");
|
||||
}
|
||||
|
||||
openSubmenu(event) {
|
||||
event.preventDefault();
|
||||
const link = $(event.target);
|
||||
|
||||
link.parents(".main-menu__department")
|
||||
.find(".submenu")
|
||||
.addClass("isOpen"); // find pega os filhos
|
||||
// link.siblings(".submenu").addClass("isOpen"); //siblings pega os irmãos, geraria um erro ao clicar na seta
|
||||
}
|
||||
|
||||
closeSubmenu(events) {
|
||||
const button = $(events.target);
|
||||
|
||||
button.parents(".submenu").removeClass("isOpen"); //parents pega os pais do elemento
|
||||
}
|
||||
}
|
||||
|
16
src/arquivos/js/app/partials/Shelf.js
Normal file
@ -0,0 +1,16 @@
|
||||
import slickConfig from "Config/slick";
|
||||
|
||||
export default class Shelf {
|
||||
constructor() {
|
||||
this.selectors();
|
||||
this.createSlider();
|
||||
}
|
||||
|
||||
selectors() {
|
||||
this.shelf = $(".shelf ul");
|
||||
}
|
||||
|
||||
createSlider() {
|
||||
this.shelf.slick(slickConfig.productShelf.defaultShelf);
|
||||
}
|
||||
}
|
@ -1,18 +1,18 @@
|
||||
export default {
|
||||
home: {
|
||||
bannerDesktop: {
|
||||
desktopMainBanners: {
|
||||
dots: true,
|
||||
arrows: false,
|
||||
pauseOnHover: false,
|
||||
arrows: true,
|
||||
pauseOnHover: true,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 6000,
|
||||
autoplaySpeed: 5000,
|
||||
},
|
||||
bannerMobile: {
|
||||
mobileMainBanners: {
|
||||
dots: true,
|
||||
arrows: false,
|
||||
arrows: true,
|
||||
pauseOnHover: false,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 6000,
|
||||
autoplaySpeed: 5000,
|
||||
},
|
||||
},
|
||||
general: {
|
||||
@ -59,7 +59,7 @@ export default {
|
||||
productShelf: {
|
||||
defaultShelf: {
|
||||
lazyLoad: "ondemand",
|
||||
dots: true,
|
||||
dots: false,
|
||||
arrows: true,
|
||||
infinite: true,
|
||||
slidesToShow: 4,
|
||||
@ -69,17 +69,13 @@ export default {
|
||||
{
|
||||
breakpoint: 1200,
|
||||
settings: {
|
||||
lazyLoad: "ondemand",
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3,
|
||||
infinite: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 800,
|
||||
settings: {
|
||||
arrows: true,
|
||||
lazyLoad: "ondemand",
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 2,
|
||||
},
|
||||
@ -87,9 +83,9 @@ export default {
|
||||
{
|
||||
breakpoint: 576,
|
||||
settings: {
|
||||
arrows: false,
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 2,
|
||||
arrows: true,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
|
@ -14,8 +14,8 @@
|
||||
}
|
||||
|
||||
.cart-items thead tr {
|
||||
border-bottom: 1px solid $color-gray6;
|
||||
color: $color-black2;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
color: #142032;
|
||||
font-size: 11px;
|
||||
|
||||
th {
|
||||
@ -53,7 +53,7 @@
|
||||
}
|
||||
|
||||
&.product-name {
|
||||
color: $color-black2;
|
||||
color: #142032;
|
||||
font-size: 12px;
|
||||
|
||||
@media (max-width: 490px) {
|
||||
@ -96,7 +96,7 @@
|
||||
}
|
||||
|
||||
.icon-question-sign {
|
||||
color: $color-black2;
|
||||
color: #142032;
|
||||
}
|
||||
}
|
||||
|
||||
@ -108,7 +108,7 @@
|
||||
|
||||
input {
|
||||
&[id^="item-quantity"] {
|
||||
border: 1px solid $color-black2;
|
||||
border: 1px solid #142032;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
color: #000;
|
||||
@ -127,7 +127,7 @@
|
||||
}
|
||||
|
||||
.item-quantity-change {
|
||||
background-color: $color-pink;
|
||||
background-color: #f71963;
|
||||
display: inline-block;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
@ -147,7 +147,7 @@
|
||||
i {
|
||||
&::before,
|
||||
&::after {
|
||||
border-top: 1px solid $color-white;
|
||||
border-top: 1px solid $white;
|
||||
content: "";
|
||||
left: 12px;
|
||||
position: absolute;
|
||||
@ -177,33 +177,33 @@
|
||||
|
||||
#shipping-preview-container {
|
||||
.srp-main-title {
|
||||
color: $color-black2;
|
||||
color: #142032;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.srp-description {
|
||||
color: $color-black2;
|
||||
color: #142032;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#shipping-calculate-link,
|
||||
#cart-shipping-calculate {
|
||||
background-color: $color-gray;
|
||||
background-color: hsla(0, 0%, 90%, 1);
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
color: $color-black2;
|
||||
color: #142032;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
padding: 8px 10px;
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color-gray, 5);
|
||||
background-color: lighten(hsla(0, 0%, 90%, 1), 5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($color-gray, 5);
|
||||
background-color: darken(hsla(0, 0%, 90%, 1), 5);
|
||||
}
|
||||
}
|
||||
|
||||
@ -212,7 +212,7 @@
|
||||
}
|
||||
|
||||
.ship-postalCode a {
|
||||
color: $color-pink;
|
||||
color: #f71963;
|
||||
}
|
||||
}
|
||||
|
||||
@ -234,8 +234,8 @@
|
||||
}
|
||||
|
||||
> div {
|
||||
background-color: $color-white2;
|
||||
color: $color-black2;
|
||||
background-color: #f5f5f5;
|
||||
color: #142032;
|
||||
display: block !important;
|
||||
padding: 24px 15%;
|
||||
|
||||
@ -252,7 +252,7 @@
|
||||
text-align: left;
|
||||
|
||||
label {
|
||||
color: $color-gray5;
|
||||
color: #6d6e70;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
@ -271,7 +271,7 @@
|
||||
|
||||
#cart-coupon-add {
|
||||
background-image: none;
|
||||
background-color: $color-black2;
|
||||
background-color: #142032;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
font-size: 0;
|
||||
@ -281,11 +281,11 @@
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color-black2, 5);
|
||||
background-color: lighten(#142032, 5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($color-black2, 5);
|
||||
background-color: darken(#142032, 5);
|
||||
}
|
||||
|
||||
&::before {
|
||||
@ -299,7 +299,7 @@
|
||||
}
|
||||
|
||||
.accordion-group {
|
||||
border: 1px solid $color-white2;
|
||||
border: 1px solid #f5f5f5;
|
||||
border-radius: 0;
|
||||
color: #000;
|
||||
|
||||
@ -312,7 +312,7 @@
|
||||
}
|
||||
|
||||
tfoot {
|
||||
background-color: $color-white2;
|
||||
background-color: #f5f5f5;
|
||||
|
||||
.info {
|
||||
text-transform: uppercase;
|
||||
@ -359,7 +359,7 @@
|
||||
|
||||
#cart-choose-more-products {
|
||||
bottom: -26px;
|
||||
color: $color-black4;
|
||||
color: #151728;
|
||||
font-size: 12px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
@ -368,7 +368,7 @@
|
||||
}
|
||||
|
||||
#cart-to-orderform {
|
||||
background-color: $color-green;
|
||||
background-color: #2fab61;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
margin-top: 0;
|
||||
|
@ -1,6 +1,6 @@
|
||||
.container-order-form {
|
||||
#orderform-to-cart {
|
||||
color: $color-pink;
|
||||
color: #f71963;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
}
|
||||
|
||||
#btn-client-pre-email {
|
||||
background-color: $color-pink;
|
||||
background-color: #f71963;
|
||||
background-image: none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
@ -24,11 +24,11 @@
|
||||
top: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color-pink, 5);
|
||||
background-color: lighten(#f71963, 5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($color-pink, 5);
|
||||
background-color: darken(#f71963, 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -17,7 +17,7 @@
|
||||
|
||||
.accordion-group {
|
||||
.accordion-toggle .link-box-edit {
|
||||
color: $color-pink;
|
||||
color: #f71963;
|
||||
}
|
||||
|
||||
.text input,
|
||||
@ -55,15 +55,15 @@
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-summaryChange {
|
||||
border-color: $color-pink;
|
||||
color: $color-pink;
|
||||
border-color: #f71963;
|
||||
color: #f71963;
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-group button.submit,
|
||||
.payment-confirmation-wrap button.submit {
|
||||
background-image: none;
|
||||
background-color: $color-green;
|
||||
background-color: #2fab61;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
font-size: 14px;
|
||||
@ -73,17 +73,17 @@
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color-green, 5);
|
||||
background-color: lighten(#2fab61, 5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($color-green, 5);
|
||||
background-color: darken(#2fab61, 5);
|
||||
}
|
||||
}
|
||||
|
||||
.cart-fixed {
|
||||
#orderform-minicart-to-cart {
|
||||
color: $color-black4;
|
||||
color: #151728;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
text-decoration: underline;
|
||||
@ -95,7 +95,7 @@
|
||||
}
|
||||
|
||||
tfoot td {
|
||||
color: $color-black3;
|
||||
color: #19273d;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
@ -2,7 +2,7 @@
|
||||
text-align: center;
|
||||
|
||||
.empty-cart-title {
|
||||
color: $color-black2;
|
||||
color: #142032;
|
||||
font-size: 24px;
|
||||
line-height: 29px;
|
||||
}
|
||||
@ -14,7 +14,7 @@
|
||||
}
|
||||
|
||||
#cart-choose-products {
|
||||
background-color: $color-black2;
|
||||
background-color: #142032;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
background-image: none;
|
||||
@ -26,11 +26,11 @@
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color-black2, 5);
|
||||
background-color: lighten(#142032, 5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($color-black2, 5);
|
||||
background-color: darken(#142032, 5);
|
||||
}
|
||||
|
||||
&::before {
|
||||
|
@ -60,7 +60,7 @@
|
||||
|
||||
a {
|
||||
display: block;
|
||||
color: $color-pink;
|
||||
color: #f71963;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
|
||||
|
@ -1,21 +1,69 @@
|
||||
.mini-cart {
|
||||
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;
|
||||
.minicart{
|
||||
position: relative;
|
||||
|
||||
@include mq(md, max) {
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
&__button{
|
||||
position: relative;
|
||||
background: transparent;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
outline: 0;
|
||||
border: 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;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
border-radius: 50%;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
line-height: 11px;
|
||||
font-size: 9px;
|
||||
color: $white;
|
||||
background: $blue;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&__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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -26,7 +74,7 @@
|
||||
}
|
||||
|
||||
.mini-cart-container {
|
||||
background-color: $color-white;
|
||||
background-color: $white;
|
||||
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -51,14 +99,26 @@
|
||||
}
|
||||
|
||||
.mini-cart-header {
|
||||
border-bottom: 1px solid $color-gray;
|
||||
color: $color-black2;
|
||||
// border-bottom: 1px solid hsla(0, 0%, 90%, 1);
|
||||
color: $gray-300;
|
||||
line-height: 15px;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.5px;
|
||||
padding: 20px 15px 16px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: 1px;
|
||||
height: 38px;
|
||||
position: absolute;
|
||||
right: 72px;
|
||||
background: $gray-100;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: 4px;
|
||||
@ -75,7 +135,7 @@
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
background-color: lighten($color-black2, 10);
|
||||
background-color: lighten(#142032, 10);
|
||||
content: "";
|
||||
height: 2px;
|
||||
left: 0.5px;
|
||||
@ -97,7 +157,7 @@
|
||||
&:active {
|
||||
&:before,
|
||||
&:after {
|
||||
background-color: $color-black2;
|
||||
background-color: #142032;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -120,17 +180,17 @@
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: $color-gray;
|
||||
background-color: hsla(0, 0%, 90%, 1);
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: $color-gray3;
|
||||
background-color: hsl(0, 0%, 77%);
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background-color: darken($color-gray3, 10);
|
||||
background-color: darken(hsl(0, 0%, 77%), 10);
|
||||
}
|
||||
}
|
||||
|
||||
@ -154,8 +214,8 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-size: 0;
|
||||
border: 5px solid $color-white;
|
||||
border-top-color: $color-pink;
|
||||
border: 5px solid $white;
|
||||
border-top-color: #f71963;
|
||||
border-radius: 50%;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
@ -172,7 +232,7 @@
|
||||
|
||||
li {
|
||||
align-items: flex-start;
|
||||
border-bottom: 1px solid $color-gray;
|
||||
border-bottom: 1px solid hsla(0, 0%, 90%, 1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 12px 0;
|
||||
@ -204,6 +264,8 @@
|
||||
max-width: 85px;
|
||||
width: 100%;
|
||||
|
||||
border: 1px solid $gray-100;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
@ -215,7 +277,7 @@
|
||||
}
|
||||
|
||||
.product-info {
|
||||
color: $color-black2;
|
||||
color: #142032;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
padding-left: 8px;
|
||||
@ -223,15 +285,18 @@
|
||||
width: 100%;
|
||||
|
||||
.name {
|
||||
font-size: 14px;
|
||||
line-height: 17px;
|
||||
font-weight: 500;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
color: $color-black;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
color: $black;
|
||||
font-weight: 900;
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.value,
|
||||
@ -250,8 +315,8 @@
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: $color-pink;
|
||||
color: $color-white;
|
||||
background-color: $black;
|
||||
color: $white;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 0;
|
||||
@ -261,16 +326,16 @@
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color-pink, 5);
|
||||
background-color: lighten($black, 5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($color-pink, 10);
|
||||
background-color: darken($black, 10);
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
border: 1px solid $color-black2;
|
||||
border: 1px solid #142032;
|
||||
box-shadow: none;
|
||||
font-size: 14px;
|
||||
margin: 0 -3px;
|
||||
@ -302,17 +367,17 @@
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
border-color: darken($color-black2, 15);
|
||||
border-color: darken($gray-400, 15);
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
border-color: darken($color-black2, 15);
|
||||
border-color: darken($gray-400, 15);
|
||||
}
|
||||
}
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
border-bottom: 1.25px solid $color-black2;
|
||||
border-bottom: 1.25px solid $gray-400;
|
||||
content: "";
|
||||
width: 16px;
|
||||
position: absolute;
|
||||
@ -337,21 +402,24 @@
|
||||
|
||||
.totals-container {
|
||||
display: none;
|
||||
background-color: $color-white;
|
||||
border-top: 1px solid $color-gray;
|
||||
margin: 0 16px;
|
||||
padding: 16px 0;
|
||||
background-color: transparent;
|
||||
color: $black;
|
||||
padding: 16px 48px;
|
||||
|
||||
}
|
||||
|
||||
.total {
|
||||
color: $color-gray2;
|
||||
font-size: 12px;
|
||||
line-height: 15px;
|
||||
letter-spacing: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
font-weight: 900;
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
|
||||
strong {
|
||||
color: $color-black2;
|
||||
color: #142032;
|
||||
display: inline-block;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
@ -363,9 +431,10 @@
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: $color-gray5;
|
||||
color: $gray-300;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
line-height: 12px;
|
||||
font-size: 10px;
|
||||
padding: 17px 15px;
|
||||
position: relative;
|
||||
transition: all 0.15s ease-in-out;
|
||||
@ -375,29 +444,36 @@
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: darken($color-gray5, 15);
|
||||
color: darken($gray-300, 15);
|
||||
}
|
||||
}
|
||||
|
||||
.finish-order {
|
||||
background-color: $color-green;
|
||||
color: $color-white;
|
||||
background-color: $black;
|
||||
color: $white;
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
padding: 15px;
|
||||
font-weight: 900;
|
||||
line-height: 15px;
|
||||
font-size: 12px;
|
||||
padding: 18px;
|
||||
text-align: center;
|
||||
transition: all 0.15s linear;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color-green, 2.5);
|
||||
background-color: lighten($black, 2.5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($color-green, 10);
|
||||
background-color: darken($black, 10);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.have-item {
|
||||
.totals-container {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,196 +1,123 @@
|
||||
/***************************************************************/
|
||||
/**-- Newslettter --------------------------********************/
|
||||
/*-------------------------------------------------------------*/
|
||||
.footer-newsletter {
|
||||
padding: 24px 15px;
|
||||
background: linear-gradient(180deg, $blue 0%, $blue-100 100%);
|
||||
|
||||
.captacao-emails-newsletter {
|
||||
background-color: $color-pink;
|
||||
background-image: url("/arquivos/template-background-newsletter.png");
|
||||
margin-top: 104px;
|
||||
padding: 12px 15px 24px;
|
||||
|
||||
@include mq(md, max) {
|
||||
background-image: url("/arquivos/template-mobile-background-newsletter.png");
|
||||
background-size: cover;
|
||||
padding: 52px 15px 42px;
|
||||
}
|
||||
|
||||
.row {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
> .row > div {
|
||||
max-width: 960px;
|
||||
margin: auto;
|
||||
padding: 0 3.5%;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: $color-white;
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
line-height: 26px;
|
||||
margin: 0 0 8px;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
font-size: 26px;
|
||||
&__wrapper {
|
||||
@include mq(md, min) {
|
||||
max-width: 698px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 15px;
|
||||
margin: 0;
|
||||
&__title {
|
||||
font-size: 14px;
|
||||
line-height: 17px;
|
||||
color: $white;
|
||||
margin: 0 0 10px;
|
||||
|
||||
@include mq(lg, max) {
|
||||
margin-bottom: 8px;
|
||||
max-width: 224px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.m3-custom-newsletter-form {
|
||||
position: relative;
|
||||
.m3-custom-newsletter-form {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
label {
|
||||
display: none;
|
||||
@include mq(lg, max) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@include mq(lg, min) {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
fieldset {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
margin-right: 16px;
|
||||
max-width: 270px;
|
||||
width: 36%;
|
||||
|
||||
@include mq(md, max) {
|
||||
@include mq(lg, min) {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
@include mq(lg, max) {
|
||||
margin-bottom: 8px;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
|
||||
&:last-of-type {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.m3-cn-button-ok-container {
|
||||
max-width: 126px;
|
||||
margin: 0;
|
||||
|
||||
@include mq(lg, min) {
|
||||
max-width: 126px;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
height: 41px;
|
||||
padding: 0 16px;
|
||||
background: $white;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
|
||||
@include mq(md, max) {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
padding: 9px 16px;
|
||||
width: 100%;
|
||||
|
||||
@include mq(md, max) {
|
||||
font-size: 24px;
|
||||
padding: 18.5px 24px;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $color-black2;
|
||||
}
|
||||
|
||||
&#m3-cn-button-ok {
|
||||
background-color: $color-black2;
|
||||
color: $color-white;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
text-transform: lowercase;
|
||||
transition: all 0.15s linear;
|
||||
|
||||
@include mq(md, max) {
|
||||
font-size: 24px;
|
||||
margin-top: 8px;
|
||||
&::placeholder {
|
||||
text-transform: uppercase;
|
||||
color: $gray-400;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color-black2, 5);
|
||||
}
|
||||
&.m3-cn-button-ok {
|
||||
background: $black;
|
||||
color: $white;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
|
||||
&:active {
|
||||
background-color: darken($color-black2, 5);
|
||||
@include mq(lg, max) {
|
||||
&:active {
|
||||
background: lighten($black, 10);
|
||||
}
|
||||
}
|
||||
|
||||
@include mq(lg, min) {
|
||||
&:hover{
|
||||
background: lighten($black, 10);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $black;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.m3-cn-msg {
|
||||
position: absolute;
|
||||
top: calc( 100% + 8px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: max-content;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
|
||||
.m3-cn-error {
|
||||
background-color: $color-white;
|
||||
border-radius: 2px;
|
||||
bottom: -28px;
|
||||
color: $color-pink3;
|
||||
display: table;
|
||||
left: 40%;
|
||||
margin: auto;
|
||||
padding: 3px 6px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.m3-cn-success {
|
||||
color: $color-white;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
margin-right: 20px;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.btn-voltar {
|
||||
background-color: $color-white;
|
||||
border-radius: 2px;
|
||||
color: $color-pink;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
padding: 4px 8px;
|
||||
text-transform: lowercase;
|
||||
color: $red-300;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* pop-up-newsletter */
|
||||
|
||||
.pop-up-newsletter {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
top: 20%;
|
||||
|
||||
.newsletter {
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
|
||||
.close-popup {
|
||||
font-size: 35px;
|
||||
color: #000;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
input {
|
||||
border-bottom: solid 1px #333;
|
||||
}
|
||||
}
|
||||
|
||||
.m3-custom-newsletter-form .btn-voltar {
|
||||
color: #333;
|
||||
border-color: #333;
|
||||
}
|
||||
}
|
||||
|
@ -5,6 +5,21 @@
|
||||
|
||||
@import "./utils/all";
|
||||
|
||||
@import "./partials/slider";
|
||||
@import "./partials/menu";
|
||||
@import "./partials/header";
|
||||
@import "./partials/search";
|
||||
@import "./partials/barraDeVantagens";
|
||||
@import "./partials/footer";
|
||||
@import "./partials/breadcrumb";
|
||||
@import "./partials/prateleira";
|
||||
@import "./partials/ajustes";
|
||||
@import "./partials/flags";
|
||||
|
||||
@import "./components/mini-cart";
|
||||
@import "./components/newsletter";
|
||||
@import "./components/instagram-gallery";
|
||||
|
||||
@import "./pages/home";
|
||||
@import "./pages/categoria";
|
||||
@import "./pages/produto";
|
||||
@ -12,15 +27,3 @@
|
||||
@import "./pages/erro";
|
||||
@import "./pages/login";
|
||||
|
||||
@import "./components/mini-cart";
|
||||
@import "./components/newsletter";
|
||||
@import "./components/instagram-gallery";
|
||||
|
||||
@import "./partials/header";
|
||||
@import "./partials/menu";
|
||||
@import "./partials/barraDeVantagens";
|
||||
@import "./partials/footer";
|
||||
@import "./partials/breadcrumb";
|
||||
@import "./partials/prateleira";
|
||||
@import "./partials/ajustes";
|
||||
@import "./partials/flags";
|
||||
|
@ -3,7 +3,7 @@
|
||||
/*-------------------------------------------------------------*/
|
||||
|
||||
.categoria {
|
||||
color: $color-black2;
|
||||
color: #142032;
|
||||
|
||||
.bread-crumb {
|
||||
margin-bottom: 54px;
|
||||
@ -15,7 +15,7 @@
|
||||
|
||||
.filtros-categoria {
|
||||
@include mq(md, max) {
|
||||
background-color: $color-white;
|
||||
background-color: $white;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin-left: -100%;
|
||||
@ -38,7 +38,7 @@
|
||||
}
|
||||
|
||||
.topo-filtros {
|
||||
border-bottom: 1px solid $color-gray;
|
||||
border-bottom: 1px solid hsla(0, 0%, 90%, 1);
|
||||
|
||||
@include mq(md, max) {
|
||||
display: flex;
|
||||
@ -72,7 +72,7 @@
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-left: 1px solid $color-gray4;
|
||||
border-left: 1px solid #eee;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 36px;
|
||||
@ -88,7 +88,7 @@
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
border: 1px solid $color-black2;
|
||||
border: 1px solid #142032;
|
||||
content: "";
|
||||
display: block;
|
||||
left: 0;
|
||||
@ -109,7 +109,7 @@
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-black2;
|
||||
color: #142032;
|
||||
}
|
||||
|
||||
.navigation-tabs {
|
||||
@ -151,11 +151,11 @@
|
||||
|
||||
label {
|
||||
a {
|
||||
color: $color-black4;
|
||||
color: #151728;
|
||||
transition: ease-in 0.22s all;
|
||||
|
||||
&:hover {
|
||||
text-shadow: 0px 0px 0.55px $color-black4;
|
||||
text-shadow: 0px 0px 0.55px #151728;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -169,22 +169,22 @@
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: $color-gray;
|
||||
background-color: hsla(0, 0%, 90%, 1);
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: $color-gray3;
|
||||
background-color: hsl(0, 0%, 77%);
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background-color: darken($color-gray3, 10);
|
||||
background-color: darken(hsl(0, 0%, 77%), 10);
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: $color-black2;
|
||||
color: #142032;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
@ -208,10 +208,10 @@
|
||||
}
|
||||
|
||||
& ~ .sr_box {
|
||||
border: 1px solid $color-black2;
|
||||
border: 1px solid #142032;
|
||||
border-radius: 50%;
|
||||
content: " ";
|
||||
color: $color-gray3;
|
||||
color: hsl(0, 0%, 77%);
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
@ -247,13 +247,13 @@
|
||||
|
||||
&:hover ~ .sr_box {
|
||||
&::before {
|
||||
background-color: lighten($color-pink, 15);
|
||||
background-color: lighten(#f71963, 15);
|
||||
}
|
||||
}
|
||||
|
||||
&:checked ~ .sr_box {
|
||||
&::before {
|
||||
background-color: $color-pink;
|
||||
background-color: #f71963;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -272,7 +272,7 @@
|
||||
}
|
||||
|
||||
.aply-filter-btn {
|
||||
background-color: $color-gray4;
|
||||
background-color: #eee;
|
||||
border: none;
|
||||
bottom: 0;
|
||||
font-size: 14px;
|
||||
@ -289,7 +289,7 @@
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($color-gray4, 5);
|
||||
background-color: darken(#eee, 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -334,7 +334,7 @@
|
||||
.opcoes-resultado {
|
||||
@include mq(md, max) {
|
||||
align-items: center;
|
||||
border: 1px solid $color-gray;
|
||||
border: 1px solid hsla(0, 0%, 90%, 1);
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
}
|
||||
@ -343,8 +343,8 @@
|
||||
#open-filter-button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-right: 1px solid $color-gray;
|
||||
color: $color-black;
|
||||
border-right: 1px solid hsla(0, 0%, 90%, 1);
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
font-size: 16px;
|
||||
@ -407,7 +407,7 @@
|
||||
select {
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
color: $color-gray2;
|
||||
color: hsla(220, 1%, 43%, 1);
|
||||
font-size: 14px;
|
||||
margin-left: 8px;
|
||||
outline: none;
|
||||
@ -442,10 +442,10 @@
|
||||
}
|
||||
|
||||
.clear-filter-btn {
|
||||
background-color: $color-black2;
|
||||
background-color: #142032;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: $color-white;
|
||||
color: $white;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
@ -458,11 +458,11 @@
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color-black, 2.5);
|
||||
background-color: lighten(#000, 2.5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($color-black, 2.5);
|
||||
background-color: darken(#000, 2.5);
|
||||
}
|
||||
}
|
||||
|
||||
@ -538,8 +538,8 @@
|
||||
|
||||
&.current {
|
||||
a {
|
||||
background-color: $color-black;
|
||||
color: $color-white;
|
||||
background-color: #000;
|
||||
color: $white;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
@ -552,7 +552,7 @@
|
||||
font-size: 0;
|
||||
text-indent: -99999px;
|
||||
overflow: hidden;
|
||||
color: $color-gray2;
|
||||
color: hsla(220, 1%, 43%, 1);
|
||||
|
||||
&:before {
|
||||
@include pseudo(block, relative, "\00BB");
|
||||
@ -562,7 +562,7 @@
|
||||
}
|
||||
}
|
||||
&.desativo a {
|
||||
color: $color-gray3;
|
||||
color: hsl(0, 0%, 77%);
|
||||
pointer-events: none;
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
@ -580,20 +580,20 @@
|
||||
}
|
||||
}
|
||||
a {
|
||||
background-color: $color-white;
|
||||
color: $color-black;
|
||||
background-color: $white;
|
||||
color: #000;
|
||||
padding: 4px 12px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
border: 1px solid $color-gray6;
|
||||
border: 1px solid #e5e5e5;
|
||||
|
||||
@include mq(md, min) {
|
||||
&:hover {
|
||||
background-color: $color-gray6;
|
||||
color: darken($color-black, 15);
|
||||
background-color: #e5e5e5;
|
||||
color: darken(#000, 15);
|
||||
|
||||
&:active {
|
||||
color: darken($color-black, 10);
|
||||
color: darken(#000, 10);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -613,9 +613,9 @@
|
||||
text-align: center;
|
||||
|
||||
button {
|
||||
background-color: $color-black2;
|
||||
background-color: #142032;
|
||||
border: none;
|
||||
color: $color-white;
|
||||
color: $white;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
@ -628,11 +628,11 @@
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color-black, 2.5);
|
||||
background-color: lighten(#000, 2.5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($color-black, 2.5);
|
||||
background-color: darken(#000, 2.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,5 +1,5 @@
|
||||
.pagina-erro {
|
||||
color: $color-black2;
|
||||
color: #142032;
|
||||
text-align: center;
|
||||
display: block;
|
||||
min-height: 40%;
|
||||
@ -43,7 +43,7 @@
|
||||
|
||||
a.voltar-para-home {
|
||||
color: #fff;
|
||||
background: $color-black2;
|
||||
background: #142032;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
margin: 1em auto 3em;
|
||||
@ -52,11 +52,11 @@
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color-black2, 5);
|
||||
background-color: lighten(#142032, 5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($color-black2, 5);
|
||||
background-color: darken(#142032, 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,178 +1,128 @@
|
||||
/***************************************************************/
|
||||
/**-- Home ---------------------------------********************/
|
||||
/*-------------------------------------------------------------*/
|
||||
|
||||
.home {
|
||||
.main-gallery {
|
||||
> div {
|
||||
&:not(.slick-initialized) {
|
||||
.box-banner {
|
||||
&:not(:first-child) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.desktop {
|
||||
@include mq(md, max) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.mobile {
|
||||
@include mq(md, min) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main-banners {
|
||||
margin-bottom: 38px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.slick-next,
|
||||
.slick-prev {
|
||||
&__desktop {
|
||||
@include mq(md, max) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__mobile {
|
||||
@include mq(md, min) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-arrow {
|
||||
|
||||
@extend .sprite;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 0;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
transform: scale(0.7);
|
||||
z-index: 1;
|
||||
|
||||
@include mq(md, max) {
|
||||
transform: translatey(-50%) scale(0.7);
|
||||
}
|
||||
}
|
||||
|
||||
.slick-prev {
|
||||
left: 24px;
|
||||
|
||||
@extend .sprite-arrow-white-prev-icon;
|
||||
|
||||
@include mq(md, max) {
|
||||
left: 16px;
|
||||
transform-origin: left;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
@extend .sprite;
|
||||
@extend .sprite-circled-arrow-right;
|
||||
left: auto;
|
||||
right: 8px;
|
||||
}
|
||||
right: 24px;
|
||||
|
||||
.slick-prev {
|
||||
@extend .sprite;
|
||||
@extend .sprite-circled-arrow-left;
|
||||
right: auto;
|
||||
left: 8px;
|
||||
@extend .sprite-arrow-white-next-icon;
|
||||
|
||||
@include mq(md, max) {
|
||||
right: 16px;
|
||||
transform-origin: right;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-dots {
|
||||
bottom: 20px;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
bottom: 14px;
|
||||
z-index: map-get($z-index, level-1);
|
||||
width: 100%;
|
||||
|
||||
&,
|
||||
li {
|
||||
align-items: center;
|
||||
display: flex !important;
|
||||
justify-content: center;
|
||||
@include mq(md, max) {
|
||||
bottom: 9px;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: $color-black2;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
height: 10px;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
pointer-events: all;
|
||||
transition: all 0.15s ease-in-out;
|
||||
width: 10px;
|
||||
}
|
||||
&.slick-active {
|
||||
button {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: transparent;
|
||||
border: 1px solid $white;
|
||||
|
||||
.slick-active {
|
||||
button {
|
||||
background-color: $color-pink;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.banner {
|
||||
&.desktop {
|
||||
@include mq(md, max) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.mobile {
|
||||
@include mq(md, min) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.mosaico-home,
|
||||
.mosaico-home-footer {
|
||||
@include mq(md, max) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@include mq_range(md, xl) {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.row {
|
||||
@include mq(md, max) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mosaico-home {
|
||||
> .row {
|
||||
@include mq(md, min) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.banner {
|
||||
padding: 0 0 40px;
|
||||
|
||||
@include mq(md, min) {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.banners-left {
|
||||
@include mq(md, min) {
|
||||
padding-left: 0px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.banners-right {
|
||||
padding: 0;
|
||||
|
||||
.banner {
|
||||
padding-right: 0;
|
||||
|
||||
&:nth-child(2) {
|
||||
@include mq(md, min) {
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.advantages{
|
||||
margin-bottom: 117px;
|
||||
|
||||
&__list {
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: auto;
|
||||
|
||||
@include mq(sm, min) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 75px;
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
|
||||
@include mq(md, max) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
line-height: 12px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.shelf {
|
||||
margin-bottom: 172px;
|
||||
}
|
||||
}
|
||||
|
@ -3,7 +3,7 @@
|
||||
/*-------------------------------------------------------------*/
|
||||
|
||||
.institucional {
|
||||
color: $color-black2;
|
||||
color: #142032;
|
||||
|
||||
.breadcrumb {
|
||||
font-size: 14px;
|
||||
@ -15,8 +15,8 @@
|
||||
display: inline-block;
|
||||
|
||||
a {
|
||||
border-right: 1px solid $color-black2;
|
||||
color: $color-black2;
|
||||
border-right: 1px solid #142032;
|
||||
color: #142032;
|
||||
margin-right: 7px;
|
||||
padding: 0px 9px 0px 0;
|
||||
}
|
||||
@ -48,27 +48,27 @@
|
||||
padding: 4px 2px;
|
||||
|
||||
a {
|
||||
border: 1px solid $color-black2;
|
||||
border: 1px solid #142032;
|
||||
border-radius: 31px;
|
||||
color: $color-pink;
|
||||
color: #f71963;
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
padding: 8px 16px;
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&.ativo {
|
||||
background-color: $color-black2;
|
||||
color: $color-white;
|
||||
background-color: #142032;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color-black2, 5);
|
||||
color: $color-white;
|
||||
background-color: lighten(#142032, 5);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($color-black2, 10);
|
||||
color: $color-white;
|
||||
background-color: darken(#142032, 10);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -22,9 +22,9 @@
|
||||
|
||||
.btn {
|
||||
background-image: none;
|
||||
background-color: $color-white2;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 0;
|
||||
border: 1px solid $color-gray6;
|
||||
border: 1px solid #e5e5e5;
|
||||
box-shadow: none;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
@ -33,25 +33,25 @@
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color-white2, 5);
|
||||
background-color: lighten(#f5f5f5, 5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($color-white2, 5);
|
||||
background-color: darken(#f5f5f5, 5);
|
||||
}
|
||||
|
||||
&.btn-success {
|
||||
background-color: $color-pink;
|
||||
background-color: #f71963;
|
||||
font-size: 14px;
|
||||
height: auto;
|
||||
padding: 14px 24px;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color-pink, 5);
|
||||
background-color: lighten(#f71963, 5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($color-pink, 5);
|
||||
background-color: darken(#f71963, 5);
|
||||
}
|
||||
|
||||
i {
|
||||
@ -72,7 +72,7 @@
|
||||
h4 {
|
||||
&::before {
|
||||
content: "Entrar";
|
||||
color: $color-black2;
|
||||
color: #142032;
|
||||
display: block;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
|
@ -99,7 +99,7 @@
|
||||
&:hover,
|
||||
&:active {
|
||||
@include mq(md, min) {
|
||||
border: 1px solid $color-pink;
|
||||
border: 1px solid #f71963;
|
||||
}
|
||||
}
|
||||
|
||||
@ -158,7 +158,7 @@
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: $color-black2;
|
||||
background-color: #142032;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
height: 10px;
|
||||
@ -171,7 +171,7 @@
|
||||
|
||||
.slick-active {
|
||||
button {
|
||||
background-color: $color-pink;
|
||||
background-color: #f71963;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
@ -196,7 +196,7 @@
|
||||
|
||||
.product-reference {
|
||||
font-size: 14px;
|
||||
color: $color-gray2;
|
||||
color: hsla(220, 1%, 43%, 1);
|
||||
|
||||
.productReference {
|
||||
display: inline-block;
|
||||
@ -204,11 +204,11 @@
|
||||
}
|
||||
|
||||
.moduloPreco {
|
||||
color: $color-black2;
|
||||
color: #142032;
|
||||
margin: 30px 0;
|
||||
|
||||
.valor-de {
|
||||
color: $color-gray2;
|
||||
color: hsla(220, 1%, 43%, 1);
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: line-through;
|
||||
@ -223,7 +223,7 @@
|
||||
}
|
||||
|
||||
.valor-por {
|
||||
color: $color-black2;
|
||||
color: #142032;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
|
||||
@ -233,7 +233,7 @@
|
||||
}
|
||||
|
||||
.valor-dividido {
|
||||
color: $color-gray5;
|
||||
color: #6d6e70;
|
||||
font-size: 14px;
|
||||
|
||||
.numero-de-parcelas {
|
||||
@ -262,14 +262,14 @@
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-top: 1px solid $color-gray3;
|
||||
border-top: 1px solid hsl(0, 0%, 77%);
|
||||
margin-top: 8px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
padding-top: 10px;
|
||||
border-bottom: 1px solid $color-gray3;
|
||||
border-bottom: 1px solid hsl(0, 0%, 77%);
|
||||
}
|
||||
|
||||
.value {
|
||||
@ -282,8 +282,8 @@
|
||||
}
|
||||
|
||||
.container-percentual {
|
||||
border: 1px dotted $color-green;
|
||||
color: $color-green;
|
||||
border: 1px dotted #2fab61;
|
||||
color: #2fab61;
|
||||
font-size: 10px;
|
||||
padding: 4px 9px;
|
||||
}
|
||||
@ -291,7 +291,7 @@
|
||||
}
|
||||
|
||||
.moduloAviseMe {
|
||||
border-bottom: 1px solid $color-gray;
|
||||
border-bottom: 1px solid hsla(0, 0%, 90%, 1);
|
||||
padding-bottom: 15px;
|
||||
margin: 20px 0;
|
||||
|
||||
@ -305,7 +305,7 @@
|
||||
}
|
||||
|
||||
input {
|
||||
border: 1px solid $color-gray;
|
||||
border: 1px solid hsla(0, 0%, 90%, 1);
|
||||
display: inline-block;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
@ -317,9 +317,9 @@
|
||||
}
|
||||
|
||||
&#enviar-avise-me {
|
||||
background-color: $color-black3;
|
||||
background-color: #19273d;
|
||||
border: none;
|
||||
color: $color-white;
|
||||
color: $white;
|
||||
cursor: pointer;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
@ -331,11 +331,11 @@
|
||||
max-width: 200px;
|
||||
|
||||
&:hover {
|
||||
background-color: $color-black;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $color-black2;
|
||||
background-color: #142032;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -346,11 +346,11 @@
|
||||
position: absolute;
|
||||
|
||||
&.msgSucesso {
|
||||
color: $color-green;
|
||||
color: #2fab61;
|
||||
}
|
||||
|
||||
&.msgErro {
|
||||
color: $color-pink;
|
||||
color: #f71963;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -369,7 +369,7 @@
|
||||
}
|
||||
|
||||
li {
|
||||
border: 1px solid $color-gray;
|
||||
border: 1px solid hsla(0, 0%, 90%, 1);
|
||||
display: inline-block;
|
||||
max-width: 72px;
|
||||
max-height: 96px;
|
||||
@ -382,7 +382,7 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 2px solid $color-gray3;
|
||||
border: 2px solid hsl(0, 0%, 77%);
|
||||
}
|
||||
|
||||
img {
|
||||
@ -408,7 +408,7 @@
|
||||
|
||||
.moduloSkus {
|
||||
.titulo {
|
||||
color: $color-gray5;
|
||||
color: #6d6e70;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@ -450,7 +450,7 @@
|
||||
@include mq(lg) {
|
||||
&:hover label,
|
||||
&:active label {
|
||||
background-color: $color-gray3;
|
||||
background-color: hsl(0, 0%, 77%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -460,16 +460,16 @@
|
||||
|
||||
&:checked + label {
|
||||
background-color: #fff;
|
||||
border: 1px solid $color-pink;
|
||||
border: 1px solid #f71963;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
align-items: center;
|
||||
background-color: $color-gray;
|
||||
background-color: hsla(0, 0%, 90%, 1);
|
||||
border-radius: 4px;
|
||||
border: 1px solid transparent;
|
||||
color: $color-black3;
|
||||
color: #19273d;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
@ -499,7 +499,7 @@
|
||||
}
|
||||
|
||||
.titulo {
|
||||
color: $color-gray5;
|
||||
color: #6d6e70;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
margin-bottom: 8px;
|
||||
@ -525,8 +525,8 @@
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: $color-pink;
|
||||
color: $color-white;
|
||||
background-color: #f71963;
|
||||
color: $white;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
line-height: 0;
|
||||
@ -537,18 +537,18 @@
|
||||
|
||||
@include mq(lg) {
|
||||
&:hover {
|
||||
background-color: $color-pink;
|
||||
background-color: #f71963;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $color-pink;
|
||||
background-color: #f71963;
|
||||
}
|
||||
}
|
||||
|
||||
.qtd-value {
|
||||
border: 1px solid $color-black2;
|
||||
color: $color-black3;
|
||||
border: 1px solid #142032;
|
||||
color: #19273d;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
width: 34px;
|
||||
@ -574,20 +574,20 @@
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-top: 1px solid $color-gray3;
|
||||
border-top: 1px solid hsl(0, 0%, 77%);
|
||||
margin-top: 10px;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
padding-top: 6px;
|
||||
border-bottom: 1px solid $color-gray3;
|
||||
border-bottom: 1px solid hsl(0, 0%, 77%);
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: $color-gray2;
|
||||
color: hsla(220, 1%, 43%, 1);
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
outline: none;
|
||||
@ -607,13 +607,13 @@
|
||||
pointer-events: none;
|
||||
|
||||
.btn-compra {
|
||||
background-color: $color-gray3;
|
||||
background-color: hsl(0, 0%, 77%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-compra {
|
||||
background-color: $color-green;
|
||||
color: $color-white;
|
||||
background-color: #2fab61;
|
||||
color: $white;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
@ -632,25 +632,25 @@
|
||||
|
||||
@include mq(lg) {
|
||||
&:hover {
|
||||
background-color: $color-green2;
|
||||
background-color: hsla(138, 66%, 41%, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $color-green3;
|
||||
background-color: hsla(138, 50%, 41%, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.erro-add-cart {
|
||||
bottom: -55px;
|
||||
color: $color-pink;
|
||||
color: #f71963;
|
||||
position: absolute;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.compra-segura {
|
||||
color: $color-black3;
|
||||
color: #19273d;
|
||||
font-size: 10px;
|
||||
max-width: 270px;
|
||||
text-align: center;
|
||||
@ -687,20 +687,20 @@
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-top: 1px solid $color-gray4;
|
||||
border-top: 1px solid #eee;
|
||||
margin-top: 25px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
padding-top: 16px;
|
||||
border-bottom: 1px solid $color-gray4;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: $color-black2;
|
||||
color: #142032;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
@ -729,14 +729,14 @@
|
||||
}
|
||||
|
||||
#descricao-completa {
|
||||
color: $color-black2;
|
||||
color: #142032;
|
||||
|
||||
@include mq(md, max) {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
> div {
|
||||
border-top: 1px solid $color-gray6;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
margin-top: 48px;
|
||||
|
||||
@include mq(md, max) {
|
||||
@ -753,7 +753,7 @@
|
||||
}
|
||||
|
||||
.descricao {
|
||||
color: $color-gray5;
|
||||
color: #6d6e70;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
max-width: 960px;
|
||||
@ -791,9 +791,9 @@
|
||||
width: 100%;
|
||||
|
||||
button {
|
||||
background-color: $color-black3;
|
||||
background-color: #19273d;
|
||||
border: none;
|
||||
color: $color-white;
|
||||
color: $white;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
@ -805,12 +805,12 @@
|
||||
|
||||
@include mq(lg) {
|
||||
&:hover {
|
||||
background-color: $color-black;
|
||||
background-color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $color-black2;
|
||||
background-color: #142032;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -820,11 +820,11 @@
|
||||
.popup-add-cart,
|
||||
.modal-add-cart {
|
||||
align-items: center;
|
||||
background-color: $color-black2;
|
||||
background-color: #142032;
|
||||
bottom: 5%;
|
||||
box-shadow: 0px 4px 16px rgba(125, 87, 98, 0.12);
|
||||
border-radius: 100px;
|
||||
color: $color-white;
|
||||
color: $white;
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
height: 90px;
|
||||
@ -863,7 +863,7 @@
|
||||
button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: $color-pink;
|
||||
color: #f71963;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
margin-left: 12px;
|
||||
|
@ -8,8 +8,8 @@ body.minhaConta {
|
||||
}
|
||||
|
||||
h1 {
|
||||
border-bottom: 1px solid $color-gray;
|
||||
color: $color-black2;
|
||||
border-bottom: 1px solid hsla(0, 0%, 90%, 1);
|
||||
color: #142032;
|
||||
font-size: 30px;
|
||||
margin-bottom: 28px;
|
||||
padding: 24px 14px 16px;
|
||||
|
@ -20,7 +20,7 @@
|
||||
a:after {
|
||||
content: "Home";
|
||||
font-size: 14px;
|
||||
border-right: 1px solid $color-black2;
|
||||
border-right: 1px solid #142032;
|
||||
margin-right: -9px;
|
||||
padding: 0px 9px 0px 0;
|
||||
}
|
||||
@ -34,8 +34,8 @@
|
||||
}
|
||||
|
||||
a {
|
||||
border-right: 1px solid $color-black2;
|
||||
color: $color-black2;
|
||||
border-right: 1px solid #142032;
|
||||
color: #142032;
|
||||
margin-right: 7px;
|
||||
padding: 0px 9px 0px 0;
|
||||
}
|
||||
|
@ -1,43 +1,37 @@
|
||||
.flags-product {
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 5;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: map-get($z-index, level-2);
|
||||
padding: 8px;
|
||||
|
||||
p {
|
||||
background-repeat: no-repeat;
|
||||
color: $color-white;
|
||||
.flag {
|
||||
display: none;
|
||||
font-size: 11px;
|
||||
float: right;
|
||||
font-weight: 700;
|
||||
margin: 0 0 8px;
|
||||
height: 20px;
|
||||
min-width: 54px;
|
||||
margin: 7px 100% 0 7px;
|
||||
overflow: hidden;
|
||||
padding: 2.5px 4px;
|
||||
text-indent: -9999px;
|
||||
max-width: max-content;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
text-transform: uppercase;
|
||||
|
||||
&.novo,
|
||||
&.produto-off {
|
||||
background: $color-black2;
|
||||
display: table;
|
||||
float: left;
|
||||
text-indent: 0;
|
||||
width: 50px;
|
||||
|
||||
&:after {
|
||||
content: "OFF";
|
||||
display: inline-block;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.novo {
|
||||
background-color: $color-pink;
|
||||
border-radius: 5px;
|
||||
display: table;
|
||||
float: left;
|
||||
text-indent: 0;
|
||||
text-transform: uppercase;
|
||||
background: $blue;
|
||||
color: $white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.produto-off{
|
||||
font-weight: 900;
|
||||
color: $white;
|
||||
background: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,360 +1,167 @@
|
||||
/***************************************************************/
|
||||
/**-- Footer ------------------------------********************/
|
||||
/*-------------------------------------------------------------*/
|
||||
.footer-links{
|
||||
|
||||
.footer {
|
||||
background-color: $color-black2;
|
||||
@include mq(md, min) {
|
||||
padding: 29px 0 25px;
|
||||
border-bottom: 1px solid $gray-100;
|
||||
}
|
||||
|
||||
.institucional-info {
|
||||
color: $color-white;
|
||||
font-size: 14px;
|
||||
margin: auto;
|
||||
max-width: 950px;
|
||||
padding: 0 15px 25px;
|
||||
&__wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, max-content);
|
||||
gap: 148px;
|
||||
justify-content: center;
|
||||
|
||||
@include mq(md, max) {
|
||||
font-size: 16px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.titulo {
|
||||
font-size: 16px;
|
||||
margin: 27px 0 17px;
|
||||
|
||||
@include mq(md, max) {
|
||||
font-size: 22px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
|
||||
@include mq(md, max) {
|
||||
max-width: 310px;
|
||||
margin: auto;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
&:hover li a {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
li a {
|
||||
transition: all 0.15s linear;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.institucional-links {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.contato-sac {
|
||||
font-size: 12px;
|
||||
@include mq(md, max) {
|
||||
border-bottom: 1px solid $color-black3;
|
||||
padding: 10px 0 20px;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:last-child() {
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
|
||||
@include mq(md, max) {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
span {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.redes-sociais {
|
||||
h3 {
|
||||
@include mq(md, max) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
@include mq(md, max) {
|
||||
margin-top: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
i {
|
||||
@include mq(md, min) {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.selos {
|
||||
border-top: 1px solid $color-black3;
|
||||
padding: 5px 0;
|
||||
text-align: center;
|
||||
&__block {
|
||||
|
||||
@include mq(md, max) {
|
||||
padding: 24px 15px;
|
||||
border-bottom: 1px solid $gray-100;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-bottom: 10px;
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
line-height: 15px;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
&__items-list{
|
||||
margin: 0;
|
||||
|
||||
&--social {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: max-content;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
padding: 4px 0;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: $black;
|
||||
transition: color 0.2s linear;
|
||||
|
||||
@include mq(md, min) {
|
||||
border-bottom: 1px solid $color-black3;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
@include mq(md, max) {
|
||||
padding: 0;
|
||||
&:hover {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
display: inline-block;
|
||||
@include mq(md, max) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.pagamento {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
@include mq(md, max) {
|
||||
border-bottom: 1px solid $color-black3;
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
|
||||
@include mq(md, min) {
|
||||
border-right: 1px solid $color-gray;
|
||||
margin-right: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
li {
|
||||
&:not(:last-child) {
|
||||
@include mq(md, min) {
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.certificados {
|
||||
li {
|
||||
&:not(:last-child) {
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.razao {
|
||||
font-size: 10px;
|
||||
max-width: 1500px;
|
||||
margin: auto;
|
||||
padding: 15px;
|
||||
|
||||
@include mq(md, max) {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $color-gray2;
|
||||
margin: 0;
|
||||
|
||||
@include mq(md, max) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
span {
|
||||
@include mq(md, max) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-gray2;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.cnpj {
|
||||
@include mq(md, max) {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.desenvolvimento {
|
||||
text-align: right;
|
||||
|
||||
@include mq(md, max) {
|
||||
text-align: center;
|
||||
padding: 20px 15px 0;
|
||||
}
|
||||
|
||||
a:nth-child(2) {
|
||||
@include mq(md, max) {
|
||||
border-left: 1px solid $color-gray;
|
||||
border-right: 1px solid $color-gray;
|
||||
margin-right: 20px;
|
||||
margin-left: 20px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-bottom-options {
|
||||
background-color: $color-white;
|
||||
border-top: 1px solid $color-gray;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin-bottom: -65px;
|
||||
opacity: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
transition: all 0.2s ease-in-out;
|
||||
visibility: hidden;
|
||||
z-index: 6;
|
||||
.footer-infos {
|
||||
|
||||
&.active {
|
||||
margin-bottom: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
&__labels {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@include mq(md, max){
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@include mq(md, min){
|
||||
align-items: center;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid $gray-100;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
&__payment,
|
||||
&__security {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: max-content;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
|
||||
@include mq(md, max){
|
||||
padding: 24px 0;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__payment {
|
||||
gap: 8px;
|
||||
|
||||
@include mq(md, max){
|
||||
border-bottom: 1px solid $gray-100;
|
||||
}
|
||||
}
|
||||
|
||||
&__security {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
&__divider {
|
||||
width: 1px;
|
||||
height: 51px;
|
||||
background: $gray-100;
|
||||
margin: 0 24px;
|
||||
|
||||
@include mq(md, max){
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__company {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
width: 33%;
|
||||
}
|
||||
@include mq(md, max){
|
||||
flex-direction: column;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.option {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
height: 66px;
|
||||
outline: none;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
margin: auto;
|
||||
|
||||
@extend .sprite;
|
||||
@include mq(md, min){
|
||||
padding: 12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.show-search {
|
||||
.option:before {
|
||||
@extend .sprite;
|
||||
@extend .sprite-lupa;
|
||||
}
|
||||
}
|
||||
&__copyright {
|
||||
margin: 0 16px 0 0;
|
||||
line-height: 12px;
|
||||
font-size: 10px;
|
||||
color: $gray-100;
|
||||
|
||||
.show-carrinho {
|
||||
li:not(.amount-items),
|
||||
strong,
|
||||
.title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.AmountItemsInCart {
|
||||
line-height: 0;
|
||||
@include mq(md, max){
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.portal-totalizers-ref {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
|
||||
.cartInfoWrapper {
|
||||
@extend .sprite;
|
||||
@extend .sprite-sacola;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.amount-items {
|
||||
background-color: $color-black2;
|
||||
border-radius: 50%;
|
||||
bottom: 2px;
|
||||
color: $color-white;
|
||||
font-size: 10px;
|
||||
line-height: 1.3;
|
||||
min-width: 19px;
|
||||
text-align: center;
|
||||
padding: 3px 4px;
|
||||
position: absolute;
|
||||
right: -8px;
|
||||
|
||||
@include mq(md, max) {
|
||||
right: -3px;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.show-menu {
|
||||
margin-top: -2px;
|
||||
&__develpment {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: max-content;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.option:before {
|
||||
@extend .sprite;
|
||||
@extend .sprite-menu-bottom;
|
||||
}
|
||||
&__developed-by {
|
||||
line-height: 12px;
|
||||
font-size: 10px;
|
||||
color: $gray-100;
|
||||
margin-right: 7px;
|
||||
}
|
||||
}
|
||||
|
@ -1,411 +1,95 @@
|
||||
/***************************************************************/
|
||||
/**-- Header ------------------------------********************/
|
||||
/*-------------------------------------------------------------*/
|
||||
#ajaxBusy {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #fff;
|
||||
z-index: 15;
|
||||
padding: 0px 16px;
|
||||
line-height: 0.1;
|
||||
opacity: 0.75;
|
||||
.page-header {
|
||||
background: $black;
|
||||
padding: 28px 0;
|
||||
|
||||
&::after {
|
||||
@include pseudo(inline-block);
|
||||
border: solid 1px;
|
||||
padding: 4px;
|
||||
line-height: 0;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 35%;
|
||||
border-color: $color-pink3 $color-gray4 $color-gray4 $color-gray4;
|
||||
animation: spin 0.5s linear infinite;
|
||||
border-radius: 50%;
|
||||
@include mq(lg, min) {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: map-get($z-index, level-5);
|
||||
}
|
||||
}
|
||||
header {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
top: 0;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
&.fixed {
|
||||
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25);
|
||||
position: fixed;
|
||||
top: -30px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
@include mq(lg, max) { //trazendo do _mixing.scss
|
||||
padding: 18px 0 0;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
position: absolute;
|
||||
}
|
||||
&.isFixed {
|
||||
background: rgba($black, 0.9);
|
||||
}
|
||||
|
||||
.pink-bar {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
|
||||
&__wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 2fr;
|
||||
align-items: center;
|
||||
|
||||
@include mq(lg, max) { //trazendo do _mixing.scss
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
&.fixed-hide:not(.menu-mobile-open):not(.mini-cart-open):not(:hover) {
|
||||
top: -130px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
&__logo {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
|
||||
@include mq(lg, max) { //trazendo do _mixing.scss
|
||||
max-width: 66px;
|
||||
}
|
||||
}
|
||||
|
||||
.pink-bar {
|
||||
background-color: $color-pink;
|
||||
opacity: 1;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease-in-out;
|
||||
.user-items {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
ul {
|
||||
margin: 6px 0;
|
||||
&__search-box {
|
||||
flex: 1;
|
||||
max-width: 212px;
|
||||
|
||||
@include mq(lg, max) { //trazendo do _mixing.scss
|
||||
display: none;
|
||||
}
|
||||
|
||||
.busca{
|
||||
border-bottom: 1px solid $white;
|
||||
padding: 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
&__account-link{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 8px;
|
||||
padding-right: 8px;
|
||||
position: relative;
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
width: 1px;
|
||||
height: 19px;
|
||||
margin: 0 24px;
|
||||
background: $white;
|
||||
|
||||
&::after {
|
||||
border-right: 1px solid $color-white;
|
||||
content: "";
|
||||
height: 9px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 23%;
|
||||
@include mq(lg, max) { //trazendo do _mixing.scss
|
||||
margin: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
@include mq(lg, max) { //trazendo do _mixing.scss
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-white;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
|
||||
i {
|
||||
vertical-align: sub;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
align-items: center;
|
||||
}
|
||||
&__search-box {
|
||||
margin-top: 18px;
|
||||
border-top: 1px solid $gray;
|
||||
|
||||
.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) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
.busca{
|
||||
padding: 13px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,514 +1,317 @@
|
||||
/***************************************************************/
|
||||
/**-- Menu ------------------------------********************/
|
||||
/*-------------------------------------------------------------*/
|
||||
.menu {
|
||||
|
||||
.menu-principal {
|
||||
position: initial;
|
||||
align-self: stretch;
|
||||
|
||||
@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;
|
||||
&__button {
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
transition: all 0.45s ease-in-out;
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
z-index: map-get($z-index, menu);
|
||||
}
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background: transparent;
|
||||
|
||||
@include mq_range(lg, xl) {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&.mobile-open {
|
||||
margin-left: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.header-menu-mobile {
|
||||
display: none;
|
||||
border-bottom: 1px solid $color-gray4;
|
||||
padding: 22px 15px 0;
|
||||
margin: 0 -15px;
|
||||
|
||||
@include mq(lg, max) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
p {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.5px;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
#close-menu-button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
right: 16px;
|
||||
outline: none;
|
||||
position: absolute;
|
||||
top: 17px;
|
||||
|
||||
&::before {
|
||||
border-left: 1px solid $color-gray4;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 36px;
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
top: -6px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
padding: 12px;
|
||||
position: relative;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
border: 1px solid $color-black2;
|
||||
content: "";
|
||||
display: block;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
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;
|
||||
@include mq(lg, min) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.itens {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
|
||||
@include mq(lg, max) {
|
||||
bottom: 64px;
|
||||
left: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
position: absolute;
|
||||
top: 117px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: $color-gray;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: $color-gray3;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background-color: darken($color-gray3, 10);
|
||||
}
|
||||
|
||||
> li {
|
||||
display: inline-block;
|
||||
line-height: 18px;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
|
||||
@include mq(lg, max) {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
border-bottom: 1px solid $color-gray4;
|
||||
|
||||
a {
|
||||
font-size: 16px;
|
||||
padding: 17px 0px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> a::after {
|
||||
@include mq(lg, min) {
|
||||
border-bottom-color: $color-pink;
|
||||
border-width: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
@include mq(lg, min) {
|
||||
border-right: 1px solid $color-black;
|
||||
margin-right: 24px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
@include mq_range(lg, xl) {
|
||||
margin-right: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
> a {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
@include mq(lg, min) {
|
||||
bottom: 0;
|
||||
border-bottom: 1px solid transparent;
|
||||
content: "";
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
transition: all 0.15s ease-in-out;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ver-departamento {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
text-indent: -9999px;
|
||||
overflow: hidden;
|
||||
font-size: 0;
|
||||
outline: none;
|
||||
opacity: 0.75;
|
||||
|
||||
&:before {
|
||||
@include pseudo(block, relative);
|
||||
@extend .sprite;
|
||||
@extend .sprite-arrow-right-gray;
|
||||
}
|
||||
|
||||
@include mq(lg, min) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-black2;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: $color-pink;
|
||||
font-weight: 700;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
left: -20.5px;
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
@extend .sprite;
|
||||
@extend .sprite-pinrinpinpin;
|
||||
|
||||
@include mq(lg, max) {
|
||||
top: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-menu-mobile {
|
||||
background-color: $color-pink;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 17.5px 15px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
.menu-header {
|
||||
|
||||
@include mq(lg, min) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-white;
|
||||
&__top-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
&__text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $gray-200;
|
||||
line-height: 15px;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: 1px;
|
||||
height: 38px;
|
||||
position: absolute;
|
||||
right: 72px;
|
||||
background: $gray-100;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 18px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&__close-button {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background: transparent;
|
||||
|
||||
}
|
||||
|
||||
&__search-box {
|
||||
background: $black;
|
||||
|
||||
.busca {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.m3-dropdown {
|
||||
&:hover {
|
||||
.m3-dropdown-menu {
|
||||
@include mq(lg, min) {
|
||||
max-height: 1000px;
|
||||
opacity: 1;
|
||||
top: 100%;
|
||||
visibility: visible;
|
||||
}
|
||||
.main-menu {
|
||||
height: 100%;
|
||||
|
||||
&::before {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
@include mq(lg, max) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: map-get($z-index, level-5);
|
||||
transform: translateX(- 100%);
|
||||
width: 100%;
|
||||
max-width: 375px;
|
||||
height: 100%;
|
||||
background: $white;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.m3-dropdown-menu {
|
||||
background-color: $color-white;
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
transition: all 0.4s ease-in-out;
|
||||
visibility: hidden;
|
||||
z-index: map-get($z-index, menu);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
&.isOpen {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
&__departments {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
|
||||
@include mq(lg, max) {
|
||||
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;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
overflow: hidden auto;
|
||||
}
|
||||
|
||||
@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;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__department {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@include mq(lg, max) {
|
||||
border-bottom: 1px solid $gray-100;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: -44px;
|
||||
padding: 22px;
|
||||
visibility: hidden;
|
||||
@include mq(lg, min) {
|
||||
|
||||
margin-right: 40px;
|
||||
|
||||
&:hover {
|
||||
.main-menu__department__link {
|
||||
color: $blue;
|
||||
font-weight: 700;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.submenu {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
top: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
font-size: 12px;
|
||||
line-height: 15px;
|
||||
color: $white;
|
||||
|
||||
|
||||
@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%;
|
||||
padding: 20px 16px;
|
||||
color: $black;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@include mq(lg, max) {
|
||||
@include mq(lg, min) {
|
||||
&::after {
|
||||
content: attr(title);
|
||||
display: block;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
font-weight: bold;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
@include mq(lg, min) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
img {
|
||||
border-bottom: 5px solid $color-black4;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&__account-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: $black;
|
||||
height: 64px;
|
||||
line-height: 12px;
|
||||
font-size: 10px;
|
||||
color: $white;
|
||||
|
||||
@include mq(lg, min) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: inline-block;
|
||||
|
||||
&:hover li {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
i {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
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 {
|
||||
.submenu {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
||||
@include mq(lg, max) {
|
||||
position: initial;
|
||||
transition: position 0.2s ease-in-out;
|
||||
background: $white;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
padding-bottom: 34px;
|
||||
transition: left 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.m3-dropdown-menu {
|
||||
@include mq(lg, max) {
|
||||
top: 117px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include mq(lg, min) {
|
||||
position: absolute;
|
||||
top: calc(100% + 32px);
|
||||
left: 0;
|
||||
padding: 30px 0 43px;
|
||||
z-index: map-get($z-index, level-4);
|
||||
background: rgba($white, 0.95);
|
||||
box-shadow: 0px 4px 4px rgba($black, 0.02);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
.sub-menu-open {
|
||||
.m3-dropdown-menu {
|
||||
}
|
||||
|
||||
&.isOpen {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 100%;
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.container {
|
||||
@include mq(lg, max) {
|
||||
margin-left: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
> a:before {
|
||||
opacity: 1;
|
||||
transform: rotate(90deg) scale(0.5);
|
||||
&__return-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-bottom: 34px;
|
||||
padding: 0;
|
||||
border: solid $gray-100;
|
||||
border-width: 0 0 1px 0;
|
||||
outline: 0;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
padding: 16px;
|
||||
|
||||
i {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
@include mq(lg, min) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&__title {
|
||||
line-height: 24px;
|
||||
font-size: 20px;
|
||||
margin: 0 0 8px;
|
||||
|
||||
@include mq(lg, max) {
|
||||
text-decoration: underline;
|
||||
line-height: 14px;
|
||||
font-size: 12px;
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
&__categories-wrapper {
|
||||
margin-bottom: 16px;
|
||||
|
||||
@include mq(lg, min) {
|
||||
display: flex;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&__categories {
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
&__category {
|
||||
padding: 8px 0;
|
||||
|
||||
&__link {
|
||||
line-height: 15px;
|
||||
font-size: 12px;
|
||||
color: $black;
|
||||
transition: color .2s linear;
|
||||
|
||||
@include mq(lg, min) {
|
||||
&:hover {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&__see-all {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 15px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: $black;
|
||||
|
||||
i {
|
||||
margin-left: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,263 +1,197 @@
|
||||
/***************************************************************/
|
||||
/**-- Prateleiras --------------------------********************/
|
||||
/*-------------------------------------------------------------*/
|
||||
|
||||
.prateleira-de-produtos {
|
||||
position: relative;
|
||||
|
||||
.slick-next,
|
||||
.slick-prev {
|
||||
@extend .sprite;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 0;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
z-index: 1;
|
||||
|
||||
@include mq(md, max) {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
@extend .sprite;
|
||||
@extend .sprite-circled-arrow-right;
|
||||
left: auto;
|
||||
right: -60px;
|
||||
|
||||
@include mq(md, max) {
|
||||
right: -35px;
|
||||
}
|
||||
|
||||
@include mq_range(md, xl) {
|
||||
right: -45px;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-prev {
|
||||
@extend .sprite;
|
||||
@extend .sprite-circled-arrow-left;
|
||||
right: auto;
|
||||
left: -60px;
|
||||
|
||||
@include mq(md, max) {
|
||||
left: -35px;
|
||||
}
|
||||
|
||||
@include mq_range(md, xl) {
|
||||
left: -45px;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-dots {
|
||||
bottom: 20px;
|
||||
height: 17px;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-top: 16px;
|
||||
position: initial;
|
||||
}
|
||||
|
||||
&,
|
||||
li {
|
||||
align-items: center;
|
||||
display: flex !important;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: $color-black2;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
height: 10px;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
pointer-events: all;
|
||||
transition: all 0.15s ease-in-out;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.slick-active {
|
||||
button {
|
||||
background-color: $color-pink;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.shelf {
|
||||
|
||||
h2 {
|
||||
color: $color-pink;
|
||||
font-size: 24px;
|
||||
margin: 0 0 24px;
|
||||
margin: 0 0 16px;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
text-align: center;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
ul {
|
||||
max-width: 95%;
|
||||
margin: auto;
|
||||
margin: 0;
|
||||
|
||||
@include mq(md, max) {
|
||||
max-width: 300px;
|
||||
@include mq(lg, max) {
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.slick-track {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.slick-slide {
|
||||
height: auto;
|
||||
|
||||
& > div,
|
||||
li {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
padding: 0 2.5px;
|
||||
.slick-arrow {
|
||||
@extend .sprite;
|
||||
|
||||
@include mq(lg, max) {
|
||||
transform: translateY(-50%) scale(0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.produto-na-prateleira {
|
||||
padding: 0 5px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
.slick-prev {
|
||||
right: 100%;
|
||||
|
||||
.product-image {
|
||||
overflow: hidden;
|
||||
@include mq(lg, max) {
|
||||
left: 0;
|
||||
right: auto;
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
@extend .sprite-arrow-gray-prev-icon;
|
||||
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
left: 100%;
|
||||
|
||||
@include mq(lg, max) {
|
||||
right: 0;
|
||||
left: auto;
|
||||
transform-origin: right;
|
||||
}
|
||||
|
||||
@extend .sprite-arrow-gray-next-icon;
|
||||
|
||||
}
|
||||
|
||||
.produto-na-prateleira {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
margin: 0 15px;
|
||||
|
||||
.lazyload__sibling {
|
||||
padding-bottom: 100%;
|
||||
.product-image {
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
padding-top: 100%; //faz o item ficar quadrado
|
||||
overflow: hidden;
|
||||
|
||||
+ div {
|
||||
top: 0;
|
||||
left: 0;
|
||||
&:hover{
|
||||
.foto-secundaria {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
|
||||
.foto-principal,
|
||||
.foto-secundaria {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: map-get($z-index , level-1);
|
||||
}
|
||||
}
|
||||
|
||||
.lazyload__sibling img {
|
||||
left: 50%;
|
||||
max-width: initial;
|
||||
position: relative;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.foto-principal,
|
||||
.foto-secundaria {
|
||||
transition: all 0.25s linear;
|
||||
}
|
||||
|
||||
&:hover .foto-secundaria,
|
||||
.foto-principal {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.foto-secundaria {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.informacoes .nome {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
margin-top: 16px;
|
||||
min-height: 34px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.price {
|
||||
margin: 8px 0 17px;
|
||||
|
||||
> div {
|
||||
line-height: 1.3;
|
||||
}
|
||||
.antigo {
|
||||
color: $color-gray2;
|
||||
font-size: 14px;
|
||||
min-height: 18px;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.principal {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.parcelado {
|
||||
color: $color-gray2;
|
||||
font-size: 12px;
|
||||
|
||||
strong {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.boleto {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.compra {
|
||||
.btn-compra {
|
||||
margin: 0;
|
||||
display: block;
|
||||
transition: all 0.25s linear 0.25s;
|
||||
|
||||
@include mq(md, min) {
|
||||
visibility: hidden;
|
||||
.foto-secundaria {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: all .5s ease-in-out;
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: $color-green;
|
||||
color: $color-white;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
padding: 15px 0;
|
||||
text-transform: uppercase;
|
||||
transition: all 0.15s linear;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
@include mq(lg) {
|
||||
&:hover {
|
||||
background-color: $color-green2;
|
||||
.disponivel,
|
||||
.indisponivel{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
||||
.nome {
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
line-height: 12px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
|
||||
.price {
|
||||
margin-bottom: 17px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
|
||||
.antigo {
|
||||
margin-bottom: 4px;
|
||||
text-decoration: line-through;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
color: $gray-300;
|
||||
}
|
||||
|
||||
.principal {
|
||||
margin-bottom: 4px;
|
||||
font-weight: 900;
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.parcelado {
|
||||
color: $gray-500;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-compra {
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 50px;
|
||||
background: $black;
|
||||
color: $white;
|
||||
font-weight: bold;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
|
||||
@include mq(lg, max) {
|
||||
&:active {
|
||||
background: lighten($black, 10);
|
||||
}
|
||||
}
|
||||
|
||||
@include mq(lg, min) {
|
||||
&:hover{
|
||||
background: lighten($black, 10);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $color-green3;
|
||||
background: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mq(lg) {
|
||||
&:hover .compra .btn-compra {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
.indisponivel {
|
||||
.erro {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 50px;
|
||||
color: $red-300;
|
||||
font-weight: bold;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.indisponivel {
|
||||
color: $color-pink;
|
||||
font-weight: bold;
|
||||
margin: 5px 0;
|
||||
}
|
||||
}
|
||||
|
36
src/arquivos/sass/partials/_search.scss
Normal file
@ -0,0 +1,36 @@
|
||||
.busca {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
|
||||
legend,
|
||||
label,
|
||||
select {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fulltext-search-box {
|
||||
flex: 1;
|
||||
height: 23px;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
background: transparent;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.btn-buscar {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
font-size: 0;
|
||||
background-color: transparent;
|
||||
|
||||
@extend .sprite;
|
||||
@extend .sprite-search-icon;
|
||||
}
|
||||
}
|
36
src/arquivos/sass/partials/_slider.scss
Normal file
@ -0,0 +1,36 @@
|
||||
.slick-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: map-get($z-index , level-1);
|
||||
font-size: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
font-size: 0;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.slick-dots {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
margin: 0 4px;
|
||||
|
||||
}
|
||||
|
||||
button {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background: $white;
|
||||
}
|
||||
|
||||
}
|
@ -23,7 +23,7 @@ html {
|
||||
*/
|
||||
|
||||
body {
|
||||
color: $color-black2;
|
||||
color: $black;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -395,12 +395,6 @@ body {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
body {
|
||||
@include mq(md, max) {
|
||||
padding-bottom: 67px;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: $font-family;
|
||||
line-height: $font-height;
|
||||
|
@ -1,39 +1,24 @@
|
||||
// fonts
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=Poppins:wght@700&family=Roboto&display=swap');
|
||||
|
||||
$font-family: "Roboto", sans-serif;
|
||||
$font-weight-light: 300;
|
||||
$font-weight-regular: 400;
|
||||
$font-weight-heavy: 700;
|
||||
$font-family: "Inter", sans-serif;
|
||||
$font-height: 1.5;
|
||||
|
||||
// colors
|
||||
$color-black: #000;
|
||||
$color-black2: #142032;
|
||||
$color-black3: #19273d;
|
||||
$color-black4: #151728;
|
||||
$black: #000;
|
||||
$white: #fff;
|
||||
|
||||
$color-gray: hsla(0, 0%, 90%, 1);
|
||||
$color-gray2: hsla(220, 1%, 43%, 1);
|
||||
$color-gray3: hsl(0, 0%, 77%);
|
||||
$color-gray4: #eee;
|
||||
$color-gray5: #6d6e70;
|
||||
$color-gray6: #e5e5e5;
|
||||
$blue: #00c8ff;
|
||||
$blue-100: #00c8ff;
|
||||
|
||||
$color-white: #fff;
|
||||
$color-white2: #f5f5f5;
|
||||
$red-300: #c54141;
|
||||
|
||||
$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
|
||||
$gray: #333;
|
||||
$gray-100: #e0e0e0;
|
||||
$gray-200: #828282;
|
||||
$gray-300: #6D6E70;
|
||||
$gray-400: #bdbdbd;
|
||||
$gray-500: #6D6E70;
|
||||
|
||||
// Grid breakpoints
|
||||
|
||||
@ -46,13 +31,9 @@ $grid-breakpoints: (
|
||||
) !default;
|
||||
|
||||
$z-index: (
|
||||
menu: 15,
|
||||
popup-add-cart: 10,
|
||||
dropdown: 10,
|
||||
flag-prateleira: 5,
|
||||
comprar-flutuante: 5,
|
||||
avise-me: 5,
|
||||
scroll-top: 7,
|
||||
header-fixo: 10,
|
||||
popup-user: 15,
|
||||
level-1: 5,
|
||||
level-2: 10,
|
||||
level-3: 15,
|
||||
level-4: 20,
|
||||
level-5: 25,
|
||||
) !default;
|
||||
|
BIN
src/arquivos/sprite/arrow-gray-next-icon.png
Normal file
After Width: | Height: | Size: 2.2 KiB |
BIN
src/arquivos/sprite/arrow-gray-prev-icon.png
Normal file
After Width: | Height: | Size: 2.2 KiB |
BIN
src/arquivos/sprite/arrow-white-next-icon.png
Normal file
After Width: | Height: | Size: 1.1 KiB |
BIN
src/arquivos/sprite/arrow-white-prev-icon.png
Normal file
After Width: | Height: | Size: 1.1 KiB |
BIN
src/arquivos/sprite/bag-icon.png
Normal file
After Width: | Height: | Size: 827 B |
BIN
src/arquivos/sprite/close-menu-icon.png
Normal file
After Width: | Height: | Size: 348 B |
BIN
src/arquivos/sprite/credit-card-icon.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
BIN
src/arquivos/sprite/developmentby.png
Normal file
After Width: | Height: | Size: 1.7 KiB |
BIN
src/arquivos/sprite/facebook-logo.png
Normal file
After Width: | Height: | Size: 381 B |
BIN
src/arquivos/sprite/instagram-logo.png
Normal file
After Width: | Height: | Size: 927 B |
BIN
src/arquivos/sprite/lock-cart-icon.png
Normal file
After Width: | Height: | Size: 536 B |
BIN
src/arquivos/sprite/lock-icon.png
Normal file
After Width: | Height: | Size: 536 B |
BIN
src/arquivos/sprite/m3-gray.png
Normal file
After Width: | Height: | Size: 2.2 KiB |
BIN
src/arquivos/sprite/menu-arrow-icon.png
Normal file
After Width: | Height: | Size: 230 B |
BIN
src/arquivos/sprite/menu-icon.png
Normal file
After Width: | Height: | Size: 737 B |
BIN
src/arquivos/sprite/menu-mobile-arrow.png
Normal file
After Width: | Height: | Size: 267 B |
BIN
src/arquivos/sprite/search-icon.png
Normal file
After Width: | Height: | Size: 603 B |
BIN
src/arquivos/sprite/shop-icon.png
Normal file
After Width: | Height: | Size: 1.1 KiB |
BIN
src/arquivos/sprite/submenu-back-arrow.png
Normal file
After Width: | Height: | Size: 264 B |
BIN
src/arquivos/sprite/truck-icon.png
Normal file
After Width: | Height: | Size: 971 B |
BIN
src/arquivos/sprite/user-icon.png
Normal file
After Width: | Height: | Size: 822 B |
BIN
src/arquivos/sprite/vtex-gray.png
Normal file
After Width: | Height: | Size: 3.2 KiB |
BIN
src/arquivos/sprite/youtube-logo.png
Normal file
After Width: | Height: | Size: 496 B |
232
src/controles-customizados/menuPrincipal.html
Normal file
@ -0,0 +1,232 @@
|
||||
<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"></i>
|
||||
</a>
|
||||
|
||||
<div class="submenu">
|
||||
<button class="submenu__return-button">
|
||||
<i class="sprite sprite-submenu-back-arrow"></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 href="#" class="submenu__category__link"
|
||||
>Lorem Ipsum</a
|
||||
>
|
||||
</li>
|
||||
<li class="submenu__category">
|
||||
<a href="#" class="submenu__category__link"
|
||||
>Lorem Ipsum</a
|
||||
>
|
||||
</li>
|
||||
<li class="submenu__category">
|
||||
<a href="#" class="submenu__category__link"
|
||||
>Lorem Ipsum</a
|
||||
>
|
||||
</li>
|
||||
<li class="submenu__category">
|
||||
<a href="#" class="submenu__category__link"
|
||||
>Lorem Ipsum</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="submenu__categories">
|
||||
<li class="submenu__category">
|
||||
<a href="#" class="submenu__category__link"
|
||||
>Lorem Ipsum</a
|
||||
>
|
||||
</li>
|
||||
<li class="submenu__category">
|
||||
<a href="#" class="submenu__category__link"
|
||||
>Lorem Ipsum</a
|
||||
>
|
||||
</li>
|
||||
<li class="submenu__category">
|
||||
<a href="#" class="submenu__category__link"
|
||||
>Lorem Ipsum</a
|
||||
>
|
||||
</li>
|
||||
<li class="submenu__category">
|
||||
<a href="#" class="submenu__category__link"
|
||||
>Lorem Ipsum</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<a class="submenu__see-all" href="http://">
|
||||
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"></i>
|
||||
</a>
|
||||
|
||||
<div class="submenu">
|
||||
<button class="submenu__return-button">
|
||||
<i class="sprite sprite-submenu-back-arrow"></i>
|
||||
VOLTAR
|
||||
</button>
|
||||
<div class="container">
|
||||
<h2 class="submenu__title">LOREM IPSUM 02</h2>
|
||||
|
||||
<div class="submenu__categories-wrapper">
|
||||
<ul class="submenu__categories">
|
||||
<li class="submenu__category">
|
||||
<a href="#" class="submenu__category__link"
|
||||
>Lorem Ipsum</a
|
||||
>
|
||||
</li>
|
||||
<li class="submenu__category">
|
||||
<a href="#" class="submenu__category__link"
|
||||
>Lorem Ipsum</a
|
||||
>
|
||||
</li>
|
||||
<li class="submenu__category">
|
||||
<a href="#" class="submenu__category__link"
|
||||
>Lorem Ipsum</a
|
||||
>
|
||||
</li>
|
||||
<li class="submenu__category">
|
||||
<a href="#" class="submenu__category__link"
|
||||
>Lorem Ipsum</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="submenu__categories">
|
||||
<li class="submenu__category">
|
||||
<a href="#" class="submenu__category__link"
|
||||
>Lorem Ipsum</a
|
||||
>
|
||||
</li>
|
||||
<li class="submenu__category">
|
||||
<a href="#" class="submenu__category__link"
|
||||
>Lorem Ipsum</a
|
||||
>
|
||||
</li>
|
||||
<li class="submenu__category">
|
||||
<a href="#" class="submenu__category__link"
|
||||
>Lorem Ipsum</a
|
||||
>
|
||||
</li>
|
||||
<li class="submenu__category">
|
||||
<a href="#" class="submenu__category__link"
|
||||
>Lorem Ipsum</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<a class="submenu__see-all" href="http://">
|
||||
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"></i>
|
||||
</a>
|
||||
|
||||
<div class="submenu">
|
||||
<button class="submenu__return-button">
|
||||
<i class="sprite sprite-submenu-back-arrow"></i>
|
||||
VOLTAR
|
||||
</button>
|
||||
<div class="container">
|
||||
<h2 class="submenu__title">LOREM IPSUM 03</h2>
|
||||
|
||||
<div class="submenu__categories-wrapper">
|
||||
<ul class="submenu__categories">
|
||||
<li class="submenu__category">
|
||||
<a href="#" class="submenu__category__link"
|
||||
>Lorem Ipsum</a
|
||||
>
|
||||
</li>
|
||||
<li class="submenu__category">
|
||||
<a href="#" class="submenu__category__link"
|
||||
>Lorem Ipsum</a
|
||||
>
|
||||
</li>
|
||||
<li class="submenu__category">
|
||||
<a href="#" class="submenu__category__link"
|
||||
>Lorem Ipsum</a
|
||||
>
|
||||
</li>
|
||||
<li class="submenu__category">
|
||||
<a href="#" class="submenu__category__link"
|
||||
>Lorem Ipsum</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="submenu__categories">
|
||||
<li class="submenu__category">
|
||||
<a href="#" class="submenu__category__link"
|
||||
>Lorem Ipsum</a
|
||||
>
|
||||
</li>
|
||||
<li class="submenu__category">
|
||||
<a href="#" class="submenu__category__link"
|
||||
>Lorem Ipsum</a
|
||||
>
|
||||
</li>
|
||||
<li class="submenu__category">
|
||||
<a href="#" class="submenu__category__link"
|
||||
>Lorem Ipsum</a
|
||||
>
|
||||
</li>
|
||||
<li class="submenu__category">
|
||||
<a href="#" class="submenu__category__link"
|
||||
>Lorem Ipsum</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<a class="submenu__see-all" href="http://">
|
||||
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>
|
74
src/template-pagina/bernardo-home.html
Normal file
@ -0,0 +1,74 @@
|
||||
<!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 - Bernardo Waldhelm</title>
|
||||
|
||||
<vtex:template id="bernardo-loads-header" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<vtex:template id="bernardo-header" />
|
||||
|
||||
<main class="home">
|
||||
<section class="main-banners">
|
||||
<div class="main-banners__desktop">
|
||||
<vtex:contentPlaceHolder id="banners-principais-desktop" />
|
||||
</div>
|
||||
|
||||
<div class="main-banners__mobile">
|
||||
<vtex:contentPlaceHolder id="banners-principais-mobile" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="advantages">
|
||||
<ul class="advantages__list">
|
||||
<li class="advantages__item">
|
||||
<i class="sprite sprite-credit-card-icon"></i>
|
||||
<p class="advantages__text">
|
||||
PARCELAMENTO EM <br />
|
||||
ATÉ 6X SEM JUROS
|
||||
</p>
|
||||
</li>
|
||||
<li class="advantages__item">
|
||||
<i class="sprite sprite-truck-icon"></i>
|
||||
<p class="advantages__text">
|
||||
PAC GRÁTIS PARA COMPRAS <br />
|
||||
ACIMA DE <strong> R$ 500,00</strong>
|
||||
</p>
|
||||
</li>
|
||||
<li class="advantages__item">
|
||||
<i class="sprite sprite-shop-icon"></i>
|
||||
<p class="advantages__text">
|
||||
FÁBRICA <br />
|
||||
PRÓPRIA
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="shelf">
|
||||
<div class="container">
|
||||
<vtex:contentPlaceHolder id="prateleira-01" />
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<vtex:template id="bernardo-footer-newsletter" />
|
||||
<vtex:template id="bernardo-footer-links" />
|
||||
<vtex:template id="bernardo-footer" />
|
||||
</footer>
|
||||
<vtex:template id="bernardo-loads-footer" />
|
||||
</body>
|
||||
</html>
|
87
src/template-pagina/sub-templates/bernardo-footer-links.html
Normal file
@ -0,0 +1,87 @@
|
||||
<section class="footer-links">
|
||||
<div class="footer-links__wrapper">
|
||||
<div class="footer-links__block">
|
||||
<h4 class="footer-links__title">DÚVIDAS</h4>
|
||||
|
||||
<ul class="footer-links__items-list" class="footer-links__">
|
||||
<li class="footer-links__item">
|
||||
<a class="footer-links__link" href="institucional/sobre"
|
||||
>Sobre</a
|
||||
>
|
||||
</li>
|
||||
<li class="footer-links__item">
|
||||
<a
|
||||
class="footer-links__link"
|
||||
href="institucional/formasdepagamento"
|
||||
>FORMAS DE PAGAMENTO</a
|
||||
>
|
||||
</li>
|
||||
<li class="footer-links__item">
|
||||
<a class="footer-links__link" href="institucional/entregas"
|
||||
>ENTREGA</a
|
||||
>
|
||||
</li>
|
||||
<li class="footer-links__item">
|
||||
<a
|
||||
class="footer-links__link"
|
||||
href="institucional/trocaedevolucao"
|
||||
>TROCA E DEVELUÇÃO</a
|
||||
>
|
||||
</li>
|
||||
<li class="footer-links__item">
|
||||
<a class="footer-links__link" href="institucional/seguranca"
|
||||
>SEGURANÇA E PRIVACIDADE</a
|
||||
>
|
||||
</li>
|
||||
<li class="footer-links__item">
|
||||
<a class="footer-links__link" href="institucional/contato"
|
||||
>CONTATO</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-links__block">
|
||||
<h4 class="footer-links__title">FALE CONOSCO</h4>
|
||||
|
||||
<ul class="footer-links__items-list">
|
||||
<li class="footer-links__item">
|
||||
<a class="footer-links__link" href="tel:11 9999 9999"
|
||||
>SAC: 11 9999 9999</a
|
||||
>
|
||||
</li>
|
||||
<li class="footer-links__item">
|
||||
<a class="footer-links__link" href="mailto:sac@m3.com.br"
|
||||
>sac@m3.com.br</a
|
||||
>
|
||||
</li>
|
||||
<li class="footer-links__item"><u>ATENDIMENTO ONLINE</u></li>
|
||||
<li class="footer-links__item"><span>SEGUNDA A SEXTA</span></li>
|
||||
<li class="footer-links__item"><span>DAS 8h30 AS 18h</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-links__block">
|
||||
<h4 class="footer-links__title">FIQUE LIGADO</h4>
|
||||
|
||||
<ul class="footer-links__items-list footer-links__items-list--social">
|
||||
<li>
|
||||
<a href="#" target="_blank">
|
||||
<i class="sprite sprite-instagram-logo" title="instagram">
|
||||
</i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank" title="facebook">
|
||||
<i class="sprite sprite-facebook-logo"> </i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank" title="youtube">
|
||||
<i class="sprite sprite-youtube-logo"> </i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
@ -0,0 +1,8 @@
|
||||
<section class="footer-newsletter">
|
||||
<div class="footer-newsletter__wrapper">
|
||||
<h3 class="footer-newsletter__title">
|
||||
RECEBA NOVIDADES E DESCONTOS EXCLUSIVOS
|
||||
</h3>
|
||||
<div class="footer-newsletter__form"></div>
|
||||
</div>
|
||||
</section>
|
55
src/template-pagina/sub-templates/bernardo-footer.html
Normal file
@ -0,0 +1,55 @@
|
||||
<section class="footer-infos">
|
||||
<div class="footer-infos__labels">
|
||||
<ul class="footer-infos__payment">
|
||||
<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-hipercard"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i class="sprite sprite-pagseguro"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i class="sprite sprite-boleto"></i>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="footer-infos__divider"></div>
|
||||
|
||||
<ul class="footer-infos__security">
|
||||
<li>
|
||||
<i class="sprite sprite-google-safe-browser"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i class="sprite sprite-vtex-pci"></i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-infos__company">
|
||||
<p class="footer-infos__copyright">
|
||||
COPYRIGHT © 2020 - LOJA COMÉRCIO ELETRONICO | CNPJ: 000.000.000/0001-00
|
||||
</p>
|
||||
|
||||
<div class="footer-infos__development">
|
||||
<a href="https://vtex.com/" target="_blank" title="VTEX">
|
||||
<i class="sprite sprite-vtex-gray"></i>
|
||||
</a>
|
||||
|
||||
<a href="http://m3ecommerce.com/" target="_blank" title="M3">
|
||||
<span class="footer-infos__developed-by">Developed By</span>
|
||||
<i class="sprite sprite-m3-gray"> </i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
45
src/template-pagina/sub-templates/bernardo-header.html
Normal file
@ -0,0 +1,45 @@
|
||||
<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="http://">
|
||||
<img
|
||||
class="page-header__logo"
|
||||
src="/arquivos/m3-bernardo-logo.png"
|
||||
alt="Logo da M3"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<div class="user-items">
|
||||
<div class="user-items__search-box">
|
||||
<vtex.cmc:fullTextSearchBox />
|
||||
</div>
|
||||
|
||||
<a class="user-items__account-link" href="/account">
|
||||
<i class="sprite sprite-user-icon"></i>
|
||||
</a>
|
||||
|
||||
<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>
|
11
src/template-pagina/sub-templates/bernardo-loads-footer.html
Normal file
@ -0,0 +1,11 @@
|
||||
<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/bernardo--main-bundle.js" async="async"></script>
|
@ -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/bernardo--main.css" />
|
@ -1,64 +0,0 @@
|
||||
<section class=" footer">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="institucional-info col-12 col-lg-10 offset-lg-1 col-xl-8 offset-xl-2 row">
|
||||
<div class="institucional-links col-12 col-md-4 offset-md-0">
|
||||
<h3 class="titulo">Dúvidas</h3>
|
||||
<ul>
|
||||
<li><a href="/institucional/sobre" title="Sobre">Sobre</a></li>
|
||||
<li><a href="/institucional/pagamento" title="Formas de Pagamento">Formas de Pagamento</a></li>
|
||||
<li><a href="/institucional/entrega" title="Entrega">Entrega</a></li>
|
||||
<li><a href="/institucional/troca-devolucao" title="Troca e Devolução">Troca e Devolução</a></li>
|
||||
<li><a href="/institucional/seguranca-privacidade" title="Segurança e Privacidade">Segurança e Privacidade</a></li>
|
||||
<li><a href="/institucional/contato" title="Contato">Contato</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="contato-sac col-12 col-md-4 offset-md-0">
|
||||
<h3 class="titulo">Fale Conosco</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<span itemprop="faxNumber">
|
||||
<a href="tel:+55 22 00000 00000"><strong>SAC:</strong> 22 00000 0000</a>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span itemprop="email">
|
||||
<a href="mail:contato@contato.com.br">contato@contato.com.br</a>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
<span>
|
||||
Atendimento Online
|
||||
</span>
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
<strong>
|
||||
Segunda a Sexta
|
||||
</strong>
|
||||
das 8h30 as 18h
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="redes-sociais col-12 col-md-4 offset-md-0">
|
||||
<h3 class="titulo">Fique Ligado</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" target="_blank" title="Instagram">
|
||||
<i class="sprite sprite-instagram-white"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank" title="Facebook">
|
||||
<i class="sprite sprite-facebook-white"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
@ -1,12 +0,0 @@
|
||||
<section class="captacao-emails-newsletter container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-10 offset-lg-1 col-xl-8 offset-xl-2 row">
|
||||
<div class="col-12">
|
||||
<h3>Receba novidades e <span>descontos <strong>exclusivos</strong></span></h3>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="news-form"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
@ -1,47 +0,0 @@
|
||||
<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 Ⓒ 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>
|
@ -1,66 +0,0 @@
|
||||
<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 Ⓒ 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-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>
|
||||
|
||||
<div class="scroll-to-top">
|
||||
<i class="sprite sprite-top"></i>
|
||||
</div>
|
||||
|
||||
<div class="mobile-bottom-options">
|
||||
<ul>
|
||||
<li class="show-menu">
|
||||
<button class="option" aria-label="Abir menu"></button>
|
||||
</li>
|
||||
<li class="show-search">
|
||||
<button class="option" aria-label="Abrir busca"></button>
|
||||
</li>
|
||||
<li class="show-carrinho">
|
||||
<div class="AmountItemsInCart">
|
||||
<i class="sprite sprite-shopping-bag"></i>
|
||||
<vtex.cmc:AmountItemsInCart />
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
@ -1,16 +0,0 @@
|
||||
<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>
|
@ -1,160 +0,0 @@
|
||||
<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&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>
|
@ -1,5 +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/template--main-bundle.js" async="async"></script>
|
@ -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/template--main.css" />
|
@ -1,37 +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="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>
|
@ -1,35 +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="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>
|
@ -1,32 +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="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>
|
@ -1,79 +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="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>
|
@ -1,19 +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" />
|
||||
</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>
|
@ -1,127 +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 />
|
||||
<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>
|
@ -1,55 +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="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>
|
@ -1,35 +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="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>
|
@ -1,39 +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="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>
|
@ -1,103 +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="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>
|
@ -16,7 +16,7 @@
|
||||
<!-- $product.DiscountHightLight -->
|
||||
</span>
|
||||
</div>
|
||||
<div class="product-image ">
|
||||
<div class="product-image">
|
||||
<a href="produto.html" title="Titulo do produto">
|
||||
<!-- title=$product.EscapedName -->
|
||||
<div class="foto-principal">
|
||||
@ -42,7 +42,7 @@
|
||||
<div class="informacoes">
|
||||
<div class="avaliacao"></div>
|
||||
<div class="nome">
|
||||
Titulo do produto
|
||||
Lorem Ipsum Dolor
|
||||
<!-- $product.EscapedName -->
|
||||
</div>
|
||||
</div>
|
||||
@ -52,47 +52,37 @@
|
||||
<div class="antigo">
|
||||
<!-- #if ($product.HasBestPrice) -->
|
||||
<span class="value">
|
||||
R$ 1500000,00
|
||||
R$ 4.350,50
|
||||
<!-- $product.ListPrice -->
|
||||
</span>
|
||||
<!-- #end -->
|
||||
</div>
|
||||
<div class="principal">
|
||||
<span class="value">
|
||||
R$ 1000000,00
|
||||
R$ 3.799,05
|
||||
<!-- $product.BestPrice -->
|
||||
</span>
|
||||
</div>
|
||||
<div class="parcelado">
|
||||
<span class="desconto-parcelado">
|
||||
ou
|
||||
<strong>
|
||||
<span class="numero-de-parcelas">1</span>X de
|
||||
<span class="value">
|
||||
R$ 2,50
|
||||
<!-- $product.BestPrice -->
|
||||
</span>
|
||||
</strong>
|
||||
no cartão
|
||||
<span class="numero-de-parcelas">10</span>X de
|
||||
<span class="value">
|
||||
R$ 399,90
|
||||
<!-- $product.BestPrice -->
|
||||
</span>
|
||||
sem juros
|
||||
</span>
|
||||
</div>
|
||||
<div class="boleto">
|
||||
<span class="value">
|
||||
R$ 9,50
|
||||
<!-- $product.BestPrice -->
|
||||
</span>
|
||||
à vista no boleto bancário
|
||||
</div>
|
||||
</div>
|
||||
<div class="compra">
|
||||
<span class="btn-compra">
|
||||
<a title="Compre agora" href="produto.html">Compre agora</a>
|
||||
<a title="Compre agora" href="produto.html">COMPRE AGORA</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- #else -->
|
||||
<div class="indisponivel">
|
||||
<span class="erro">Produto indisponível</span>
|
||||
</div>
|
||||
<!-- <div class="indisponivel">
|
||||
<span class="erro">INDISPONÍVEL</span>
|
||||
</div> -->
|
||||
<!-- #end -->
|
||||
</div>
|
63
src/template-prateleira/bernardo-prateleira-padrao.vtex.html
Normal file
@ -0,0 +1,63 @@
|
||||
#set($id = $product.Id) #set($idSku = $product.productVariantId) #set($uri =
|
||||
$product.Uri) #set($escapedName = $product.HtmlEscapedName)
|
||||
|
||||
<div class="produto-na-prateleira" data-sku-id="$id">
|
||||
<div class="flags-product">
|
||||
<span class="HightLight"> $product.HightLight </span>
|
||||
<span class="DiscountHightLight"> $product.DiscountHightLight </span>
|
||||
</div>
|
||||
<div class="product-image">
|
||||
<a href="$uri" title="$escapedName">
|
||||
<div class="foto-principal">
|
||||
<div class="lazyload__sibling"></div>
|
||||
<div class="lazyload" data-noscript="">
|
||||
<noscript> $product.GetImageTag(2) </noscript>
|
||||
</div>
|
||||
</div>
|
||||
<div class="foto-secundaria">
|
||||
<div class="lazyload__sibling"></div>
|
||||
<div class="lazyload" data-noscript="">
|
||||
<noscript> $product.GetImageTag(2,"ultima") </noscript>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="informacoes">
|
||||
<div class="avaliacao"></div>
|
||||
<div class="nome">$escapedName</div>
|
||||
</div>
|
||||
#if ($product.IsInStock)
|
||||
<div class="disponivel">
|
||||
<div class="price">
|
||||
<div class="antigo">
|
||||
#if ($product.HasBestPrice)
|
||||
<span class="value"> $product.ListPrice </span>
|
||||
#end
|
||||
</div>
|
||||
<div class="principal">
|
||||
<span class="value"> $product.BestPrice </span>
|
||||
</div>
|
||||
#if($product.NumbersOfInstallment > 1)
|
||||
<div class="parcelado">
|
||||
<span class="desconto-parcelado">
|
||||
<span class="numero-de-parcelas"
|
||||
>$product.NumbersOfInstallment</span
|
||||
>X de
|
||||
<span class="value"> $product.InstallmentValue </span>
|
||||
sem juros
|
||||
</span>
|
||||
</div>
|
||||
#end
|
||||
</div>
|
||||
<div class="compra">
|
||||
<span class="btn-compra">
|
||||
<a title="Compre agora" href="$uri">COMPRE AGORA</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
#else
|
||||
<div class="indisponivel">
|
||||
<span class="erro">INDISPONÍVEL</span>
|
||||
</div>
|
||||
#end
|
||||
</div>
|
@ -1,84 +0,0 @@
|
||||
#set($id = $product.Id)
|
||||
#set($idSku = $product.productVariantId)
|
||||
#set($uri = $product.Uri)
|
||||
#set($escapedName = $product.HtmlEscapedName)
|
||||
|
||||
|
||||
<div class="produto-na-prateleira" data-sku-id="$id">
|
||||
<div class="flags-product">
|
||||
<span class="HightLight">
|
||||
$product.HightLight
|
||||
</span>
|
||||
<span class="DiscountHightLight">
|
||||
$product.DiscountHightLight
|
||||
</span>
|
||||
</div>
|
||||
<div class="product-image ">
|
||||
<a href="$uri" title=$escapedName>
|
||||
|
||||
<div class="foto-principal" >
|
||||
<div class="lazyload__sibling"></div>
|
||||
<div class="lazyload" data-noscript="">
|
||||
<noscript>
|
||||
$product.GetImageTag(2)
|
||||
</noscript>
|
||||
</div>
|
||||
</div>
|
||||
<div class="foto-secundaria" >
|
||||
<div class="lazyload__sibling"></div>
|
||||
<div class="lazyload" data-noscript="">
|
||||
<noscript>
|
||||
$product.GetImageTag(2,"ultima")
|
||||
</noscript>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="informacoes">
|
||||
<div class="avaliacao"></div>
|
||||
<div class="nome">
|
||||
$escapedName
|
||||
</div>
|
||||
</div>
|
||||
#if ($product.IsInStock)
|
||||
<div class="disponivel">
|
||||
<div class="price">
|
||||
<div class="antigo">
|
||||
#if ($product.HasBestPrice)
|
||||
<span class="value">
|
||||
$product.ListPrice
|
||||
</span>
|
||||
#end
|
||||
</div>
|
||||
<div class="principal">
|
||||
<span class="value">
|
||||
$product.BestPrice
|
||||
</span>
|
||||
</div>
|
||||
#if($product.NumbersOfInstallment > 1)
|
||||
<div class="parcelado">
|
||||
<span class="desconto-parcelado">
|
||||
ou
|
||||
<strong>
|
||||
<span class="numero-de-parcelas">$product.NumbersOfInstallment</span>X de
|
||||
<span class="value">
|
||||
$product.InstallmentValue
|
||||
</span>
|
||||
</strong>
|
||||
no cartão
|
||||
</span>
|
||||
</div>
|
||||
#end
|
||||
</div>
|
||||
<div class="compra">
|
||||
<span class="btn-compra">
|
||||
<a title="Compre agora" href="$uri">Compre agora</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
#else
|
||||
<div class="indisponivel">
|
||||
<span class="erro">Produto indisponível</span>
|
||||
</div>
|
||||
#end
|
||||
</div>
|