0% found this document useful (0 votes)
14 views4 pages

Checkout CSS Styles for Promotions

The document contains CSS styles for a checkout page, including promotions, payment options, and visual elements. It defines colors, fonts, and layout adjustments for various components such as buttons, labels, and checkout steps. Additionally, it includes styles for displaying promotional messages and payment approval timelines.

Uploaded by

nokomar717
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
14 views4 pages

Checkout CSS Styles for Promotions

The document contains CSS styles for a checkout page, including promotions, payment options, and visual elements. It defines colors, fonts, and layout adjustments for various components such as buttons, labels, and checkout steps. Additionally, it includes styles for displaying promotional messages and payment approval timelines.

Uploaded by

nokomar717
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

/* Em Promoção - Resumo */

.holder-cols-checkout .holder-container-resume .item-holder-quantity-price::after {


content: "Em promoção";
font-size: 11px;
padding: 3px 5px;
color: #fff;
font-weight: 600;
background: #0086ff;
border-radius: 5px;
display: inline-block;
align-self: end;
}
header {
background:#FFFFFF !important;
}
:root {
--main-color: #008ed2;
--sec-color: #00a801;
--payment-color: #00b69d;
}
/* Foco no Cartão - APROVAÇÃO IMEDIATA */
.payments .[Link],
.payments .[Link]-card {
border-color: var(--payment-color);
}
.payments .payment > label {
position: relative;
display: flex;
}
.payments .payment > label[for="payment-billet"]:after {
background: #a2a2a2;
display: block;
line-height: inherit;
color: #FFF;
padding: 4px 5px;
border-radius: 3px;
position: absolute;
font-weight: bold;
font-size: 10px;
right: 10px;
letter-spacing: 0.03em;
top: 26%;
content: 'APROVAÇÃO EM 3 DIAS';
}
.payments .payment > label[for="payment-pix"]:after,
.payments .payment > label[for="payment-credit-card"]:after
{
background: var(--payment-color);
display: block;
line-height: inherit;
color: #FFF;
padding: 4px 5px;
border-radius: 3px;
position: absolute;
font-weight: bold;
font-size: 10px;
right: 10px;
letter-spacing: 0.03em;
top: 26%;
content: 'APROVAÇÃO IMEDIATA';
}
.payments .payment > label[for="payment-credit-card"]:after {
top: 13%;
}
/* Cor do botão de Add Desconto */
.[Link]-purple {
color: #333;
}
/* Mudança de Fonte */
.mt10 {
margin-top: 6px;
margin-right: 16px;
}
.f-h2 {
font-family: 'Oswald', sans-serif;
font-size: 22px!important;
font-weight: 400;
}
.holder-cols-checkout .box-checkout .box-title .desc {
font-family: 'Roboto', sans-serif;
line-height: 1.4;
font-size: 13.5px;
}
/* Emissão Nota Fiscal */
label[for=cpf]::after {
content: ' (Emissão Nota Fiscal)';
}
/* Cor da HeadLine */
.holder-cols-checkout .[Link] .title {
color: #000000!important;
}
/* Cor das bolinhas (3 passos) mobile */
.holder-cols-checkout .[Link] .box-title .holder-number {
background: var(--main-color);
border-color: var(--main-color)!important;
color: #fff;
}
.[Link] .connect, .[Link] .holder-icon {
background: var(--main-color);
}
a {
text-decoration: none;
color: var(--main-color);
}
/* Cor das Bolinhas depois de preenchidas (PC) */
.holder-cols-checkout .box-checkout:not(.active):not(.disabled):not(.box-
resume):not(.box-payment) .holder-number {
background-color: var(--sec-color);
}
/* Cor das HeadLines depois de preenchidas (PC) */
.holder-cols-checkout .box-checkout:not(.active):not(.disabled):not(.box-
resume):not(.box-payment) .title {
color: var(--sec-color)!important;
}
/* Cor do verificado das HeadLines depois de preenchidas (PC) */
.green {
color: var(--sec-color)!important;
}
/* Cor da borda do campo selecionado (PC) */
.holder-cols-checkout .[Link] {
border-color: var(--main-color);
}
/* Cor dos Verificados de campo preenchido */
.form-horizontal .[Link]:after {
position: absolute;
top: 14px;
right: 15px;
font-family: FontAwesome;
color: var(--sec-color);
content: "\f00c";
}
/* Cor dos Preços */
.holder-cols-checkout .cart-resume .[Link] {
color: var(--sec-color);
padding-top: 12px;
padding-bottom: 6px;
}
.holder-cols-checkout .[Link]-resume .cart_total {
color: var(--sec-color);
}
/* Cor do Grátis da parte de frete */
.c-green-2 {
color: var(--sec-color)!important;
}
/* Cor do OrderBump */
.holder-recomm {
border: 2px dashed var(--main-color);
}
.orderbump {
background-color: #FFF;
}
.owl-orderbumps .owl-dots .[Link] span {
background-color: var(--main-color) !important;
}
.orderbumps_offer-title, .orderbumps_offer-total {
color: var(--main-color) !important;
background-color: #FFF;
}
.orderbump_price {
color: var(--main-color) !important;
}
.orderbump_button {
background-color: var(--main-color) !important;
}
.holder-countdown {
padding: 9px 0 !important;
}
/* Ícone do Mercado Pago atualizado */
.icon-mercadopago {
background-image:
url([Link]
logo__large.png);
}
/* Mudança na Precificação */
.holder-cols-checkout .cart-resume {
padding: 10px 20px;
font-weight: 500;
border-radius: 4px;
border-top: 1px solid #EEE;
}
/* 12x no Cartão */
.holder-cols-checkout .cart-resume .[Link] .value:after {
content: 'em até 12x no cartão';
color: #4b4b4b !important;
display: block;
font-weight: bold;
font-size: 12px;
}
/* Adicionar Icone dos Correios */
.[Link] {
background-image:
url([Link]
background-size: 27px!important;
content: ""!important;
background-repeat: no-repeat!important;
background-position-x: 145px!important;
background-position-y: 90%!important;
}

You might also like