Gustavo_Rallenson_Goncalves_Da_Silva/challenge-vtex-io-Gustavo-Rallenson
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(description):tab list add e estilizadas

Browse Source
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2023-02-07 03:41:33 -03:00
parent 133ce31d4a
commit 54b2e2da3b
8 changed files with 201 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
react/components/Html/styles.css
View File

@ -1,5 +1,4 @@
/* [class*=html--pdp-breadcrumb]{
background: blue;
} */
.html--pdp-section_descriptions{
display: flex;
@ -22,23 +21,13 @@
.html--pdp-descriptions :global(.vtex-store-components-3-x-productImage){
padding-left: 28px;
}
.html--pdp-departamens{
background: transparent;
.html--pdp-section_descriptions{
margin-top: 32px;
margin-bottom: 16px;
}
.html--pdp-departamens ul{
display: flex;
.html--pdp-section_descriptions :after{
border-bottom: 1px solid rgba(185, 185, 185, 1);
}
.html--pdp-departamens div ul{
width: 100%;
display: flex;
justify-content: space-between;
list-style: none;
margin: 0;
}
.html--pdp-departamens div ul li button{
outline: none;
border: none;
@ -50,10 +39,7 @@
font-size: 18px;
line-height: 38px;
}
.html--pdp-departamens div ul li :global(button.open){
color: #000000;
border-bottom: 1px solid #000000;
}
:global(.vtex-slider-layout-0-x-sliderTrackContainer--pdp-carrousel){
margin-bottom: 20px;
}
@ -100,10 +86,4 @@
.html--pdp-descriptions :global(.vtex-store-components-3-x-productImage){
padding-left: 0px;
}
.html--pdp-departamens div ul li :global(button.open){
border-bottom: none;
}
.html--pdp-departamens ul{
border-top: 1px solid rgba(185, 185, 185, 1);
}
}

61
store/blocks/pdp/product.jsonc
View File

@ -1,11 +1,68 @@
{
"store.product": {
"children": [
"html#breadcrumb",
"html#departaments",
"flex-layout.row#specifications-title",
"html#carousel"
]
},
"tab-layout#pdp": {
"children":[
"tab-list#pdp",
"tab-content#pdp"
],
"props": {
"blockClass": "pdp-tabLayout",
"defaultActiveTabId": "descrição1"
}
},
"tab-list#pdp":{
"children": [
"tab-list.item#pdpsection1",
"tab-list.item#pdpsection2",
"tab-list.item#pdpsection3",
"tab-list.item#pdpsection4",
"tab-list.item#pdpsection5"
],
"props": {
"blockClass": "pdp-tabSections"
}
},
"tab-content#pdp":{
},
"tab-list.item#pdpsection1": {
"props": {
"tabId": "descrição1",
"label": "Descrição",
"defaultActiveTab": true
}
},
"tab-list.item#pdpsection2": {
"props": {
"tabId": "descrição2",
"label": "Descrição"
}
},
"tab-list.item#pdpsection3": {
"props": {
"tabId": "descrição3",
"label": "Descrição"
}
},
"tab-list.item#pdpsection4": {
"props": {
"tabId": "descrição4",
"label": "Descrição"
}
},
"tab-list.item#pdpsection5": {
"props": {
"tabId": "descrição5",
"label": "Descrição"
}
},
"html#prateleira": {
"props": {
"testId": "vtex-product-sumary"
@ -190,10 +247,10 @@
"html#departaments": {
"props": {
"tag": "div",
"testId": "description",
"testId": "product-description",
"blockClass": "pdp-section_descriptions"
},
"children": ["html#Sections", "html#description"]
"children": ["tab-layout#pdp"]
},
"html#description": {

13
styles/css/vtex.flex-layout.css
View File

@ -149,10 +149,20 @@
.flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderArrows--pdp-carrousel) {
max-width: 11.2px;
max-height: 29.6px;
top: 25%;
top: 37%;
padding: 0;
}
}
@media screen and (max-width: 1024px) {
.flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderLeftArrow--pdp-carrousel) {
left: 3%;
}
}
@media screen and (max-width: 1024px) {
.flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderRightArrow--pdp-carrousel) {
right: 3%;
}
}
@media screen and (max-width: 1024px) {
.flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-slide--pdp-carrousel) {
width: 4.9344% !important;
@ -171,6 +181,7 @@
.flexRow--pdp-carrousel :global(.vtex-store-components-3-x-container) {
max-width: 100%;
}
.flexRow--pdp-price .flexRowContent--pdp-price {
justify-content: center;
}

5
styles/css/vtex.rich-text.css
View File

@ -17,4 +17,9 @@
font-size: 24px;
line-height: 38px;
color: #575757;
}
@media screen and (max-width: 1024px) {
.container--pdp-specifications .wrapper--pdp-specifications .heading {
font-size: 20px;
}
}

61
styles/css/vtex.tab-layout.css Normal file
View File

@ -0,0 +1,61 @@
/*
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 */
/* Grid breakpoints */
.listContainer--pdp-tabSections::after {
content: "";
width: 100%;
border-bottom: 1px solid rgb(185, 185, 185);
}
@media screen and (max-width: 1024px) {
.listContainer--pdp-tabSections {
flex-direction: column;
}
.listContainer--pdp-tabSections::before {
content: "";
width: 100%;
border-bottom: 1px solid rgb(185, 185, 185);
}
}
.listContainer--pdp-tabSections {
justify-content: space-evenly;
align-items: end;
}
@media screen and (max-width: 1024px) {
.listContainer--pdp-tabSections {
align-items: start;
}
}
.listContainer--pdp-tabSections .listItem {
padding: 0;
margin: 0;
}
.listContainer--pdp-tabSections .listItem :global(.vtex-button) {
outline: none;
border: none;
background: transparent;
color: rgb(191, 191, 191);
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
text-transform: initial;
}
.listContainer--pdp-tabSections .listItemActive {
border-bottom: 1px solid #000000;
}
@media screen and (max-width: 1024px) {
.listContainer--pdp-tabSections .listItemActive {
border-bottom: none;
}
}
.listContainer--pdp-tabSections .listItemActive :global(.vtex-button) {
color: #000000;
}

15
styles/sass/pages/product/vtex.flex-layout.scss
View File

@ -139,10 +139,20 @@
@media screen and (max-width: 1024px){
max-width: 11.2px;
max-height: 29.6px;
top: 25%;
top: 37%;
padding: 0;
}
}
:global(.vtex-slider-layout-0-x-sliderLeftArrow--pdp-carrousel){
@media screen and (max-width: 1024px){
left: 3%;
}
}
:global(.vtex-slider-layout-0-x-sliderRightArrow--pdp-carrousel){
@media screen and (max-width: 1024px){
right: 3%;
}
}
:global(.vtex-slider-layout-0-x-slide--pdp-carrousel){
@media screen and (max-width: 1024px){
width: 4.9344% !important;
@ -162,9 +172,6 @@
:global(.vtex-store-components-3-x-container){
max-width: 100%;
}
@media screen and (max-width: 1024px){
}
}
.flexRow--pdp-price{
.flexRowContent--pdp-price{

3
styles/sass/pages/product/vtex.rich-text.scss
View File

@ -9,6 +9,9 @@
font-size: 24px;
line-height: 38px;
color: #575757;
@media screen and (max-width: 1024px){
font-size: 20px;
}
}
}
}

47
styles/sass/pages/product/vtex.tab-layout.scss Normal file
View File

@ -0,0 +1,47 @@
.listContainer--pdp-tabSections{
&::after{
content: "";
width: 100%;
border-bottom: 1px solid rgba(185, 185, 185, 1);
};
@media screen and (max-width: 1024px){
flex-direction: column;
&::before{
content: "";
width: 100%;
border-bottom: 1px solid rgba(185, 185, 185, 1);
};
}
};
.listContainer--pdp-tabSections{
justify-content: space-evenly;
align-items: end;
@media screen and (max-width: 1024px){
align-items: start;
}
.listItem{
padding: 0;
margin: 0;
:global(.vtex-button){
outline: none;
border: none;
background: transparent;
color: rgba(191, 191, 191, 1);
font-family: 'Open Sans',sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
text-transform: initial;
};
};
.listItemActive{
border-bottom: 1px solid #000000;
@media screen and (max-width: 1024px){
border-bottom: none;
}
:global(.vtex-button){
color: #000000;
}
}
}