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

feat(responsividade): Adiciona responsividade tamanho ultrawite a pagina

Browse Source
This commit is contained in:
amanda almeida 2023-02-10 03:01:43 -03:00
parent b4053515a5
commit 124a480c51
17 changed files with 265 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
react/components/Html/styles.css
View File

@ -22,18 +22,17 @@
}
[class*="html--cart-button"] {
width: 78.94%;
width: 80%;
height: 49px;
}
[class*="html--prateleira"] {
padding: 16px 40px 64px;
padding: 16px 40px 113px;
}
[class*="html--price"] {
display: flex;
flex-direction: column;
margin-bottom: 32px;
}
[class*="html--sku-selector"] {
@ -48,8 +47,16 @@
[class*="html--product-main"] {
padding: 16px 360px 0;
}
[class*="html--cart-button"] {
width: 90%;
height: 49px;
}
[class*="html--prateleira"] {
padding: 16px 360px 64px;
padding: 16px 360px 113px;
}
[class*="html--stack-layout"],
[class*="html--right-col"] {
width: 50%;
}
}
@ -66,6 +73,10 @@
[class*="html--cart-button"] {
width: 85.39%;
}
[class*="html--prateleira"] {
padding-bottom: 105px;
}
}
@media screen and (max-width: 768px) {
@ -83,4 +94,7 @@
[class*="html--shipping-simulator"]::-webkit-scrollbar {
background-color: transparent;
}
[class*="html--prateleira"] {
padding-bottom: 65px;
}
}

6
styles/css/vtex.add-to-cart-button.css
View File

@ -13,15 +13,13 @@
}
.buttonText--add-to-cart-button {
font-weight: 400;
font-size: 18px;
line-height: 25px;
display: flex;
align-items: center;
text-align: center;
color: #FFFFFF;
}
@media screen and (max-width: 375px) {
@media screen and (max-width: 768px) {
.buttonText--add-to-cart-button {
width: 168px;
}

2
styles/css/vtex.product-identifier.css
View File

@ -14,7 +14,7 @@
font-size: 14px;
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
margin-bottom: 8px;
margin-bottom: 24px;
}
.product-identifier__label,

2
styles/css/vtex.product-quantity.css
View File

@ -41,8 +41,6 @@
border-radius: 0;
font-size: 16px;
line-height: 22px;
display: flex;
align-items: center;
color: #000000;
height: 100%;
width: 26px !important;

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

@ -9,6 +9,7 @@
/* Grid breakpoints */
.container--produto-prateleira {
max-width: initial !important;
border-radius: 0;
margin: 0;
}
.container--produto-prateleira :global(.vtex-store-components-3-x-discountContainer) {
@ -20,11 +21,10 @@
.container--produto-prateleira .imageContainer {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 334.4px;
height: 334.4px;
max-width: 314.4px;
height: 314.4px;
background: #EDEDED;
margin: 0;
}
.container--produto-prateleira .nameContainer {
padding: 16px 0 8px;
@ -41,13 +41,18 @@
}
.container--produto-prateleira .imageNormal {
width: 100%;
max-height: 334.4px;
max-height: 314.4px;
max-width: 100%;
}
.container--produto-prateleira .priceContainer {
padding: 0 0 32px;
}
.element--produto-prateleira {
padding: 0;
height: auto;
}
@media screen and (min-width: 1920px) {
.container--produto-prateleira .imageContainer {
max-width: 434.4px;
@ -61,12 +66,12 @@
}
@media screen and (max-width: 1024px) {
.container--produto-prateleira .imageContainer {
max-width: 317.87px;
height: 317.87px;
max-width: 291.2px;
height: 291.2px;
}
.container--produto-prateleira .imageNormal {
width: 100%;
max-height: 317.87px;
max-height: 291.2px;
max-width: 100%;
}
.container--produto-prateleira .nameContainer .productNameContainer {

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

@ -69,6 +69,11 @@
color: #575757;
}
@media screen and (max-width: 1024px) {
.container--title-prateleira .paragraph--title-prateleira {
margin: 0 0 24px;
}
}
@media screen and (max-width: 768px) {
.container--title-prateleira .paragraph--title-prateleira {
font-size: 20px;

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

@ -15,7 +15,7 @@
gap: 16px;
}
.sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
width: 95.96%;
width: 97%;
}
.sliderLayoutContainer--prateleira .slide--prateleira {
margin: 0;
@ -33,7 +33,7 @@
content: "";
position: absolute;
padding: 10px;
left: 1px;
left: 8px;
box-shadow: 2px -2px 0 0px #000 inset;
border: solid transparent;
border-width: 0 0 1px 1px;
@ -51,7 +51,7 @@
content: "";
position: absolute;
padding: 10px;
right: 1px;
right: 8px;
box-shadow: 2px -2px 0 0px #000 inset;
border: solid transparent;
border-width: 0 0 1px 1px;
@ -59,6 +59,7 @@
}
.sliderLayoutContainer--prateleira .paginationDotsContainer {
align-items: center;
bottom: -32px;
}
.sliderLayoutContainer--prateleira .paginationDot--prateleira {
width: 10px;
@ -73,6 +74,11 @@
border: 0.5px solid #000000;
}
@media screen and (min-width: 1920px) {
.sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
width: 98%;
}
}
@media screen and (max-width: 1024px) {
.sliderLayoutContainer--prateleira .sliderTrack--prateleira {
gap: 12px;
@ -80,9 +86,24 @@
.sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
width: 100%;
}
.paginationDotsContainer {
bottom: -24px;
}
}
@media screen and (max-width: 768px) {
.sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
width: 90%;
}
.sliderLayoutContainer--prateleira .sliderTrack--prateleira {
gap: 8px;
}
.sliderLayoutContainer--prateleira .sliderLeftArrow--prateleira {
left: -8px;
}
.sliderLayoutContainer--prateleira .sliderRightArrow--prateleira {
right: -8px;
}
.sliderLayoutContainer--prateleira .paginationDotsContainer {
bottom: -16px;
}
}

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

@ -8,102 +8,6 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.notificationBarContainer {
background-color: black;
height: 34px;
}
.notificationBarContainer .notificationBarInner {
min-height: 34px;
}
.notificationBarContainer .notificationContent {
display: flex;
align-items: center;
gap: 54px;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: #FFFFFF;
}
.notificationBarContainer .notificationContent::before {
content: "";
display: flex;
width: 6px;
height: 6px;
padding: 1px;
box-shadow: 1px -1px 0 0px #fff inset;
border: solid transparent;
border-width: 0 0 1px 1px;
transform: rotate(45deg);
}
.notificationBarContainer .notificationContent::after {
content: "";
display: flex;
width: 6px;
height: 6px;
padding: 1px;
box-shadow: 1px -1px 0 0px #fff inset;
border: solid transparent;
border-width: 0 0 1px 1px;
transform: rotate(-135deg);
}
.logoContainer {
padding: 0;
}
.searchBarContainer {
padding: 0;
}
.searchBarContainer :global(.vtex-input-prefix__group) {
width: 243px;
border: 1px solid #AEAEAE;
border-width: 0 0 1px;
border-radius: 0;
flex-direction: row-reverse;
}
.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) {
background: transparent;
}
.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
padding-left: 12px;
font-weight: 300;
font-size: 12px;
line-height: 16px;
background: transparent;
color: #AEAEAE;
}
.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) {
padding: 0;
}
.searchBarContainer .searchBarIcon {
padding: 0;
}
.searchBarContainer .searchBarIcon .searchIcon,
.searchBarContainer .searchBarIcon .closeIcon {
width: 10px;
height: 10px;
color: #AEAEAE;
}
@media screen and (max-width: 1024px) {
.searchBarContainer {
max-width: 100%;
position: absolute;
bottom: 32px;
}
.searchBarContainer .autoCompleteOuterContainer {
max-width: 100%;
padding: 8px 40px 0;
}
.searchBarContainer .autoCompleteOuterContainer :global(.vtex-input-prefix__group) {
width: 100%;
}
}
@media screen and (max-width: 300px) {
.notificationBarContainer .notificationContent {
gap: 34px;
}
}
.newsletter {
background: red;
}
@ -122,6 +26,7 @@
line-height: 34px;
color: #575757;
text-align: right;
margin-bottom: 8px;
}
.carouselGaleryCursor {
@ -172,7 +77,10 @@
}
.skuSelectorSubcontainer--tamanho .skuSelectorName::after {
content: "OUTROS TAMANHOS:";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.skuSelectorSubcontainer--cor {
@ -180,20 +88,16 @@
}
.skuSelectorSubcontainer--cor .skuSelectorName::after {
content: "OUTRAS CORES";
font-size: 14px;
}
.skuSelectorNameContainer {
margin: 0;
}
.skuSelectorTextContainer {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.skuSelectorNameContainer {
margin: 0;
}
.skuSelectorName,
.skuSelectorSelectorImageValue {
font-size: 0;
@ -244,8 +148,8 @@
.diagonalCross {
background: #d5d5d5;
width: 1px;
height: 38.18px;
left: 19px;
height: 39.18px;
left: 20px;
top: 1px;
transform: rotate(45deg);
}
@ -281,6 +185,7 @@
width: 280px;
height: 49px;
border-radius: 0;
border: 1px solid #CCCCCC;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
padding: 0;
@ -289,8 +194,6 @@
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
text-decoration-line: underline;
color: #000000;
}
@ -301,11 +204,9 @@
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #AFAFAF;
}
.shippingContainer :global(.vtex-address-form-4-x-input)::placeholder {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #AFAFAF;
}
.shippingContainer :global(.vtex-button) {
@ -399,6 +300,7 @@
.productImagesContainer--description {
width: 50%;
max-width: 632px;
max-height: 632px;
}
@ -560,7 +462,7 @@
}
@media screen and (min-width: 1920px) {
.productImagesGallerySwiperContainer .productImageTag--main {
.productImagesContainer--carousel .productImagesGallerySwiperContainer .productImageTag--main {
max-height: 904px !important;
}
.productImagesContainer--description {
@ -578,6 +480,11 @@
font-size: 18px;
line-height: 25px;
}
.productImagesContainer--description {
width: 100%;
max-width: 872px;
max-height: 872px;
}
}
@media screen and (max-width: 1024px) {
.productImageTag--main {
@ -588,6 +495,7 @@
}
.productImagesContainer--description {
width: 100%;
max-width: 100%;
max-height: 944px;
}
.productDescriptionContainer {
@ -647,4 +555,100 @@
bottom: 24px;
left: calc(100% - 48px);
}
}
.notificationBarContainer {
background-color: black;
height: 34px;
}
.notificationBarContainer .notificationBarInner {
min-height: 34px;
}
.notificationBarContainer .notificationContent {
display: flex;
align-items: center;
gap: 54px;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: #FFFFFF;
}
.notificationBarContainer .notificationContent::before {
content: "";
display: flex;
width: 6px;
height: 6px;
padding: 1px;
box-shadow: 1px -1px 0 0px #fff inset;
border: solid transparent;
border-width: 0 0 1px 1px;
transform: rotate(45deg);
}
.notificationBarContainer .notificationContent::after {
content: "";
display: flex;
width: 6px;
height: 6px;
padding: 1px;
box-shadow: 1px -1px 0 0px #fff inset;
border: solid transparent;
border-width: 0 0 1px 1px;
transform: rotate(-135deg);
}
.logoContainer {
padding: 0;
}
.searchBarContainer {
padding: 0;
}
.searchBarContainer :global(.vtex-input-prefix__group) {
width: 243px;
border: 1px solid #AEAEAE;
border-width: 0 0 1px;
border-radius: 0;
flex-direction: row-reverse;
}
.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) {
background: transparent;
}
.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
padding-left: 12px;
font-weight: 300;
font-size: 12px;
line-height: 16px;
background: transparent;
color: #AEAEAE;
}
.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) {
padding: 0;
}
.searchBarContainer .searchBarIcon {
padding: 0;
}
.searchBarContainer .searchBarIcon .searchIcon,
.searchBarContainer .searchBarIcon .closeIcon {
width: 10px;
height: 10px;
color: #AEAEAE;
}
@media screen and (max-width: 1024px) {
.searchBarContainer {
max-width: 100%;
position: absolute;
bottom: 32px;
}
.searchBarContainer .autoCompleteOuterContainer {
max-width: 100%;
padding: 8px 40px 0;
}
.searchBarContainer .autoCompleteOuterContainer :global(.vtex-input-prefix__group) {
width: 100%;
}
}
@media screen and (max-width: 300px) {
.notificationBarContainer .notificationContent {
gap: 34px;
}
}

3
styles/css/vtex.tab-layout.css
View File

@ -29,9 +29,6 @@
font-size: 18px;
line-height: 38px;
text-transform: capitalize;
display: flex;
align-items: center;
text-align: center;
padding: 0 !important;
color: #BFBFBF;
}

9
styles/sass/pages/product/vtex.add-to-cart-button.scss
View File

@ -4,18 +4,15 @@
}
.buttonText--add-to-cart-button {
font-weight: 400;
font-size: 18px;
line-height: 25px;
display: flex;
align-items: center;
text-align: center;
color: #FFFFFF;
}
@media screen and (max-width: 375px) {
@media screen and (max-width: 768px) {
.buttonText--add-to-cart-button {
width: 168px;
}
}
}

4
styles/sass/pages/product/vtex.product-identifier.scss
View File

@ -5,7 +5,7 @@
font-size: 14px;
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
margin-bottom: 8px;
margin-bottom: 24px;
}
.product-identifier__label,
@ -18,4 +18,4 @@
.product-identifier--productReference {
justify-content: flex-start;
}
}
}

4
styles/sass/pages/product/vtex.product-quantity.scss
View File

@ -32,8 +32,6 @@
border-radius: 0;
font-size: 16px;
line-height: 22px;
display: flex;
align-items: center;
color: #000000;
height: 100%;
width: 26px !important;
@ -47,4 +45,4 @@
:global(.vtex-numeric-stepper__plus-button) {
border-width: 1px 1px 1px 0;
justify-content: flex-start;
}
}

21
styles/sass/pages/product/vtex.product-summary.scss
View File

@ -1,5 +1,6 @@
.container--produto-prateleira {
max-width: initial !important;
border-radius: 0;
margin: 0;
:global(.vtex-store-components-3-x-discountContainer) {
@ -13,11 +14,10 @@
.imageContainer {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 334.4px;
height: 334.4px;
max-width: 314.4px;
height: 314.4px;
background: #EDEDED;
margin: 0;
}
.nameContainer {
@ -40,7 +40,7 @@
.imageNormal {
width: 100%;
max-height: 334.4px;
max-height: 314.4px;
max-width: 100%;
}
@ -49,6 +49,11 @@
}
}
.element--produto-prateleira {
padding: 0;
height: auto;
}
@media screen and (min-width: 1920px) {
.container--produto-prateleira {
.imageContainer {
@ -68,13 +73,13 @@
@media screen and (max-width: 1024px) {
.container--produto-prateleira {
.imageContainer {
max-width: 317.87px;
height: 317.87px;
max-width: 291.2px;
height: 291.2px;
}
.imageNormal {
width: 100%;
max-height: 317.87px;
max-height: 291.2px;
max-width: 100%;
}

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

@ -10,6 +10,14 @@
}
}
@media screen and (max-width: 1024px) {
.container--title-prateleira {
.paragraph--title-prateleira {
margin: 0 0 24px;
}
}
}
@media screen and (max-width: 768px) {
.container--title-prateleira {
.paragraph--title-prateleira {

37
styles/sass/pages/product/vtex.slider-layout.scss
View File

@ -7,7 +7,7 @@
}
.sliderTrackContainer--prateleira {
width: 95.96%;
width: 97%;
}
.slide--prateleira {
@ -28,7 +28,7 @@
content: "";
position: absolute;
padding: 10px;
left: 1px;
left: 8px;
box-shadow: 2px -2px 0 0px #000 inset;
border: solid transparent;
border-width: 0 0 1px 1px;
@ -49,7 +49,7 @@
content: "";
position: absolute;
padding: 10px;
right: 1px;
right: 8px;
box-shadow: 2px -2px 0 0px #000 inset;
border: solid transparent;
border-width: 0 0 1px 1px;
@ -59,6 +59,7 @@
.paginationDotsContainer {
align-items: center;
bottom: -32px;
}
.paginationDot--prateleira {
@ -76,6 +77,14 @@
}
}
@media screen and (min-width: 1920px) {
.sliderLayoutContainer--prateleira {
.sliderTrackContainer--prateleira {
width: 98%;
}
}
}
@media screen and (max-width: 1024px) {
.sliderLayoutContainer--prateleira {
.sliderTrack--prateleira {
@ -87,12 +96,34 @@
}
}
.paginationDotsContainer {
bottom: -24px;
}
}
@media screen and (max-width: 768px) {
.sliderLayoutContainer--prateleira {
.sliderTrackContainer--prateleira {
width: 90%;
}
.sliderTrack--prateleira {
gap: 8px;
}
.sliderLeftArrow--prateleira {
left: -8px;
}
.sliderRightArrow--prateleira {
right: -8px;
}
.paginationDotsContainer {
bottom: -16px;
}
}
}

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

@ -16,6 +16,7 @@
line-height: 34px;
color: #575757;
text-align: right;
margin-bottom: 8px;
}
.carouselGaleryCursor {
@ -69,7 +70,10 @@
.skuSelectorName {
&::after {
content: "OUTROS TAMANHOS:";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
}
}
@ -80,7 +84,10 @@
.skuSelectorName {
&::after {
content: "OUTRAS CORES";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
}
}
@ -89,13 +96,6 @@
margin: 0;
}
.skuSelectorTextContainer {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.skuSelectorName,
.skuSelectorSelectorImageValue {
font-size: 0;
@ -150,8 +150,8 @@
.diagonalCross {
background: #d5d5d5;
width: 1px;
height: 38.18px;
left: 19px;
height: 39.18px;
left: 20px;
top: 1px;
transform: rotate(45deg);
}
@ -193,6 +193,7 @@
width: 280px;
height: 49px;
border-radius: 0;
border: 1px solid #CCCCCC;
}
:global(.vtex-address-form__postalCode-forgottenURL) {
@ -202,8 +203,6 @@
:last-child {
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
text-decoration-line: underline;
color: #000000;
}
@ -218,12 +217,9 @@
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #AFAFAF;
&::placeholder {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #AFAFAF;
}
}
@ -341,6 +337,7 @@
.productImagesContainer--description {
width: 50%;
max-width: 632px;
max-height: 632px;
}
@ -544,9 +541,12 @@
@media screen and (min-width: 1920px) {
.productImagesGallerySwiperContainer {
.productImageTag--main {
max-height: 904px !important;
.productImagesContainer--carousel {
.productImagesGallerySwiperContainer {
.productImageTag--main {
max-height: 904px !important;
}
}
}
@ -568,6 +568,12 @@
font-size: 18px;
line-height: 25px;
}
.productImagesContainer--description {
width: 100%;
max-width: 872px;
max-height: 872px;
}
}
@ -583,6 +589,7 @@
.productImagesContainer--description {
width: 100%;
max-width: 100%;
max-height: 944px;
}

3
styles/sass/pages/product/vtex.tab-layout.scss
View File

@ -22,9 +22,6 @@
font-size: 18px;
line-height: 38px;
text-transform: capitalize;
display: flex;
align-items: center;
text-align: center;
padding: 0 !important;
color: #BFBFBF;
}