feat(responsividade): Adiciona responsividade tamanho ultrawite a pagina
This commit is contained in:
parent
b4053515a5
commit
124a480c51
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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,
|
||||
|
@ -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;
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
@ -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 {
|
||||
@ -648,3 +556,99 @@
|
||||
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;
|
||||
}
|
||||
}
|
@ -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;
|
||||
}
|
||||
|
@ -4,17 +4,14 @@
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
@ -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,
|
||||
|
@ -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;
|
||||
|
@ -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%;
|
||||
}
|
||||
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
@ -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,11 +541,14 @@
|
||||
|
||||
|
||||
@media screen and (min-width: 1920px) {
|
||||
|
||||
.productImagesContainer--carousel {
|
||||
.productImagesGallerySwiperContainer {
|
||||
.productImageTag--main {
|
||||
max-height: 904px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.productImagesContainer--description {
|
||||
max-height: 872px;
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user