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

Desafio 4 M3 Academy #1

Merged
naianfelix merged 11 commits from develop into main 2022-12-19 08:58:14 +00:00
Conversation 0 Commits 11 Files Changed 13 +676 -533
10 changed files with 676 additions and 533 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 0753079b40 - Show all commits

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

@ -12,9 +12,8 @@ export default class Footer {
this.createPrateleira(); this.createPrateleira();
this.prateleira = await waitElement(".footerCheckout__carrossel-itens"); this.prateleira = await waitElement(".footerCheckout__carrossel-itens");
this.itensPrateleira(); this.itensPrateleira();
this.addCarrossel(); this.addCarrossel();
await this.displaySlick();
this.creditCardIconsHTML(); this.creditCardIconsHTML();
this.developedByIconsHTML(); this.developedByIconsHTML();
} }
@ -28,19 +27,40 @@ export default class Footer {
this.developedByIcons = await waitElement(".footerCheckout__developedBy"); this.developedByIcons = await waitElement(".footerCheckout__developedBy");
} }
onUpdate() { async displaySlick() {
//Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos: const orderForm = await window.vtexjs.checkout.getOrderForm();
// vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver const items = orderForm.items.length;
// sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver const _this = this;
let target = this.checkoutVazio;
let config = { childList: true, attributes: true }; $(window).on("orderFormUpdated.vtex", (evt, oF) => {
let observer = new MutationObserver((mutations) => { if (oF.items.length <= 0) {
mutations.forEach(function (mutation) { _this.itensShelf.style.display = "none";
console.log(mutation.type); } else {
}); if (window.location.hash !== "#/shipping" && window.location.hash !== "#/payment") {
_this.itensShelf.style.display = "block";
}
}
}); });
observer.observe(target, config); window.addEventListener("hashchange", async () => {
if (window.location.hash === "#/shipping" || window.location.hash === "#/payment") {
_this.itensShelf.style.display = "none";
} else {
const orderForm = await window.vtexjs.checkout.getOrderForm();
const items = orderForm.items.length;
if (items > 0) {
_this.itensShelf.style.display = "block";
}
}
});
if (
items === 0 ||
window.location.hash === "#/shipping" ||
window.location.hash === "#/payment"
) {
this.itensShelf.style.display = "none";
}
} }
createPrateleira() { createPrateleira() {
@ -95,6 +115,26 @@ export default class Footer {
slidesToScroll: 1, slidesToScroll: 1,
arrows: true, arrows: true,
infinite: true, infinite: true,
responsive: [
{
breakpoint: 1279,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
infinite: true,
dots: true,
},
},
{
breakpoint: 790,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
dots: true,
},
},
],
}); });
} }
@ -133,4 +173,18 @@ export default class Footer {
</li> </li>
`; `;
} }
onUpdate() {
//Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
// vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver
// sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
let target = this.checkoutVazio;
let config = { childList: true, attributes: true };
let observer = new MutationObserver((mutations) => {
mutations.forEach(function (mutation) {
console.log(mutation.type);
});
});
observer.observe(target, config);
}
} }

2
checkout/src/arquivos/js/components/Header.js
View File

@ -10,7 +10,7 @@ export default class Header {
await this.selectors(); await this.selectors();
this.progressBarHTML(); this.progressBarHTML();
this.progressBarProgress(); this.progressBarProgress();
// this.progressUpdate(); this.progressUpdate();
} }
async selectors() { async selectors() {

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

@ -1,19 +1,20 @@
.checkout-container { .checkout-container {
.client-pre-email { .client-pre-email {
border-color: $color-black1; border-color: $color-black-500;
font-family: $font-family; font-family: $font-family;
padding-top: 8px; padding-top: 8px;
.link-cart { .link-cart {
a { a {
color: $color-black1; color: $color-black-500;
font-size: 14px; font-size: 14px;
font-weight: 400;
line-height: 16px; line-height: 16px;
text-transform: uppercase; text-transform: uppercase;
&:hover { &:hover {
cursor: default; cursor: default;
color: lighen($color-black, 10); color: lighen($color-black-100, 10);
} }
} }
} }
@ -30,9 +31,10 @@
span { span {
font-family: $font-family-secundary; font-family: $font-family-secundary;
font-size: 20px; font-size: 20px;
font-weight: 400;
line-height: 23px; line-height: 23px;
text-transform: uppercase; text-transform: uppercase;
color: $color-black1; color: $color-black-500;
} }
small { small {
@ -40,7 +42,7 @@
font-size: 20px; font-size: 20px;
line-height: 23px; line-height: 23px;
text-transform: uppercase; text-transform: uppercase;
color: $color-black1; color: $color-black-500;
padding: 0; padding: 0;
} }
} }
@ -55,13 +57,13 @@
input { input {
box-shadow: none; box-shadow: none;
color: $color-black1; color: $color-black-500;
font-family: $font-family; font-family: $font-family;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
padding: 0 14px; padding: 0 14px;
height: 50px; height: 50px;
border: 1px solid $color-black1; border: 1px solid $color-black-500;
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px;
max-width: 443px; max-width: 443px;
@ -72,7 +74,7 @@
} }
&::placeholder { &::placeholder {
color: $color-black1; color: $color-black-500;
} }
} }
@ -84,7 +86,7 @@
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
font-weight: 700; font-weight: 700;
color: $color-black1; color: $color-black-500;
width: 126px; width: 126px;
height: 50px; height: 50px;
right: 0px; right: 0px;
@ -109,15 +111,15 @@
.emailInfo { .emailInfo {
padding: 16px 16px 27px; padding: 16px 16px 27px;
background-color: $color-white; background-color: $color-white-500;
border: 1px solid $color-black1; border: 1px solid $color-black-500;
border-radius: 5px; border-radius: 5px;
max-width: 366px; max-width: 366px;
width: 100%; width: 100%;
h3 { h3 {
font-family: $font-family; font-family: $font-family;
color: $color-black1; color: $color-black-500;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
font-weight: 700; font-weight: 700;
@ -132,7 +134,7 @@
font-family: $font-family; font-family: $font-family;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
color: $color-black1; color: $color-black-500;
font-weight: 700; font-weight: 700;
} }
@ -145,7 +147,7 @@
} }
i::before { i::before {
color: $color-black; color: $color-black-100;
font-size: 6rem; font-size: 6rem;
opacity: 0.5; opacity: 0.5;
} }
@ -160,7 +162,7 @@
&::after { &::after {
font-family: $font-family-secundary; font-family: $font-family-secundary;
color: $color-black; color: $color-black-100;
content: "Identificação"; content: "Identificação";
font-size: 16px; font-size: 16px;
line-height: 19px; line-height: 19px;
@ -176,10 +178,10 @@
.client-profile-data { .client-profile-data {
.accordion-group { .accordion-group {
border-radius: 8px; border-radius: 8px;
border: 1px solid $color-gray5; border: 1px solid $color-gray3;
font-family: $font-family; font-family: $font-family;
padding: 16px; padding: 16px;
width: 90.06%; // width: 90.06%;
.accordion-heading { .accordion-heading {
.accordion-toggle-active { .accordion-toggle-active {
@ -192,7 +194,7 @@
font-family: $font-family-secundary; font-family: $font-family-secundary;
font-size: 16px; font-size: 16px;
line-height: 18px; line-height: 18px;
color: $color-black; color: $color-black-100;
margin-top: 7px; margin-top: 7px;
margin-bottom: 25px; margin-bottom: 25px;
padding: 0; padding: 0;
@ -221,7 +223,7 @@
background-color: #303030; background-color: #303030;
border-radius: 8px; border-radius: 8px;
border: none; border: none;
color: $color-white; color: $color-white-500;
justify-content: center; justify-content: center;
padding: 6px 5px 6px 8px; padding: 6px 5px 6px 8px;
} }
@ -230,6 +232,14 @@
.accordion-inner { .accordion-inner {
padding: 0; padding: 0;
p {
input {
box-sizing: border-box;
width: 100%;
max-width: 100%;
}
}
.box-step { .box-step {
.shipping-summary-info { .shipping-summary-info {
font-family: $font-family; font-family: $font-family;
@ -243,6 +253,16 @@
.client-notice { .client-notice {
display: none; display: none;
// &::after {
// position: absolute;
// content: "Identificação";
// font-family: $font-family-secundary;
// font-size: 16px;
// line-height: 19px;
// color: $color-black-500;
// top: 0;
// }
} }
.ship-country { .ship-country {
@ -265,13 +285,13 @@
border: 1px solid $color-gray8; border: 1px solid $color-gray8;
border-radius: 8px; border-radius: 8px;
width: 100%; width: 100%;
max-width: 90%; max-width: 270px;
margin-bottom: 10px; margin-bottom: 10px;
} }
small { small {
font-family: $font-family; font-family: $font-family;
color: $color-black; color: $color-black-100;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
text-decoration: underline; text-decoration: underline;
@ -288,6 +308,33 @@
padding: 0; padding: 0;
label { label {
// input {
// display: none;
// }
// &.checkbox {
// position: relative;
// padding-left: 26px;
// .newsletter-text {
// &::before {
// position: absolute;
// content: "";
// top: 0;
// left: 0;
// width: 16px;
// height: 16px;
// border: 1px solid $color-gray11;
// border-radius: 3px;
// }
// .newsletter-text:checked + .newsletter-text::before {
// // content: '';
// background: $color-blue-100;
// }
// }
font-family: $font-family; font-family: $font-family;
color: $color-gray2; color: $color-gray2;
font-size: 14px; font-size: 14px;
@ -303,12 +350,12 @@
select, select,
input { input {
font-family: $font-family; font-family: $font-family;
color: $color-gray8; color: $color-black-100;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
font-weight: 400; font-weight: 400;
border-radius: 5px; border-radius: 5px;
border: 1px solid $color-gray2; border: 1px solid $color-gray8;
box-shadow: none; box-shadow: none;
padding: 0 12px; padding: 0 12px;
} }
@ -352,29 +399,24 @@
} }
.input-xlarge { .input-xlarge {
width: 91.24%;
height: 40px; height: 40px;
margin-bottom: 16px; margin-bottom: 16px;
} }
.input-small { .input-small {
max-width: 115px;
width: 100%;
height: 40px; height: 40px;
margin-bottom: 16px; margin-bottom: 16px;
} }
#client-first-name, p.client-first-name,
#client-document { p.client-document {
width: calc(50% - 15px);
margin-right: 15px; margin-right: 15px;
} }
[type="checkbox"] { p.client-last-name,
width: 18px; p.client-phone {
height: 18px; width: 50%;
border: 1px solid $color-gray;
padding-right: 8px;
margin-top: 0px;
} }
.help.error { .help.error {
@ -392,7 +434,7 @@
.newsletter { .newsletter {
.newsletter-text { .newsletter-text {
font-family: $font-family; font-family: $font-family;
color: $color-gray8; color: $color-gray10;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
} }
@ -403,7 +445,7 @@
.link a#is-corporate-client, .link a#is-corporate-client,
.link a#not-corporate-client { .link a#not-corporate-client {
color: $color-black; color: $color-black-100;
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: underline;
} }
@ -419,7 +461,7 @@
button.submit { button.submit {
font-family: $font-family; font-family: $font-family;
color: $color-white; color: $color-white-500;
letter-spacing: 0.05px; letter-spacing: 0.05px;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
@ -436,7 +478,7 @@
/* Shipping configurations */ /* Shipping configurations */
.ship-postalCode small a { .ship-postalCode small a {
color: $color-black; color: #303030;
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: underline;
} }
@ -483,7 +525,7 @@
.vtex-omnishipping-1-x-addressSummaryActive { .vtex-omnishipping-1-x-addressSummaryActive {
.address-summary { .address-summary {
background: none; background: none;
border: 1px solid $color-gray2; border: 1px solid $color-gray8;
border-radius: 8px; border-radius: 8px;
padding: 12px; padding: 12px;
@ -530,7 +572,7 @@
} }
.vtex-omnishipping-1-x-leanShippingText { .vtex-omnishipping-1-x-leanShippingText {
border-right: 1px solid $color-gray2; border-right: 1px solid $color-gray8;
} }
.vtex-omnishipping-1-x-leanShippingTextLabel { .vtex-omnishipping-1-x-leanShippingTextLabel {
@ -542,10 +584,20 @@
letter-spacing: 0.05px; letter-spacing: 0.05px;
} }
.shp-lean { .vtex-omnishipping-1-x-option:hover,
.shp-lean-option { .vtex-omnishipping-1-x-leanShippingOptionActive {
&::before { background: #f2f2f2;
}
.shp-option-icon {
position: relative; position: relative;
svg {
display: none;
}
&::before {
display: block;
content: ""; content: "";
border: 1px solid #828282; border: 1px solid #828282;
border-radius: 3px; border-radius: 3px;
@ -556,31 +608,22 @@
} }
} }
.shp-lean-option-active { .shp-lean-option-active .shp-option-icon {
&::after { &::after {
display: block;
content: ""; content: "";
width: 12px; width: 12px;
display: block; display: block;
position: absolute; position: absolute;
left: 37.1%; left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 3px; border-radius: 3px;
height: 12px; height: 12px;
background-color: $color-blue-100; background-color: $color-blue-100;
} }
} }
.vtex-omnishipping-1-x-svg {
display: none;
opacity: 0;
&::before {
border: 1px solid $color-gray8;
width: 16px;
height: 16px;
}
}
}
.vtex-omnishipping-1-x-addressSummary { .vtex-omnishipping-1-x-addressSummary {
span { span {
font-family: $font-family; font-family: $font-family;
@ -601,7 +644,7 @@
} }
.input-large { .input-large {
border: 1px solid $color-gray2; border: 1px solid $color-gray8;
border-radius: 8px; border-radius: 8px;
max-width: 294px; max-width: 294px;
width: 100%; width: 100%;
@ -618,8 +661,15 @@
} }
.btn-ask-for-geolocation-cta { .btn-ask-for-geolocation-cta {
color: $color-white; color: $color-white-500;
background: $color-blue-100; background: $color-blue-100;
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
letter-spacing: 0.05em;
text-transform: uppercase;
} }
.vtex-omnishipping-1-x-summaryChange { .vtex-omnishipping-1-x-summaryChange {
@ -628,24 +678,24 @@
} }
.vtex-omnishipping-1-x-warning { .vtex-omnishipping-1-x-warning {
border-color: $color-gray2; border-color: $color-gray10;
.onda-v1 { .onda-v1 {
font-family: $font-family; font-family: $font-family;
color: $color-black1; color: $color-black-500;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
} }
} }
.vtex-omnishipping-1-x-deliveryChannelsToggle { .vtex-omnishipping-1-x-deliveryChannelsToggle {
background-color: $color-white; background-color: $color-white-500;
border: 1px solid $color-gray5; border: 1px solid $color-black-100;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
} }
.vtex-omnishipping-1-x-deliveryOptionActive { .vtex-omnishipping-1-x-deliveryOptionActive {
font-family: $font-family; font-family: $font-family;
color: $color-black; color: $color-black-100;
text-transform: uppercase; text-transform: uppercase;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
@ -659,13 +709,9 @@
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
border-radius: 100px; border-radius: 100px;
// text-shadow: 1.3px 1px lighten($color-black, 50); // text-shadow: 1.3px 1px lighten($color-black-100, 50);
} }
// .vtex-omnishipping-1-x-addressFormPart1 {
// display: ;
// }
.ship-number { .ship-number {
.input-mini { .input-mini {
max-width: unset; max-width: unset;
@ -707,12 +753,11 @@
max-width: 60px; max-width: 60px;
width: 60px; width: 60px;
height: 60px; height: 60px;
object-fit: cover;
} }
span { span {
font-family: $font-family-secundary; font-family: $font-family-secundary;
color: $color-black1; color: $color-black-500;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
} }
@ -735,7 +780,7 @@
.input-mini { .input-mini {
width: 100%; width: 100%;
border: 1px solid $color-gray2; border: 1px solid $color-gray10;
border-radius: 8px; border-radius: 8px;
} }

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

@ -35,9 +35,11 @@
font-family: $font-family; font-family: $font-family;
width: 100%; width: 100%;
height: 397px !important; height: 397px !important;
padding: 24px 16px;
box-sizing: border-box;
h2 { h2 {
background: $color-white; background: $color-white-500;
border: none; border: none;
color: #303030; color: #303030;
font-size: 14px; font-size: 14px;
@ -69,27 +71,21 @@
.shipping-date { .shipping-date {
display: none; display: none;
} }
.price {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-align: right;
color: #292929;
}
} }
} }
.summary-template-holder { .summary-template-holder {
border-top: none; border-top: none;
background: $color-white; background: $color-white-500;
.summary-totalizers {
max-width: unset;
}
} }
#go-to-cart-button a { #go-to-cart-button a {
font-family: $font-family; font-family: $font-family;
color: $color-black1; color: $color-black-500;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
text-decoration: underline; text-decoration: underline;
@ -103,26 +99,34 @@
} }
#payment-data-submit { #payment-data-submit {
background: $color-black; font-family: "Open Sans", sans-serif;
background: $color-green2;
border: none; border: none;
border-radius: 0; border-radius: 8px;
color: $color-white; color: $color-white;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;
margin-top: 20%; font-weight: 700;
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
letter-spacing: 0.05em;
&:hover { &:hover {
background: lighten($color-black, 5); background: lighten($color-green2, 5);
} }
&:active { &:active {
background: darken($color-black, 5); background: darken($color-green2, 5);
}
.icon-lock {
display: none;
} }
} }
} }
.lookatme { .lookatme {
background-color: $color-white; background-color: $color-white-500;
} }
.cart-items { .cart-items {
@ -132,7 +136,7 @@
th { th {
font-family: $font-family-secundary; font-family: $font-family-secundary;
color: $color-black; color: $color-black-100;
padding: 0 0 16px; padding: 0 0 16px;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
@ -151,7 +155,7 @@
&::after { &::after {
content: "Frete"; content: "Frete";
font-family: $font-family-secundary; font-family: $font-family-secundary;
color: $color-black; color: $color-black-100;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
@ -165,7 +169,7 @@
&::after { &::after {
content: "Unidade"; content: "Unidade";
font-family: $font-family-secundary; font-family: $font-family-secundary;
color: $color-black; color: $color-black-100;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
@ -188,28 +192,27 @@
height: auto; height: auto;
padding: 0; padding: 0;
width: 60px; width: 60px;
background: none;
a {
@include mq(sm, max) { @include mq(sm, max) {
width: 72px; display: block;
margin-right: 16px;
}
} }
img { img {
height: 60px; height: 60px;
max-width: 60px; max-width: unset;
width: 100%; width: 60px;
transform: rotateY(180deg); transform: rotateY(180deg);
object-fit: cover; object-fit: cover;
@include mq(sm, max) {
height: 72px;
width: auto;
}
} }
} }
.product-name { .product-name {
font-family: $font-family-secundary; font-family: $font-family-secundary;
color: $color-black1; color: $color-black-500;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
white-space: unset; white-space: unset;
@ -219,7 +222,7 @@
} }
a { a {
color: $color-black1; color: $color-black-500;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
text-decoration: none; text-decoration: none;
@ -229,8 +232,8 @@
text-decoration: none; text-decoration: none;
} }
@media (max-width: 490px) { @include mq(md, max) {
margin-left: 23px; margin: 0;
} }
} }
@ -298,7 +301,7 @@
font-weight: normal; font-weight: normal;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
color: $color-black; color: $color-black-100;
} }
} }
@ -335,7 +338,7 @@
.item-unavailable-message { .item-unavailable-message {
background-color: #d8c8ac; background-color: #d8c8ac;
color: $color-white; color: $color-white-500;
.icon-warning-sign { .icon-warning-sign {
color: #bb4f4f; color: #bb4f4f;
@ -352,10 +355,49 @@
} }
td.quantity { td.quantity {
padding-right: 90px; text-align: start;
border: 1px solid #f0f0f0;
border-radius: 8px;
box-sizing: border-box;
display: flex;
align-items: center;
max-width: 99px;
padding: 9px 11px;
height: 34px;
margin-top: 13px;
@include mq(md, max) {
width: 99px !important;
// margin-left: calc(60px + 16px) !important;
display: flex !important;
padding: 9px 11px !important;
}
.item-quantity-change { .item-quantity-change {
@include mq(lg, max) {
position: unset !important;
width: unset !important;
height: unset !important;
}
}
.icon-minus-sign,
.icon-plus-sign {
color: $color-blue-100; color: $color-blue-100;
} }
input {
border: none;
outline: none;
box-shadow: none;
margin: 0;
padding: 0;
flex: 1;
&:focus {
box-shadow: none;
}
}
} }
.summary { .summary {
@ -374,7 +416,7 @@
margin: 0 0 12px; margin: 0 0 12px;
font-size: 24px; font-size: 24px;
line-height: 32px; line-height: 32px;
color: $color-black1; color: $color-black-500;
font-family: $font-family; font-family: $font-family;
@include mq(md, max) { @include mq(md, max) {
@ -388,14 +430,15 @@
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
margin: 0 0 10px; margin: 0 0 10px;
max-width: 276px;
} }
button.shp-open-options { button.shp-open-options {
background-color: $color-gray9; background-color: $color-gray1;
font-family: $font-family; font-family: $font-family;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
color: $color-black1; color: $color-black-500;
letter-spacing: 0.05em; letter-spacing: 0.05em;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
@ -430,7 +473,7 @@
background-color: $color-blue-100; background-color: $color-blue-100;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
color: $color-white; color: $color-white-500;
outline: none; outline: none;
width: 100%; width: 100%;
@ -446,7 +489,7 @@
margin: 0 0 20px; margin: 0 0 20px;
&__wrapper { &__wrapper {
background-color: $color-white; background-color: $color-white-500;
border-radius: 100px; border-radius: 100px;
width: 100%; width: 100%;
font-family: $font-family; font-family: $font-family;
@ -456,13 +499,13 @@
} }
&__current { &__current {
border: 1px solid $color-black1; border: 1px solid $color-black-500;
border-radius: 100px; border-radius: 100px;
box-shadow: 2px 2px 4px rgba($color-black1, 0.2); box-shadow: 2px 2px 4px rgba($color-black-500, 0.2);
} }
.blue { .blue {
color: $color-black1; color: $color-black-500;
} }
label { label {
@ -486,7 +529,7 @@
font-weight: normal; font-weight: normal;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-black; color: $color-black-100;
margin-bottom: 12px; margin-bottom: 12px;
} }
@ -494,7 +537,7 @@
border: 1px solid $color-gray8; border: 1px solid $color-gray8;
border-radius: 5px; border-radius: 5px;
box-shadow: none; box-shadow: none;
color: $color-black1; color: $color-black-500;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
height: 36px; height: 36px;
@ -508,7 +551,7 @@
right: calc(-138px - 9px); right: calc(-138px - 9px);
border: none; border: none;
border-radius: 8px; border-radius: 8px;
color: $color-white; color: $color-white-500;
height: 36px; height: 36px;
letter-spacing: 1px; letter-spacing: 1px;
outline: none; outline: none;
@ -528,12 +571,12 @@
font-family: $font-family; font-family: $font-family;
font-size: 0px; font-size: 0px;
line-height: 12px; line-height: 12px;
color: $color-black1; color: $color-black-500;
&::after { &::after {
content: "Não sei meu código postal"; content: "Não sei meu código postal";
font-family: $font-family-secundary; font-family: $font-family-secundary;
color: $color-black1; color: $color-black-500;
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 12px;
text-decoration: underline; text-decoration: underline;
@ -620,13 +663,20 @@
max-width: 354px; max-width: 354px;
width: 100%; width: 100%;
@include mq(md, max) {
float: none;
margin: 0;
width: 100%;
max-width: unset;
}
.coupon-data { .coupon-data {
display: block !important; display: block !important;
margin: 0 0 10px; margin: 0 0 10px;
#cart-link-coupon-add { #cart-link-coupon-add {
font-family: $font-family-secundary; font-family: $font-family-secundary;
color: $color-black1; color: $color-black-500;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
text-decoration: none; text-decoration: none;
@ -641,7 +691,7 @@
font-weight: normal; font-weight: normal;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-black1; color: $color-black-500;
text-decoration: none; text-decoration: none;
} }
} }
@ -674,16 +724,19 @@
.coupon-fields { .coupon-fields {
margin-bottom: 20px; margin-bottom: 20px;
span {
display: flex;
i.loading-coupon {
display: none;
}
}
@include mq(sm, max) { @include mq(sm, max) {
span { span {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
i {
position: absolute;
right: 91px;
opacity: 1;
}
} }
} }
@ -698,10 +751,8 @@
max-width: 204px; max-width: 204px;
width: 100%; width: 100%;
float: left; float: left;
&::placeholder {
padding: 0 16px; padding: 0 16px;
} box-sizing: border-box;
@include mq(sm, max) { @include mq(sm, max) {
max-width: 100%; max-width: 100%;
@ -713,7 +764,7 @@
background: $color-blue-100; background: $color-blue-100;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
color: $color-black1; color: $color-black-500;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
height: 36px; height: 36px;
@ -724,17 +775,18 @@
max-width: 133px; max-width: 133px;
width: 100%; width: 100%;
text-transform: uppercase; text-transform: uppercase;
text-shadow: none;
@include mq(md, max) { @include mq(md, max) {
width: 138px; width: 138px;
} }
&:hover { &:hover {
background-color: lighten($color-black, 5); background-color: lighten($color-blue-100, 5);
} }
&:active { &:active {
background-color: darken($color-black, 5); background-color: darken($color-blue-100, 5);
} }
} }
} }
@ -752,10 +804,11 @@
&.info, &.info,
&.monetary { &.monetary {
font-family: $font-family; font-family: $font-family;
color: $color-gray2; color: $color-black-100;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
margin: 25px 0; margin: 25px 0;
padding: 10px 0;
} }
&.info { &.info {
@ -773,17 +826,15 @@
font-size: 18px; font-size: 18px;
line-height: 25px; line-height: 25px;
font-weight: 700; font-weight: 700;
color: $color-black; color: $color-black-100;
td.info { td.info {
font-family: $font-family; font-family: $font-family;
font-size: 18px; font-size: 18px;
line-height: 25px; line-height: 25px;
font-weight: 700; font-weight: 700;
color: $color-black; color: $color-black-100;
padding: 0; padding: 14px 0;
margin-top: 12px;
margin-bottom: 0;
} }
td.monetary { td.monetary {
@ -791,7 +842,8 @@
font-size: 18px; font-size: 18px;
line-height: 25px; line-height: 25px;
font-weight: 700; font-weight: 700;
color: $color-black; color: $color-black-100;
padding: 14px 0;
} }
} }
} }
@ -809,6 +861,7 @@
width: calc(100% - 32px); width: calc(100% - 32px);
float: none; float: none;
margin-bottom: 50px; margin-bottom: 50px;
max-width: unset;
} }
@include mq(md, min) { @include mq(md, min) {
@ -830,11 +883,10 @@
font-family: $font-family-secundary; font-family: $font-family-secundary;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-black1; color: $color-black-500;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
cursor: auto;
} }
} }
} }
@ -855,7 +907,7 @@
font-weight: 700; font-weight: 700;
font-size: 14px; font-size: 14px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: $color-black1; color: $color-black-500;
text-transform: uppercase; text-transform: uppercase;
vertical-align: middle; vertical-align: middle;
line-height: 19px; line-height: 19px;

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

@ -1,104 +1,150 @@
body .container-main.container-order-form .orderform-template.active { body .container-main.container-order-form .orderform-template.active {
.mini-cart { .mini-cart {
border: 1px solid $color-gray5; width: 32.3242%;
border-radius: 8px;
// padding: 25px 17px;
height: 397px;
width: 32.37%;
margin-left: unset; margin-left: unset;
margin-right: 0; margin-right: 0;
float: right; float: right;
.payment-confirmation-wrap {
#payment-data-submit {
font-family: $font-family;
color: $color-white;
font-size: 14px;
line-height: 19px;
font-weight: 700;
background: $color-green;
border-radius: 8px;
}
}
}
.span4 {
padding: 24px 17px 22px;
}
h2 { h2 {
font-family: $font-family-secundary; text-align: start;
color: $color-black; margin-bottom: 34px;
padding: 0;
font-family: "Tenor Sans, sans-serif";
font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 19px; line-height: 19px;
text-align: initial;
padding: 0;
margin-bottom: 34px;
} }
.ask-for-geolocation-title { .cart-fixed {
position: relative;
border: 1px solid #e5e5e5;
border-radius: 8px;
box-sizing: border-box;
max-height: 397px;
padding: 24px 16px;
.summary-cart-template-holder {
height: auto !important;
.cart .cart-items .product-name {
max-width: 115px;
}
}
.summary-template-holder {
.totalizers-list {
tr {
position: relative;
&:first-of-type {
&::before {
content: "";
width: calc(100% + 32px);
position: absolute;
height: 1px;
background: $color-gray8;
top: 0;
left: -16px;
}
}
&::after {
content: "";
width: calc(100% + 32px);
position: absolute;
height: 1px;
background: $color-gray8;
bottom: 0;
left: -16px;
}
}
}
td.info,
td.monetary {
padding: 0; padding: 0;
}
tfoot {
td.info,
td.monetary {
margin: 0; margin: 0;
padding: 30px 0 22px 0;
}
}
}
.payment-confirmation-wrap {
position: absolute;
top: calc(100% + 20px);
left: 0;
background: $color-green2;
border-radius: 8px;
} }
.cart { .cart {
border: 0; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
height: auto !important;
li { ul li {
display: flex; display: flex;
align-items: center; align-items: center;
.description { .description {
margin: 0; margin-left: auto;
} margin-top: unset;
font-size: 12px;
color: $color-black-100;
.price { .price {
font-family: $font-family;
color: $color-black;
font-weight: 400; font-weight: 400;
font-size: 12px; }
line-height: 16px; }
margin: 0; }
// padding-right: 17px;
} }
} }
} }
tr { .payment-data.span12 {
border-top: 1px solid $color-gray; .accordion-heading {
&::after {
content: "Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados";
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 24px;
letter-spacing: -0.01em;
color: $color-gray2;
display: block;
margin: 12px 0 16px 0;
}
} }
.orderform-template-holder {
width: 66.1132%;
} }
.payment-data { .payment-data {
.active { .box-step form.form-step {
width: unset; display: flex;
padding: 14.5px;
.steps-view {
flex: 1;
} }
} }
.payment-group {
margin-top: 0;
width: 209px;
margin-right: 40px;
}
}
.payment-body {
.link-gift-card { .link-gift-card {
#show-gift-card-group { #show-gift-card-group {
display: none; display: none;
} }
} }
.payment-body {
.accordion-inner {
.box-step {
display: flex;
.form-step {
display: flex;
.payment-group {
margin: 0;
.payment-group-list-btn {
width: unset;
}
.pg-deposito, .pg-deposito,
.pg-transferencia-bancaria, .pg-transferencia-bancaria,
.pg-money, .pg-money,
@ -117,7 +163,7 @@ body .container-main.container-order-form .orderform-template.active {
span { span {
background-image: none !important; background-image: none !important;
font-family: $font-family; font-family: $font-family;
color: $color-black1; color: $color-black-200;
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
text-align: center; text-align: center;
@ -126,7 +172,7 @@ body .container-main.container-order-form .orderform-template.active {
a { a {
background: $color-gray3; background: $color-gray3;
border: 1px solid $color-white; border: 1px solid $color-black-500;
border-radius: 6px; border-radius: 6px;
margin-bottom: 12px; margin-bottom: 12px;
padding: 0; padding: 0;
@ -136,32 +182,17 @@ body .container-main.container-order-form .orderform-template.active {
} }
.active { .active {
border: 1px solid $color-red; border: 1px solid $color-red-100;
background: rgba(220, 221, 227, 0.3); background: rgba(220, 221, 227, 0.3);
margin-left: 0px; margin-left: 0px;
span { span {
color: $color-red; color: $color-red-100;
} }
} }
} }
} }
.orderform-template-holder {
.steps-view { width: 66.1132%;
// width: 363px;
width: 100%;
margin-left: 40px;
} }
} }
}
}
}
}
.PaymentCardHolderDocument {
display: none;
}
.SecurityEnvironmentIcon {
margin-bottom: 5px;
}

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

@ -1,7 +1,7 @@
.empty-cart { .empty-cart {
font-family: $font-family; font-family: $font-family;
&-content { &-content {
color: $color-black1; color: $color-black;
text-align: center; text-align: center;
@include mq(md, max) { @include mq(md, max) {
@ -27,7 +27,7 @@
&-links { &-links {
.link-choose-products { .link-choose-products {
background: $color-white; background: $color-white;
border: 1px solid $color-black1; border: 1px solid $color-black;
border-radius: 0; border-radius: 0;
transition: ease-in-out 0.2s all; transition: ease-in-out 0.2s all;
font-size: 0px; font-size: 0px;
@ -41,7 +41,7 @@
line-height: 16px; line-height: 16px;
text-align: center; text-align: center;
font-family: $font-family-secundary; font-family: $font-family-secundary;
color: $color-black1; color: $color-black;
text-transform: uppercase; text-transform: uppercase;
} }
} }

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

@ -8,14 +8,9 @@ html {
min-height: 100%; min-height: 100%;
} }
footer .footerCheckout__wrapper {
width: 100%;
margin: auto auto 0 auto;
}
footer .footerCheckout__prateleira, footer .footerCheckout__prateleira,
header { header {
width: 100%; width: 100%;
margin: 0 auto;
} }
body { body {
@ -47,24 +42,20 @@ body {
padding-left: 0; padding-left: 0;
} }
} }
.container-order-form,
.container-cart {
width: 80%;
}
} }
.btn-success { .btn-success {
background: $color-black; background: $color-black-100;
text-shadow: none; text-shadow: none;
} }
.emailInfo h3 { .emailInfo h3 {
color: $color-black !important; color: $color-black-100 !important;
} }
#cart-title, #cart-title,
#orderform-title { #orderform-title {
color: $color-black; color: $color-black-100;
font-family: $font-family; font-family: $font-family;
font-weight: 700; font-weight: 700;
font-size: 24px; font-size: 24px;

120
checkout/src/arquivos/sass/lib/_slick.scss
View File

@ -1,5 +1,122 @@
/* Slider */ /* Slider */
.footerCheckout__prateleira {
margin-bottom: 56px;
.footerCheckout__prateleira-title {
font-family: "Tenor Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
text-align: center;
color: #000000;
margin-bottom: 20px;
}
ul.footerCheckout__carrossel-itens {
display: flex;
list-style: none;
align-items: center;
margin: 0 132px;
@include mq(xl, max) {
margin: 0 16px;
}
.container-img {
margin: 0;
margin-bottom: 20px;
img {
width: 100%;
object-fit: cover;
}
}
figcaption.name-picture {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 18px;
text-align: center;
color: #000000;
margin-bottom: 20px;
}
li.slick {
ul.number {
display: flex;
list-style: none;
margin: 0;
justify-content: center;
margin-bottom: 20px;
text {
display: none;
}
li {
background: #00c8ff;
border-radius: 8px;
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 13px;
line-height: 18px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #ffffff;
padding: 5px;
margin: 0 2.5px;
}
}
button {
height: 42px;
width: 100%;
background: #00c8ff;
border-radius: 8px;
border: 0;
a {
font-family: "Open Sans";
font-weight: 700;
font-size: 13px;
line-height: 18px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #ffffff;
}
}
}
.slick-dots {
display: none !important;
}
.slick-next {
content: "";
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg");
display: block;
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: transparent;
height: 29.47px;
width: 13px;
border: 0;
cursor: pointer;
}
.slick-prev {
content: "";
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg");
display: block;
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: transparent;
height: 29.47px;
width: 13px;
border: 0;
cursor: pointer;
}
}
}
.slick-slider { .slick-slider {
position: relative; position: relative;
display: block; display: block;
@ -18,7 +135,7 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
display: block; display: block;
margin: 0; margin: 0 -8px;
padding: 0; padding: 0;
&:focus { &:focus {
@ -62,6 +179,7 @@
} }
} }
.slick-slide { .slick-slide {
margin: 0 8px;
float: left; float: left;
height: 100%; height: 100%;
min-height: 1px; min-height: 1px;

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

@ -1,34 +1,18 @@
/* _footer.scss */ /* _footer.scss */
.footerCheckout { .footerCheckout {
bottom: 0;
text-align: center;
border-top: none;
color: $color-gray2; color: $color-gray2;
&__wrapper { &__wrapper {
align-items: center; align-items: center;
display: flex; display: flex;
width: 100%;
border-top: 1px solid #292929;
}
&__adress {
span {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 10px;
line-height: 14px;
text-transform: capitalize;
color: #292929;
}
} }
.container { .container {
border-top: 1px solid $color-black;
display: flex; display: flex;
align-items: center; align-items: center;
margin: 0;
padding: 0 16px; padding: 0 16px;
width: 100%;
justify-content: space-between; justify-content: space-between;
@media (min-width: 1200px) { @media (min-width: 1200px) {
@ -54,20 +38,21 @@
line-height: 12px; line-height: 12px;
text-transform: capitalize; text-transform: capitalize;
@include mq(md, max) { @include mq(xl, max) {
margin-bottom: 24px; margin-bottom: 24px;
max-width: 100%; max-width: 100%;
} }
@include mq(xl, min) { @include mq(2xl, min) {
font-family: $font-family; font-family: $font-family;
color: $color-black; color: $color-black;
// width: 537px; width: 537px;
font-size: 20px;
line-height: 27px; line-height: 27px;
text-transform: capitalize; text-transform: capitalize;
} }
@include mq(md, max) { @include mq(xl, max) {
margin: 0px 0 16px 7px; margin: 0px 0 16px 7px;
font-family: $font-family; font-family: $font-family;
color: $color-black; color: $color-black;
@ -83,6 +68,7 @@
align-items: center; align-items: center;
justify-self: center; justify-self: center;
list-style: none; list-style: none;
width: 404px;
margin: 16px auto 16px auto; margin: 16px auto 16px auto;
@include mq(md, max) { @include mq(md, max) {
@ -98,27 +84,12 @@
width: 1px; width: 1px;
} }
.master, @include mq(2xl, min) {
.visa, width: 690px;
.amex,
.elo,
.hiper,
.paypal,
.boleto {
height: 20px;
} }
.vtex { @include mq(xl, max) {
height: 33px;
}
@include mq(xl, min) {
// width: 690px;
}
@include mq(md, max) {
width: 342px; width: 342px;
margin: 16px 0 16px 0;
order: -1; order: -1;
} }
} }
@ -127,38 +98,25 @@
display: flex; display: flex;
align-items: center; align-items: center;
margin: 0; margin: 0;
margin-bottom: 16px;
list-style-type: none; list-style-type: none;
div {
display: flex;
}
.vtex-rigth1 {
width: 15%;
}
.vtex-rigth2 {
width: 8%;
}
.vtex-logo, .vtex-logo,
.m3-logo { .m3-logo {
height: 16px; height: 16px;
margin-right: 10px; margin-right: 8px;
} }
span { .by-m3 {
font-family: "Open Sans"; display: flex;
font-style: normal; }
font-weight: 400;
font-size: 9px; .by-vtex {
line-height: 12px; display: flex;
color: #292929;
margin-right: 10px;
} }
.list { .list {
@include mq(xl, min) { @include mq(2xl, min) {
font-family: "Open Sans"; font-family: "Open Sans";
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
@ -167,7 +125,7 @@
width: 388px; width: 388px;
} }
@include mq(md, max) { @include mq(xl, max) {
margin: 0 0 16px 7px; margin: 0 0 16px 7px;
} }
} }
@ -186,118 +144,4 @@
} }
} }
} }
.footerCheckout__prateleira {
margin-bottom: 56px;
.footerCheckout__prateleira-title {
font-family: "Tenor Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
text-align: center;
color: #000000;
margin-bottom: 20px;
}
ul.footerCheckout__carrossel-itens {
display: flex;
list-style: none;
margin: 0;
align-items: center;
margin: 0 132px;
.container-img {
margin: 0;
margin-bottom: 20px;
img {
height: 242px;
width: 100%;
object-fit: cover;
}
}
figcaption.name-picture {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 18px;
text-align: center;
color: #000000;
margin-bottom: 20px;
}
li.slick {
width: 242px !important;
ul.number {
display: flex;
list-style: none;
margin: 0;
justify-content: center;
margin-bottom: 20px;
text {
display: none;
}
li {
background: #00c8ff;
border-radius: 8px;
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 13px;
line-height: 18px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #ffffff;
padding: 5px;
margin: 0 2.5px;
}
}
button {
height: 42px;
max-width: 242px;
width: 100%;
background: #00c8ff;
border-radius: 8px;
border: 0;
a {
font-family: "Open Sans";
font-weight: 700;
font-size: 13px;
line-height: 18px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #ffffff;
}
}
}
.slick-next {
content: "";
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg");
display: block;
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: transparent;
height: 29.47px;
width: 13px;
border: 0;
cursor: pointer;
}
.slick-prev {
content: "";
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg");
display: block;
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: transparent;
height: 29.47px;
width: 13px;
border: 0;
cursor: pointer;
}
}
}
} }

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

@ -5,28 +5,36 @@ $font-family: "Open Sans", sans-serif;
$font-family-secundary: "Tenor Sans", sans-serif; $font-family-secundary: "Tenor Sans", sans-serif;
/* Colors */ /* Colors */
$color-black: #292929; $color-black: black;
$color-black1: #000000; $color-black-500: black;
$color-black-100: #292929;
$color-black-200: #58595b;
$color-black-1000: #000000;
$color-white: #fff; $color-red-100: #f15a31;
$color-white: white;
$color-white-500: #fff;
$color-white-1000: white;
$color-gray: #6c6c6c; $color-gray: #6c6c6c;
$color-gray1: #c4c4c4; $color-gray1: #ededed;
$color-gray2: #7d7d7d; $color-gray2: #7d7d7d;
$color-gray3: #f0f0f0; $color-gray3: #f0f0f0;
$color-gray4: #8d8d8d; $color-gray4: #8d8d8d;
$color-gray5: #e5e5e5; $color-gray5: #e5e5e5;
$color-gray6: #989898; $color-gray6: #c4c4c4;
$color-gray7: #e0e0e0; $color-gray7: #989898;
$color-gray8: #828282; $color-gray8: #e0e0e0;
$color-gray9: #ededed; $color-gray9: #f2f2f2;
$color-gray10: #808080;
$color-gray12: grey;
$color-blue-100: #00c8ff;
$color-blue: #4267b2; $color-blue: #4267b2;
$color-blue-100: #00c8ff;
$color-green: #4caf50; $color-green: #4caf50;
$color-green2: #298541;
$color-red: #ff0000;
/* Grid breakpoints */ /* Grid breakpoints */
$grid-breakpoints: ( $grid-breakpoints: (