Merge pull request 'feature/Slider' (#5) from feature/Slider into development
Reviewed-on: #5
This commit is contained in:
commit
eac2ec6275
122
styles/sass/pages/product/vtex.flex-layout.scss
Normal file
122
styles/sass/pages/product/vtex.flex-layout.scss
Normal file
@ -0,0 +1,122 @@
|
||||
// .flexRow {
|
||||
// width: auto;
|
||||
// padding: 0 40px;
|
||||
// }
|
||||
:global(.vtex-breadcrumb-1-x-container) {
|
||||
padding: 0 40px;
|
||||
|
||||
:nth-child(n) {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
|
||||
:global(.vtex-breadcrumb-1-x-term) {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-telemarketing-2-x-wrapper) {
|
||||
:global(.vtex-store-components-3-x-container) {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-store-components-3-x-container) {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
@media (min-width: 2560px) {
|
||||
max-width: 100%;
|
||||
margin: 0 320px;
|
||||
}
|
||||
:global(.vtex-flex-layout-0-x-flexRowContent) {
|
||||
:global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
|
||||
padding-right: 0 !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-flex-layout-0-x-flexRowContent) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
padding: 0px 40px;
|
||||
gap: 32px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
:global(.vtex-flex-layout-0-x-flexRow) {
|
||||
:global(.vtex-flex-layout-0-x-flexRowContent) {
|
||||
display: block;
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.addButton {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.flexRow--buyButton {
|
||||
width: 100%;
|
||||
.flexRowContent--buyButton {
|
||||
margin: 0;
|
||||
:global(.vtex-button) {
|
||||
background-color: black;
|
||||
height: 49px;
|
||||
border: none;
|
||||
border-radius: unset;
|
||||
}
|
||||
:global(.vtex-add-to-cart-button-0-x-buttonText) {
|
||||
font-size: 0;
|
||||
&::after {
|
||||
content: "ADICIONAR À SACOLA";
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
:global(.vtex-flex-layout-0-x-flexRowContent) {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.flexColChild {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 376px) {
|
||||
:global(.vtex-add-to-cart-button-0-x-buttonText) {
|
||||
max-width: 168px;
|
||||
}
|
||||
|
||||
.flexRow--buyButton {
|
||||
.flexRowContent--buyButton {
|
||||
:global(.vtex-button) {
|
||||
height: 74px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
262
styles/sass/pages/product/vtex.slider-layout.scss
Normal file
262
styles/sass/pages/product/vtex.slider-layout.scss
Normal file
@ -0,0 +1,262 @@
|
||||
.sliderLayoutContainer {
|
||||
padding: 16px 40px 113px;
|
||||
margin-bottom: -49px;
|
||||
|
||||
.sliderTrackContainer {
|
||||
padding: 0 24px 36px;
|
||||
|
||||
.sliderTrack {
|
||||
gap: 16px;
|
||||
|
||||
.slide {
|
||||
.slideChildrenContainer {
|
||||
:global(.vtex-product-summary-2-x-container) {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
@media (min-width: 2560px) {
|
||||
align-items: center;
|
||||
max-width: 434.4px !important;
|
||||
min-height: 543.4px !important;
|
||||
}
|
||||
|
||||
:global(.vtex-product-summary-2-x-element) {
|
||||
:global(.vtex-product-summary-2-x-imageContainer) {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
:global(.vtex-product-summary-2-x-imageNormal) {
|
||||
height: 314px;
|
||||
background-color: #ededed;
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
min-width: 434.4px;
|
||||
min-height: 434.4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
:global(.vtex-product-summary-2-x-nameContainer) {
|
||||
display: flex;
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
|
||||
:global(.vtex-product-summary-2-x-productBrand) {
|
||||
display: flex;
|
||||
max-width: 282.4px;
|
||||
height: auto;
|
||||
align-items: center;
|
||||
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
:global(.vtex-product-summary-2-x-priceContainer) {
|
||||
display: flex;
|
||||
order: 3;
|
||||
padding: 0;
|
||||
|
||||
:global(.vtex-store-components-3-x-listPrice) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-decoration-line: line-through;
|
||||
gap: 1px;
|
||||
|
||||
:global(.vtex-store-components-3-x-listPriceLabel) {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
text-align: center;
|
||||
color: #bababa;
|
||||
text-transform: lowercase;
|
||||
text-decoration: none;
|
||||
padding: 0;
|
||||
}
|
||||
:global(.vtex-store-components-3-x-listPriceValue) {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
text-align: center;
|
||||
color: #bababa;
|
||||
text-decoration: none;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
:global(.vtex-store-components-3-x-listPrice)::after {
|
||||
content: "por";
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
text-align: center;
|
||||
color: #bababa;
|
||||
}
|
||||
|
||||
:global(.vtex-store-components-3-x-sellingPrice) {
|
||||
padding: 0;
|
||||
|
||||
:global(.vtex-product-summary-2-x-currencyContainer) {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
:nth-child(n) {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-store-components-3-x-sellingPriceLabel) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-store-components-3-x-installmentsPrice) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-product-summary-2-x-buyButtonContainer) {
|
||||
display: none;
|
||||
}
|
||||
:global(.vtex-product-summary-2-x-description) {
|
||||
display: none;
|
||||
}
|
||||
:global(.vtex-product-summary-2-x-SKUSelectorContainer) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.paginationDotsContainer {
|
||||
bottom: 113px;
|
||||
align-items: center;
|
||||
|
||||
.paginationDot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #000;
|
||||
border: 0.5px solid #000;
|
||||
}
|
||||
|
||||
.paginationDot--isActive {
|
||||
background-color: #fff;
|
||||
height: 17px !important;
|
||||
width: 17px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slide {
|
||||
.slideChildrenContainer {
|
||||
:global(.vtex-product-summary-2-x-clearLink) {
|
||||
:global(.vtex-product-summary-2-x-container) {
|
||||
:global(.vtex-product-summary-2-x-element) {
|
||||
.html--prateleira-flexcol {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
:global(.vtex-product-summary-2-x-productBrand) {
|
||||
font-size: 14px !important;
|
||||
line-height: 19px !important;
|
||||
height: auto !important;
|
||||
}
|
||||
:global(.vtex-product-summary-2-x-imageContainer) {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.sliderTrackContainer {
|
||||
padding: 0 24px 24px !important;
|
||||
}
|
||||
.sliderTrack {
|
||||
gap: 12px !important;
|
||||
}
|
||||
.sliderLayoutContainer {
|
||||
margin-bottom: -49px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 376px) {
|
||||
.sliderLayoutContainer {
|
||||
margin-bottom: -81px;
|
||||
}
|
||||
.sliderTrack {
|
||||
gap: 8px !important;
|
||||
}
|
||||
:global(.vtex-product-summary-2-x-imageContainer) {
|
||||
:global(.vtex-product-summary-2-x-imageNormal) {
|
||||
height: 124.8px !important;
|
||||
}
|
||||
}
|
||||
.sliderTrackContainer {
|
||||
padding-bottom: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-product-price-1-x-interestRate) {
|
||||
&::after {
|
||||
content: "sem juros";
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #929292;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-product-price-1-x-installments) {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
:global(.vtex-product-price-1-x-installmentValue) {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #929292;
|
||||
&::before {
|
||||
content: " de ";
|
||||
}
|
||||
&::after {
|
||||
content: " ";
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-product-price-1-x-installmentsNumber) {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #929292;
|
||||
&::after {
|
||||
content: " x ";
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user