feat(slider): Adiciona o slider na prateleira de relacionados nas telas desktop, tablet e mobile
This commit is contained in:
parent
9c171f2876
commit
c684a6ee54
@ -51,7 +51,7 @@ const Pix = () => {
|
||||
<div className="pix-container">
|
||||
<img
|
||||
className="pix-image"
|
||||
src="https://agenciamagma.vteximg.com.br/arquivos/pix-icon-sauloklein-m3academy.svg"
|
||||
src="https://agenciamagma.vteximg.com.br/arquivos/pixIcon-filipequintanilha.png"
|
||||
alt="pix"
|
||||
/>
|
||||
|
||||
|
@ -37,7 +37,9 @@
|
||||
[class*='vtex-numeric-stepper__minus-button'] {
|
||||
border: none;
|
||||
border: 1px solid #afafaf;
|
||||
border-right: none;
|
||||
border-radius: 0;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
[class*='vtex-numeric-stepper__minus-button-container'],
|
||||
@ -48,6 +50,7 @@
|
||||
[class*='vtex-numeric-stepper__plus-button'] {
|
||||
border: none;
|
||||
border: 1px solid #afafaf;
|
||||
border-left: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@ -61,6 +64,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #000000;
|
||||
height: 43px;
|
||||
}
|
||||
|
||||
[class*='html--buy-button'] {
|
||||
|
@ -67,7 +67,7 @@
|
||||
"itemsPerPage": {
|
||||
"desktop": 4,
|
||||
"tablet": 3,
|
||||
"phone": 1
|
||||
"phone": 2
|
||||
},
|
||||
"infinite": true,
|
||||
"fullWidth": false,
|
||||
|
@ -7,11 +7,51 @@
|
||||
"html#product-description",
|
||||
// "flex-layout.row#specifications-title",
|
||||
// "product-specification-group#table",
|
||||
"shelf.relatedProducts"
|
||||
"flex-layout.row#shelf-row"
|
||||
// "product-questions-and-answers"
|
||||
]
|
||||
},
|
||||
|
||||
"flex-layout.row#shelf-row": {
|
||||
"children": ["flex-layout.col#shelf-col"],
|
||||
"props": {
|
||||
"blockClass": "shelf-product-row"
|
||||
}
|
||||
},
|
||||
"flex-layout.col#shelf-col": {
|
||||
"children": ["rich-text#shelf-related", "list-context.product-list"],
|
||||
"props": {
|
||||
"blockClass": "shelf-product-col"
|
||||
}
|
||||
},
|
||||
|
||||
"rich-text#shelf-related": {
|
||||
"props": {
|
||||
"text": "### Você também pode gostar:",
|
||||
"blockClass": "shelf-title"
|
||||
}
|
||||
},
|
||||
|
||||
"list-context.product-list": {
|
||||
"children": ["slider-layout#shelf-prod"],
|
||||
"blocks": ["product-summary.shelf"]
|
||||
},
|
||||
|
||||
"slider-layout#shelf-prod": {
|
||||
"props": {
|
||||
"itemsPerPage": {
|
||||
"(min-width:1025px)": 4,
|
||||
"(min-width:768px)": 3,
|
||||
"(max-width:767px)": 2
|
||||
},
|
||||
"infinite": true,
|
||||
"showNavigationArrows": "always",
|
||||
"showPaginationDots": "always",
|
||||
"blockClass": "slide-shelf",
|
||||
"colGap": 16
|
||||
}
|
||||
},
|
||||
|
||||
"html#product-description": {
|
||||
"props": {
|
||||
"testId": "product-description"
|
||||
|
@ -9,14 +9,10 @@
|
||||
]
|
||||
},
|
||||
"responsive-layout.desktop#productSummaryList": {
|
||||
"children": [
|
||||
"flex-layout.row#summaryListDesktop"
|
||||
]
|
||||
"children": ["flex-layout.row#summaryListDesktop"]
|
||||
},
|
||||
"responsive-layout.mobile#productSummaryList": {
|
||||
"children": [
|
||||
"flex-layout.row#summaryListMobile"
|
||||
]
|
||||
"children": ["flex-layout.row#summaryListMobile"]
|
||||
},
|
||||
"product-price-savings#summaryPercentage": {
|
||||
"props": {
|
||||
@ -69,9 +65,7 @@
|
||||
]
|
||||
},
|
||||
"flex-layout.row#productSpecifications": {
|
||||
"children": [
|
||||
"product-specification-group#summary"
|
||||
]
|
||||
"children": ["product-specification-group#summary"]
|
||||
},
|
||||
"product-summary-name#summaryListDesktop": {
|
||||
"props": {
|
||||
@ -100,18 +94,13 @@
|
||||
"colSizing": "auto",
|
||||
"colGap": 5
|
||||
},
|
||||
"children": [
|
||||
"add-to-cart-button",
|
||||
"flex-layout.row#buyNowButton"
|
||||
]
|
||||
"children": ["add-to-cart-button", "flex-layout.row#buyNowButton"]
|
||||
},
|
||||
"flex-layout.row#buyNowButton": {
|
||||
"props": {
|
||||
"blockClass": "buyNowButton"
|
||||
},
|
||||
"children": [
|
||||
"add-to-cart-button#buyNow"
|
||||
]
|
||||
"children": ["add-to-cart-button#buyNow"]
|
||||
},
|
||||
|
||||
"add-to-cart-button#buyNow": {
|
||||
@ -123,10 +112,7 @@
|
||||
}
|
||||
},
|
||||
"flex-layout.col#priceSummaryListDesktop": {
|
||||
"children": [
|
||||
"product-selling-price#summary",
|
||||
"product-list-price#summary"
|
||||
]
|
||||
"children": ["product-selling-price#summary", "product-list-price#summary"]
|
||||
},
|
||||
"stack-layout#summaryListDesktop": {
|
||||
"children": [
|
||||
|
@ -3,12 +3,12 @@
|
||||
"children": [
|
||||
"stack-layout#prodsum",
|
||||
"product-summary-name",
|
||||
"flex-layout.col#productRating",
|
||||
"product-summary-space",
|
||||
// "flex-layout.col#productRating",
|
||||
// "product-summary-space",
|
||||
"product-list-price#summary",
|
||||
"flex-layout.row#selling-price-savings",
|
||||
"product-installments#summary",
|
||||
"add-to-cart-button"
|
||||
"product-selling-price#summary"
|
||||
// "product-installments#summary"
|
||||
// "add-to-cart-button"
|
||||
]
|
||||
},
|
||||
"flex-layout.col#productRating": {
|
||||
@ -81,9 +81,7 @@
|
||||
},
|
||||
"product-price-savings#summary": {
|
||||
"props": {
|
||||
"markers": [
|
||||
"discount"
|
||||
],
|
||||
"markers": ["discount"],
|
||||
"blockClass": "summary"
|
||||
}
|
||||
}
|
||||
|
@ -30,6 +30,14 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.flexColChild--productRating {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flexRowContent--shelf-product-row {
|
||||
padding-bottom: 70px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.stretchChildrenWidth {
|
||||
flex-direction: column;
|
||||
|
@ -1,89 +1,13 @@
|
||||
@media screen and (min-width: 40em) {
|
||||
.paper--quickview {
|
||||
height: 260px;
|
||||
width: 580px;
|
||||
}
|
||||
|
||||
.actionsContainer--quickview {
|
||||
padding: 0 2rem 2rem 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 50em) {
|
||||
.paper--quickview {
|
||||
height: 450px;
|
||||
width: 900px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width: 75em) {
|
||||
.paper--quickview {
|
||||
width: calc(100% - 4rem);
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 82em) {
|
||||
.actionsContainer--quickview {
|
||||
padding: 0 2.5rem 2.5rem 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.paper--quickview {
|
||||
min-width: 320px;
|
||||
max-width: 96rem;
|
||||
}
|
||||
|
||||
.headerContainer--quickview {
|
||||
border: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.actionsContainer--quickview {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
transition: box-shadow 150ms ease-in-out, border-top 150ms ease-in-out;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
border-top-color: transparent;
|
||||
box-shadow: -4px 0px 27px -12px transparent;
|
||||
}
|
||||
|
||||
.actionsContentWrapper {
|
||||
border-top-width: 1px;
|
||||
border-top-style: solid;
|
||||
border-top-color: #aaa;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
.contentContainer--quickviewContent {
|
||||
padding: 2.5rem 0 2.5rem 2rem;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
0 - 600PX: Phone
|
||||
600 - 900px: Table portrait
|
||||
900 - 1200px: Tablet landscape
|
||||
[1200 - 1800] is where our nortal styles apply
|
||||
1800px + : Big desktop
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
/* Grid breakpoints */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
.triggerContainer--quickview {
|
||||
padding: .75rem;
|
||||
}
|
||||
|
||||
.triggerContainer {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.actionsContainer--quickview:not(.actionsContainerEndOfContent--quickview) {
|
||||
border-top-color: rgb(238, 238, 238);
|
||||
box-shadow: -4px 0px 27px -12px rgba(0,0,0,0.64);
|
||||
}
|
||||
|
||||
.actionsContainer--quickview:not(.actionsContainerEndOfContent--quickview) .actionsContentWrapper {
|
||||
border-top-color: transparent;
|
||||
}
|
||||
|
||||
.closeButton {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.paper--product-gifts {
|
||||
padding: 1.5rem;
|
||||
display: none;
|
||||
}
|
@ -1,12 +1,13 @@
|
||||
.productHighlightWrapper--collection {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 5px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
/*
|
||||
0 - 600PX: Phone
|
||||
600 - 900px: Table portrait
|
||||
900 - 1200px: Tablet landscape
|
||||
[1200 - 1800] is where our nortal styles apply
|
||||
1800px + : Big desktop
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
/* Grid breakpoints */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
.productHighlightText {
|
||||
background: antiquewhite;
|
||||
border-radius: 20px;
|
||||
padding: 5px 10px;
|
||||
display: none;
|
||||
}
|
@ -13,6 +13,28 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.listPrice--summary {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #bababa;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.listPrice--summary::before {
|
||||
content: "de ";
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.listPrice--summary::after {
|
||||
content: " por";
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.sellingPriceValue--summary {
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
.sellingPrice {
|
||||
font-weight: 700;
|
||||
font-size: 25px;
|
||||
|
@ -1,42 +1,32 @@
|
||||
.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
|
||||
opacity: 0;
|
||||
transition: opacity 200ms ease-in-out;
|
||||
}
|
||||
|
||||
.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 40em) {
|
||||
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nameContainer {
|
||||
justify-content: start;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.brandName {
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
color: #2E2E2E;
|
||||
}
|
||||
|
||||
.container {
|
||||
text-align: start;
|
||||
/*
|
||||
0 - 600PX: Phone
|
||||
600 - 900px: Table portrait
|
||||
900 - 1200px: Tablet landscape
|
||||
[1200 - 1800] is where our nortal styles apply
|
||||
1800px + : Big desktop
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
/* Grid breakpoints */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
.element {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.image {
|
||||
border-radius: 0.25rem;
|
||||
.containerNormal {
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
.brandName {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.nameContainer {
|
||||
padding: 16px 0 8px;
|
||||
}
|
@ -8,3 +8,14 @@
|
||||
/* Media Query M3 */
|
||||
/* Grid breakpoints */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
.container--shelf-title {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.heading--shelf-title {
|
||||
margin: 16px 0 32px 0;
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
color: #575757;
|
||||
font-weight: 400;
|
||||
}
|
@ -1,31 +1,87 @@
|
||||
.sliderLayoutContainer {
|
||||
justify-content: center;
|
||||
/*
|
||||
0 - 600PX: Phone
|
||||
600 - 900px: Table portrait
|
||||
900 - 1200px: Tablet landscape
|
||||
[1200 - 1800] is where our nortal styles apply
|
||||
1800px + : Big desktop
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
/* Grid breakpoints */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
.sliderLayoutContainer--slide-shelf {
|
||||
padding: 0 19px;
|
||||
margin: 0 0 113px;
|
||||
}
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.sliderLayoutContainer--slide-shelf {
|
||||
margin: 0 0 105px;
|
||||
padding: 0 17px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 768px) {
|
||||
.sliderLayoutContainer--slide-shelf {
|
||||
margin: 0 0 65px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
.sliderLayoutContainer--slide-shelf .slideChildrenContainer {
|
||||
margin: 0 8px;
|
||||
}
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.sliderLayoutContainer--slide-shelf .slideChildrenContainer {
|
||||
margin: 0 6px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 768px) {
|
||||
.sliderLayoutContainer--slide-shelf .slideChildrenContainer {
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
.sliderLayoutContainer--slide-shelf .slideChildrenContainer .paginationDotsContainer {
|
||||
top: calc(100% + 32px);
|
||||
}
|
||||
|
||||
.sliderLayoutContainer--carousel {
|
||||
background-color: #F0F0F0;
|
||||
min-height: 450px;
|
||||
.sliderLeftArrow--slide-shelf {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
}
|
||||
.sliderLeftArrow--slide-shelf::before {
|
||||
content: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-left-filipequintanilha.svg);
|
||||
width: 11px;
|
||||
height: 29px;
|
||||
}
|
||||
|
||||
.sliderTrackContainer {
|
||||
max-width: 100%;
|
||||
.sliderRightArrow--slide-shelf {
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
right: 0;
|
||||
}
|
||||
.sliderRightArrow--slide-shelf::before {
|
||||
content: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-right-filipequintanilha.svg);
|
||||
width: 11px;
|
||||
height: 29px;
|
||||
}
|
||||
|
||||
.paginationDotsContainer {
|
||||
margin-top: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
.caretIcon--slide-shelf {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.layoutContainer--shelf {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
max-width: 96rem;
|
||||
min-height: 550px;
|
||||
.paginationDotsContainer--slide-shelf {
|
||||
bottom: -42px;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.slide--shelf {
|
||||
margin-bottom: 25px;
|
||||
padding-left: .5rem;
|
||||
padding-right: .5rem;
|
||||
min-height: 550px;
|
||||
.paginationDot--slide-shelf {
|
||||
background-color: #000000;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.paginationDot--slide-shelf--isActive {
|
||||
background-color: white;
|
||||
border: 1px solid #000000;
|
||||
width: 17px !important;
|
||||
height: 17px !important;
|
||||
}
|
@ -388,6 +388,14 @@
|
||||
.productImagesContainer--first-image {
|
||||
width: 100%;
|
||||
}
|
||||
.productDescriptionTitle {
|
||||
font-size: 20px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.productDescriptionText {
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1920px) {
|
||||
.container {
|
||||
|
@ -1,11 +1,13 @@
|
||||
.row--menu-row {
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.row--menu-row .rowContainer {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.row--payment-methods {
|
||||
padding-top: 16px;
|
||||
/*
|
||||
0 - 600PX: Phone
|
||||
600 - 900px: Table portrait
|
||||
900 - 1200px: Tablet landscape
|
||||
[1200 - 1800] is where our nortal styles apply
|
||||
1800px + : Big desktop
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
/* Grid breakpoints */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
.poweredBy {
|
||||
display: none;
|
||||
}
|
@ -20,6 +20,13 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.flexColChild--productRating {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flexRowContent--shelf-product-row {
|
||||
padding-bottom: 70px;
|
||||
}
|
||||
// .flexCol--conteudo-imagens {
|
||||
// width: 98.35% !important;
|
||||
// }
|
||||
|
3
styles/sass/pages/product/vtex.modal-layout.scss
Normal file
3
styles/sass/pages/product/vtex.modal-layout.scss
Normal file
@ -0,0 +1,3 @@
|
||||
.triggerContainer--quickview {
|
||||
display: none;
|
||||
}
|
3
styles/sass/pages/product/vtex.product-highlights.scss
Normal file
3
styles/sass/pages/product/vtex.product-highlights.scss
Normal file
@ -0,0 +1,3 @@
|
||||
.productHighlightText {
|
||||
display: none;
|
||||
}
|
@ -3,6 +3,30 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.listPrice--summary {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $color-gray13;
|
||||
padding-bottom: 8px;
|
||||
|
||||
&::before {
|
||||
content: 'de ';
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: ' por';
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
.sellingPriceValue--summary {
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
.sellingPrice {
|
||||
font-weight: 700;
|
||||
font-size: 25px;
|
||||
@ -19,7 +43,7 @@
|
||||
color: $color-gray7;
|
||||
|
||||
&::after {
|
||||
content: " x ";
|
||||
content: ' x ';
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -31,12 +55,12 @@
|
||||
color: $color-gray7;
|
||||
|
||||
&::before {
|
||||
content: "de ";
|
||||
content: 'de ';
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: " sem juros ";
|
||||
content: ' sem juros ';
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
25
styles/sass/pages/product/vtex.product-summary.scss
Normal file
25
styles/sass/pages/product/vtex.product-summary.scss
Normal file
@ -0,0 +1,25 @@
|
||||
// .container {
|
||||
// margin: 0 8px;
|
||||
// }
|
||||
|
||||
.element {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
width: 100%;
|
||||
}
|
||||
.containerNormal {
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
.brandName {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
color: $color-black2;
|
||||
}
|
||||
|
||||
.nameContainer {
|
||||
padding: 16px 0 8px;
|
||||
}
|
@ -0,0 +1,11 @@
|
||||
.container--shelf-title {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.heading--shelf-title {
|
||||
margin: 16px 0 32px 0;
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
color: $color-gray6;
|
||||
font-weight: 400;
|
||||
}
|
75
styles/sass/pages/product/vtex.slider-layout.scss
Normal file
75
styles/sass/pages/product/vtex.slider-layout.scss
Normal file
@ -0,0 +1,75 @@
|
||||
.sliderLayoutContainer--slide-shelf {
|
||||
padding: 0 19px;
|
||||
margin: 0 0 113px;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin: 0 0 105px;
|
||||
padding: 0 17px;
|
||||
}
|
||||
|
||||
@include mq(sm, max) {
|
||||
margin: 0 0 65px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.slideChildrenContainer {
|
||||
margin: 0 8px;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin: 0 6px;
|
||||
}
|
||||
|
||||
@include mq(sm, max) {
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.paginationDotsContainer {
|
||||
top: calc(100% + 32px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sliderLeftArrow--slide-shelf {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
&::before {
|
||||
content: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-left-filipequintanilha.svg);
|
||||
width: 11px;
|
||||
height: 29px;
|
||||
}
|
||||
}
|
||||
|
||||
.sliderRightArrow--slide-shelf {
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
right: 0;
|
||||
|
||||
&::before {
|
||||
content: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-right-filipequintanilha.svg);
|
||||
width: 11px;
|
||||
height: 29px;
|
||||
}
|
||||
}
|
||||
|
||||
.caretIcon--slide-shelf {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.paginationDotsContainer--slide-shelf {
|
||||
bottom: -42px;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.paginationDot--slide-shelf {
|
||||
background-color: $color-black2;
|
||||
margin: 0;
|
||||
}
|
||||
.paginationDot--slide-shelf--isActive {
|
||||
background-color: white;
|
||||
border: 1px solid $color-black2;
|
||||
width: 17px !important;
|
||||
height: 17px !important;
|
||||
}
|
@ -466,6 +466,16 @@
|
||||
.productImagesContainer--first-image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.productDescriptionTitle {
|
||||
font-size: 20px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.productDescriptionText {
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1920px) {
|
||||
|
3
styles/sass/pages/product/vtex.store-footer.scss
Normal file
3
styles/sass/pages/product/vtex.store-footer.scss
Normal file
@ -0,0 +1,3 @@
|
||||
.poweredBy {
|
||||
display: none;
|
||||
}
|
@ -16,6 +16,7 @@ $color-gray9: #afafaf;
|
||||
$color-gray10: #868686;
|
||||
$color-gray11: #b9b9b9;
|
||||
$color-gray12: #bfbfbf;
|
||||
$color-gray13: #bababa;
|
||||
|
||||
$color-blue: #4267b2;
|
||||
|
||||
@ -25,10 +26,10 @@ $color-green: #4caf50;
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
cstm: 400,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px,
|
||||
sm: 769px,
|
||||
md: 1025px,
|
||||
lg: 1440px,
|
||||
xl: 1920px,
|
||||
) !default;
|
||||
|
||||
$z-index: (
|
||||
|
Loading…
Reference in New Issue
Block a user