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

Merge pull request 'feat(Autenticacao): Estiliza card' (#3) from develop into main

Browse Source 
Reviewed-on: #3
This commit is contained in:
William Simão Cavalcante 2022-12-26 23:58:03 +00:00
commit 663ad2e6c5
6 changed files with 609 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,21 +7,6 @@ export default class Footer {
async init() { async init() {
await this.selectors(); await this.selectors();
this.verificaPag();
// await this.onUpdate();
this.addProdutos();
this.entregaCarrinho();
this.unidadeCarrinho();
this.creatPaymentsIcons();
this.creatVtexIconPci();
this.creatDevIconsM3();
await this.addCarrossel();
await this.verificaOnload();
}
async selectors() {
this.checkoutVazio = await waitElement(".empty-cart-content");
this.divPrateleira = await waitElement('.footerCheckout__prateleira');
this.tituloPrateleira = await waitElement('#cart-title') this.tituloPrateleira = await waitElement('#cart-title')
this.payments = await waitElement('.footerCheckout__payments'); this.payments = await waitElement('.footerCheckout__payments');
this.vtexIconPci = await waitElement('.footerCheckout__vtexpci'); this.vtexIconPci = await waitElement('.footerCheckout__vtexpci');
@ -29,12 +14,28 @@ export default class Footer {
this.continuarComprando = await waitElement('.empty-cart-links'); this.continuarComprando = await waitElement('.empty-cart-links');
this.entrega = await waitElement('.shipping-date'); this.entrega = await waitElement('.shipping-date');
this.unidade = await waitElement('.product-price'); this.unidade = await waitElement('.product-price');
this.creatPaymentsIcons();
this.addProdutos();
this.verificaPag();
this.creatVtexIconPci();
this.creatDevIconsM3();
this.entregaCarrinho();
await this.verificaOnload();
this.unidadeCarrinho();
await this.addCarrossel();
}
async selectors() {
this.checkoutVazio = await waitElement(".empty-cart-content");
this.divPrateleira = await waitElement('.footerCheckout__prateleira');
} }
async verificaOnload () { async verificaOnload () {
window.addEventListener('load', this.onUpdat()) window.addEventListener('load', () => {
this.onUpdate();
})
}; };
async onUpdate() { async onUpdate() {
@ -59,19 +60,19 @@ export default class Footer {
if(window.location.hash == '#/cart') { if(window.location.hash == '#/cart') {
this.requestApi(); this.requestApi();
} }
} else { else {
this.divPrateleira.innerHTML= ``; this.divPrateleira.innerHTML= ``;
} }
}
window.addEventListener('hashchange',() => { window.addEventListener('hashchange',() => {
if(this.checkoutVazio.attributes.style.nodeValue === 'display: none;') { if(this.checkoutVazio.attributes.style.nodeValue === 'display: none;') {
if(window.location.hash == '#/cart') { if(window.location.hash == '#/cart') {
this.requestApi(); this.requestApi();
} }
} else if (window.location.hash == '#/email' || window.location.hash == '#/profile' || window.location.hash == '#/shipping') { } else {
this.divPrateleira.innerHTML= ``;
}else if (window.location.href == "https://m3academy.myvtex.com/checkout/#/payment") {
this.divPrateleira.innerHTML= ``; this.divPrateleira.innerHTML= ``;
} }
})}; })};

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

@ -4,7 +4,6 @@ import { waitElement } from "m3-utils";
export default class Header { export default class Header {
constructor() { constructor() {
this.init(); this.init();
this.progressBarHTML();
} }
async init() { async init() {
@ -43,7 +42,6 @@ export default class Header {
this.progressBar.innerHTML = ``; this.progressBar.innerHTML = ``;
} }
}; };
async progressBarActive () { async progressBarActive () {
if (this.progressBar && window.screen.width > 1024) { if (this.progressBar && window.screen.width > 1024) {
const progressBarLi = document.querySelectorAll('#progressBar ul li') const progressBarLi = document.querySelectorAll('#progressBar ul li')

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

@ -45,14 +45,15 @@
} }
.icon-lock { .icon-lock {
right: 0; right: -1;
} }
.client-email { .client-email {
margin: 0 0 16px; margin: 0 0 16px;
width: 562px; width: 562px;
input { input {
width: 443px; max-width: 562px;
width: 100%;
height: 50px; height: 50px;
box-shadow: none; box-shadow: none;
color: $color-black-500; color: $color-black-500;
@ -60,7 +61,7 @@
padding: 0 16px; padding: 0 16px;
border: 1px solid $color-black-500; border: 1px solid $color-black-500;
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px 0px 0px 5px; border-radius: 5px 9px 9px 5px;
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
line-height: 16px; line-height: 16px;
@ -159,21 +160,26 @@
.payment-data, .payment-data,
.client-profile-data { .client-profile-data {
.client-profile-data { .client-profile-data {
max-width: 331px; .checkout-container {
height: 459px; padding: 24px 17px 36px;
width: 100%; }
.collapsed { .collapsed {
.icon-user {
display: none; display: none;
span { }
font-size: 0; #edit-shipping-data {
} .icon-edit {
.icon-user { &::after {
display: none; background-image: url(https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png);
background-size: 20px;
width: 20px;
height: 20px;
content: "";
}
}
} }
} }
} }
label { label {
margin-bottom: 0; margin-bottom: 0;
} }
@ -181,53 +187,26 @@
border-radius: 8px; border-radius: 8px;
border: 1px solid $color-gray3; border: 1px solid $color-gray3;
font-family: $font-family; font-family: $font-family;
padding: 24px 16px 0; padding: 17px 17px 44px 17px;
.accordion-heading { .icon-credit-card {
display: none;
}
.accordion-toggle-active { .icon-home {
i::after { display: none;
content: ''; }
}
}
span {
color: #303030;
margin-bottom: 8px;
padding: 0;
font-family: $font-family-secundary;
i::before { span {
content: ''; font-size: 17px;
} line-height: 14px;
}
i::after {
background-image: url('https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png%22');
background-repeat: no-repeat;
background-size: 100% 100%;
width: 20px;
height: 20px;
display: block;
content: '';
float: right;
}
}
a {
align-items: center;
background-color: #303030;
border-radius: 8px;
border: none;
color: $color-white;
display: flex;
justify-content: center;
padding: 6px 5px 6px 8px;
opacity: 0;
}
}
.accordion-toggle {
font-weight: 400;
font-size: 16px;
line-height: 20px;
}
.accordion-inner { .accordion-inner {
padding: 0; padding: 0;
@ -244,25 +223,16 @@
.client-notice { .client-notice {
color: $color-black; color: $color-black;
margin-bottom: 26px; margin-bottom: 26px;
font-size: 0px !important; font-size: 0px !important;
&::before {
content: 'Identificação';
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
}
} }
p { p {
margin-top: 12px; margin-top: 12px;
margin-bottom: 0; margin-bottom: 0;
label { label {
color: $color-black; color: $color-black;
font-weight: 500; font-weight: 500;
margin-bottom: 0; margin-bottom: 0;
} }
@ -282,12 +252,11 @@
border-radius: 0; border-radius: 0;
border: 1px solid $color-gray4; border: 1px solid $color-gray4;
box-shadow: none; box-shadow: none;
width: 18px;
height: 18px;
} }
.help.error { .help.error {
color: red; color: red;
margin-left: 0 !important;
} }
} }
@ -307,31 +276,24 @@
} }
#client-email { #client-email {
width: 297px; padding: 13px 6px;
height: 42px;
padding: 0 6px;
border-radius: 5px; border-radius: 5px;
border: 1px solid $color-gray9; border: 1px solid $color-gray9;
} }
#client-last-name, #client-last-name,
#client-first-name { #client-first-name {
padding: 0 6px; padding: 13px 6px;
width: 141px;
height: 42px;
border: 1px solid $color-gray9; border: 1px solid $color-gray9;
border-radius: 5px; border-radius: 5px;
} }
#client-document { #client-document {
padding: 0 6px; padding: 13px 6px;
width: 142.06px;
height: 44px;
border: 1px solid $color-gray9; border: 1px solid $color-gray9;
border-radius: 5px; border-radius: 5px;
} }
#client-phone { #client-phone {
padding: 0 6px; padding: 13px 6px;
width: 142.06px;
height: 44px;
border: 1px solid $color-gray9; border: 1px solid $color-gray9;
border-radius: 5px; border-radius: 5px;
@ -366,10 +328,10 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 44px 0; margin-top: 44px;
margin-bottom: 0 !important;
#go-to-shipping { #go-to-shipping {
width: 100%; width: 100%;
height: 42px;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
@ -378,7 +340,7 @@
text-transform: uppercase; text-transform: uppercase;
background-color: $color-blue-200; background-color: $color-blue-200;
color: $color-white; color: $color-white;
margin: 0; margin: 0 !important;
} }
} }
@ -387,13 +349,13 @@
display: none; display: none;
.link a#is-corporate-client, .link a#is-corporate-client,
.link a#not-corporate-client { .link a#not-corporate-client {
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: underline;
} }
} }
.state-inscription-box span { .state-inscription-box span {
font-weight: 500; font-weight: 500;
} }
button.submit { button.submit {
@ -405,72 +367,108 @@
transition: all 0.2s linear; transition: all 0.2s linear;
&:hover { &:hover {
background: lighten($color-black, 5); background: lighten($color-black, 5);
} }
&:active { &:active {
background: darken($color-black, 5); background: darken($color-black, 5);
} }
} }
/* Shipping configurations */ /* Shipping configurations */
.ship-postalCode small a { .ship-postalCode small a {
color: #303030; color: #303030;
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: underline;
} }
.vtex-omnishipping-1-x-deliveryGroup { .vtex-omnishipping-1-x-deliveryGroup {
p { p {
color: #303030; color: #303030;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
} }
.shp-lean { .shp-lean {
border: 1px solid $color-gray4; border: 1px solid $color-gray4;
border-radius: 0; border-radius: 0;
label { label {
background-color: $color-white; background-color: $color-white;
box-shadow: none; box-shadow: none;
color: #303030; color: #303030;
padding: 8px 12px; padding: 8px 12px;
svg path { svg path {
fill: #d8c8ac; fill: #d8c8ac;
} }
} }
} }
} }
.delivery-address-title { .delivery-address-title {
color: #303030; font-family: $font-family;
font-size: 14px; font-style: normal;
font-weight: 500; font-weight: 700;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.05em;
color: $color-gray2;
margin-bottom: 11px;
} }
.vtex-omnishipping-1-x-SummaryItemInfo {
border: none;
}
.shp-summary-group-info { .shp-summary-group-info {
border-color: $color-gray4; border-color: $color-gray4;
} }
.vtex-omnishipping-1-x-SummaryItemContent {
align-items: end;
.address-summary {
background: none;
padding: 0;
}
.shp-summary-package {
padding: 0;
}
.shipping-data {
padding: 24px 16px 36px;
}
}
.address-summary { .address-summary {
background: none; border-color: $color-gray9;
border-color: $color-gray4; border-radius: 8px;
border-radius: 0;
color: #303030; color: #303030;
padding: 12px; padding: 15px 11px 15px 43px;
background-image: url('https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png');
background-position: 10px 22px;
background-size: 24px 24px;
background-repeat: no-repeat;
@include mq(md, max) { @include mq(md, max) {
background-position: 8px 9px; background-position: 8px 9px;
} }
a { a {
color: #303030; font-family: $font-family;
font-weight: 500; font-style: normal;
text-decoration: underline; font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-blue-200;
} }
span {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
}
} }
.shp-summary-group-price, .shp-summary-group-price,
@ -489,23 +487,18 @@
.vtex-omnishipping-1-x-summaryChange { .vtex-omnishipping-1-x-summaryChange {
border-color: #303030; border-color: #303030;
color: #303030; color: #303030;
display: none;
} }
.vtex-omnishipping-1-x-deliveryChannelsToggle { .vtex-omnishipping-1-x-deliveryChannelsToggle {
background-color: #d8c8ac; background-color: #d8c8ac;
border: 1px solid #d8c8ac; border: 1px solid #d8c8ac;
} }
.vtex-omnishipping-1-x-deliveryOptionActive { .vtex-omnishipping-1-x-deliveryOptionActive {
text-shadow: 1.3px 1px lighten($color-black, 50); text-shadow: 1.3px 1px lighten($color-black, 50);
} }
} }
} }
} }
.Items {
border-bottom: 1px solid $color-gray4;
}
.info {
border-bottom: 1px solid $color-gray4;
}
} }

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

@ -12,32 +12,63 @@
.item-unit-label { .item-unit-label {
display: none; display: none;
} }
.cart { .cart-template-holder {
border-bottom: 1px solid $color-gray9; .cart {
border-radius: 0; @include mq(md, max) {
@include mq(md, max) { margin: 0px 0 25px 0;
margin: 0px 0 25px 0; }
border-left: none; border: 1px solid $color-gray3;
border-right: none; border-radius: 5px;
border-radius: 0; padding: 16px;
.cart-items {
thead {
tr {
th {
padding-bottom: 17px !important;
}
}
}
tbody {
tr {
display: contents;
padding: 0;
td {
padding: 0;
a {
.item-link-remove {
padding: 0;
}
}
}
}
}
}
} }
} }
.cart-fixed.affix { .cart-fixed.affix {
position: relative !important; position: relative !important;
} }
.cart-fixed { .cart-fixed {
height: 0 !important;
font-family: $font-family; font-family: $font-family;
width: 100%; width: 100%;
border: 1px solid #E5E5E5;
border-radius: 8px; border-radius: 8px;
max-width: 331px; max-width: 331px;
width: 100%;
h2 { h2 {
padding: 24px 17px;
background: $color-white; background: $color-white;
border: none; border: none;
color: #303030; color: #303030;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
text-align: initial;
border-top: 1px solid $color-gray9;
border-left: 1px solid $color-gray9;
border-right: 1px solid $color-gray9;
border-radius: 8px 8px 0 0;
} }
.item-unavailable { .item-unavailable {
@ -49,11 +80,52 @@
} }
.cart { .cart {
padding: 0;
border-left: 1px solid $color-gray9;
border-right: 1px solid $color-gray9;
border-radius: 0;
display: flex;
padding: 0 17px;
.description {
margin-left: 53px;
span {
display: none;
}
strong {
margin-right: 0;
margin-bottom: 23px;
}
}
.badge {
display: none;
}
.product-name {
max-width: 115px;
width: 100%;
white-space: pre-line;
}
ul li { ul li {
display: flex;
align-items: center;
margin: 0 !important;
border-top: none; border-top: none;
margin-top: 0; margin-top: 0;
padding-top: 0; padding-top: 0;
img {
width: 60px;
}
.product-name {
margin-left: 7px !important;
}
&:not(:first-child) { &:not(:first-child) {
margin-top: 8px; margin-top: 8px;
padding-top: 8px; padding-top: 8px;

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

@ -1,11 +1,407 @@
body .container-main.container-order-form .orderform-template.active { body .container-main.container-order-form .orderform-template.active {
.mini-cart { .mini-cart {
width: 32.3242%; max-width: 331px;
width: 100%;
margin-left: unset; margin-left: unset;
margin-right: 0; margin-right: 0;
float: right; float: right;
.summary-template-holder {
padding: 0px !important;
}
tfoot {
border-top: 1px solid $color-gray9;
}
#go-to-cart-button {
border-right: 1px solid $color-gray9;
border-left: 1px solid $color-gray9;
width: 94.3%;
max-width: 329px;
text-align: end;
margin: auto;
padding: 19px 17px 10px 0;
}
.table {
border: 1px solid $color-gray9;
border-radius: 0 0 8px 8px;
display: flex;
flex-direction: column;
tr {
.Items {
display: flex;
align-items: center;
justify-content: space-between;
}
.info {
padding: 25px 142px 25px 17px;
width: 62px;
}
.Discounts {
display: flex;
align-items: center;
}
.monetary {
padding: 25px 17px;
}
}
}
} }
.orderform-template-holder { .orderform-template-holder {
width: 66.1132%; width: 66.1132%;
.client-profile-data {
.filled {
padding: 24px 17px 36px !important;
}
.box-info {
p {
span {
margin-left: 0;
}
}
}
.accordion-group {
border-radius: 8px;
border: 1px solid $color-gray3;
font-family: $font-family;
padding: 17px 17px 44px 17px;
.accordion-heading {
.accordion-toggle {
&::after {
content: 'Identificação';
font-size: 16px;
}
}
span {
font-size: 0;
color: $color-black-500;
margin-bottom: 8px;
padding: 0;
i::before {
display: none;
fill: $color-black-500;
}
}
a {
align-items: center;
background-color: transparent;
border-radius: 8px;
border: none;
color: $color-white;
display: flex;
justify-content: center;
padding: 0;
&::after {
background-image: url('https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png');
background-size: 20px;
width: 20px;
height: 20px;
content: "";
}
img {
width: 20px;
height: 20px;
}
}
}
}
}
.shipping-data {
padding: 24px 16px 36px;
.accordion-group {
.accordion-heading {
span {
color: $color-black-500;
margin-bottom: 8px;
padding: 0;
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: $color-black;
i::after {
display: none;
fill: $color-black-500;
}
}
a {
align-items: center;
background-color: $color-black-500;
border-radius: 8px;
border: none;
color: $color-white;
display: flex;
justify-content: center;
padding: 6px 5px 6px 8px;
background: transparent;
box-shadow: none;
.icon-edit {
&::before {
background-image: url(https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png);
background-size: 20px;
width: 20px;
height: 20px;
content: "";
}
}
}
}
#postalCode-finished-loading {
border-radius: 100px;
div {
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
border: 1px solid $color-white1;
}
.shp-method-option-active {
border: 1px solid $color-black;
background-color: $color-white;
border-radius: 100px;
color: $color-black ;
text-shadow: none;
}
}
}
.vtex-omnishipping-1-x-SummaryItemGroup {
padding: 0;
}
.vtex-omnishipping-1-x-addressFormPart1 {
.ship-country {
display: none;
}
.ship-postalCode {
display: flex;
flex-direction: column;
label {
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 12px;
line-height: 16px;
color: $color-gray2;
}
input {
max-width: 100%;
width: 97%;
height: 45px;
border: 1px solid $color-gray7;
border-radius: 8px;
}
small {
margin-top: 10px;
margin-left: 0 !important;
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-decoration-line: underline;
}
}
}
.vtex-omnishipping-1-x-address {
div {
display: flex;
flex-direction: column;
.ship-number, .ship-complement, .ship-receiverName{
width: 100%;
label {
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.05em;
color: $color-gray2;
margin-bottom: 3px;
}
input {
border: 1px solid #E0E0E0;
border-radius: 8px;
width: 95%;
padding: 6px 6px;
&::placeholder {
color: $color-gray2;
}
}
}
}
}
.vtex-omnishipping-1-x-deliveryGroup {
.vtex-omnishipping-1-x-shippingSectionTitle {
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: $color-gray2;
margin-bottom: 11px;
}
#delivery-packages-options {
border: 1px solid $color-gray9 !important;
border-radius: 8px !important;
.vtex-omnishipping-1-x-leanShippingText {
border-right: 1px solid $color-gray9;
div {
span {
font-family: $font-family !important;
font-style: normal !important;
font-weight: 400 !important;
font-size: 12px !important;
line-height: 16px !important;
color: $color-gray2 !important;
}
}
}
div {
color: $color-gray2;
}
.vtex-omnishipping-1-x-leanShippingOptionActive {
background-color: $color-gray11;
svg {
height: 12px;
width: 12px;
background-color: $color-blue-200;
border-radius: 3px;
}
}
label {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-gray2;
}
.shp-option-icon {
border: 1px solid $color-gray7;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
svg {
path {
display: none;
}
}
}
}
}
.box-step {
.btn-go-to-payment {
width: 100%;
border-radius: 8px;
background-color: $color-blue-200;
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;
color: $color-white;
&:hover {
background-color: $color-blue-100;
}
}
.box-step-content {
form {
.link-gift-card {
display: none;
}
}
}
}
.btn-submit-wrapper {
#go-to-shipping {
width: 100%;
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
background-color: #00c8ff;
color: #fff;
margin: 0 !important;
}
}
}
.payment-data {
.accordion-group {
padding: 24px 17px 29px;
.accordion-heading {
span {
color: $color-black-500;
margin-bottom: 8px;
padding: 0;
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: $color-black;
transition: all 5s ease-in-out;
}
a {
align-items: center;
background: transparent;
border: none;
display: flex;
justify-content: center;
padding: 6px 5px 6px 8px;
box-shadow: none;
.icon-edit {
&::before {
background-image: url('https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png');
background-size: 20px;
width: 20px;
height: 20px;
content: "";
}
}
}
}
}
}
} }
} }

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

@ -9,6 +9,7 @@ $color-black: #292929;
$color-black-500: #000000; $color-black-500: #000000;
$color-white: #fff; $color-white: #fff;
$color-white1: #f5f5f5;
$color-gray: #6c6c6c; $color-gray: #6c6c6c;
$color-gray2: #7d7d7d; $color-gray2: #7d7d7d;
@ -20,6 +21,7 @@ $color-gray7: #c4c4c4;
$color-gray8: #2e2d2d; $color-gray8: #2e2d2d;
$color-gray9: #E0E0E0; $color-gray9: #E0E0E0;
$color-gray10: #808080; $color-gray10: #808080;
$color-gray11:#F2F2F2;
$color-blue-100: #6fd5f2; $color-blue-100: #6fd5f2;
$color-blue-200: #00C8FF; $color-blue-200: #00C8FF;