feat: adiciona css layout ultrawide

This commit is contained in:
SamuelCondack 2023-02-09 11:11:20 -03:00
parent db362ddb08
commit c46226c691
9 changed files with 68 additions and 20 deletions

View File

@ -347,15 +347,14 @@
"html#selling-price",
"html#product-installments",
"html#pixacademy",
"availability-subscriber",
"html#sku-selector",
"html#quantityAndButton",
"Placeholder",
"product-assembly-options",
"product-gifts",
"availability-subscriber",
"html#shipping-simulator"
]
},
"html#selling-price": {
"props": {
"testId": "product-price"
@ -452,8 +451,8 @@
"children": [
"html#product-name",
"html#codigo",
"html#sku-selector",
"flex-layout.row#availability"
"flex-layout.row#availability",
"html#sku-selector"
]
},
"html#codigo": {

View File

@ -8,15 +8,12 @@
/* Media Query M3 */
/* Grid breakpoints */
.container {
padding-left: 40px;
padding: 16px 40px;
margin: 0 auto;
max-width: 96rem;
display: flex;
align-items: center;
}
@media (max-width: 1024px) {
.container {
margin-bottom: 16px;
}
}
.container .homeLink .homeIcon {
display: none;
}

View File

@ -10,6 +10,10 @@
.sliderLayoutContainer {
padding: 0 40px 32px;
margin-bottom: 32px;
padding: 16px 40px;
margin-left: auto;
margin-right: auto;
max-width: 96rem;
}
.sliderLayoutContainer .sliderLeftArrow {
left: 36px;

View File

@ -547,6 +547,10 @@
display: none;
}
.subscriberContainer {
margin-bottom: 56px;
}
.carouselGaleryThumbs :first-child {
height: 90px;
}

View File

@ -14,6 +14,9 @@
padding-right: 40px;
padding-left: 40px;
justify-content: space-around;
padding: 16px 40px;
margin: 0 auto;
max-width: 96rem;
}
@media (max-width: 1024px) {
.listContainer {
@ -30,6 +33,13 @@
position: relative;
top: 0px;
}
}
@media (max-width: 1024px) and (max-width: 1024px) {
.listContainer::before {
margin-bottom: 8px;
}
}
@media (max-width: 1024px) {
.listContainer::after {
bottom: 0px;
}
@ -43,10 +53,17 @@
position: relative;
bottom: 9px;
}
@media (max-width: 1024px) {
.listContainer::after {
bottom: 0 !important;
margin-top: 8px !important;
}
}
@media (max-width: 1024px) {
.listItem {
margin: 0;
margin-top: 8px;
margin-bottom: 8px;
padding: 0;
}
.listItem :global(.vtex-button) {
@ -54,7 +71,12 @@
padding: 0;
}
.listItem :global(.vtex-button) :global(.vtex-button__label) {
padding: 0;
padding: 0 !important;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
}
}

View File

@ -1,11 +1,9 @@
.container {
padding-left: 40px;
padding: 16px 40px;
margin: 0 auto;
max-width: 96rem;
display: flex;
align-items: center;
@media (max-width: 1024px){
margin-bottom: 16px;
}
.homeLink {
.homeIcon {
display: none;

View File

@ -1,6 +1,10 @@
.sliderLayoutContainer {
padding: 0 40px 32px;
margin-bottom: 32px;
padding: 16px 40px;
margin-left: auto;
margin-right: auto;
max-width: 96rem;
.sliderLeftArrow {
left: 36px;

View File

@ -572,6 +572,9 @@
}
}
}
.subscriberContainer{
margin-bottom: 56px;
}
.carouselGaleryThumbs {
:first-child {
height: 90px;

View File

@ -5,6 +5,9 @@
padding-right: 40px;
padding-left: 40px;
justify-content: space-around;
padding: 16px 40px;
margin: 0 auto;
max-width: 96rem;
@media (max-width: 1024px) {
flex-direction: column;
padding: 0 40px 16px;
@ -18,6 +21,9 @@
height: 1px;
position: relative;
top: 0px;
@media (max-width: 1024px){
margin-bottom: 8px;
}
}
&::after {
@ -32,17 +38,28 @@
height: 1px;
position: relative;
bottom: 9px;
@media (max-width: 1024px){
bottom: 0 !important;
margin-top: 8px !important;
}
}
}
.listItem {
@media (max-width: 1024px) {
margin: 0;
margin-top: 8px;
margin-bottom: 8px;
padding: 0;
:global(.vtex-button) {
margin: 0;
padding: 0;
:global(.vtex-button__label) {
padding: 0;
padding: 0 !important;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
}
}
}