forked from M3-Academy/challenge-vtex-io
Merge pull request 'development' (#22) from development into feature/shelf
Reviewed-on: #22
This commit is contained in:
commit
a33e7aa6db
@ -137,7 +137,7 @@
|
||||
"props": {
|
||||
"blockClass": "cart"
|
||||
},
|
||||
"children": ["product-quantity", "flex-layout.row#buy-button"]
|
||||
"children": ["product-quantity#qtd", "flex-layout.row#buy-button"]
|
||||
},
|
||||
"flex-layout.row#product-name": {
|
||||
"props": {
|
||||
@ -152,11 +152,20 @@
|
||||
"showValueNameForImageVariation": true
|
||||
}
|
||||
},
|
||||
|
||||
"product-quantity#qtd": {
|
||||
"props": {
|
||||
"width": "25%",
|
||||
"size": "regular",
|
||||
"blockClass": "buyQtd"
|
||||
}
|
||||
//"children": ["product-quantity"]
|
||||
},
|
||||
"flex-layout.row#buy-button": {
|
||||
"props": {
|
||||
"width": "80%",
|
||||
"blockClass": "buyButton"
|
||||
"blockClass": "buyButton",
|
||||
"marginTop": "4",
|
||||
"marginBottom": "7",
|
||||
"paddingRight": "0"
|
||||
},
|
||||
|
||||
"children": ["add-to-cart-button"]
|
||||
@ -303,7 +312,7 @@
|
||||
"props": {
|
||||
"itemsPerPage": {
|
||||
"desktop": 4,
|
||||
"tablet": 1,
|
||||
"tablet": 3,
|
||||
"phone": 1
|
||||
},
|
||||
"infinite": true,
|
||||
|
||||
@ -8,10 +8,27 @@
|
||||
/* Media Query M3 */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
/* Grid breakpoints */
|
||||
.homeIcon {
|
||||
.container {
|
||||
margin-left: 40px;
|
||||
}
|
||||
.container .homeIcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.homeLink::after {
|
||||
content: "Home";
|
||||
.container .Link,
|
||||
.container .term {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
.container .homeLink::after {
|
||||
content: "Home";
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
@ -9,11 +9,23 @@
|
||||
/* Media Query M3 */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
/* Grid breakpoints */
|
||||
.flexRowContent {
|
||||
margin: 8px 0 0 0px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:global(.vtex-stack-layout-0-x-stackItem) .flexRow {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.flexRow--buyButton .flexRowContent {
|
||||
margin: 0 0 0 0 !important;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.flexRowContent--cart {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 25px;
|
||||
gap: 10px;
|
||||
}
|
||||
.flexRowContent--cart .flexRow--buyButton :global(.vtex-button) {
|
||||
background-color: black;
|
||||
@ -30,3 +42,10 @@
|
||||
line-height: 25px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) and (min-width: 768px) {
|
||||
.flexRowContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@ -1,79 +1,27 @@
|
||||
.listPrice {
|
||||
color: #727273;
|
||||
margin-bottom: .25rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/*
|
||||
0 - 600PX: Phone
|
||||
600 - 900px: Table portrait
|
||||
900 - 1200px: Tablet landscape
|
||||
[1200 - 1800] is where our nortal styles apply
|
||||
1800px + : Big desktop
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
/* Grid breakpoints */
|
||||
.sellingPrice {
|
||||
color: #3f3f40;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.sellingPriceValue {
|
||||
font-size: 2.25rem;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 25px;
|
||||
line-height: 38px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.installments {
|
||||
color: #727273;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.savings {
|
||||
font-weight: 500;
|
||||
color: #79B03A;
|
||||
}
|
||||
|
||||
.sellingPriceValue--summary {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #2E2E2E;
|
||||
}
|
||||
|
||||
.savings--summary {
|
||||
background: #8BC34A;
|
||||
border-radius: 1000px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
vertical-align: baseline;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.savings-discount--summary {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
vertical-align: baseline;
|
||||
color: #FFFFFF;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.listPrice--summary {
|
||||
margin-bottom: 0.25rem;
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
.installments--summary {
|
||||
margin-bottom: 2rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.savings--summaryPercentage {
|
||||
background: #0f3e99;
|
||||
border-radius: 1000px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.savingsPercentage--summaryPercentage {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
vertical-align: baseline;
|
||||
color: #FFFFFF;
|
||||
padding: 0.25rem 0.5rem 0.25rem 0.5rem;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #929292;
|
||||
}
|
||||
@ -1,42 +1,10 @@
|
||||
.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
|
||||
opacity: 0;
|
||||
transition: opacity 200ms ease-in-out;
|
||||
}
|
||||
|
||||
.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 40em) {
|
||||
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nameContainer {
|
||||
justify-content: start;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.brandName {
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
color: #2E2E2E;
|
||||
}
|
||||
|
||||
.container {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
/*
|
||||
0 - 600PX: Phone
|
||||
600 - 900px: Table portrait
|
||||
900 - 1200px: Tablet landscape
|
||||
[1200 - 1800] is where our nortal styles apply
|
||||
1800px + : Big desktop
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
/* Grid breakpoints */
|
||||
@ -10,20 +10,22 @@
|
||||
/* Grid breakpoints */
|
||||
.container {
|
||||
max-width: 100%;
|
||||
margin: 0 0 0 0 !important;
|
||||
margin: 0 40px 0 40px !important;
|
||||
}
|
||||
|
||||
.productImageTag {
|
||||
max-height: none !important;
|
||||
}
|
||||
|
||||
.thumbImg {
|
||||
width: 86%;
|
||||
margin: 0;
|
||||
/*
|
||||
.productImagesGallerySlide {
|
||||
.productImageTag {
|
||||
width: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
*/
|
||||
.productImagesThumb {
|
||||
height: auto !important;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.productBrand {
|
||||
@ -159,6 +161,99 @@
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.shippingTableRadioBtn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.shippingTableHead {
|
||||
display: grid;
|
||||
position: relative;
|
||||
right: 60px;
|
||||
}
|
||||
|
||||
.shippingTable {
|
||||
border: none;
|
||||
grid-template-columns: none !important;
|
||||
}
|
||||
|
||||
.shippingTableRow {
|
||||
display: grid;
|
||||
grid-template-columns: 200px 200px 200px;
|
||||
}
|
||||
|
||||
.shippingTableCellDeliveryName {
|
||||
order: 0;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #afafaf;
|
||||
}
|
||||
|
||||
.shippingTableCellDeliveryPrice {
|
||||
order: 1;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #afafaf;
|
||||
}
|
||||
|
||||
.shippingTableCellDeliveryEstimate {
|
||||
order: 2;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #afafaf;
|
||||
}
|
||||
|
||||
.shippingTableHeadDeliveryName {
|
||||
order: 0;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #202020;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.shippingTableHeadDeliveryPrice {
|
||||
order: 1;
|
||||
font-size: 0;
|
||||
}
|
||||
.shippingTableHeadDeliveryPrice::before {
|
||||
content: "FRETE";
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #202020;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.shippingTableHeadDeliveryEstimate {
|
||||
order: 2;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #202020;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.productDescriptionContainer .productDescriptionTitle {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
@ -175,3 +270,110 @@
|
||||
line-height: 22px;
|
||||
color: #929292;
|
||||
}
|
||||
|
||||
.newsletter {
|
||||
background: black;
|
||||
border-bottom: 1px solid #ffffff;
|
||||
margin: 64px 0 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.newsletter .container {
|
||||
padding: 32px 0 16px 0;
|
||||
}
|
||||
.newsletter .label {
|
||||
font-size: 0;
|
||||
}
|
||||
.newsletter .label::before {
|
||||
content: "Assine nossa newsletter";
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.newsletter .label::after {
|
||||
content: "Receba ofertas e novidades por e-mail";
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
color: #929292;
|
||||
}
|
||||
.newsletter :global(.vtex-input-prefix__group) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
border-bottom: 1px solid #929292;
|
||||
border-radius: 0;
|
||||
}
|
||||
.newsletter :global(.vtex-styleguide-9-x-input) {
|
||||
background: transparent;
|
||||
padding: 0 0 0 0;
|
||||
width: 774px;
|
||||
}
|
||||
.newsletter :global(.vtex-button) {
|
||||
position: relative;
|
||||
right: 40px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
border-bottom: 3px solid #bfbfbf;
|
||||
}
|
||||
.newsletter :global(.vtex-button):hover {
|
||||
border-bottom: 5px solid #bfbfbf;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.label::after {
|
||||
content: "Receba ofertas e novidades por e-mail";
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
color: #929292;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.productDescriptionTitle {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color: #575757;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.productDescriptionText {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) and (min-width: 768px) {
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@ -9,7 +9,7 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
/* Grid breakpoints */
|
||||
.container {
|
||||
margin-bottom: 16px;
|
||||
padding: 0 40px 16px 40px;
|
||||
}
|
||||
|
||||
.listContainer {
|
||||
@ -62,3 +62,19 @@
|
||||
flex-direction: row;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) and (min-width: 768px) {
|
||||
.listContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.contentItem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-bottom: 1px solid #b9b9b9;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
.productDescriptionText {
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
@ -1,8 +1,26 @@
|
||||
.homeIcon {
|
||||
display: none;
|
||||
}
|
||||
.homeLink {
|
||||
&::after {
|
||||
content: "Home";
|
||||
.container {
|
||||
margin-left: 40px;
|
||||
.homeIcon {
|
||||
display: none;
|
||||
}
|
||||
.Link,
|
||||
.term {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
.homeLink {
|
||||
&::after {
|
||||
content: "Home";
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,24 @@
|
||||
.flexRow {
|
||||
}
|
||||
.flexRowContent {
|
||||
margin: 8px 0 0 0px;
|
||||
padding: 0;
|
||||
}
|
||||
:global(.vtex-stack-layout-0-x-stackItem) {
|
||||
.flexRow {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.flexRow--buyButton {
|
||||
.flexRowContent {
|
||||
margin: 0 0 0 0 !important;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.flexRowContent--cart {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 25px;
|
||||
gap: 10px;
|
||||
.flexRow--buyButton {
|
||||
:global(.vtex-button) {
|
||||
background-color: black;
|
||||
@ -21,3 +37,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1024px) and (min-width: 768px) {
|
||||
.flexRowContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
17
styles/sass/pages/product/vtex.product-price.scss
Normal file
17
styles/sass/pages/product/vtex.product-price.scss
Normal file
@ -0,0 +1,17 @@
|
||||
.sellingPrice {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 25px;
|
||||
line-height: 38px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.installments {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #929292;
|
||||
}
|
||||
2
styles/sass/pages/product/vtex.product-summary.scss
Normal file
2
styles/sass/pages/product/vtex.product-summary.scss
Normal file
@ -0,0 +1,2 @@
|
||||
@media screen and (max-width: 1024px) and (min-width: 768px) {
|
||||
}
|
||||
@ -10,3 +10,5 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
@media screen and (max-width: 1024px) and (min-width: 768px) {
|
||||
}
|
||||
|
||||
@ -1,20 +1,22 @@
|
||||
.container {
|
||||
max-width: 100%;
|
||||
margin: 0 0 0 0 !important;
|
||||
margin: 0 40px 0 40px !important;
|
||||
}
|
||||
|
||||
.productImageTag {
|
||||
max-height: none !important;
|
||||
}
|
||||
|
||||
.thumbImg {
|
||||
width: 86%;
|
||||
margin: 0;
|
||||
/*
|
||||
.productImagesGallerySlide {
|
||||
.productImageTag {
|
||||
width: 800px;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
.productImagesThumb {
|
||||
height: auto !important;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.productBrand {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
@ -159,7 +161,91 @@
|
||||
top: 8px;
|
||||
}
|
||||
}
|
||||
.shippingTableRadioBtn {
|
||||
display: none;
|
||||
}
|
||||
.shippingTableHead {
|
||||
display: grid;
|
||||
position: relative;
|
||||
right: 60px;
|
||||
}
|
||||
.shippingTable {
|
||||
border: none;
|
||||
|
||||
grid-template-columns: none !important;
|
||||
}
|
||||
.shippingTableRow {
|
||||
display: grid;
|
||||
grid-template-columns: 200px 200px 200px;
|
||||
}
|
||||
.shippingTableCellDeliveryName {
|
||||
order: 0;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #afafaf;
|
||||
}
|
||||
.shippingTableCellDeliveryPrice {
|
||||
order: 1;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #afafaf;
|
||||
}
|
||||
.shippingTableCellDeliveryEstimate {
|
||||
order: 2;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #afafaf;
|
||||
}
|
||||
|
||||
.shippingTableHeadDeliveryName {
|
||||
order: 0;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #202020;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.shippingTableHeadDeliveryPrice {
|
||||
order: 1;
|
||||
font-size: 0;
|
||||
&::before {
|
||||
content: "FRETE";
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #202020;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
.shippingTableHeadDeliveryEstimate {
|
||||
order: 2;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #202020;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
//Estilização da descrição do produto
|
||||
.productDescriptionContainer {
|
||||
.productDescriptionTitle {
|
||||
@ -179,3 +265,108 @@
|
||||
color: #929292;
|
||||
}
|
||||
}
|
||||
|
||||
.newsletter {
|
||||
background: black;
|
||||
border-bottom: 1px solid #ffffff;
|
||||
margin: 64px 0 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.container {
|
||||
padding: 32px 0 16px 0;
|
||||
}
|
||||
.label {
|
||||
font-size: 0;
|
||||
&::before {
|
||||
content: "Assine nossa newsletter";
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
|
||||
color: #ffffff;
|
||||
}
|
||||
&::after {
|
||||
content: "Receba ofertas e novidades por e-mail";
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
color: #929292;
|
||||
}
|
||||
}
|
||||
:global(.vtex-input-prefix__group) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
border-bottom: 1px solid #929292;
|
||||
border-radius: 0;
|
||||
}
|
||||
:global(.vtex-styleguide-9-x-input) {
|
||||
background: transparent;
|
||||
padding: 0 0 0 0;
|
||||
width: 774px;
|
||||
}
|
||||
:global(.vtex-button) {
|
||||
position: relative;
|
||||
right: 40px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
border-bottom: 3px solid #bfbfbf;
|
||||
&:hover {
|
||||
border-bottom: 5px solid #bfbfbf;
|
||||
}
|
||||
}
|
||||
}
|
||||
.label {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
}
|
||||
.label::after {
|
||||
content: "Receba ofertas e novidades por e-mail";
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
color: #929292;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.productDescriptionTitle {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color: #575757;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.productDescriptionText {
|
||||
text-align: left;
|
||||
}
|
||||
@media screen and (max-width: 1024px) and (min-width: 768px) {
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.container {
|
||||
margin-bottom: 16px;
|
||||
padding: 0 40px 16px 40px;
|
||||
}
|
||||
.listContainer {
|
||||
display: flex;
|
||||
@ -52,3 +52,18 @@
|
||||
flex-direction: row;
|
||||
gap: 32px;
|
||||
}
|
||||
@media screen and (max-width: 1024px) and (min-width: 768px) {
|
||||
.listContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.contentItem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-bottom: 1px solid #b9b9b9;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
.productDescriptionText {
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user