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

feature/optimization #1

Merged
josecarloslins merged 16 commits from feature/optimization into main 2022-12-17 01:38:19 +00:00
Conversation 0 Commits 16 Files Changed 14 +1026 -90
6 changed files with 1026 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4400c8520a - Show all commits

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

@ -120,8 +120,8 @@
.emailInfo { .emailInfo {
padding: 16px 0px 28px 16px; padding: 16px 0px 28px 16px;
background-color: $color-white; background-color: $color-white;
border: 1px solid $color-gray4; border: 1px solid $color-black-neutra;
border-radius: 0; border-radius: 5px;
width: 37.306%; width: 37.306%;
margin-bottom: 94px; margin-bottom: 94px;
@ -165,29 +165,348 @@
} }
} }
.shipping-data,
.payment-data,
.client-profile-data { .client-profile-data {
.accordion-group { .accordion-group {
border-radius: 0; border: 1px solid $color-gray3;
border: 1px solid $color-gray4; border-radius: 8px;
font-family: $font-family; font-family: $font-family;
padding: 16px; padding: 24px 17px 29px 17px;
.accordion-heading { .accordion-heading {
span { .accordion-toggle {
color: #303030; align-items: center;
margin-bottom: 8px; justify-content: space-between;
font-size: 0;
padding: 0;
&::before {
content: "Identificação";
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: $color-black;
}
a {
display: flex !important;
background: transparent;
padding: 0;
font-size: 0;
opacity: 1;
top: 0;
right: 0;
&::after {
content: "";
background: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
background-size: contain;
width: 20px;
height: 20px;
z-index: 10;
background-color: #fff;
}
i {
display: none;
}
&:visited {
background: transparent;
font-size: 0;
display: none;
}
}
}
i::before {
display: none;
fill: #303030;
}
}
}
}
.shipping-data {
.accordion-group {
border: 1px solid $color-gray3;
border-radius: 8px;
font-family: $font-family;
padding: 24px 17px 29px 17px;
.accordion-heading {
.accordion-toggle {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row-reverse;
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: $color-black;
padding: 0; padding: 0;
i::before { i {
fill: #303030; display: flex !important;
background: transparent;
padding: 0;
font-size: 0;
opacity: 1;
top: 0;
right: 0;
&::after {
content: "";
background: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
background-size: contain;
width: 20px;
height: 20px;
z-index: 10;
background-color: #fff;
}
}
a {
background: transparent;
z-index: 10;
i {
display: flex;
background: transparent;
position: absolute;
padding: 0;
font-size: 0;
opacity: 1;
top: 66%;
right: 60%;
&::after {
content: "";
background: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
background-size: contain;
width: 20px;
height: 20px;
z-index: 20;
background-color: #fff;
}
}
}
}
}
}
}
.payment-data {
.accordion-group {
border: 1px solid $color-gray3;
border-radius: 8px;
font-family: $font-family;
padding: 24px 17px 29px 17px;
.accordion-toggle {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row-reverse;
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: $color-black;
padding: 0;
i {
display: flex !important;
background: transparent;
padding: 0;
font-size: 0;
opacity: 1;
top: 0;
right: 0;
&::after {
content: "";
background: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
background-size: contain;
width: 20px;
height: 20px;
z-index: 10;
background-color: #fff;
} }
} }
a {
background: transparent;
z-index: 10;
i {
display: flex;
background: transparent;
position: absolute;
padding: 0;
font-size: 0;
opacity: 1;
top: 66%;
right: 60%;
&::after {
content: "";
background: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
background-size: contain;
width: 20px;
height: 20px;
z-index: 20;
background-color: #fff;
}
}
}
}
}
}
#payment-data {
.accordion-group {
.payment-body {
.accordion-inner {
.box-step {
.box-step-content {
.form-step.box-new.row-fluid {
&::before {
content: "Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados.";
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 24px;
letter-spacing: -0.01em;
margin-top: 12px;
}
}
form {
.link-gift-card {
display: none !important;
}
fieldset {
width: 32.5038%;
margin-top: 16px;
.payment-group-list-btn {
width: 100%;
margin: 0;
.pg-deposito,
.pg-transferencia-bancaria,
#payment-group-creditDirectSalePaymentGroup,
#payment-group-promissoryPaymentGroup,
#payment-group-custom203PaymentGroupPaymentGroup,
#payment-group-instantPaymentPaymentGroup,
#payment-group-PSEPaymentGroup,
.pg-promisory---monica,
.pg-desconto-em-folha,
#payment-group-SPEIPaymentGroup,
#payment-group-MercadoPagoPaymentGroup {
display: none;
}
#payment-group-creditControlPaymentGroup {
margin-bottom: 12px;
span {
&::before {
content: "Cartão de Débito";
}
}
}
#payment-group-creditCardPaymentGroup {
margin-bottom: 12px;
span {
&::before {
content: "Cartão de Crédito";
}
}
}
#payment-group-bankInvoicePaymentGroup {
margin-bottom: 12px;
span {
&::before {
content: "Boleto à Vista";
}
}
}
a:nth-child(11) {
span {
&::before {
content: "Boleto Faturado";
}
}
}
a {
background: rgb(240, 240, 240, 0.3);
border: 1px solid rgb(0, 0, 0, 0.3);
border-radius: 6px;
margin: 0;
padding: 0;
opacity: 1;
box-sizing: border-box;
color: #58595b;
&:hover,
&:focus {
background: rgba(220, 221, 227, 0.3);
border: 1px solid #f15a31;
color: #f15a31;
text-decoration: none;
}
span {
font-size: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 13px 0;
background: none;
line-height: 24px;
&::before {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
letter-spacing: -0.01em;
}
}
}
}
}
.steps-view {
width: 61.1197%;
margin-top: 16px;
box-sizing: border-box;
}
}
}
}
}
}
}
}
.shipping-data,
.payment-data,
.client-profile-data {
.accordion-group {
border: 1px solid $color-gray3;
border-radius: 8px;
font-family: $font-family;
padding: 24px 17px;
.payment-body {
margin-top: 14px;
}
.accordion-heading {
a { a {
align-items: center; align-items: center;
background-color: #303030; background-color: transparent;
border-radius: 8px; border-radius: 8px;
border: none; border: none;
color: $color-white; color: $color-white;
@ -200,23 +519,228 @@
.accordion-inner { .accordion-inner {
padding: 0; padding: 0;
.box-client-info-pf {
margin-top: 34px;
}
.shipping-summary-info,
.notification {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray2;
margin-top: 14px;
}
.box-step {
.vtex-omnishipping-1-x-SummaryItemGroup {
padding: 0;
padding-top: 23px;
}
.form-step.box-info {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-gray2;
margin-top: 23px;
p {
margin-bottom: 6px;
}
span {
margin-bottom: 6px;
}
.client-profile-summary {
display: grid;
br {
display: none;
}
}
}
.vtex-omnishipping-1-x-addressForm {
.vtex-omnishipping-1-x-shippingSectionTitle {
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.05em;
color: $color-gray2;
}
.vtex-omnishipping-1-x-addressSummary {
border: 1px solid #e0e0e0;
border-radius: 8px;
margin-bottom: 15px;
display: flex;
padding: 0 12px;
&::before {
content: "";
background: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png")
no-repeat center center;
background-size: contain;
height: 20.07px;
width: 21.25px;
display: flex;
align-self: center;
}
.address-summary {
border: none;
margin: 0;
padding: 14px 0;
padding-left: 9px;
span {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-gray2;
}
a {
color: $color-blue-light;
text-decoration-line: none;
}
}
}
.vtex-omnishipping-1-x-address {
div {
display: flex;
flex-direction: column;
}
.ship-complement {
input {
&::placeholder {
display: none;
color: #fff;
}
}
}
.ship-number,
.ship-complement,
.ship-receiverName {
margin: 0;
label {
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.05em;
}
input {
width: 100%;
margin-bottom: 15px;
border-radius: 8px;
}
}
}
.vtex-omnishipping-1-x-address {
margin: 0;
}
}
.vtex-omnishipping-1-x-submitPaymentButton {
margin: 0;
button {
margin: 0;
margin-bottom: 27px;
}
}
}
/* General configurations */ /* General configurations */
.client-notice { .client-notice {
display: none;
color: $color-black; color: $color-black;
} }
.client-first-name {
width: 47.47%;
margin-right: 13px;
}
.client-last-name {
width: 47.47%;
}
.client-document {
width: 47.47%;
margin: 0;
margin-right: 13px;
}
.client-phone {
width: 47.47%;
}
.newsletter {
margin: 0;
}
.submit {
margin: 0;
}
p { p {
.checkbox.newsletter-label {
padding: 0;
input {
width: 18px;
height: 18px;
margin: 2px;
}
}
.newsletter-text {
margin-left: 6px;
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #808080;
}
label { label {
color: $color-black; color: $color-gray2;
font-weight: 500; font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
display: flex;
align-items: center;
} }
select, select,
input { input {
border-radius: 0; border-radius: 5px;
border: 1px solid $color-gray4; border: 1px solid #e0e0e0;
box-shadow: none; box-shadow: none;
height: 42px;
padding: 0 12px;
box-sizing: border-box;
width: 100%;
} }
.help.error { .help.error {
@ -225,6 +749,7 @@
} }
.box-client-info-pj { .box-client-info-pj {
display: none;
.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;
@ -239,19 +764,20 @@
button.submit { button.submit {
border: none; border: none;
border-radius: 5px; border-radius: 8px;
background: $color-black; background: $color-blue-light;
margin-top: 8px; margin-top: 45px;
margin-bottom: 29px;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;
&:hover { font-family: $font-family;
background: lighten($color-black, 5); font-style: normal;
} font-weight: 700;
font-size: 14px;
&:active { line-height: 19px;
background: darken($color-black, 5); text-transform: uppercase;
} width: 100%;
} }
/* Shipping configurations */ /* Shipping configurations */
@ -269,18 +795,106 @@
font-weight: 500; font-weight: 500;
} }
.vtex-omnishipping-1-x-shippingSectionTitle {
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: $color-gray2;
}
.shp-lean { .shp-lean {
border: 1px solid $color-gray4; border: 1px solid #e0e0e0;
border-radius: 0; border-radius: 8px;
.shp-option-text.vtex-omnishipping-1-x-leanShippingText {
border-right: 1px solid #e0e0e0;
}
.shp-option-text-label,
.shp-option-text-time,
.shp-option-text-price {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-gray2;
}
.shp-option-text-label {
letter-spacing: 0.05em;
}
// .vtex-omnishipping-1-x-leanShippingIcon {
// // border: 1px solid #828282;
// // border-radius: 3px;
// // width: 18px;
// // height: 18px;
// // background: $color-white;
// background: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-M3Academy.png");
// svg {
// background: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png");
// // &::before {
// // content: "";
// // background: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png");
// // width: 18px;
// // height: 18px;
// // }
// path {
// fill: $color-white;
// display: none;
// &::before {
// // content: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png");
// background: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png");
// width: 12px;
// height: 12px;
// }
// }
// }
// }
label { label {
background-color: $color-white; background-color: $color-white;
box-shadow: none; box-shadow: none;
color: #303030; color: #303030;
padding: 8px 12px; padding: 14px 12px;
svg path { // svg path {
fill: #d8c8ac; // fill: #d8c8ac;
// }
}
label.vtex-omnishipping-1-x-leanShippingOption {
.shp-option-icon {
background: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-M3Academy.png")
no-repeat center center;
width: 18px;
height: 18px;
svg path {
display: none;
}
}
}
label.vtex-omnishipping-1-x-leanShippingOptionActive {
background: #f2f2f2;
.shp-option-icon {
background: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png")
no-repeat center center;
width: 18px;
height: 18px;
svg path {
display: none;
}
} }
} }
} }
@ -291,9 +905,22 @@
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
} }
.shp-summary-group-info { .shp-summary-group-info {
border-color: $color-gray4; padding: 0;
border: 0;
.shp-summary-group-address.vtex-omnishipping-1-x-SummaryItemAddress {
.address-summary.address-summary-BRA {
padding: 0;
span {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-gray2;
}
}
}
} }
.address-summary { .address-summary {
@ -320,25 +947,95 @@
} }
.shp-summary-group-price { .shp-summary-group-price {
padding-right: 16px; padding: 0;
align-self: end;
} }
.shp-summary-package { .shp-summary-package {
padding-left: 16px; padding: 0px;
} }
.vtex-omnishipping-1-x-summaryChange { .vtex-omnishipping-1-x-summaryChange {
display: none;
border-color: #303030; border-color: #303030;
color: #303030; color: #303030;
} }
.vtex-omnishipping-1-x-deliveryChannelsToggle { .vtex-omnishipping-1-x-deliveryChannelsToggle {
background-color: #d8c8ac; background-color: $color-white;
border: 1px solid #d8c8ac; border: 1px solid #292929;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
border-radius: 100px;
text-shadow: none;
.shp-method-option-text {
text-shadow: none;
}
} }
.vtex-omnishipping-1-x-deliveryOptionActive { .vtex-omnishipping-1-x-deliveryOptionActive {
text-shadow: 1.3px 1px lighten($color-black, 50); text-shadow: none;
color: $color-black-neutra;
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
}
.vtex-omnishipping-1-x-deliveryOptionInactive {
text-shadow: none;
color: $color-gray7;
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
}
.vtex-omnishipping-1-x-isActive {
border: 1px solid #f5f5f5;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}
.vtex-omnishipping-1-x-addressFormPart1 {
.input.ship-country.text {
display: none;
}
.input.ship-postalCode.required.text {
label {
font-size: 0;
&::before {
content: "CEP:";
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 12px;
line-height: 16px;
color: $color-gray2;
}
}
input {
min-width: 100%;
margin-bottom: 10px;
border-radius: 8px;
}
small {
margin: 0;
a {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-black;
}
}
}
} }
} }
} }
@ -346,5 +1043,6 @@
} }
.row-fluid .orderform-template { .row-fluid .orderform-template {
margin-top: 11px;
margin-bottom: 94px; margin-bottom: 94px;
} }

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

@ -26,18 +26,40 @@
border-radius: 0; border-radius: 0;
} }
} }
.cart-fixed.affix { .cart-fixed.affix {
position: relative !important; position: relative !important;
height: max-content !important;
h2 {
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: $color-black;
text-align: left;
}
} }
.cart-fixed { .cart-fixed {
font-family: $font-family; font-family: $font-family;
width: 100%; width: 100%;
h2 { h2 {
font-family: $font-family-secundary;
background: $color-white; background: $color-white;
border: none;
color: #303030; color: #303030;
font-size: 14px; font-size: 16px;
line-height: 19px;
font-weight: 500; font-weight: 500;
text-align: left;
padding: 0;
border: 0;
padding: 24px 17px 0 17px;
border: 1px solid #e5e5e5;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom: none;
} }
.item-unavailable { .item-unavailable {
@ -49,13 +71,18 @@
} }
.cart { .cart {
border: 1px solid $color-gray4; border: none;
padding: 0 17px;
margin: 0;
border-left: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
ul li { ul li {
border-top: none; border-top: none;
margin-top: 0; margin-top: 34px;
padding-top: 0; padding-top: 0;
display: flex;
&:not(:first-child) { &:not(:first-child) {
margin-top: 8px; margin-top: 8px;
padding-top: 8px; padding-top: 8px;
@ -66,16 +93,84 @@
.price { .price {
color: #7d7d7d; color: #7d7d7d;
} }
.quantity.badge {
display: none;
}
.description {
margin: 0;
display: flex;
width: inherit;
justify-content: flex-end;
.shipping-date.pull-left {
display: none;
}
.price.pull-right {
white-space: nowrap;
align-self: center;
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-align: right;
color: $color-black;
margin: 0;
}
}
.fn.product-name {
white-space: normal;
overflow: visible;
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: $color-black-neutra;
align-self: center;
width: 100%;
}
a {
min-width: 60px;
height: 60px;
img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
}
} }
} }
.summary-template-holder { .summary-template-holder {
border-top: none;
background: $color-white; background: $color-white;
border: 1px solid #e5e5e5;
border-top: none;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
box-sizing: border-box;
}
#go-to-cart-button {
margin: 0;
margin-top: 19px;
padding-right: 17px;
} }
#go-to-cart-button a { #go-to-cart-button a {
color: #303030; font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-black-neutra;
text-decoration: underline; text-decoration: underline;
} }
@ -113,19 +208,23 @@
th, th,
td { td {
padding: 0; padding: 0 5px;
text-align: left; text-align: left;
} }
th { th {
color: $color-black; color: $color-black;
padding: 0 0 16px; padding: 0 0 17px;
font-family: $font-family-secundary; font-family: $font-family-secundary;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
&:not(:nth-child(1)):not(:nth-child(4)) {
padding-left: 5px;
}
@include mq(md, max) { @include mq(md, max) {
&.quantity-price, &.quantity-price,
&.shipping-date { &.shipping-date {
@ -172,8 +271,8 @@
img { img {
height: 60px; height: 60px;
max-width: 100%; min-width: 60px;
width: 60px; object-fit: cover;
@include mq(sm, max) { @include mq(sm, max) {
height: 72px; height: 72px;
@ -209,6 +308,7 @@
} }
td.shipping-date { td.shipping-date {
white-space: nowrap;
color: $color-gray6; color: $color-gray6;
font-family: $font-family-secundary; font-family: $font-family-secundary;
font-size: 12px; font-size: 12px;
@ -219,8 +319,10 @@
} }
} }
td.product-price {
white-space: nowrap;
}
.product-price { .product-price {
// min-width: 100px;
@include mq(md, max) { @include mq(md, max) {
min-width: 78px; min-width: 78px;
} }
@ -246,6 +348,23 @@
} }
} }
td.product-price {
vertical-align: middle;
span {
display: flex;
gap: 5px;
margin-top: 2px;
}
br {
display: none;
}
span.new-product-real-price {
display: none;
}
}
td.quantity { td.quantity {
align-items: center; align-items: center;
border: 1px solid $color-gray3; border: 1px solid $color-gray3;
@ -253,7 +372,7 @@
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
justify-content: center; justify-content: center;
margin: 6px 0 0; margin: 13px 0 0;
max-height: 34px; max-height: 34px;
max-width: 118px; max-width: 118px;
padding: 0; padding: 0;
@ -382,7 +501,7 @@
width: max-content; width: max-content;
.srp-container { .srp-container {
padding: 0 0 0 10px; padding: 0;
@include mq(md, max) { @include mq(md, max) {
padding: 0 16px; padding: 0 16px;
@ -459,6 +578,7 @@
outline: none; outline: none;
width: 100%; width: 100%;
font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
font-size: 14px; font-size: 14px;
@ -466,14 +586,6 @@
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
padding: 12px 0; padding: 12px 0;
&:hover {
background-color: lighten($color-black, 5);
}
&:active {
background-color: darken($color-black, 5);
}
} }
} }
@ -526,7 +638,7 @@
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
color: $color-black-neutra; color: $color-black-neutra;
margin-bottom: 12px; margin-bottom: 2px;
} }
input { input {
@ -541,38 +653,47 @@
} }
& ~ button { & ~ button {
font-family: $font-family;
font-weight: 700;
font-size: 14px;
line-height: 19px;
background-color: $color-blue-light; background-color: $color-blue-light;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
color: $color-white; color: $color-white;
font-size: 14px;
height: 36px; height: 36px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
outline: none; outline: none;
position: absolute; position: absolute;
right: -147px; right: -147px;
top: 38px; top: 28px;
transition: all 0.2s linear; transition: all 0.2s linear;
padding: 0 11px; padding: 0 11px;
margin: 0; margin: 0;
vertical-align: middle;
box-shadow: none;
text-shadow: none;
} }
small a { small a {
font-family: $font-family; font-size: 0;
font-style: normal; &::before {
font-weight: normal; content: "Não sei meu código postal";
font-size: 12px; font-family: $font-family-secundary;
line-height: 16px; font-style: normal;
color: $color-black-neutra; font-weight: 400;
margin-top: 4px; font-size: 10px;
line-height: 12px;
color: $color-black-neutra;
margin-top: 4px;
}
} }
span.help.error { span.help.error {
margin: 0;
color: red; color: red;
font-size: 12px; font-size: 12px;
position: absolute;
left: 0; left: 0;
width: 100%; width: 100%;
top: 17px; top: 17px;
@ -643,9 +764,17 @@
&-totalizers { &-totalizers {
padding: 0; padding: 0;
width: 354px; width: 354px;
margin-top: 0;
margin-bottom: 0;
box-sizing: border-box;
div .accordion-group {
margin: 0;
}
.coupon-data { .coupon-data {
text-align: center; text-align: center;
margin-bottom: 10px;
#cart-link-coupon-add { #cart-link-coupon-add {
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -680,8 +809,13 @@
text-decoration: underline; text-decoration: underline;
} }
.coupon-label {
margin: 0;
}
.coupon-label label { .coupon-label label {
margin-bottom: 12px; padding-bottom: 4px;
margin: 0;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
@ -694,6 +828,11 @@
.coupon-fields { .coupon-fields {
margin-bottom: 32px; margin-bottom: 32px;
span {
white-space: nowrap;
box-sizing: border-box;
}
@include mq(sm, max) { @include mq(sm, max) {
span { span {
display: flex; display: flex;
@ -711,11 +850,12 @@
border: 1px solid $color-gray5; border: 1px solid $color-gray5;
border-radius: 5px; border-radius: 5px;
box-shadow: none; box-shadow: none;
box-sizing: border-box;
color: $color-gray7; color: $color-gray7;
font-size: 12px; font-size: 12px;
height: 36px; height: 36px;
padding: 0 16px 0; padding: 0 16px 0;
width: 48.1%; width: 57.6271%;
&::placeholder { &::placeholder {
color: $color-gray7; color: $color-gray7;
@ -742,7 +882,9 @@
text-transform: uppercase; text-transform: uppercase;
margin-left: 15px; margin-left: 15px;
outline: none; outline: none;
width: 37.1%; width: 37.7146%;
box-sizing: border-box;
padding: 0;
text-shadow: none; text-shadow: none;
@include mq(md, max) { @include mq(md, max) {
@ -763,7 +905,7 @@
&.info, &.info,
&.monetary { &.monetary {
font-family: $font-family-secundary; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 14px; font-size: 14px;
@ -792,7 +934,7 @@
line-height: 24px; line-height: 24px;
color: $color-black; color: $color-black;
padding: 0; padding: 0;
padding: 14px 0 3px; padding: 14px 0 17px;
} }
} }
} }
@ -802,7 +944,7 @@
.cart-links-bottom { .cart-links-bottom {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 352px; width: 354px;
@include mq(md, max) { @include mq(md, max) {
padding: 0 16px; padding: 0 16px;

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

@ -7,5 +7,91 @@ body .container-main.container-order-form .orderform-template.active {
} }
.orderform-template-holder { .orderform-template-holder {
width: 66.1132%; width: 66.1132%;
margin-top: 0;
}
}
.cart-template.mini-cart.span4
.cart-fixed
.summary-template-holder
.row-fluid
.summary-totalizers
div
.accordion-group
.accordion-body
.accordion-inner
table {
.totalizers-list tr {
border-top: 1px solid #e0e0e0;
.monetary,
.info {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray2;
padding: 25px 0;
box-sizing: border-box;
}
.monetary {
padding-right: 17px;
}
.info {
padding-left: 17px;
}
}
tfoot tr {
border-top: 1px solid #e0e0e0;
td {
padding: 30px 0 22px;
}
.info,
.monetary {
font-family: $font-family;
font-style: normal;
font-weight: 700;
color: $color-black;
box-sizing: border-box;
}
.info {
font-size: 18px;
line-height: 25px;
padding-left: 17px;
}
.monetary {
font-size: 14px;
line-height: 19px;
padding-right: 17px;
}
}
}
.cart-template.mini-cart.span4 .cart-fixed .payment-confirmation-wrap {
.payment-submit-wrap {
#payment-data-submit {
margin-top: 20px;
padding: 12px 0 11px;
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;
border-radius: 8px;
background: #298541;
i {
display: none;
}
}
} }
} }

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

@ -72,7 +72,7 @@ body {
font-weight: 700; font-weight: 700;
font-size: 24px; font-size: 24px;
line-height: 33px; line-height: 33px;
margin: 17px 0 16px; margin: 17px 0 17px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;

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

@ -107,13 +107,13 @@
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
no-repeat center center; no-repeat center center;
z-index: 4; z-index: 4;
left: 10px; left: 20px;
} }
.slick-next { .slick-next {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
no-repeat center center; no-repeat center center;
z-index: 4; z-index: 4;
right: 18px; right: 20px;
} }
.slick-arrow.slick-hidden { .slick-arrow.slick-hidden {
display: none; display: none;

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

@ -121,6 +121,7 @@
line-height: 38px; line-height: 38px;
text-align: center; text-align: center;
color: $color-black-neutra; color: $color-black-neutra;
margin-bottom: 20px;
} }
.sliderPratileira { .sliderPratileira {
@ -132,8 +133,8 @@
.card-list-pratileira { .card-list-pratileira {
list-style-type: none; list-style-type: none;
min-width: 242px; width: 242px;
height: 390px; height: max-content;
display: flex; display: flex;
align-items: center; align-items: center;
@ -153,10 +154,13 @@
font-weight: 400; font-weight: 400;
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
height: 18px;
text-align: center; text-align: center;
color: $color-black-neutra; color: $color-black-neutra;
margin: 20px 0; margin: 20px 0;
overflow-y: scroll;
word-wrap: break-word;
} }
} }
@ -181,6 +185,15 @@
line-height: 18px; line-height: 18px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
overflow-y: scroll;
word-wrap: break-word;
max-height: 28px;
min-width: 2.2ch;
&::-webkit-scrollbar {
display: none;
}
} }
} }
@ -213,12 +226,9 @@
} }
.slick-track { .slick-track {
display: flex; display: flex;
// left: 13.5%; gap: 16px;
// width: 1016px; justify-content: center;
} left: -0.2%;
.slick-slide {
margin-right: 16px;
} }
} }
} }