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

feat: cria telas mobile

Browse Source
This commit is contained in:
Saulo Klein Nery 2022-12-18 03:32:34 -03:00
parent a0740e8e2f
commit 6a9204c926
5 changed files with 279 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -124,32 +124,22 @@
} }
.product-image { .product-image {
height: auto; height: 60px;
object-fit: cover;
padding: 0; padding: 0;
max-width: 100%;
width: 60px; width: 60px;
@include mq(sm, max) {
width: 72px;
}
img { img {
height: 60px; height: 60px;
max-width: 100%; max-width: 100%;
width: auto; width: auto;
@include mq(sm, max) {
height: 72px;
width: auto;
}
} }
} }
.product-name { .product-name {
padding-right: 0; padding-right: 0;
width: 250px;
@include mq(lg, max) {
width: 250px;
}
a { a {
color: #4267b2; color: #4267b2;

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

@ -1,15 +1,31 @@
.checkout-container { .checkout-container {
.orderform-template { .orderform-template {
.orderform-template-holder { @include mq(mobile, max) {
width: 66%; flex-direction: column;
}
.orderform-template-holder {
.row-fluid { .row-fluid {
position: relative; position: relative;
@include mq(mobile, max) {
display: flex;
flex-direction: column;
}
.client-profile-data { .client-profile-data {
@include mq(mobile, max) {
width: 100%;
margin-bottom: 10px;
}
.client-profile-data.filled { .client-profile-data.filled {
max-width: 331px; max-width: 331px;
@include mq(mobile, max) {
max-width: -webkit-fill-available;
}
.accordion-heading { .accordion-heading {
.accordion-toggle { .accordion-toggle {
margin-bottom: 25px; margin-bottom: 25px;
@ -81,6 +97,11 @@
.payment-data { .payment-data {
position: static; position: static;
@include mq(mobile, max) {
width: 100%;
margin: 0;
}
.accordion-group { .accordion-group {
&.active { &.active {
padding: 24px 17px 36px; padding: 24px 17px 36px;
@ -132,6 +153,10 @@
margin: 0; margin: 0;
position: static; position: static;
@include mq(mobile, max) {
width: 100%;
}
.payment-group-list-btn { .payment-group-list-btn {
width: 100%; width: 100%;
@ -232,6 +257,12 @@
.steps-view { .steps-view {
flex: 1; flex: 1;
margin-left: 40px; margin-left: 40px;
@include mq(mobile, max) {
margin: 0;
width: 100%;
max-width: -webkit-fill-available;
}
} }
} }
} }
@ -247,6 +278,10 @@
} }
.shipping-data { .shipping-data {
@include mq(mobile, max) {
width: 100%;
}
.shipping-data.active { .shipping-data.active {
.accordion-heading { .accordion-heading {
span { span {
@ -350,27 +385,17 @@
padding: 14px 12px 12px; padding: 14px 12px 12px;
.vtex-omnishipping-1-x-leanShippingIcon { .vtex-omnishipping-1-x-leanShippingIcon {
display: flex;
align-items: center;
justify-content: center;
margin-right: 8px; margin-right: 8px;
width: 18px; width: 18px;
height: 18px; height: 18px;
border: 1px solid #c4c4c4; border: 1px solid #c4c4c4;
border-radius: 3px; border-radius: 3px;
svg { .vtex-omnishipping-1-x-svg {
opacity: 0; display: none;
}
&.active {
display: flex;
align-items: center;
justify-content: center;
&::before {
background: #00c8ff;
border-radius: 3px;
width: 12px;
height: 12px;
}
} }
} }
@ -393,6 +418,16 @@
color: #7d7d7d; color: #7d7d7d;
} }
} }
.vtex-omnishipping-1-x-leanShippingOptionActive {
.vtex-omnishipping-1-x-leanShippingIcon::before {
content: "";
width: 12px;
height: 12px;
background-color: #00c8ff;
border-radius: 3px;
}
}
} }
} }
@ -407,16 +442,35 @@
} }
.vtex-omnishipping-1-x-addressSummary { .vtex-omnishipping-1-x-addressSummary {
position: relative;
.address-summary { .address-summary {
padding-left: 47px;
border: 1px solid #e0e0e0; border: 1px solid #e0e0e0;
border-radius: 8px; border-radius: 8px;
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
color: #7d7d7d; color: #7d7d7d;
position: relative;
margin-bottom: 15px; margin-bottom: 15px;
&::before {
content: "";
width: 21px;
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
height: 20px;
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png");
background-repeat: no-repeat;
background-size: contain;
}
.vtex-omnishipping-1-x-linkEdit { .vtex-omnishipping-1-x-linkEdit {
position: absolute;
right: 15px;
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;

85
checkout/src/arquivos/sass/partials/_autenticacao.scss
View File

@ -32,6 +32,8 @@
.orderform-template-holder { .orderform-template-holder {
margin-bottom: 14px; margin-bottom: 14px;
width: 100%;
max-width: -webkit-fill-available;
} }
#orderform-title { #orderform-title {
@ -45,6 +47,11 @@
font-size: 24px; font-size: 24px;
line-height: 33px; line-height: 33px;
@include mq(mobile, max) {
margin: 0;
padding-left: 16px;
}
&.border { &.border {
border-bottom: 1px solid $black-500; border-bottom: 1px solid $black-500;
} }
@ -56,11 +63,19 @@
padding: 0 121px; padding: 0 121px;
margin-bottom: 125px; margin-bottom: 125px;
@include mq(mobile, max) {
padding: 0 16px;
}
.form-page.client-pre-email.anim-death.anim-current { .form-page.client-pre-email.anim-death.anim-current {
position: absolute; position: absolute;
width: 100%; width: 100%;
left: 0; left: 0;
padding-bottom: 100px; padding-bottom: 100px;
@include mq(mobile, max) {
padding-bottom: 345px;
}
} }
&.dados-pessoais { &.dados-pessoais {
@ -81,6 +96,11 @@
line-height: 16px; line-height: 16px;
text-transform: uppercase; text-transform: uppercase;
color: $black-500; color: $black-500;
@include mq(mobile, max) {
font-size: 10px;
line-height: 12px;
}
} }
} }
@ -99,6 +119,16 @@
font-size: 20px; font-size: 20px;
line-height: 23px; line-height: 23px;
text-transform: uppercase; text-transform: uppercase;
@include mq(tablet, max) {
font-size: 12px;
line-height: 14px;
}
@include mq(mobile, max) {
font-size: 14px;
line-height: 16px;
}
} }
small { small {
@ -107,6 +137,16 @@
line-height: 23px; line-height: 23px;
text-transform: uppercase; text-transform: uppercase;
color: $black-500; color: $black-500;
@include mq(tablet, max) {
font-size: 12px;
line-height: 14px;
}
@include mq(mobile, max) {
font-size: 14px;
line-height: 16px;
}
} }
} }
} }
@ -116,6 +156,10 @@
margin-bottom: 24px; margin-bottom: 24px;
margin-left: 0; margin-left: 0;
@include mq(mobile, max) {
width: 100%;
}
.input-block-level { .input-block-level {
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
@ -163,6 +207,7 @@
border: 1px solid $black-500; border: 1px solid $black-500;
border-radius: 5px; border-radius: 5px;
padding: 16px 16px 26px; padding: 16px 16px 26px;
max-width: -webkit-fill-available;
h3 { h3 {
font-weight: 700; font-weight: 700;
@ -189,6 +234,7 @@
.step.accordion-group.client-profile-data.active { .step.accordion-group.client-profile-data.active {
border: 1px solid $gray-300; border: 1px solid $gray-300;
max-width: -webkit-fill-available;
padding: 24px 17px 44px; padding: 24px 17px 44px;
border-radius: 8px; border-radius: 8px;
margin-bottom: 0; margin-bottom: 0;
@ -217,9 +263,19 @@
.accordion-body { .accordion-body {
p { p {
@include mq(mobile, max) {
width: 100%;
max-width: -webkit-fill-available;
}
&.client-email { &.client-email {
width: 100%; width: 100%;
margin-bottom: 16px; margin-bottom: 16px;
@include mq(mobile, max) {
position: absolute;
bottom: 100%;
}
} }
&.client-document { &.client-document {
@ -234,6 +290,12 @@
} }
} }
&.client-last-name {
@include mq(mobile, max) {
margin-right: 15px;
}
}
&.client-first-name, &.client-first-name,
&.client-last-name { &.client-last-name {
display: flex; display: flex;
@ -277,12 +339,26 @@
flex-wrap: wrap; flex-wrap: wrap;
gap: 15px; gap: 15px;
@include mq(mobile, max) {
margin: 64px 0 0px;
display: grid;
grid-template-columns: repeat(2, 50%);
width: 100%;
position: relative;
}
.client-notice { .client-notice {
display: none; display: none;
} }
div { div {
width: 46%; width: 46%;
@include mq(mobile, max) {
width: 100%;
max-width: -webkit-fill-available;
margin-right: 15px;
}
} }
} }
@ -447,6 +523,11 @@
border-radius: 8px; border-radius: 8px;
height: 427px; height: 427px;
@include mq(mobile, max) {
margin: 0;
width: 100%;
}
@include mq(1100, min) { @include mq(1100, min) {
min-width: 331px; min-width: 331px;
} }
@ -456,6 +537,10 @@
height: auto !important; height: auto !important;
padding: 24px 0px 22px; padding: 24px 0px 22px;
.summary-cart-template-holder {
height: auto !important;
}
h2 { h2 {
font-weight: 400; font-weight: 400;
display: block; display: block;

119
checkout/src/arquivos/sass/partials/_menu.scss
View File

@ -33,6 +33,11 @@
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: $black-400; color: $black-400;
@include mq(mobile, max) {
margin: 17px 0;
padding-left: 16px;
}
} }
.hide-cart-title { .hide-cart-title {
@ -123,12 +128,20 @@
} }
.cart-template-holder { .cart-template-holder {
@include mq(mobile, max) {
margin: 0;
}
.cart { .cart {
margin: 0; margin: 0;
border: 1px solid $gray-100; border: 1px solid $gray-100;
border-radius: 5px; border-radius: 5px;
padding: 16px 29px 16px 16px; padding: 16px 29px 16px 16px;
@include mq(mobile, max) {
padding: 16px 16px 15px;
}
.cart-items { .cart-items {
thead { thead {
font-weight: 400; font-weight: 400;
@ -137,6 +150,10 @@
font-family: $font-family-secundary; font-family: $font-family-secundary;
color: $black-400; color: $black-400;
@include mq(mobile, max) {
display: none;
}
th { th {
padding-bottom: 17px; padding-bottom: 17px;
text-align: left; text-align: left;
@ -172,6 +189,45 @@
text-align: left; text-align: left;
} }
.product-item {
@include mq(mobile, max) {
margin: 0;
position: relative;
display: block;
}
}
.product-image {
@include mq(mobile, max) {
left: 0;
position: absolute;
}
}
.product-price {
@include mq(mobile, max) {
margin: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
float: right;
position: static;
}
br {
@include mq(mobile, max) {
display: none;
}
}
}
.shipping-date {
@include mq(mobile, max) {
display: none;
}
}
.product-name a, .product-name a,
.shipping-estimate-date, .shipping-estimate-date,
.list-price { .list-price {
@ -185,6 +241,23 @@
color: $gray-500; color: $gray-500;
} }
.product-name {
@include mq(mobile, max) {
position: static;
width: 250px;
padding: 0 0 11px !important;
margin-left: 76px;
display: block;
}
a {
@include mq(mobile, max) {
margin: 0;
display: block;
}
}
}
.product-name a, .product-name a,
input { input {
color: $black-500; color: $black-500;
@ -206,6 +279,21 @@
display: flex; display: flex;
} }
.quantity-price {
@include mq(mobile, max) {
display: none;
}
}
.item-remove .item-link-remove .item-remove-ico {
@include mq(mobile, max) {
position: absolute;
top: 0;
right: 0;
transform: translateY(calc(100% - 5px));
}
}
.quantity { .quantity {
padding: 0 11px; padding: 0 11px;
margin: 0; margin: 0;
@ -213,6 +301,14 @@
border: 1px solid $gray-300; border: 1px solid $gray-300;
border-radius: 8px; border-radius: 8px;
@include mq(mobile, max) {
margin-left: 76px !important;
max-width: 99px;
justify-content: space-between;
transform: none;
width: 35% !important;
}
.item-quantity-change { .item-quantity-change {
background-color: $blue-500; background-color: $blue-500;
width: 16px; width: 16px;
@ -276,6 +372,10 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@include mq(mobile, max) {
flex-direction: column;
}
&::before, &::before,
&::after { &::after {
display: none; display: none;
@ -284,6 +384,10 @@
.cart-more-options { .cart-more-options {
margin: 0 0 0 128px; margin: 0 0 0 128px;
@include mq(mobile, max) {
margin: 0 0 48px;
}
.srp-content { .srp-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -438,6 +542,11 @@
.cart-totalizers { .cart-totalizers {
margin: 0 128px 0 0; margin: 0 128px 0 0;
@include mq(mobile, max) {
width: 100%;
padding: 0 16px 0 17px;
}
.coupon-fieldset { .coupon-fieldset {
.coupon-label { .coupon-label {
font-weight: 400; font-weight: 400;
@ -523,7 +632,7 @@
.totalizers-list { .totalizers-list {
td { td {
padding: 0 0 10px 0; padding: 10px 0 10px 0;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
@ -557,6 +666,14 @@
padding: 0; padding: 0;
align-self: flex-end; align-self: flex-end;
@include mq(mobile, max) {
display: flex;
width: 100%;
margin: 0;
max-width: -webkit-fill-available;
padding: 0 15px 0 16px;
}
.link-choose-more-products-wrapper { .link-choose-more-products-wrapper {
margin: 17px 0 15px; margin: 17px 0 15px;

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

@ -33,6 +33,7 @@ $grid-breakpoints: (
cstm: 400, cstm: 400,
sm: 375px, sm: 375px,
md: 478px, md: 478px,
tablet: 768px,
lg: 992px, lg: 992px,
mobile: 1025px, mobile: 1025px,
xl: 1200px, xl: 1200px,