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

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

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

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

@ -1,15 +1,31 @@
.checkout-container {
.orderform-template {
.orderform-template-holder {
width: 66%;
@include mq(mobile, max) {
flex-direction: column;
}
.orderform-template-holder {
.row-fluid {
position: relative;
@include mq(mobile, max) {
display: flex;
flex-direction: column;
}
.client-profile-data {
@include mq(mobile, max) {
width: 100%;
margin-bottom: 10px;
}
.client-profile-data.filled {
max-width: 331px;
@include mq(mobile, max) {
max-width: -webkit-fill-available;
}
.accordion-heading {
.accordion-toggle {
margin-bottom: 25px;
@ -81,6 +97,11 @@
.payment-data {
position: static;
@include mq(mobile, max) {
width: 100%;
margin: 0;
}
.accordion-group {
&.active {
padding: 24px 17px 36px;
@ -132,6 +153,10 @@
margin: 0;
position: static;
@include mq(mobile, max) {
width: 100%;
}
.payment-group-list-btn {
width: 100%;
@ -232,6 +257,12 @@
.steps-view {
flex: 1;
margin-left: 40px;
@include mq(mobile, max) {
margin: 0;
width: 100%;
max-width: -webkit-fill-available;
}
}
}
}
@ -247,6 +278,10 @@
}
.shipping-data {
@include mq(mobile, max) {
width: 100%;
}
.shipping-data.active {
.accordion-heading {
span {
@ -350,27 +385,17 @@
padding: 14px 12px 12px;
.vtex-omnishipping-1-x-leanShippingIcon {
display: flex;
align-items: center;
justify-content: center;
margin-right: 8px;
width: 18px;
height: 18px;
border: 1px solid #c4c4c4;
border-radius: 3px;
svg {
opacity: 0;
}
&.active {
display: flex;
align-items: center;
justify-content: center;
&::before {
background: #00c8ff;
border-radius: 3px;
width: 12px;
height: 12px;
}
.vtex-omnishipping-1-x-svg {
display: none;
}
}
@ -393,6 +418,16 @@
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 {
position: relative;
.address-summary {
padding-left: 47px;
border: 1px solid #e0e0e0;
border-radius: 8px;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #7d7d7d;
position: relative;
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 {
position: absolute;
right: 15px;
font-weight: 400;
font-size: 12px;
line-height: 16px;

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

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

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

@ -33,6 +33,11 @@
text-transform: uppercase;
letter-spacing: 0.05em;
color: $black-400;
@include mq(mobile, max) {
margin: 17px 0;
padding-left: 16px;
}
}
.hide-cart-title {
@ -123,12 +128,20 @@
}
.cart-template-holder {
@include mq(mobile, max) {
margin: 0;
}
.cart {
margin: 0;
border: 1px solid $gray-100;
border-radius: 5px;
padding: 16px 29px 16px 16px;
@include mq(mobile, max) {
padding: 16px 16px 15px;
}
.cart-items {
thead {
font-weight: 400;
@ -137,6 +150,10 @@
font-family: $font-family-secundary;
color: $black-400;
@include mq(mobile, max) {
display: none;
}
th {
padding-bottom: 17px;
text-align: left;
@ -172,6 +189,45 @@
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,
.shipping-estimate-date,
.list-price {
@ -185,6 +241,23 @@
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,
input {
color: $black-500;
@ -206,6 +279,21 @@
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 {
padding: 0 11px;
margin: 0;
@ -213,6 +301,14 @@
border: 1px solid $gray-300;
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 {
background-color: $blue-500;
width: 16px;
@ -276,6 +372,10 @@
display: flex;
justify-content: space-between;
@include mq(mobile, max) {
flex-direction: column;
}
&::before,
&::after {
display: none;
@ -284,6 +384,10 @@
.cart-more-options {
margin: 0 0 0 128px;
@include mq(mobile, max) {
margin: 0 0 48px;
}
.srp-content {
display: flex;
flex-direction: column;
@ -438,6 +542,11 @@
.cart-totalizers {
margin: 0 128px 0 0;
@include mq(mobile, max) {
width: 100%;
padding: 0 16px 0 17px;
}
.coupon-fieldset {
.coupon-label {
font-weight: 400;
@ -523,7 +632,7 @@
.totalizers-list {
td {
padding: 0 0 10px 0;
padding: 10px 0 10px 0;
font-weight: 400;
font-size: 14px;
line-height: 16px;
@ -557,6 +666,14 @@
padding: 0;
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 {
margin: 17px 0 15px;

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

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