diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index 9bf8192..fbf15d2 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -3,6 +3,19 @@ import { waitElement } from "m3-utils";
export default class Footer {
constructor() {
this.init();
+ this.list = [
+ {},
+
+ {},
+
+ {},
+
+ {},
+
+ {},
+ ];
+
+ this.addCarrossel();
}
async init() {
@@ -35,10 +48,14 @@ export default class Footer {
observer.observe(target, config);
}
async addCarrossel() {
- const elemento = await waitElement("#my-element");
- $(elemento).slick({
- slidesToShow: 4,
- slidesToScroll: 1,
+ const prateleira = await waitElement("footerCheckout__prateleira");
+ $(prateleira).slick({
+ dots: true,
+ infinite: true,
+ arrows: true,
+ slidesToShow: 4,
+ slidesToScroll: 4,
+ variableWidth: true,
});
}
@@ -51,6 +68,7 @@ export default class Footer {
+
`;
}
@@ -74,7 +92,6 @@ export default class Footer {
-
`;
}
}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index e13bff5..d9b1c2f 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -1,13 +1,21 @@
.checkout-container {
.client-pre-email {
- border-color: #8d8d8d;
- font-family: $font-family;
+ border-color: $black-500;
padding-top: 8px;
+ label {
+ font-family: $font-family-secundary;
+ text-transform: uppercase;
+ color: $black-500;
+ }
+
.link-cart {
a {
- color: #292929;
+ color: $black-500;
+ font-family: $font-family-secundary;
font-size: 14px;
+ line-height: 16px;
+ text-transform: uppercase;
&:hover {
color: lighen(#292929, 10);
@@ -25,12 +33,12 @@
margin-bottom: 16px;
span {
- color: #303030;
- font-size: 24px;
+ color: $black-500;
+ font-size: 20px;
}
small {
- color: #8d8d8d;
+ color: $black-500;
}
}
}
@@ -39,26 +47,35 @@
margin: 0 0 16px;
input {
+ height: 50px;
box-shadow: none;
- color: #292929;
+ color: $black-500;
font-family: $font-family;
+ font-size: 12px;
+ line-height: 16px;
padding: 0 16px;
- border: 2px solid f0f0f0;
+ border: 1px solid $black-500;
box-sizing: border-box;
border-radius: 5px;
+ &::placeholder {
+ color: $black-500;
+ }
+
@media (max-width: 490px) {
width: auto;
}
}
button {
- background-color: #292929;
- border-radius: 5px;
+ background-color: $vivid-blue;
+ border-radius: 0 8px 8px 0;
border: none;
font-family: $font-family;
- height: 54px;
- right: 0;
+ color: $black-500;
+ letter-spacing: 0.05em;
+ height: 50px;
+ right: -4px;
top: 0;
@media (max-width: 490px) {
@@ -70,17 +87,23 @@
span.help.error {
color: red;
+ font-family: $font-family;
+ font-weight: 700;
+ font-size: 12px;
+ line-height: 16px;
}
}
.emailInfo {
padding: 16px;
background-color: #fff;
- border: 1px solid #8d8d8d;
- border-radius: 0;
+ border: 1px solid $black-500;
+ border-radius: 5px;
+ margin-top: 47px;
h3 {
- color: #303030;
+ font-family: $font-family;
+ font-weight: 700;
margin: 0 0 8px 0;
}
@@ -89,11 +112,15 @@
li {
span {
- color: #292929;
+ color: $black-500;
+ font-family: $font-family;
+ font-weight: 700;
+ font-size: 12px;
+ line-height: 16px;
}
i::before {
- color: #292929;
+ color: $vivid-blue;
font-size: 1rem;
opacity: 1;
}
@@ -112,19 +139,25 @@
.payment-data,
.client-profile-data {
.accordion-group {
- border-radius: 0;
- border: 1px solid #8d8d8d;
+ border-radius: 8px;
+ border: 1px solid $gray-300;
font-family: $font-family;
- padding: 16px;
+ font-size: 14px;
+ // font-size: 14px !important;
+ padding: 24px 17px 38px 17px;
+ margin-bottom: 16px;
.accordion-heading {
span {
- color: #303030;
- margin-bottom: 8px;
+ font-family: $font-family-secundary;
+ font-size: 16px;
+ line-height: 19px;
+ color: $black-400;
+ margin-bottom: 25px;
padding: 0;
i::before {
- fill: #303030;
+ display: none;
}
}
@@ -143,36 +176,76 @@
.accordion-inner {
padding: 0;
+ // #client-phone {
+ // &::placeholder {
+ // visibility: hidden;
+
+ // &:after {
+ // visibility: visible;
+ // content: "(99) 99999-9999";
+
+ // }
+ // }
+
+ tr {
+ td.info {
+ border-bottom: 1px solid $gray-700;
+ }
+ }
+
/* General configurations */
+ .box-info {
+ font-size: 14px;
+ line-height: 19px;
+ color: $gray-700;
+ }
+
.client-notice {
- color: #292929;
+ display: none;
}
p {
+ position: relative;
+ margin-bottom: 6px;
+ color: $gray-700;
+
label {
- color: #292929;
- font-weight: 500;
+ // color: $gray-800;
+ font-size: 14px;
+ font-weight: 400;
+ margin-bottom: 1px;
}
select,
input {
- border-radius: 0;
- border: 1px solid #8d8d8d;
+ padding: 13px 7px;
+ border-radius: 5px;
+ border: 1px solid $gray-50;
+ color: $black-500;
box-shadow: none;
+ margin-bottom: 16px;
}
.help.error {
color: red;
+ font-size: 9px;
+ margin: 0;
}
}
.box-client-info-pj {
+ display: none;
.link a#is-corporate-client,
.link a#not-corporate-client {
- color: #292929;
- font-weight: 500;
- text-decoration: underline;
+ display: none;
+ // color: #292929;
+ // font-weight: 500;
+ // text-decoration: underline;
+ }
+
+ .link {
+ display: none;
}
}
@@ -181,20 +254,27 @@
}
button.submit {
+ width: 100%;
border: none;
- border-radius: 5px;
- background: #292929;
- margin-top: 8px;
+ border-radius: 8px;
outline: none;
- transition: all 0.2s linear;
+ font-family: $font-family;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 19px;
+ text-transform: uppercase;
+ background: $vivid-blue;
+ color: $white;
+ margin-top: 36px;
+ // transition: all 0.2s linear;
- &:hover {
- background: lighten(#292929, 5);
- }
+ // &:hover {
+ // background: lighten(#292929, 5);
+ // }
- &:active {
- background: darken(#292929, 5);
- }
+ // &:active {
+ // background: darken(#292929, 5);
+ // }
}
/* Shipping configurations */
@@ -205,6 +285,10 @@
text-decoration: underline;
}
+ .vtex-omnishipping-1-x-SummaryItemContent {
+ display: block;
+ }
+
.vtex-omnishipping-1-x-deliveryGroup {
p {
color: #303030;
@@ -236,52 +320,78 @@
}
.shp-summary-group-info {
- border-color: #8d8d8d;
+ border-style: none;
+ // border-color: #8d8d8d;
}
.address-summary {
background: none;
- border-color: #8d8d8d;
+ color: $gray-700;
border-radius: 0;
- color: #303030;
- padding: 12px;
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ padding: 0px;
@include mq(md, max) {
background-position: 8px 9px;
}
- a {
- color: #303030;
- font-weight: 500;
- text-decoration: underline;
- }
+ // a {
+ // color: #303030;
+ // font-weight: 500;
+ // text-decoration: underline;
+ // }
}
.shp-summary-group-price,
.shp-summary-package {
- color: #8d8d8d;
+ padding: 0;
+ color: $gray-700;
}
- .shp-summary-group-price {
- padding-right: 16px;
- }
+ // .shp-summary-group-price {
+ // padding-right: 16px;
+ // }
.shp-summary-package {
- padding-left: 16px;
+ margin-top: 25px;
}
.vtex-omnishipping-1-x-summaryChange {
- border-color: #303030;
- color: #303030;
+ display: none;
+ }
+
+ .vtex-omnishipping-1-x-SummaryItemGroup {
+ padding: 0;
+ margin: 0;
}
.vtex-omnishipping-1-x-deliveryChannelsToggle {
- background-color: #d8c8ac;
- border: 1px solid #d8c8ac;
+ background-color: $white;
+ border: 1px solid $black-400;
+ }
+
+ .vtex-omnishipping-1-x-deliveryChannelsOption {
+ color: $gray-400;
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ text-transform: uppercase;
}
.vtex-omnishipping-1-x-deliveryOptionActive {
- text-shadow: 1.3px 1px lighten(#292929, 50);
+ color: $black-400;
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ text-transform: uppercase;
}
}
}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index ae8475e..0968693 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -17,10 +17,10 @@
display: none;
}
.cart {
- border: 1px solid #f0f0f0;
+ border: 1px solid $gray-200;
box-sizing: border-box;
border-radius: 5px;
- padding: 16px;
+ padding: 16px 29px 16px 16px;
@include mq(md, max) {
margin: 0px 0 25px 0;
@@ -35,12 +35,22 @@
.cart-fixed {
font-family: $font-family;
width: 100%;
+ border: 1px solid $gray-200;
+ box-sizing: border-box;
+ border-radius: 8px;
+ padding: 24px 17px 36px;
+ height: auto !important;
+
h2 {
- background: #fff;
+ padding: 0;
+ text-align: left;
+ background: $white;
border: none;
- color: #303030;
- font-size: 14px;
+ color: $black-400;
+ font-family: $font-family-secundary;
+ font-size: 16px;
font-weight: 500;
+ margin-bottom: 34px;
}
.item-unavailable {
@@ -52,9 +62,11 @@
}
.cart {
- border: 1px solid #8d8d8d;
+ border: 0;
+ padding: 0;
ul li {
+ display: flex;
border-top: none;
margin-top: 0;
padding-top: 0;
@@ -65,9 +77,26 @@
border-top: 1px solid #e5e5e5;
}
- .shipping-date,
+ // span {
+
+ // }
+
+ // a img {
+ // width: 58.82%;
+ // }
+
+ .shipping-date {
+ display: none;
+ }
+ // .shipping-date,
.price {
- color: #7d7d7d;
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ text-align: right;
+ color: $black-400;
}
}
}
@@ -78,7 +107,8 @@
}
#go-to-cart-button a {
- color: #303030;
+ font-family: $font-family;
+ color: $black-500;
text-decoration: underline;
}
@@ -86,22 +116,39 @@
td.info {
width: 100%;
}
+
+ // tr.Discounts {
+ // border-bottom: $gray-50;
+ // }
}
#payment-data-submit {
- background: #292929;
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 19px;
+ text-align: center;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+ background: $green;
+ border-radius: 8px;
border: none;
- border-radius: 0;
- color: #fff;
+ color: $white;
outline: none;
transition: all 0.2s linear;
- &:hover {
- background: lighten(#292929, 5);
+
+ .icon-lock {
+ display: none;
}
- &:active {
- background: darken(#292929, 5);
- }
+ // &:hover {
+ // background: lighten(#292929, 5);
+ // }
+
+ // &:active {
+ // background: darken(#292929, 5);
+ // }
}
}
@@ -109,6 +156,23 @@
background-color: #fff;
}
+ // .ul.unstyled {
+
+ // .mini-cart {
+ // display: block;
+ // overflow: auto;
+ // text-overflow: ellipsis;
+ // white-space: normal;
+ // float: none;
+ // width: 76%;
+ // line-height: 150%;
+ // .item {
+ // .fn {
+ // }
+ // }
+ // }
+ // }
+
.cart-items {
.product-item {
padding: 16px 0;
@@ -118,9 +182,10 @@
color: #292929;
padding: 0 0 16px;
font-style: normal;
- font-weight: bold;
+ font-weight: 400;
font-size: 14px;
line-height: 16px;
+ text-align: left;
@include mq(md, max) {
&.quantity-price,
@@ -131,184 +196,221 @@
}
.product-image {
- height: auto;
+ // height: auto;
padding: 0;
- width: 60px;
-
- @include mq(sm, max) {
- width: 72px;
- }
+ // width: 60px;
img {
- height: 60px;
- max-width: 100%;
+ height: 75px;
+ max-width: 60px;
+ width: 60px;
+ }
+ }
+
+ @include mq(sm, max) {
+ width: 72px;
+ }
+
+ img {
+ // height: 60px;
+ // max-width: 100%;
+ // width: auto;
+ width: 58.82%;
+
+ @include mq(sm, max) {
+ height: 72px;
width: auto;
+ }
+ }
+ }
- @include mq(sm, max) {
- height: 72px;
- width: auto;
- }
+ .quantity {
+ box-shadow: none;
+ }
+
+ // td.product-name {
+
+ // }
+
+ .product-name {
+ padding: 0 90px 0 16px;
+ color: $black-500;
+
+ @include mq(lg, max) {
+ width: 250px;
+ }
+
+ a {
+ width: 17.58%;
+ color: $black-500;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 14px;
+ transition: ease-in 0.22s all;
+
+ &:hover {
+ color: darken(#00c8ff, 10);
+ text-decoration: none;
+ }
+
+ @media (max-width: 490px) {
+ margin-left: 23px;
}
}
- .product-name {
- padding-right: 0;
+ .brand,
+ .seller {
+ display: none !important;
+ }
+ }
- @include mq(lg, max) {
- width: 250px;
- }
+ td.shipping-date {
+ color: $gray-500;
+ font-size: 12px;
+ line-height: 14px;
+ text-align: left;
+ padding: 0 91px 0 0;
+ // margin-right: 91px;
- a {
- color: $black-500;
- font-style: normal;
- font-weight: 400;
- font-size: 12px;
- line-height: 14px;
- transition: ease-in 0.22s all;
+ @include mq(md, max) {
+ display: none;
+ }
+ }
- &:hover {
- color: darken(#00c8ff, 10);
- text-decoration: none;
- }
+ .product-price {
+ // visibility: hidden;
+ text-align: left;
+ // padding: 0;
- @media (max-width: 490px) {
- margin-left: 23px;
- }
- }
+ min-width: 100px;
- .brand,
- .seller {
- display: none !important;
- }
+ @include mq(md, max) {
+ min-width: 78px;
+ }
+ @media (max-width: 490px) {
+ position: absolute;
+ bottom: 0;
+ right: 0;
}
- td.shipping-date {
+ span.list-price {
color: $gray-500;
font-size: 12px;
line-height: 14px;
-
- @include mq(md, max) {
- display: none;
- }
- }
-
- .product-price {
- min-width: 100px;
- @include mq(md, max) {
- min-width: 78px;
- }
- @media (max-width: 490px) {
- position: absolute;
- bottom: 0;
- right: 0;
- }
-
- span.list-price {
- color: $gray-500;
+ text-decoration-line: line-through;
+ @include mq(sm, max) {
font-size: 12px;
line-height: 14px;
- text-decoration-line: line-through;
- @include mq(sm, max) {
- font-size: 12px;
- line-height: 14px;
- }
+ }
- .old-product-price-label {
- text-transform: lowercase;
- }
+ .old-product-price-label {
+ text-transform: lowercase;
+ }
+ }
+ }
+ td.product-price {
+ padding: 0 49px 0 0;
+ }
+
+ td.quantity {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 11px 79px 0 0;
+ padding: 0;
+ height: 34px;
+ width: 99px;
+ // width: max-content !important;
+ box-sizing: border-box;
+ border: 1px solid $gray-300;
+ border-radius: 8px;
+
+ @media (max-width: 490px) {
+ margin-left: 84px !important;
+ }
+
+ input {
+ background-color: $white;
+ border: 0 none;
+ display: block;
+ max-height: 38px;
+ margin: 0 !important;
+ // padding: 8px 0;
+ width: 38px;
+ color: $black-500;
+ box-shadow: none;
+ font-family: $font-family-secundary;
+ font-size: 14px;
+ line-height: 16px;
+
+ @include mq(lg, max) {
+ width: 24px !important;
}
}
- td.quantity {
- display: flex;
- align-items: center;
- justify-content: center;
- margin: 6px auto 0;
- padding: 0;
- max-height: 38px;
- max-width: 118px;
- width: max-content !important;
- box-sizing: border-box;
- border: 1px solid $gray-300;
- border-radius: 8px;
+ .icon-plus-sign,
+ .icon-minus-sign {
+ &::before {
+ color: $white;
+ background: $vivid-blue;
+ display: block;
+ font-family: $font-family;
+ font-size: 20px;
+ font-weight: 700;
+ line-height: 10px;
+ border-radius: 50%;
+ padding: 3px 0;
+ width: 16px;
+
+ // padding: 1px 12px;
+ }
+ }
+
+ .icon-minus-sign {
+ &:before {
+ content: "-";
+ // width: 10px;
+ }
+ }
+
+ .icon-plus-sign {
+ &:before {
+ content: "+";
+ }
+ }
+
+ .item-quantity-change {
+ @media (max-width: 979px) and (min-width: 768px) {
+ position: inherit;
+ bottom: inherit;
+ left: inherit;
+ height: inherit;
+ width: inherit;
+ top: inherit;
+ }
@media (max-width: 490px) {
- margin-left: 84px !important;
- }
-
- input {
- background-color: $white;
- border: 0 none;
- display: block;
- max-height: 38px;
- margin: 0 !important;
- padding: 8px 0;
- width: 38px;
- color: $black-500;
- box-shadow: none;
- font-family: $font-family-secundary;
- font-size: 14px;
- line-height: 16px;
-
- @include mq(lg, max) {
- width: 24px !important;
- }
- }
-
- .icon-plus-sign,
- .icon-minus-sign {
- &::before {
- color: $white;
- background: $vivid-blue;
- display: block;
- font-family: $font-family;
- font-weight: 700;
- padding: 1px 12px;
- }
- }
-
- .icon-minus-sign {
- &:before {
- content: "-";
- font-size: 16px;
- }
- }
-
- .icon-plus-sign {
- &:before {
- content: "+";
- font-size: 14px;
- }
- }
-
- .item-quantity-change {
- @media (max-width: 979px) and (min-width: 768px) {
- position: inherit;
- bottom: inherit;
- left: inherit;
- height: inherit;
- width: inherit;
- top: inherit;
- }
-
- @media (max-width: 490px) {
- padding: 0;
- }
+ padding: 0;
}
}
+ }
- .quantity-price,
- .best-price {
- .icon-question-sign {
- display: none;
- }
- span {
- font-style: normal;
- font-weight: normal;
- font-size: 14px;
- line-height: 16px;
- color: #292929;
- }
+ td.quantity-price {
+ text-align: left;
+ padding: 0;
+
+ .icon-question-sign {
+ display: none;
+ }
+
+ span {
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 16px;
+ color: $black-400;
}
.quantity-price {
@@ -316,117 +418,428 @@
display: none;
}
}
+ }
- .item-remove {
- @media (max-width: 490px) {
- top: 0;
- }
- .icon::before {
- color: #8d8d8d;
- font-size: 15px;
-
- @include mq(md, max) {
- font-size: 18px;
- }
- }
+ .best-price {
+ .icon-question-sign {
+ display: none;
+ }
+ span {
+ font-style: $font-family-secundary;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+ color: $black-400;
+ // padding: 0 49px 0 0;
+ word-spacing: -5px;
}
- .item-unavailable-message {
- background-color: #d8c8ac;
- color: #fff;
+ .new-product-price-label {
+ text-transform: lowercase;
+ }
+ }
- .icon-warning-sign {
- color: #bb4f4f;
- }
+ .item-remove {
+ padding: 0;
+ @media (max-width: 490px) {
+ top: 0;
+ }
+ .icon::before {
+ color: $gray-400;
+ font-size: 15px;
- .top-arrow {
- border-bottom-color: #d8c8ac;
+ @include mq(md, max) {
+ font-size: 18px;
}
}
}
- .summary {
- .cart-more-options {
- margin: 0;
- width: max-content;
+ .item-unavailable-message {
+ background-color: #d8c8ac;
+ color: #fff;
- .srp-container {
- padding: 0 0 0 10px;
+ .icon-warning-sign {
+ color: #bb4f4f;
+ }
+
+ .top-arrow {
+ border-bottom-color: #d8c8ac;
+ }
+ }
+}
+
+.summary {
+ .cart-more-options {
+ margin: 0;
+ width: max-content;
+
+ .srp-container {
+ padding: 0 0 0 10px;
+
+ @include mq(md, max) {
+ padding: 0 16px;
+ }
+
+ .srp-main-title {
+ margin: 32px 0 12px;
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 33px;
+ color: $black-500;
@include mq(md, max) {
- padding: 0 16px;
- }
-
- .srp-main-title {
- margin: 32px 0 12px;
- font-family: $font-family;
- font-style: normal;
- font-weight: 400;
- font-size: 24px;
- line-height: 33px;
- color: $black-500;
-
- @include mq(md, max) {
- margin-top: 0;
- }
- }
-
- .srp-description {
- color: $gray-700;
- font-family: $font-family;
- font-size: 12px;
- line-height: 18px;
- margin: 0 0 12px;
- }
-
- button.shp-open-options {
- background-color: $gray-100;
- border: none;
- border-radius: 5px;
- color: $black-500;
- font-family: $font-family;
- font-size: 14px;
- letter-spacing: 0.05em;
- line-height: 19px;
- font-weight: 500;
- outline: none;
- padding: 12px 40px;
- transition: all 0.2s linear;
-
- &:hover {
- background-color: lighten(#e5e5e5, 5);
- }
-
- &:active {
- background-color: darken(#e5e5e5, 5);
- }
+ margin-top: 0;
}
}
- .srp-data {
- width: 280px;
+ .srp-description {
+ color: $gray-700;
+ font-family: $font-family;
+ font-size: 12px;
+ line-height: 18px;
+ margin: 0 0 12px;
+ }
- @include mq(cstm, max) {
- width: calc(100vw - 32px);
+ button.shp-open-options {
+ background-color: $gray-100;
+ border: none;
+ border-radius: 5px;
+ color: $black-500;
+ font-family: $font-family;
+ font-size: 14px;
+ letter-spacing: 0.05em;
+ line-height: 19px;
+ font-weight: 500;
+ outline: none;
+ padding: 12px 40px;
+ transition: all 0.2s linear;
+
+ &:hover {
+ background-color: lighten(#e5e5e5, 5);
}
- @include mq(md, max) {
- margin-bottom: 40px;
+ &:active {
+ background-color: darken(#e5e5e5, 5);
+ }
+ }
+ }
+
+ .srp-data {
+ width: 280px;
+
+ @include mq(cstm, max) {
+ width: calc(100vw - 32px);
+ }
+
+ @include mq(md, max) {
+ margin-bottom: 40px;
+ }
+
+ .srp-pickup-my-location__button {
+ background-color: $vivid-blue;
+ border: none;
+ border-radius: 8px;
+ color: $white;
+ outline: none;
+ width: 100%;
+
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 16px;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+
+ &:hover {
+ background-color: $vivid-blue-lighten;
}
- .srp-pickup-my-location__button {
- background-color: #292929;
+ &:active {
+ background-color: $vivid-blue-darker;
+ }
+ }
+ }
+
+ .srp-toggle {
+ margin: 0 0 20px;
+ padding: 0;
+
+ &__wrapper {
+ background-color: $white;
+ border-radius: 100px;
+ width: 100%;
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: normal;
+ font-size: 14px;
+ line-height: 19px;
+ text-transform: uppercase;
+ }
+
+ &__current {
+ border: 1px solid $black-500;
+ border-radius: 100px;
+ }
+
+ .blue {
+ color: $black-500;
+ }
+
+ label {
+ width: 50%;
+
+ &:active {
+ background-color: #f0f0f0;
+ }
+ }
+ }
+
+ .srp-postal-code {
+ .ship-country {
+ display: none;
+ }
+
+ .ship-postalCode {
+ label {
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 14px;
+ color: $black-500;
+ margin-bottom: 2px;
+ }
+
+ input {
+ border: 1px solid f0f0f0;
+ border-radius: 5px;
+ box-shadow: none;
+ outline: none;
+ color: f0f0f0;
+ font-size: 12px;
+ height: 36px;
+ padding: 12px 8px;
+ width: 172px;
+ }
+
+ & ~ button {
+ background-color: $vivid-blue;
+ border: none;
+ border-radius: 5px;
+ color: $white;
+ font-family: $font-family;
+ font-size: 14px;
+ line-height: 19px;
+ letter-spacing: 0.05px;
+ outline: none;
+ // position: absolute;
+ // right: -150px;
+ // top: 36px;
+ transition: all 0.2s linear;
+ width: 96px;
+ text-transform: uppercase;
+ margin-left: 50px;
+ // padding: 8px 11px 9px;
+
+ &:hover {
+ background-color: $vivid-blue-lighten;
+ }
+
+ &:active {
+ background-color: $vivid-blue-darker;
+ }
+ }
+
+ small a {
+ // visibility: hidden;
+
+ // &:after {
+ visibility: visible;
+ content: "Não sei meu código postal";
+ font-family: $font-family-secundary;
+ font-style: normal;
+ font-weight: normal;
+ font-size: 10px;
+ line-height: 12px;
+ color: $black-500;
+ margin-top: 4px;
+ text-decoration: underline;
+ // }
+ }
+
+ span.help.error {
+ color: red;
+ font-size: 12px;
+ position: absolute;
+ left: 0px;
+ width: 100%;
+ top: 17px;
+ }
+ }
+ }
+
+ .srp-result {
+ strong,
+ .srp-items {
+ color: #303030;
+ font-weight: 400;
+ font-size: 14px;
+ }
+
+ #deliver-at-text a {
+ color: #303030;
+ font-size: 16px;
+ font-weight: 500;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+
+ .srp-shipping-current-single {
+ border: 1px solid #8d8d8d;
+ border-radius: 0;
+ color: #303030;
+ margin: 16px 0 0;
+ padding: 4px 12px;
+
+ svg path {
+ fill: #d8c8ac;
+ }
+ }
+
+ .srp-delivery-select {
+ border: 1px solid $gray-300;
+ }
+
+ .srp-delivery-select-container {
+ border: 1px solid $gray-300;
+ border-radius: 5px;
+
+ .srp-shipping-current-many {
+ &__name {
+ color: $black-400;
+ }
+
+ &__sla {
+ color: $gray-700;
+ }
+
+ &__price {
+ color: $gray-700;
+ font-weight: 500;
+ }
+
+ &__arrow svg {
+ fill: #8d8d8d;
+ }
+ }
+ }
+ }
+ }
+
+ &-totalizers {
+ padding: 0;
+ width: 346px;
+
+ .coupon-data {
+ #cart-link-coupon-add {
+ text-decoration: none;
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ span {
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: normal;
+ font-size: 12px;
+ line-height: 14px;
+ color: $black-500;
+ text-decoration: none;
+ cursor: pointer;
+ }
+ }
+
+ @include mq(md, max) {
+ padding: 0 16px;
+ width: 100%;
+ }
+
+ .coupon-column {
+ .coupon {
+ margin: 0;
+ }
+
+ .link-coupon-add {
+ color: #303030;
+ font-size: 12px;
+ text-decoration: underline;
+ }
+
+ .coupon-label label {
+ margin-bottom: 12px;
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: normal;
+ font-size: 12px;
+ line-height: 14px;
+ color: #7d7d7d;
+ cursor: none;
+ }
+
+ .coupon-fields {
+ margin-bottom: 32px;
+
+ @include mq(sm, max) {
+ span {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ i {
+ position: absolute;
+ right: 91px;
+ opacity: 1;
+ }
+ }
+ }
+
+ input {
+ border: 2px solid f0f0f0;
+ border-radius: 5px;
+ box-shadow: none;
+ color: #8d8d8d;
+ font-size: 12px;
+ height: 34px;
+ padding: 0 12px;
+ max-width: 160px;
+
+ @include mq(sm, max) {
+ max-width: 100%;
+ width: 100%;
+ }
+ }
+
+ button {
+ background: #292929;
border: none;
border-radius: 5px;
color: #fff;
+ font-size: 12px;
+ height: 36px;
+ letter-spacing: 1px;
+ margin-left: 6px;
outline: none;
- width: 100%;
+ transition: all 0.2s linear;
+ width: 94px;
+ text-transform: uppercase;
- font-style: normal;
- font-weight: 500;
- font-size: 14px;
- line-height: 16px;
- letter-spacing: 0.05em;
+ @include mq(md, max) {
+ width: 138px;
+ }
&:hover {
background-color: lighten(#292929, 5);
@@ -437,387 +850,116 @@
}
}
}
+ }
- .srp-toggle {
- margin: 0 0 34px;
+ .accordion-group {
+ tr {
+ // border-bottom: 1px solid $gray-50;
+ // border-color: $gray-50;
- &__wrapper {
- background-color: #fff;
- border-radius: 100px;
- width: 100%;
+ td {
+ &.empty {
+ display: none;
+ }
+
+ &.info,
+ &.monetary {
+ font-family: $font-family-secundary;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: $black-400;
+ padding: 10px 0;
+ }
+
+ &.info {
+ text-align: left;
+ }
+
+ &.monetary {
+ text-align: right;
+ }
+ }
+ }
+
+ tfoot {
+ td.info,
+ td.monetary {
font-family: $font-family;
font-style: normal;
- font-weight: normal;
- font-size: 14px;
- line-height: 16px;
- text-transform: uppercase;
- }
-
- &__current {
- border: 1px solid #00c8ff;
- border-radius: 100px;
- }
-
- .blue {
- color: #00c8ff;
- }
-
- label {
- width: 50%;
-
- &:active {
- background-color: #f0f0f0;
- }
- }
- }
-
- .srp-postal-code {
- .ship-postalCode {
- label {
- font-family: $font-family;
- font-style: normal;
- font-weight: normal;
- font-size: 12px;
- line-height: 14px;
- color: #292929;
- margin-bottom: 12px;
- }
-
- input {
- border: 1px solid f0f0f0;
- border-radius: 5px;
- box-shadow: none;
- color: f0f0f0;
- font-size: 12px;
- height: 36px;
- padding: 12px 8px;
- width: 172px;
- }
-
- & ~ button {
- background-color: #292929;
- border: none;
- border-radius: 5px;
- color: #fff;
- font-size: 12px;
- height: 36px;
- letter-spacing: 1px;
- outline: none;
- position: absolute;
- right: -150px;
- top: 36px;
- transition: all 0.2s linear;
- width: 96px;
- text-transform: uppercase;
-
- &:hover {
- background-color: lighten(#292929, 5);
- }
-
- &:active {
- background-color: darken(#292929, 5);
- }
- }
-
- small a {
- font-family: $font-family;
- font-style: normal;
- font-weight: normal;
- font-size: 10px;
- line-height: 12px;
- color: #00c8ff;
- margin-top: 7px;
- }
-
- span.help.error {
- color: red;
- font-size: 12px;
- position: absolute;
- left: 0;
- width: 100%;
- top: 17px;
- }
- }
- }
-
- .srp-result {
- strong,
- .srp-items {
- color: #303030;
- font-weight: 400;
- font-size: 14px;
- }
-
- #deliver-at-text a {
- color: #303030;
- font-size: 16px;
- font-weight: 500;
-
- &:hover {
- text-decoration: underline;
- }
- }
-
- .srp-shipping-current-single {
- border: 1px solid #8d8d8d;
- border-radius: 0;
- color: #303030;
- margin: 16px 0 0;
- padding: 4px 12px;
-
- svg path {
- fill: #d8c8ac;
- }
- }
-
- .srp-delivery-select {
- border: 1px solid #8d8d8d;
- }
-
- .srp-delivery-select-container {
- border: 1px solid #8d8d8d;
- border-radius: 0;
-
- .srp-shipping-current-many {
- &__name {
- color: #303030;
- }
-
- &__sla {
- color: #7d7d7d;
- }
-
- &__price {
- color: #7d7d7d;
- font-weight: 500;
- }
-
- &__arrow svg {
- fill: #8d8d8d;
- }
- }
- }
- }
- }
-
- &-totalizers {
- padding: 0;
- width: 346px;
-
- .coupon-data {
- #cart-link-coupon-add {
- text-decoration: none;
- &:hover {
- text-decoration: underline;
- }
- }
- span {
- font-family: $font-family;
- font-style: normal;
- font-weight: normal;
- font-size: 12px;
- line-height: 14px;
- color: $black-500;
- text-decoration: none;
- cursor: pointer;
- }
- }
-
- @include mq(md, max) {
- padding: 0 16px;
- width: 100%;
- }
-
- .coupon-column {
- .coupon {
- margin: 0;
- }
-
- .link-coupon-add {
- color: #303030;
- font-size: 12px;
- text-decoration: underline;
- }
-
- .coupon-label label {
- margin-bottom: 12px;
- font-family: $font-family;
- font-style: normal;
- font-weight: normal;
- font-size: 12px;
- line-height: 14px;
- color: #7d7d7d;
- cursor: none;
- }
-
- .coupon-fields {
- margin-bottom: 32px;
-
- @include mq(sm, max) {
- span {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- i {
- position: absolute;
- right: 91px;
- opacity: 1;
- }
- }
- }
-
- input {
- border: 2px solid f0f0f0;
- border-radius: 5px;
- box-shadow: none;
- color: #8d8d8d;
- font-size: 12px;
- height: 34px;
- padding: 0 12px;
- max-width: 160px;
-
- @include mq(sm, max) {
- max-width: 100%;
- width: 100%;
- }
- }
-
- button {
- background: #292929;
- border: none;
- border-radius: 5px;
- color: #fff;
- font-size: 12px;
- height: 36px;
- letter-spacing: 1px;
- margin-left: 6px;
- outline: none;
- transition: all 0.2s linear;
- width: 94px;
- text-transform: uppercase;
-
- @include mq(md, max) {
- width: 138px;
- }
-
- &:hover {
- background-color: lighten(#292929, 5);
- }
-
- &:active {
- background-color: darken(#292929, 5);
- }
- }
- }
- }
-
- .accordion-group {
- tr {
- border-color: #e5e5e5;
-
- td {
- &.empty {
- display: none;
- }
-
- &.info,
- &.monetary {
- font-style: normal;
- font-weight: normal;
- font-size: 14px;
- line-height: 16px;
- color: #292929;
- padding: 12px 0;
- }
-
- &.info {
- text-align: left;
- }
-
- &.monetary {
- text-align: right;
- }
- }
- }
-
- tfoot {
- td.info,
- td.monetary {
- font-family: $font-family;
- font-style: normal;
- font-weight: 700;
- font-size: 18px;
- line-height: 25px;
- color: #292929;
- }
- }
- }
- }
- }
-
- .cart-links-bottom {
- display: flex;
- flex-direction: column;
- width: 343px;
-
- @include mq(md, max) {
- padding: 0 16px;
- width: calc(100% - 32px);
- float: none;
- margin-bottom: 50px;
- }
-
- @include mq(md, min) {
- margin: 0;
- padding-bottom: 50px;
- }
-
- .link-choose-more-products-wrapper {
- display: block;
- text-align: center;
- margin-bottom: 16px;
-
- @include mq(md, max) {
- margin-bottom: 0px;
- }
-
- a {
- font-family: $font-family;
- font-style: normal;
- font-weight: normal;
- font-size: 12px;
- line-height: 14px;
- color: $black-500;
- }
- }
-
- .btn-place-order-wrapper {
- a {
- background: $vivid-blue;
- border: none;
- border-radius: 5px;
- display: block;
- font-size: 0;
- transition: ease-in 0.22s all;
- padding: 12px 19px;
-
- &:hover {
- background-color: darken(#4caf50, 5);
- }
-
- &:after {
- content: "finalizar compra";
- font-family: $font-family;
font-weight: 700;
- font-size: 14px;
- letter-spacing: 0.05em;
- color: $black-500;
- text-transform: uppercase;
- vertical-align: middle;
- line-height: 19px;
- text-shadow: none;
+ font-size: 18px;
+ line-height: 25px;
+ color: $black-400;
}
}
}
}
}
+
+.cart-links-bottom {
+ display: flex;
+ flex-direction: column;
+ width: 343px;
+
+ @include mq(md, max) {
+ padding: 0 16px;
+ width: calc(100% - 32px);
+ float: none;
+ margin-bottom: 50px;
+ }
+
+ @include mq(md, min) {
+ margin: 0;
+ padding-bottom: 50px;
+ }
+
+ .link-choose-more-products-wrapper {
+ display: block;
+ text-align: center;
+ margin-bottom: 16px;
+
+ @include mq(md, max) {
+ margin-bottom: 0px;
+ }
+
+ a {
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: normal;
+ font-size: 12px;
+ line-height: 14px;
+ color: $black-500;
+ }
+ }
+
+ .btn-place-order-wrapper {
+ a {
+ background: $vivid-blue;
+ border: none;
+ border-radius: 5px;
+ display: block;
+ font-size: 0;
+ transition: ease-in 0.22s all;
+ padding: 12px 19px;
+
+ &:hover {
+ background-color: $vivid-blue-lighten;
+ }
+
+ &:after {
+ content: "finalizar compra";
+ font-family: $font-family;
+ font-weight: 700;
+ font-size: 14px;
+ letter-spacing: 0.05em;
+ color: $black-500;
+ text-transform: uppercase;
+ vertical-align: middle;
+ line-height: 19px;
+ text-shadow: none;
+ }
+ }
+ }
+}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
index 9a52731..d299a49 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
@@ -4,6 +4,11 @@ body .container-main.container-order-form .orderform-template.active {
margin-left: unset;
margin-right: 0;
float: right;
+
+ .quantity {
+ background-color: $vivid-blue;
+ color: $white;
+ }
}
.orderform-template-holder {
width: 66.1132%;
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
index 7428c2e..8a1fd39 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
@@ -3,6 +3,7 @@
&-content {
color: #292929;
text-align: center;
+ align-items: center;
@include mq(md, max) {
padding: 0 16px;
@@ -10,14 +11,12 @@
}
&-title {
- display: none;
- &::before{
- font-family: $font-family;
- font-weight: 700;
- font-size: 24px;
- line-height: 33px;
- text-transform: uppercase;
- }
+ align-items: center;
+ font-family: $font-family;
+ font-weight: 700;
+ font-size: 24px;
+ line-height: 33px;
+ text-transform: uppercase;
}
&-message {
@@ -26,21 +25,29 @@
&-links {
.link-choose-products {
- background-color: $white;
- border-style: border-box;
- border: 1px solid $black-500;
- border-radius: 0;
- transition: ease-in 0.22s all;
- outline: none;
- font-family: $font-family-secundary;
- font-style: normal;
- font-weight: 500;
- font-size: 14px;
- line-height: 16px;
- text-align: center;
- letter-spacing: 0.05em;
- color: $black-500;
- text-transform: uppercase;
+ &:before {
+ content: "";
+ }
+
+ &:after {
+ content: "Continuar comprando";
+ font-family: $font-family-secundary;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16.38px;
+ text-align: center;
+ text-transform: uppercase;
+ background-color: $white;
+ border-style: border-box;
+ border: 1px solid $black-500;
+ border-radius: 0;
+ transition: ease-in 0.22s all;
+ outline: none;
+ letter-spacing: 0.05em;
+ padding: 15px 65px 17px 64px;
+ color: $black-500;
+ }
&:hover {
background: lighten(#292929, 5);
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index a21e4be..76a0d16 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -71,8 +71,17 @@ body {
}
.btn-success {
- background: #292929;
- text-shadow: none;
+ border: none;
+ border-radius: 8px;
+ color: $white;
+ outline: none;
+ font-family: "Open Sans",sans-serif;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 16px;
+ letter-spacing: .05em;
+ text-transform: uppercase;
&:hover {
background: lighten(#292929, 15%);
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index 6e28ce8..f2662d5 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -20,7 +20,7 @@
font-style: normal;
font-weight: normal;
font-size: 10px;
- line-height: 12px;
+ line-height: 14px;
text-transform: capitalize;
max-width: 40%;
@@ -38,15 +38,19 @@
justify-self: center;
list-style: none;
- li .vtex-pci {
- &::before {
- display: block;
- content: "";
- height: 24px;
- width: 1px;
- color: $gray-400;
- }
- }
+ // li .vtex-pci {
+ // &::before {
+ // display: block;
+ // content: "";
+ // height: 24px;
+ // width: 1px;
+ // color: $gray-400;
+ // }
+
+ // width: 81.62%
+ // img {
+ // }
+ // }
@include mq(md, max) {
align-self: center;
@@ -54,7 +58,8 @@
}
&__divider {
- background-color: #8d8d8d;
+ content: "";
+ background-color: $gray-400;
display: inline-block;
height: 24px;
margin: 0 8px;
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index 2c0fac0..29c0a3a 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -8,6 +8,7 @@ $font-family-secundary: "Tenor Sans", sans-serif;
$white: #ffffff;
+$gray-50: #e0e0e0;
$gray-100: #ededed;
$gray-200: #e5e5e5;
$gray-300: #f0f0f0;
@@ -15,11 +16,19 @@ $gray-400: #c4c4c4;
$gray-500: #989898;
$gray-600: #858585;
$gray-700: #7d7d7d;
+$gray-800: #808080;
+$gray-900: #828282;
$black-400: #292929;
$black-500: #000000;
$vivid-blue: #00C8FF;
+$vivid-blue-lighten: #57dbff;
+$vivid-blue-darker: #00b0e0;
+
+$green: #298541;
+$green-lighten: #2fa34e;
+$green-darker: #185428;
/* Grid breakpoints */
$grid-breakpoints: (