feat: adiciona estilizações nos blocos da pdp #1

Merged
Thiago.bronisio merged 1 commits from feature/pagina-product into master 2023-01-23 03:09:05 +00:00
20 changed files with 584 additions and 273 deletions

View File

@ -1,9 +1,5 @@
{
"product-specification-group#table": {
"children": [
"flex-layout.row#spec-group"
]
},
"flex-layout.row#spec-group": {
"props": {
"blockClass": "productSpecificationGroup"

View File

@ -4,8 +4,6 @@
"html#breadcrumb",
"condition-layout.product#availability",
"flex-layout.row#description",
"flex-layout.row#specifications-title",
"product-specification-group#table",
"shelf.relatedProducts",
"product-questions-and-answers"
]
@ -18,14 +16,7 @@
},
"children": ["breadcrumb"]
},
"flex-layout.row#specifications-title": {
"children": ["rich-text#specifications"]
},
"rich-text#specifications": {
"props": {
"text": "##### Product Specifications"
}
},
"flex-layout.row#description": {
"props": {
"marginBottom": 7
@ -34,6 +25,7 @@
},
"condition-layout.product#availability": {
"props": {
"blockClass": "availability",
"conditions": [
{
"subject": "isProductAvailable"
@ -78,7 +70,7 @@
"flex-layout.col#stack": {
"children": ["stack-layout"],
"props": {
"width": "60%",
"width": "50%",
"rowGap": 0
}
},
@ -96,25 +88,25 @@
},
"flex-layout.col#right-col": {
"props": {
"blockClass": "right-col",
"preventVerticalStretch": true,
"rowGap": 0
},
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"product-rating-summary",
"flex-layout.row#list-price-savings",
"flex-layout.row#selling-price",
"product-installments",
"product-separator",
"product-identifier.product",
"availability-subscriber",
"sku-selector",
"product-quantity",
"product-assembly-options",
"product-gifts",
"flex-layout.row#buy-button",
"availability-subscriber",
"shipping-simulator",
"share#default"
"shipping-simulator"
]
},
@ -127,6 +119,9 @@
"sku-selector": {
"props": {
"blockClass": "sku-selector",
"imageHeight": 48,
"imageWidth": 48,
"variationsSpacing": 3,
"showValueNameForImageVariation": true
}
@ -161,8 +156,8 @@
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"sku-selector",
"flex-layout.row#availability"
"flex-layout.row#availability",
"sku-selector"
]
},
"flex-layout.row#availability": {
@ -170,16 +165,5 @@
"blockClass": "message-availability"
},
"children": ["availability-subscriber"]
},
"share#default": {
"props": {
"social": {
"Facebook": true,
"WhatsApp": true,
"Twitter": false,
"Pinterest": true
}
}
}
}

View File

@ -1,6 +1,7 @@
{
"flex-layout.row#selling-price": {
"props": {
"blockClass": "selling-price",
"colGap": 2,
"preserveLayoutOnMobile": true,
"preventHorizontalStretch": true,
@ -13,15 +14,16 @@
"flex-layout.row#list-price-savings": {
"props": {
"blockClass": "list-price-savings",
"colGap": 2,
"preserveLayoutOnMobile": true,
"preventHorizontalStretch": true,
"marginBottom": 2,
"marginTop": 5
},
"children": [
"product-list-price",
"product-price-savings"
]
}
// "children": [
// "product-list-price",
// "product-price-savings"
// ]
}
}

View File

@ -0,0 +1,4 @@
@font-face {
font-family: "Open Sans", "sans-serif";
src: url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
}

View File

@ -253,84 +253,84 @@
"measure": [30, 34, 20],
"styles": {
"heading-1": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, sans-serif",
"fontWeight": "700",
"fontSize": "3rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-2": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, sans-serif",
"fontWeight": "700",
"fontSize": "2.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-3": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, sans-serif",
"fontWeight": "700",
"fontSize": "1.75rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-4": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, sans-serif",
"fontWeight": "normal",
"fontSize": "1.5rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-5": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, sans-serif",
"fontWeight": "normal",
"fontSize": "1.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-6": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, sans-serif",
"fontWeight": "normal",
"fontSize": "1.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"body": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, sans-serif",
"fontWeight": "normal",
"fontSize": "1rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"small": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, sans-serif",
"fontWeight": "normal",
"fontSize": "0.875rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"mini": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, sans-serif",
"fontWeight": "normal",
"fontSize": "0.75rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"action": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, sans-serif",
"fontWeight": "500",
"fontSize": "1rem",
"textTransform": "uppercase",
"letterSpacing": "0"
},
"action--small": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, sans-serif",
"fontWeight": "500",
"fontSize": "0.875rem",
"textTransform": "uppercase",
"letterSpacing": "0"
},
"action--large": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, sans-serif",
"fontWeight": "500",
"fontSize": "1.25rem",
"textTransform": "uppercase",

View File

@ -7,10 +7,6 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.html {
background-color: red;
}
.html--pdp-breadcrumb {
background-color: green;
.b--action-primary {
border-color: black;
}

12
styles/css/global.css Normal file
View File

@ -0,0 +1,12 @@
/*
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 */
* {
background-color: red;
}

View File

@ -0,0 +1,68 @@
@charset "UTF-8";
/*
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 */
.container {
padding: 16px 40px;
}
.container .homeLink {
display: none;
}
.container .arrow--1 {
padding: 0;
text-align: start;
}
.container .arrow--1 .caretIcon {
display: none;
}
.container .arrow--1 .link--1 {
padding: 0;
font-size: 0;
}
.container .arrow--1 .link--1::before {
content: "Home";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.container .arrow--2 {
padding: 0;
text-align: start;
}
.container .arrow--2 .caretIcon {
margin: 0 8px;
}
.container .arrow--2 .link--2 {
padding: 0;
font-size: 0;
}
.container .arrow--2 .link--2::before {
content: "Sapatos";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.container .termArrow {
margin: 0 8px;
padding: 0;
}
.container .term {
padding: 0;
text-align: start;
font-size: 0;
}
.container .term::before {
content: "Sandálias";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}

View File

@ -1,98 +1,30 @@
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 0.5rem;
/*
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 */
.flexRowContent {
padding: 0;
margin: 0;
width: 100%;
}
@media screen and (min-width: 40em) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 1rem;
}
}
@media screen and (min-width: 80rem) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 0.25rem;
}
}
.flexRowContent--menu-link {
background-color: #03044e;
color: #fff;
}
.flexRowContent--main-header {
background-color: #f0f0f0;
}
.flexRowContent--main-header-mobile {
align-items: center;
padding: 0.625rem 0.5rem;
background-color: #f0f0f0;
}
.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
color: #ffffff;
font-size: 14px;
}
.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
color: #727273;
font-size: 14px;
}
.flexRow--deals {
background-color: #0F3E99;
padding: 14px 0px;
}
.flexRow--deals .stretchChildrenWidth {
align-items: center;
}
.flexRow--deals .flexCol {
align-items: center;
margin-bottom: 5px;
padding-top: 5px;
}
.flexCol--filterCol {
max-width: 500px;
min-width: 230px;
}
.flexCol--productCountCol {
align-items: flex-start;
}
.flexCol--orderByCol {
align-items: flex-end;
}
.flexCol--orderByMobileCol {
width: 42%;
}
.flexCol--filterMobileCol {
width: 38%;
}
.flexRow--quickviewMainRow {
.flexRowContent .productNameContainer--quickview {
display: flex;
max-height: 100%;
text-align: end;
}
.flexRowContent .flexCol--right-col .flexColChild--right-col .list-price-savings {
display: none;
}
.flexColChild--quickviewDetails:first-child {
overflow-y: auto;
height: 66% !important;
overflow-x: hidden;
.flexRowContent--message-availability {
margin-top: 24px;
width: 375px;
}
.flexColChild--quickviewDetails:last-child {
height: 34% !important;
}
.flexRow--addToCartRow {
padding-bottom: 1rem;
.sellingPriceValue {
font-size: 50px;
}

View File

@ -1,3 +1,23 @@
/*
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 */
.product-identifier--productReference {
margin-bottom: 1rem;
display: flex;
justify-content: end;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
}
.product-identifier--productReference .product-identifier__label {
display: none;
}
.product-identifier--productReference .product-identifier__separator {
display: none;
}

View File

@ -1,79 +1,32 @@
.listPrice {
color: #727273;
margin-bottom: .25rem;
font-size: 1rem;
}
.sellingPrice {
color: #3f3f40;
font-size: 1.25rem;
}
.sellingPriceValue {
font-size: 2.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 */
/* Grid breakpoints */
.sellingPrice--hasListPrice {
font-weight: 700;
font-size: 25px;
line-height: 38px;
color: #000000;
}
.installments {
color: #727273;
margin-bottom: 1rem;
font-weight: 300;
font-size: 16px;
line-height: 22px;
color: #929292;
}
.savings {
font-weight: 500;
color: #79B03A;
.installments .installmentsNumber {
font-weight: 700;
font-size: 16px;
line-height: 22px;
}
.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;
.installments .installmentValue {
font-weight: 700;
font-size: 16px;
line-height: 22px;
}

View File

@ -7,6 +7,102 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.newsletter {
background: red;
.container {
margin: 0;
padding: 0 40px;
max-width: 100%;
/* TITULO, NOME DO PRODUTO */
/* TAMANHO E CORES DOS PRODUTOS */
}
.container .productNameContainer--quickview {
text-align: end;
font-weight: 300;
font-size: 20px;
line-height: 34px;
color: #575757;
}
.container .skuSelectorContainer--sku-selector {
display: flex;
flex-direction: column-reverse;
}
.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorName {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
text-transform: uppercase;
}
.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorItem--sku-selector {
height: 40px;
width: 40px;
}
.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorItem--sku-selector .frameAround--sku-selector {
height: 40px;
width: 40px;
border-radius: 50%;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorItem--sku-selector .skuSelectorInternalBox--sku-selector {
border-radius: 50%;
border: 1px solid #989898;
height: 40px;
width: 40px;
}
.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorItem--sku-selector .skuSelectorInternalBox--sku-selector:focus {
border-color: black;
}
.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorItem--sku-selector .skuSelectorInternalBox--sku-selector .valueWrapper--sku-selector {
position: absolute;
left: -4px;
}
.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--cor .skuSelectorName {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
text-transform: uppercase;
}
.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--cor .skuSelectorNameSeparator {
color: #929292;
}
.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
text-transform: uppercase;
}
.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem--sku-selector {
height: 48px;
width: 48px;
}
.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--cor .skuSelectorOptionsList .frameAround--sku-selector {
border-radius: 50%;
}
.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorInternalBox--sku-selector {
border-radius: 50%;
}
.container .subscriberContainer .form .content {
display: block;
position: relative;
}
.container .subscriberContainer .form .content .inputName {
width: 185px;
height: 40px;
}
.container .subscriberContainer .form .content .inputName .vtex-input .flex-row {
border: none;
}
.container .subscriberContainer .form .content .inputEmail {
width: 185px;
height: 40px;
position: absolute;
top: 0%;
left: 51%;
}
.container .subscriberContainer .form .content .submit {
width: 100%;
}

View File

@ -1,8 +1,11 @@
.html {
background-color: red;
}
// .html {
// background-color: red;
// }
.html--pdp-breadcrumb {
background-color: green;
}
// .html--pdp-breadcrumb {
// background-color: green;
// }
.b--action-primary {
border-color: black;
}

View File

@ -0,0 +1,63 @@
.container {
padding: 16px 40px;
.homeLink {
display: none;
}
.arrow--1 {
padding: 0;
text-align: start;
.caretIcon {
display: none;
}
.link--1 {
padding: 0;
font-size: 0;
&::before {
content: "Home";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray-6;
}
}
}
.arrow--2 {
padding: 0;
text-align: start;
.caretIcon {
margin: 0 8px;
}
.link--2 {
padding: 0;
font-size: 0;
&::before {
content: "Sapatos";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray-6;
}
}
}
.termArrow {
margin: 0 8px;
padding: 0;
}
.term {
padding: 0;
text-align: start;
font-size: 0;
&::before {
content: "Sandálias";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray-6;
}
}
}

View File

@ -0,0 +1,25 @@
.flexRowContent {
padding: 0;
margin: 0;
width: 100%;
.productNameContainer--quickview {
display: flex;
text-align: end;
}
.flexCol--right-col {
.flexColChild--right-col {
.list-price-savings {
display: none;
}
}
}
}
.flexRowContent--message-availability {
margin-top: 24px;
width: 375px;
}
.sellingPriceValue {
font-size: 50px;
}

View File

@ -0,0 +1,15 @@
.product-identifier--productReference {
display: flex;
justify-content: end;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
.product-identifier__label {
display: none;
}
.product-identifier__separator {
display: none;
}
}

View File

@ -0,0 +1,23 @@
.sellingPrice--hasListPrice {
font-weight: 700;
font-size: 25px;
line-height: 38px;
color: $color-black-padrao;
}
.installments {
font-weight: 300;
font-size: 16px;
line-height: 22px;
color: $color-gray-6;
.installmentsNumber {
font-weight: 700;
font-size: 16px;
line-height: 22px;
}
.installmentValue {
font-weight: 700;
font-size: 16px;
line-height: 22px;
}
}

View File

@ -1,3 +1,119 @@
.newsletter{
background: red;
.container {
margin: 0;
padding: 0 40px;
max-width: 100%;
/* TITULO, NOME DO PRODUTO */
.productNameContainer--quickview {
text-align: end;
font-weight: 300;
font-size: 20px;
line-height: 34px;
color: $color-gray-7;
}
/* TAMANHO E CORES DOS PRODUTOS */
.skuSelectorContainer--sku-selector {
display: flex;
flex-direction: column-reverse;
.skuSelectorSubcontainer--tamanho {
.skuSelectorName {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray-6;
text-transform: uppercase;
}
.skuSelectorItem--sku-selector {
height: 40px;
width: 40px;
.frameAround--sku-selector {
height: 40px;
width: 40px;
border-radius: 50%;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.skuSelectorInternalBox--sku-selector {
border-radius: 50%;
border: 1px solid $color-gray-8;
height: 40px;
width: 40px;
&:focus {
border-color: black;
}
.valueWrapper--sku-selector {
position: absolute;
left: -4px;
}
}
}
}
.skuSelectorSubcontainer--cor {
.skuSelectorName {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray-6;
text-transform: uppercase;
}
.skuSelectorNameSeparator {
color: $color-gray-6;
}
.skuSelectorSelectorImageValue {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray-6;
text-transform: uppercase;
}
.skuSelectorOptionsList {
.skuSelectorItem--sku-selector {
height: 48px;
width: 48px;
}
.frameAround--sku-selector {
border-radius: 50%;
}
.skuSelectorInternalBox--sku-selector {
border-radius: 50%;
}
}
}
}
.subscriberContainer {
.form {
.content {
display: block;
position: relative;
.inputName {
width: 185px;
height: 40px;
.vtex-input {
.flex-row {
border: none;
}
}
}
.inputEmail {
width: 185px;
height: 40px;
position: absolute;
top: 0%;
left: 51%;
}
.submit {
width: 100%;
}
}
}
}
}

View File

@ -1,5 +1,5 @@
$color-black: #292929;
$color-black-padrao: #000000;
$color-white: #fff;
$color-gray: #6c6c6c;
@ -7,6 +7,9 @@ $color-gray2: #7d7d7d;
$color-gray3: #f0f0f0;
$color-gray4: #c4c4c4;
$color-gray5: #e5e5e5;
$color-gray-6: #929292;
$color-gray-7: #575757;
$color-gray-8: #989898;
$color-blue: #4267b2;
@ -19,7 +22,7 @@ $grid-breakpoints: (
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
xl: 1200px,
) !default;
$z-index: (
@ -27,5 +30,5 @@ $z-index: (
level2: 10,
level3: 15,
level4: 20,
level5: 25
level5: 25,
) !default;