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 {
@include mq(IVK, min) {
height: 598px;
height: 133%;
}
.icon-lock{
@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,
.payment-data,
.client-profile-data {
.accordion-group {
@include mq(xll, max) {
border: 0 !important;
}
// @include mq(xll, max) {
// border: 0 !important;
// }
border-radius: 0;
border: 1px solid $color-gray4;
font-family: $font-family;
padding: 16px;
.client-profile-summary{
.name{
margin-bottom: 6px;
}
}
.accordion-heading {
.accordion-toggle{
span {
color: #303030;
margin-bottom: 8px;
padding: 0;
@include mq(IVK, min) {
font-size: 32px;
margin: 34px;
}
}
}
span {
color: #303030;
margin-bottom: 8px;
padding: 0;
i::before {
fill: #303030;
}
@ -292,7 +343,31 @@
padding: 0;
/* 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 {
color: $color-black;
}
@ -384,7 +459,10 @@
}
.shp-summary-group-info {
border-color: $color-gray4;
border-color: $color-gray6;
@include mq(IVK, min) {
border: none;
}
}
.address-summary {
@ -412,6 +490,9 @@
background: no-repeat;
background-image: url(https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png);
background-size: 24px;
@include mq(xll, min) {
display: none;
}
}
@include mq(md, max) {
@ -432,6 +513,14 @@
.shp-summary-group-price {
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 {

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

@ -104,6 +104,9 @@
.cart-fixed {
@include mq(xll, max) {
right: 0;
.payment-confirmation-wrap{
border: none;
}
}
font-family: $font-family;
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;
font-weight: 700;
}
p{
@include mq(IVK, min) {
font-weight: 400;
font-size: 28px;
line-height: 38px;
margin-left: 34px !important;
}
}
input,
.cart{
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-size: 20px;
fill: transparent !important;
@include mq(IVK, min) {
width: 40px !important;
height: 40px !important;
background-size: 40px;
}
}
}
#go-to-shipping,
@ -227,6 +239,10 @@ body .container-main.container-order-form .orderform-template.active {
}
}
#payment-data-submit{
@include mq(xll, max) {
width: 95% !important;
}
width: 88% !important;
background: $color-green_2 !important;
text-transform: uppercase !important;
@ -238,7 +254,7 @@ body .container-main.container-order-form .orderform-template.active {
@include mq(xll, max) {
width: 100%;
.accordion-group{
width: 138%;
width: 137%;
}
}
right: 0;
@ -266,6 +282,9 @@ body .container-main.container-order-form .orderform-template.active {
.form-step{
display: flex;
height: 452px;
@include mq(xll, max) {
height: 744px;
}
}
span,
a{
@ -289,7 +308,26 @@ body .container-main.container-order-form .orderform-template.active {
.payment-group-item-text{
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{
@include mq(xll, max) {
right: -8px;
top: 40%;
width: 97%;
}
position: absolute;
right: 0;
top: 33px;
@ -312,9 +350,20 @@ body .container-main.container-order-form .orderform-template.active {
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{
width: 332px;
height: 164px !important;
height: 164px;
}
}
#shipping-data{

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

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