forked from M3-Academy/m3-academy-template-checkout
feat: Estiliza carrinho desktop
This commit is contained in:
parent
d033d5f86d
commit
1b85338bee
@ -3,6 +3,19 @@ import { waitElement } from "m3-utils";
|
||||
export default class Footer {
|
||||
constructor() {
|
||||
this.init();
|
||||
this.list = [
|
||||
{},
|
||||
|
||||
{},
|
||||
|
||||
{},
|
||||
|
||||
{},
|
||||
|
||||
{},
|
||||
];
|
||||
|
||||
this.addCarrossel();
|
||||
}
|
||||
|
||||
async init() {
|
||||
@ -35,10 +48,14 @@ export default class Footer {
|
||||
observer.observe(target, config);
|
||||
}
|
||||
async addCarrossel() {
|
||||
const elemento = await waitElement("#my-element");
|
||||
$(elemento).slick({
|
||||
const prateleira = await waitElement("footerCheckout__prateleira");
|
||||
$(prateleira).slick({
|
||||
dots: true,
|
||||
infinite: true,
|
||||
arrows: true,
|
||||
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/payPalM3Academy.png" alt="PayPal"></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>
|
||||
`;
|
||||
}
|
||||
@ -74,7 +92,6 @@ export default class Footer {
|
||||
<img class="m3-logo" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="M3">
|
||||
</div>
|
||||
</li>
|
||||
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,13 +1,21 @@
|
||||
.checkout-container {
|
||||
.client-pre-email {
|
||||
border-color: #8d8d8d;
|
||||
font-family: $font-family;
|
||||
border-color: $black-500;
|
||||
padding-top: 8px;
|
||||
|
||||
label {
|
||||
font-family: $font-family-secundary;
|
||||
text-transform: uppercase;
|
||||
color: $black-500;
|
||||
}
|
||||
|
||||
.link-cart {
|
||||
a {
|
||||
color: #292929;
|
||||
color: $black-500;
|
||||
font-family: $font-family-secundary;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
color: lighen(#292929, 10);
|
||||
@ -25,12 +33,12 @@
|
||||
margin-bottom: 16px;
|
||||
|
||||
span {
|
||||
color: #303030;
|
||||
font-size: 24px;
|
||||
color: $black-500;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
small {
|
||||
color: #8d8d8d;
|
||||
color: $black-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -39,26 +47,35 @@
|
||||
margin: 0 0 16px;
|
||||
|
||||
input {
|
||||
height: 50px;
|
||||
box-shadow: none;
|
||||
color: #292929;
|
||||
color: $black-500;
|
||||
font-family: $font-family;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
padding: 0 16px;
|
||||
border: 2px solid f0f0f0;
|
||||
border: 1px solid $black-500;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
|
||||
&::placeholder {
|
||||
color: $black-500;
|
||||
}
|
||||
|
||||
@media (max-width: 490px) {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #292929;
|
||||
border-radius: 5px;
|
||||
background-color: $vivid-blue;
|
||||
border-radius: 0 8px 8px 0;
|
||||
border: none;
|
||||
font-family: $font-family;
|
||||
height: 54px;
|
||||
right: 0;
|
||||
color: $black-500;
|
||||
letter-spacing: 0.05em;
|
||||
height: 50px;
|
||||
right: -4px;
|
||||
top: 0;
|
||||
|
||||
@media (max-width: 490px) {
|
||||
@ -70,17 +87,23 @@
|
||||
|
||||
span.help.error {
|
||||
color: red;
|
||||
font-family: $font-family;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.emailInfo {
|
||||
padding: 16px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #8d8d8d;
|
||||
border-radius: 0;
|
||||
border: 1px solid $black-500;
|
||||
border-radius: 5px;
|
||||
margin-top: 47px;
|
||||
|
||||
h3 {
|
||||
color: #303030;
|
||||
font-family: $font-family;
|
||||
font-weight: 700;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
@ -89,11 +112,15 @@
|
||||
|
||||
li {
|
||||
span {
|
||||
color: #292929;
|
||||
color: $black-500;
|
||||
font-family: $font-family;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
i::before {
|
||||
color: #292929;
|
||||
color: $vivid-blue;
|
||||
font-size: 1rem;
|
||||
opacity: 1;
|
||||
}
|
||||
@ -112,19 +139,25 @@
|
||||
.payment-data,
|
||||
.client-profile-data {
|
||||
.accordion-group {
|
||||
border-radius: 0;
|
||||
border: 1px solid #8d8d8d;
|
||||
border-radius: 8px;
|
||||
border: 1px solid $gray-300;
|
||||
font-family: $font-family;
|
||||
padding: 16px;
|
||||
font-size: 14px;
|
||||
// font-size: 14px !important;
|
||||
padding: 24px 17px 38px 17px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.accordion-heading {
|
||||
span {
|
||||
color: #303030;
|
||||
margin-bottom: 8px;
|
||||
font-family: $font-family-secundary;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
color: $black-400;
|
||||
margin-bottom: 25px;
|
||||
padding: 0;
|
||||
|
||||
i::before {
|
||||
fill: #303030;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -143,36 +176,76 @@
|
||||
.accordion-inner {
|
||||
padding: 0;
|
||||
|
||||
// #client-phone {
|
||||
// &::placeholder {
|
||||
// visibility: hidden;
|
||||
|
||||
// &:after {
|
||||
// visibility: visible;
|
||||
// content: "(99) 99999-9999";
|
||||
|
||||
// }
|
||||
// }
|
||||
|
||||
tr {
|
||||
td.info {
|
||||
border-bottom: 1px solid $gray-700;
|
||||
}
|
||||
}
|
||||
|
||||
/* General configurations */
|
||||
|
||||
.box-info {
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $gray-700;
|
||||
}
|
||||
|
||||
.client-notice {
|
||||
color: #292929;
|
||||
display: none;
|
||||
}
|
||||
|
||||
p {
|
||||
position: relative;
|
||||
margin-bottom: 6px;
|
||||
color: $gray-700;
|
||||
|
||||
label {
|
||||
color: #292929;
|
||||
font-weight: 500;
|
||||
// color: $gray-800;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
select,
|
||||
input {
|
||||
border-radius: 0;
|
||||
border: 1px solid #8d8d8d;
|
||||
padding: 13px 7px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid $gray-50;
|
||||
color: $black-500;
|
||||
box-shadow: none;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.help.error {
|
||||
color: red;
|
||||
font-size: 9px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.box-client-info-pj {
|
||||
display: none;
|
||||
.link a#is-corporate-client,
|
||||
.link a#not-corporate-client {
|
||||
color: #292929;
|
||||
font-weight: 500;
|
||||
text-decoration: underline;
|
||||
display: none;
|
||||
// color: #292929;
|
||||
// font-weight: 500;
|
||||
// text-decoration: underline;
|
||||
}
|
||||
|
||||
.link {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -181,20 +254,27 @@
|
||||
}
|
||||
|
||||
button.submit {
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background: #292929;
|
||||
margin-top: 8px;
|
||||
border-radius: 8px;
|
||||
outline: none;
|
||||
transition: all 0.2s linear;
|
||||
font-family: $font-family;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
text-transform: uppercase;
|
||||
background: $vivid-blue;
|
||||
color: $white;
|
||||
margin-top: 36px;
|
||||
// transition: all 0.2s linear;
|
||||
|
||||
&:hover {
|
||||
background: lighten(#292929, 5);
|
||||
}
|
||||
// &:hover {
|
||||
// background: lighten(#292929, 5);
|
||||
// }
|
||||
|
||||
&:active {
|
||||
background: darken(#292929, 5);
|
||||
}
|
||||
// &:active {
|
||||
// background: darken(#292929, 5);
|
||||
// }
|
||||
}
|
||||
|
||||
/* Shipping configurations */
|
||||
@ -205,6 +285,10 @@
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-SummaryItemContent {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-deliveryGroup {
|
||||
p {
|
||||
color: #303030;
|
||||
@ -236,52 +320,78 @@
|
||||
}
|
||||
|
||||
.shp-summary-group-info {
|
||||
border-color: #8d8d8d;
|
||||
border-style: none;
|
||||
// border-color: #8d8d8d;
|
||||
}
|
||||
|
||||
.address-summary {
|
||||
background: none;
|
||||
border-color: #8d8d8d;
|
||||
color: $gray-700;
|
||||
border-radius: 0;
|
||||
color: #303030;
|
||||
padding: 12px;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
padding: 0px;
|
||||
|
||||
@include mq(md, max) {
|
||||
background-position: 8px 9px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #303030;
|
||||
font-weight: 500;
|
||||
text-decoration: underline;
|
||||
}
|
||||
// a {
|
||||
// color: #303030;
|
||||
// font-weight: 500;
|
||||
// text-decoration: underline;
|
||||
// }
|
||||
}
|
||||
|
||||
.shp-summary-group-price,
|
||||
.shp-summary-package {
|
||||
color: #8d8d8d;
|
||||
padding: 0;
|
||||
color: $gray-700;
|
||||
}
|
||||
|
||||
.shp-summary-group-price {
|
||||
padding-right: 16px;
|
||||
}
|
||||
// .shp-summary-group-price {
|
||||
// padding-right: 16px;
|
||||
// }
|
||||
|
||||
.shp-summary-package {
|
||||
padding-left: 16px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-summaryChange {
|
||||
border-color: #303030;
|
||||
color: #303030;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-SummaryItemGroup {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-deliveryChannelsToggle {
|
||||
background-color: #d8c8ac;
|
||||
border: 1px solid #d8c8ac;
|
||||
background-color: $white;
|
||||
border: 1px solid $black-400;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-deliveryChannelsOption {
|
||||
color: $gray-400;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-deliveryOptionActive {
|
||||
text-shadow: 1.3px 1px lighten(#292929, 50);
|
||||
color: $black-400;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,10 +17,10 @@
|
||||
display: none;
|
||||
}
|
||||
.cart {
|
||||
border: 1px solid #f0f0f0;
|
||||
border: 1px solid $gray-200;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
padding: 16px;
|
||||
padding: 16px 29px 16px 16px;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin: 0px 0 25px 0;
|
||||
@ -35,12 +35,22 @@
|
||||
.cart-fixed {
|
||||
font-family: $font-family;
|
||||
width: 100%;
|
||||
border: 1px solid $gray-200;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
padding: 24px 17px 36px;
|
||||
height: auto !important;
|
||||
|
||||
h2 {
|
||||
background: #fff;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
background: $white;
|
||||
border: none;
|
||||
color: #303030;
|
||||
font-size: 14px;
|
||||
color: $black-400;
|
||||
font-family: $font-family-secundary;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 34px;
|
||||
}
|
||||
|
||||
.item-unavailable {
|
||||
@ -52,9 +62,11 @@
|
||||
}
|
||||
|
||||
.cart {
|
||||
border: 1px solid #8d8d8d;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
|
||||
ul li {
|
||||
display: flex;
|
||||
border-top: none;
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
@ -65,9 +77,26 @@
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.shipping-date,
|
||||
// span {
|
||||
|
||||
// }
|
||||
|
||||
// a img {
|
||||
// width: 58.82%;
|
||||
// }
|
||||
|
||||
.shipping-date {
|
||||
display: none;
|
||||
}
|
||||
// .shipping-date,
|
||||
.price {
|
||||
color: #7d7d7d;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-align: right;
|
||||
color: $black-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -78,7 +107,8 @@
|
||||
}
|
||||
|
||||
#go-to-cart-button a {
|
||||
color: #303030;
|
||||
font-family: $font-family;
|
||||
color: $black-500;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@ -86,22 +116,39 @@
|
||||
td.info {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// tr.Discounts {
|
||||
// border-bottom: $gray-50;
|
||||
// }
|
||||
}
|
||||
|
||||
#payment-data-submit {
|
||||
background: #292929;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
background: $green;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
color: #fff;
|
||||
color: $white;
|
||||
outline: none;
|
||||
transition: all 0.2s linear;
|
||||
&:hover {
|
||||
background: lighten(#292929, 5);
|
||||
|
||||
.icon-lock {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: darken(#292929, 5);
|
||||
}
|
||||
// &:hover {
|
||||
// background: lighten(#292929, 5);
|
||||
// }
|
||||
|
||||
// &:active {
|
||||
// background: darken(#292929, 5);
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
@ -109,6 +156,23 @@
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
// .ul.unstyled {
|
||||
|
||||
// .mini-cart {
|
||||
// display: block;
|
||||
// overflow: auto;
|
||||
// text-overflow: ellipsis;
|
||||
// white-space: normal;
|
||||
// float: none;
|
||||
// width: 76%;
|
||||
// line-height: 150%;
|
||||
// .item {
|
||||
// .fn {
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.cart-items {
|
||||
.product-item {
|
||||
padding: 16px 0;
|
||||
@ -118,9 +182,10 @@
|
||||
color: #292929;
|
||||
padding: 0 0 16px;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-align: left;
|
||||
|
||||
@include mq(md, max) {
|
||||
&.quantity-price,
|
||||
@ -131,18 +196,26 @@
|
||||
}
|
||||
|
||||
.product-image {
|
||||
height: auto;
|
||||
// height: auto;
|
||||
padding: 0;
|
||||
// width: 60px;
|
||||
|
||||
img {
|
||||
height: 75px;
|
||||
max-width: 60px;
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@include mq(sm, max) {
|
||||
width: 72px;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 60px;
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
// height: 60px;
|
||||
// max-width: 100%;
|
||||
// width: auto;
|
||||
width: 58.82%;
|
||||
|
||||
@include mq(sm, max) {
|
||||
height: 72px;
|
||||
@ -151,14 +224,24 @@
|
||||
}
|
||||
}
|
||||
|
||||
.quantity {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// td.product-name {
|
||||
|
||||
// }
|
||||
|
||||
.product-name {
|
||||
padding-right: 0;
|
||||
padding: 0 90px 0 16px;
|
||||
color: $black-500;
|
||||
|
||||
@include mq(lg, max) {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
a {
|
||||
width: 17.58%;
|
||||
color: $black-500;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
@ -186,6 +269,9 @@
|
||||
color: $gray-500;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-align: left;
|
||||
padding: 0 91px 0 0;
|
||||
// margin-right: 91px;
|
||||
|
||||
@include mq(md, max) {
|
||||
display: none;
|
||||
@ -193,7 +279,12 @@
|
||||
}
|
||||
|
||||
.product-price {
|
||||
// visibility: hidden;
|
||||
text-align: left;
|
||||
// padding: 0;
|
||||
|
||||
min-width: 100px;
|
||||
|
||||
@include mq(md, max) {
|
||||
min-width: 78px;
|
||||
}
|
||||
@ -218,16 +309,19 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
td.product-price {
|
||||
padding: 0 49px 0 0;
|
||||
}
|
||||
|
||||
td.quantity {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 6px auto 0;
|
||||
margin: 11px 79px 0 0;
|
||||
padding: 0;
|
||||
max-height: 38px;
|
||||
max-width: 118px;
|
||||
width: max-content !important;
|
||||
height: 34px;
|
||||
width: 99px;
|
||||
// width: max-content !important;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid $gray-300;
|
||||
border-radius: 8px;
|
||||
@ -242,7 +336,7 @@
|
||||
display: block;
|
||||
max-height: 38px;
|
||||
margin: 0 !important;
|
||||
padding: 8px 0;
|
||||
// padding: 8px 0;
|
||||
width: 38px;
|
||||
color: $black-500;
|
||||
box-shadow: none;
|
||||
@ -262,22 +356,27 @@
|
||||
background: $vivid-blue;
|
||||
display: block;
|
||||
font-family: $font-family;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
padding: 1px 12px;
|
||||
line-height: 10px;
|
||||
border-radius: 50%;
|
||||
padding: 3px 0;
|
||||
width: 16px;
|
||||
|
||||
// padding: 1px 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-minus-sign {
|
||||
&:before {
|
||||
content: "-";
|
||||
font-size: 16px;
|
||||
// width: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-plus-sign {
|
||||
&:before {
|
||||
content: "+";
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -297,18 +396,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
.quantity-price,
|
||||
.best-price {
|
||||
td.quantity-price {
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
|
||||
.icon-question-sign {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #292929;
|
||||
}
|
||||
color: $black-400;
|
||||
}
|
||||
|
||||
.quantity-price {
|
||||
@ -316,13 +418,34 @@
|
||||
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 {
|
||||
padding: 0;
|
||||
@media (max-width: 490px) {
|
||||
top: 0;
|
||||
}
|
||||
.icon::before {
|
||||
color: #8d8d8d;
|
||||
color: $gray-400;
|
||||
font-size: 15px;
|
||||
|
||||
@include mq(md, max) {
|
||||
@ -415,51 +538,54 @@
|
||||
}
|
||||
|
||||
.srp-pickup-my-location__button {
|
||||
background-color: #292929;
|
||||
background-color: $vivid-blue;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
color: $white;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten(#292929, 5);
|
||||
background-color: $vivid-blue-lighten;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken(#292929, 5);
|
||||
background-color: $vivid-blue-darker;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.srp-toggle {
|
||||
margin: 0 0 34px;
|
||||
margin: 0 0 20px;
|
||||
padding: 0;
|
||||
|
||||
&__wrapper {
|
||||
background-color: #fff;
|
||||
background-color: $white;
|
||||
border-radius: 100px;
|
||||
width: 100%;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
line-height: 19px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&__current {
|
||||
border: 1px solid #00c8ff;
|
||||
border: 1px solid $black-500;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: #00c8ff;
|
||||
color: $black-500;
|
||||
}
|
||||
|
||||
label {
|
||||
@ -472,21 +598,26 @@
|
||||
}
|
||||
|
||||
.srp-postal-code {
|
||||
.ship-country {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ship-postalCode {
|
||||
label {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: #292929;
|
||||
margin-bottom: 12px;
|
||||
color: $black-500;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
input {
|
||||
border: 1px solid f0f0f0;
|
||||
border-radius: 5px;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
color: f0f0f0;
|
||||
font-size: 12px;
|
||||
height: 36px;
|
||||
@ -495,45 +626,55 @@
|
||||
}
|
||||
|
||||
& ~ button {
|
||||
background-color: #292929;
|
||||
background-color: $vivid-blue;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
height: 36px;
|
||||
letter-spacing: 1px;
|
||||
color: $white;
|
||||
font-family: $font-family;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
letter-spacing: 0.05px;
|
||||
outline: none;
|
||||
position: absolute;
|
||||
right: -150px;
|
||||
top: 36px;
|
||||
// position: absolute;
|
||||
// right: -150px;
|
||||
// top: 36px;
|
||||
transition: all 0.2s linear;
|
||||
width: 96px;
|
||||
text-transform: uppercase;
|
||||
margin-left: 50px;
|
||||
// padding: 8px 11px 9px;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten(#292929, 5);
|
||||
background-color: $vivid-blue-lighten;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken(#292929, 5);
|
||||
background-color: $vivid-blue-darker;
|
||||
}
|
||||
}
|
||||
|
||||
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-weight: normal;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
color: #00c8ff;
|
||||
margin-top: 7px;
|
||||
color: $black-500;
|
||||
margin-top: 4px;
|
||||
text-decoration: underline;
|
||||
// }
|
||||
}
|
||||
|
||||
span.help.error {
|
||||
color: red;
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
top: 17px;
|
||||
}
|
||||
@ -571,24 +712,24 @@
|
||||
}
|
||||
|
||||
.srp-delivery-select {
|
||||
border: 1px solid #8d8d8d;
|
||||
border: 1px solid $gray-300;
|
||||
}
|
||||
|
||||
.srp-delivery-select-container {
|
||||
border: 1px solid #8d8d8d;
|
||||
border-radius: 0;
|
||||
border: 1px solid $gray-300;
|
||||
border-radius: 5px;
|
||||
|
||||
.srp-shipping-current-many {
|
||||
&__name {
|
||||
color: #303030;
|
||||
color: $black-400;
|
||||
}
|
||||
|
||||
&__sla {
|
||||
color: #7d7d7d;
|
||||
color: $gray-700;
|
||||
}
|
||||
|
||||
&__price {
|
||||
color: #7d7d7d;
|
||||
color: $gray-700;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@ -713,7 +854,8 @@
|
||||
|
||||
.accordion-group {
|
||||
tr {
|
||||
border-color: #e5e5e5;
|
||||
// border-bottom: 1px solid $gray-50;
|
||||
// border-color: $gray-50;
|
||||
|
||||
td {
|
||||
&.empty {
|
||||
@ -722,12 +864,13 @@
|
||||
|
||||
&.info,
|
||||
&.monetary {
|
||||
font-family: $font-family-secundary;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #292929;
|
||||
padding: 12px 0;
|
||||
line-height: 19px;
|
||||
color: $black-400;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
&.info {
|
||||
@ -748,7 +891,7 @@
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
color: #292929;
|
||||
color: $black-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -802,7 +945,7 @@
|
||||
padding: 12px 19px;
|
||||
|
||||
&:hover {
|
||||
background-color: darken(#4caf50, 5);
|
||||
background-color: $vivid-blue-lighten;
|
||||
}
|
||||
|
||||
&:after {
|
||||
@ -820,4 +963,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,6 +4,11 @@ body .container-main.container-order-form .orderform-template.active {
|
||||
margin-left: unset;
|
||||
margin-right: 0;
|
||||
float: right;
|
||||
|
||||
.quantity {
|
||||
background-color: $vivid-blue;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.orderform-template-holder {
|
||||
width: 66.1132%;
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
&-content {
|
||||
color: #292929;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
|
||||
@include mq(md, max) {
|
||||
padding: 0 16px;
|
||||
@ -10,15 +11,13 @@
|
||||
}
|
||||
|
||||
&-title {
|
||||
display: none;
|
||||
&::before{
|
||||
align-items: center;
|
||||
font-family: $font-family;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
&-message {
|
||||
display: none;
|
||||
@ -26,21 +25,29 @@
|
||||
|
||||
&-links {
|
||||
.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;
|
||||
border-style: border-box;
|
||||
border: 1px solid $black-500;
|
||||
border-radius: 0;
|
||||
transition: ease-in 0.22s all;
|
||||
outline: none;
|
||||
font-family: $font-family-secundary;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 15px 65px 17px 64px;
|
||||
color: $black-500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: lighten(#292929, 5);
|
||||
|
||||
@ -71,8 +71,17 @@ body {
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: #292929;
|
||||
text-shadow: none;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
color: $white;
|
||||
outline: none;
|
||||
font-family: "Open Sans",sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
letter-spacing: .05em;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
background: lighten(#292929, 15%);
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
line-height: 14px;
|
||||
text-transform: capitalize;
|
||||
max-width: 40%;
|
||||
|
||||
@ -38,15 +38,19 @@
|
||||
justify-self: center;
|
||||
list-style: none;
|
||||
|
||||
li .vtex-pci {
|
||||
&::before {
|
||||
display: block;
|
||||
content: "";
|
||||
height: 24px;
|
||||
width: 1px;
|
||||
color: $gray-400;
|
||||
}
|
||||
}
|
||||
// li .vtex-pci {
|
||||
// &::before {
|
||||
// display: block;
|
||||
// content: "";
|
||||
// height: 24px;
|
||||
// width: 1px;
|
||||
// color: $gray-400;
|
||||
// }
|
||||
|
||||
// width: 81.62%
|
||||
// img {
|
||||
// }
|
||||
// }
|
||||
|
||||
@include mq(md, max) {
|
||||
align-self: center;
|
||||
@ -54,7 +58,8 @@
|
||||
}
|
||||
|
||||
&__divider {
|
||||
background-color: #8d8d8d;
|
||||
content: "";
|
||||
background-color: $gray-400;
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
margin: 0 8px;
|
||||
|
||||
@ -8,6 +8,7 @@ $font-family-secundary: "Tenor Sans", sans-serif;
|
||||
|
||||
$white: #ffffff;
|
||||
|
||||
$gray-50: #e0e0e0;
|
||||
$gray-100: #ededed;
|
||||
$gray-200: #e5e5e5;
|
||||
$gray-300: #f0f0f0;
|
||||
@ -15,11 +16,19 @@ $gray-400: #c4c4c4;
|
||||
$gray-500: #989898;
|
||||
$gray-600: #858585;
|
||||
$gray-700: #7d7d7d;
|
||||
$gray-800: #808080;
|
||||
$gray-900: #828282;
|
||||
|
||||
$black-400: #292929;
|
||||
$black-500: #000000;
|
||||
|
||||
$vivid-blue: #00C8FF;
|
||||
$vivid-blue-lighten: #57dbff;
|
||||
$vivid-blue-darker: #00b0e0;
|
||||
|
||||
$green: #298541;
|
||||
$green-lighten: #2fa34e;
|
||||
$green-darker: #185428;
|
||||
|
||||
/* Grid breakpoints */
|
||||
$grid-breakpoints: (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user