anacarolinaduartecavalcante/m3-academy-template-checkout-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: correção de estilos das páginas (finalizar compra)

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2022-12-22 08:29:21 -03:00
parent 6ccd2a1a64
commit fc93e256fd
3 changed files with 493 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,7 +18,7 @@
}
}
.row-fluid.summary{
.row-fluid.summary {
display: block;
}
@ -122,7 +122,6 @@
}
}
.client-email {
margin: 0 0 16px;
@media (min-width: $checkout2500px) {
@ -339,9 +338,18 @@
.accordion-heading {
span {
color: #303030;
font-family: "Tenor Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: #292929;
margin-bottom: 8px;
padding: 0;
@media (min-width: $checkout2500px) {
font-size: 32px;
line-height: 37px;
}
}
a {
@ -365,6 +373,10 @@
background-size: 100%;
border: none;
cursor: pointer;
@media (min-width: $checkout2500px) {
width: 39.24px;
height: 40.58px;
}
}
}
}
@ -388,6 +400,10 @@
line-height: 19px;
color: $color-gray7;
margin-bottom: 1px;
@media (min-width: $checkout2500px) {
font-size: 28px;
line-height: 38px;
}
}
select,
@ -430,14 +446,28 @@
&:active {
background: darken($color-black, 5);
}
@media (min-width: $checkout2500px) {
height: 61px;
font-size: 28px;
line-height: 38px;
}
}
/* Shipping configurations */
.ship-postalCode small a {
color: #303030;
font-weight: 500;
text-decoration: underline;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-decoration-line: underline;
color: $color-black;
text-decoration-line: underline;
@media (min-width: $checkout2500px) {
font-size: 24px;
line-height: 33px;
}
}
.vtex-omnishipping-1-x-deliveryGroup {
@ -478,8 +508,17 @@
background: none;
border-color: $color-gray4;
border-radius: 0;
color: #303030;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #7d7d7d;
padding: 12px;
@media (min-width: $checkout2500px) {
font-size: 24px;
line-height: 33px;
}
@include mq(md, max) {
background-position: 8px 9px;
@ -495,6 +534,16 @@
.shp-summary-group-price,
.shp-summary-package {
color: $color-gray4;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.05em;
@media (min-width: $checkout2500px) {
font-size: 24px;
line-height: 33px;
}
}
.shp-summary-group-price {
@ -541,6 +590,10 @@
font-size: 12px;
line-height: 16px;
color: $color-gray7 !important;
@media (min-width: $checkout2500px) {
font-size: 24px;
line-height: 33px;
}
}
}
}
@ -552,6 +605,10 @@
}
}
span.shipping-date.pull-left {
display: none;
}
.step.accordion-group.client-profile-data.active {
& .accordion-heading {
& span:nth-child(2n) {
@ -569,11 +626,54 @@
font-size: 16px;
line-height: 19px;
color: $color-black;
@media (min-width: $checkout2500px) {
font-size: 32px;
line-height: 37px;
}
}
}
}
}
.checkout-container .client-profile-data .accordion-group .accordion-heading span:nth-child(2n) {
margin-bottom: 36px;
padding: 0;
font-size: 0;
position: relative;
&::after {
content: "Identificação";
position: absolute;
font-family: "Tenor Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: $color-black;
@media (min-width: $checkout2500px) {
font-size: 32px;
line-height: 37px;
}
}
}
.box-info {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-gray7;
top: 0;
position: relative;
@media (min-width: $checkout2500px) {
font-size: 24px;
line-height: 33px;
}
@media (max-width: $checkout1024px) {
top: 0;
}
}
a#is-corporate-client {
display: none;
}
@ -582,6 +682,10 @@ input#opt-in-newsletter {
width: 18px;
height: 18px;
margin-right: 8px;
@media (min-width: $checkout2500px) {
width: 34.95px;
height: 34.95px;
}
}
span.newsletter-text {
@ -591,6 +695,10 @@ span.newsletter-text {
font-size: 12px;
line-height: 16px;
color: $color-gray9;
@media (min-width: $checkout2500px) {
font-size: 24px;
line-height: 33px;
}
}
p.notification {
@ -600,11 +708,19 @@ p.notification {
font-size: 14px;
line-height: 19px;
color: $color-gray7;
@media (min-width: $checkout2500px) {
font-size: 28px;
line-height: 38px;
}
}
.step.accordion-group.client-profile-data.filled {
@media (max-width: $checkout1024px) {
width: 100%;
width: 93%;
}
@media (max-width: $checkout375px) {
margin-left: 16px;
margin-right: 16px;
}
}
@ -612,24 +728,60 @@ input#client-last-name,
input#client-document,
input#client-phone {
width: 100%;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #bdbdbd;
@media (max-width: $checkout375px) {
width: 89% !important;
}
@media (min-width: $checkout2500px) {
font-size: 28px;
line-height: 38px;
}
}
input#client-document,input#client-phone{
input#client-last-name {
@media (max-width: $checkout1024px) {
height: 32.1px;
}
}
@media (min-width: $checkout2500px) {
height: 34.1px;
}
}
input#client-last-name{
input#client-document,
input#client-phone {
@media (max-width: $checkout1024px) {
height: 32.1px;
}
}
@media (min-width: $checkout2500px) {
height: 34.1px;
}
}
input#client-document {
width: 92%;
@media (max-width: $checkout1024px) {
width: 96%;
}
}
input#client-last-name {
@media (max-width: $checkout1024px) {
height: 32.1px;
}
}
input#client-first-name {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #bdbdbd;
@media (max-width: $checkout1024px) {
width: 96%;
height: 32.1px;
@ -637,15 +789,21 @@ input#client-first-name {
@media (max-width: $checkout375px) {
width: 89% !important;
}
@media (min-width: $checkout2500px) {
font-size: 28px;
line-height: 38px;
height: 32.1px;
width: 92%;
}
}
p.client-first-name.input.pull-left.text.required,p.client-document.input.pull-left.text.required.mask{
p.client-first-name.input.pull-left.text.required,
p.client-document.input.pull-left.text.required.mask {
@media (max-width: $checkout375px) {
margin-right: 15.21px !important;
}
}
p.client-first-name.input.pull-left.text.required,
p.client-last-name.input.pull-left.text.required {
width: 46%;
@ -653,19 +811,18 @@ p.client-last-name.input.pull-left.text.required {
width: 49%;
margin-bottom: 17px;
}
@media (max-width: 767px) {
width: 46%;
}
@media (max-width: 490px) {
width: 46%;
margin-bottom: 17px;
}
@media (max-width: $checkout375px) {
width: 47.5%;
}
}
input#client-document{
width: 92%;
@media (max-width: $checkout1024px) {
width: 96%;
}
}
p.client-document.input.pull-left.text.required.mask,
p.client-phone.input.pull-left.text.required.mask {
width: 46%;
@ -674,12 +831,20 @@ p.client-phone.input.pull-left.text.required.mask {
width: 49%;
margin-bottom: 17px;
}
@media (max-width: $checkout375px) {
@media (max-width: 767px) {
width: 46%;
margin-bottom: 17px;
}
@media (max-width: 490px) {
width: 46%;
margin-bottom: 17px;
}
@media (max-width: $checkout375px) {
width: 47.5%;
}
}
p.client-email.input.text.required{
p.client-email.input.text.required {
@media (max-width: $checkout1024px) {
margin-bottom: 17px;
}
@ -692,10 +857,22 @@ p.submit.btn-submit-wrapper {
}
}
fieldset.box-client-info-pj{
fieldset.box-client-info-pj {
display: none;
}
@media (max-width: 767px) {
.input-large,
.input-xlarge,
.input-xxlarge,
input[class*="span"],
select[class*="span"],
textarea[class*="span"],
.uneditable-input {
max-width: none;
}
}
.orderform-template-holder .client-profile-data .pull-left {
@media (max-width: $checkout375px) {
float: left !important;
@ -709,9 +886,14 @@ div#client-profile-data {
}
}
input#client-email {
width: 96%;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #bdbdbd;
@media (max-width: $checkout1024px) {
width: 99%;
height: 32.1px;
@ -719,6 +901,11 @@ input#client-email {
@media (max-width: $checkout375px) {
width: 99%;
}
@media (min-width: $checkout2500px) {
font-size: 28px;
line-height: 38px;
height: 32.1px;
}
}
.client-pre-email .emailInfo .icon-lock {
@ -756,6 +943,11 @@ span.quantity.badge {
font-size: 12px;
line-height: 14px;
color: $color-black2;
@media (min-width: $checkout2500px) {
font-size: 24px;
line-height: 28px;
padding: 0;
}
}
.cart-template .cart-fixed .cart {
@ -776,8 +968,8 @@ span.quantity.badge {
line-height: 19px;
color: $color-black !important;
margin-left: 0;
// top: 24px;
padding-top: 24px;
padding-left: 17px;
position: relative;
}
@ -797,6 +989,10 @@ a#orderform-minicart-to-cart {
bottom: 34px;
position: relative;
cursor: pointer;
@media (min-width: $checkout2500px) {
font-size: 24px;
line-height: 33px;
}
}
span.fn.product-name {
@ -814,6 +1010,20 @@ span.fn.product-name {
text-align: right;
color: #292929;
white-space: nowrap;
@media (min-width: $checkout2500px) {
font-size: 24px;
line-height: 33px;
}
}
.summary-cart-template-holder.cart-fixed-transition {
height: 60px !important;
@media (min-width: $checkout2500px) {
height: 116.5px !important;
}
@media (max-width: $checkout1024px) {
height: 120px !important;
}
}
li.hproduct.item.muted {
@ -857,6 +1067,10 @@ td.info {
.cart-template .cart-fixed {
width: 98.2%;
@media (max-width: $checkout1024px) {
width: 96.5% !important;
margin-top: 17px;
}
}
td.monetary {
@ -865,17 +1079,35 @@ td.monetary {
}
.cart-fixed.cart-fixed-transition.affix-top {
height: auto !important;
height: auto;
height: 397px !important;
@media (max-width: $checkout1024px) {
height: 390px !important;
}
@media (min-width: $checkout2500px) {
height: 397px !important;
}
border: 1px solid #e5e5e5;
border-radius: 8px;
}
li.hproduct.item.muted {
a {
img {
height: 60px;
width: 60px;
object-fit: cover;
@media (min-width: $checkout2500px) {
width: 116.5px;
height: 116.5px;
}
}
}
}
.btn-block + .btn-block {
margin-top: 20px;
margin-top: 66px;
}
.payment-confirmation-wrap {
@ -896,6 +1128,12 @@ button#shipping-option-delivery {
color: #41115d;
width: 148px !important;
height: 36px !important;
@media (min-width: $checkout2500px) {
width: 286.5px !important;
height: 55px !important;
font-size: 28px;
line-height: 38px;
}
}
button#shipping-option-pickup-in-point {
@ -906,7 +1144,11 @@ button#shipping-option-pickup-in-point {
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
color: #c4c4c4;
color: $color-gray8;
@media (min-width: $checkout2500px) {
font-size: 28px;
line-height: 38px;
}
}
p.input.ship-postalCode.required.text {
@ -919,12 +1161,27 @@ p.input.ship-postalCode.required.text {
font-size: 12px;
line-height: 16px;
color: $color-gray7;
@media (min-width: $checkout2500px) {
font-size: 24px;
line-height: 33px;
}
}
}
.checkout-container .shipping-data .accordion-group .accordion-inner p input {
width: 95.5% !important;
height: 35.01px !important;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #bdbdbd;
@media (min-width: $checkout2500px) {
height: 45px !important;
font-size: 28px;
line-height: 38px;
}
}
p.vtex-omnishipping-1-x-shippingSectionTitle {
@ -934,6 +1191,10 @@ p.vtex-omnishipping-1-x-shippingSectionTitle {
font-size: 14px !important;
line-height: 19px;
color: $color-gray7 !important;
@media (min-width: $checkout2500px) {
font-size: 28px !important;
line-height: 38px !important;
}
}
span.shipping-date.pull-left {
@ -947,6 +1208,11 @@ label.vtex-omnishipping-1-x-leanShippingOption {
center;
width: 18px;
height: 18px;
@media (min-width: $checkout2500px) {
width: 34.95px;
height: 34.95px;
background-size: 34.95px;
}
svg path {
display: none;
}
@ -958,6 +1224,11 @@ label.vtex-omnishipping-1-x-leanShippingOptionActive {
center center;
width: 18px;
height: 18px;
@media (min-width: $checkout2500px) {
width: 34.95px;
height: 34.95px;
background-size: 34.95px;
}
svg path {
display: none;
}
@ -982,6 +1253,10 @@ label.vtex-omnishipping-1-x-leanShippingOptionActive {
line-height: 16px;
letter-spacing: 0.05em;
color: $color-gray7 !important;
@media (min-width: $checkout2500px) {
font-size: 24px;
line-height: 33px;
}
}
label#FASTEST {
@ -998,6 +1273,10 @@ span.state {
font-size: 12px;
line-height: 16px;
color: $color-gray7;
@media (min-width: $checkout2500px) {
font-size: 24px;
line-height: 33px;
}
}
a#force-shipping-fields {
@ -1035,6 +1314,10 @@ p.input.ship-receiverName.required.text label {
line-height: 16px !important;
letter-spacing: 0.05em;
color: $color-gray7 !important;
@media (min-width: $checkout2500px) {
font-size: 24px !important;
line-height: 33px !important;
}
}
a#force-shipping-fields {
@ -1069,6 +1352,10 @@ span.accordion-toggle.collapsed.accordion-toggle-active span {
line-height: 24px;
letter-spacing: -0.01em;
color: $color-black;
@media (min-width: $checkout2500px) {
font-size: 32px;
line-height: 37px;
}
}
.cart-template .cart-fixed #payment-data-submit {
@ -1083,6 +1370,12 @@ span.accordion-toggle.collapsed.accordion-toggle-active span {
letter-spacing: 0.05em;
text-transform: uppercase;
color: $color-white;
height: 42px;
@media (min-width: $checkout2500px) {
height: 61px;
font-size: 28px;
line-height: 38px;
}
}
p.card-flags.active {
@ -1093,6 +1386,39 @@ p.card-flags.active {
form.form-step.box-new.row-fluid {
top: 37px;
position: relative;
@media (max-width: $checkout1024px) {
top: 0;
}
&::before {
content: "Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 24px;
letter-spacing: -0.01em;
color: $color-gray7;
bottom: 16px;
position: relative;
@media (min-width: $checkout2500px) {
font-size: 28px;
line-height: 48px;
}
@media (max-width: $checkout1024px) {
top: 12px;
margin-bottom: 24px;
}
@media (max-width: $checkout375px) {
margin-bottom: 50px;
}
}
}
fieldset.payment-group {
@media (max-width: $checkout1024px) {
display: flex;
justify-content: center;
}
}
.steps-view {
@ -1127,30 +1453,106 @@ p.PaymentCardHolderDocument.input.text.required.mask {
a {
background: $color-gray3;
mix-blend-mode: normal;
opacity: 0.3;
border: 1px solid $color-black2;
border-radius: 6px;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 24px;
padding: 11.2px 23.1px;
color: #58595b;
margin-bottom: 12px;
text-align: center;
letter-spacing: -0.01em;
color: transparent;
@media (min-width: $checkout2500px) {
padding: 13px 94px;
width: 216.1px;
}
& span {
opacity: unset;
color: #58595b;
padding: 0;
}
&:active,
&:focus {
background: rgba(220, 221, 227, 0.3);
mix-blend-mode: normal;
border: 1px solid #f15a31;
cursor: pointer;
text-align: center;
letter-spacing: -0.01em;
color: #f15a31;
text-decoration: none;
}
}
}
.payment-group-item-text {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 24px;
opacity: unset;
letter-spacing: -0.01em;
white-space: nowrap;
@media (min-width: $checkout2500px) {
font-size: 28px !important;
line-height: 24px !important;
}
}
.steps-view {
width: 55.9%;
@media (min-width: $checkout2500px) {
width: 57.6%;
}
@media (max-width: $checkout1024px) {
width: 96.5%;
}
}
.payment-group-item {
width: 95.91%;
}
ul.cart-items.unstyled.clearfix {
display: flex;
flex-direction: column;
}
li.hproduct.item.muted {
top: 0;
bottom: 0;
}
#payment-group-bankInvoicePaymentGroup .payment-group-item-text,
#payment-group-creditCardPaymentGroup .payment-group-item-text {
background-image: none;
}
.payment-group-list-btn {
@media (max-width: $checkout1024px) {
width: 96%;
}
@media (max-width: 767px) {
width: 96% !important;
}
}
.payment-data .payment-group {
@media (max-width: 767px) {
margin-left: 0px !important;
margin-right: 0px !important;
}
}
.payment-data .payment-group a {
@media (max-width: 767px) {
width: 88.31% !important;
}
}
.box-client-info-pf {
@media (max-width: 767px) {
margin-right: 0;
}
}
.vtex-omnishipping-1-x-addressFormPart1 input {
max-width: none !important;
}
@ -1169,6 +1571,9 @@ body .container-main.container-order-form .orderform-template.active .mini-cart
@media (max-width: $checkout1024px) {
width: 100%;
}
@media (max-width: $checkout375px) {
width: 95%;
}
}
body .container-main.container-order-form .orderform-template.active .orderform-template-holder {
@ -1185,7 +1590,19 @@ p.input.ship-country.text {
width: 100%;
}
// área do carrinho
.table {
@media (max-width: $checkout1024px) {
width: 100%;
}
}
.step.accordion-group.store-country-BRA.active {
@media (max-width: $checkout1024px) {
margin-left: 16px;
margin-right: 16px;
}
}
.row-fluid {
@media (max-width: $checkout1024px) {
display: flex;
@ -1200,6 +1617,8 @@ p.input.ship-country.text {
.step.accordion-group.shipping-data {
@media (max-width: $checkout1024px) {
margin-bottom: 17px;
margin-left: 16px;
margin-right: 16px;
}
& .accordion-heading {
& a {
@ -1221,6 +1640,8 @@ p.input.ship-country.text {
.step.accordion-group.store-country-BRA.filled {
@media (max-width: $checkout1024px) {
margin-bottom: 17px;
margin-left: 16px;
margin-right: 16px;
}
}
}

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

@ -26,7 +26,7 @@
}
@media (max-width: $checkout1024px) {
height: 91px;
height: auto;
display: flex;
justify-content: space-between;
position: relative;
@ -48,13 +48,17 @@
}
.cart-fixed {
font-family: $font-family;
width: 100%;
// width: 100%;
h2 {
background: $color-white;
border: none;
color: #303030;
font-size: 14px;
font-weight: 500;
@media (min-width: $checkout2500px) {
font-size: 32px !important;
line-height: 37px;
}
}
.item-unavailable {
@ -116,6 +120,9 @@
&:active {
background: darken($color-black, 5);
}
& i.icon-lock {
display: none;
}
}
}
@ -169,7 +176,8 @@
img {
height: 60px;
max-width: 100%;
width: auto;
width: 60px;
object-fit: cover;
@include mq(sm, max) {
height: 72px;
width: auto;
@ -192,11 +200,12 @@
padding-left: 31px;
}
@media (max-width: $checkout1024px) {
left: 145px;
left: 71px;
position: absolute;
}
@media (max-width: $checkout375px) {
width: auto;
left: 145px;
margin: 0;
}
@ -524,7 +533,6 @@
}
.summary {
// display: block;
.cart-more-options {
margin: 0;
width: max-content;
@ -764,7 +772,6 @@
width: 120px;
height: 36px;
right: -213px;
}
&:hover {
background-color: lighten($color-black, 5);
@ -877,7 +884,7 @@
@media (min-width: $checkout2500px) {
width: 688.35px;
}
// aqui
@media (max-width: $checkout1024px) {
width: 97%;
display: flex !important;
@ -1207,6 +1214,17 @@
}
}
}
[class*="span"].pull-right, .row-fluid [class*="span"].pull-right{
@media (max-width: $checkout1024px) {
float: none;
}
@media (max-width: $checkout375px) {
float: none;
margin-left: 0;
}
}
.muted {
color: $color-gray6;
}
@ -1353,6 +1371,7 @@ th.quantity {
}
.full-cart .cart table tbody tr td.product-name {
padding-left: 16px;
@media (max-width: $checkout375px) {
margin: 0;
width: 0;
@ -1409,6 +1428,6 @@ th.product {
}
.full-cart .cart table tbody tr td.quantity input {
@media (max-width: $checkout375px) {
margin: 0 20px;
margin: 0 20px;
}
}

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

@ -4,6 +4,10 @@ body .container-main.container-order-form .orderform-template.active {
margin-left: unset;
margin-right: 0;
float: right;
@media (max-width: $checkout1024px) {
float: none;
margin-left: 16px;
}
}
.orderform-template-holder {
width: 66.1132%;