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

feat:add responsividade cards paymente fechados

Browse Source
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2022-12-25 01:47:34 -03:00
parent 9211513e52
commit a56bf31b70
4 changed files with 160 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -75,7 +75,7 @@
} }
.checkout-container { .checkout-container {
@include mq(IVK, min) { @include mq(IVK, min) {
height: 598px; height: 133%;
} }
.icon-lock{ .icon-lock{
@include mq(xll, max) { @include mq(xll, max) {
@ -253,24 +253,75 @@
} }
} }
#shipping-data{
.accordion-group{
.accordion-heading{
span{
@include mq(IVK, min) {
font-size: 32px;
margin: 34px;
}
}
}
@include mq(IVK, min) {
.accordion-inner{
.box-step{
.shp-summary-group{
&-content{
.shp-summary-group-info{
.shp-summary-group-address{
.address-summary{
span{
font-weight: 400;
font-size: 24px;
line-height: 33px;
}
}
}
}
}
}
}
}
}
}
}
.shipping-data, .shipping-data,
.payment-data, .payment-data,
.client-profile-data { .client-profile-data {
.accordion-group { .accordion-group {
@include mq(xll, max) { // @include mq(xll, max) {
border: 0 !important; // border: 0 !important;
} // }
border-radius: 0; border-radius: 0;
border: 1px solid $color-gray4; border: 1px solid $color-gray4;
font-family: $font-family; font-family: $font-family;
padding: 16px; padding: 16px;
.client-profile-summary{
.name{
margin-bottom: 6px;
}
}
.accordion-heading { .accordion-heading {
.accordion-toggle{
span {
color: #303030;
margin-bottom: 8px;
padding: 0;
@include mq(IVK, min) {
font-size: 32px;
margin: 34px;
}
}
}
span { span {
color: #303030; color: #303030;
margin-bottom: 8px; margin-bottom: 8px;
padding: 0; padding: 0;
i::before { i::before {
fill: #303030; fill: #303030;
} }
@ -292,7 +343,31 @@
padding: 0; padding: 0;
/* General configurations */ /* General configurations */
.box-step{
.link-change-shipping{
display: none;
}
.shp-summary-group{
&-content{
@include mq(IVK, min) {
.shp-summary-package{
.shp-summary-package-time{
span{
font-weight: 400;
font-size: 24px;
line-height: 33px;
align-items: center;
letter-spacing: 0.05em;
margin-left: 34px;
}
}
}
align-items: flex-start;
flex-direction: column;
}
}
}
}
.client-notice { .client-notice {
color: $color-black; color: $color-black;
} }
@ -384,7 +459,10 @@
} }
.shp-summary-group-info { .shp-summary-group-info {
border-color: $color-gray4; border-color: $color-gray6;
@include mq(IVK, min) {
border: none;
}
} }
.address-summary { .address-summary {
@ -412,6 +490,9 @@
background: no-repeat; background: no-repeat;
background-image: url(https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png); background-image: url(https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png);
background-size: 24px; background-size: 24px;
@include mq(xll, min) {
display: none;
}
} }
@include mq(md, max) { @include mq(md, max) {
@ -432,6 +513,14 @@
.shp-summary-group-price { .shp-summary-group-price {
padding-right: 16px; padding-right: 16px;
@include mq(IVK, min) {
font-weight: 400;
font-size: 24px;
line-height: 33px;
align-items: center;
letter-spacing: 0.05em;
margin-left: 34px;
}
} }
.shp-summary-package { .shp-summary-package {

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

@ -104,6 +104,9 @@
.cart-fixed { .cart-fixed {
@include mq(xll, max) { @include mq(xll, max) {
right: 0; right: 0;
.payment-confirmation-wrap{
border: none;
}
} }
font-family: $font-family; font-family: $font-family;
width: 100%; width: 100%;

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

@ -178,6 +178,14 @@ body .container-main.container-order-form .orderform-template.active {
color: #7D7D7D; color: #7D7D7D;
font-weight: 700; font-weight: 700;
} }
p{
@include mq(IVK, min) {
font-weight: 400;
font-size: 28px;
line-height: 38px;
margin-left: 34px !important;
}
}
input, input,
.cart{ .cart{
border-radius: 4px!important; border-radius: 4px!important;
@ -214,7 +222,11 @@ body .container-main.container-order-form .orderform-template.active {
background-image: url(https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png); background-image: url(https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png);
background-size: 20px; background-size: 20px;
fill: transparent !important; fill: transparent !important;
@include mq(IVK, min) {
width: 40px !important;
height: 40px !important;
background-size: 40px;
}
} }
} }
#go-to-shipping, #go-to-shipping,
@ -227,6 +239,10 @@ body .container-main.container-order-form .orderform-template.active {
} }
} }
#payment-data-submit{ #payment-data-submit{
@include mq(xll, max) {
width: 95% !important;
}
width: 88% !important; width: 88% !important;
background: $color-green_2 !important; background: $color-green_2 !important;
text-transform: uppercase !important; text-transform: uppercase !important;
@ -238,7 +254,7 @@ body .container-main.container-order-form .orderform-template.active {
@include mq(xll, max) { @include mq(xll, max) {
width: 100%; width: 100%;
.accordion-group{ .accordion-group{
width: 138%; width: 137%;
} }
} }
right: 0; right: 0;
@ -266,6 +282,9 @@ body .container-main.container-order-form .orderform-template.active {
.form-step{ .form-step{
display: flex; display: flex;
height: 452px; height: 452px;
@include mq(xll, max) {
height: 744px;
}
} }
span, span,
a{ a{
@ -289,7 +308,26 @@ body .container-main.container-order-form .orderform-template.active {
.payment-group-item-text{ .payment-group-item-text{
background-image: none; background-image: none;
} }
.payment-group{
@include mq(xll, max) {
.payment-group-list-btn{
width: 100%;
a{
width: 100%;
span{
width: 100%;
}
}
}
width: 100%;
}
}
.steps-view{ .steps-view{
@include mq(xll, max) {
right: -8px;
top: 40%;
width: 97%;
}
position: absolute; position: absolute;
right: 0; right: 0;
top: 33px; top: 33px;
@ -312,9 +350,20 @@ body .container-main.container-order-form .orderform-template.active {
height: 164px !important; height: 164px !important;
} }
} }
@include mq(IVK, min) {
// width: 152%;
// .link-cart{
// margin: 14px 0 100px 0;
// }
height: 628px !important;
.filled{
width: 90.541% !important;
height: 234px !important;
}
}
.filled{ .filled{
width: 332px; width: 332px;
height: 164px !important; height: 164px;
} }
} }
#shipping-data{ #shipping-data{

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

@ -27,6 +27,9 @@ body {
@include mq(md, max) { @include mq(md, max) {
padding-left: 0; padding-left: 0;
} }
@include mq(IVK, min) {
justify-content: space-around;
}
&.body-cart { &.body-cart {
font-family: $font-family; font-family: $font-family;
@ -50,6 +53,9 @@ body {
.container-order-form, .container-order-form,
.container-cart { .container-cart {
width: 86%; width: 86%;
@include mq(IVK, min) {
height: 1060px;
}
@include mq(xll, max) { @include mq(xll, max) {
width: 90.5%; width: 90.5%;
} }