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

style(home): ajustando mobile e tablet na autenticação, finalizacao de compra

Browse Source
This commit is contained in:
Bernardo Cunha Ernani Waldhelm 2022-12-18 11:41:50 -03:00
parent 2bcadcdb66
commit 27bbfda151
4 changed files with 195 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -60,8 +60,8 @@
}
@media #{$mq-tablet}, #{$mq-mobile} {
font-size: 14px;
line-height: 16px;
font-size: 10px;
line-height: 12px;
}
}
@ -82,8 +82,8 @@
}
@media #{$mq-tablet}, #{$mq-mobile} {
font-size: 14px;
line-height: 16px;
font-size: 10px;
line-height: 12px;
}
}
}
@ -91,11 +91,15 @@
.client-email {
margin: 0 0 16px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
input {
border: 1px solid $color-black-1;
padding: 15px;
width: 765.37px;
width: 40%;
height: 50px;
border-radius: 5px 0px 0px 5px;
box-shadow: none;
@ -117,13 +121,13 @@
}
@media #{$mq-desktop} {
width: 443px;
width: 45%;
}
@media #{$mq-tablet} {
width: 865px;
width: 85%;
}
@media #{$mq-mobile} {
width: 216px;
width: 216px !important;
}
}
@ -145,16 +149,20 @@
text-transform: uppercase;
width: 219px;
height: 52px;
left: 56%;
top: 0;
position: inherit;
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
padding: 12px 14px;
width: 126.76px;
width: 126.76px !important;
height: 52px;
font-size: 14px;
line-height: 19px;
}
@media #{$mq-mobile} {
top: -2px;
}
}
span.help.error {
@ -264,6 +272,7 @@
background-size: 100%;
display: block;
border: none;
cursor: pointer;
@media #{$mq-desktop} {
width: 15px;
@ -332,6 +341,7 @@
background-size: 100%;
display: block;
border: none;
cursor: pointer;
@media #{$mq-desktop} {
width: 15px;
@ -421,6 +431,7 @@
display: block;
background-size: 100%;
border: none;
cursor: pointer;
@media #{$mq-desktop} {
width: 15px;
@ -436,16 +447,46 @@
}
}
.box-client-info-pf {
@media #{$mq-mobile} {
width: 100%;
}
}
.accordion-inner {
padding: 0;
/* General configurations */
.client-notice {
display: none;
}
.client-first-name, .client-last-name, .client-document, .client-phone {
@media #{$mq-tablet}{
width: 49%;
float: left !important;
}
@media #{$mq-mobile} {
width: 47%;
float: left !important;
}
}
.client-first-name, .client-document {
@media #{$mq-tablet} {
margin-right: 15px;
}
@media #{$mq-mobile} {
margin-right: 10px;
}
}
p {
@media #{$mq-tablet}, #{$mq-mobile} {
width: 100%;
}
label {
font-family: $font-family;
font-style: normal;
@ -484,7 +525,7 @@
#client-first-name, #client-last-name, #client-document, #client-phone{
width: 259px;
height: 41px;
height: 51px;
border: 1px solid #E0E0E0;
border-radius: 5px;
font-size: 26px;
@ -498,9 +539,11 @@
@media #{$mq-desktop} {
width: 127px;
height: 32px;
}
@media #{$mq-tablet}, #{$mq-mobile} {
width: 50%;
width: 100%;
height: 32px;
}
}
@ -630,7 +673,7 @@
}
@media #{$mq-tablet}, #{$mq-mobile} {
width: 100%;
width: 95%;
height: auto;
}
@ -672,6 +715,7 @@
background: url('https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-M3Academy.png') no-repeat center center;
width: 35px;
height: 35px;
cursor: pointer;
@media #{$mq-desktop}, #{$mq-mobile}{
width: 18px;
@ -692,6 +736,7 @@
background: url('https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png') no-repeat center center;
width: 35px;
height: 35px;
cursor: pointer;
@media #{$mq-desktop}, #{$mq-mobile}{
width: 18px;
@ -718,7 +763,7 @@
line-height: 33px;
color: $color-gray2;
@media #{$mq-desktop} {
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
font-size: 12px;
line-height: 16px;
@ -780,6 +825,7 @@
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
width: 22px;
@ -836,15 +882,21 @@
@media #{$mq-desktop} {
width: 296px;
height: 45px;
width: 260px;
height: 19px;
font-size: 16px;
line-height: 20px;
}
@media #{$mq-tablet}, #{$mq-mobile} {
width: 100%;
height: 45px;
width: 96%;
height: 19px;
font-size: 16px;
line-height: 20px;
}
@media #{$mq-mobile} {
width: 90%;
}
}
@ -863,7 +915,7 @@
}
}
#ship-number, #ship-complement, #ship-reference, #ship-receiverName {
#ship-number, #ship-street, #ship-complement, #ship-reference, #ship-receiverName {
width: 573px;
height: 41px;
border: 1px solid #E0E0E0;
@ -887,7 +939,8 @@
}
@media #{$mq-tablet}, #{$mq-mobile} {
width: 100%;
width: 96%;
height: 21px;
}
}
@ -942,6 +995,18 @@
display: none;
}
.payment-group {
@media #{$mq-tablet}, #{$mq-mobile} {
width: 100%;
}
&-list-btn {
@media #{$mq-tablet}, #{$mq-mobile} {
width: 100%;
}
}
}
#payment-group-creditCardPaymentGroup, #payment-group-bankInvoicePaymentGroup {
display: block;
border: 1px solid $color-black-1;
@ -1001,9 +1066,14 @@
#payment-group-creditCardPaymentGroup {
margin-top: 100px;
@media #{$mq-desktop} {
@media #{$mq-desktop}, #{$mq-tablet} {
margin-top: 25px;
}
@media #{$mq-mobile} {
margin-top: 50px;
}
&::after {
content: 'Cartão de Débito';
border: 1px solid $color-black-1;
@ -1018,7 +1088,7 @@
width: 406px;
padding: 13px 0;
@media #{$mq-desktop} {
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
top: -60px;
width: 209px;
font-size: 14px;
@ -1037,8 +1107,12 @@
}
}
#payment-group-bankInvoicePaymentGroup {
@media #{$mq-tablet}, #{$mq-mobile} {
margin-bottom: 65px;
}
&::after {
content: 'Cartão de Débito';
content: 'Boleto Faturado';
border: 1px solid $color-black-1;
border-radius: 6px;
display: flex;
@ -1051,7 +1125,7 @@
width: 406px;
padding: 13px 0;
@media #{$mq-desktop} {
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
bottom: -60px;
width: 209px;
font-size: 14px;

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

@ -18,12 +18,20 @@
border-radius: 5px;
padding: 16px 31px;
@media #{$mq-tablet}, #{$mq-mobile} {
padding: 0;
}
@include mq(md, max) {
margin: 0px 0 25px 0;
border-left: none;
border-right: none;
border-radius: 0;
}
&-items {
margin-bottom: 20px;
}
}
.cart-fixed.affix {
position: relative !important;
@ -34,7 +42,7 @@
font-family: $font-family;
padding: 24px 17px;
overflow: initial;
width: 100%;
width: auto;
h2 {
font-family: 'Tenor Sans';
font-style: normal;
@ -67,7 +75,6 @@
.cart {
border: none;
ul li {
display: flex;
align-items: center;
@ -145,24 +152,26 @@
background: $color-white;
}
#go-to-cart-button a {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 33px;
text-align: right;
text-decoration-line: underline;
color: $color-black;
margin-right: 20px;
#go-to-cart-button {
margin-top: 30px;
a {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 33px;
text-align: right;
text-decoration-line: underline;
color: $color-black;
margin-right: 20px;
@media #{$mq-desktop}, #{$mq-mobile}, #{$mq-tablet} {
font-size: 12px;
line-height: 16px;
@media #{$mq-desktop}, #{$mq-mobile}, #{$mq-tablet} {
font-size: 12px;
line-height: 16px;
}
}
}
.summary-totalizers {
td.info {
width: 100%;
@ -188,18 +197,16 @@
outline: none;
transition: all 0.2s linear;
width: 642px;
width: 100%;
height: 61px;
@media #{$mq-desktop} {
width: 331px;
height: 42px;
font-size: 14px;
line-height: 19px;
}
@media #{$mq-mobile}, #{$mq-tablet} {
width: 100%;
font-size: 14px;
line-height: 19px;
}
@ -222,6 +229,7 @@
.cart-items {
.product-item {
padding: 16px 0;
position: relative;
}
th {
@ -241,6 +249,7 @@
&.product,
&.product-price,
&.quantity,
&.quantity-price,
&.shipping-date {
display: none;
}
@ -264,6 +273,10 @@
width: 72px;
}
@media #{$mq-mobile} {
position: inherit !important;
}
img {
height: 146px;
width: 146px;
@ -298,6 +311,18 @@
font-size: 12px;
line-height: 14px;
margin-left: 16px;
white-space: normal;
}
@media #{$mq-tablet}{
position: absolute;
left: 60px;
}
@media #{$mq-mobile} {
position: absolute;
left: 43px;
top: 20px;
}
&:hover {
@ -339,12 +364,14 @@
@include mq(md, max) {
min-width: 78px;
}
@media (max-width: 490px) {
@media #{$mq-tablet}, #{$mq-mobile} {
position: absolute;
bottom: 0;
right: 0;
top: 30px;
}
span.list-price {
font-family: $font-family-secundary;
font-style: normal;
@ -378,13 +405,23 @@
border: 1px solid $color-gray3;
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
max-width: 100px;
max-width: 76px;
height: 14px;
margin: 14px auto 0;
}
@media (max-width: 490px) {
margin-left: 84px !important;
@media #{$mq-tablet} {
position: absolute;
left: 80px;
top: 10px;
}
@media #{$mq-mobile} {
position: absolute;
margin: 0;
bottom: 40px;
left: 20px;
}
input {
@ -517,10 +554,13 @@
line-height: 38px;
color: $color-black;
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile}{
@media #{$mq-desktop} {
font-size: 14px;
line-height: 19px;
}
@media #{$mq-tablet}, #{$mq-mobile} {
display: none;
}
}
}
@ -547,6 +587,11 @@
height: 10px;
}
@media #{$mq-tablet}, #{$mq-mobile} {
position: absolute;
top: -10px;
}
@include mq(md, max) {
font-size: 18px;
}
@ -885,7 +930,7 @@
text-decoration-line: underline;
white-space: nowrap;
@media #{$mq-desktop} {
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
font-size: 10px;
line-height: 12px;
}
@ -1276,6 +1321,7 @@
}
.btn-place-order-wrapper {
width: 100%;
a {
display: flex;
align-items: center;
@ -1297,7 +1343,7 @@
}
@media #{$mq-tablet}, #{$mq-mobile} {
width: 100%;
width: 95%;
height: 42px;
}

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

@ -4,8 +4,26 @@ body .container-main.container-order-form .orderform-template.active {
margin-left: unset;
margin-right: 0;
float: right;
@media #{$mq-mobile}, #{$mq-tablet} {
width: 100%;
}
}
.orderform-template-holder {
width: 66.1132%;
@media #{$mq-tablet}, #{$mq-mobile} {
width: 100%;
display: flex;
flex-direction: column;
}
.client-profile-data, .shipping-data, .payment-data {
@media #{$mq-tablet}, #{$mq-mobile} {
width: 97%;
margin-left: 0;
float: left;
}
}
}
}

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

@ -63,6 +63,10 @@ body {
.container-order-form,
.container-cart {
width: 80%;
@media #{$mq-mobile} {
width: 90%;
}
}
}