forked from M3-Academy/challenge-vtex-io
Merge pull request 'development' (#18) from development into feature/productPurchase
Reviewed-on: #18
This commit is contained in:
commit
35b8f303a9
@ -9,7 +9,10 @@
|
|||||||
"list-context.product-list#shelf",
|
"list-context.product-list#shelf",
|
||||||
"newsletter",
|
"newsletter",
|
||||||
"product-questions-and-answers"
|
"product-questions-and-answers"
|
||||||
]
|
],
|
||||||
|
"props": {
|
||||||
|
"blockClass": "productAll"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"html#breadcrumb": {
|
"html#breadcrumb": {
|
||||||
"props": {
|
"props": {
|
||||||
@ -126,7 +129,6 @@
|
|||||||
"flex-layout.row#cart",
|
"flex-layout.row#cart",
|
||||||
"product-assembly-options",
|
"product-assembly-options",
|
||||||
"product-gifts",
|
"product-gifts",
|
||||||
|
|
||||||
"availability-subscriber",
|
"availability-subscriber",
|
||||||
"shipping-simulator"
|
"shipping-simulator"
|
||||||
]
|
]
|
||||||
@ -135,7 +137,7 @@
|
|||||||
"props": {
|
"props": {
|
||||||
"blockClass": "cart"
|
"blockClass": "cart"
|
||||||
},
|
},
|
||||||
"children": ["product-quantity", "flex-layout.row#buy-button"]
|
"children": ["product-quantity#qtd", "flex-layout.row#buy-button"]
|
||||||
},
|
},
|
||||||
"flex-layout.row#product-name": {
|
"flex-layout.row#product-name": {
|
||||||
"props": {
|
"props": {
|
||||||
@ -150,11 +152,20 @@
|
|||||||
"showValueNameForImageVariation": true
|
"showValueNameForImageVariation": true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"product-quantity#qtd": {
|
||||||
|
"props": {
|
||||||
|
"width": "25%",
|
||||||
|
"size": "regular",
|
||||||
|
"blockClass": "buyQtd"
|
||||||
|
}
|
||||||
|
//"children": ["product-quantity"]
|
||||||
|
},
|
||||||
"flex-layout.row#buy-button": {
|
"flex-layout.row#buy-button": {
|
||||||
"props": {
|
"props": {
|
||||||
"width": "80%",
|
"blockClass": "buyButton",
|
||||||
"blockClass": "buyButton"
|
"marginTop": "4",
|
||||||
|
"marginBottom": "7",
|
||||||
|
"paddingRight": "0"
|
||||||
},
|
},
|
||||||
|
|
||||||
"children": ["add-to-cart-button"]
|
"children": ["add-to-cart-button"]
|
||||||
@ -200,7 +211,13 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"tab-list#product": {
|
"tab-list#product": {
|
||||||
"children": ["tab-list.item#product1", "tab-list.item#product2"]
|
"children": [
|
||||||
|
"tab-list.item#product1",
|
||||||
|
"tab-list.item#product2",
|
||||||
|
"tab-list.item#product3",
|
||||||
|
"tab-list.item#product4",
|
||||||
|
"tab-list.item#product5"
|
||||||
|
]
|
||||||
},
|
},
|
||||||
"tab-list.item#product1": {
|
"tab-list.item#product1": {
|
||||||
"props": {
|
"props": {
|
||||||
@ -215,8 +232,32 @@
|
|||||||
"label": "Descrição"
|
"label": "Descrição"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"tab-list.item#product3": {
|
||||||
|
"props": {
|
||||||
|
"tabId": "product3",
|
||||||
|
"label": "Descrição"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-list.item#product4": {
|
||||||
|
"props": {
|
||||||
|
"tabId": "product4",
|
||||||
|
"label": "Descrição"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-list.item#product5": {
|
||||||
|
"props": {
|
||||||
|
"tabId": "product5",
|
||||||
|
"label": "Descrição"
|
||||||
|
}
|
||||||
|
},
|
||||||
"tab-content#product": {
|
"tab-content#product": {
|
||||||
"children": ["tab-content.item#product1", "tab-content.item#product2"]
|
"children": [
|
||||||
|
"tab-content.item#product1",
|
||||||
|
"tab-content.item#product2",
|
||||||
|
"tab-content.item#product3",
|
||||||
|
"tab-content.item#product4",
|
||||||
|
"tab-content.item#product5"
|
||||||
|
]
|
||||||
},
|
},
|
||||||
"tab-content.item#product1": {
|
"tab-content.item#product1": {
|
||||||
"children": ["product-images#descricao", "product-description"],
|
"children": ["product-images#descricao", "product-description"],
|
||||||
@ -225,17 +266,47 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"tab-content.item#product2": {
|
"tab-content.item#product2": {
|
||||||
"children": ["product-description"],
|
"children": ["product-images#descricao", "product-description"],
|
||||||
"props": {
|
"props": {
|
||||||
"tabId": "product2"
|
"tabId": "product2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"tab-content.item#product3": {
|
||||||
|
"children": ["product-images#descricao", "product-description"],
|
||||||
|
"props": {
|
||||||
|
"tabId": "product3"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-content.item#product4": {
|
||||||
|
"children": ["product-images#descricao", "product-description"],
|
||||||
|
"props": {
|
||||||
|
"tabId": "product4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-content.item#product5": {
|
||||||
|
"children": ["product-images#descricao", "product-description"],
|
||||||
|
"props": {
|
||||||
|
"tabId": "product5"
|
||||||
|
}
|
||||||
|
},
|
||||||
"list-context.product-list#shelf": {
|
"list-context.product-list#shelf": {
|
||||||
"blocks": ["product-summary.shelf#shelf"],
|
"blocks": ["product-summary.shelf#shelf"],
|
||||||
"children": ["slider-layout#shelf-products"]
|
"children": ["rich-text#shelf", "slider-layout#shelf-products"]
|
||||||
|
},
|
||||||
|
"rich-text#shelf": {
|
||||||
|
"props": {
|
||||||
|
"textAlignment": "CENTER",
|
||||||
|
"textPosition": "CENTER",
|
||||||
|
"text": "Você também pode gostar: ",
|
||||||
|
"blockClass": "shelfTitle"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"product-summary.shelf#shelf": {
|
"product-summary.shelf#shelf": {
|
||||||
"children": ["product-summary-image#shelf", "product-summary-price"]
|
"children": [
|
||||||
|
"product-summary-image#shelf",
|
||||||
|
"product-summary-name",
|
||||||
|
"product-summary-price"
|
||||||
|
]
|
||||||
},
|
},
|
||||||
"slider-layout#shelf-products": {
|
"slider-layout#shelf-products": {
|
||||||
"props": {
|
"props": {
|
||||||
|
|||||||
@ -8,10 +8,27 @@
|
|||||||
/* Media Query M3 */
|
/* Media Query M3 */
|
||||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||||
/* Grid breakpoints */
|
/* Grid breakpoints */
|
||||||
.homeIcon {
|
.container {
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
.container .homeIcon {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
.container .Link,
|
||||||
.homeLink::after {
|
.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";
|
content: "Home";
|
||||||
|
font-family: "Open Sans";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
color: #929292;
|
||||||
}
|
}
|
||||||
@ -7,4 +7,12 @@
|
|||||||
*/
|
*/
|
||||||
/* Media Query M3 */
|
/* Media Query M3 */
|
||||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||||
/* Grid breakpoints */
|
/* Grid breakpoints */
|
||||||
|
.container--shelfTitle {
|
||||||
|
font-family: "Open Sans";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 38px;
|
||||||
|
color: #575757;
|
||||||
|
}
|
||||||
@ -1,31 +1,22 @@
|
|||||||
|
/*
|
||||||
|
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 */
|
||||||
|
/*.sliderLayoutContainer {
|
||||||
|
margin: 0 40px 0 40px;
|
||||||
|
.sliderRightArrow {
|
||||||
|
right: 100px;
|
||||||
|
}
|
||||||
|
}*/
|
||||||
.sliderLayoutContainer {
|
.sliderLayoutContainer {
|
||||||
|
width: 95%;
|
||||||
|
padding: 0 16px 0 16px;
|
||||||
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sliderLayoutContainer--carousel {
|
|
||||||
background-color: #F0F0F0;
|
|
||||||
min-height: 450px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sliderTrackContainer {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.paginationDotsContainer {
|
|
||||||
margin-top: .5rem;
|
|
||||||
margin-bottom: .5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layoutContainer--shelf {
|
|
||||||
margin-top: 20px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
max-width: 96rem;
|
|
||||||
min-height: 550px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide--shelf {
|
|
||||||
margin-bottom: 25px;
|
|
||||||
padding-left: .5rem;
|
|
||||||
padding-right: .5rem;
|
|
||||||
min-height: 550px;
|
|
||||||
}
|
|
||||||
@ -157,4 +157,93 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
left: 70px;
|
left: 70px;
|
||||||
top: 8px;
|
top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productDescriptionContainer .productDescriptionTitle {
|
||||||
|
font-family: "Open Sans";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 32px;
|
||||||
|
color: #575757;
|
||||||
|
}
|
||||||
|
.productDescriptionContainer .productDescriptionText {
|
||||||
|
font-family: "Open Sans";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 22px;
|
||||||
|
color: #929292;
|
||||||
|
}
|
||||||
|
|
||||||
|
.newsletter {
|
||||||
|
margin-top: 64px;
|
||||||
|
}
|
||||||
|
.newsletter .container {
|
||||||
|
display: flex;
|
||||||
|
height: 175px;
|
||||||
|
padding: 0 0 0 0;
|
||||||
|
background: black;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.newsletter .container .label {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
.newsletter .container .label::before {
|
||||||
|
content: "Assine nossa Newsletter";
|
||||||
|
font-family: "Open Sans";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 38px;
|
||||||
|
text-align: center;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.newsletter .container .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 .container :global(.vtex-input-prefix__group) {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
width: 774px;
|
||||||
|
border-top: none;
|
||||||
|
border-right: none;
|
||||||
|
border-left: none;
|
||||||
|
border-bottom: 1px solid #929292;
|
||||||
|
}
|
||||||
|
.newsletter .container :global(.vtex-styleguide-9-x-input) {
|
||||||
|
background: transparent;
|
||||||
|
padding: 0 0 0 0;
|
||||||
|
}
|
||||||
|
.newsletter .container :global(.vtex-button) {
|
||||||
|
position: relative;
|
||||||
|
left: 145px;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
border-bottom: 3px solid #bfbfbf;
|
||||||
|
}
|
||||||
|
.newsletter .container :global(.vtex-button):hover {
|
||||||
|
border-bottom: 5px solid #bfbfbf;
|
||||||
|
}
|
||||||
|
.newsletter .container :global(.vtex-button) :global(.vtex-button__label) {
|
||||||
|
font-family: "Open Sans";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
text-align: center;
|
||||||
|
color: #ffffff;
|
||||||
|
border: 1px solid #000000;
|
||||||
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
@ -1,4 +1,64 @@
|
|||||||
|
/*
|
||||||
|
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 */
|
||||||
|
.container {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listContainer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 1px solid #b9b9b9;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
.listContainer .listItem {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.listContainer .listItem :global(.vtex-button) {
|
||||||
|
background: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
|
||||||
|
font-family: "Open Sans";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 38px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
color: #bfbfbf;
|
||||||
|
text-transform: initial;
|
||||||
|
}
|
||||||
|
.listContainer .listItemActive :global(.vtex-button) {
|
||||||
|
background: white;
|
||||||
|
border-bottom: 2px solid #000000;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) {
|
||||||
|
font-family: "Open Sans";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 38px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
color: #000000;
|
||||||
|
text-transform: initial;
|
||||||
|
}
|
||||||
|
|
||||||
.contentItem {
|
.contentItem {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
gap: 32px;
|
||||||
|
}
|
||||||
@ -1,8 +1,26 @@
|
|||||||
.homeIcon {
|
.container {
|
||||||
display: none;
|
margin-left: 40px;
|
||||||
}
|
.homeIcon {
|
||||||
.homeLink {
|
display: none;
|
||||||
&::after {
|
}
|
||||||
content: "Home";
|
.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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,9 @@
|
|||||||
|
.container--shelfTitle {
|
||||||
|
font-family: "Open Sans";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 38px;
|
||||||
|
|
||||||
|
color: #575757;
|
||||||
|
}
|
||||||
12
styles/sass/pages/product/vtex.slider-layout.scss
Normal file
12
styles/sass/pages/product/vtex.slider-layout.scss
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
/*.sliderLayoutContainer {
|
||||||
|
margin: 0 40px 0 40px;
|
||||||
|
.sliderRightArrow {
|
||||||
|
right: 100px;
|
||||||
|
}
|
||||||
|
}*/
|
||||||
|
.sliderLayoutContainer {
|
||||||
|
width: 95%;
|
||||||
|
padding: 0 16px 0 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
@ -159,3 +159,96 @@
|
|||||||
top: 8px;
|
top: 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//Estilização da descrição do produto
|
||||||
|
.productDescriptionContainer {
|
||||||
|
.productDescriptionTitle {
|
||||||
|
font-family: "Open Sans";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 32px;
|
||||||
|
color: #575757;
|
||||||
|
}
|
||||||
|
.productDescriptionText {
|
||||||
|
font-family: "Open Sans";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 22px;
|
||||||
|
color: #929292;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.newsletter {
|
||||||
|
margin-top: 64px;
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
height: 175px;
|
||||||
|
padding: 0 0 0 0;
|
||||||
|
background: black;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
.label {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
font-size: 0;
|
||||||
|
&::before {
|
||||||
|
content: "Assine nossa Newsletter";
|
||||||
|
font-family: "Open Sans";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 38px;
|
||||||
|
text-align: center;
|
||||||
|
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;
|
||||||
|
width: 774px;
|
||||||
|
border-top: none;
|
||||||
|
border-right: none;
|
||||||
|
border-left: none;
|
||||||
|
border-bottom: 1px solid #929292;
|
||||||
|
}
|
||||||
|
:global(.vtex-styleguide-9-x-input) {
|
||||||
|
background: transparent;
|
||||||
|
padding: 0 0 0 0;
|
||||||
|
}
|
||||||
|
:global(.vtex-button) {
|
||||||
|
position: relative;
|
||||||
|
left: 145px;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
border-bottom: 3px solid #bfbfbf;
|
||||||
|
&:hover {
|
||||||
|
border-bottom: 5px solid #bfbfbf;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.vtex-button__label) {
|
||||||
|
font-family: "Open Sans";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
text-align: center;
|
||||||
|
color: #ffffff;
|
||||||
|
border: 1px solid #000000;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
54
styles/sass/pages/product/vtex.tab-layout.scss
Normal file
54
styles/sass/pages/product/vtex.tab-layout.scss
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
.container {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.listContainer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 1px solid #b9b9b9;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
.listItem {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
:global(.vtex-button) {
|
||||||
|
background: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
:global(.vtex-button__label) {
|
||||||
|
font-family: "Open Sans";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 38px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
color: #bfbfbf;
|
||||||
|
text-transform: initial;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.listItemActive {
|
||||||
|
:global(.vtex-button) {
|
||||||
|
background: white;
|
||||||
|
border-bottom: 2px solid #000000;
|
||||||
|
border-radius: 0;
|
||||||
|
:global(.vtex-button__label) {
|
||||||
|
font-family: "Open Sans";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 38px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
color: #000000;
|
||||||
|
text-transform: initial;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.contentItem {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 32px;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user