EleonoraOtz/m3-academy-template-checkout-eleonoraotz
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Estiliza carrinho desktop

Browse Source
This commit is contained in:
Eleonora Otz de Mendonça Soares 2022-12-14 20:02:26 -03:00
parent d033d5f86d
commit 1b85338bee
8 changed files with 1032 additions and 728 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
checkout/src/arquivos/js/components/Footer.js
View File

@ -3,6 +3,19 @@ import { waitElement } from "m3-utils";
export default class Footer { export default class Footer {
constructor() { constructor() {
this.init(); this.init();
this.list = [
{},
{},
{},
{},
{},
];
this.addCarrossel();
} }
async init() { async init() {
@ -35,10 +48,14 @@ export default class Footer {
observer.observe(target, config); observer.observe(target, config);
} }
async addCarrossel() { async addCarrossel() {
const elemento = await waitElement("#my-element"); const prateleira = await waitElement("footerCheckout__prateleira");
$(elemento).slick({ $(prateleira).slick({
dots: true,
infinite: true,
arrows: true,
slidesToShow: 4, slidesToShow: 4,
slidesToScroll: 1, slidesToScroll: 4,
variableWidth: true,
}); });
} }
@ -51,6 +68,7 @@ export default class Footer {
<li><img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="Hipercard"></li> <li><img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="Hipercard"></li>
<li><img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="PayPal"></li> <li><img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="PayPal"></li>
<li><img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Boleto"></li> <li><img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Boleto"></li>
<li><span class="footerCheckout__stamps__divider"></span></li>
<li class="vtex-pci"><img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="PCI VTEX"></li> <li class="vtex-pci"><img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="PCI VTEX"></li>
`; `;
} }
@ -74,7 +92,6 @@ export default class Footer {
<img class="m3-logo" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="M3"> <img class="m3-logo" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="M3">
</div> </div>
</li> </li>
`; `;
} }
} }

230
checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
View File

@ -1,13 +1,21 @@
.checkout-container { .checkout-container {
.client-pre-email { .client-pre-email {
border-color: #8d8d8d; border-color: $black-500;
font-family: $font-family;
padding-top: 8px; padding-top: 8px;
label {
font-family: $font-family-secundary;
text-transform: uppercase;
color: $black-500;
}
.link-cart { .link-cart {
a { a {
color: #292929; color: $black-500;
font-family: $font-family-secundary;
font-size: 14px; font-size: 14px;
line-height: 16px;
text-transform: uppercase;
&:hover { &:hover {
color: lighen(#292929, 10); color: lighen(#292929, 10);
@ -25,12 +33,12 @@
margin-bottom: 16px; margin-bottom: 16px;
span { span {
color: #303030; color: $black-500;
font-size: 24px; font-size: 20px;
} }
small { small {
color: #8d8d8d; color: $black-500;
} }
} }
} }
@ -39,26 +47,35 @@
margin: 0 0 16px; margin: 0 0 16px;
input { input {
height: 50px;
box-shadow: none; box-shadow: none;
color: #292929; color: $black-500;
font-family: $font-family; font-family: $font-family;
font-size: 12px;
line-height: 16px;
padding: 0 16px; padding: 0 16px;
border: 2px solid f0f0f0; border: 1px solid $black-500;
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px; border-radius: 5px;
&::placeholder {
color: $black-500;
}
@media (max-width: 490px) { @media (max-width: 490px) {
width: auto; width: auto;
} }
} }
button { button {
background-color: #292929; background-color: $vivid-blue;
border-radius: 5px; border-radius: 0 8px 8px 0;
border: none; border: none;
font-family: $font-family; font-family: $font-family;
height: 54px; color: $black-500;
right: 0; letter-spacing: 0.05em;
height: 50px;
right: -4px;
top: 0; top: 0;
@media (max-width: 490px) { @media (max-width: 490px) {
@ -70,17 +87,23 @@
span.help.error { span.help.error {
color: red; color: red;
font-family: $font-family;
font-weight: 700;
font-size: 12px;
line-height: 16px;
} }
} }
.emailInfo { .emailInfo {
padding: 16px; padding: 16px;
background-color: #fff; background-color: #fff;
border: 1px solid #8d8d8d; border: 1px solid $black-500;
border-radius: 0; border-radius: 5px;
margin-top: 47px;
h3 { h3 {
color: #303030; font-family: $font-family;
font-weight: 700;
margin: 0 0 8px 0; margin: 0 0 8px 0;
} }
@ -89,11 +112,15 @@
li { li {
span { span {
color: #292929; color: $black-500;
font-family: $font-family;
font-weight: 700;
font-size: 12px;
line-height: 16px;
} }
i::before { i::before {
color: #292929; color: $vivid-blue;
font-size: 1rem; font-size: 1rem;
opacity: 1; opacity: 1;
} }
@ -112,19 +139,25 @@
.payment-data, .payment-data,
.client-profile-data { .client-profile-data {
.accordion-group { .accordion-group {
border-radius: 0; border-radius: 8px;
border: 1px solid #8d8d8d; border: 1px solid $gray-300;
font-family: $font-family; font-family: $font-family;
padding: 16px; font-size: 14px;
// font-size: 14px !important;
padding: 24px 17px 38px 17px;
margin-bottom: 16px;
.accordion-heading { .accordion-heading {
span { span {
color: #303030; font-family: $font-family-secundary;
margin-bottom: 8px; font-size: 16px;
line-height: 19px;
color: $black-400;
margin-bottom: 25px;
padding: 0; padding: 0;
i::before { i::before {
fill: #303030; display: none;
} }
} }
@ -143,36 +176,76 @@
.accordion-inner { .accordion-inner {
padding: 0; 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 */ /* General configurations */
.box-info {
font-size: 14px;
line-height: 19px;
color: $gray-700;
}
.client-notice { .client-notice {
color: #292929; display: none;
} }
p { p {
position: relative;
margin-bottom: 6px;
color: $gray-700;
label { label {
color: #292929; // color: $gray-800;
font-weight: 500; font-size: 14px;
font-weight: 400;
margin-bottom: 1px;
} }
select, select,
input { input {
border-radius: 0; padding: 13px 7px;
border: 1px solid #8d8d8d; border-radius: 5px;
border: 1px solid $gray-50;
color: $black-500;
box-shadow: none; box-shadow: none;
margin-bottom: 16px;
} }
.help.error { .help.error {
color: red; color: red;
font-size: 9px;
margin: 0;
} }
} }
.box-client-info-pj { .box-client-info-pj {
display: none;
.link a#is-corporate-client, .link a#is-corporate-client,
.link a#not-corporate-client { .link a#not-corporate-client {
color: #292929; display: none;
font-weight: 500; // color: #292929;
text-decoration: underline; // font-weight: 500;
// text-decoration: underline;
}
.link {
display: none;
} }
} }
@ -181,20 +254,27 @@
} }
button.submit { button.submit {
width: 100%;
border: none; border: none;
border-radius: 5px; border-radius: 8px;
background: #292929;
margin-top: 8px;
outline: none; 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 { // &:hover {
background: lighten(#292929, 5); // background: lighten(#292929, 5);
} // }
&:active { // &:active {
background: darken(#292929, 5); // background: darken(#292929, 5);
} // }
} }
/* Shipping configurations */ /* Shipping configurations */
@ -205,6 +285,10 @@
text-decoration: underline; text-decoration: underline;
} }
.vtex-omnishipping-1-x-SummaryItemContent {
display: block;
}
.vtex-omnishipping-1-x-deliveryGroup { .vtex-omnishipping-1-x-deliveryGroup {
p { p {
color: #303030; color: #303030;
@ -236,52 +320,78 @@
} }
.shp-summary-group-info { .shp-summary-group-info {
border-color: #8d8d8d; border-style: none;
// border-color: #8d8d8d;
} }
.address-summary { .address-summary {
background: none; background: none;
border-color: #8d8d8d; color: $gray-700;
border-radius: 0; border-radius: 0;
color: #303030; font-family: $font-family;
padding: 12px; font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
padding: 0px;
@include mq(md, max) { @include mq(md, max) {
background-position: 8px 9px; background-position: 8px 9px;
} }
a { // a {
color: #303030; // color: #303030;
font-weight: 500; // font-weight: 500;
text-decoration: underline; // text-decoration: underline;
} // }
} }
.shp-summary-group-price, .shp-summary-group-price,
.shp-summary-package { .shp-summary-package {
color: #8d8d8d; padding: 0;
color: $gray-700;
} }
.shp-summary-group-price { // .shp-summary-group-price {
padding-right: 16px; // padding-right: 16px;
} // }
.shp-summary-package { .shp-summary-package {
padding-left: 16px; margin-top: 25px;
} }
.vtex-omnishipping-1-x-summaryChange { .vtex-omnishipping-1-x-summaryChange {
border-color: #303030; display: none;
color: #303030; }
.vtex-omnishipping-1-x-SummaryItemGroup {
padding: 0;
margin: 0;
} }
.vtex-omnishipping-1-x-deliveryChannelsToggle { .vtex-omnishipping-1-x-deliveryChannelsToggle {
background-color: #d8c8ac; background-color: $white;
border: 1px solid #d8c8ac; 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 { .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;
} }
} }
} }

300
checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
View File

@ -17,10 +17,10 @@
display: none; display: none;
} }
.cart { .cart {
border: 1px solid #f0f0f0; border: 1px solid $gray-200;
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px; border-radius: 5px;
padding: 16px; padding: 16px 29px 16px 16px;
@include mq(md, max) { @include mq(md, max) {
margin: 0px 0 25px 0; margin: 0px 0 25px 0;
@ -35,12 +35,22 @@
.cart-fixed { .cart-fixed {
font-family: $font-family; font-family: $font-family;
width: 100%; width: 100%;
border: 1px solid $gray-200;
box-sizing: border-box;
border-radius: 8px;
padding: 24px 17px 36px;
height: auto !important;
h2 { h2 {
background: #fff; padding: 0;
text-align: left;
background: $white;
border: none; border: none;
color: #303030; color: $black-400;
font-size: 14px; font-family: $font-family-secundary;
font-size: 16px;
font-weight: 500; font-weight: 500;
margin-bottom: 34px;
} }
.item-unavailable { .item-unavailable {
@ -52,9 +62,11 @@
} }
.cart { .cart {
border: 1px solid #8d8d8d; border: 0;
padding: 0;
ul li { ul li {
display: flex;
border-top: none; border-top: none;
margin-top: 0; margin-top: 0;
padding-top: 0; padding-top: 0;
@ -65,9 +77,26 @@
border-top: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5;
} }
.shipping-date, // span {
// }
// a img {
// width: 58.82%;
// }
.shipping-date {
display: none;
}
// .shipping-date,
.price { .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 { #go-to-cart-button a {
color: #303030; font-family: $font-family;
color: $black-500;
text-decoration: underline; text-decoration: underline;
} }
@ -86,22 +116,39 @@
td.info { td.info {
width: 100%; width: 100%;
} }
// tr.Discounts {
// border-bottom: $gray-50;
// }
} }
#payment-data-submit { #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: none;
border-radius: 0; color: $white;
color: #fff;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;
&:hover {
background: lighten(#292929, 5); .icon-lock {
display: none;
} }
&:active { // &:hover {
background: darken(#292929, 5); // background: lighten(#292929, 5);
} // }
// &:active {
// background: darken(#292929, 5);
// }
} }
} }
@ -109,6 +156,23 @@
background-color: #fff; 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 { .cart-items {
.product-item { .product-item {
padding: 16px 0; padding: 16px 0;
@ -118,9 +182,10 @@
color: #292929; color: #292929;
padding: 0 0 16px; padding: 0 0 16px;
font-style: normal; font-style: normal;
font-weight: bold; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
text-align: left;
@include mq(md, max) { @include mq(md, max) {
&.quantity-price, &.quantity-price,
@ -131,18 +196,26 @@
} }
.product-image { .product-image {
height: auto; // height: auto;
padding: 0; padding: 0;
// width: 60px;
img {
height: 75px;
max-width: 60px;
width: 60px; width: 60px;
}
}
@include mq(sm, max) { @include mq(sm, max) {
width: 72px; width: 72px;
} }
img { img {
height: 60px; // height: 60px;
max-width: 100%; // max-width: 100%;
width: auto; // width: auto;
width: 58.82%;
@include mq(sm, max) { @include mq(sm, max) {
height: 72px; height: 72px;
@ -151,14 +224,24 @@
} }
} }
.quantity {
box-shadow: none;
}
// td.product-name {
// }
.product-name { .product-name {
padding-right: 0; padding: 0 90px 0 16px;
color: $black-500;
@include mq(lg, max) { @include mq(lg, max) {
width: 250px; width: 250px;
} }
a { a {
width: 17.58%;
color: $black-500; color: $black-500;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
@ -186,6 +269,9 @@
color: $gray-500; color: $gray-500;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
text-align: left;
padding: 0 91px 0 0;
// margin-right: 91px;
@include mq(md, max) { @include mq(md, max) {
display: none; display: none;
@ -193,7 +279,12 @@
} }
.product-price { .product-price {
// visibility: hidden;
text-align: left;
// padding: 0;
min-width: 100px; min-width: 100px;
@include mq(md, max) { @include mq(md, max) {
min-width: 78px; min-width: 78px;
} }
@ -218,16 +309,19 @@
} }
} }
} }
td.product-price {
padding: 0 49px 0 0;
}
td.quantity { td.quantity {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 6px auto 0; margin: 11px 79px 0 0;
padding: 0; padding: 0;
max-height: 38px; height: 34px;
max-width: 118px; width: 99px;
width: max-content !important; // width: max-content !important;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid $gray-300; border: 1px solid $gray-300;
border-radius: 8px; border-radius: 8px;
@ -242,7 +336,7 @@
display: block; display: block;
max-height: 38px; max-height: 38px;
margin: 0 !important; margin: 0 !important;
padding: 8px 0; // padding: 8px 0;
width: 38px; width: 38px;
color: $black-500; color: $black-500;
box-shadow: none; box-shadow: none;
@ -262,22 +356,27 @@
background: $vivid-blue; background: $vivid-blue;
display: block; display: block;
font-family: $font-family; font-family: $font-family;
font-size: 20px;
font-weight: 700; font-weight: 700;
padding: 1px 12px; line-height: 10px;
border-radius: 50%;
padding: 3px 0;
width: 16px;
// padding: 1px 12px;
} }
} }
.icon-minus-sign { .icon-minus-sign {
&:before { &:before {
content: "-"; content: "-";
font-size: 16px; // width: 10px;
} }
} }
.icon-plus-sign { .icon-plus-sign {
&:before { &:before {
content: "+"; content: "+";
font-size: 14px;
} }
} }
@ -297,18 +396,21 @@
} }
} }
.quantity-price, td.quantity-price {
.best-price { text-align: left;
padding: 0;
.icon-question-sign { .icon-question-sign {
display: none; display: none;
} }
span { span {
font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 700;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
color: #292929; color: $black-400;
}
} }
.quantity-price { .quantity-price {
@ -316,13 +418,34 @@
display: none; display: none;
} }
} }
}
.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;
}
.new-product-price-label {
text-transform: lowercase;
}
}
.item-remove { .item-remove {
padding: 0;
@media (max-width: 490px) { @media (max-width: 490px) {
top: 0; top: 0;
} }
.icon::before { .icon::before {
color: #8d8d8d; color: $gray-400;
font-size: 15px; font-size: 15px;
@include mq(md, max) { @include mq(md, max) {
@ -415,51 +538,54 @@
} }
.srp-pickup-my-location__button { .srp-pickup-my-location__button {
background-color: #292929; background-color: $vivid-blue;
border: none; border: none;
border-radius: 5px; border-radius: 8px;
color: #fff; color: $white;
outline: none; outline: none;
width: 100%; width: 100%;
font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 700;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase;
&:hover { &:hover {
background-color: lighten(#292929, 5); background-color: $vivid-blue-lighten;
} }
&:active { &:active {
background-color: darken(#292929, 5); background-color: $vivid-blue-darker;
} }
} }
} }
.srp-toggle { .srp-toggle {
margin: 0 0 34px; margin: 0 0 20px;
padding: 0;
&__wrapper { &__wrapper {
background-color: #fff; background-color: $white;
border-radius: 100px; border-radius: 100px;
width: 100%; width: 100%;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 19px;
text-transform: uppercase; text-transform: uppercase;
} }
&__current { &__current {
border: 1px solid #00c8ff; border: 1px solid $black-500;
border-radius: 100px; border-radius: 100px;
} }
.blue { .blue {
color: #00c8ff; color: $black-500;
} }
label { label {
@ -472,21 +598,26 @@
} }
.srp-postal-code { .srp-postal-code {
.ship-country {
display: none;
}
.ship-postalCode { .ship-postalCode {
label { label {
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: #292929; color: $black-500;
margin-bottom: 12px; margin-bottom: 2px;
} }
input { input {
border: 1px solid f0f0f0; border: 1px solid f0f0f0;
border-radius: 5px; border-radius: 5px;
box-shadow: none; box-shadow: none;
outline: none;
color: f0f0f0; color: f0f0f0;
font-size: 12px; font-size: 12px;
height: 36px; height: 36px;
@ -495,45 +626,55 @@
} }
& ~ button { & ~ button {
background-color: #292929; background-color: $vivid-blue;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
color: #fff; color: $white;
font-size: 12px; font-family: $font-family;
height: 36px; font-size: 14px;
letter-spacing: 1px; line-height: 19px;
letter-spacing: 0.05px;
outline: none; outline: none;
position: absolute; // position: absolute;
right: -150px; // right: -150px;
top: 36px; // top: 36px;
transition: all 0.2s linear; transition: all 0.2s linear;
width: 96px; width: 96px;
text-transform: uppercase; text-transform: uppercase;
margin-left: 50px;
// padding: 8px 11px 9px;
&:hover { &:hover {
background-color: lighten(#292929, 5); background-color: $vivid-blue-lighten;
} }
&:active { &:active {
background-color: darken(#292929, 5); background-color: $vivid-blue-darker;
} }
} }
small a { small a {
font-family: $font-family; // visibility: hidden;
// &:after {
visibility: visible;
content: "Não sei meu código postal";
font-family: $font-family-secundary;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 12px;
color: #00c8ff; color: $black-500;
margin-top: 7px; margin-top: 4px;
text-decoration: underline;
// }
} }
span.help.error { span.help.error {
color: red; color: red;
font-size: 12px; font-size: 12px;
position: absolute; position: absolute;
left: 0; left: 0px;
width: 100%; width: 100%;
top: 17px; top: 17px;
} }
@ -571,24 +712,24 @@
} }
.srp-delivery-select { .srp-delivery-select {
border: 1px solid #8d8d8d; border: 1px solid $gray-300;
} }
.srp-delivery-select-container { .srp-delivery-select-container {
border: 1px solid #8d8d8d; border: 1px solid $gray-300;
border-radius: 0; border-radius: 5px;
.srp-shipping-current-many { .srp-shipping-current-many {
&__name { &__name {
color: #303030; color: $black-400;
} }
&__sla { &__sla {
color: #7d7d7d; color: $gray-700;
} }
&__price { &__price {
color: #7d7d7d; color: $gray-700;
font-weight: 500; font-weight: 500;
} }
@ -713,7 +854,8 @@
.accordion-group { .accordion-group {
tr { tr {
border-color: #e5e5e5; // border-bottom: 1px solid $gray-50;
// border-color: $gray-50;
td { td {
&.empty { &.empty {
@ -722,12 +864,13 @@
&.info, &.info,
&.monetary { &.monetary {
font-family: $font-family-secundary;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 19px;
color: #292929; color: $black-400;
padding: 12px 0; padding: 10px 0;
} }
&.info { &.info {
@ -748,7 +891,7 @@
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 18px;
line-height: 25px; line-height: 25px;
color: #292929; color: $black-400;
} }
} }
} }
@ -802,7 +945,7 @@
padding: 12px 19px; padding: 12px 19px;
&:hover { &:hover {
background-color: darken(#4caf50, 5); background-color: $vivid-blue-lighten;
} }
&:after { &:after {
@ -820,4 +963,3 @@
} }
} }
} }
}

5
checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
View File

@ -4,6 +4,11 @@ body .container-main.container-order-form .orderform-template.active {
margin-left: unset; margin-left: unset;
margin-right: 0; margin-right: 0;
float: right; float: right;
.quantity {
background-color: $vivid-blue;
color: $white;
}
} }
.orderform-template-holder { .orderform-template-holder {
width: 66.1132%; width: 66.1132%;

27
checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
View File

@ -3,6 +3,7 @@
&-content { &-content {
color: #292929; color: #292929;
text-align: center; text-align: center;
align-items: center;
@include mq(md, max) { @include mq(md, max) {
padding: 0 16px; padding: 0 16px;
@ -10,15 +11,13 @@
} }
&-title { &-title {
display: none; align-items: center;
&::before{
font-family: $font-family; font-family: $font-family;
font-weight: 700; font-weight: 700;
font-size: 24px; font-size: 24px;
line-height: 33px; line-height: 33px;
text-transform: uppercase; text-transform: uppercase;
} }
}
&-message { &-message {
display: none; display: none;
@ -26,21 +25,29 @@
&-links { &-links {
.link-choose-products { .link-choose-products {
&: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; background-color: $white;
border-style: border-box; border-style: border-box;
border: 1px solid $black-500; border: 1px solid $black-500;
border-radius: 0; border-radius: 0;
transition: ease-in 0.22s all; transition: ease-in 0.22s all;
outline: none; 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; letter-spacing: 0.05em;
padding: 15px 65px 17px 64px;
color: $black-500; color: $black-500;
text-transform: uppercase; }
&:hover { &:hover {
background: lighten(#292929, 5); background: lighten(#292929, 5);

13
checkout/src/arquivos/sass/checkout/_checkout.scss
View File

@ -71,8 +71,17 @@ body {
} }
.btn-success { .btn-success {
background: #292929; border: none;
text-shadow: 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 { &:hover {
background: lighten(#292929, 15%); background: lighten(#292929, 15%);

27
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -20,7 +20,7 @@
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 14px;
text-transform: capitalize; text-transform: capitalize;
max-width: 40%; max-width: 40%;
@ -38,15 +38,19 @@
justify-self: center; justify-self: center;
list-style: none; list-style: none;
li .vtex-pci { // li .vtex-pci {
&::before { // &::before {
display: block; // display: block;
content: ""; // content: "";
height: 24px; // height: 24px;
width: 1px; // width: 1px;
color: $gray-400; // color: $gray-400;
} // }
}
// width: 81.62%
// img {
// }
// }
@include mq(md, max) { @include mq(md, max) {
align-self: center; align-self: center;
@ -54,7 +58,8 @@
} }
&__divider { &__divider {
background-color: #8d8d8d; content: "";
background-color: $gray-400;
display: inline-block; display: inline-block;
height: 24px; height: 24px;
margin: 0 8px; margin: 0 8px;

9
checkout/src/arquivos/sass/utils/_variaveis.scss
View File

@ -8,6 +8,7 @@ $font-family-secundary: "Tenor Sans", sans-serif;
$white: #ffffff; $white: #ffffff;
$gray-50: #e0e0e0;
$gray-100: #ededed; $gray-100: #ededed;
$gray-200: #e5e5e5; $gray-200: #e5e5e5;
$gray-300: #f0f0f0; $gray-300: #f0f0f0;
@ -15,11 +16,19 @@ $gray-400: #c4c4c4;
$gray-500: #989898; $gray-500: #989898;
$gray-600: #858585; $gray-600: #858585;
$gray-700: #7d7d7d; $gray-700: #7d7d7d;
$gray-800: #808080;
$gray-900: #828282;
$black-400: #292929; $black-400: #292929;
$black-500: #000000; $black-500: #000000;
$vivid-blue: #00C8FF; $vivid-blue: #00C8FF;
$vivid-blue-lighten: #57dbff;
$vivid-blue-darker: #00b0e0;
$green: #298541;
$green-lighten: #2fa34e;
$green-darker: #185428;
/* Grid breakpoints */ /* Grid breakpoints */
$grid-breakpoints: ( $grid-breakpoints: (