anacarolinaduartecavalcante/m3-academy-template-checkout-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Entrega do Desafio #11

Merged
anacarolinaduartecavalcante merged 3 commits from feature/m3-academy-template-checkout into main 2022-12-25 14:01:34 +00:00
Conversation 0 Commits 3 Files Changed 2 +78 -28
2 changed files with 78 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -711,6 +711,9 @@ p.notification {
@media (max-width: $checkout1024px) { @media (max-width: $checkout1024px) {
width: 93%; width: 93%;
} }
@media (max-width: 490px) {
width: 86%;
}
@media (max-width: $checkout375px) { @media (max-width: $checkout375px) {
margin-left: 16px; margin-left: 16px;
margin-right: 16px; margin-right: 16px;
@ -1073,7 +1076,7 @@ td.monetary {
.cart-fixed.cart-fixed-transition.affix-top { .cart-fixed.cart-fixed-transition.affix-top {
height: auto; height: auto;
height: 397px !important; max-height: 397px;
@media (max-width: $checkout1024px) { @media (max-width: $checkout1024px) {
height: 395.02px !important; height: 395.02px !important;
} }
@ -1325,11 +1328,13 @@ a#force-shipping-fields {
border: none; border: none;
} }
a#show-gift-card-group { .payment-group{
bottom: 35px; @media (min-width: $checkout2500px) {
position: relative !important; margin-top: 50px;
}
} }
span.accordion-toggle.collapsed.accordion-toggle-active span { span.accordion-toggle.collapsed.accordion-toggle-active span {
font-family: "Tenor Sans"; font-family: "Tenor Sans";
font-style: normal; font-style: normal;
@ -1370,8 +1375,6 @@ p.card-flags.active {
} }
form.form-step.box-new.row-fluid { form.form-step.box-new.row-fluid {
top: 37px;
position: relative;
@media (max-width: $checkout1024px) { @media (max-width: $checkout1024px) {
top: 0; top: 0;
} }
@ -1384,11 +1387,13 @@ form.form-step.box-new.row-fluid {
line-height: 24px; line-height: 24px;
letter-spacing: -0.01em; letter-spacing: -0.01em;
color: $color-gray7; color: $color-gray7;
bottom: 37px; top: 0;
position: relative; position: relative;
@media (min-width: $checkout2500px) { @media (min-width: $checkout2500px) {
font-size: 28px; font-size: 28px;
line-height: 48px; line-height: 48px;
margin-bottom: 23px;
top: 16px;
} }
@media (max-width: $checkout1024px) { @media (max-width: $checkout1024px) {
top: 12px; top: 12px;
@ -1493,16 +1498,32 @@ p.PaymentCardHolderDocument.input.text.required.mask {
} }
} }
.link-gift-card {
@media (max-width: $checkout1024px) { a#show-gift-card-group {
left: 0; bottom: 0;
margin-top: 0; position: relative !important;
position: relative; @media (min-width: $checkout2500px) {
top: 25px; font-size: 28px;
line-height: 24px;
} }
} }
.cart-template .cart-fixed.affix{ .link-gift-card {
margin: 0 auto 10px;
position: relative;
@media (max-width: $checkout1024px) {
margin-top: 0;
position: relative;
top: -4px;
left: 0;
}
@media (max-width: $checkout375px) {
top: -32px;
left: 0;
}
}
.cart-template .cart-fixed.affix {
position: static !important; position: static !important;
height: auto !important; height: auto !important;
} }

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

@ -31,6 +31,7 @@
justify-content: space-between; justify-content: space-between;
position: relative; position: relative;
flex-direction: column-reverse; flex-direction: column-reverse;
padding: 0 16px 16px;
} }
@media (max-width: $checkout375px) { @media (max-width: $checkout375px) {
height: auto; height: auto;
@ -132,9 +133,8 @@
.cart-items { .cart-items {
.product-item { .product-item {
padding: 16px 0; padding: 16px 0 0;
} }
th { th {
padding: 0 0 16px; padding: 0 0 16px;
font-family: "Tenor Sans"; font-family: "Tenor Sans";
@ -244,7 +244,8 @@
@media (max-width: $checkout375px) { @media (max-width: $checkout375px) {
top: -2px; top: -2px;
position: relative; position: relative;
left: -72px; left: 72px;
margin-left: 0;
} }
} }
@ -336,9 +337,14 @@
height: 34px; height: 34px;
width: 99px; width: 99px;
padding: 0; padding: 0;
@media (max-width: 979px) and (min-width: 768px) {
left: 16px;
}
@media (max-width: 490px) { @media (max-width: 490px) {
margin-left: 84px !important; margin-left: 84px !important;
left: 0;
top: auto;
margin-top: 0px;
} }
@media (min-width: $checkout2500px) { @media (min-width: $checkout2500px) {
min-width: 135px; min-width: 135px;
@ -351,7 +357,6 @@
@media (max-width: $checkout375px) { @media (max-width: $checkout375px) {
margin-left: 73px !important; margin-left: 73px !important;
} }
input { input {
background-color: $color-white; background-color: $color-white;
border-radius: 0; border-radius: 0;
@ -432,10 +437,10 @@
@media (max-width: 979px) and (min-width: 768px) { @media (max-width: 979px) and (min-width: 768px) {
position: inherit; position: inherit;
bottom: inherit; bottom: inherit;
left: inherit; left: 8px;
height: inherit; height: inherit;
width: inherit; width: inherit;
top: inherit; top: 8px;
} }
@media (max-width: 490px) { @media (max-width: 490px) {
@ -479,14 +484,14 @@
display: none; display: none;
} }
} }
a#item-remove-2616 { a#item-remove-2616,a#item-remove-2621 {
@media (max-width: $checkout1024px) { @media (max-width: $checkout1024px) {
top: -31px; top: -16px;
position: relative; position: relative;
left: 12px; left: 12px;
} }
@media (max-width: $checkout375px) { @media (max-width: $checkout375px) {
top: 4px; top: -9px;
left: -3px; left: -3px;
} }
} }
@ -1215,13 +1220,14 @@
} }
} }
[class*="span"].pull-right, .row-fluid [class*="span"].pull-right{ [class*="span"].pull-right,
.row-fluid [class*="span"].pull-right {
@media (max-width: $checkout1024px) { @media (max-width: $checkout1024px) {
float: none; float: none;
} }
@media (max-width: $checkout375px) { @media (max-width: $checkout375px) {
float: none; float: none;
margin-left: 0; margin-left: 0;
} }
} }
@ -1370,6 +1376,12 @@ th.quantity {
} }
} }
td.product-name{
@media (max-width: 490px){
left: 0px !important;
}
}
.full-cart .cart table tbody tr td.product-name { .full-cart .cart table tbody tr td.product-name {
padding-left: 16px; padding-left: 16px;
@media (max-width: $checkout375px) { @media (max-width: $checkout375px) {
@ -1431,3 +1443,20 @@ th.product {
margin: 0 20px; margin: 0 20px;
} }
} }
tr.product-item{
@media (max-width: $checkout1024px) {
display: flex !important;
justify-content: space-between !important;
}
@media (max-width: 490px) {
min-height: 60px;
}
}
th.item-remove {
@media (max-width: $checkout1024px) {
padding-bottom: 0px !important;
}
}