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

feat: estiliza bloco de prateleira de produtos relacionados #4

Merged
emmanuelvitor merged 1 commits from feature/scssProdutosRelacionados into development 2023-02-09 02:12:16 +00:00
Conversation 0 Commits 1 Files Changed 6 +483 -50
6 changed files with 483 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,42 +1,97 @@
.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 */
/* Grid breakpoints */
:global(.vtex-product-summary-2-x-containerNormal) {
max-width: unset !important;
}
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
opacity: 0;
transition: opacity 200ms ease-in-out;
:global(.vtex-product-summary-2-x-imageNormal) {
max-height: unset !important;
}
.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
opacity: 1;
:global(.vtex-product-summary-2-x-imageStackContainer) {
display: flex;
}
@media screen and (max-width: 40em) {
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
display: none;
:global(.vtex-product-summary-2-x-nameContainer) {
background-color: white;
width: 100%;
padding: 0;
padding-top: 16px;
margin: 0 auto;
}
@media (max-width: 1024px) {
:global(.vtex-product-summary-2-x-nameContainer) {
margin-bottom: 8px;
margin-top: 16px;
max-width: 87.1794871795%;
}
}
@media (max-width: 1024px) and (min-width: 1023px) and (max-width: 1025px) {
:global(.vtex-product-summary-2-x-nameContainer) {
max-width: none;
}
}
:global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-brandName) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
text-align: center;
color: #000000;
}
@media (max-width: 767px) {
:global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-brandName) {
font-size: 14px;
line-height: 19px;
}
}
.nameContainer {
justify-content: start;
padding-top: 1rem;
padding-bottom: 1rem;
:global(.vtex-product-summary-2-x-priceContainer) {
padding: 0;
padding-top: 8px;
}
.brandName {
font-weight: 600;
font-size: 18px;
color: #2E2E2E;
}
.container {
text-align: start;
}
.imageContainer {
:global(.vtex-product-summary-2-x-priceContainer) .price_listPriceContainer {
padding-top: 0 !important;
padding-bottom: 0 !important;
font-family: "Open Sans";
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 (max-width: 767px) {
:global(.vtex-product-summary-2-x-priceContainer) .price_listPriceContainer {
font-size: 12px;
line-height: 16px;
}
}
:global(.vtex-product-summary-2-x-priceContainer) .price_sellingPriceLabel,
:global(.vtex-product-summary-2-x-priceContainer) .price_installmentContainer {
display: none;
}
:global(.vtex-product-summary-2-x-priceContainer) .price_sellingPrice {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
text-align: center;
color: #000000;
}
@media (max-width: 767px) {
:global(.vtex-product-summary-2-x-priceContainer) .price_sellingPrice {
font-size: 18px;
line-height: 25px;
}
}

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

@ -6,4 +6,29 @@
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
/* Grid breakpoints */
.container--m3-shipping-simulator-title .paragraph {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
text-transform: uppercase;
margin-bottom: 8px;
}
.paragraph--m3-shelf-related-title {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
text-align: center;
color: #575757;
}
@media (max-width: 768px) {
.paragraph--m3-shelf-related-title {
font-size: 20px;
}
}

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

@ -1,31 +1,132 @@
.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 */
@media (min-width: 2000px) {
.sliderLayoutContainer--m3-carousel-products {
max-width: 1920px;
margin: 0 auto;
}
}
.sliderLayoutContainer--carousel {
background-color: #F0F0F0;
min-height: 450px;
.sliderTrackContainer--m3-carousel-products {
max-width: 94.712%;
margin: 0 auto;
}
@media (max-width: 590px) {
.sliderTrackContainer--m3-carousel-products {
max-width: 78.9333333333%;
}
}
.sliderTrackContainer {
max-width: 100%;
.slide--m3-carousel-products {
margin: 0 8px;
}
@media (min-width: 1920px) {
.slide--m3-carousel-products {
max-width: 434.4px !important;
}
}
@media (max-width: 1440px) {
.slide--m3-carousel-products {
max-width: 314.4px !important;
}
}
@media (max-width: 1024px) {
.slide--m3-carousel-products {
max-width: 291.2px !important;
}
}
@media (max-width: 375px) {
.slide--m3-carousel-products {
width: 124.8px !important;
}
}
.paginationDotsContainer {
margin-top: .5rem;
margin-bottom: .5rem;
:global(.vtex-product-summary-2-x-containerNormal) {
max-width: unset !important;
}
.layoutContainer--shelf {
margin-top: 20px;
margin-bottom: 20px;
max-width: 96rem;
min-height: 550px;
:global(.vtex-product-summary-2-x-imageNormal) {
max-height: unset !important;
border-radius: 0;
}
.slide--shelf {
margin-bottom: 25px;
padding-left: .5rem;
padding-right: .5rem;
min-height: 550px;
:global(.vtex-product-summary-2-x-imageStackContainer) {
display: flex;
}
.sliderLeftArrow--m3-carousel-products {
visibility: hidden;
}
.sliderLeftArrow--m3-carousel-products::after {
position: relative !important;
visibility: visible;
content: url("https://agenciamagma.vtexassets.com/arquivos/emmanuelvitor-arrow-left.svg");
width: 12px;
left: 16px;
}
@media (min-width: 2000px) {
.sliderLeftArrow--m3-carousel-products::after {
left: -8px !important;
}
}
@media (min-width: 1025px) {
.sliderLeftArrow--m3-carousel-products::after {
left: 0 !important;
}
}
@media (max-width: 1024px) {
.sliderLeftArrow--m3-carousel-products::after {
left: -8px !important;
bottom: 3px;
}
}
.sliderRightArrow--m3-carousel-products {
visibility: hidden;
}
.sliderRightArrow--m3-carousel-products::before {
position: relative !important;
visibility: visible;
content: url("https://agenciamagma.vtexassets.com/arquivos/emmanuelvitor-arrow-right.svg");
width: 12px;
right: 16px !important;
}
@media (min-width: 2000px) {
.sliderRightArrow--m3-carousel-products::before {
left: 8px !important;
}
}
@media (min-width: 1025px) {
.sliderRightArrow--m3-carousel-products::before {
left: 0 !important;
}
}
@media (max-width: 1024px) {
.sliderRightArrow--m3-carousel-products::before {
left: 8px !important;
bottom: 3px;
}
}
.paginationDotsContainer--m3-carousel-products {
display: flex;
align-items: center;
column-gap: 12px;
bottom: -16px;
}
.paginationDotsContainer--m3-carousel-products .paginationDot--m3-carousel-products {
background-color: #000;
}
.paginationDotsContainer--m3-carousel-products .paginationDot--isActive {
height: 1.063rem !important;
width: 1.0635rem !important;
background: transparent;
border: 1px solid;
}

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

@ -0,0 +1,96 @@
:global(.vtex-product-summary-2-x-containerNormal) {
max-width: unset !important;
// @media (min-width:374px) and (max-width:376px) {
// max-width: 124.8px !important;
// }
}
:global(.vtex-product-summary-2-x-imageNormal) {
max-height: unset !important;
}
:global(.vtex-product-summary-2-x-imageStackContainer) {
display: flex;
}
:global(.vtex-product-summary-2-x-nameContainer) {
background-color: white;
width: 100%;
padding: 0;
padding-top: 16px;
margin: 0 auto;
@media (max-width:1024px) {
margin-bottom: 8px;
margin-top: 16px;
max-width: 87.179487179487179487179487179487%;
@media (min-width:1023px) and (max-width:1025px) {
max-width: none;
}
}
:global(.vtex-product-summary-2-x-brandName) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
text-align: center;
color: #000000;
@media (max-width:767px) {
font-size: 14px;
line-height: 19px;
}
}
}
:global(.vtex-product-summary-2-x-priceContainer) {
padding: 0;
padding-top: 8px;
.price_listPriceContainer {
padding-top: 0 !important;
padding-bottom: 0 !important;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-align: center;
text-decoration-line: line-through;
color: #BABABA;
@media (max-width:767px) {
font-size: 12px;
line-height: 16px;
}
}
.price_sellingPriceLabel,
.price_installmentContainer {
display: none;
}
.price_sellingPrice {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
text-align: center;
color: #000000;
@media (max-width:767px) {
font-size: 18px;
line-height: 25px;
}
}
}

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

@ -0,0 +1,30 @@
.container--m3-shipping-simulator-title {
.paragraph {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
text-transform: uppercase;
margin-bottom: 8px;
}
}
.paragraph--m3-shelf-related-title {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
text-align: center;
color: #575757;
@media (max-width:768px) {
font-size: 20px;
}
}

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

@ -0,0 +1,126 @@
.sliderLayoutContainer--m3-carousel-products {
@media (min-width:2000px) {
max-width: 1920px;
margin: 0 auto;
}
}
.sliderTrackContainer--m3-carousel-products {
max-width: 94.712%;
margin: 0 auto;
@media (max-width:590px) {
max-width: 78.933333333333333333333333333333%;
}
}
// card
.slide--m3-carousel-products {
margin: 0 8px;
@media (min-width:1920px) {
max-width: 434.4px !important;
}
@media(max-width:1440px) {
max-width: 314.4px !important;
}
@media (max-width:1024px) {
max-width: 291.2px !important;
}
@media (max-width:375px) {
width: 124.8px !important;
}
}
// IMAGENS
:global(.vtex-product-summary-2-x-containerNormal) {
max-width: unset !important;
}
:global(.vtex-product-summary-2-x-imageNormal) {
max-height: unset !important;
border-radius: 0;
}
:global(.vtex-product-summary-2-x-imageStackContainer) {
display: flex;
}
// ARROW
.sliderLeftArrow--m3-carousel-products {
visibility: hidden;
&::after {
position: relative !important;
visibility: visible;
content: url("https://agenciamagma.vtexassets.com/arquivos/emmanuelvitor-arrow-left.svg");
width: 12px;
left: 16px;
@media (min-width:2000px) {
left: -8px !important;
}
@media (min-width:1025px) {
left: 0 !important;
}
@media (max-width:1024px) {
left: -8px !important;
bottom: 3px;
}
}
}
.sliderRightArrow--m3-carousel-products {
visibility: hidden;
&::before {
position: relative !important;
visibility: visible;
content: url("https://agenciamagma.vtexassets.com/arquivos/emmanuelvitor-arrow-right.svg");
width: 12px;
right: 16px !important;
@media (min-width:2000px) {
left: 8px !important;
}
@media (min-width:1025px) {
left: 0 !important;
}
@media (max-width:1024px) {
left: 8px !important;
bottom: 3px;
}
}
}
// DOTS
.paginationDotsContainer--m3-carousel-products {
display: flex;
align-items: center;
column-gap: 12px;
bottom: -16px;
.paginationDot--m3-carousel-products {
background-color: #000;
}
.paginationDot--isActive {
height: 1.063rem !important;
width: 1.0635rem !important;
background: transparent;
border: 1px solid;
}
}