forked from M3-Academy/challenge-vtex-io
Entrega do Desafio #1
@ -1,6 +1,6 @@
|
|||||||
/* Product Quantity and Add To Cart Button */
|
/* Product Quantity and Add To Cart Button */
|
||||||
|
|
||||||
[class*="html--cart-content"] {
|
:global(.agenciamagma-store-theme-5-x-html--cart-content) {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@ -9,10 +9,19 @@
|
|||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-testid="product-quantity"]{
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
:global(.agenciamagma-store-theme-5-x-html--cart-content) {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
[data-testid="product-quantity"] {
|
||||||
height: 49px;
|
height: 49px;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-testid="add-to-cart-button"]{
|
[data-testid="add-to-cart-button"] {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
@ -12,11 +12,7 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
margin-left: 40px;
|
margin-left: 40px;
|
||||||
}
|
padding: 0 0 16px;
|
||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
|
||||||
.container {
|
|
||||||
padding: 0 0 16px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.container .homeLink {
|
.container .homeLink {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@ -34,4 +30,9 @@
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 19px;
|
line-height: 19px;
|
||||||
color: #929292;
|
color: #929292;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.container .term {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
}
|
}
|
@ -39,6 +39,11 @@
|
|||||||
grid-template-columns: 100%;
|
grid-template-columns: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.flexRowContent--product-main-content {
|
||||||
|
padding: 0 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child {
|
.flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child {
|
||||||
background: #000000;
|
background: #000000;
|
||||||
@ -47,6 +52,12 @@
|
|||||||
border: none;
|
border: none;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child {
|
||||||
|
height: 74px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
.flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child :global(.vtex-button__label)::before {
|
.flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child :global(.vtex-button__label)::before {
|
||||||
content: "ADICIONAR À SACOLA";
|
content: "ADICIONAR À SACOLA";
|
||||||
font-family: "Open Sans", sans-serif;
|
font-family: "Open Sans", sans-serif;
|
||||||
|
@ -26,4 +26,11 @@
|
|||||||
float: left;
|
float: left;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.product-identifier__value {
|
||||||
|
text-align: left;
|
||||||
|
float: left;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
}
|
}
|
@ -7,6 +7,11 @@
|
|||||||
*/
|
*/
|
||||||
/* Media Query M3 */
|
/* Media Query M3 */
|
||||||
/* Grid breakpoints */
|
/* Grid breakpoints */
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.quantitySelectorContainer {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
.quantitySelectorContainer .quantitySelectorTitle {
|
.quantitySelectorContainer .quantitySelectorTitle {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
@ -18,6 +18,11 @@
|
|||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.container--slider-title {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
.container--slider-title .wrapper--slider-title .heading--slider-title {
|
.container--slider-title .wrapper--slider-title .heading--slider-title {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
@ -25,4 +30,9 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
color: #575757;
|
color: #575757;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.container--slider-title .wrapper--slider-title .heading--slider-title {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
}
|
}
|
@ -18,69 +18,83 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.carouselGaleryThumbs {
|
.swiperCaret {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productImagesContainer .carouselContainer .carouselGaleryCursor {
|
||||||
|
margin: 0 !important;
|
||||||
|
width: auto;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
@media (max-width: 1920px) and (min-width: 1024px) {
|
||||||
|
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer {
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main {
|
||||||
|
object-fit: unset !important;
|
||||||
|
}
|
||||||
|
@media (max-width: 1920px) and (min-width: 1024px) {
|
||||||
|
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main {
|
||||||
|
max-height: unset !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main {
|
||||||
|
height: 944px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main {
|
||||||
|
width: 99.67% !important;
|
||||||
|
height: 296px !important;
|
||||||
|
object-fit: cover !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 1920px) and (min-width: 1024px) {
|
||||||
|
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productVideo,
|
||||||
|
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .videoContainer {
|
||||||
|
height: 664px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productVideo,
|
||||||
|
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .videoContainer {
|
||||||
|
height: 944px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productVideo,
|
||||||
|
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .videoContainer {
|
||||||
|
height: 296px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.productImagesContainer .carouselContainer .carouselGaleryCursor .carouselGaleryThumbs {
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
height: 90px !important;
|
height: 90px !important;
|
||||||
}
|
}
|
||||||
.carouselGaleryThumbs .productImagesThumb {
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.productImagesContainer .carouselContainer .carouselGaleryCursor .carouselGaleryThumbs {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.productImagesContainer .carouselContainer .carouselGaleryCursor .carouselGaleryThumbs .productImagesThumb {
|
||||||
width: 10% !important;
|
width: 10% !important;
|
||||||
height: 10% !important;
|
height: 10% !important;
|
||||||
margin-right: 16px;
|
margin-right: 16px;
|
||||||
width: 90px !important;
|
width: 90px !important;
|
||||||
height: 90px !important;
|
height: 90px !important;
|
||||||
}
|
}
|
||||||
.carouselGaleryThumbs .productImagesThumb .figure,
|
.productImagesContainer .carouselContainer .carouselGaleryCursor .carouselGaleryThumbs .productImagesThumb .figure,
|
||||||
.carouselGaleryThumbs .productImagesThumb .thumbImg {
|
.productImagesContainer .carouselContainer .carouselGaleryCursor .carouselGaleryThumbs .productImagesThumb .thumbImg {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.carouselGaleryCursor {
|
|
||||||
margin: 0 !important;
|
|
||||||
width: auto;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiperCaret {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1920px) and (min-width: 1024px) {
|
|
||||||
.productImagesGallerySwiperContainer {
|
|
||||||
width: 100%;
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.productImageTag--main {
|
|
||||||
object-fit: unset !important;
|
|
||||||
}
|
|
||||||
@media (max-width: 1920px) and (min-width: 1024px) {
|
|
||||||
.productImageTag--main {
|
|
||||||
max-height: unset !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
|
||||||
.productImageTag--main {
|
|
||||||
height: 944px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1920px) and (min-width: 1024px) {
|
|
||||||
.productVideo,
|
|
||||||
.videoContainer {
|
|
||||||
height: 664px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
|
||||||
.productVideo,
|
|
||||||
.videoContainer {
|
|
||||||
height: 944px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.productNameContainer {
|
.productNameContainer {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
@ -88,6 +102,14 @@
|
|||||||
.productNameContainer {
|
.productNameContainer {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
margin-top: 32px;
|
margin-top: 32px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.productNameContainer {
|
||||||
|
text-align: left;
|
||||||
|
margin-top: 32px;
|
||||||
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.productNameContainer .productBrand {
|
.productNameContainer .productBrand {
|
||||||
@ -265,6 +287,11 @@
|
|||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
width: 231px;
|
width: 231px;
|
||||||
}
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::placeholder {
|
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::placeholder {
|
||||||
color: #afafaf;
|
color: #afafaf;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@ -286,6 +313,13 @@
|
|||||||
left: 312px;
|
left: 312px;
|
||||||
bottom: 35px;
|
bottom: 35px;
|
||||||
}
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
|
||||||
|
left: 81.1%;
|
||||||
|
bottom: 0;
|
||||||
|
top: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child :last-child {
|
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child :last-child {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@ -397,6 +431,13 @@
|
|||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.productImagesContainer--image-description {
|
||||||
|
width: 100%;
|
||||||
|
left: 0;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
.productImagesContainer--image-description .productImageTag--image-description--main {
|
.productImagesContainer--image-description .productImageTag--image-description--main {
|
||||||
max-height: unset !important;
|
max-height: unset !important;
|
||||||
}
|
}
|
||||||
@ -412,6 +453,12 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.productDescriptionContainer {
|
||||||
|
margin-left: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
.productDescriptionContainer .productDescriptionTitle {
|
.productDescriptionContainer .productDescriptionTitle {
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@ -424,6 +471,11 @@
|
|||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.productDescriptionContainer .productDescriptionTitle {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
.productDescriptionContainer .productDescriptionText .container {
|
.productDescriptionContainer .productDescriptionText .container {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
@ -439,6 +491,15 @@
|
|||||||
line-height: 19px;
|
line-height: 19px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.productDescriptionContainer .productDescriptionText .container .content :first-child {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.productDescriptionContainer .productDescriptionText .container .pointerEventsNone {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.installmentsPrice {
|
.installmentsPrice {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -11,6 +11,11 @@
|
|||||||
padding: 0 40px;
|
padding: 0 40px;
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
}
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.container--description-block {
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
.container--description-block .listContainer {
|
.container--description-block .listContainer {
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
border-bottom: 1px solid #b9b9b9;
|
border-bottom: 1px solid #b9b9b9;
|
||||||
@ -24,11 +29,27 @@
|
|||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.container--description-block .listContainer {
|
||||||
|
flex-direction: column;
|
||||||
|
border-top: 1px solid #b9b9b9;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
.container--description-block .listContainer .listItem {
|
.container--description-block .listContainer .listItem {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: 38px;
|
height: 38px;
|
||||||
margin-bottom: 16px;
|
}
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
.container--description-block .listContainer .listItem {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.container--description-block .listContainer .listItem {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.container--description-block .listContainer .listItem :global(.vtex-button) {
|
.container--description-block .listContainer .listItem :global(.vtex-button) {
|
||||||
background-color: unset;
|
background-color: unset;
|
||||||
@ -50,11 +71,25 @@
|
|||||||
justify-content: left;
|
justify-content: left;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.container--description-block .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
|
||||||
|
justify-content: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
.container--description-block .listContainer .listItemActive {
|
.container--description-block .listContainer .listItemActive {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: 38px;
|
height: 38px;
|
||||||
margin-bottom: 16px;
|
}
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
.container--description-block .listContainer .listItemActive {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.container--description-block .listContainer .listItemActive {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.container--description-block .listContainer .listItemActive :global(.vtex-button) {
|
.container--description-block .listContainer .listItemActive :global(.vtex-button) {
|
||||||
background-color: unset;
|
background-color: unset;
|
||||||
@ -74,6 +109,12 @@
|
|||||||
border-bottom: unset;
|
border-bottom: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.container--description-block .listContainer .listItemActive :global(.vtex-button) {
|
||||||
|
border-bottom: unset;
|
||||||
|
width: 82px;
|
||||||
|
}
|
||||||
|
}
|
||||||
.container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) {
|
.container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
@ -82,12 +123,23 @@
|
|||||||
justify-content: left;
|
justify-content: left;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) {
|
||||||
|
justify-content: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
.container--description-block .contentContainer {
|
.container--description-block .contentContainer {
|
||||||
border-bottom: 1px solid #b9b9b9;
|
border-bottom: 1px solid #b9b9b9;
|
||||||
padding-bottom: 16px;
|
padding-bottom: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.container--description-block .contentContainer {
|
||||||
|
border-bottom: 1px solid #b9b9b9;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
.container--description-block .contentContainer .contentItem {
|
.container--description-block .contentContainer .contentItem {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 50% 50%;
|
grid-template-columns: 50% 50%;
|
||||||
@ -97,4 +149,10 @@
|
|||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 100%;
|
grid-template-columns: 100%;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.container--description-block .contentContainer .contentItem {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
@ -3,9 +3,7 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
margin-left: 40px;
|
margin-left: 40px;
|
||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
padding: 0 0 16px;
|
||||||
padding: 0 0 16px;
|
|
||||||
}
|
|
||||||
.homeLink {
|
.homeLink {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
@ -26,4 +24,10 @@
|
|||||||
line-height: 19px;
|
line-height: 19px;
|
||||||
color: #929292;
|
color: #929292;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.term {
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -26,6 +26,9 @@
|
|||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 100%;
|
grid-template-columns: 100%;
|
||||||
}
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
padding: 0 40px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//Botao add Cart
|
//Botao add Cart
|
||||||
@ -39,6 +42,10 @@
|
|||||||
height: 49px;
|
height: 49px;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
height: 74px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
:global(.vtex-button__label)::before {
|
:global(.vtex-button__label)::before {
|
||||||
content: "ADICIONAR À SACOLA";
|
content: "ADICIONAR À SACOLA";
|
||||||
font-family: "Open Sans", sans-serif;
|
font-family: "Open Sans", sans-serif;
|
||||||
|
@ -9,59 +9,75 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.carouselGaleryThumbs {
|
|
||||||
margin-top: 16px;
|
|
||||||
height: 90px !important;
|
|
||||||
.productImagesThumb {
|
|
||||||
width: 10% !important;
|
|
||||||
height: 10% !important;
|
|
||||||
margin-right: 16px;
|
|
||||||
width: 90px !important;
|
|
||||||
height: 90px !important;
|
|
||||||
|
|
||||||
.figure,
|
|
||||||
.thumbImg {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.carouselGaleryCursor {
|
|
||||||
margin: 0 !important;
|
|
||||||
width: auto;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiperCaret {
|
.swiperCaret {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.productImagesGallerySwiperContainer {
|
.productImagesContainer {
|
||||||
@media (max-width: 1920px) and (min-width: 1024px) {
|
.carouselContainer {
|
||||||
width: 100%;
|
.carouselGaleryCursor {
|
||||||
margin-left: 0;
|
margin: 0 !important;
|
||||||
margin-right: 0;
|
width: auto;
|
||||||
}
|
padding: 0;
|
||||||
}
|
.productImagesGallerySwiperContainer {
|
||||||
.productImageTag--main {
|
@media (max-width: 1920px) and (min-width: 1024px) {
|
||||||
object-fit: unset !important;
|
width: 100%;
|
||||||
@media (max-width: 1920px) and (min-width: 1024px) {
|
margin-left: 0;
|
||||||
max-height: unset !important;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
.productImagesGallerySlide {
|
||||||
height: 944px !important;
|
.productImage {
|
||||||
}
|
.productImageTag--main {
|
||||||
}
|
object-fit: unset !important;
|
||||||
|
@media (max-width: 1920px) and (min-width: 1024px) {
|
||||||
|
max-height: unset !important;
|
||||||
|
}
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
height: 944px !important;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
width: 99.67% !important;
|
||||||
|
height: 296px !important;
|
||||||
|
object-fit: cover !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.productVideo,
|
||||||
|
.videoContainer {
|
||||||
|
@media (max-width: 1920px) and (min-width: 1024px) {
|
||||||
|
height: 664px;
|
||||||
|
}
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
height: 944px;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
height: 296px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.carouselGaleryThumbs {
|
||||||
|
margin-top: 16px;
|
||||||
|
height: 90px !important;
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.productImagesThumb {
|
||||||
|
width: 10% !important;
|
||||||
|
height: 10% !important;
|
||||||
|
margin-right: 16px;
|
||||||
|
width: 90px !important;
|
||||||
|
height: 90px !important;
|
||||||
|
|
||||||
.productVideo,
|
.figure,
|
||||||
.videoContainer {
|
.thumbImg {
|
||||||
@media (max-width: 1920px) and (min-width: 1024px) {
|
width: 100%;
|
||||||
height: 664px;
|
height: 100%;
|
||||||
}
|
border-radius: 8px;
|
||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
}
|
||||||
height: 944px;
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -72,6 +88,12 @@
|
|||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
margin-top: 32px;
|
margin-top: 32px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
text-align: left;
|
||||||
|
margin-top: 32px;
|
||||||
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
.productBrand {
|
.productBrand {
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
@ -256,6 +278,9 @@
|
|||||||
height: 49px;
|
height: 49px;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
width: 231px;
|
width: 231px;
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
:global(.vtex-address-form-4-x-input)::placeholder {
|
:global(.vtex-address-form-4-x-input)::placeholder {
|
||||||
color: #afafaf;
|
color: #afafaf;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@ -277,6 +302,11 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
left: 312px;
|
left: 312px;
|
||||||
bottom: 35px;
|
bottom: 35px;
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
left: calc(100% - 18.9%);
|
||||||
|
bottom: 0;
|
||||||
|
top: 8px;
|
||||||
|
}
|
||||||
:last-child {
|
:last-child {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@ -397,6 +427,11 @@
|
|||||||
left: 0;
|
left: 0;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
width: 100%;
|
||||||
|
left: 0;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
& .productImageTag--image-description--main {
|
& .productImageTag--image-description--main {
|
||||||
max-height: unset !important;
|
max-height: unset !important;
|
||||||
}
|
}
|
||||||
@ -409,6 +444,10 @@
|
|||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
margin-left: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
.productDescriptionTitle {
|
.productDescriptionTitle {
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@ -418,6 +457,9 @@
|
|||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.productDescriptionText {
|
.productDescriptionText {
|
||||||
& .container {
|
& .container {
|
||||||
@ -432,8 +474,15 @@
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 19px;
|
line-height: 19px;
|
||||||
}
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.pointerEventsNone{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -17,4 +17,9 @@
|
|||||||
float: left;
|
float: left;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
text-align: left;
|
||||||
|
float: left;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,9 @@
|
|||||||
//product quantity
|
//product quantity
|
||||||
|
|
||||||
.quantitySelectorContainer {
|
.quantitySelectorContainer {
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
.quantitySelectorTitle {
|
.quantitySelectorTitle {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
@ -8,6 +8,9 @@
|
|||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
.wrapper--slider-title {
|
.wrapper--slider-title {
|
||||||
.heading--slider-title {
|
.heading--slider-title {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@ -16,6 +19,9 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
color: #575757;
|
color: #575757;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -3,6 +3,9 @@
|
|||||||
.container--description-block {
|
.container--description-block {
|
||||||
padding: 0 40px;
|
padding: 0 40px;
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
.listContainer {
|
.listContainer {
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
border-bottom: 1px solid #b9b9b9;
|
border-bottom: 1px solid #b9b9b9;
|
||||||
@ -13,11 +16,21 @@
|
|||||||
border-top: 1px solid #b9b9b9;
|
border-top: 1px solid #b9b9b9;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
flex-direction: column;
|
||||||
|
border-top: 1px solid #b9b9b9;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
.listItem {
|
.listItem {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: 38px;
|
height: 38px;
|
||||||
margin-bottom: 16px;
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
:global(.vtex-button) {
|
:global(.vtex-button) {
|
||||||
background-color: unset;
|
background-color: unset;
|
||||||
border: none;
|
border: none;
|
||||||
@ -34,6 +47,9 @@
|
|||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
justify-content: left;
|
justify-content: left;
|
||||||
}
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
justify-content: left;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -41,7 +57,12 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: 38px;
|
height: 38px;
|
||||||
margin-bottom: 16px;
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
:global(.vtex-button) {
|
:global(.vtex-button) {
|
||||||
background-color: unset;
|
background-color: unset;
|
||||||
border: none;
|
border: none;
|
||||||
@ -57,11 +78,18 @@
|
|||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
border-bottom: unset;
|
border-bottom: unset;
|
||||||
}
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
border-bottom: unset;
|
||||||
|
width: 82px;
|
||||||
|
}
|
||||||
:global(.vtex-button__label) {
|
:global(.vtex-button__label) {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
justify-content: left;
|
justify-content: left;
|
||||||
}
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
justify-content: left;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -71,6 +99,10 @@
|
|||||||
border-bottom: 1px solid #b9b9b9;
|
border-bottom: 1px solid #b9b9b9;
|
||||||
padding-bottom: 16px;
|
padding-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
border-bottom: 1px solid #b9b9b9;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
}
|
||||||
.contentItem {
|
.contentItem {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 50% 50%;
|
grid-template-columns: 50% 50%;
|
||||||
@ -78,6 +110,10 @@
|
|||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 100%;
|
grid-template-columns: 100%;
|
||||||
}
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user