forked from M3-Academy/vtex-cms-template-atualizado
feature/development #1
@ -25,6 +25,6 @@
|
|||||||
</select>
|
</select>
|
||||||
<input type="hidden" id="ftIdxa28507c5599f4430a7cabd23249f99c3" value="" />
|
<input type="hidden" id="ftIdxa28507c5599f4430a7cabd23249f99c3" value="" />
|
||||||
<input id="ftBoxa28507c5599f4430a7cabd23249f99c3" class="fulltext-search-box ui-autocomplete-input" type="text" size="20"
|
<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" />
|
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" />
|
<input id="ftBtna28507c5599f4430a7cabd23249f99c3" type="button" value="Buscar" class="btn-buscar" />
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|||||||
12
meta/loja.js
12
meta/loja.js
@ -1,16 +1,6 @@
|
|||||||
const home = require("./pages/home");
|
const home = require("./pages/home");
|
||||||
const category = require("./pages/category");
|
|
||||||
const product = require("./pages/product");
|
|
||||||
const institucional = require("./pages/institucional");
|
|
||||||
const menuElements = require("./pages/elementos-menu");
|
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
accountName: "agenciamagma",
|
accountName: "agenciamagma",
|
||||||
pages: [
|
pages: [{ data: home, template: "manuelaluana-home.html" }],
|
||||||
{ data: home, template: "template-home.html" },
|
|
||||||
{ data: category, template: "template-categoria.html" },
|
|
||||||
{ data: product, template: "template-produto.html" },
|
|
||||||
{ data: institucional, template: "template-institucional.html" },
|
|
||||||
{ data: menuElements, template: "template-elementos-menu.html" },
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,26 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
contentPlaceHolders: [
|
|
||||||
{
|
|
||||||
// Registra o contentPlaceholder
|
|
||||||
id: "htmlSeo",
|
|
||||||
objects: [
|
|
||||||
// Registra os objetos vtex
|
|
||||||
{
|
|
||||||
type: "html",
|
|
||||||
name: "Html SEO",
|
|
||||||
contents: [
|
|
||||||
{
|
|
||||||
name: "metaTag",
|
|
||||||
active: true,
|
|
||||||
content: `<meta name='language' content='pt-Br'>`,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
|
|
||||||
// Ainda não implementado
|
|
||||||
//Trocar pelo que for cadastrado na vtex
|
|
||||||
searchResultLayoutID: "46b0e7f2-15ee-4789-a75e-280e389d2b8f",
|
|
||||||
};
|
|
||||||
@ -1,37 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
contentPlaceHolders: [
|
|
||||||
{
|
|
||||||
id: "banners-menu",
|
|
||||||
objects: [
|
|
||||||
{
|
|
||||||
type: "banner",
|
|
||||||
name: "menu camisa",
|
|
||||||
contents: [
|
|
||||||
{
|
|
||||||
name: "banner principal mobile content",
|
|
||||||
active: true,
|
|
||||||
type: "image",
|
|
||||||
file: "slide-principal-mobile.png",
|
|
||||||
width: 500,
|
|
||||||
height: 500,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "banner",
|
|
||||||
name: "menu bolsa",
|
|
||||||
contents: [
|
|
||||||
{
|
|
||||||
name: "banner principal mobile 2 content",
|
|
||||||
active: true,
|
|
||||||
type: "image",
|
|
||||||
file: "slide-principal-mobile.png",
|
|
||||||
width: 500,
|
|
||||||
height: 500,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
@ -1,200 +1,144 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
contentPlaceHolders: [
|
contentPlaceHolders: [
|
||||||
{
|
{
|
||||||
// Registra o contentPlaceholder
|
id: "banners-principais-desktop",
|
||||||
id: "htmlSeo",
|
|
||||||
objects: [
|
|
||||||
// Registra os objetos vtex
|
|
||||||
{
|
|
||||||
type: "html",
|
|
||||||
name: "Html SEO",
|
|
||||||
contents: [],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "slide-principal",
|
|
||||||
objects: [
|
objects: [
|
||||||
{
|
{
|
||||||
type: "banner",
|
type: "banner",
|
||||||
name: "banner principal",
|
name: "Banner Principal Desktop 01",
|
||||||
|
|
||||||
contents: [
|
contents: [
|
||||||
{
|
{
|
||||||
name: "banner principal content",
|
name: "Banner Principal Desktop 01",
|
||||||
active: true,
|
active: true,
|
||||||
type: "image",
|
type: "image",
|
||||||
file: "slide-principal.png",
|
file: "banner-principal-desktop.png",
|
||||||
width: 1920,
|
width: 1440,
|
||||||
height: 500,
|
height: 532,
|
||||||
// "category": "*",
|
|
||||||
// "brand": "*"
|
|
||||||
// "period": ""
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "banner",
|
type: "banner",
|
||||||
name: "banner principal-2",
|
name: "Banner Principal Desktop 02",
|
||||||
contents: [
|
contents: [
|
||||||
{
|
{
|
||||||
name: "banner principal content",
|
name: "Banner Principal Desktop 02",
|
||||||
active: true,
|
active: true,
|
||||||
type: "image",
|
type: "image",
|
||||||
file: "slide-principal.png",
|
file: "banner-principal-desktop.png",
|
||||||
width: 1920,
|
width: 1440,
|
||||||
height: 500,
|
height: 532,
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "slide-principal-mobile",
|
type: "banner",
|
||||||
|
name: "Banner Principal Desktop 03",
|
||||||
|
contents: [
|
||||||
|
{
|
||||||
|
name: "Banner Principal Desktop 03",
|
||||||
|
active: true,
|
||||||
|
type: "image",
|
||||||
|
file: "banner-principal-desktop.png",
|
||||||
|
width: 1440,
|
||||||
|
height: 532,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "banner",
|
||||||
|
name: "Banner Principal Desktop 04",
|
||||||
|
contents: [
|
||||||
|
{
|
||||||
|
name: "Banner Principal Desktop 04",
|
||||||
|
active: true,
|
||||||
|
type: "image",
|
||||||
|
file: "banner-principal-desktop.png",
|
||||||
|
width: 1440,
|
||||||
|
height: 532,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
id: "banners-principais-mobile",
|
||||||
objects: [
|
objects: [
|
||||||
{
|
{
|
||||||
type: "banner",
|
type: "banner",
|
||||||
name: "banner principal mobile",
|
name: "Banner Principal Mobile 01",
|
||||||
contents: [
|
contents: [
|
||||||
{
|
{
|
||||||
name: "banner principal mobile content",
|
name: "Banner Principal Mobile 01",
|
||||||
active: true,
|
active: true,
|
||||||
type: "image",
|
type: "image",
|
||||||
file: "slide-principal-mobile.png",
|
file: "banner-principal-mobile.png",
|
||||||
width: 500,
|
width: 375,
|
||||||
height: 500,
|
height: 342,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "banner",
|
type: "banner",
|
||||||
name: "banner principal mobile 2",
|
name: "Banner Principal Mobile 02",
|
||||||
contents: [
|
contents: [
|
||||||
{
|
{
|
||||||
name: "banner principal mobile 2 content",
|
name: "Banner Principal Mobile 02",
|
||||||
active: true,
|
active: true,
|
||||||
type: "image",
|
type: "image",
|
||||||
file: "slide-principal-mobile.png",
|
file: "banner-principal-mobile.png",
|
||||||
width: 500,
|
width: 375,
|
||||||
height: 500,
|
height: 342,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
|
||||||
},
|
|
||||||
//====================
|
|
||||||
// MOSAICO
|
|
||||||
//====================
|
|
||||||
{
|
{
|
||||||
id: "banner-01",
|
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,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "banner",
|
||||||
|
name: "Banner Principal Mobile 04",
|
||||||
|
contents: [
|
||||||
|
{
|
||||||
|
name: "Banner Principal Mobile 04",
|
||||||
|
active: true,
|
||||||
|
type: "image",
|
||||||
|
file: "banner-principal-mobile.png",
|
||||||
|
width: 375,
|
||||||
|
height: 342,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
id: "prateleira-01",
|
||||||
objects: [
|
objects: [
|
||||||
{
|
{
|
||||||
type: "banner",
|
type: "Produtos Relacionados",
|
||||||
name: "banner 01",
|
name: "CONFIRA NOSSAS NOVIDADES",
|
||||||
contents: [
|
|
||||||
{
|
properties: {
|
||||||
name: "banner 01 content",
|
layout: "manuelaluana-prateleira-padrao",
|
||||||
active: true,
|
type: "QuemViuViuTambem",
|
||||||
type: "image",
|
"number-of-columns": 12,
|
||||||
file: "banner-01.png",
|
"number-of-items": 12,
|
||||||
width: 500,
|
|
||||||
height: 500,
|
|
||||||
},
|
},
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "banner-02",
|
|
||||||
objects: [
|
|
||||||
{
|
|
||||||
type: "banner",
|
|
||||||
name: "banner 02",
|
|
||||||
contents: [
|
|
||||||
{
|
|
||||||
name: "banner 02 content",
|
|
||||||
active: true,
|
|
||||||
type: "image",
|
|
||||||
file: "banner-02.png",
|
|
||||||
width: 500,
|
|
||||||
height: 500,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "banner-03",
|
|
||||||
objects: [
|
|
||||||
{
|
|
||||||
type: "banner",
|
|
||||||
name: "banner 03",
|
|
||||||
contents: [
|
|
||||||
{
|
|
||||||
name: "banner 03 content",
|
|
||||||
active: true,
|
|
||||||
type: "image",
|
|
||||||
file: "banner-03.png",
|
|
||||||
width: 500,
|
|
||||||
height: 500,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "banner-04",
|
|
||||||
objects: [
|
|
||||||
{
|
|
||||||
type: "banner",
|
|
||||||
name: "banner 04",
|
|
||||||
contents: [
|
|
||||||
{
|
|
||||||
name: "banner 04 content",
|
|
||||||
active: true,
|
|
||||||
type: "image",
|
|
||||||
file: "banner-04.png",
|
|
||||||
width: 500,
|
|
||||||
height: 500,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "banner-05",
|
|
||||||
objects: [
|
|
||||||
{
|
|
||||||
type: "banner",
|
|
||||||
name: "banner 05",
|
|
||||||
contents: [
|
|
||||||
{
|
|
||||||
name: "banner 05 content",
|
|
||||||
active: true,
|
|
||||||
type: "image",
|
|
||||||
file: "banner-05.png",
|
|
||||||
width: 500,
|
|
||||||
height: 500,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "mobile-banner-05",
|
|
||||||
objects: [
|
|
||||||
{
|
|
||||||
type: "banner",
|
|
||||||
name: "banner 05 mobile",
|
|
||||||
contents: [
|
|
||||||
{
|
|
||||||
name: "banner 05 mobile content",
|
|
||||||
active: true,
|
|
||||||
type: "image",
|
|
||||||
file: "banner-05.png",
|
|
||||||
width: 500,
|
|
||||||
height: 500,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,42 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
contentPlaceHolders: [
|
|
||||||
{
|
|
||||||
// Registra o contentPlaceholder
|
|
||||||
id: "htmlSeo",
|
|
||||||
objects: [
|
|
||||||
// Registra os objetos vtex
|
|
||||||
{
|
|
||||||
type: "html",
|
|
||||||
name: "Html SEO",
|
|
||||||
contents: [],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "texto-institucional",
|
|
||||||
objects: [
|
|
||||||
{
|
|
||||||
type: "html",
|
|
||||||
name: "Conteudo institucional",
|
|
||||||
contents: [
|
|
||||||
{
|
|
||||||
name: "Potilica de privacidade",
|
|
||||||
active: true,
|
|
||||||
content: `
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce feugiat lacus sapien, nec interdum ante sodales id. Vivamus eu mauris vel nibh pharetra aliquet. Donec nisl odio, feugiat sed laoreet non, venenatis in dolor. Nulla eget dolor nec mi congue volutpat. Maecenas non elementum dolor. Nam sollicitudin justo sed magna auctor, at condimentum quam aliquam. Ut luctus posuere quam, nec auctor orci sagittis at. Duis eget nibh sed lorem sollicitudin auctor cursus nec ipsum. In tempus ipsum libero, at ultricies lectus blandit sed. Cras in venenatis turpis. Praesent pellentesque augue nec iaculis mattis. Sed ante magna, vulputate sit amet pulvinar sed, iaculis ac massa. Nulla id turpis in enim aliquam auctor ut nec orci.
|
|
||||||
|
|
||||||
Phasellus sit amet commodo lacus, eu dapibus lectus. Maecenas vitae justo lacus. Cras ornare hendrerit dictum. Sed quis iaculis lacus. Nunc egestas ipsum eget risus pulvinar sagittis. Nullam quis porttitor massa, a congue quam. Pellentesque ac mollis est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer tincidunt, turpis quis pretium vehicula, leo erat lobortis velit, sed finibus nulla nunc sed lorem. Maecenas tellus nisi, tincidunt sed dolor vitae, accumsan euismod nisl. Cras dignissim placerat dapibus. Donec varius, sapien quis hendrerit dictum, lorem urna vestibulum eros, tempor aliquet ligula massa vel dui.
|
|
||||||
|
|
||||||
In et rutrum erat. Duis dapibus, ligula eu luctus aliquet, nisi neque dapibus nisl, id laoreet nunc libero vitae augue. Integer vehicula ligula non risus vehicula, in venenatis nulla pulvinar. Nulla convallis elit sit amet massa euismod, quis cursus elit suscipit. Pellentesque semper dui sit amet ex efficitur tristique. Donec vitae porttitor augue, eget viverra ipsum. Sed volutpat, orci non hendrerit tempus, nisi nisl suscipit libero, at ultrices purus elit a massa. Nullam imperdiet blandit nunc, nec scelerisque libero gravida ac. Vestibulum ante velit, sodales blandit vehicula sed, ullamcorper eget dui. Fusce tempus ipsum sed lobortis pharetra. Interdum et malesuada fames ac ante ipsum primis in faucibus.
|
|
||||||
|
|
||||||
Aenean at tempus arcu. Donec porta tempor nunc, id sollicitudin lectus egestas eu. Nullam posuere sollicitudin lectus sit amet suscipit. Curabitur quis urna quam. Ut sollicitudin dui sit amet risus rutrum convallis laoreet in tellus. Pellentesque porttitor nec velit a tempus. Cras quam massa, efficitur iaculis iaculis in, varius eget lorem.
|
|
||||||
|
|
||||||
Duis ac egestas velit. Vivamus accumsan, metus vitae luctus iaculis, nisi ante mollis ipsum, non commodo augue orci nec dui. Cras dignissim venenatis viverra. Curabitur vitae ex turpis. Nullam pellentesque convallis enim, id accumsan velit laoreet nec. Quisque eget felis in turpis rhoncus maximus. In nec vehicula tortor. Maecenas consequat gravida dapibus.
|
|
||||||
`,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
@ -1,57 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
contentPlaceHolders: [
|
|
||||||
{
|
|
||||||
// Registra o contentPlaceholder
|
|
||||||
id: "htmlSeo",
|
|
||||||
objects: [
|
|
||||||
// Registra os objetos vtex
|
|
||||||
{
|
|
||||||
type: "html",
|
|
||||||
name: "Html SEO",
|
|
||||||
contents: [],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "prateleira-padrao",
|
|
||||||
objects: [
|
|
||||||
{
|
|
||||||
type: "Produtos Relacionados",
|
|
||||||
name: "prateleira",
|
|
||||||
properties: {
|
|
||||||
layout: "prateleira-padrao",
|
|
||||||
type: "QuemViuViuTambem",
|
|
||||||
"number-of-columns": 12,
|
|
||||||
"number-of-items": 12,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
// EXEMPLO DE PRATELEIRA COMUM
|
|
||||||
// {
|
|
||||||
// id: "prateleira-padrao",
|
|
||||||
// objects: [
|
|
||||||
// {
|
|
||||||
// type: "colecao",
|
|
||||||
// name: "prateleira",
|
|
||||||
// properties: {
|
|
||||||
// layout: "prateleira-padrao",
|
|
||||||
// "number-of-columns": 12,
|
|
||||||
// "number-of-items": 12,
|
|
||||||
// "show-unavailable": false,
|
|
||||||
// //sim random está escrito errado e é culpa da vtex
|
|
||||||
// ramdom: false,
|
|
||||||
// paged: false,
|
|
||||||
// },
|
|
||||||
// contents: [
|
|
||||||
// {
|
|
||||||
// name: "praleira",
|
|
||||||
// active: true,
|
|
||||||
// clusterId: 158,
|
|
||||||
// },
|
|
||||||
// ],
|
|
||||||
// },
|
|
||||||
// ],
|
|
||||||
// },
|
|
||||||
],
|
|
||||||
};
|
|
||||||
19020
package-lock.json
generated
19020
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"author": "Agência M3",
|
"author": "Agência M3",
|
||||||
"name": "tema-template",
|
"name": "tema-template",
|
||||||
"shopName": "template",
|
"shopName": "manuelaluana",
|
||||||
"description": "Tema Vtex para loja Vtex",
|
"description": "Tema Vtex para loja Vtex",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
|
|||||||
BIN
src/arquivos/img/banner-principal-desktop.png
Normal file
BIN
src/arquivos/img/banner-principal-desktop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 595 KiB |
BIN
src/arquivos/img/banner-principal-mobile.png
Normal file
BIN
src/arquivos/img/banner-principal-mobile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
BIN
src/arquivos/img/m3-logo-manuelaluana.png
Normal file
BIN
src/arquivos/img/m3-logo-manuelaluana.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
@ -20,6 +20,7 @@ import Promocao from "./partials/Promocao";
|
|||||||
import MenuContents from "./partials/MenuContents";
|
import MenuContents from "./partials/MenuContents";
|
||||||
import Login from "./partials/Login";
|
import Login from "./partials/Login";
|
||||||
import Prateleira from "./components/Prateleira/Prateleira";
|
import Prateleira from "./components/Prateleira/Prateleira";
|
||||||
|
import Shelf from "./partials/Shelf";
|
||||||
|
|
||||||
import PrateleiraService from "./components/Prateleira/PrateleiraService";
|
import PrateleiraService from "./components/Prateleira/PrateleiraService";
|
||||||
|
|
||||||
@ -38,6 +39,7 @@ const app = new Container({
|
|||||||
ScrollToTop,
|
ScrollToTop,
|
||||||
AutoComplete,
|
AutoComplete,
|
||||||
Prateleira,
|
Prateleira,
|
||||||
|
Shelf,
|
||||||
],
|
],
|
||||||
services: [PrateleiraService],
|
services: [PrateleiraService],
|
||||||
pages: [
|
pages: [
|
||||||
@ -64,10 +66,11 @@ const app = new Container({
|
|||||||
],
|
],
|
||||||
});
|
});
|
||||||
|
|
||||||
app.bind(Minicart.name, ".carrinho .mini-cart");
|
app.bind(Minicart.name, ".minicart__drawer");
|
||||||
|
|
||||||
app.bind(Newsletter.name, {
|
app.bind(Newsletter.name, {
|
||||||
elemento: ".news-form",
|
elemento: ".footer-newsletter__form",
|
||||||
textButtom: "Cadastre-se",
|
textButtom: "CADASTRE-SE",
|
||||||
});
|
});
|
||||||
|
|
||||||
export default app;
|
export default app;
|
||||||
|
|||||||
@ -1,45 +1,28 @@
|
|||||||
import { isSmallerThen768 } from "Helpers/MediasMatch";
|
import { isSmallerThen991 } from "Helpers/MediasMatch";
|
||||||
|
|
||||||
export default class FixedHeader {
|
export default class FixedHeader {
|
||||||
constructor() {
|
constructor() {
|
||||||
if (!isSmallerThen768) {
|
if (!isSmallerThen991) {
|
||||||
this.fixedHeader();
|
this.selectors();
|
||||||
|
this.events();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
fixedHeader() {
|
selectors() {
|
||||||
var lastScroll = 0;
|
this.pageHeader = $(".page-header");
|
||||||
var timer, scrollTop, headerHeight;
|
|
||||||
var element = $("header.header");
|
|
||||||
|
|
||||||
$(document).scroll(function (e) {
|
|
||||||
headerHeight = element.height();
|
|
||||||
scrollTop = $(document).scrollTop();
|
|
||||||
|
|
||||||
if (scrollTop > 1) {
|
|
||||||
$("body").css("padding-top", headerHeight);
|
|
||||||
element.addClass("fixed");
|
|
||||||
|
|
||||||
if (timer) {
|
|
||||||
window.clearTimeout(timer);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
timer = window.setTimeout(function () {
|
events() {
|
||||||
if (
|
$(document).scroll(this.fixHeader.bind(this));
|
||||||
scrollTop > lastScroll &&
|
}
|
||||||
scrollTop > element.height() + 20
|
|
||||||
) {
|
fixHeader() {
|
||||||
element.addClass("fixed-hide");
|
const topScroll = $(document).scrollTop();
|
||||||
|
|
||||||
|
if (topScroll > 200) {
|
||||||
|
this.pageHeader.addClass("is-fixed");
|
||||||
} else {
|
} else {
|
||||||
element.removeClass("fixed-hide");
|
this.pageHeader.removeClass("is-fixed");
|
||||||
}
|
}
|
||||||
|
|
||||||
lastScroll = $(document).scrollTop();
|
|
||||||
}, 50);
|
|
||||||
} else {
|
|
||||||
element.removeClass("fixed");
|
|
||||||
$("body").css("padding-top", 0);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -16,7 +16,33 @@ export default class Minicart {
|
|||||||
</div>
|
</div>
|
||||||
<div class="mini-cart-main">
|
<div class="mini-cart-main">
|
||||||
<div class="wait-screen"></div>
|
<div class="wait-screen"></div>
|
||||||
<ul class="product-list"></ul>
|
<ul class="product-list">
|
||||||
|
<li class="product">
|
||||||
|
<div class="product-image">
|
||||||
|
<a href="#" title="">
|
||||||
|
<img src="${alterarTamanhoImagemSrcVtex(
|
||||||
|
"http://aramado.vteximg.com.br/arquivos/ids/183682-115-115/LV230.312.2.2-1-.jpg?v=637699055316470000",
|
||||||
|
80,
|
||||||
|
102
|
||||||
|
)}" alt="">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="product-options">
|
||||||
|
<div class="product-info">
|
||||||
|
<div class="name">Lorem ipsum dolor </div>
|
||||||
|
<div class="product-price">R$3.799,05</div>
|
||||||
|
<div class="product-qtd">
|
||||||
|
<button class="remove-from-cart" aria-label="Remover um item">-</button>
|
||||||
|
<span class="value">1</span>
|
||||||
|
<button class="add-to-cart" aria-label="Adicionar um item">+</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="product-remove">
|
||||||
|
<button class="remove" aria-label="Remover produto">Remover</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="mini-cart-footer">
|
<div class="mini-cart-footer">
|
||||||
<div class="totals-container">
|
<div class="totals-container">
|
||||||
@ -57,7 +83,7 @@ export default class Minicart {
|
|||||||
<li id="${i + "-" + items[i].uniqueId}" class="product">
|
<li id="${i + "-" + items[i].uniqueId}" class="product">
|
||||||
<div class="product-image">
|
<div class="product-image">
|
||||||
<a href="${items[i].detailUrl}" title="${items[i].name}">
|
<a href="${items[i].detailUrl}" title="${items[i].name}">
|
||||||
<img src="${alterarTamanhoImagemSrcVtex(items[i].imageUrl, 85, 100)}" alt="${
|
<img src="${alterarTamanhoImagemSrcVtex(items[i].imageUrl, 80, 102)}" alt="${
|
||||||
items[i].name
|
items[i].name
|
||||||
}">
|
}">
|
||||||
</a>
|
</a>
|
||||||
@ -115,10 +141,10 @@ export default class Minicart {
|
|||||||
orderItems(items);
|
orderItems(items);
|
||||||
$(".mini-cart-container").addClass("have-item");
|
$(".mini-cart-container").addClass("have-item");
|
||||||
} else {
|
} else {
|
||||||
emptyMessage();
|
// emptyMessage();
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
emptyMessage();
|
// emptyMessage();
|
||||||
console.warn("couldnt list items. " + e.message);
|
console.warn("couldnt list items. " + e.message);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -290,8 +316,6 @@ export default class Minicart {
|
|||||||
}
|
}
|
||||||
|
|
||||||
this.createMiniCartStructure(element);
|
this.createMiniCartStructure(element);
|
||||||
this.configureEvents(
|
this.configureEvents(".minicart__button");
|
||||||
"header .carrinho> a, .mobile-bottom-options .portal-totalizers-ref, .popup-add-cart .cart"
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -96,8 +96,8 @@ export default class Prateleira {
|
|||||||
//ex atualziar
|
//ex atualziar
|
||||||
atualizar() {
|
atualizar() {
|
||||||
this.flagDeDesconto();
|
this.flagDeDesconto();
|
||||||
this.precoParcelado();
|
// this.precoParcelado();
|
||||||
this.precoBoleto();
|
// this.precoBoleto();
|
||||||
}
|
}
|
||||||
|
|
||||||
criarHtmlPrecoBoleto(valor) {
|
criarHtmlPrecoBoleto(valor) {
|
||||||
@ -123,7 +123,7 @@ export default class Prateleira {
|
|||||||
createFlagDesconto($elemento, percentualDeDesconto) {
|
createFlagDesconto($elemento, percentualDeDesconto) {
|
||||||
var $flag = $("<p />")
|
var $flag = $("<p />")
|
||||||
.addClass("flag produto-off")
|
.addClass("flag produto-off")
|
||||||
.text(percentualDeDesconto + "%");
|
.text(percentualDeDesconto + "%OFF");
|
||||||
$elemento.find(".flags-product .DiscountHightLight").append($flag);
|
$elemento.find(".flags-product .DiscountHightLight").append($flag);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,38 +1,18 @@
|
|||||||
import {
|
import slickConfig from "Config/slick";
|
||||||
bannerHome,
|
|
||||||
barraDeVantagens,
|
|
||||||
naveguePorCategorias,
|
|
||||||
} from "App/functions/slide";
|
|
||||||
|
|
||||||
import InstagramGallery from "../components/InstagramGallery";
|
|
||||||
|
|
||||||
export default class Home {
|
export default class Home {
|
||||||
constructor() {
|
constructor() {
|
||||||
bannerHome(".main-gallery");
|
this.selectors();
|
||||||
barraDeVantagens(".tipbar ul");
|
this.createSliders();
|
||||||
naveguePorCategorias(".categorias-home .categorias");
|
|
||||||
|
|
||||||
new InstagramGallery({
|
|
||||||
gallery: ".instagramGallery__photos",
|
|
||||||
account: "agenciam3",
|
|
||||||
limit: 6,
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
naveguePorCategorias() {
|
selectors() {
|
||||||
// preencher titulos
|
this.desktopMainBanners = $(".main-banners__desktop");
|
||||||
var $container = $(".home-categories .categorias");
|
this.mobileMainBanners = $(".main-banners__mobile");
|
||||||
$container.find(".box-banner").each(function (i, el) {
|
}
|
||||||
const $banner = $(el);
|
|
||||||
let name;
|
|
||||||
|
|
||||||
name = $banner.find("img").prop("alt");
|
createSliders() {
|
||||||
let $titulo = $("<span />", {
|
this.desktopMainBanners.slick(slickConfig.home.desktopMainBanners);
|
||||||
text: name,
|
this.mobileMainBanners.slick(slickConfig.home.mobileMainBanners);
|
||||||
class: "nome-categoria",
|
|
||||||
});
|
|
||||||
$banner.find("img").after($titulo);
|
|
||||||
});
|
|
||||||
slide.naveguePorCategorias($container);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,38 +1,49 @@
|
|||||||
|
import { isSmallerThen991 } from "Helpers/MediasMatch";
|
||||||
|
|
||||||
export default class Menu {
|
export default class Menu {
|
||||||
constructor() {
|
constructor() {
|
||||||
this.toggleMenuMobile();
|
this.selectors();
|
||||||
this.toggleSubCategories();
|
this.events();
|
||||||
}
|
}
|
||||||
|
|
||||||
toggleMenuMobile() {
|
selectors() {
|
||||||
$("#open-menu-button, .show-menu .option").on("click", function () {
|
this.openMenuButton = $(".menu__button");
|
||||||
$(".menu-principal").addClass("mobile-open");
|
this.mainMenu = $(".main-menu");
|
||||||
$("header.header").addClass("menu-mobile-open");
|
this.closeMenuButton = $(".menu-header__close-button");
|
||||||
});
|
this.departmentLink = $(".main-menu__department-link");
|
||||||
|
this.returnButton = $(".submenu__return-button");
|
||||||
$("#close-menu-button").on("click", function () {
|
|
||||||
$(".menu-principal").removeClass("mobile-open");
|
|
||||||
$("header.header").removeClass("menu-mobile-open");
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
toggleSubCategories() {
|
events() {
|
||||||
$(".m3-dropdown > button").on("click", function (event) {
|
this.openMenuButton.click(this.openMenu.bind(this));
|
||||||
|
this.closeMenuButton.click(this.closeMenu.bind(this));
|
||||||
|
this.returnButton.click(this.closeSubMenu.bind(this));
|
||||||
|
|
||||||
|
if (isSmallerThen991) {
|
||||||
|
this.departmentLink.click(this.openSubMenu.bind(this));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
openMenu() {
|
||||||
|
this.mainMenu.addClass("is-open");
|
||||||
|
}
|
||||||
|
|
||||||
|
closeMenu() {
|
||||||
|
this.mainMenu.removeClass("is-open");
|
||||||
|
}
|
||||||
|
|
||||||
|
openSubMenu(event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
const link = $(event.target);
|
||||||
|
|
||||||
if ($(this).parent().hasClass("sub-menu-open")) {
|
link.parents(".main-menu__department")
|
||||||
$(this).parent().removeClass("sub-menu-open");
|
.find(".submenu")
|
||||||
} else {
|
.addClass("is-open");
|
||||||
$(this).parent().siblings().removeClass("sub-menu-open");
|
|
||||||
$(this).parent().addClass("sub-menu-open");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
$(this).parents("ul.itens").toggleClass("has-sub-menu-open");
|
closeSubMenu(event) {
|
||||||
});
|
const button = $(event.target);
|
||||||
|
|
||||||
$(".m3-dropdown .btn-voltar").on("click", function () {
|
button.parents(".submenu").removeClass("is-open");
|
||||||
$(this).parents(".m3-dropdown").removeClass("sub-menu-open");
|
|
||||||
$(this).parents("ul.itens").removeClass("has-sub-menu-open");
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
16
src/arquivos/js/app/partials/Shelf.js
Normal file
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 {
|
export default {
|
||||||
home: {
|
home: {
|
||||||
bannerDesktop: {
|
desktopMainBanners: {
|
||||||
dots: true,
|
dots: true,
|
||||||
arrows: false,
|
arrows: true,
|
||||||
pauseOnHover: false,
|
pauseOnHover: true,
|
||||||
autoplay: true,
|
autoplay: true,
|
||||||
autoplaySpeed: 6000,
|
autoplaySpeed: 5000,
|
||||||
},
|
},
|
||||||
bannerMobile: {
|
|
||||||
|
mobileMainBanners: {
|
||||||
dots: true,
|
dots: true,
|
||||||
arrows: false,
|
arrows: true,
|
||||||
pauseOnHover: false,
|
|
||||||
autoplay: true,
|
autoplay: true,
|
||||||
autoplaySpeed: 6000,
|
autoplaySpeed: 5000,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
general: {
|
general: {
|
||||||
@ -59,7 +59,7 @@ export default {
|
|||||||
productShelf: {
|
productShelf: {
|
||||||
defaultShelf: {
|
defaultShelf: {
|
||||||
lazyLoad: "ondemand",
|
lazyLoad: "ondemand",
|
||||||
dots: true,
|
dots: false,
|
||||||
arrows: true,
|
arrows: true,
|
||||||
infinite: true,
|
infinite: true,
|
||||||
slidesToShow: 4,
|
slidesToShow: 4,
|
||||||
@ -69,17 +69,13 @@ export default {
|
|||||||
{
|
{
|
||||||
breakpoint: 1200,
|
breakpoint: 1200,
|
||||||
settings: {
|
settings: {
|
||||||
lazyLoad: "ondemand",
|
|
||||||
slidesToShow: 3,
|
slidesToShow: 3,
|
||||||
slidesToScroll: 3,
|
slidesToScroll: 3,
|
||||||
infinite: true,
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
breakpoint: 800,
|
breakpoint: 800,
|
||||||
settings: {
|
settings: {
|
||||||
arrows: true,
|
|
||||||
lazyLoad: "ondemand",
|
|
||||||
slidesToShow: 2,
|
slidesToShow: 2,
|
||||||
slidesToScroll: 2,
|
slidesToScroll: 2,
|
||||||
},
|
},
|
||||||
@ -87,9 +83,8 @@ export default {
|
|||||||
{
|
{
|
||||||
breakpoint: 576,
|
breakpoint: 576,
|
||||||
settings: {
|
settings: {
|
||||||
arrows: false,
|
slidesToShow: 1,
|
||||||
slidesToShow: 2,
|
slidesToScroll: 1,
|
||||||
slidesToScroll: 2,
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|||||||
@ -14,8 +14,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cart-items thead tr {
|
.cart-items thead tr {
|
||||||
border-bottom: 1px solid $color-gray6;
|
border-bottom: 1px solid #e5e5e5;
|
||||||
color: $color-black2;
|
color: #142032;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
|
|
||||||
th {
|
th {
|
||||||
@ -53,7 +53,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.product-name {
|
&.product-name {
|
||||||
color: $color-black2;
|
color: #142032;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
|
||||||
@media (max-width: 490px) {
|
@media (max-width: 490px) {
|
||||||
@ -96,7 +96,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.icon-question-sign {
|
.icon-question-sign {
|
||||||
color: $color-black2;
|
color: #142032;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -108,7 +108,7 @@
|
|||||||
|
|
||||||
input {
|
input {
|
||||||
&[id^="item-quantity"] {
|
&[id^="item-quantity"] {
|
||||||
border: 1px solid $color-black2;
|
border: 1px solid #142032;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
color: #000;
|
color: #000;
|
||||||
@ -127,7 +127,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.item-quantity-change {
|
.item-quantity-change {
|
||||||
background-color: $color-pink;
|
background-color: #f71963;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -177,33 +177,33 @@
|
|||||||
|
|
||||||
#shipping-preview-container {
|
#shipping-preview-container {
|
||||||
.srp-main-title {
|
.srp-main-title {
|
||||||
color: $color-black2;
|
color: #142032;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.srp-description {
|
.srp-description {
|
||||||
color: $color-black2;
|
color: #142032;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#shipping-calculate-link,
|
#shipping-calculate-link,
|
||||||
#cart-shipping-calculate {
|
#cart-shipping-calculate {
|
||||||
background-color: $color-gray;
|
background-color: hsla(0, 0%, 90%, 1);
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border: none;
|
border: none;
|
||||||
color: $color-black2;
|
color: #142032;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
outline: none;
|
outline: none;
|
||||||
padding: 8px 10px;
|
padding: 8px 10px;
|
||||||
transition: all 0.15s ease-in-out;
|
transition: all 0.15s ease-in-out;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: lighten($color-gray, 5);
|
background-color: lighten(hsla(0, 0%, 90%, 1), 5);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: darken($color-gray, 5);
|
background-color: darken(hsla(0, 0%, 90%, 1), 5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -212,7 +212,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ship-postalCode a {
|
.ship-postalCode a {
|
||||||
color: $color-pink;
|
color: #f71963;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -234,8 +234,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
> div {
|
> div {
|
||||||
background-color: $color-white2;
|
background-color: #f5f5f5;
|
||||||
color: $color-black2;
|
color: #142032;
|
||||||
display: block !important;
|
display: block !important;
|
||||||
padding: 24px 15%;
|
padding: 24px 15%;
|
||||||
|
|
||||||
@ -252,7 +252,7 @@
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
||||||
label {
|
label {
|
||||||
color: $color-gray5;
|
color: #6d6e70;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -271,7 +271,7 @@
|
|||||||
|
|
||||||
#cart-coupon-add {
|
#cart-coupon-add {
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-color: $color-black2;
|
background-color: #142032;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border: none;
|
border: none;
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
@ -281,11 +281,11 @@
|
|||||||
transition: all 0.15s ease-in-out;
|
transition: all 0.15s ease-in-out;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: lighten($color-black2, 5);
|
background-color: lighten(#142032, 5);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: darken($color-black2, 5);
|
background-color: darken(#142032, 5);
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
@ -299,7 +299,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.accordion-group {
|
.accordion-group {
|
||||||
border: 1px solid $color-white2;
|
border: 1px solid #f5f5f5;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
color: #000;
|
color: #000;
|
||||||
|
|
||||||
@ -312,7 +312,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
tfoot {
|
tfoot {
|
||||||
background-color: $color-white2;
|
background-color: #f5f5f5;
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
@ -359,7 +359,7 @@
|
|||||||
|
|
||||||
#cart-choose-more-products {
|
#cart-choose-more-products {
|
||||||
bottom: -26px;
|
bottom: -26px;
|
||||||
color: $color-black4;
|
color: #151728;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
left: 0;
|
left: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -368,7 +368,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#cart-to-orderform {
|
#cart-to-orderform {
|
||||||
background-color: $color-green;
|
background-color: #2fab61;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
.container-order-form {
|
.container-order-form {
|
||||||
#orderform-to-cart {
|
#orderform-to-cart {
|
||||||
color: $color-pink;
|
color: #f71963;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -10,7 +10,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#btn-client-pre-email {
|
#btn-client-pre-email {
|
||||||
background-color: $color-pink;
|
background-color: #f71963;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
@ -24,11 +24,11 @@
|
|||||||
top: 0;
|
top: 0;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: lighten($color-pink, 5);
|
background-color: lighten(#f71963, 5);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: darken($color-pink, 5);
|
background-color: darken(#f71963, 5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -17,7 +17,7 @@
|
|||||||
|
|
||||||
.accordion-group {
|
.accordion-group {
|
||||||
.accordion-toggle .link-box-edit {
|
.accordion-toggle .link-box-edit {
|
||||||
color: $color-pink;
|
color: #f71963;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text input,
|
.text input,
|
||||||
@ -55,15 +55,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.vtex-omnishipping-1-x-summaryChange {
|
.vtex-omnishipping-1-x-summaryChange {
|
||||||
border-color: $color-pink;
|
border-color: #f71963;
|
||||||
color: $color-pink;
|
color: #f71963;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.accordion-group button.submit,
|
.accordion-group button.submit,
|
||||||
.payment-confirmation-wrap button.submit {
|
.payment-confirmation-wrap button.submit {
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-color: $color-green;
|
background-color: #2fab61;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@ -73,17 +73,17 @@
|
|||||||
transition: all 0.15s ease-in-out;
|
transition: all 0.15s ease-in-out;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: lighten($color-green, 5);
|
background-color: lighten(#2fab61, 5);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: darken($color-green, 5);
|
background-color: darken(#2fab61, 5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cart-fixed {
|
.cart-fixed {
|
||||||
#orderform-minicart-to-cart {
|
#orderform-minicart-to-cart {
|
||||||
color: $color-black4;
|
color: #151728;
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
@ -95,7 +95,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
tfoot td {
|
tfoot td {
|
||||||
color: $color-black3;
|
color: #19273d;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
.empty-cart-title {
|
.empty-cart-title {
|
||||||
color: $color-black2;
|
color: #142032;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
line-height: 29px;
|
line-height: 29px;
|
||||||
}
|
}
|
||||||
@ -14,7 +14,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#cart-choose-products {
|
#cart-choose-products {
|
||||||
background-color: $color-black2;
|
background-color: #142032;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border: none;
|
border: none;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
@ -26,11 +26,11 @@
|
|||||||
transition: all 0.15s ease-in-out;
|
transition: all 0.15s ease-in-out;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: lighten($color-black2, 5);
|
background-color: lighten(#142032, 5);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: darken($color-black2, 5);
|
background-color: darken(#142032, 5);
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
|
|||||||
@ -60,7 +60,7 @@
|
|||||||
|
|
||||||
a {
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
color: $color-pink;
|
color: #f71963;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
||||||
|
|||||||
@ -1,10 +1,53 @@
|
|||||||
.mini-cart {
|
.minicart {
|
||||||
|
position: relative;
|
||||||
|
&__button {
|
||||||
|
position: relative;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
outline: 0;
|
||||||
|
background: transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.portal-totalizers-ref {
|
||||||
|
.title,
|
||||||
|
.amount-products,
|
||||||
|
.amount-items strong,
|
||||||
|
.amount-kits,
|
||||||
|
.total-cart {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-info {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-items-em {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 4px;
|
||||||
|
right: -4px;
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
border-radius: 50%;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 9px;
|
||||||
|
line-height: 11px;
|
||||||
|
color: $color-white;
|
||||||
|
background: $color-blue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__drawer {
|
||||||
height: 475px;
|
height: 475px;
|
||||||
max-height: 200px;
|
max-height: 200px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
top: 50px;
|
top: 80px;
|
||||||
transition: all 0.3s ease-in-out;
|
transition: all 0.3s ease-in-out;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
width: 375px;
|
width: 375px;
|
||||||
@ -18,6 +61,7 @@
|
|||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.show-mini-cart {
|
.show-mini-cart {
|
||||||
max-height: 1000px;
|
max-height: 1000px;
|
||||||
@ -51,8 +95,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.mini-cart-header {
|
.mini-cart-header {
|
||||||
border-bottom: 1px solid $color-gray;
|
border-bottom: 1px solid hsla(0, 0%, 90%, 1);
|
||||||
color: $color-black2;
|
color: #142032;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
padding: 20px 15px 16px;
|
padding: 20px 15px 16px;
|
||||||
@ -75,7 +119,7 @@
|
|||||||
|
|
||||||
&::before,
|
&::before,
|
||||||
&::after {
|
&::after {
|
||||||
background-color: lighten($color-black2, 10);
|
background-color: lighten(#142032, 10);
|
||||||
content: "";
|
content: "";
|
||||||
height: 2px;
|
height: 2px;
|
||||||
left: 0.5px;
|
left: 0.5px;
|
||||||
@ -97,7 +141,7 @@
|
|||||||
&:active {
|
&:active {
|
||||||
&:before,
|
&:before,
|
||||||
&:after {
|
&:after {
|
||||||
background-color: $color-black2;
|
background-color: #142032;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -120,17 +164,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar-track {
|
&::-webkit-scrollbar-track {
|
||||||
background-color: $color-gray;
|
background-color: hsla(0, 0%, 90%, 1);
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
background-color: $color-gray3;
|
background-color: hsl(0, 0%, 77%);
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb:hover {
|
&::-webkit-scrollbar-thumb:hover {
|
||||||
background-color: darken($color-gray3, 10);
|
background-color: darken(hsl(0, 0%, 77%), 10);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -155,7 +199,7 @@
|
|||||||
right: 0;
|
right: 0;
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
border: 5px solid $color-white;
|
border: 5px solid $color-white;
|
||||||
border-top-color: $color-pink;
|
border-top-color: #f71963;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
@ -172,7 +216,7 @@
|
|||||||
|
|
||||||
li {
|
li {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
border-bottom: 1px solid $color-gray;
|
border-bottom: 1px solid hsla(0, 0%, 90%, 1);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 12px 0;
|
padding: 12px 0;
|
||||||
@ -215,7 +259,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.product-info {
|
.product-info {
|
||||||
color: $color-black2;
|
color: #142032;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
padding-left: 8px;
|
padding-left: 8px;
|
||||||
@ -250,7 +294,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
background-color: $color-pink;
|
background-color: #f71963;
|
||||||
color: $color-white;
|
color: $color-white;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
@ -261,16 +305,16 @@
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: lighten($color-pink, 5);
|
background-color: lighten(#f71963, 5);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: darken($color-pink, 10);
|
background-color: darken(#f71963, 10);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.value {
|
.value {
|
||||||
border: 1px solid $color-black2;
|
border: 1px solid #142032;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
margin: 0 -3px;
|
margin: 0 -3px;
|
||||||
@ -302,17 +346,17 @@
|
|||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active {
|
&:active {
|
||||||
border-color: darken($color-black2, 15);
|
border-color: darken(#142032, 15);
|
||||||
|
|
||||||
&:after,
|
&:after,
|
||||||
&:before {
|
&:before {
|
||||||
border-color: darken($color-black2, 15);
|
border-color: darken(#142032, 15);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:after,
|
&:after,
|
||||||
&:before {
|
&:before {
|
||||||
border-bottom: 1.25px solid $color-black2;
|
border-bottom: 1.25px solid #142032;
|
||||||
content: "";
|
content: "";
|
||||||
width: 16px;
|
width: 16px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -338,20 +382,20 @@
|
|||||||
.totals-container {
|
.totals-container {
|
||||||
display: none;
|
display: none;
|
||||||
background-color: $color-white;
|
background-color: $color-white;
|
||||||
border-top: 1px solid $color-gray;
|
border-top: 1px solid hsla(0, 0%, 90%, 1);
|
||||||
margin: 0 16px;
|
margin: 0 16px;
|
||||||
padding: 16px 0;
|
padding: 16px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.total {
|
.total {
|
||||||
color: $color-gray2;
|
color: hsla(220, 1%, 43%, 1);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 15px;
|
line-height: 15px;
|
||||||
letter-spacing: 3px;
|
letter-spacing: 3px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
||||||
strong {
|
strong {
|
||||||
color: $color-black2;
|
color: #142032;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
letter-spacing: 0;
|
letter-spacing: 0;
|
||||||
@ -363,7 +407,7 @@
|
|||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: $color-gray5;
|
color: #6d6e70;
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
padding: 17px 15px;
|
padding: 17px 15px;
|
||||||
@ -375,12 +419,12 @@
|
|||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active {
|
&:active {
|
||||||
color: darken($color-gray5, 15);
|
color: darken(#6d6e70, 15);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.finish-order {
|
.finish-order {
|
||||||
background-color: $color-green;
|
background-color: $color-black;
|
||||||
color: $color-white;
|
color: $color-white;
|
||||||
display: block;
|
display: block;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
@ -392,12 +436,18 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: lighten($color-green, 2.5);
|
background-color: lighten($color-black, 2.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: darken($color-green, 10);
|
background-color: darken($color-black, 10);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.have-item {
|
||||||
|
.totals-container {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,196 +1,118 @@
|
|||||||
/***************************************************************/
|
.footer-newsletter {
|
||||||
/**-- Newslettter --------------------------********************/
|
padding: 24px 15px;
|
||||||
/*-------------------------------------------------------------*/
|
background: linear-gradient(180deg, $color-blue 0%, $color-blue2 100%);
|
||||||
|
|
||||||
.captacao-emails-newsletter {
|
&__wrapper {
|
||||||
background-color: $color-pink;
|
@include mq(md, min) {
|
||||||
background-image: url("/arquivos/template-background-newsletter.png");
|
max-width: 698px;
|
||||||
margin-top: 104px;
|
margin: 0 auto;
|
||||||
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 {
|
&__title {
|
||||||
align-items: center;
|
margin: 0 0 10px;
|
||||||
}
|
font-size: 14px;
|
||||||
|
line-height: 17px;
|
||||||
> .row > div {
|
|
||||||
max-width: 960px;
|
|
||||||
margin: auto;
|
|
||||||
padding: 0 3.5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
color: $color-white;
|
color: $color-white;
|
||||||
font-size: 18px;
|
|
||||||
font-weight: normal;
|
|
||||||
line-height: 26px;
|
|
||||||
margin: 0 0 8px;
|
|
||||||
|
|
||||||
@include mq(md, max) {
|
@include mq(lg, max) {
|
||||||
margin-bottom: 24px;
|
margin-bottom: 8px;
|
||||||
}
|
max-width: 224px;
|
||||||
|
|
||||||
span {
|
|
||||||
display: block;
|
|
||||||
font-size: 26px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-size: 15px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.m3-custom-newsletter-form {
|
.m3-custom-newsletter-form {
|
||||||
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
@include mq(lg, max) {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mq(lg, min) {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
flex: 1;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
@include mq(lg, max) {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mq(lg, min) {
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-of-type {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.m3-cn-button-ok-container {
|
||||||
|
@include mq(lg, min) {
|
||||||
|
max-width: 126px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0;
|
|
||||||
margin-right: 16px;
|
|
||||||
max-width: 270px;
|
|
||||||
width: 36%;
|
|
||||||
|
|
||||||
@include mq(md, max) {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
max-width: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.m3-cn-button-ok-container {
|
|
||||||
max-width: 126px;
|
|
||||||
margin: 0;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
@include mq(md, max) {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
input {
|
||||||
border: none;
|
|
||||||
font-size: 14px;
|
|
||||||
outline: none;
|
|
||||||
padding: 9px 16px;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 41px;
|
||||||
@include mq(md, max) {
|
padding: 0 16px;
|
||||||
font-size: 24px;
|
border: 0;
|
||||||
padding: 18.5px 24px;
|
outline: 0;
|
||||||
}
|
font-size: 10px;
|
||||||
|
line-height: 12px;
|
||||||
|
background: $color-white;
|
||||||
|
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: $color-black2;
|
text-transform: uppercase;
|
||||||
|
color: $color-grey2;
|
||||||
}
|
}
|
||||||
|
|
||||||
&#m3-cn-button-ok {
|
&.m3-cn-button-ok {
|
||||||
background-color: $color-black2;
|
font-weight: 900;
|
||||||
color: $color-white;
|
color: $color-white;
|
||||||
|
background: $color-black;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-weight: 700;
|
|
||||||
font-size: 14px;
|
|
||||||
text-transform: lowercase;
|
|
||||||
transition: all 0.15s linear;
|
|
||||||
|
|
||||||
@include mq(md, max) {
|
@include mq(lg, max) {
|
||||||
font-size: 24px;
|
&:active {
|
||||||
margin-top: 8px;
|
background: lighten($color-black, 10);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@include mq(lg, min) {
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: lighten($color-black2, 5);
|
background: lighten($color-black, 10);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: darken($color-black2, 5);
|
background: $color-black;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.m3-cn-msg {
|
.m3-cn-msg {
|
||||||
|
position: absolute;
|
||||||
|
top: calc(100% + 8px);
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: fit-content;
|
||||||
|
line-height: 1;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.m3-cn-error {
|
.m3-cn-error {
|
||||||
background-color: $color-white;
|
color: $color-red;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 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,22 +5,24 @@
|
|||||||
|
|
||||||
@import "./utils/all";
|
@import "./utils/all";
|
||||||
|
|
||||||
@import "./pages/home";
|
@import "./partials/slider";
|
||||||
@import "./pages/categoria";
|
|
||||||
@import "./pages/produto";
|
|
||||||
@import "./pages/institucional";
|
|
||||||
@import "./pages/erro";
|
|
||||||
@import "./pages/login";
|
|
||||||
|
|
||||||
@import "./components/mini-cart";
|
|
||||||
@import "./components/newsletter";
|
|
||||||
@import "./components/instagram-gallery";
|
|
||||||
|
|
||||||
@import "./partials/header";
|
@import "./partials/header";
|
||||||
@import "./partials/menu";
|
@import "./partials/menu";
|
||||||
|
@import "./partials/search";
|
||||||
@import "./partials/barraDeVantagens";
|
@import "./partials/barraDeVantagens";
|
||||||
@import "./partials/footer";
|
@import "./partials/footer";
|
||||||
@import "./partials/breadcrumb";
|
@import "./partials/breadcrumb";
|
||||||
@import "./partials/prateleira";
|
@import "./partials/prateleira";
|
||||||
@import "./partials/ajustes";
|
@import "./partials/ajustes";
|
||||||
@import "./partials/flags";
|
@import "./partials/flags";
|
||||||
|
|
||||||
|
@import "./components/mini-cart";
|
||||||
|
@import "./components/newsletter";
|
||||||
|
@import "./components/instagram-gallery";
|
||||||
|
|
||||||
|
@import "./pages/home";
|
||||||
|
@import "./pages/categoria";
|
||||||
|
@import "./pages/produto";
|
||||||
|
@import "./pages/institucional";
|
||||||
|
@import "./pages/erro";
|
||||||
|
@import "./pages/login";
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
/*-------------------------------------------------------------*/
|
/*-------------------------------------------------------------*/
|
||||||
|
|
||||||
.categoria {
|
.categoria {
|
||||||
color: $color-black2;
|
color: #142032;
|
||||||
|
|
||||||
.bread-crumb {
|
.bread-crumb {
|
||||||
margin-bottom: 54px;
|
margin-bottom: 54px;
|
||||||
@ -38,7 +38,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.topo-filtros {
|
.topo-filtros {
|
||||||
border-bottom: 1px solid $color-gray;
|
border-bottom: 1px solid hsla(0, 0%, 90%, 1);
|
||||||
|
|
||||||
@include mq(md, max) {
|
@include mq(md, max) {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -72,7 +72,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
border-left: 1px solid $color-gray4;
|
border-left: 1px solid #eee;
|
||||||
content: "";
|
content: "";
|
||||||
display: block;
|
display: block;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
@ -88,7 +88,7 @@
|
|||||||
|
|
||||||
&::before,
|
&::before,
|
||||||
&::after {
|
&::after {
|
||||||
border: 1px solid $color-black2;
|
border: 1px solid #142032;
|
||||||
content: "";
|
content: "";
|
||||||
display: block;
|
display: block;
|
||||||
left: 0;
|
left: 0;
|
||||||
@ -109,7 +109,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $color-black2;
|
color: #142032;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navigation-tabs {
|
.navigation-tabs {
|
||||||
@ -151,11 +151,11 @@
|
|||||||
|
|
||||||
label {
|
label {
|
||||||
a {
|
a {
|
||||||
color: $color-black4;
|
color: #151728;
|
||||||
transition: ease-in 0.22s all;
|
transition: ease-in 0.22s all;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
text-shadow: 0px 0px 0.55px $color-black4;
|
text-shadow: 0px 0px 0.55px #151728;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -169,22 +169,22 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar-track {
|
&::-webkit-scrollbar-track {
|
||||||
background-color: $color-gray;
|
background-color: hsla(0, 0%, 90%, 1);
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
background-color: $color-gray3;
|
background-color: hsl(0, 0%, 77%);
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb:hover {
|
&::-webkit-scrollbar-thumb:hover {
|
||||||
background-color: darken($color-gray3, 10);
|
background-color: darken(hsl(0, 0%, 77%), 10);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
color: $color-black2;
|
color: #142032;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@ -208,10 +208,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
& ~ .sr_box {
|
& ~ .sr_box {
|
||||||
border: 1px solid $color-black2;
|
border: 1px solid #142032;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
content: " ";
|
content: " ";
|
||||||
color: $color-gray3;
|
color: hsl(0, 0%, 77%);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@ -247,13 +247,13 @@
|
|||||||
|
|
||||||
&:hover ~ .sr_box {
|
&:hover ~ .sr_box {
|
||||||
&::before {
|
&::before {
|
||||||
background-color: lighten($color-pink, 15);
|
background-color: lighten(#f71963, 15);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:checked ~ .sr_box {
|
&:checked ~ .sr_box {
|
||||||
&::before {
|
&::before {
|
||||||
background-color: $color-pink;
|
background-color: #f71963;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -272,7 +272,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.aply-filter-btn {
|
.aply-filter-btn {
|
||||||
background-color: $color-gray4;
|
background-color: #eee;
|
||||||
border: none;
|
border: none;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@ -289,7 +289,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: darken($color-gray4, 5);
|
background-color: darken(#eee, 5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -334,7 +334,7 @@
|
|||||||
.opcoes-resultado {
|
.opcoes-resultado {
|
||||||
@include mq(md, max) {
|
@include mq(md, max) {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border: 1px solid $color-gray;
|
border: 1px solid hsla(0, 0%, 90%, 1);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: left;
|
justify-content: left;
|
||||||
}
|
}
|
||||||
@ -343,7 +343,7 @@
|
|||||||
#open-filter-button {
|
#open-filter-button {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
border-right: 1px solid $color-gray;
|
border-right: 1px solid hsla(0, 0%, 90%, 1);
|
||||||
color: $color-black;
|
color: $color-black;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: none;
|
display: none;
|
||||||
@ -407,7 +407,7 @@
|
|||||||
select {
|
select {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: $color-gray2;
|
color: hsla(220, 1%, 43%, 1);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
outline: none;
|
outline: none;
|
||||||
@ -442,7 +442,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.clear-filter-btn {
|
.clear-filter-btn {
|
||||||
background-color: $color-black2;
|
background-color: #142032;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
color: $color-white;
|
color: $color-white;
|
||||||
@ -552,7 +552,7 @@
|
|||||||
font-size: 0;
|
font-size: 0;
|
||||||
text-indent: -99999px;
|
text-indent: -99999px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
color: $color-gray2;
|
color: hsla(220, 1%, 43%, 1);
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
@include pseudo(block, relative, "\00BB");
|
@include pseudo(block, relative, "\00BB");
|
||||||
@ -562,7 +562,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.desativo a {
|
&.desativo a {
|
||||||
color: $color-gray3;
|
color: hsl(0, 0%, 77%);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
width: 0;
|
width: 0;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@ -585,11 +585,11 @@
|
|||||||
padding: 4px 12px;
|
padding: 4px 12px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
display: block;
|
display: block;
|
||||||
border: 1px solid $color-gray6;
|
border: 1px solid #e5e5e5;
|
||||||
|
|
||||||
@include mq(md, min) {
|
@include mq(md, min) {
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $color-gray6;
|
background-color: #e5e5e5;
|
||||||
color: darken($color-black, 15);
|
color: darken($color-black, 15);
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
@ -613,7 +613,7 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
button {
|
button {
|
||||||
background-color: $color-black2;
|
background-color: #142032;
|
||||||
border: none;
|
border: none;
|
||||||
color: $color-white;
|
color: $color-white;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
.pagina-erro {
|
.pagina-erro {
|
||||||
color: $color-black2;
|
color: #142032;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
display: block;
|
display: block;
|
||||||
min-height: 40%;
|
min-height: 40%;
|
||||||
@ -43,7 +43,7 @@
|
|||||||
|
|
||||||
a.voltar-para-home {
|
a.voltar-para-home {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: $color-black2;
|
background: #142032;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
margin: 1em auto 3em;
|
margin: 1em auto 3em;
|
||||||
@ -52,11 +52,11 @@
|
|||||||
transition: all 0.15s ease-in-out;
|
transition: all 0.15s ease-in-out;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: lighten($color-black2, 5);
|
background-color: lighten(#142032, 5);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: darken($color-black2, 5);
|
background-color: darken(#142032, 5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,178 +1,134 @@
|
|||||||
/***************************************************************/
|
|
||||||
/**-- Home ---------------------------------********************/
|
|
||||||
/*-------------------------------------------------------------*/
|
|
||||||
|
|
||||||
.home {
|
.home {
|
||||||
.main-gallery {
|
.main-banners {
|
||||||
> div {
|
margin-bottom: 38px;
|
||||||
&:not(.slick-initialized) {
|
|
||||||
.box-banner {
|
|
||||||
&:not(:first-child) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.desktop {
|
|
||||||
@include mq(md, max) {
|
@include mq(md, max) {
|
||||||
display: none;
|
margin-bottom: 32px;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.mobile {
|
|
||||||
@include mq(md, min) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slick-next,
|
&__desktop {
|
||||||
.slick-prev {
|
@include mq(md, max) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__mobile {
|
||||||
|
@include mq(md, min) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-arrow {
|
||||||
@extend .sprite;
|
@extend .sprite;
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
@include mq(md, max) {
|
||||||
cursor: pointer;
|
transform: translateY(-50%) scale(0.7);
|
||||||
font-size: 0;
|
}
|
||||||
outline: none;
|
}
|
||||||
padding: 0;
|
|
||||||
position: absolute;
|
.slick-prev {
|
||||||
top: 40%;
|
left: 24px;
|
||||||
transform: scale(0.7);
|
|
||||||
z-index: 1;
|
@extend .sprite-left-white-arrow-icon;
|
||||||
|
|
||||||
|
@include mq(md, max) {
|
||||||
|
left: 16px;
|
||||||
|
transform-origin: left;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.slick-next {
|
.slick-next {
|
||||||
@extend .sprite;
|
right: 24px;
|
||||||
@extend .sprite-circled-arrow-right;
|
|
||||||
left: auto;
|
|
||||||
right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slick-prev {
|
@extend .sprite-right-white-arrow-icon;
|
||||||
@extend .sprite;
|
|
||||||
@extend .sprite-circled-arrow-left;
|
@include mq(md, max) {
|
||||||
right: auto;
|
right: 16px;
|
||||||
left: 8px;
|
transform-origin: right;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.slick-dots {
|
.slick-dots {
|
||||||
bottom: 20px;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
pointer-events: none;
|
left: 0;
|
||||||
text-align: center;
|
bottom: 14px;
|
||||||
|
z-index: map-get($z-index, Level-1);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
&,
|
@include mq(md, max) {
|
||||||
|
bottom: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
|
&.slick-active {
|
||||||
|
button {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
border: 1px solid $color-white;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.advantages {
|
||||||
|
margin-bottom: 117px;
|
||||||
|
@include mq(md, max) {
|
||||||
|
margin-bottom: 89px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__list {
|
||||||
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex !important;
|
margin: 0;
|
||||||
|
padding: 0 15px;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
@include mq(sm, min) {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
&::-webkit-scrollbar {
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner {
|
|
||||||
&.desktop {
|
|
||||||
@include mq(md, max) {
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.mobile {
|
&__item {
|
||||||
@include mq(md, min) {
|
display: flex;
|
||||||
display: none;
|
align-items: center;
|
||||||
}
|
margin-right: 75px;
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mosaico-home,
|
|
||||||
.mosaico-home-footer {
|
|
||||||
@include mq(md, max) {
|
@include mq(md, max) {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include mq_range(md, xl) {
|
&:last-of-type {
|
||||||
max-width: 100%;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row {
|
i {
|
||||||
@include mq(md, max) {
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
white-space: nowrap;
|
||||||
}
|
font-size: 10px;
|
||||||
}
|
line-height: 12px;
|
||||||
|
|
||||||
.mosaico-home {
|
|
||||||
> .row {
|
|
||||||
@include mq(md, min) {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.banner {
|
.shelf {
|
||||||
padding: 0 0 40px;
|
margin-bottom: 172px;
|
||||||
|
|
||||||
@include mq(md, min) {
|
@include mq(md, max) {
|
||||||
padding: 0 10px;
|
margin-bottom: 80px;
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
/*-------------------------------------------------------------*/
|
/*-------------------------------------------------------------*/
|
||||||
|
|
||||||
.institucional {
|
.institucional {
|
||||||
color: $color-black2;
|
color: #142032;
|
||||||
|
|
||||||
.breadcrumb {
|
.breadcrumb {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@ -15,8 +15,8 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
border-right: 1px solid $color-black2;
|
border-right: 1px solid #142032;
|
||||||
color: $color-black2;
|
color: #142032;
|
||||||
margin-right: 7px;
|
margin-right: 7px;
|
||||||
padding: 0px 9px 0px 0;
|
padding: 0px 9px 0px 0;
|
||||||
}
|
}
|
||||||
@ -48,26 +48,26 @@
|
|||||||
padding: 4px 2px;
|
padding: 4px 2px;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
border: 1px solid $color-black2;
|
border: 1px solid #142032;
|
||||||
border-radius: 31px;
|
border-radius: 31px;
|
||||||
color: $color-pink;
|
color: #f71963;
|
||||||
display: block;
|
display: block;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
transition: all 0.15s ease-in-out;
|
transition: all 0.15s ease-in-out;
|
||||||
|
|
||||||
&.ativo {
|
&.ativo {
|
||||||
background-color: $color-black2;
|
background-color: #142032;
|
||||||
color: $color-white;
|
color: $color-white;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: lighten($color-black2, 5);
|
background-color: lighten(#142032, 5);
|
||||||
color: $color-white;
|
color: $color-white;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: darken($color-black2, 10);
|
background-color: darken(#142032, 10);
|
||||||
color: $color-white;
|
color: $color-white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -22,9 +22,9 @@
|
|||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-color: $color-white2;
|
background-color: #f5f5f5;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border: 1px solid $color-gray6;
|
border: 1px solid #e5e5e5;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
outline: none;
|
outline: none;
|
||||||
@ -33,25 +33,25 @@
|
|||||||
transition: all 0.15s ease-in-out;
|
transition: all 0.15s ease-in-out;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: lighten($color-white2, 5);
|
background-color: lighten(#f5f5f5, 5);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: darken($color-white2, 5);
|
background-color: darken(#f5f5f5, 5);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.btn-success {
|
&.btn-success {
|
||||||
background-color: $color-pink;
|
background-color: #f71963;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
height: auto;
|
height: auto;
|
||||||
padding: 14px 24px;
|
padding: 14px 24px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: lighten($color-pink, 5);
|
background-color: lighten(#f71963, 5);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: darken($color-pink, 5);
|
background-color: darken(#f71963, 5);
|
||||||
}
|
}
|
||||||
|
|
||||||
i {
|
i {
|
||||||
@ -72,7 +72,7 @@
|
|||||||
h4 {
|
h4 {
|
||||||
&::before {
|
&::before {
|
||||||
content: "Entrar";
|
content: "Entrar";
|
||||||
color: $color-black2;
|
color: #142032;
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|||||||
@ -99,7 +99,7 @@
|
|||||||
&:hover,
|
&:hover,
|
||||||
&:active {
|
&:active {
|
||||||
@include mq(md, min) {
|
@include mq(md, min) {
|
||||||
border: 1px solid $color-pink;
|
border: 1px solid #f71963;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -158,7 +158,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
background-color: $color-black2;
|
background-color: #142032;
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
@ -171,7 +171,7 @@
|
|||||||
|
|
||||||
.slick-active {
|
.slick-active {
|
||||||
button {
|
button {
|
||||||
background-color: $color-pink;
|
background-color: #f71963;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
}
|
}
|
||||||
@ -196,7 +196,7 @@
|
|||||||
|
|
||||||
.product-reference {
|
.product-reference {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: $color-gray2;
|
color: hsla(220, 1%, 43%, 1);
|
||||||
|
|
||||||
.productReference {
|
.productReference {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -204,11 +204,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.moduloPreco {
|
.moduloPreco {
|
||||||
color: $color-black2;
|
color: #142032;
|
||||||
margin: 30px 0;
|
margin: 30px 0;
|
||||||
|
|
||||||
.valor-de {
|
.valor-de {
|
||||||
color: $color-gray2;
|
color: hsla(220, 1%, 43%, 1);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
text-decoration: line-through;
|
text-decoration: line-through;
|
||||||
@ -223,7 +223,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.valor-por {
|
.valor-por {
|
||||||
color: $color-black2;
|
color: #142032;
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
||||||
@ -233,7 +233,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.valor-dividido {
|
.valor-dividido {
|
||||||
color: $color-gray5;
|
color: #6d6e70;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
||||||
.numero-de-parcelas {
|
.numero-de-parcelas {
|
||||||
@ -262,14 +262,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
border-top: 1px solid $color-gray3;
|
border-top: 1px solid hsl(0, 0%, 77%);
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
border-bottom: 1px solid $color-gray3;
|
border-bottom: 1px solid hsl(0, 0%, 77%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.value {
|
.value {
|
||||||
@ -282,8 +282,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.container-percentual {
|
.container-percentual {
|
||||||
border: 1px dotted $color-green;
|
border: 1px dotted #2fab61;
|
||||||
color: $color-green;
|
color: #2fab61;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
padding: 4px 9px;
|
padding: 4px 9px;
|
||||||
}
|
}
|
||||||
@ -291,7 +291,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.moduloAviseMe {
|
.moduloAviseMe {
|
||||||
border-bottom: 1px solid $color-gray;
|
border-bottom: 1px solid hsla(0, 0%, 90%, 1);
|
||||||
padding-bottom: 15px;
|
padding-bottom: 15px;
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
|
|
||||||
@ -305,7 +305,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
border: 1px solid $color-gray;
|
border: 1px solid hsla(0, 0%, 90%, 1);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
@ -317,7 +317,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&#enviar-avise-me {
|
&#enviar-avise-me {
|
||||||
background-color: $color-black3;
|
background-color: #19273d;
|
||||||
border: none;
|
border: none;
|
||||||
color: $color-white;
|
color: $color-white;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -335,7 +335,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: $color-black2;
|
background-color: #142032;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -346,11 +346,11 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
&.msgSucesso {
|
&.msgSucesso {
|
||||||
color: $color-green;
|
color: #2fab61;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.msgErro {
|
&.msgErro {
|
||||||
color: $color-pink;
|
color: #f71963;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -369,7 +369,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
border: 1px solid $color-gray;
|
border: 1px solid hsla(0, 0%, 90%, 1);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
max-width: 72px;
|
max-width: 72px;
|
||||||
max-height: 96px;
|
max-height: 96px;
|
||||||
@ -382,7 +382,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border: 2px solid $color-gray3;
|
border: 2px solid hsl(0, 0%, 77%);
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
@ -408,7 +408,7 @@
|
|||||||
|
|
||||||
.moduloSkus {
|
.moduloSkus {
|
||||||
.titulo {
|
.titulo {
|
||||||
color: $color-gray5;
|
color: #6d6e70;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -450,7 +450,7 @@
|
|||||||
@include mq(lg) {
|
@include mq(lg) {
|
||||||
&:hover label,
|
&:hover label,
|
||||||
&:active label {
|
&:active label {
|
||||||
background-color: $color-gray3;
|
background-color: hsl(0, 0%, 77%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -460,16 +460,16 @@
|
|||||||
|
|
||||||
&:checked + label {
|
&:checked + label {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border: 1px solid $color-pink;
|
border: 1px solid #f71963;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: $color-gray;
|
background-color: hsla(0, 0%, 90%, 1);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
color: $color-black3;
|
color: #19273d;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@ -499,7 +499,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.titulo {
|
.titulo {
|
||||||
color: $color-gray5;
|
color: #6d6e70;
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
@ -525,7 +525,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
background-color: $color-pink;
|
background-color: #f71963;
|
||||||
color: $color-white;
|
color: $color-white;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@ -537,18 +537,18 @@
|
|||||||
|
|
||||||
@include mq(lg) {
|
@include mq(lg) {
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $color-pink;
|
background-color: #f71963;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: $color-pink;
|
background-color: #f71963;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.qtd-value {
|
.qtd-value {
|
||||||
border: 1px solid $color-black2;
|
border: 1px solid #142032;
|
||||||
color: $color-black3;
|
color: #19273d;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 34px;
|
width: 34px;
|
||||||
@ -574,20 +574,20 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
border-top: 1px solid $color-gray3;
|
border-top: 1px solid hsl(0, 0%, 77%);
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
padding-bottom: 6px;
|
padding-bottom: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
padding-top: 6px;
|
padding-top: 6px;
|
||||||
border-bottom: 1px solid $color-gray3;
|
border-bottom: 1px solid hsl(0, 0%, 77%);
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
color: $color-gray2;
|
color: hsla(220, 1%, 43%, 1);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
outline: none;
|
outline: none;
|
||||||
@ -607,12 +607,12 @@
|
|||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
||||||
.btn-compra {
|
.btn-compra {
|
||||||
background-color: $color-gray3;
|
background-color: hsl(0, 0%, 77%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-compra {
|
.btn-compra {
|
||||||
background-color: $color-green;
|
background-color: #2fab61;
|
||||||
color: $color-white;
|
color: $color-white;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: block;
|
display: block;
|
||||||
@ -632,25 +632,25 @@
|
|||||||
|
|
||||||
@include mq(lg) {
|
@include mq(lg) {
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $color-green2;
|
background-color: hsla(138, 66%, 41%, 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: $color-green3;
|
background-color: hsla(138, 50%, 41%, 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.erro-add-cart {
|
.erro-add-cart {
|
||||||
bottom: -55px;
|
bottom: -55px;
|
||||||
color: $color-pink;
|
color: #f71963;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.compra-segura {
|
.compra-segura {
|
||||||
color: $color-black3;
|
color: #19273d;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
max-width: 270px;
|
max-width: 270px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -687,20 +687,20 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
border-top: 1px solid $color-gray4;
|
border-top: 1px solid #eee;
|
||||||
margin-top: 25px;
|
margin-top: 25px;
|
||||||
padding-bottom: 16px;
|
padding-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
padding-top: 16px;
|
padding-top: 16px;
|
||||||
border-bottom: 1px solid $color-gray4;
|
border-bottom: 1px solid #eee;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
color: $color-black2;
|
color: #142032;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
outline: none;
|
outline: none;
|
||||||
@ -729,14 +729,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#descricao-completa {
|
#descricao-completa {
|
||||||
color: $color-black2;
|
color: #142032;
|
||||||
|
|
||||||
@include mq(md, max) {
|
@include mq(md, max) {
|
||||||
padding: 0 15px;
|
padding: 0 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
> div {
|
> div {
|
||||||
border-top: 1px solid $color-gray6;
|
border-top: 1px solid #e5e5e5;
|
||||||
margin-top: 48px;
|
margin-top: 48px;
|
||||||
|
|
||||||
@include mq(md, max) {
|
@include mq(md, max) {
|
||||||
@ -753,7 +753,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.descricao {
|
.descricao {
|
||||||
color: $color-gray5;
|
color: #6d6e70;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
max-width: 960px;
|
max-width: 960px;
|
||||||
@ -791,7 +791,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
button {
|
button {
|
||||||
background-color: $color-black3;
|
background-color: #19273d;
|
||||||
border: none;
|
border: none;
|
||||||
color: $color-white;
|
color: $color-white;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -810,7 +810,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: $color-black2;
|
background-color: #142032;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -820,7 +820,7 @@
|
|||||||
.popup-add-cart,
|
.popup-add-cart,
|
||||||
.modal-add-cart {
|
.modal-add-cart {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: $color-black2;
|
background-color: #142032;
|
||||||
bottom: 5%;
|
bottom: 5%;
|
||||||
box-shadow: 0px 4px 16px rgba(125, 87, 98, 0.12);
|
box-shadow: 0px 4px 16px rgba(125, 87, 98, 0.12);
|
||||||
border-radius: 100px;
|
border-radius: 100px;
|
||||||
@ -863,7 +863,7 @@
|
|||||||
button {
|
button {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
color: $color-pink;
|
color: #f71963;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
margin-left: 12px;
|
margin-left: 12px;
|
||||||
|
|||||||
@ -8,8 +8,8 @@ body.minhaConta {
|
|||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
border-bottom: 1px solid $color-gray;
|
border-bottom: 1px solid hsla(0, 0%, 90%, 1);
|
||||||
color: $color-black2;
|
color: #142032;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
margin-bottom: 28px;
|
margin-bottom: 28px;
|
||||||
padding: 24px 14px 16px;
|
padding: 24px 14px 16px;
|
||||||
|
|||||||
@ -20,7 +20,7 @@
|
|||||||
a:after {
|
a:after {
|
||||||
content: "Home";
|
content: "Home";
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
border-right: 1px solid $color-black2;
|
border-right: 1px solid #142032;
|
||||||
margin-right: -9px;
|
margin-right: -9px;
|
||||||
padding: 0px 9px 0px 0;
|
padding: 0px 9px 0px 0;
|
||||||
}
|
}
|
||||||
@ -34,8 +34,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
border-right: 1px solid $color-black2;
|
border-right: 1px solid #142032;
|
||||||
color: $color-black2;
|
color: #142032;
|
||||||
margin-right: 7px;
|
margin-right: 7px;
|
||||||
padding: 0px 9px 0px 0;
|
padding: 0px 9px 0px 0;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,43 +1,37 @@
|
|||||||
.flags-product {
|
.flags-product {
|
||||||
display: block;
|
|
||||||
pointer-events: none;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
padding: 8px;
|
||||||
z-index: 5;
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: map-get($z-index, Level-2);
|
||||||
|
|
||||||
p {
|
.flag {
|
||||||
background-repeat: no-repeat;
|
|
||||||
color: $color-white;
|
|
||||||
display: none;
|
display: none;
|
||||||
font-size: 11px;
|
text-transform: uppercase;
|
||||||
float: right;
|
margin: 0 0 8px;
|
||||||
font-weight: 700;
|
|
||||||
min-width: 54px;
|
min-width: 54px;
|
||||||
margin: 7px 100% 0 7px;
|
max-width: max-content;
|
||||||
overflow: hidden;
|
height: 20px;
|
||||||
padding: 2.5px 4px;
|
font-size: 10px;
|
||||||
text-indent: -9999px;
|
line-height: 12px;
|
||||||
|
|
||||||
|
&.novo,
|
||||||
&.produto-off {
|
&.produto-off {
|
||||||
background: $color-black2;
|
display: flex;
|
||||||
display: table;
|
align-items: center;
|
||||||
float: left;
|
justify-content: center;
|
||||||
text-indent: 0;
|
|
||||||
width: 50px;
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
content: "OFF";
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.novo {
|
&.novo {
|
||||||
background-color: $color-pink;
|
font-weight: bold;
|
||||||
border-radius: 5px;
|
color: $color-white;
|
||||||
display: table;
|
background: $color-blue;
|
||||||
float: left;
|
}
|
||||||
text-indent: 0;
|
|
||||||
text-transform: uppercase;
|
&.produto-off {
|
||||||
|
font-weight: 900;
|
||||||
|
color: $color-white;
|
||||||
|
background: $color-black;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,360 +1,156 @@
|
|||||||
/***************************************************************/
|
.footer-links {
|
||||||
/**-- Footer ------------------------------********************/
|
@include mq(md, min) {
|
||||||
/*-------------------------------------------------------------*/
|
padding: 29px 0 25px;
|
||||||
|
border: 1px solid $color-grey1;
|
||||||
|
}
|
||||||
|
|
||||||
.footer {
|
&__wrapper {
|
||||||
background-color: $color-black2;
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, max-content);
|
||||||
.institucional-info {
|
gap: 148px;
|
||||||
color: $color-white;
|
justify-content: center;
|
||||||
font-size: 14px;
|
|
||||||
margin: auto;
|
|
||||||
max-width: 950px;
|
|
||||||
padding: 0 15px 25px;
|
|
||||||
|
|
||||||
@include mq(md, max) {
|
@include mq(md, max) {
|
||||||
font-size: 16px;
|
grid-template-columns: 1fr;
|
||||||
padding-left: 0;
|
gap: 0;
|
||||||
padding-right: 0;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.titulo {
|
&__block {
|
||||||
font-size: 16px;
|
border-bottom: 1px solid $color-grey1;
|
||||||
margin: 27px 0 17px;
|
|
||||||
|
|
||||||
@include mq(md, max) {
|
@include mq(md, max) {
|
||||||
font-size: 22px;
|
padding: 24px 15px;
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
&__title {
|
||||||
margin: 0;
|
margin: 0 0 10px;
|
||||||
|
|
||||||
@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;
|
font-size: 12px;
|
||||||
@include mq(md, max) {
|
line-height: 15px;
|
||||||
border-bottom: 1px solid $color-black3;
|
|
||||||
padding: 10px 0 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@include mq(md, max) {
|
&__items-list {
|
||||||
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;
|
margin: 0;
|
||||||
span {
|
|
||||||
text-decoration: underline;
|
&--social-networks {
|
||||||
|
display: grid;
|
||||||
|
grid-auto-flow: column;
|
||||||
|
gap: 16px;
|
||||||
|
align-items: center;
|
||||||
|
grid-auto-columns: max-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
padding: 4px 0;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__link {
|
||||||
|
color: $color-black;
|
||||||
|
transition: color 0.2s linear;
|
||||||
|
|
||||||
|
@include mq(md, min) {
|
||||||
|
&:hover {
|
||||||
|
color: $color-blue;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.redes-sociais {
|
.footer-infos {
|
||||||
h3 {
|
&__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 $color-grey1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__payments,
|
||||||
|
&__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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__payments {
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
|
@include mq(md, max) {
|
||||||
|
border-bottom: 1px solid $color-grey1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__security {
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__divider {
|
||||||
|
width: 1px;
|
||||||
|
height: 51px;
|
||||||
|
margin: 0 24px;
|
||||||
|
background: $color-grey1;
|
||||||
|
|
||||||
@include mq(md, max) {
|
@include mq(md, max) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
&__company {
|
||||||
@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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.selos {
|
|
||||||
border-top: 1px solid $color-black3;
|
|
||||||
padding: 5px 0;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
@include mq(md, min) {
|
|
||||||
border-bottom: 1px solid $color-black3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-12 {
|
|
||||||
@include mq(md, max) {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
display: inline-block;
|
|
||||||
@include mq(md, max) {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.pagamento {
|
|
||||||
padding-top: 10px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
|
|
||||||
@include mq(md, max) {
|
|
||||||
border-bottom: 1px solid $color-black3;
|
|
||||||
padding-bottom: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mq(md, min) {
|
|
||||||
border-right: 1px solid $color-gray;
|
|
||||||
margin-right: 20px;
|
|
||||||
padding-right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
&:not(:last-child) {
|
|
||||||
@include mq(md, min) {
|
|
||||||
padding-right: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.certificados {
|
|
||||||
li {
|
|
||||||
&:not(:last-child) {
|
|
||||||
padding-right: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.razao {
|
|
||||||
font-size: 10px;
|
|
||||||
max-width: 1500px;
|
|
||||||
margin: auto;
|
|
||||||
padding: 15px;
|
|
||||||
|
|
||||||
@include mq(md, max) {
|
|
||||||
padding-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
color: $color-gray2;
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
@include mq(md, max) {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
@include mq(md, max) {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $color-gray2;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cnpj {
|
|
||||||
@include mq(md, max) {
|
|
||||||
padding: 20px 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.desenvolvimento {
|
|
||||||
text-align: right;
|
|
||||||
|
|
||||||
@include mq(md, max) {
|
|
||||||
text-align: center;
|
|
||||||
padding: 20px 15px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:nth-child(2) {
|
|
||||||
@include mq(md, max) {
|
|
||||||
border-left: 1px solid $color-gray;
|
|
||||||
border-right: 1px solid $color-gray;
|
|
||||||
margin-right: 20px;
|
|
||||||
margin-left: 20px;
|
|
||||||
padding-right: 15px;
|
|
||||||
padding-left: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-bottom-options {
|
|
||||||
background-color: $color-white;
|
|
||||||
border-top: 1px solid $color-gray;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
margin-bottom: -65px;
|
|
||||||
opacity: 0;
|
|
||||||
position: fixed;
|
|
||||||
right: 0;
|
|
||||||
transition: all 0.2s ease-in-out;
|
|
||||||
visibility: hidden;
|
|
||||||
z-index: 6;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
margin-bottom: 0;
|
|
||||||
opacity: 1;
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin: 0;
|
|
||||||
|
@include mq(md, min) {
|
||||||
|
padding: 12px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
|
||||||
display: inline-block;
|
|
||||||
width: 33%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.option {
|
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
display: block;
|
|
||||||
height: 66px;
|
|
||||||
outline: none;
|
|
||||||
padding: 10px;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
margin: auto;
|
|
||||||
|
|
||||||
@extend .sprite;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.show-search {
|
|
||||||
.option:before {
|
|
||||||
@extend .sprite;
|
|
||||||
@extend .sprite-lupa;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.show-carrinho {
|
|
||||||
li:not(.amount-items),
|
|
||||||
strong,
|
|
||||||
.title {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.AmountItemsInCart {
|
|
||||||
line-height: 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.portal-totalizers-ref {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: top;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.cartInfoWrapper {
|
|
||||||
@extend .sprite;
|
|
||||||
@extend .sprite-sacola;
|
|
||||||
|
|
||||||
@include mq(md, max) {
|
@include mq(md, max) {
|
||||||
margin-right: 5px;
|
flex-direction: column;
|
||||||
|
padding-bottom: 24px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.amount-items {
|
&__copyright {
|
||||||
background-color: $color-black2;
|
margin: 0 16px 0 0;
|
||||||
border-radius: 50%;
|
|
||||||
bottom: 2px;
|
|
||||||
color: $color-white;
|
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
line-height: 1.3;
|
line-height: 12px;
|
||||||
min-width: 19px;
|
color: $color-grey2;
|
||||||
text-align: center;
|
|
||||||
padding: 3px 4px;
|
|
||||||
position: absolute;
|
|
||||||
right: -8px;
|
|
||||||
|
|
||||||
@include mq(md, max) {
|
@include mq(md, max) {
|
||||||
right: -3px;
|
margin-right: 0;
|
||||||
}
|
text-align: center;
|
||||||
|
|
||||||
em {
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.show-menu {
|
&__development {
|
||||||
margin-top: -2px;
|
display: grid;
|
||||||
|
grid-auto-flow: column;
|
||||||
|
grid-auto-columns: max-content;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
.option:before {
|
&__developed-by {
|
||||||
@extend .sprite;
|
margin-right: 7px;
|
||||||
@extend .sprite-menu-bottom;
|
font-size: 10px;
|
||||||
}
|
line-height: 12px;
|
||||||
|
color: $color-grey2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,411 +1,94 @@
|
|||||||
/***************************************************************/
|
.page-header {
|
||||||
/**-- Header ------------------------------********************/
|
padding: 28px 0;
|
||||||
/*-------------------------------------------------------------*/
|
background: $color-black;
|
||||||
#ajaxBusy {
|
|
||||||
position: absolute;
|
@include mq(lg, max) {
|
||||||
|
padding: 18px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mq(lg, min) {
|
||||||
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
z-index: map-get($z-index, Level-5);
|
||||||
background: #fff;
|
|
||||||
z-index: 15;
|
|
||||||
padding: 0px 16px;
|
|
||||||
line-height: 0.1;
|
|
||||||
opacity: 0.75;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
@include pseudo(inline-block);
|
|
||||||
border: solid 1px;
|
|
||||||
padding: 4px;
|
|
||||||
line-height: 0;
|
|
||||||
position: absolute;
|
|
||||||
right: 2px;
|
|
||||||
top: 35%;
|
|
||||||
border-color: $color-pink3 $color-gray4 $color-gray4 $color-gray4;
|
|
||||||
animation: spin 0.5s linear infinite;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
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(md, max) {
|
|
||||||
position: absolute;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pink-bar {
|
&.is-fixed {
|
||||||
opacity: 0;
|
background: rgba($color-black, 0.9);
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.fixed-hide:not(.menu-mobile-open):not(.mini-cart-open):not(:hover) {
|
&__wrapper {
|
||||||
top: -130px;
|
display: grid;
|
||||||
opacity: 0;
|
grid-template-columns: 2fr 1fr 2fr;
|
||||||
visibility: hidden;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pink-bar {
|
|
||||||
background-color: $color-pink;
|
|
||||||
opacity: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: all 0.2s ease-in-out;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
margin: 6px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
&:not(:last-child) {
|
|
||||||
margin-right: 8px;
|
|
||||||
padding-right: 8px;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
border-right: 1px solid $color-white;
|
|
||||||
content: "";
|
|
||||||
height: 9px;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 23%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $color-white;
|
|
||||||
font-size: 12px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
|
|
||||||
i {
|
|
||||||
vertical-align: sub;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.row {
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
|
@include mq(lg, max) {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.principal {
|
&__logo {
|
||||||
border-bottom: 1px solid $color-gray;
|
display: block;
|
||||||
padding: 20px 0;
|
margin: 0 auto;
|
||||||
position: relative;
|
|
||||||
|
|
||||||
@include mq(md, max) {
|
@include mq(lg, max) {
|
||||||
padding-bottom: 0;
|
max-width: 66px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> .container {
|
.user-items {
|
||||||
@include mq(md, max) {
|
display: flex;
|
||||||
max-width: 100%;
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
|
||||||
|
&__search-box {
|
||||||
|
flex: 1;
|
||||||
|
max-width: 212px;
|
||||||
|
|
||||||
|
@include mq(lg, max) {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include mq_range(md, xl) {
|
.busca {
|
||||||
max-width: 98%;
|
padding: 8px 0;
|
||||||
|
border-bottom: 1px solid $color-white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__account-link {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
width: 1px;
|
||||||
|
height: 19px;
|
||||||
|
margin: 0 24px;
|
||||||
|
background: $color-white;
|
||||||
|
|
||||||
|
@include mq(lg, max) {
|
||||||
|
margin: 0 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
@include mq(lg, max) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-mobile-abrir {
|
&__search-box {
|
||||||
|
margin-top: 18px;
|
||||||
|
border-top: 1px solid $color-grey;
|
||||||
|
|
||||||
@include mq(lg, min) {
|
@include mq(lg, min) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
|
||||||
border: none;
|
|
||||||
background-color: transparent;
|
|
||||||
cursor: pointer;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
text-align: center;
|
|
||||||
@include mq(md, max) {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: auto;
|
|
||||||
max-width: 100%;
|
|
||||||
|
|
||||||
@include mq(md, max) {
|
|
||||||
max-width: 100px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.busca-desktop {
|
|
||||||
@include mq(md, max) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.busca-mobile {
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
@include mq(md, min) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.busca {
|
.busca {
|
||||||
border-top: 1px solid $color-gray4;
|
padding: 13px 0;
|
||||||
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,296 @@
|
|||||||
/***************************************************************/
|
.menu {
|
||||||
/**-- Menu ------------------------------********************/
|
align-self: stretch;
|
||||||
/*-------------------------------------------------------------*/
|
|
||||||
|
|
||||||
.menu-principal {
|
&__button {
|
||||||
position: initial;
|
|
||||||
|
|
||||||
@include mq(lg, max) {
|
|
||||||
background-color: $color-white;
|
|
||||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
margin-left: -100%;
|
|
||||||
max-width: 375px;
|
|
||||||
overflow: hidden;
|
|
||||||
opacity: 0;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
position: fixed;
|
border: 0;
|
||||||
top: 0;
|
outline: 0;
|
||||||
transition: all 0.45s ease-in-out;
|
|
||||||
visibility: hidden;
|
|
||||||
width: 100%;
|
|
||||||
z-index: map-get($z-index, menu);
|
|
||||||
}
|
|
||||||
|
|
||||||
@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;
|
background: transparent;
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
display: inline-block;
|
|
||||||
right: 16px;
|
|
||||||
outline: none;
|
|
||||||
position: absolute;
|
|
||||||
top: 17px;
|
|
||||||
|
|
||||||
&::before {
|
@include mq(lg, min) {
|
||||||
border-left: 1px solid $color-gray4;
|
display: none;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.itens {
|
.menu-header {
|
||||||
font-size: 14px;
|
@include mq(lg, min) {
|
||||||
margin: 0;
|
display: none;
|
||||||
|
|
||||||
@include mq(lg, max) {
|
|
||||||
bottom: 64px;
|
|
||||||
left: 0;
|
|
||||||
overflow-y: auto;
|
|
||||||
overflow-x: hidden;
|
|
||||||
position: absolute;
|
|
||||||
top: 117px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
&__top-wrapper {
|
||||||
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;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 0 24px;
|
padding: 16px;
|
||||||
border-bottom: 1px solid $color-gray4;
|
|
||||||
|
|
||||||
a {
|
|
||||||
font-size: 16px;
|
|
||||||
padding: 17px 0px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&__text {
|
||||||
> a::after {
|
display: flex;
|
||||||
@include mq(lg, min) {
|
align-items: center;
|
||||||
border-bottom-color: $color-pink;
|
|
||||||
border-width: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:last-child) {
|
|
||||||
@include mq(lg, min) {
|
|
||||||
border-right: 1px solid $color-black;
|
|
||||||
margin-right: 24px;
|
|
||||||
padding-right: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mq_range(lg, xl) {
|
|
||||||
margin-right: 16px;
|
|
||||||
padding-right: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> a {
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
@include mq(lg, min) {
|
|
||||||
bottom: 0;
|
|
||||||
border-bottom: 1px solid transparent;
|
|
||||||
content: "";
|
|
||||||
left: 0;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
transition: all 0.15s ease-in-out;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ver-departamento {
|
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
display: inline-block;
|
|
||||||
text-indent: -9999px;
|
|
||||||
overflow: hidden;
|
|
||||||
font-size: 0;
|
|
||||||
outline: none;
|
|
||||||
opacity: 0.75;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
@include pseudo(block, relative);
|
|
||||||
@extend .sprite;
|
|
||||||
@extend .sprite-arrow-right-gray;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mq(lg, min) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $color-black2;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight {
|
|
||||||
color: $color-pink;
|
|
||||||
font-weight: 700;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
left: -20.5px;
|
|
||||||
position: absolute;
|
|
||||||
top: -2px;
|
|
||||||
@extend .sprite;
|
|
||||||
@extend .sprite-pinrinpinpin;
|
|
||||||
|
|
||||||
@include mq(lg, max) {
|
|
||||||
top: 13px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-menu-mobile {
|
|
||||||
background-color: $color-pink;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
padding: 17.5px 15px;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
@include mq(lg, min) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $color-white;
|
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
text-transform: uppercase;
|
line-height: 15px;
|
||||||
|
color: $color-grey3;
|
||||||
|
}
|
||||||
|
|
||||||
i {
|
i {
|
||||||
margin-right: 18px;
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__close-button {
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
outline: 0;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__search-box {
|
||||||
|
background: $color-black;
|
||||||
|
|
||||||
|
.busca {
|
||||||
|
padding: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.m3-dropdown {
|
.main-menu {
|
||||||
&:hover {
|
height: 100%;
|
||||||
.m3-dropdown-menu {
|
|
||||||
@include mq(lg, min) {
|
|
||||||
max-height: 1000px;
|
|
||||||
opacity: 1;
|
|
||||||
top: 100%;
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
@include mq(lg, max) {
|
||||||
visibility: visible;
|
display: flex;
|
||||||
}
|
flex-direction: column;
|
||||||
}
|
position: fixed;
|
||||||
}
|
top: 0;
|
||||||
|
|
||||||
.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;
|
left: 0;
|
||||||
right: 0;
|
width: 100%;
|
||||||
|
max-width: 375px;
|
||||||
|
height: 100%;
|
||||||
|
transform: translateX(-100%);
|
||||||
|
z-index: map-get($z-index, Level-5);
|
||||||
|
background: $color-white;
|
||||||
|
transition: transform 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-open {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__departments {
|
||||||
|
display: flex;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
@include mq(lg, max) {
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mq(lg, min) {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__department {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
@include mq(lg, max) {
|
||||||
|
border-bottom: 1px solid $color-grey1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mq(lg, min) {
|
||||||
|
margin-right: 40px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.main-menu__department-link {
|
||||||
|
font-weight: 700;
|
||||||
|
text-decoration: underline;
|
||||||
|
color: $color-blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submenu {
|
||||||
|
top: 100%;
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__department-link {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 15px;
|
||||||
|
color: $color-white;
|
||||||
|
|
||||||
|
@include mq(lg, max) {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
padding: 20px 16px;
|
||||||
|
color: $color-black;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mq(lg, min) {
|
||||||
|
&::after {
|
||||||
|
content: attr(tittle);
|
||||||
|
font-weight: bold;
|
||||||
|
height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
visibility: hidden;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
@include mq(lg, min) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__account-link {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 64px;
|
||||||
|
line-height: 12px;
|
||||||
|
font-size: 10px;
|
||||||
|
color: $color-white;
|
||||||
|
background: $color-black;
|
||||||
|
|
||||||
|
@include mq(lg, min) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.submenu {
|
||||||
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
@include mq(lg, max) {
|
@include mq(lg, max) {
|
||||||
border-bottom: 1px solid $color-gray4;
|
top: 0;
|
||||||
bottom: 64px;
|
left: 100%;
|
||||||
margin-left: 100%;
|
height: 100%;
|
||||||
max-height: initial;
|
overflow: auto;
|
||||||
overflow-y: auto;
|
padding-bottom: 34px;
|
||||||
top: 0px;
|
background: $color-white;
|
||||||
transition: all 0.4s ease-in-out, top 0s ease-in-out;
|
transition: left 0.2s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include mq(lg, min) {
|
@include mq(lg, min) {
|
||||||
background: rgba(255, 255, 255, 0.95);
|
top: 100%;
|
||||||
border-top: 1px solid $color-gray;
|
left: 0;
|
||||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.02);
|
top: calc(100% + 32px);
|
||||||
padding: 45px 0px 37px;
|
padding: 30px 0 43px;
|
||||||
top: 70%;
|
z-index: map-get($z-index, Level-4);
|
||||||
|
background: rgba($color-white, 0.95);
|
||||||
|
box-shadow: 0px 4px 4px rgba($color-black, 0.02);
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
transition: all 0.2s ease-in-out;
|
transition: all 0.2s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.is-open {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
bottom: 100%;
|
||||||
top: -44px;
|
display: block;
|
||||||
padding: 22px;
|
|
||||||
visibility: hidden;
|
|
||||||
|
|
||||||
@include mq(lg, max) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
width: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-track {
|
|
||||||
background-color: $color-gray;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb {
|
|
||||||
background-color: $color-gray3;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb:hover {
|
|
||||||
background-color: darken($color-gray3, 10);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-voltar {
|
|
||||||
border-bottom: 1px solid $color-gray4;
|
|
||||||
padding: 7px 24px;
|
|
||||||
|
|
||||||
@include mq(lg, min) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 700;
|
|
||||||
outline: none;
|
|
||||||
padding: 0;
|
|
||||||
text-transform: uppercase;
|
|
||||||
|
|
||||||
i {
|
|
||||||
transform: scale(0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: 4px;
|
|
||||||
padding-top: 3px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> div {
|
|
||||||
@include mq(lg, min) {
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.links-menu {
|
|
||||||
min-width: 38%;
|
|
||||||
|
|
||||||
@include mq(lg, max) {
|
|
||||||
padding: 0px 9px 36px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mq(lg, min) {
|
|
||||||
border-left: 1px solid $color-black;
|
|
||||||
padding-left: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-departamento {
|
|
||||||
@include mq(lg, max) {
|
|
||||||
padding-top: 36px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.elementos-menu {
|
|
||||||
max-width: 438px;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 28px;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
@include mq(lg, max) {
|
@include mq(lg, max) {
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__return-button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 34px;
|
||||||
|
padding: 16px;
|
||||||
|
border: 0;
|
||||||
|
border-bottom: 1px solid $color-grey;
|
||||||
|
outline: 0;
|
||||||
|
text-align: left;
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
@include mq(lg, min) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
i {
|
||||||
border-bottom: 5px solid $color-black4;
|
margin-right: 8px;
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
&:hover li {
|
|
||||||
opacity: 0.75;
|
|
||||||
}
|
|
||||||
|
|
||||||
li:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
&__title {
|
||||||
transition: all 0.1s ease-in-out;
|
margin: 0 0 8px;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 24px;
|
||||||
|
|
||||||
&:not(:last-child) {
|
@include mq(lg, max) {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 14px;
|
||||||
|
text-decoration-line: underline;
|
||||||
|
color: $color-blue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__categories-wrapper {
|
||||||
|
margin-bottom: 16px;
|
||||||
@include mq(lg, min) {
|
@include mq(lg, min) {
|
||||||
margin-bottom: 16px;
|
display: flex;
|
||||||
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include mq(lg, max) {
|
&__categories {
|
||||||
margin: 0;
|
margin-right: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.link-departamento {
|
&__category {
|
||||||
font-size: 24px;
|
padding: 8px 0;
|
||||||
font-weight: 700;
|
}
|
||||||
margin-bottom: 24px;
|
|
||||||
|
|
||||||
@include mq(lg, max) {
|
&__category-link {
|
||||||
margin-bottom: 16px;
|
font-size: 12px;
|
||||||
text-transform: lowercase;
|
line-height: 15px;
|
||||||
|
color: $color-black;
|
||||||
|
transition: color 0.2s linear;
|
||||||
|
|
||||||
a {
|
@include mq(lg, min) {
|
||||||
border-bottom: 4px solid $color-pink;
|
&:hover {
|
||||||
font-size: 18px;
|
color: $color-blue;
|
||||||
padding: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.ver-todos {
|
&__see-all {
|
||||||
a {
|
display: flex;
|
||||||
color: $color-pink;
|
align-items: center;
|
||||||
font-weight: 700;
|
font-size: 12px;
|
||||||
|
line-height: 15px;
|
||||||
@include mq(lg, max) {
|
font-weight: bold;
|
||||||
font-size: 16px;
|
color: $color-black;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
i {
|
||||||
transform: scale(0.325);
|
margin-left: 9px;
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mq(lg, max) {
|
|
||||||
a {
|
|
||||||
font-size: 14px;
|
|
||||||
padding: 8px 0;
|
|
||||||
width: auto;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.has-sub-menu-open {
|
|
||||||
@include mq(lg, max) {
|
|
||||||
position: initial;
|
|
||||||
transition: position 0.2s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.m3-dropdown-menu {
|
|
||||||
@include mq(lg, max) {
|
|
||||||
top: 117px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sub-menu-open {
|
|
||||||
.m3-dropdown-menu {
|
|
||||||
@include mq(lg, max) {
|
|
||||||
margin-left: 0;
|
|
||||||
opacity: 1;
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> a:before {
|
|
||||||
opacity: 1;
|
|
||||||
transform: rotate(90deg) scale(0.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@ -1,263 +1,194 @@
|
|||||||
/***************************************************************/
|
.shelf {
|
||||||
/**-- 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
color: $color-pink;
|
margin: 0 0 16px;
|
||||||
font-size: 24px;
|
|
||||||
margin: 0 0 24px;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-transform: lowercase;
|
font-size: 16px;
|
||||||
|
line-height: 19px;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
max-width: 95%;
|
margin: 0;
|
||||||
margin: auto;
|
|
||||||
|
|
||||||
@include mq(md, max) {
|
@include mq(lg, max) {
|
||||||
max-width: 300px;
|
padding: 0 32px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.slick-track {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-slide {
|
||||||
|
height: auto;
|
||||||
|
|
||||||
|
& > div,
|
||||||
li {
|
li {
|
||||||
display: inline-block;
|
height: 100%;
|
||||||
vertical-align: top;
|
|
||||||
padding: 0 2.5px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.slick-arrow {
|
||||||
|
@extend .sprite;
|
||||||
|
|
||||||
|
@include mq(lg, max) {
|
||||||
|
transform: translateY(-50%) scale(0.7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-prev {
|
||||||
|
right: 100%;
|
||||||
|
|
||||||
|
@include mq(lg, max) {
|
||||||
|
left: 0;
|
||||||
|
right: auto;
|
||||||
|
transform-origin: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
@extend .sprite-left-gray-arrow-icon;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-next {
|
||||||
|
left: 100%;
|
||||||
|
|
||||||
|
@include mq(lg, max) {
|
||||||
|
right: 0;
|
||||||
|
left: auto;
|
||||||
|
transform-origin: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
@extend .sprite-right-gray-arrow-icon;
|
||||||
|
}
|
||||||
|
|
||||||
.produto-na-prateleira {
|
.produto-na-prateleira {
|
||||||
padding: 0 5px;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
position: relative;
|
position: relative;
|
||||||
text-align: center;
|
height: 100%;
|
||||||
|
margin: 0 15px;
|
||||||
|
|
||||||
.product-image {
|
.product-image {
|
||||||
|
position: relative;
|
||||||
|
padding-top: 100%;
|
||||||
|
margin-bottom: 16px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.lazyload__sibling {
|
&:hover {
|
||||||
padding-bottom: 100%;
|
.foto-secundaria {
|
||||||
|
opacity: 1;
|
||||||
+ div {
|
pointer-events: all;
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.lazyload__sibling img {
|
|
||||||
left: 50%;
|
|
||||||
max-width: initial;
|
|
||||||
position: relative;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.foto-principal,
|
.foto-principal,
|
||||||
.foto-secundaria {
|
.foto-secundaria {
|
||||||
transition: all 0.25s linear;
|
position: absolute;
|
||||||
}
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
&:hover .foto-secundaria,
|
z-index: map-get($z-index, Level-1);
|
||||||
.foto-principal {
|
top: 0;
|
||||||
visibility: visible;
|
left: 0;
|
||||||
opacity: 1;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.foto-secundaria {
|
.foto-secundaria {
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
top: 0;
|
|
||||||
z-index: -1;
|
|
||||||
visibility: hidden;
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.informacoes .nome {
|
.indisponivel,
|
||||||
font-size: 14px;
|
.disponivel {
|
||||||
line-height: 16px;
|
flex: 1;
|
||||||
margin-top: 16px;
|
display: flex;
|
||||||
min-height: 34px;
|
flex-direction: column;
|
||||||
text-transform: capitalize;
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nome {
|
||||||
|
margin-bottom: 17px;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.price {
|
.price {
|
||||||
margin: 8px 0 17px;
|
margin-bottom: 17px;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
> div {
|
|
||||||
line-height: 1.3;
|
|
||||||
}
|
|
||||||
.antigo {
|
.antigo {
|
||||||
color: $color-gray2;
|
margin-bottom: 4px;
|
||||||
font-size: 14px;
|
|
||||||
min-height: 18px;
|
|
||||||
text-decoration: line-through;
|
text-decoration: line-through;
|
||||||
|
color: $color-grey3;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.principal {
|
.principal {
|
||||||
font-size: 18px;
|
margin-bottom: 4px;
|
||||||
font-weight: 700;
|
font-weight: 900;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.parcelado {
|
.parcelado {
|
||||||
color: $color-gray2;
|
font-size: 10px;
|
||||||
font-size: 12px;
|
line-height: 12px;
|
||||||
|
color: $color-grey4;
|
||||||
strong {
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.boleto {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.compra {
|
|
||||||
.btn-compra {
|
.btn-compra {
|
||||||
margin: 0;
|
a {
|
||||||
display: block;
|
display: flex;
|
||||||
transition: all 0.25s linear 0.25s;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 50px;
|
||||||
|
background: $color-black;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 12px;
|
||||||
|
color: $color-white;
|
||||||
|
|
||||||
@include mq(md, min) {
|
@include mq(lg, max) {
|
||||||
visibility: hidden;
|
&:active {
|
||||||
opacity: 0;
|
background: lighten($color-black, 10);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
@include mq(lg, min) {
|
||||||
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;
|
|
||||||
|
|
||||||
@include mq(lg) {
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $color-green2;
|
background: lighten($color-black, 10);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: $color-green3;
|
background: $color-black;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@include mq(lg) {
|
|
||||||
&:hover .compra .btn-compra {
|
|
||||||
visibility: visible;
|
|
||||||
opacity: 1;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.indisponivel {
|
.indisponivel {
|
||||||
color: $color-pink;
|
// text-align: center;
|
||||||
font-weight: bold;
|
|
||||||
margin: 5px 0;
|
.erro {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 50px;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 12px;
|
||||||
|
color: $color-red;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
36
src/arquivos/sass/partials/_search.scss
Normal file
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;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
background: transparent;
|
||||||
|
color: $color-white;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 12px;
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-buscar {
|
||||||
|
width: 23px;
|
||||||
|
height: 23px;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
outline: 0;
|
||||||
|
font-size: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
|
@extend .sprite;
|
||||||
|
@extend .sprite-search-icon;
|
||||||
|
}
|
||||||
|
}
|
||||||
33
src/arquivos/sass/partials/_slider.scss
Normal file
33
src/arquivos/sass/partials/_slider.scss
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
.slick-arrow {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
z-index: map-get($z-index, Level-1);
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
font-size: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
outline: 0;
|
||||||
|
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: $color-white;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -23,7 +23,7 @@ html {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
body {
|
body {
|
||||||
color: $color-black2;
|
color: $color-black;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -395,12 +395,6 @@ body {
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
|
||||||
@include mq(md, max) {
|
|
||||||
padding-bottom: 67px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
html {
|
||||||
font-family: $font-family;
|
font-family: $font-family;
|
||||||
line-height: $font-height;
|
line-height: $font-height;
|
||||||
|
|||||||
@ -1,39 +1,28 @@
|
|||||||
// fonts
|
// fonts
|
||||||
|
|
||||||
$font-family: "Roboto", sans-serif;
|
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap");
|
||||||
|
|
||||||
|
$font-family: "Inter", sans-serif;
|
||||||
$font-weight-light: 300;
|
$font-weight-light: 300;
|
||||||
$font-weight-regular: 400;
|
$font-weight-regular: 400;
|
||||||
$font-weight-heavy: 700;
|
$font-weight-heavy: 700;
|
||||||
$font-height: 1.5;
|
$font-height: 1.5;
|
||||||
|
|
||||||
// colors
|
// colors
|
||||||
|
|
||||||
$color-black: #000;
|
$color-black: #000;
|
||||||
$color-black2: #142032;
|
|
||||||
$color-black3: #19273d;
|
|
||||||
$color-black4: #151728;
|
|
||||||
|
|
||||||
$color-gray: hsla(0, 0%, 90%, 1);
|
|
||||||
$color-gray2: hsla(220, 1%, 43%, 1);
|
|
||||||
$color-gray3: hsl(0, 0%, 77%);
|
|
||||||
$color-gray4: #eee;
|
|
||||||
$color-gray5: #6d6e70;
|
|
||||||
$color-gray6: #e5e5e5;
|
|
||||||
|
|
||||||
$color-white: #fff;
|
$color-white: #fff;
|
||||||
$color-white2: #f5f5f5;
|
|
||||||
|
|
||||||
$color-pink: #f71963;
|
$color-blue: #00c8ff;
|
||||||
$color-pink2: hsla(348, 83%, 72%, 1);
|
$color-blue2: #03addc;
|
||||||
$color-pink3: hsla(348, 83%, 58%, 1);
|
|
||||||
|
|
||||||
$color-purple: hsla(266, 70%, 52%, 1);
|
$color-red: #db4c4c;
|
||||||
|
|
||||||
$color-green: #2fab61;
|
$color-grey: #333333;
|
||||||
$color-green2: hsla(138, 66%, 41%, 1);
|
$color-grey1: #e0e0e0;
|
||||||
$color-green3: hsla(138, 50%, 41%, 1);
|
$color-grey2: #bdbdbd;
|
||||||
$color-green4: hsla(138, 59%, 34%, 1);
|
$color-grey3: #828282;
|
||||||
|
$color-grey4: #6d6e70;
|
||||||
// universal
|
|
||||||
|
|
||||||
// Grid breakpoints
|
// Grid breakpoints
|
||||||
|
|
||||||
@ -46,13 +35,18 @@ $grid-breakpoints: (
|
|||||||
) !default;
|
) !default;
|
||||||
|
|
||||||
$z-index: (
|
$z-index: (
|
||||||
menu: 15,
|
Level-1: 5,
|
||||||
popup-add-cart: 10,
|
Level-2: 10,
|
||||||
dropdown: 10,
|
Level-3: 15,
|
||||||
flag-prateleira: 5,
|
Level-4: 20,
|
||||||
comprar-flutuante: 5,
|
Level-5: 25,
|
||||||
avise-me: 5,
|
// menu: 15,
|
||||||
scroll-top: 7,
|
// popup-add-cart: 10,
|
||||||
header-fixo: 10,
|
// dropdown: 10,
|
||||||
popup-user: 15,
|
// flag-prateleira: 5,
|
||||||
|
// comprar-flutuante: 5,
|
||||||
|
// avise-me: 5,
|
||||||
|
// scroll-top: 7,
|
||||||
|
// header-fixo: 10,
|
||||||
|
// popup-user: 15,,,,,,,,,,,,,,,,,,,
|
||||||
) !default;
|
) !default;
|
||||||
|
|||||||
BIN
src/arquivos/sprite/bag-icon.png
Normal file
BIN
src/arquivos/sprite/bag-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 833 B |
BIN
src/arquivos/sprite/boleto-icon.png
Normal file
BIN
src/arquivos/sprite/boleto-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
src/arquivos/sprite/close-menu-icon.png
Normal file
BIN
src/arquivos/sprite/close-menu-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 366 B |
BIN
src/arquivos/sprite/credit-card-icon.png
Normal file
BIN
src/arquivos/sprite/credit-card-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/arquivos/sprite/dinerscard-icon.png
Normal file
BIN
src/arquivos/sprite/dinerscard-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
src/arquivos/sprite/elocard-icon.png
Normal file
BIN
src/arquivos/sprite/elocard-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
src/arquivos/sprite/facebook-icon.png
Normal file
BIN
src/arquivos/sprite/facebook-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 380 B |
BIN
src/arquivos/sprite/googlesafe-icon.png
Normal file
BIN
src/arquivos/sprite/googlesafe-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
src/arquivos/sprite/hipercard-icon.png
Normal file
BIN
src/arquivos/sprite/hipercard-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
src/arquivos/sprite/instagram-icon.png
Normal file
BIN
src/arquivos/sprite/instagram-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 920 B |
BIN
src/arquivos/sprite/left-gray-arrow-icon.png
Normal file
BIN
src/arquivos/sprite/left-gray-arrow-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
src/arquivos/sprite/left-white-arrow-icon.png
Normal file
BIN
src/arquivos/sprite/left-white-arrow-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/arquivos/sprite/lock-icon.png
Normal file
BIN
src/arquivos/sprite/lock-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 538 B |
BIN
src/arquivos/sprite/m3-icon.png
Normal file
BIN
src/arquivos/sprite/m3-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/arquivos/sprite/mastercard-icon.png
Normal file
BIN
src/arquivos/sprite/mastercard-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/arquivos/sprite/menu-arrow-icon.png
Normal file
BIN
src/arquivos/sprite/menu-arrow-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 230 B |
BIN
src/arquivos/sprite/menu-icon.png
Normal file
BIN
src/arquivos/sprite/menu-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 740 B |
BIN
src/arquivos/sprite/menu-left-arrow-icon.png
Normal file
BIN
src/arquivos/sprite/menu-left-arrow-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 271 B |
BIN
src/arquivos/sprite/menu-mobile-arrow-icon.png
Normal file
BIN
src/arquivos/sprite/menu-mobile-arrow-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 273 B |
BIN
src/arquivos/sprite/pagseguro-icon.png
Normal file
BIN
src/arquivos/sprite/pagseguro-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
src/arquivos/sprite/right-gray-arrow-icon.png
Normal file
BIN
src/arquivos/sprite/right-gray-arrow-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
src/arquivos/sprite/right-white-arrow-icon.png
Normal file
BIN
src/arquivos/sprite/right-white-arrow-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/arquivos/sprite/search-icon.png
Normal file
BIN
src/arquivos/sprite/search-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 607 B |
BIN
src/arquivos/sprite/store-icon.png
Normal file
BIN
src/arquivos/sprite/store-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/arquivos/sprite/truck-icon.png
Normal file
BIN
src/arquivos/sprite/truck-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 980 B |
BIN
src/arquivos/sprite/user-icon.png
Normal file
BIN
src/arquivos/sprite/user-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 833 B |
BIN
src/arquivos/sprite/visa-icon.png
Normal file
BIN
src/arquivos/sprite/visa-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
src/arquivos/sprite/vtex-icon.png
Normal file
BIN
src/arquivos/sprite/vtex-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
src/arquivos/sprite/vtexs-icon.png
Normal file
BIN
src/arquivos/sprite/vtexs-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
src/arquivos/sprite/youtube-icon.png
Normal file
BIN
src/arquivos/sprite/youtube-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 499 B |
205
src/controles-customizados/menuPrincipal.html
Normal file
205
src/controles-customizados/menuPrincipal.html
Normal file
@ -0,0 +1,205 @@
|
|||||||
|
<nav class="main-menu">
|
||||||
|
<div class="menu-header">
|
||||||
|
<div class="menu-header__top-wrapper">
|
||||||
|
<div class="menu-header__text">
|
||||||
|
<i class="sprite sprite-lock-icon"></i>
|
||||||
|
COMPRA 100% SEGURA
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="menu-header__close-button">
|
||||||
|
<i class="sprite sprite-close-menu-icon"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="menu-header__search-box">
|
||||||
|
<vtex.cmc:fullTextSearchBox/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul class="main-menu__departments">
|
||||||
|
<li class="main-menu__department">
|
||||||
|
<a class="main-menu__department-link" href="#" title="LOREM IPSUM">
|
||||||
|
LOREM IPSUM
|
||||||
|
<i class="sprite sprite-menu-mobile-arrow-icon"></i>
|
||||||
|
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="submenu">
|
||||||
|
<button class="submenu__return-button">
|
||||||
|
<i class="sprite sprite-menu-left-arrow-icon"></i>
|
||||||
|
VOLTAR
|
||||||
|
</button>
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="submenu__title">LOREM IPSUM</h2>
|
||||||
|
|
||||||
|
<div class="submenu__categories-wrapper">
|
||||||
|
<ul class="submenu__categories">
|
||||||
|
<li class="submenu__category">
|
||||||
|
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="submenu__category">
|
||||||
|
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="submenu__category">
|
||||||
|
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="submenu__category">
|
||||||
|
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<ul class="submenu__categories">
|
||||||
|
<li class="submenu__category">
|
||||||
|
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="submenu__category">
|
||||||
|
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="submenu__category">
|
||||||
|
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="submenu__category">
|
||||||
|
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a class="submenu__see-all" href="#">
|
||||||
|
VER TODOS
|
||||||
|
<i class="sprite sprite-menu-arrow-icon"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="main-menu__department">
|
||||||
|
<a class="main-menu__department-link" href="#" title="LOREM IPSUM">
|
||||||
|
LOREM IPSUM
|
||||||
|
<i class="sprite sprite-menu-mobile-arrow-icon"></i>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="submenu">
|
||||||
|
<button class="submenu__return-button">
|
||||||
|
<i class="sprite sprite-menu-left-arrow-icon"></i>
|
||||||
|
VOLTAR
|
||||||
|
</button>
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="submenu__title">LOREM IPSUM</h2>
|
||||||
|
|
||||||
|
<div class="submenu__categories-wrapper">
|
||||||
|
<ul class="submenu__categories">
|
||||||
|
<li class="submenu__category">
|
||||||
|
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="submenu__category">
|
||||||
|
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="submenu__category">
|
||||||
|
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="submenu__category">
|
||||||
|
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<ul class="submenu__categories">
|
||||||
|
<li class="submenu__category">
|
||||||
|
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="submenu__category">
|
||||||
|
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="submenu__category">
|
||||||
|
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="submenu__category">
|
||||||
|
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a class="submenu__see-all" href="#">
|
||||||
|
VER TODOS
|
||||||
|
<i class="sprite sprite-menu-arrow-icon"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="main-menu__department">
|
||||||
|
<a class="main-menu__department-link" href="#" title="LOREM IPSUM">
|
||||||
|
LOREM IPSUM
|
||||||
|
<i class="sprite sprite-menu-mobile-arrow-icon"></i>
|
||||||
|
</a>
|
||||||
|
<div class="submenu">
|
||||||
|
<button class="submenu__return-button">
|
||||||
|
<i class="sprite sprite-menu-left-arrow-icon"></i>
|
||||||
|
VOLTAR
|
||||||
|
</button>
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="submenu__title">LOREM IPSUM</h2>
|
||||||
|
|
||||||
|
<div class="submenu__categories-wrapper">
|
||||||
|
<ul class="submenu__categories">
|
||||||
|
<li class="submenu__category">
|
||||||
|
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="submenu__category">
|
||||||
|
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="submenu__category">
|
||||||
|
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="submenu__category">
|
||||||
|
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<ul class="submenu__categories">
|
||||||
|
<li class="submenu__category">
|
||||||
|
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="submenu__category">
|
||||||
|
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="submenu__category">
|
||||||
|
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="submenu__category">
|
||||||
|
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a class="submenu__see-all" href="#">
|
||||||
|
VER TODOS
|
||||||
|
<i class="sprite sprite-menu-arrow-icon"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<a class="main-menu__account-link" href="/account">
|
||||||
|
<i class="sprite sprite-user-icon"></i>
|
||||||
|
ENTRAR / MEUS PEDIDOS
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
82
src/template-pagina/manuelaluana-home.html
Normal file
82
src/template-pagina/manuelaluana-home.html
Normal file
@ -0,0 +1,82 @@
|
|||||||
|
<!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 - Manuela Luana</title>
|
||||||
|
|
||||||
|
<vtex:template id="manuelaluana-loads-header" />
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<vtex:template id="manuelaluana-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-store-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="manuelaluana-footer-newsletter" />
|
||||||
|
<vtex:template id="manuelaluana-footer-links" />
|
||||||
|
<vtex:template id="manuelaluana-footer" />
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<vtex:template id="manuelaluana-loads-footer" />
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,83 @@
|
|||||||
|
<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">
|
||||||
|
<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/formas-de-pagamentos">FORMAS DE PAGAMENTO</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="footer-links__item">
|
||||||
|
<a class="footer-links__link" href="/institucional/entrega">ENTREGA</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="footer-links__item">
|
||||||
|
<a class="footer-links__link" href="/institucional/troca-e-devolucao">TROCA E DEVOLUÇÃO</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="footer-links__item">
|
||||||
|
<a class="footer-links__link" href="/institucional/seguranca-e-privacidade">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:1199999999">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-networks">
|
||||||
|
<li>
|
||||||
|
<a href="#" target="_blank" title="Instagram">
|
||||||
|
<i class="sprite sprite-instagram-icon"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="#" target="_blank" title="Facebook">
|
||||||
|
<i class="sprite sprite-facebook-icon"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="#" target="_blank" title="Youtube">
|
||||||
|
<i class="sprite sprite-youtube-icon"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
<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>
|
||||||
62
src/template-pagina/sub-templates/manuelaluana-footer.html
Normal file
62
src/template-pagina/sub-templates/manuelaluana-footer.html
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
<section class="footer-infos">
|
||||||
|
<div class="footer-infos__labels">
|
||||||
|
<ul class="footer-infos__payments">
|
||||||
|
<li>
|
||||||
|
<i class="sprite sprite-mastercard-icon"></i>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="sprite sprite-visa-icon"></i>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="sprite sprite-dinerscard-icon"></i>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="sprite sprite-elocard-icon"></i>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="sprite sprite-hipercard-icon"></i>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="sprite sprite-pagseguro-icon"></i>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="sprite sprite-boleto-icon"></i>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="footer-infos__divider"></div>
|
||||||
|
|
||||||
|
<ul class="footer-infos__security">
|
||||||
|
<li>
|
||||||
|
<i class="sprite sprite-vtex-icon"></i>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="sprite sprite-googlesafe-icon"></i>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-infos__company">
|
||||||
|
<p class="footer-infos__copyright">
|
||||||
|
COPYRIGHT © 2020 - LOJA COMÉRCIO ELETRÔNICO | 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-vtexs-icon"></i>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="https://m3ecomerce.com/" target="_blank" title="M3">
|
||||||
|
<span class="footer-infos__developed-by">Developed by</span>
|
||||||
|
<i class="sprite sprite-m3-icon"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
41
src/template-pagina/sub-templates/manuelaluana-header.html
Normal file
41
src/template-pagina/sub-templates/manuelaluana-header.html
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
<header class="page-header">
|
||||||
|
<div class="container">
|
||||||
|
<div class="page-header__wrapper">
|
||||||
|
<div class="menu">
|
||||||
|
<button class="menu__button">
|
||||||
|
<i class="sprite sprite-menu-icon"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<vtex.cmc:menuprincipal/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="/">
|
||||||
|
<img class="page-header__logo" src="/arquivos/m3-logo-manuelaluana.png" alt="Logo M3 Manuela Luana"/>
|
||||||
|
</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>
|
||||||
@ -2,4 +2,4 @@
|
|||||||
<script src="https://cdn.jsdelivr.net/npm/proxy-polyfill@0.3.1/proxy.min.js"
|
<script src="https://cdn.jsdelivr.net/npm/proxy-polyfill@0.3.1/proxy.min.js"
|
||||||
integrity="sha256-aRX3NIXjCxT51wF6s9KHLiFrf5E0n1YzvDLAMzeAVzA=" crossorigin="anonymous"></script>
|
integrity="sha256-aRX3NIXjCxT51wF6s9KHLiFrf5E0n1YzvDLAMzeAVzA=" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
<script src="/arquivos/template--main-bundle.js" async="async"></script>
|
<script src="/arquivos/manuelaluana--main-bundle.js" async="async"></script>
|
||||||
@ -3,4 +3,4 @@
|
|||||||
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
||||||
<![endif]-->
|
<![endif]-->
|
||||||
|
|
||||||
<link rel="stylesheet" href="/arquivos/template--main.css" />
|
<link rel="stylesheet" href="/arquivos/manuelaluana--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,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>
|
|
||||||
@ -42,7 +42,7 @@
|
|||||||
<div class="informacoes">
|
<div class="informacoes">
|
||||||
<div class="avaliacao"></div>
|
<div class="avaliacao"></div>
|
||||||
<div class="nome">
|
<div class="nome">
|
||||||
Titulo do produto
|
Lorem ipsum dolor
|
||||||
<!-- $product.EscapedName -->
|
<!-- $product.EscapedName -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -59,40 +59,30 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="principal">
|
<div class="principal">
|
||||||
<span class="value">
|
<span class="value">
|
||||||
R$ 1000000,00
|
R$3.799,05
|
||||||
<!-- $product.BestPrice -->
|
<!-- $product.BestPrice -->
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="parcelado">
|
<div class="parcelado">
|
||||||
<span class="desconto-parcelado">
|
<span class="desconto-parcelado">
|
||||||
ou
|
<span class="numero-de-parcelas">10</span>X de
|
||||||
<strong>
|
|
||||||
<span class="numero-de-parcelas">1</span>X de
|
|
||||||
<span class="value">
|
<span class="value">
|
||||||
R$ 2,50
|
R$ 399,90
|
||||||
<!-- $product.BestPrice -->
|
<!-- $product.BestPrice -->
|
||||||
</span>
|
</span>
|
||||||
</strong>
|
sem juros
|
||||||
no cartão
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="boleto">
|
|
||||||
<span class="value">
|
|
||||||
R$ 9,50
|
|
||||||
<!-- $product.BestPrice -->
|
|
||||||
</span>
|
|
||||||
à vista no boleto bancário
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="compra">
|
<div class="compra">
|
||||||
<span class="btn-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>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- #else -->
|
<!-- #else -->
|
||||||
<div class="indisponivel">
|
<!-- <div class="indisponivel">
|
||||||
<span class="erro">Produto indisponível</span>
|
<span class="erro">INDISPONÍVEL</span>
|
||||||
</div>
|
</div> -->
|
||||||
<!-- #end -->
|
<!-- #end -->
|
||||||
</div>
|
</div>
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user