feat: adiciona estlização carrossel e arrows
This commit is contained in:
parent
c8c8d5ab42
commit
199f93a15f
BIN
assets/left-arrow-vitor-soares.png
Normal file
BIN
assets/left-arrow-vitor-soares.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 322 B |
3
assets/left-arrow-vitor-soares.svg
Normal file
3
assets/left-arrow-vitor-soares.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="12" height="31" viewBox="0 0 12 31" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.000193943 15.2383L10.9291 30.1191L11.2002 27.7468L2.30458 15.2383L11.2002 2.89145L10.9291 0.519138L0.000193943 15.2383Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 251 B |
BIN
assets/right-arrow-vitor-soares.png
Normal file
BIN
assets/right-arrow-vitor-soares.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 316 B |
@ -299,7 +299,7 @@
|
||||
"props": {
|
||||
"itemsPerPage": {
|
||||
"desktop": 4,
|
||||
"tablet": 1,
|
||||
"tablet": 3,
|
||||
"phone": 1
|
||||
},
|
||||
"infinite": true,
|
||||
|
||||
@ -1,42 +1,62 @@
|
||||
.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;
|
||||
/*
|
||||
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 */
|
||||
/* Fontes */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
/* Cores */
|
||||
/* Grid breakpoints */
|
||||
.imageNormal {
|
||||
width: 314px;
|
||||
height: 314px;
|
||||
}
|
||||
|
||||
.brandName {
|
||||
font-weight: 600;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #2E2E2E;
|
||||
line-height: 25px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.container {
|
||||
text-align: start;
|
||||
.nameContainer {
|
||||
padding: 16px 0 8px 0;
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
text-align: center;
|
||||
.priceContainer {
|
||||
padding: 0;
|
||||
}
|
||||
.priceContainer .listPriceContainer {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #bababa;
|
||||
}
|
||||
.priceContainer .listPriceContainer::after {
|
||||
content: "por";
|
||||
}
|
||||
.priceContainer .listPriceContainer .listPrice {
|
||||
padding: 0 4px 0 0;
|
||||
}
|
||||
.priceContainer .sellingPriceLabel {
|
||||
display: none;
|
||||
}
|
||||
.priceContainer .installmentContainer {
|
||||
display: none;
|
||||
}
|
||||
.priceContainer .price_sellingPrice {
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
color: #000000;
|
||||
}
|
||||
.priceContainer .sellingPriceContainer {
|
||||
padding: 0 0 32px 0;
|
||||
}
|
||||
|
||||
.image {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.element {
|
||||
padding: 0;
|
||||
}
|
||||
@ -1,31 +1,59 @@
|
||||
/*
|
||||
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 */
|
||||
/* Fontes */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
/* Cores */
|
||||
/* Grid breakpoints */
|
||||
.sliderLayoutContainer {
|
||||
justify-content: center;
|
||||
margin-bottom: 64px;
|
||||
padding: 0 67px;
|
||||
}
|
||||
|
||||
.sliderLayoutContainer--carousel {
|
||||
background-color: #F0F0F0;
|
||||
min-height: 450px;
|
||||
}
|
||||
|
||||
.sliderTrackContainer {
|
||||
max-width: 100%;
|
||||
.imageContainer {
|
||||
max-width: 314px;
|
||||
width: 100%;
|
||||
height: 314px;
|
||||
background: #EDEDED;
|
||||
}
|
||||
|
||||
.paginationDotsContainer {
|
||||
margin-top: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.paginationDotsContainer .paginationDot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #000000;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.layoutContainer--shelf {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
max-width: 96rem;
|
||||
min-height: 550px;
|
||||
:global(.vtex-slider-layout-0-x-paginationDot--isActive) {
|
||||
width: 17px !important;
|
||||
height: 17px !important;
|
||||
background-color: #fff !important;
|
||||
border: 0.5px solid #000000;
|
||||
}
|
||||
|
||||
.slide--shelf {
|
||||
margin-bottom: 25px;
|
||||
padding-left: .5rem;
|
||||
padding-right: .5rem;
|
||||
min-height: 550px;
|
||||
.sliderRightArrow {
|
||||
visibility: hidden;
|
||||
}
|
||||
.sliderRightArrow::after {
|
||||
visibility: visible;
|
||||
content: url(https://agenciamagma.vtexassets.com/arquivos/right-arrow-vitor-soares.png);
|
||||
padding: 0 40px 0 0;
|
||||
}
|
||||
|
||||
.sliderLeftArrow {
|
||||
visibility: hidden;
|
||||
}
|
||||
.sliderLeftArrow::before {
|
||||
visibility: visible;
|
||||
content: url(https://agenciamagma.vtexassets.com/arquivos/left-arrow-vitor-soares.png);
|
||||
padding: 0 0 0 40px;
|
||||
}
|
||||
@ -51,6 +51,7 @@
|
||||
background-color: #fff;
|
||||
width: 114px;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
.listContainer .listItemActive :global(.vtex-button__label) {
|
||||
color: #000000;
|
||||
|
||||
60
styles/sass/pages/product/vtex.product-summary.scss
Normal file
60
styles/sass/pages/product/vtex.product-summary.scss
Normal file
@ -0,0 +1,60 @@
|
||||
.imageNormal {
|
||||
width: 314px;
|
||||
height: 314px;
|
||||
}
|
||||
|
||||
.brandName {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.nameContainer {
|
||||
padding: 16px 0 8px 0;
|
||||
}
|
||||
|
||||
.priceContainer {
|
||||
padding: 0;
|
||||
|
||||
.listPriceContainer {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
|
||||
color: $gray-700;
|
||||
|
||||
&::after {
|
||||
content: "por";
|
||||
}
|
||||
|
||||
.listPrice {
|
||||
padding: 0 4px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sellingPriceLabel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.installmentContainer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.price_sellingPrice {
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.sellingPriceContainer {
|
||||
padding: 0 0 32px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.element {
|
||||
padding: 0;
|
||||
}
|
||||
50
styles/sass/pages/product/vtex.slider-layout.scss
Normal file
50
styles/sass/pages/product/vtex.slider-layout.scss
Normal file
@ -0,0 +1,50 @@
|
||||
.sliderLayoutContainer {
|
||||
margin-bottom: 64px;
|
||||
padding: 0 67px;
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
max-width: 314px;
|
||||
width: 100%;
|
||||
height: 314px;
|
||||
background: $gray-600;
|
||||
}
|
||||
|
||||
.paginationDotsContainer {
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
.paginationDot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: $black;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-slider-layout-0-x-paginationDot--isActive) {
|
||||
width: 17px !important;
|
||||
height: 17px !important;
|
||||
background-color: $white !important;
|
||||
border: 0.5px solid $black;
|
||||
}
|
||||
|
||||
.sliderRightArrow {
|
||||
visibility: hidden;
|
||||
|
||||
&::after {
|
||||
visibility: visible;
|
||||
content: url(https://agenciamagma.vtexassets.com/arquivos/right-arrow-vitor-soares.png);
|
||||
padding: 0 40px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sliderLeftArrow {
|
||||
visibility: hidden;
|
||||
|
||||
&::before {
|
||||
visibility: visible;
|
||||
content: url(https://agenciamagma.vtexassets.com/arquivos/left-arrow-vitor-soares.png);
|
||||
padding: 0 0 0 40px;
|
||||
}
|
||||
}
|
||||
@ -48,6 +48,7 @@
|
||||
background-color: $white;
|
||||
width: 114px;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:global(.vtex-button__label) {
|
||||
|
||||
@ -14,6 +14,8 @@ $gray-200: #cccccc;
|
||||
$gray-300: #868686;
|
||||
$gray-400: #bfbfbf;
|
||||
$gray-500: #b9b9b9;
|
||||
$gray-600: #EDEDED;
|
||||
$gray-700: #bababa;
|
||||
|
||||
|
||||
$color-gray: #6c6c6c;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user