feat: Responsividade Mobile finalizada
This commit is contained in:
parent
bcc7f9ec18
commit
b378e8a467
@ -46,7 +46,14 @@
|
||||
border-bottom: 1px solid #BFBFBF;
|
||||
}
|
||||
|
||||
.descriptionSectionTitle{
|
||||
font-size: 20px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.descriptionSectionParagraph{
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
@ -160,7 +160,8 @@
|
||||
"blockClass": "container-slider-related-products-pdp",
|
||||
"itemsPerPage": {
|
||||
"desktop": 4,
|
||||
"tablet": 3
|
||||
"tablet": 3,
|
||||
"phone": 2
|
||||
}
|
||||
}
|
||||
},
|
||||
|
@ -42,6 +42,9 @@
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
.flexRowContent--container-quantity-and-buy-button :global(.vtex-button) :global(.vtex-button__label) {
|
||||
padding: 12px 0 !important;
|
||||
}
|
||||
|
||||
.container-quantity-and-buy-button :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
|
||||
width: 100%;
|
||||
@ -60,5 +63,25 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.flexRowContent--container-related-products-pdp {
|
||||
padding: 0 53px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.flexRowContent--container-quantity-and-buy-button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.flexRowContent--container-quantity-and-buy-button :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.flexRowContent--container-quantity-and-buy-button :global(.vtex-button) :global(.vtex-button__label) {
|
||||
display: inline-block;
|
||||
width: 56.7567%;
|
||||
}
|
||||
.flexRowContent--container-related-products-pdp {
|
||||
padding: 0 48px;
|
||||
}
|
||||
}
|
@ -7,10 +7,6 @@
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
/* Grid breakpoints */
|
||||
.quantitySelectorContainer {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.quantitySelectorTitle {
|
||||
display: none;
|
||||
}
|
||||
@ -40,4 +36,10 @@
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.quantitySelectorContainer {
|
||||
width: 128px !important;
|
||||
}
|
||||
}
|
@ -78,4 +78,27 @@
|
||||
}
|
||||
.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .installmentContainer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .nameContainer .productBrand {
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
}
|
||||
.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .listPrice::before {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .listPrice::after {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .listPrice .currencyContainer {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .sellingPriceContainer .currencyContainer {
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
@ -24,4 +24,9 @@
|
||||
.container--title-related-products {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.container--title-related-products .heading--title-related-products {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
@ -44,4 +44,21 @@
|
||||
height: 17px !important;
|
||||
background-color: #FFFFFF;
|
||||
border: 0.5px solid #000000;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.sliderLayoutContainer--container-slider-related-products-pdp .sliderLeftArrow--container-slider-related-products-pdp {
|
||||
left: -23px;
|
||||
}
|
||||
.sliderLayoutContainer--container-slider-related-products-pdp .sliderRightArrow--container-slider-related-products-pdp {
|
||||
right: -22px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.sliderLayoutContainer--container-slider-related-products-pdp .sliderLeftArrow--container-slider-related-products-pdp {
|
||||
left: -21px;
|
||||
}
|
||||
.sliderLayoutContainer--container-slider-related-products-pdp .sliderRightArrow--container-slider-related-products-pdp {
|
||||
right: -20px;
|
||||
}
|
||||
}
|
@ -185,10 +185,10 @@
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
|
||||
color: #000000;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
|
||||
display: none;
|
||||
@ -296,6 +296,8 @@
|
||||
width: 100%;
|
||||
grid-template-areas: "label button" "notCep notCep";
|
||||
grid-template-columns: 83.4459% 1fr;
|
||||
padding-bottom: 23px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.shippingContainer :global(.vtex-address-form__postalCode) {
|
||||
padding: 0;
|
||||
|
@ -52,11 +52,15 @@
|
||||
.listContainer--container-list-tab-layout-pdp {
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
border-top: 1px solid #B9B9B9;
|
||||
}
|
||||
.listContainer--container-list-tab-layout-pdp .listItem {
|
||||
width: max-content;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.listContainer--container-list-tab-layout-pdp .listItem:first-child {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.listContainer--container-list-tab-layout-pdp .listItemActive {
|
||||
border: 0;
|
||||
|
@ -36,6 +36,10 @@
|
||||
background-color: #000000;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
|
||||
:global(.vtex-button__label){
|
||||
padding: 12px 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -58,6 +62,33 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.flexRowContent--container-related-products-pdp{
|
||||
padding: 0 53px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.flexRowContent--container-quantity-and-buy-button{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
:global(.vtex-flex-layout-0-x-stretchChildrenWidth){
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
:global(.vtex-button){
|
||||
:global(.vtex-button__label){
|
||||
display: inline-block;
|
||||
width: 56.7567%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flexRowContent--container-related-products-pdp{
|
||||
padding: 0 48px;
|
||||
}
|
||||
}
|
||||
|
@ -1,7 +1,3 @@
|
||||
.quantitySelectorContainer{
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.quantitySelectorTitle {
|
||||
display: none;
|
||||
}
|
||||
@ -36,3 +32,9 @@
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.quantitySelectorContainer{
|
||||
width: 128px !important;
|
||||
}
|
||||
}
|
||||
|
@ -86,3 +86,42 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.containerNormal--container-product-summary-related-products-pdp{
|
||||
.element--container-product-summary-related-products-pdp{
|
||||
.nameContainer{
|
||||
.productBrand{
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.priceContainer{
|
||||
.listPrice{
|
||||
&::before{
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
&::after{
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.currencyContainer{
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.sellingPriceContainer{
|
||||
.currencyContainer{
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -18,3 +18,11 @@
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.container--title-related-products{
|
||||
.heading--title-related-products{
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -46,4 +46,26 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.sliderLayoutContainer--container-slider-related-products-pdp {
|
||||
.sliderLeftArrow--container-slider-related-products-pdp{
|
||||
left: -23px;
|
||||
}
|
||||
|
||||
.sliderRightArrow--container-slider-related-products-pdp{
|
||||
right: -22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.sliderLayoutContainer--container-slider-related-products-pdp {
|
||||
.sliderLeftArrow--container-slider-related-products-pdp{
|
||||
left: -21px;
|
||||
}
|
||||
|
||||
.sliderRightArrow--container-slider-related-products-pdp{
|
||||
right: -20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -207,10 +207,10 @@
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-decoration-line: underline;
|
||||
|
||||
:last-child{
|
||||
color: #000000;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
:global(.vtex__icon-external-link){
|
||||
@ -341,6 +341,8 @@
|
||||
grid-template-areas: "label button"
|
||||
"notCep notCep";
|
||||
grid-template-columns: 83.4459% 1fr;
|
||||
padding-bottom: 23px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
:global(.vtex-address-form__postalCode){
|
||||
padding: 0;
|
||||
|
@ -54,11 +54,18 @@
|
||||
.listContainer--container-list-tab-layout-pdp{
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
gap: 16px;
|
||||
// gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
border-top: 1px solid #B9B9B9;
|
||||
|
||||
.listItem{
|
||||
width: max-content;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&:first-child{
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.listItemActive{
|
||||
|
Loading…
Reference in New Issue
Block a user