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

feat: modifica mobile

Browse Source
This commit is contained in:
Naian Felix dos Santos 2022-12-17 23:01:06 -03:00
parent 7a33301d53
commit 291b2f281b
7 changed files with 844 additions and 342 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
checkout/src/arquivos/js/components/CheckoutUI.js
View File

@ -70,6 +70,9 @@ export default class CheckoutUI {
} else { } else {
cartId.style.display = "block"; cartId.style.display = "block";
} }
if (window.location.hash === "#/shipping" || window.location.hash === "#/payment") {
cartId.style.display = "none";
}
}); });
if (itemsForm === 0) { if (itemsForm === 0) {
cartId.style.display = "none"; cartId.style.display = "none";

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

@ -1,289 +1,719 @@
.checkout-container { .checkout-container {
.client-pre-email { .client-pre-email {
border-color: $color-gray4; border-color: $color-gray4;
font-family: $font-family; font-family: $font-family;
padding-top: 8px; border-top: 1px solid $color-black1;
width: unset;
padding: 0 16px;
.link-cart { @include mq(md, min) {
a { width: 100%;
color: $color-black; padding: 0;
font-size: 14px; }
&:hover { .link-cart {
color: lighen($color-black, 10); margin: 0;
} a {
} font-family: $font-family-secundary;
} color: $color-black1;
font-size: 10px;
line-height: 12px;
font-weight: 400;
text-transform: uppercase;
.pre-email { &:hover {
flex-direction: column; color: lighen($color-black1, 10);
display: flex; }
align-items: center; }
justify-content: center; }
h3 { .pre-email {
margin-bottom: 16px; flex-direction: column;
display: flex;
align-items: center;
justify-content: center;
span { h3 {
color: #303030; width: 100%;
font-size: 24px; max-width: 90.666666666667%;
} margin: 98px 0 20px;
small { span {
color: $color-gray4; width: 0;
} height: 0;
} color: #303030;
} font-size: 0;
}
.client-email { small {
margin: 0 0 16px; color: $color-gray4;
font-size: 0;
}
input { &::after {
box-shadow: none; content: "Para finalizar a compra, informe seu e-mail. Rápido. Fácil. Seguro.";
color: $color-black; text-transform: uppercase;
font-family: $font-family; font-family: $font-family-secundary;
padding: 0 16px; font-weight: 400;
border: 2px solid $color-gray3; font-size: 14px;
box-sizing: border-box; line-height: 16px;
border-radius: 5px; color: $color-black1;
}
}
}
@media (max-width: 490px) { .client-email {
width: auto; margin: 0;
} padding-bottom: 16px;
} max-width: 100%;
button { input {
background-color: $color-black; height: 52px;
border-radius: 5px; box-shadow: none;
border: none; color: $color-black;
font-family: $font-family; box-sizing: border-box;
height: 54px; border: 1px solid $color-black1;
right: 0; border-radius: 5px 8px 8px 5px;
top: 0;
@media (max-width: 490px) { &::placeholder {
height: 48px; color: $color-black1;
margin: 0; font-family: $font-family;
position: absolute; font-style: normal;
} font-weight: 400;
} font-size: 12px;
line-height: 16px;
}
}
span.help.error { button {
color: red; position: absolute;
} background-color: $color-blue-100;
} border-radius: 0px 8px 8px 0px;
border: none;
font-family: $font-family;
color: $color-black1;
height: 52px;
font-weight: 700;
font-size: 14px;
line-height: 19px;
right: 0px;
top: -5px;
width: 37.6%;
max-width: 126px;
}
.emailInfo { span.help.error {
padding: 16px; font-family: $font-family;
background-color: $color-white; font-weight: 700;
border: 1px solid $color-gray4; font-size: 12px;
border-radius: 0; line-height: 16px;
color: $color-red;
height: 19.44px;
}
}
h3 { .emailInfo {
color: #303030; width: auto;
margin: 0 0 8px 0; margin: 49px auto 0 auto;
} background-color: $color-white;
border: 1px solid $color-gray4;
border-radius: 0;
padding: 16px 20px 14px 16px;
ul { h3 {
margin: 0; color: $color-black1;
margin: 0 0 8px 0;
font-family: $font-family;
font-weight: 700;
font-size: 12px;
line-height: 16px;
}
li { ul {
span { margin: 0;
color: $color-black;
}
i::before { li {
color: $color-black; span {
font-size: 1rem; font-family: $font-family;
opacity: 1; color: $color-black1;
} font-weight: 700;
} font-size: 12px;
} line-height: 16px;
}
i::before { i::before {
color: $color-black; color: $color-blue-100;
font-size: 6rem; font-size: 1rem;
opacity: 0.5; opacity: 0.5;
} }
} }
} }
.shipping-data, i.icon-lock::before {
.payment-data, display: none;
.client-profile-data { }
.accordion-group { }
border-radius: 0; }
border: 1px solid $color-gray4;
font-family: $font-family;
padding: 16px;
.accordion-heading { .shipping-data,
span { .payment-data {
color: #303030; .accordion-group {
margin-bottom: 8px; margin-bottom: 17px;
padding: 0; .accordion-heading {
display: flex;
justify-content: space-between;
margin-bottom: 14px;
}
i::before { .accordion-inner {
fill: #303030; margin-bottom: 12px;
}
}
a { input {
align-items: center; height: 25px;
background-color: #303030; }
border-radius: 8px;
border: none;
color: $color-white;
display: flex;
justify-content: center;
padding: 6px 5px 6px 8px;
}
}
.accordion-inner { .box-step {
padding: 0; .vtex-omnishipping-1-x-shippingSectionTitle {
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: $color-gray2;
}
/* General configurations */ div.undefined {
font-family: $font-family;
}
.client-notice { div.shipping-method-wrapper {
color: $color-black; background-color: $color-white;
} border-radius: 100px;
width: 100%;
font-family: $font-family;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
background: $color-white;
border: 1px solid #f5f5f5;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
border-radius: 100px;
}
p { .vtex-omnishipping-1-x-address {
label { display: flex;
color: $color-black; flex-direction: column;
font-weight: 500; font-weight: 700;
}
select, .ship-number {
input { width: 95.47%;
border-radius: 0; }
border: 1px solid $color-gray4; label {
box-shadow: none; 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;
}
.help.error { input {
color: red; width: 100%;
} margin-bottom: 5px;
} }
}
button.submit {
background: #00c8ff;
border-radius: 8px;
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #ffffff;
}
.box-client-info-pj { .ship-country {
.link a#is-corporate-client, display: none;
.link a#not-corporate-client { }
color: $color-black;
font-weight: 500;
text-decoration: underline;
}
}
.state-inscription-box span { .ship-postalCode {
font-weight: 500; display: flex;
} flex-direction: column;
position: relative;
font-family: $font-family;
font-weight: 700;
font-size: 12px;
line-height: 16px;
color: $color-gray2;
button.submit { &::after {
border: none; content: "CEP:";
border-radius: 5px; font-family: $font-family;
background: $color-black; font-style: normal;
margin-top: 8px; font-weight: 700;
outline: none; font-size: 14px;
transition: all 0.2s linear; line-height: 19px;
color: #7d7d7d;
position: absolute;
}
&:hover { #ship-postalCode {
background: lighten($color-black, 5); width: 100%;
} max-width: 95.49%;
}
}
}
}
}
}
&:active { .row-fluid {
background: darken($color-black, 5); .shipping-data,
} .payment-data,
} .client-profile-data {
.accordion-group {
border-radius: 0;
border: 1px solid $color-gray7;
border-radius: 8px;
font-family: $font-family;
padding: 16px;
margin: 0 16px 17px 16px;
/* Shipping configurations */ .accordion-heading {
position: relative;
.ship-postalCode small a { &::after {
color: #303030; display: none;
font-weight: 500; }
text-decoration: underline; span {
} font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: $color-black;
}
.vtex-omnishipping-1-x-deliveryGroup { .accordion-toggle {
p { width: 100%;
color: #303030;
font-size: 14px;
font-weight: 500;
}
.shp-lean { &::before {
border: 1px solid $color-gray4; content: "";
border-radius: 0; background-image: url(" https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
display: block;
background-size: 100% 100%;
background-repeat: no-repeat;
width: 20px;
height: 20px;
float: right;
}
label { span {
background-color: $color-white; font-family: $font-family;
box-shadow: none; font-style: normal;
color: #303030; font-weight: 400;
padding: 8px 12px; font-size: 16px;
line-height: 19px;
color: $color-black;
}
svg path { .icon-user + span {
fill: #d8c8ac; display: none;
} }
}
}
}
.delivery-address-title { .icon-user,
color: #303030; .icon-home,
font-size: 14px; .icon-credit-card {
font-weight: 500; &::before {
} display: none;
}
}
}
.shp-summary-group-info { .accordion-toggle-active {
border-color: $color-gray4; &::before {
} display: none;
}
}
.address-summary { a {
background: none; display: none;
border-color: $color-gray4; align-items: center;
border-radius: 0; background-color: #303030;
color: #303030; border-radius: 8px;
padding: 12px; border: none;
color: $color-white;
justify-content: center;
padding: 6px 5px 6px 8px;
}
}
@include mq(md, max) { .accordion-inner {
background-position: 8px 9px; padding: 0;
}
a { .form-step {
color: #303030; margin-bottom: 36px;
font-weight: 500; font-family: $font-family;
text-decoration: underline; font-style: normal;
} font-weight: 400;
} font-size: 12px;
line-height: 16px;
color: $color-gray2;
.shp-summary-group-price, .client-profile-email {
.shp-summary-package { padding: 68px 0 0 0;
color: $color-gray4; margin: 0;
}
.shp-summary-group-price { &::after {
padding-right: 16px; content: "Identificação";
} position: absolute;
top: -1px;
left: 0;
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: $color-black;
}
.shp-summary-package { .client-profile-summary {
padding-left: 16px; margin-bottom: 36px;
}
.vtex-omnishipping-1-x-summaryChange { span {
border-color: #303030; margin-bottom: 6px;
color: #303030; }
} }
}
span {
display: block;
margin-bottom: 6px;
}
br {
display: none;
}
}
/* General configurations */
.vtex-omnishipping-1-x-deliveryChannelsToggle { .client-notice {
background-color: #d8c8ac; color: transparent;
border: 1px solid #d8c8ac; font-size: 0;
} position: relative;
margin-bottom: 55px;
.vtex-omnishipping-1-x-deliveryOptionActive { &::after {
text-shadow: 1.3px 1px lighten($color-black, 50); position: absolute;
} content: "Identificação";
} font-family: $font-family-secundary;
} font-weight: 400;
} font-size: 16px;
line-height: 19px;
color: $color-black;
top: 0px;
}
}
p.client-first-name,
p.client-last-name,
p.client-document,
p.client-phone {
width: 48.369%;
margin: 0;
}
p.client-first-name {
float: left !important;
input.input-small {
width: 89% !important;
}
}
p.client-last-name {
float: right !important;
input.input-small {
width: 89% !important;
}
}
p {
[type="checkbox"] {
display: none;
&:checked + .newsletter-text::after {
content: "";
width: 12px;
display: block;
position: absolute;
top: 3px;
border-radius: 3px;
left: 3px;
height: 12px;
background-color: $color-blue-100;
}
}
}
label {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray2;
}
select,
input {
border-radius: 5px;
border: 1px solid $color-gray7;
box-shadow: none;
}
label {
&.checkbox {
position: relative;
padding-left: 26px;
.newsletter-text {
&::before {
position: absolute;
content: "";
border: 1px solid #828282;
border-radius: 3px;
width: 16px;
height: 16px;
top: 0;
left: 0;
}
}
}
}
.help.error {
color: red;
}
}
.box-client-info-pf {
float: unset;
}
.box-client-info-pj {
.link a#is-corporate-client,
.link a#not-corporate-client {
color: $color-black;
font-weight: 500;
text-decoration: underline;
display: none;
}
}
.state-inscription-box span {
font-weight: 500;
}
p.submit {
margin: 0;
button.submit {
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
border: none;
margin-top: 44px;
outline: none;
transition: all 0.2s linear;
background: $color-blue-100;
color: $color-white;
border-radius: 8px;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 28px;
width: 100%;
&:hover {
background: lighten($color-blue-100, 5);
}
&:active {
background: darken($color-blue-100, 5);
}
}
}
/* Shipping configurations */
.vtex-omnishipping-1-x-addressFormPart1 small {
margin-left: 0;
margin-top: 10px;
}
.vtex-omnishipping-1-x-cta {
.undefined {
background: $color-blue-100;
border-radius: 8px;
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;
}
}
.ship-postalCode small a {
color: #303030;
font-weight: 500;
text-decoration: underline;
}
.vtex-omnishipping-1-x-deliveryGroup {
p {
color: #303030;
font-size: 14px;
font-weight: 500;
}
.shp-lean {
border: 1px solid $color-gray7;
border-radius: 8px;
label {
box-shadow: none;
color: #303030;
padding: 8px 12px;
&.checkbox {
position: relative;
padding-left: 26px;
}
&.shp-lean-option::before {
margin-right: 8px;
content: "";
border: 1px solid #828282;
border-radius: 3px;
width: 16px;
height: 16px;
}
.vtex-omnishipping-1-x-leanShippingIcon {
display: none;
}
.vtex-omnishipping-1-x-leanShippingOptionRadio {
[type="checkbox"] {
display: none;
&:checked + .newsletter-text::after {
content: "";
width: 12px;
display: block;
position: absolute;
top: 3px;
border-radius: 3px;
left: 3px;
height: 12px;
background-color: $color-blue-100;
}
}
}
}
}
}
.delivery-address-title {
color: #303030;
font-size: 14px;
font-weight: 500;
}
.shp-summary-group-info {
border-color: $color-gray4;
}
.address-summary {
background: none;
border-color: $color-gray4;
color: #303030;
padding: 12px;
border: 1px solid $color-gray7;
border-radius: 8px;
background-position: 8px 9px;
&::before {
content: "";
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png");
display: block;
background-size: 100% 100%;
background-repeat: no-repeat;
width: 20px;
height: 20px;
float: left;
margin: 8px 9.38px 0 0;
}
a {
color: #303030;
font-weight: 500;
text-decoration: underline;
}
.link-edit {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-blue-100;
float: right;
text-transform: lowercase;
}
}
.shp-summary-group-price,
.shp-summary-package {
color: $color-gray4;
}
.shp-summary-group-price {
padding-right: 16px;
}
.shp-summary-package {
padding-left: 16px;
}
.vtex-omnishipping-1-x-summaryChange {
border-color: #303030;
color: #303030;
}
.vtex-omnishipping-1-x-deliveryChannelsToggle {
background-color: $color-white;
border: 1px solid #292929;
box-shadow: 2px 2px 4px rgb(0 0 0 / 20%);
border-radius: 100px;
}
.vtex-omnishipping-1-x-deliveryOptionActive {
color: $color-black;
text-transform: uppercase;
font-family: $font-family;
}
.vtex-omnishipping-1-x-deliveryOptionInactive {
color: $color-gray4;
text-transform: uppercase;
font-family: $font-family;
}
}
}
}
} }

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

@ -29,10 +29,16 @@
.cart-fixed { .cart-fixed {
font-family: $font-family; font-family: $font-family;
width: 100%; width: auto;
margin: 0 16px;
border-radius: 8px;
border: 1px solid $color-gray7;
h2 { h2 {
padding: 0 17px;
background: $color-white; background: $color-white;
border: none; border: none;
margin: 24px 0 34px 0;
color: #303030; color: #303030;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
@ -47,7 +53,8 @@
} }
.cart { .cart {
border: 1px solid $color-gray4; border: 0;
padding: 0 17px;
ul li { ul li {
border-top: none; border-top: none;
@ -60,6 +67,13 @@
border-top: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5;
} }
img {
width: 60px;
height: 60px;
object-fit: cover;
transform: rotateY(180deg);
}
.shipping-date, .shipping-date,
.price { .price {
color: #7d7d7d; color: #7d7d7d;
@ -73,6 +87,7 @@
} }
#go-to-cart-button a { #go-to-cart-button a {
margin-right: 17px;
color: #303030; color: #303030;
text-decoration: underline; text-decoration: underline;
} }
@ -84,18 +99,23 @@
} }
#payment-data-submit { #payment-data-submit {
background: $color-black; background: #298541;
border-radius: 8px;
border: none; border: none;
border-radius: 0;
color: $color-white; color: $color-white;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;
.icon-lock {
display: none;
}
&:hover { &:hover {
background: lighten($color-black, 5); background: lighten(#298541, 5);
} }
&:active { &:active {
background: darken($color-black, 5); background: darken(#298541, 5);
} }
} }
} }
@ -105,6 +125,38 @@
} }
.cart-items { .cart-items {
.hproduct.item.muted {
span.product-name {
width: 120px;
white-space: unset;
margin-top: 12px;
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: $color-black;
}
span.quantity {
display: none;
}
span.shipping-date {
display: none;
}
.description {
margin-top: 0;
strong.price {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-black;
margin-left: 0;
margin-top: 20px;
}
}
}
.product-item { .product-item {
padding: 16px; padding: 16px;
margin-top: 0; margin-top: 0;
@ -149,10 +201,10 @@
border-top: 0; border-top: 0;
margin-top: 2px; margin-top: 2px;
padding-right: 0; padding-right: 0;
width: 250px; width: 240px;
a { a {
color: $color-black; color: $color-black1;
font-family: $font-family-secundary; font-family: $font-family-secundary;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
@ -195,6 +247,10 @@
line-height: 14px; line-height: 14px;
text-decoration-line: line-through; text-decoration-line: line-through;
.muted {
color: $color-gray6;
}
.old-product-price-label { .old-product-price-label {
text-transform: lowercase; text-transform: lowercase;
} }
@ -217,6 +273,7 @@
margin-left: 75px !important; margin-left: 75px !important;
input { input {
font-family: $font-family-secundary;
background-color: $color-white; background-color: $color-white;
border: 0; border: 0;
border-radius: 0; border-radius: 0;
@ -344,6 +401,7 @@
} }
.srp-main-title { .srp-main-title {
font-family: $font-family;
font-style: normal; font-style: normal;
color: $color-black; color: $color-black;
font-weight: 400; font-weight: 400;
@ -364,7 +422,7 @@
background-color: $color-gray5; background-color: $color-gray5;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
color: $color-black; color: $color-black1;
font-size: 16px; font-size: 16px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
line-height: 19px; line-height: 19px;
@ -385,39 +443,37 @@
} }
.srp-data { .srp-data {
width: 280px;
margin-bottom: 48.35px; margin-bottom: 48.35px;
width: calc(100vw - 32px);
@include mq(cstm, max) {
width: calc(100vw - 32px);
}
.srp-pickup-my-location__button { .srp-pickup-my-location__button {
background-color: $color-black; background-color: $color-blue-100;
font-family: $font-family;
border: none; border: none;
border-radius: 5px; border-radius: 8px;
color: $color-white; color: $color-white;
outline: none; outline: none;
width: 100%; width: 100%;
height: 42px;
font-style: normal; font-style: normal;
font-weight: 500;
font-size: 14px; font-size: 14px;
line-height: 16px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
font-weight: 700;
line-height: 19px;
text-transform: uppercase;
&: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);
} }
} }
} }
.srp-toggle { .srp-toggle {
margin: 0 0 34px; margin: 0 0 20px;
&__wrapper { &__wrapper {
background-color: $color-white; background-color: $color-white;
@ -432,12 +488,13 @@
} }
&__current { &__current {
border: 1px solid $color-blue; border: 1px solid $color-black;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
border-radius: 100px; border-radius: 100px;
} }
.blue { .blue {
color: $color-blue; color: $color-black;
} }
label { label {
@ -450,18 +507,22 @@
} }
.srp-postal-code { .srp-postal-code {
.ship-country {
display: none;
}
.ship-postalCode { .ship-postalCode {
label { label {
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 16px;
color: $color-black; color: $color-black1;
margin-bottom: 12px; margin-bottom: 2px;
} }
input { input {
position: relative;
border: 1px solid $color-gray3; border: 1px solid $color-gray3;
border-radius: 5px; border-radius: 5px;
box-shadow: none; box-shadow: none;
@ -469,51 +530,64 @@
font-size: 12px; font-size: 12px;
height: 36px; height: 36px;
padding: 12px 8px; padding: 12px 8px;
width: 172px; width: 215px;
} }
& ~ button { & ~ button {
background-color: $color-black; background-color: $color-blue-100;
border: none; border: none;
border-radius: 5px; border-radius: 8px;
color: $color-white; color: $color-white;
font-size: 12px; font-size: 14px;
font-weight: 700;
height: 36px; height: 36px;
letter-spacing: 1px; letter-spacing: 1px;
line-height: 19px;
outline: none; outline: none;
position: absolute; position: absolute;
right: -150px; right: -213px;
top: 36px; top: 28px;
transition: all 0.2s linear; transition: all 0.2s linear;
width: 96px; width: 120px;
text-transform: uppercase; text-transform: uppercase;
margin-left: 8px;
&: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);
} }
} }
small a { small a {
font-family: $font-family; color: transparent;
font-style: normal;
font-weight: normal;
font-size: 10px;
line-height: 12px;
color: $color-blue;
margin-top: 7px; margin-top: 7px;
font-size: 0;
&::after {
position: absolute;
content: "Não sei meu código postal";
font-family: $font-family-secundary;
font-style: normal;
font-size: 10px;
font-weight: normal;
line-height: 12px;
color: $color-black1;
bottom: 11px;
right: -1px;
text-decoration-line: underline;
}
} }
span.help.error { span.help.error {
color: red; color: red;
font-size: 12px; font-size: 12px;
position: absolute; position: absolute;
left: 0; left: 12px;
width: 100%; width: 100%;
top: 17px; top: 34px;
} }
} }
} }
@ -553,8 +627,8 @@
} }
.srp-delivery-select-container { .srp-delivery-select-container {
border: 1px solid $color-gray4; border: 1px solid $color-gray;
border-radius: 0; border-radius: 8px;
.srp-shipping-current-many { .srp-shipping-current-many {
&__name { &__name {
@ -579,9 +653,8 @@
} }
&-totalizers { &-totalizers {
padding: 0; padding: 0 16px;
width: 346px; width: 100%;
.coupon-data { .coupon-data {
margin-bottom: 10px; margin-bottom: 10px;
#cart-link-coupon-add { #cart-link-coupon-add {
@ -602,11 +675,6 @@
} }
} }
@include mq(md, max) {
padding: 0 16px;
width: 100%;
}
.coupon-column { .coupon-column {
.coupon { .coupon {
margin: 0; margin: 0;
@ -619,14 +687,15 @@
} }
.coupon-label label { .coupon-label label {
margin-bottom: 12px; margin-bottom: 4px;
font-family: $font-family; font-family: $font-family-secundary;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-gray2; color: $color-gray2;
cursor: none; cursor: none;
text-align: start;
} }
.coupon-fields { .coupon-fields {
@ -646,45 +715,47 @@
} }
input { input {
border: 2px solid $color-gray3; border: 1px solid $color-gray5;
font-family: $font-family-secundary;
border-radius: 5px; border-radius: 5px;
box-shadow: none; box-shadow: none;
color: $color-gray4;
font-size: 12px; font-size: 12px;
line-height: 14px;
font-weight: 400;
height: 34px; height: 34px;
padding: 0 12px; padding: 0 12px;
max-width: 160px; max-width: 59.568513119534%;
width: 100%;
@include mq(sm, max) { ::placeholder {
max-width: 100%; color: $color-gray1;
width: 100%;
} }
} }
button { button {
background: $color-black; background: $color-blue-100;
border: none; border: none;
border-radius: 5px; border-radius: 8px;
color: $color-white; color: $color-black1;
font-size: 12px;
height: 36px; height: 36px;
font-weight: 400;
font-size: 14px;
line-height: 19px;
letter-spacing: 1px; letter-spacing: 1px;
margin-left: 6px; margin-left: 6px;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;
width: 94px; width: 100%;
max-width: 38.924198250729%;
text-transform: uppercase; text-transform: uppercase;
font-family: $font-family;
@include mq(md, max) {
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);
} }
} }
} }
@ -692,8 +763,7 @@
.accordion-group { .accordion-group {
tr { tr {
border-color: #e5e5e5; border-top: 1px solid $color-gray7;
td { td {
&.empty { &.empty {
display: none; display: none;
@ -722,6 +792,7 @@
tfoot { tfoot {
td.info, td.info,
td.monetary { td.monetary {
font-family: $font-family;
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 18px;
font-style: normal; font-style: normal;
@ -766,7 +837,6 @@
transition: ease-in 0.22s all; transition: ease-in 0.22s all;
padding: 12px 19px; padding: 12px 19px;
margin-top: 14.91px; margin-top: 14.91px;
width: 308px;
&:hover { &:hover {
background-color: darken($color-blue-100, 5); background-color: darken($color-blue-100, 5);

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

@ -1,11 +1,10 @@
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%; width: 100%;
margin-left: unset; margin-left: unset;
margin-right: 0; margin-right: 0;
float: right;
} }
.orderform-template-holder { .orderform-template-holder {
width: 66.1132%; width: 100%;
} }
} }

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

@ -10,7 +10,7 @@
font-weight: 700; font-weight: 700;
font-size: 24px; font-size: 24px;
line-height: 33px; line-height: 33px;
margin: 17px; margin: 16px;
color: $color-black; color: $color-black;
width: 91%; width: 91%;
} }

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

@ -22,11 +22,8 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100% !important; min-height: 100% !important;
padding-top: 0 !important; padding: 0 !important;
overflow-x: hidden;
@include mq(md, max) {
padding-left: 0;
}
&.body-cart { &.body-cart {
height: 100%; height: 100%;
@ -35,18 +32,7 @@ body {
&.body-cart, &.body-cart,
&.body-order-form { &.body-order-form {
@include mq(xl, min) { padding: unset;
padding-top: 0;
}
@include mq(lg, max) {
padding-bottom: 0 !important;
}
@include mq(md, max) {
padding-right: 0;
padding-left: 0;
}
} }
.container-order-form, .container-order-form,
.container-cart { .container-cart {
@ -67,8 +53,7 @@ body {
color: $color-black !important; color: $color-black !important;
} }
#cart-title, #cart-title {
#orderform-title {
color: $color-gray2; color: $color-gray2;
font-family: $font-family; font-family: $font-family;
font-weight: 500; font-weight: 500;
@ -77,10 +62,20 @@ body {
margin: 40px 0 30px; margin: 40px 0 30px;
letter-spacing: 0.1em; letter-spacing: 0.1em;
text-transform: uppercase; text-transform: uppercase;
margin-left: 30px;
}
@include mq(md, max) { #orderform-title {
margin-left: 30px; color: $color-black1;
} font-family: $font-family;
letter-spacing: 0.1em;
text-transform: uppercase;
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
margin: 16px;
width: 91%;
} }
.dropdown { .dropdown {

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

@ -6,6 +6,7 @@ $font-family-secundary: "Tenor Sans", sans-serif;
/* Colors */ /* Colors */
$color-black: #292929; $color-black: #292929;
$color-black1: #000000;
$color-white: #fff; $color-white: #fff;
@ -16,19 +17,23 @@ $color-gray3: #f0f0f0;
$color-gray4: #8d8d8d; $color-gray4: #8d8d8d;
$color-gray5: #e5e5e5; $color-gray5: #e5e5e5;
$color-gray6: #989898; $color-gray6: #989898;
$color-gray7: #e0e0e0;
$color-gray8: #828282;
$color-blue-100: #00c8ff; $color-blue-100: #00c8ff;
$color-blue: #4267b2; $color-blue: #4267b2;
$color-green: #4caf50; $color-green: #4caf50;
$color-red: #ff0000;
/* Grid breakpoints */ /* Grid breakpoints */
$grid-breakpoints: ( $grid-breakpoints: (
xs: 0, xs: 0,
cstm: 400, cstm: 400,
sm: 576px, sm: 576px,
md: 768px, md: 768px,
lg: 992px, lg: 1024px,
xl: 1200px, xl: 1200px,
) !default; ) !default;