diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 065f1ad..c2619c5 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -9,18 +9,22 @@ /* Media Query M3 */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); /* Grid breakpoints */ -:global(.vtex-stack-layout-0-x-stackItem) .flexRow { - margin: 0; -} - .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; } diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..b8cd188 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -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; +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 7db885a..8a1039d 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,18 +1,24 @@ .flexRow { } - -:global(.vtex-stack-layout-0-x-stackItem) { - .flexRow { - margin: 0; - } -} .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; .flexRow--buyButton { diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss new file mode 100644 index 0000000..0d16003 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -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; +}