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
2 changed files with 78 additions and 28 deletions

View File

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

View File

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