BernardoWaldhelm/challenge-vtex-io-bernardo-waldhelm
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(home): adicionando prateleira de produtos relacionados e estilizando a mesma

Browse Source
This commit is contained in:
Bernardo Cunha Ernani Waldhelm 2023-01-30 21:25:02 -03:00
parent 5a508361a1
commit b998a2dc74
17 changed files with 776 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
react/Placeholder.tsx Normal file
View File

@ -0,0 +1,3 @@
import Placeholder from "./components/Placeholder/index";
export default Placeholder;

18
react/components/Placeholder/index.tsx Normal file
View File

@ -0,0 +1,18 @@
const Placeholder = () => {
if (typeof document !== "undefined") {
const postalCode = document.querySelector(".vtex-address-form-4-x-input");
const postalCodeValue = document.querySelector(".postalCode");
if (postalCode) {
postalCode.classList.add("postalCode");
}
if (postalCodeValue) {
postalCodeValue.setAttribute("placeholder", "Digite seu CEP");
}
}
return null;
};
export default Placeholder;

286
store/blocks/pdp/product.jsonc
View File

@ -2,12 +2,14 @@
"store.product": {
"children": [
"html#breadcrumb",
"placeholder-component",
"condition-layout.product#availability",
"tab-layout#description",
"flex-layout.row#specifications-title",
"product-specification-group#table",
"shelf.relatedProducts",
"product-questions-and-answers"
// "flex-layout.row#specifications-title",
// "product-specification-group#table",
// "shelf.relatedProducts",
"html#slider-block-container"
// "product-questions-and-answers"
]
},
"html#breadcrumb": {
@ -18,6 +20,7 @@
},
"children": ["breadcrumb"]
},
"flex-layout.row#specifications-title": {
"children": ["rich-text#specifications"]
},
@ -26,108 +29,6 @@
"text": "##### Product Specifications"
}
},
"flex-layout.row#description": {
"props": {
"marginBottom": 7
},
"children": ["product-description"]
},
"product-images#description-content": {
"props": {
"displayMode": "first-image",
"zoomMode": "disable",
"blockClass": "image-description"
}
},
"tab-layout#description": {
"children": ["tab-list#description", "tab-content#description"],
"props": {
"blockClass": "description-block",
"defaultActiveTabId": "firstTab"
}
},
"tab-list#description": {
"children": [
"tab-list.item#firstTab",
"tab-list.item#secondTab",
"tab-list.item#thirdTab",
"tab-list.item#fourthTab",
"tab-list.item#fifthTab"
]
},
"tab-list.item#firstTab": {
"props": {
"tabId": "firstTab",
"label": "Descrição",
"defaultActiveTab": true
}
},
"tab-list.item#secondTab": {
"props": {
"tabId": "secondTab",
"label": "Descrição"
}
},
"tab-list.item#thirdTab": {
"props": {
"tabId": "thirdTab",
"label": "Descrição"
}
},
"tab-list.item#fourthTab": {
"props": {
"tabId": "fourthTab",
"label": "Descrição"
}
},
"tab-list.item#fifthTab": {
"props": {
"tabId": "fifthTab",
"label": "Descrição"
}
},
"tab-content#description": {
"children": [
"tab-content.item#firstTab",
"tab-content.item#secondTab",
"tab-content.item#thirdTab",
"tab-content.item#fourthTab",
"tab-content.item#fifthTab"
],
"props": {
"blockClass": "description-content"
}
},
"tab-content.item#firstTab": {
"children": ["product-images#description-content", "product-description"],
"props": {
"tabId": "firstTab"
}
},
"tab-content.item#secondTab": {
"children": ["product-images#description-content", "product-description"],
"props": {
"tabId": "secondTab"
}
},
"tab-content.item#thirdTab": {
"children": ["product-images#description-content", "product-description"],
"props": {
"tabId": "thirdTab"
}
},
"tab-content.item#fourthTab": {
"children": ["product-images#description-content", "product-description"],
"props": {
"tabId": "fourthTab"
}
},
"tab-content.item#fifthTab": {
"children": ["product-images#description-content", "product-description"],
"props": {
"tabId": "fifthTab"
}
},
"condition-layout.product#availability": {
"props": {
"conditions": [
@ -325,6 +226,179 @@
"children": ["availability-subscriber"]
},
"flex-layout.row#description": {
"props": {
"marginBottom": 7
},
"children": ["product-description"]
},
"product-images#description-content": {
"props": {
"displayMode": "first-image",
"zoomMode": "disable",
"blockClass": "image-description"
}
},
"tab-layout#description": {
"children": ["tab-list#description", "tab-content#description"],
"props": {
"blockClass": "description-block",
"defaultActiveTabId": "firstTab"
}
},
"tab-list#description": {
"children": [
"tab-list.item#firstTab",
"tab-list.item#secondTab",
"tab-list.item#thirdTab",
"tab-list.item#fourthTab",
"tab-list.item#fifthTab"
]
},
"tab-list.item#firstTab": {
"props": {
"tabId": "firstTab",
"label": "Descrição",
"defaultActiveTab": true
}
},
"tab-list.item#secondTab": {
"props": {
"tabId": "secondTab",
"label": "Descrição"
}
},
"tab-list.item#thirdTab": {
"props": {
"tabId": "thirdTab",
"label": "Descrição"
}
},
"tab-list.item#fourthTab": {
"props": {
"tabId": "fourthTab",
"label": "Descrição"
}
},
"tab-list.item#fifthTab": {
"props": {
"tabId": "fifthTab",
"label": "Descrição"
}
},
"tab-content#description": {
"children": [
"tab-content.item#firstTab",
"tab-content.item#secondTab",
"tab-content.item#thirdTab",
"tab-content.item#fourthTab",
"tab-content.item#fifthTab"
],
"props": {
"blockClass": "description-content"
}
},
"tab-content.item#firstTab": {
"children": ["product-images#description-content", "product-description"],
"props": {
"tabId": "firstTab"
}
},
"tab-content.item#secondTab": {
"children": ["product-images#description-content", "product-description"],
"props": {
"tabId": "secondTab"
}
},
"tab-content.item#thirdTab": {
"children": ["product-images#description-content", "product-description"],
"props": {
"tabId": "thirdTab"
}
},
"tab-content.item#fourthTab": {
"children": ["product-images#description-content", "product-description"],
"props": {
"tabId": "fourthTab"
}
},
"tab-content.item#fifthTab": {
"children": ["product-images#description-content", "product-description"],
"props": {
"tabId": "fifthTab"
}
},
"html#slider-block-container": {
"children": ["rich-text#slider-block-title", "html#list-context.product-list#slider-block"],
"props": {
"blockClass": "slider-container"
}
},
"rich-text#slider-block-title": {
"props": {
"text": "#### Você também pode gostar:",
"blockClass": "slider-title"
}
},
"product-summary.shelf#slider-block": {
"children": ["html#product-summary.shelf#slider-block"]
},
"html#product-summary.shelf#slider-block": {
"props": {
"testId": "vtex-product-summary",
"blockClass": "slider-product"
},
"children": [
"product-summary-image#slider-images",
"product-summary-name",
// "product-summary-space",
"product-summary-price"
]
},
"product-summary-image#slider-images": {
"props": {
"blockClass": "product-summary-image",
"showBadge": false,
"aspectRatio": "1:1"
}
},
"list-context.product-list#slider-block": {
"blocks": ["product-summary.shelf#slider-block"],
"children": ["html#slider-layout#products-carousel"]
},
"html#list-context.product-list#slider-block": {
"props": {
"testId": "product-summary-list"
},
"children": ["list-context.product-list#slider-block"]
},
"html#slider-layout#products-carousel": {
"props": {
"testId": "product-summary-list"
},
"children": ["slider-layout#products-carousel"]
},
"slider-layout#products-carousel": {
"props":{
"itemsPerPage": {
"desktop": 4,
"tablet": 3,
"phone": 2
},
"infinite": true,
"blockClass": "carousel"
}
},
"share#default": {
"props": {
"social": {

4
store/interfaces.json
View File

@ -11,6 +11,8 @@
},
"pix-component": {
"component": "PixDiscount"
},
"placeholder-component":{
"component": "Placeholder"
}
}

35
styles/configs/font-faces.css Normal file
View File

@ -0,0 +1,35 @@
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
src: local("Open Sans Light"), local("OpenSans-Light"),
url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff)
format("woff");
}
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
src: local("Open Sans"), local("OpenSans"),
url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff)
format("woff");
}
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
src: local("Open Sans Semibold"), local("OpenSans-Semibold"),
url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff)
format("woff");
}
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
src: local("Open Sans Bold"), local("OpenSans-Bold"),
url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzOgdm0LZdjqr5-oayXSOefg.woff)
format("woff");
}

2
styles/css/vtex.flex-layout.css
View File

@ -175,7 +175,7 @@
}
.flexRow--quantityButton .flexRow--buy-button .flexRowContent--buy-button .stretchChildrenWidth :global(.vtex-add-to-cart-button-0-x-buttonText)::after {
content: "ADICIONAR À SACOLA";
font-family: "Open Sans";
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;

142
styles/css/vtex.product-summary.css
View File

@ -1,42 +1,118 @@
.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
border-radius: 50%;
/*
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 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
/* Grid breakpoints */
.containerNormal {
max-width: 100% !important;
border-radius: 0;
}
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
opacity: 0;
transition: opacity 200ms ease-in-out;
.containerNormal .clearLink .element {
height: 100%;
padding: 0;
}
.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
opacity: 1;
.containerNormal .clearLink .element .imageContainer {
width: 100%;
padding: 0;
margin: 0;
}
@media screen and (max-width: 40em) {
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
display: none;
.containerNormal .clearLink .element .nameContainer {
margin: 16px 0 8px 0;
padding: 0;
}
.containerNormal .clearLink .element .nameContainer .brandName {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
text-align: center;
color: #000;
}
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
.containerNormal .clearLink .element .nameContainer .brandName {
font-size: 14px;
line-height: 19px;
}
}
.nameContainer {
justify-content: start;
padding-top: 1rem;
padding-bottom: 1rem;
.containerNormal .clearLink .element .priceContainer {
padding: 0;
margin: 0;
}
.brandName {
font-weight: 600;
font-size: 18px;
color: #2E2E2E;
}
.container {
text-align: start;
}
.imageContainer {
.containerNormal .clearLink .element .priceContainer .listPriceContainer {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-align: center;
text-decoration-line: line-through;
color: #BABABA;
}
.image {
border-radius: 0.25rem;
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
.containerNormal .clearLink .element .priceContainer .listPriceContainer {
font-size: 12px;
line-height: 15px;
}
}
.containerNormal .clearLink .element .priceContainer .listPriceContainer .listPriceLabel {
display: none;
}
.containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer {
font-size: 14px;
}
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
.containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer {
font-size: 12px;
line-height: 16px;
}
}
.containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer::before {
content: "de ";
}
.containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer::after {
content: " por";
}
.containerNormal .clearLink .element .priceContainer .sellingPriceContainer {
padding: 0;
margin: 0;
height: 33px;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
text-align: center;
color: #000;
}
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
.containerNormal .clearLink .element .priceContainer .sellingPriceContainer {
font-size: 18px;
line-height: 25px;
}
}
.containerNormal .clearLink .element .priceContainer .sellingPriceContainer .currencyContainer {
font-size: 24px;
line-height: 33px;
}
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
.containerNormal .clearLink .element .priceContainer .sellingPriceContainer .currencyContainer {
font-size: 18px;
line-height: 25px;
}
}
.containerNormal .clearLink .element .priceContainer .sellingPriceContainer .sellingPriceLabel {
display: none;
}
.containerNormal .clearLink .element .priceContainer .sellingPriceContainer .sellingPriceValue {
padding: 0;
margin: 0;
}
.containerNormal .clearLink .element .priceContainer .installmentContainer {
display: none;
}

36
styles/css/vtex.rich-text.css
View File

@ -7,4 +7,38 @@
*/
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
/* Grid breakpoints */
/* Grid breakpoints */
.container--slider-title {
height: 38px;
}
.wrapper--slider-title {
width: 100%;
height: 38px;
padding: 16px 360px;
margin: 0;
max-width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 32px;
}
@media (min-width: 1025px) and (max-width: 1920px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
.wrapper--slider-title {
padding: 16px 40px;
}
}
.wrapper--slider-title .headingLevel4--slider-title {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
text-align: center;
color: #575757;
}
@media (min-width: 280px) and (max-width: 768px) {
.wrapper--slider-title .headingLevel4--slider-title {
font-size: 20px;
}
}

126
styles/css/vtex.slider-layout.css
View File

@ -1,31 +1,107 @@
.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 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
/* Grid breakpoints */
.sliderLayoutContainer--carousel {
background-color: #F0F0F0;
min-height: 450px;
background: unset;
width: 71.87%;
margin: 0 auto 64px;
}
.sliderTrackContainer {
max-width: 100%;
@media (min-width: 769px) and (max-width: 1024px) {
.sliderLayoutContainer--carousel {
min-height: 306px;
width: 92.18%;
}
}
.paginationDotsContainer {
margin-top: .5rem;
margin-bottom: .5rem;
@media (min-width: 280px) and (max-width: 768px) {
.sliderLayoutContainer--carousel {
width: 78.93%;
min-height: 306px;
}
}
.layoutContainer--shelf {
margin-top: 20px;
margin-bottom: 20px;
max-width: 96rem;
min-height: 550px;
.sliderLayoutContainer--carousel .sliderTrackContainer--carousel {
width: 96%;
margin: 0 auto;
}
.slide--shelf {
margin-bottom: 25px;
padding-left: .5rem;
padding-right: .5rem;
min-height: 550px;
@media (min-width: 769px) and (max-width: 1024px) {
.sliderLayoutContainer--carousel .sliderTrackContainer--carousel {
width: 95%;
}
}
@media (min-width: 280px) and (max-width: 768px) {
.sliderLayoutContainer--carousel .sliderTrackContainer--carousel {
width: 87.03%;
}
}
.sliderLayoutContainer--carousel .sliderTrackContainer--carousel .sliderTrack {
column-gap: 16px;
}
@media (min-width: 769px) and (max-width: 1024px) {
.sliderLayoutContainer--carousel .sliderTrackContainer--carousel .sliderTrack {
column-gap: 12px;
}
}
@media (min-width: 280px) and (max-width: 768px) {
.sliderLayoutContainer--carousel .sliderTrackContainer--carousel .sliderTrack {
column-gap: 8px;
}
}
.sliderLayoutContainer--carousel .sliderTrackContainer--carousel .sliderTrack .slide--carousel {
min-height: 543.4px;
}
@media (min-width: 1025px) and (max-width: 1920px) {
.sliderLayoutContainer--carousel .sliderTrackContainer--carousel .sliderTrack .slide--carousel {
min-height: 448px;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.sliderLayoutContainer--carousel .sliderTrackContainer--carousel .sliderTrack .slide--carousel {
min-height: 402.2px;
}
}
@media (min-width: 280px) and (max-width: 768px) {
.sliderLayoutContainer--carousel .sliderTrackContainer--carousel .sliderTrack .slide--carousel {
min-height: 254.8px;
}
}
.sliderLayoutContainer--carousel .sliderLeftArrow--carousel {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-nicolly.svg") !important;
background-repeat: no-repeat;
width: 11.2px;
height: 29.6px;
}
.sliderLayoutContainer--carousel .sliderLeftArrow--carousel .caretIcon--carousel {
display: none;
}
.sliderLayoutContainer--carousel .sliderRightArrow--carousel {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-nicolly.svg") !important;
width: 11.2px;
height: 29.6px;
}
.sliderLayoutContainer--carousel .sliderRightArrow--carousel .caretIcon--carousel {
display: none;
}
.sliderLayoutContainer--carousel .paginationDotsContainer--carousel {
display: flex;
align-items: center;
justify-content: center;
margin-top: 16px;
top: 100%;
}
.sliderLayoutContainer--carousel .paginationDotsContainer--carousel .paginationDot--carousel {
background-color: #000;
width: 10px;
height: 10px;
}
.sliderLayoutContainer--carousel .paginationDotsContainer--carousel .paginationDot--carousel--isActive {
width: 17px !important;
height: 17px !important;
background-color: #fff;
border: 0.5px solid #000;
}

7
styles/css/vtex.store-components.css
View File

@ -289,6 +289,13 @@
padding: 16px;
border: 1px solid #CCC;
border-radius: 0;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
color: #AFAFAF;
}
@media (max-width: 360) and (min-width: 280px) {
.shippingContainer :global(.vtex-address-form-4-x-input) {

14
styles/css/vtex.tab-layout.css
View File

@ -46,6 +46,16 @@
padding: 0;
margin: 0;
}
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
.container--description-block .listContainer .listItem {
width: 100%;
}
}
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
.container--description-block .listContainer .listItem :global(.vtex-button) {
width: 100%;
}
}
.container--description-block .listContainer .listItem :global(.vtex-button__label) {
font-family: "Open Sans", sans-serif;
font-style: normal;
@ -64,6 +74,7 @@
.container--description-block .listContainer .listItem :global(.vtex-button__label) {
font-size: 18px;
padding: 0 !important;
justify-content: flex-start;
}
}
.container--description-block .listContainer .listItem :global(.vtex-button) {
@ -88,6 +99,9 @@
gap: 32px;
}
.contentContainer--description-content {
padding: 0 32px;
}
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
.contentContainer--description-content {
padding-bottom: 16px;

2
styles/sass/pages/product/vtex.flex-layout.scss
View File

@ -170,7 +170,7 @@
&::after {
content: "ADICIONAR À SACOLA";
font-family: 'Open Sans';
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 18px;

122
styles/sass/pages/product/vtex.product-summary.scss Normal file
View File

@ -0,0 +1,122 @@
.containerNormal {
max-width: 100% !important;
border-radius: 0;
.clearLink {
.element {
height: 100%;
padding: 0;
.imageContainer {
width: 100%;
padding: 0;
margin: 0;
}
.nameContainer {
margin: 16px 0 8px 0;
padding: 0;
.brandName{
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
text-align: center;
color: $color-black0;
@media #{$mq-tablet}, #{$mq-mobile} {
font-size: 14px;
line-height: 19px;
}
}
}
.priceContainer {
padding: 0;
margin: 0;
.listPriceContainer {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-align: center;
text-decoration-line: line-through;
color: #BABABA;
@media #{$mq-tablet}, #{$mq-mobile} {
font-size: 12px;
line-height: 15px;
}
.listPriceLabel {
display: none;
}
.currencyContainer {
font-size: 14px;
@media #{$mq-tablet}, #{$mq-mobile} {
font-size: 12px;
line-height: 16px;
}
&::before {
content: "de ";
}
&::after {
content: " por";
}
}
}
.sellingPriceContainer {
padding: 0;
margin: 0;
height: 33px;
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
text-align: center;
color: $color-black0;
@media #{$mq-tablet}, #{$mq-mobile} {
font-size: 18px;
line-height: 25px;
}
.currencyContainer {
font-size: 24px;
line-height: 33px;
@media #{$mq-tablet}, #{$mq-mobile} {
font-size: 18px;
line-height: 25px;
}
}
.sellingPriceLabel {
display: none;
}
.sellingPriceValue {
padding: 0;
margin: 0;
}
}
.installmentContainer {
display: none;
}
}
}
}
}

33
styles/sass/pages/product/vtex.rich-text.scss
View File

@ -0,0 +1,33 @@
.container--slider-title {
height: 38px;
}
.wrapper--slider-title {
width: 100%;
height: 38px;
padding:16px 360px;
margin: 0;
max-width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 32px;
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
padding: 16px 40px;
}
.headingLevel4--slider-title {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
text-align: center;
color: #575757;
@media #{$mq-mobile} {
font-size: 20px;
}
}
}

95
styles/sass/pages/product/vtex.slider-layout.scss Normal file
View File

@ -0,0 +1,95 @@
.sliderLayoutContainer--carousel {
background: unset;
width: 71.87%;
margin: 0 auto 64px;
@media #{$mq-tablet} {
min-height: 306px;
width: 92.18%;
}
@media #{$mq-mobile} {
width: 78.93%;
min-height: 306px;
}
.sliderTrackContainer--carousel {
width: 96%;
margin: 0 auto;
@media #{$mq-tablet} {
width: 95%;
}
@media #{$mq-mobile} {
width: 87.03%;
}
.sliderTrack {
column-gap: 16px;
@media #{$mq-tablet} {
column-gap: 12px;
}
@media #{$mq-mobile} {
column-gap: 8px;
}
.slide--carousel {
min-height: 543.4px;
@media #{$mq-desktop} {
min-height: 448px;
}
@media #{$mq-tablet} {
min-height: 402.2px;
}
@media #{$mq-mobile} {
min-height: 254.8px;
}
}
}
}
.sliderLeftArrow--carousel {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-nicolly.svg") !important;
background-repeat: no-repeat;
width: 11.2px;
height: 29.6px;
.caretIcon--carousel {
display: none;
}
}
.sliderRightArrow--carousel {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-nicolly.svg") !important;
width: 11.2px;
height: 29.6px;
.caretIcon--carousel {
display: none;
}
}
.paginationDotsContainer--carousel {
display: flex;
align-items: center;
justify-content: center;
margin-top: 16px;
top: 100%;
.paginationDot--carousel {
background-color: $color-black0;
width: 10px;
height: 10px;
}
.paginationDot--carousel--isActive {
width: 17px !important;
height: 17px !important;
background-color: $color-white;
border: 0.5px solid $color-black0;
}
}
}

7
styles/sass/pages/product/vtex.store-components.scss
View File

@ -315,6 +315,13 @@
padding: 16px;
border: 1px solid #CCC;
border-radius: 0;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
color: #AFAFAF;
@media (max-width:360) and (min-width: 280px) {
width: 100px;

12
styles/sass/pages/product/vtex.tab-layout.scss
View File

@ -34,6 +34,16 @@
padding: 0;
margin: 0;
@media #{$mq-tablet}, #{$mq-mobile} {
width: 100%;
}
@media #{$mq-tablet}, #{$mq-mobile} {
:global(.vtex-button) {
width: 100%;
}
}
:global(.vtex-button__label) {
font-family: $font-family;
font-style: normal;
@ -50,6 +60,7 @@
@media #{$mq-tablet}, #{$mq-mobile} {
font-size: 18px;
padding: 0 !important;
justify-content: flex-start;
}
}
:global(.vtex-button) {
@ -80,6 +91,7 @@
}
.contentContainer--description-content{
padding: 0 32px;
@media #{$mq-tablet}, #{$mq-mobile}{
padding-bottom: 16px;