anacarolinaduartecavalcante/challenge-vtex-io-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: corrigindo estilos e adicionando estilo do .subscriberContainer

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2023-01-30 14:14:00 -03:00
parent 471d282ac3
commit a4f934c08d
2 changed files with 278 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,4 @@
@charset "UTF-8";
/*
0 - 600PX: Phone
600 - 900px: Table portrait
@ -11,21 +12,7 @@
width: 100%;
padding: 0;
margin: auto;
}
@media (max-width: 1920px) and (min-width: 1024px) {
.container {
padding: 0 40px;
}
}
@media (max-width: 1025px) and (min-width: 768px) {
.container {
padding: 0 40px;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.container {
padding: 0 40px;
}
max-width: unset !important;
}
.swiperCaret {
@ -58,12 +45,22 @@
margin-right: 0;
}
}
@media (max-width: 2560px) and (min-width: 1920px) {
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide {
height: 904px !important;
}
}
@media (max-width: 1025px) and (min-width: 768px) {
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide {
margin: 0;
height: 944px !important;
}
}
@media (max-width: 2561px) and (min-width: 1920px) {
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage {
height: 904px !important;
}
}
@media (max-width: 1025px) and (min-width: 768px) {
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage {
height: 944px !important;
@ -71,16 +68,16 @@
}
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main {
object-fit: unset !important;
max-height: unset !important;
}
@media (max-width: 1920px) and (min-width: 1024px) {
@media (max-width: 2561px) and (min-width: 1920px) {
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main {
max-height: unset !important;
height: 904px !important;
}
}
@media (max-width: 1025px) and (min-width: 768px) {
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main {
height: 944px !important;
max-height: unset !important;
}
}
@media (max-width: 768px) and (min-width: 375px) {
@ -88,7 +85,6 @@
width: 99.67% !important;
height: 296px !important;
object-fit: cover !important;
max-height: unset !important;
}
}
@media (max-width: 1920px) and (min-width: 1024px) {
@ -156,6 +152,113 @@
color: #575757;
}
:global(.vtex-store-components-3-x-subscriberContainer) {
margin-top: 16px;
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-title) {
font-size: 0;
margin: 0;
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-title)::after {
content: "Produto indisponível";
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: #868686;
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-subscribeLabel) {
font-size: 0;
margin-bottom: 16px;
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-subscribeLabel)::after {
content: "Deseja saber quando estiver disponível?";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #868686;
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) {
margin: 0;
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) {
width: 60.091%;
margin: 0;
display: grid;
grid-template-areas: "A B" "C C";
max-width: unset !important;
}
@media (max-width: 1025px) and (min-width: 768px) {
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) {
width: 81.02%;
}
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) {
grid-area: A;
margin: 0 8px 15px 0;
width: 12.22em;
}
@media (max-width: 1025px) and (min-width: 768px) {
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) {
width: 23.657em;
}
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #989898;
border: 1px solid #989898;
border-radius: unset;
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #989898;
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) {
grid-area: B;
margin: 0 0 15px;
width: 12.22em;
}
@media (max-width: 1025px) and (min-width: 768px) {
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) {
width: 23.657em;
}
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #989898;
border: 1px solid #989898;
border-radius: unset;
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #989898;
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) {
grid-area: C;
margin: 0;
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) {
width: 100%;
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) :global(.vtex-button__label) {
font-size: 0;
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) :global(.vtex-button__label)::after {
content: "AVISE-ME";
font-family: "Open Sans", sans-serif;
color: #ffffff;
font-weight: 400;
font-size: 18px;
line-height: 25px;
}
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
@ -458,20 +561,25 @@
.productImagesContainer--image-description {
width: 92.93%;
max-height: unset;
left: 6.9%;
position: relative;
margin-left: 32px;
}
@media (max-width: 2561px) and (min-width: 1920px) {
.productImagesContainer--image-description {
width: 94.784%;
}
}
@media (max-width: 1025px) and (min-width: 768px) {
.productImagesContainer--image-description {
width: 100%;
left: 0;
margin-left: 0;
margin-bottom: 16px;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.productImagesContainer--image-description {
width: 100%;
left: 0;
margin-left: 0;
margin-bottom: 16px;
}
}
@ -480,9 +588,14 @@
}
.productDescriptionContainer {
margin-left: 32px;
width: 92.93%;
position: relative;
margin-left: 16px;
}
@media (max-width: 2561px) and (min-width: 1920px) {
.productDescriptionContainer {
width: 94.784%;
}
}
@media (max-width: 1025px) and (min-width: 768px) {
.productDescriptionContainer {

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

@ -4,15 +4,7 @@
width: 100%;
padding: 0;
margin: auto;
@media (max-width: 1920px) and (min-width: 1024px) {
padding: 0 40px;
}
@media (max-width: 1025px) and (min-width: 768px) {
padding: 0 40px;
}
@media (max-width: 768px) and (min-width: 375px) {
padding: 0 40px;
}
max-width: unset !important;
}
.swiperCaret {
@ -42,28 +34,38 @@
margin-right: 0;
}
.productImagesGallerySlide {
@media (max-width: 2560px) and (min-width: 1920px) {
height: 904px !important;
}
@media (max-width: 1025px) and (min-width: 768px) {
margin: 0;
height: 944px !important;
}
.productImage {
@media (max-width: 2561px) and (min-width: 1920px) {
height: 904px !important;
}
@media (max-width: 1025px) and (min-width: 768px) {
height: 944px !important;
}
.productImageTag--main {
object-fit: unset !important;
@media (max-width: 1920px) and (min-width: 1024px) {
max-height: unset !important;
max-height: unset !important;
@media (max-width: 2561px) and (min-width: 1920px) {
height: 904px !important;
}
// @media (max-width: 1920px) and (min-width: 1024px) {
// max-height: unset !important;
// }
@media (max-width: 1025px) and (min-width: 768px) {
height: 944px !important;
max-height: unset !important;
// max-height: unset !important;
}
@media (max-width: 768px) and (min-width: 375px) {
width: 99.67% !important;
height: 296px !important;
object-fit: cover !important;
max-height: unset !important;
// max-height: unset !important;
}
}
}
@ -128,6 +130,123 @@
}
}
:global(.vtex-store-components-3-x-subscriberContainer) {
margin-top: 16px;
:global(.vtex-store-components-3-x-title) {
font-size: 0;
margin: 0;
}
:global(.vtex-store-components-3-x-title)::after {
content: "Produto indisponível";
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: #868686;
}
:global(.vtex-store-components-3-x-subscribeLabel) {
font-size: 0;
margin-bottom: 16px;
}
:global(.vtex-store-components-3-x-subscribeLabel)::after {
content: "Deseja saber quando estiver disponível?";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #868686;
}
:global(.vtex-store-components-3-x-form) {
margin: 0;
:global(.vtex-store-components-3-x-content) {
width: 60.091%;
margin: 0;
display: grid;
grid-template-areas:
"A B"
"C C";
max-width: unset !important;
@media (max-width: 1025px) and (min-width: 768px) {
width: 81.02%;
}
// @media (max-width: 768px) and (min-width: 375px) {
// }
:global(.vtex-store-components-3-x-inputName) {
grid-area: A;
margin: 0 8px 15px 0;
width: 12.22em;
@media (max-width: 1025px) and (min-width: 768px) {
width: 23.657em;
}
:global(.vtex-input) {
:global(.vtex-input-prefix__group) {
:global(.vtex-styleguide-9-x-input) {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #989898;
border: 1px solid #989898;
border-radius: unset;
}
:global(.vtex-styleguide-9-x-input)::placeholder {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #989898;
}
}
}
}
:global(.vtex-store-components-3-x-inputEmail) {
grid-area: B;
margin: 0 0 15px;
width: 12.22em;
@media (max-width: 1025px) and (min-width: 768px) {
width: 23.657em;
}
:global(.vtex-input) {
:global(.vtex-input-prefix__group) {
:global(.vtex-styleguide-9-x-input) {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #989898;
border: 1px solid #989898;
border-radius: unset;
}
:global(.vtex-styleguide-9-x-input)::placeholder {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #989898;
}
}
}
}
:global(.vtex-store-components-3-x-submit) {
grid-area: C;
margin: 0;
// @media (max-width: 1025px) and (min-width: 768px) {
// width: 150.13%;
// }
:global(.vtex-button) {
width: 100%;
:global(.vtex-button__label) {
font-size: 0;
}
:global(.vtex-button__label)::after {
content: "AVISE-ME";
font-family: "Open Sans", sans-serif;
color: #ffffff;
font-weight: 400;
font-size: 18px;
line-height: 25px;
}
}
}
}
}
}
// sku selector
.skuSelectorContainer {
@ -445,16 +564,19 @@
.productImagesContainer--image-description {
width: 92.93%;
max-height: unset;
left: 6.9%;
position: relative;
margin-left: 32px;
@media (max-width: 2561px) and (min-width: 1920px) {
width: 94.784%;
}
@media (max-width: 1025px) and (min-width: 768px) {
width: 100%;
left: 0;
margin-left: 0;
margin-bottom: 16px;
}
@media (max-width: 768px) and (min-width: 375px) {
width: 100%;
left: 0;
margin-left: 0;
margin-bottom: 16px;
}
& .productImageTag--image-description--main {
@ -462,9 +584,12 @@
}
}
.productDescriptionContainer {
margin-left: 32px;
width: 92.93%;
position: relative;
margin-left: 16px;
@media (max-width: 2561px) and (min-width: 1920px) {
width: 94.784%;
}
@media (max-width: 1025px) and (min-width: 768px) {
margin-left: 0;
width: 100%;