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 todos scss, colocando responsivo #4

Merged
BernardoWaldhelm merged 1 commits from feature/challenge into main 2022-12-21 17:29:30 +00:00
Conversation 0 Commits 1 Files Changed 6 +261 -237
6 changed files with 261 additions and 237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b3e7bcd3ad - Show all commits

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

@ -36,6 +36,11 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-bottom: 58px;
@media #{$mq-desktop} {
margin-bottom: 49px;
}
label { label {
margin-top: 65px; margin-top: 65px;
@ -101,7 +106,6 @@
padding: 15px; padding: 15px;
width: 40%; width: 40%;
height: 50px; height: 50px;
border-radius: 5px 0px 0px 5px;
box-shadow: none; box-shadow: none;
color: $color-black-1; color: $color-black-1;
font-family: $font-family; font-family: $font-family;
@ -176,6 +180,8 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
position: absolute;
top: 100%;
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} { @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
font-size: 12px; font-size: 12px;
@ -272,7 +278,7 @@
} }
.accordion-inner { .accordion-inner {
.shipping-summary-info { .shipping-summary-info {
font-family: 'Open Sans'; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 28px; font-size: 28px;
@ -310,7 +316,7 @@
} }
.accordion-inner { .accordion-inner {
.notification { .notification {
font-family: 'Open Sans'; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 28px; font-size: 28px;
@ -406,20 +412,25 @@
display: none; display: none;
} }
.client-first-name, .client-last-name, .client-document, .client-phone { .box-client-info-pf{
@media #{$mq-tablet}{
width: 49%; @media #{$mq-tablet}, #{$mq-mobile} {
float: left !important; float: inherit;
margin: 0;
} }
@media #{$mq-mobile} { }
width: 47%;
float: left !important; .client-first-name, .client-last-name, .client-document, .client-phone {
}
width: 47%;
float: left !important;
} }
.client-first-name, .client-document { .client-first-name, .client-document {
@media #{$mq-tablet} { margin-right: 28px;
@media #{$mq-desktop},#{$mq-tablet} {
margin-right: 15px; margin-right: 15px;
} }
@ -448,7 +459,8 @@
} }
#client-email { #client-email {
width: 562px; width: 100%;
max-width: -webkit-fill-available;
height: 41px; height: 41px;
border: 1px solid #E0E0E0; border: 1px solid #E0E0E0;
border-radius: 5px; border-radius: 5px;
@ -460,18 +472,12 @@
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
} }
@media #{$mq-desktop} {
width: 283px;
}
@media #{$mq-tablet}, #{$mq-mobile} {
width: 100%;
}
} }
#client-first-name, #client-last-name, #client-document, #client-phone{ #client-first-name, #client-last-name, #client-document, #client-phone{
width: 259px; width: 100%;
height: 51px; height: 41px;
max-width: -webkit-fill-available;
border: 1px solid #E0E0E0; border: 1px solid #E0E0E0;
border-radius: 5px; border-radius: 5px;
font-size: 26px; font-size: 26px;
@ -481,14 +487,6 @@
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile}{ @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile}{
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
}
@media #{$mq-desktop} {
width: 127px;
height: 32px;
}
@media #{$mq-tablet}, #{$mq-mobile} {
width: 100%;
height: 32px; height: 32px;
} }
} }
@ -549,7 +547,6 @@
background: $color-blue-100; background: $color-blue-100;
border-radius: 8px; border-radius: 8px;
padding: 12px; padding: 12px;
margin-top: 8px;
width: 100%; width: 100%;
height: 51px; height: 51px;
font-family: $font-family; font-family: $font-family;
@ -740,8 +737,8 @@
background: none; background: none;
} }
.address-summary { .shp-summary-group-info {
border: 1px solid #E0E0E0; border: 1px solid #E0E0E0;
border-radius: 8px; border-radius: 8px;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
@ -749,8 +746,6 @@
font-size: 24px; font-size: 24px;
line-height: 33px; line-height: 33px;
color: $color-gray2; color: $color-gray2;
position: relative;
padding: 16px 81px;
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} { @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
font-size: 12px; font-size: 12px;
@ -758,42 +753,55 @@
padding: 15px 42px; padding: 15px 42px;
} }
&::before {
content: '';
background: url('https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png') no-repeat center center;
background-size: 100%;
display: block;
width: 42px;
height: 38px;
left: 16px;
position: absolute;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} { .address-summary {
width: 22px;
height: 20px; position: relative;
padding: 16px 81px;
&::before {
content: '';
background: url('https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png') no-repeat center center;
background-size: 100%;
display: block;
width: 42px;
height: 38px;
left: 16px;
position: absolute;
top: 50%;
-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;
height: 20px;
}
}
@include mq(md, max) {
background-position: 8px 9px;
}
a {
color: $color-blue-100;
} }
} }
}
@include mq(md, max) {
background-position: 8px 9px;
}
a {
color: $color-blue-100;
}
}
.shp-summary-group-price, .shp-summary-group-price,
.shp-summary-package { .shp-summary-package {
color: $color-gray4; color: $color-gray4;
} }
.shp-summary-group-price,.shp-summary-package, .vtex-omnishipping-1-x-SummaryItemPrice { .shp-summary-package {
padding: 16px 81px;
}
.shp-summary-group-price, .vtex-omnishipping-1-x-SummaryItemPrice {
display: none; display: none;
} }
@ -866,7 +874,8 @@
// } // }
#ship-number, #ship-street, #ship-complement, #ship-reference, #ship-receiverName { #ship-number, #ship-street, #ship-complement, #ship-reference, #ship-receiverName {
width: 573px; width: 100%;
max-width: -webkit-fill-available;
height: 41px; height: 41px;
border: 1px solid #E0E0E0; border: 1px solid #E0E0E0;
border-radius: 8px; border-radius: 8px;
@ -881,16 +890,7 @@
@media #{$mq-desktop},#{$mq-tablet}, #{$mq-mobile} { @media #{$mq-desktop},#{$mq-tablet}, #{$mq-mobile} {
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
} height: 25px;
@media #{$mq-desktop} {
width: 296px;
height: 21px;
}
@media #{$mq-tablet}, #{$mq-mobile} {
width: 96%;
height: 21px;
} }
} }
@ -899,7 +899,7 @@
} }
.vtex-omnishipping-1-x-deliveryOptionActive { .vtex-omnishipping-1-x-deliveryOptionActive {
font-family: 'Open Sans'; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 28px; font-size: 28px;
@ -958,10 +958,8 @@
} }
#payment-group-creditCardPaymentGroup, #payment-group-bankInvoicePaymentGroup { #payment-group-creditCardPaymentGroup, #payment-group-bankInvoicePaymentGroup {
display: block;
border: 1px solid $color-black-1; border: 1px solid $color-black-1;
border-radius: 6px; border-radius: 6px;
padding: 13px ;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -989,6 +987,16 @@
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
} }
&.active {
border: 1px solid #F15A31;
color: #F15A31;
background: transparent;
span {
color: #F15A31;
}
}
span { span {
background: none; background: none;
font-family: $font-family; font-family: $font-family;
@ -1014,7 +1022,7 @@
} }
#payment-group-creditCardPaymentGroup { #payment-group-creditCardPaymentGroup {
margin-top: 100px; margin-top: 30px;
@media #{$mq-desktop}, #{$mq-tablet} { @media #{$mq-desktop}, #{$mq-tablet} {
margin-top: 25px; margin-top: 25px;
@ -1033,7 +1041,7 @@
justify-content: center; justify-content: center;
mix-blend-mode: normal; mix-blend-mode: normal;
position: absolute; position: absolute;
top: -90px; top: -60px;
height: 23px; height: 23px;
width: 406px; width: 406px;
padding: 13px 0; padding: 13px 0;
@ -1050,6 +1058,15 @@
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
} }
&.active {
border: 1px solid #F15A31;
color: #F15A31;
background: transparent;
span {
color: #F15A31;
}
}
} }
span { span {
@ -1057,9 +1074,7 @@
} }
} }
#payment-group-bankInvoicePaymentGroup { #payment-group-bankInvoicePaymentGroup {
@media #{$mq-tablet}, #{$mq-mobile} { margin-bottom: 65px;
margin-bottom: 65px;
}
&::after { &::after {
content: 'Boleto Faturado'; content: 'Boleto Faturado';
@ -1070,7 +1085,7 @@
justify-content: center; justify-content: center;
mix-blend-mode: normal; mix-blend-mode: normal;
position: absolute; position: absolute;
bottom: -90px; bottom: -65px;
height: 23px; height: 23px;
width: 406px; width: 406px;
padding: 13px 0; padding: 13px 0;
@ -1087,6 +1102,15 @@
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
} }
&.active {
border: 1px solid #F15A31;
color: #F15A31;
background: transparent;
span {
color: #F15A31;
}
}
} }
span { span {

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

@ -43,8 +43,9 @@
padding: 24px 17px; padding: 24px 17px;
overflow: initial; overflow: initial;
width: auto; width: auto;
height: auto !important;
h2 { h2 {
font-family: 'Tenor Sans'; font-family: $font-family-secundary;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 32px; font-size: 32px;
@ -62,6 +63,7 @@
.summary-cart-template-holder { .summary-cart-template-holder {
overflow: inherit; overflow: inherit;
height: auto !important;
} }
.item-unavailable { .item-unavailable {
@ -83,12 +85,20 @@
margin-top: 0; margin-top: 0;
padding-top: 0; padding-top: 0;
@media #{$mq-tablet}, #{$mq-mobile} {
justify-content: space-between;
}
&:not(:first-child) { &:not(:first-child) {
margin-top: 8px; margin-top: 8px;
padding-top: 8px; padding-top: 8px;
border-top: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5;
} }
.quantity {
display: none;
}
.shipping-date { .shipping-date {
display: none; display: none;
} }
@ -153,7 +163,6 @@
} }
#go-to-cart-button { #go-to-cart-button {
margin-top: 30px;
a { a {
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
@ -219,6 +228,10 @@
&:active { &:active {
background: darken($color-black, 5); background: darken($color-black, 5);
} }
.icon-lock {
display: none;
}
} }
} }
@ -227,7 +240,9 @@
} }
.cart-items { .cart-items {
.product-item {
.product-item{
padding: 16px 0; padding: 16px 0;
position: relative; position: relative;
} }
@ -239,12 +254,44 @@
font-weight: 400; font-weight: 400;
font-size: 28px; font-size: 28px;
line-height: 33px; line-height: 33px;
vertical-align: top;
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} { @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
} }
&.shipping-date {
font-size: 0;
&::before {
content: "Frete";
font-family: $font-family-secundary;
color: $color-black;
font-size: 28px;
line-height: 33px;
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
font-size: 14px;
line-height: 16px;
}
}
}
&.product-price {
font-size: 0;
&::before {
content: "Unidade";
font-family: $font-family-secundary;
color: $color-black;
font-size: 28px;
line-height: 33px;
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
font-size: 14px;
line-height: 16px;
}
}
}
@media #{$mq-tablet}, #{$mq-mobile} { @media #{$mq-tablet}, #{$mq-mobile} {
&.product, &.product,
&.product-price, &.product-price,
@ -269,8 +316,9 @@
padding: 0; padding: 0;
width: 146px; width: 146px;
@include mq(sm, max) { @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
width: 72px; height: 60px;
width: 60px;
} }
@media #{$mq-mobile} { @media #{$mq-mobile} {
@ -431,7 +479,7 @@
max-height: 33px; max-height: 33px;
margin: 0 20px !important; margin: 0 20px !important;
width: 9px; width: 9px;
font-family: 'Tenor Sans'; font-family: $font-family-secundary;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 28px; font-size: 28px;
@ -454,7 +502,6 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 6px; padding: 6px;
font-size: 14px;
background-color: $color-blue-100; background-color: $color-blue-100;
border-radius: 100%; border-radius: 100%;
width: 20px; width: 20px;
@ -481,7 +528,6 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 6px; padding: 6px;
font-size: 14px;
background-color: $color-blue-100; background-color: $color-blue-100;
border-radius: 100%; border-radius: 100%;
width: 20px; width: 20px;
@ -529,7 +575,6 @@
span { span {
font-family: $font-family-secundary; font-family: $font-family-secundary;
font-family: 'Tenor Sans';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 28px; font-size: 28px;
@ -615,17 +660,20 @@
.summary { .summary {
.cart-more-options { .cart-more-options {
margin: 0; margin: 0;
width: max-content; width: 28%;
@media #{$mq-tablet} {
width: max-content;
}
@media #{$mq-mobile} {
width: 100%;
}
.srp-container { .srp-container {
padding: 0 0 0 10px; padding: 0 0 0 10px;
max-width: 552px; width: 100%;
width: 552px; max-width: none;
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
max-width: 276px;
width: 276px;
}
@include mq(md, max) { @include mq(md, max) {
padding: 0 16px; padding: 0 16px;
@ -638,11 +686,7 @@
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 48px;
line-height: 65px;
margin: 33px 0 12px; margin: 33px 0 12px;
font-style: normal;
font-weight: normal;
font-size: 28px; font-size: 28px;
line-height: 36px; line-height: 36px;
color: $color-black; color: $color-black;
@ -706,7 +750,7 @@
} }
.srp-data { .srp-data {
width: 280px; width: 100%;
@include mq(md, max) { @include mq(md, max) {
@ -718,7 +762,7 @@
border-radius: 8px; border-radius: 8px;
color: $color-white; color: $color-white;
outline: none; outline: none;
width: 543px; width: 100%;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
@ -738,18 +782,6 @@
line-height: 19px; line-height: 19px;
} }
@media #{$mq-desktop} {
width: 280px;
}
@media #{$mq-tablet} {
width: 343px;
}
@media #{$mq-mobile} {
width: 100%;
}
&:hover { &:hover {
background-color: lighten($color-blue-100, 5); background-color: lighten($color-blue-100, 5);
} }
@ -766,25 +798,13 @@
&__wrapper { &__wrapper {
background-color: $color-white; background-color: $color-white;
border-radius: 100px; border-radius: 100px;
width: 543.67px; width: 100%;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
text-transform: uppercase; text-transform: uppercase;
@media #{$mq-desktop} {
width: 280px;
}
@media #{$mq-tablet} {
width: 343px;
}
@media #{$mq-mobile} {
width: 100%;
}
} }
&__current { &__current {
@ -799,6 +819,23 @@
label { label {
width: 50%; width: 50%;
padding: 8px 0;
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 28px;
line-height: 38px;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
font-size: 14px;
line-height: 19px;
}
&:active { &:active {
background-color: #f0f0f0; background-color: #f0f0f0;
@ -807,20 +844,7 @@
} }
.srp-postal-code__form { .srp-postal-code__form {
width: 543px; width: 100%;
@media #{$mq-desktop} {
width: 280px;
}
@media #{$mq-tablet} {
width: 343px;
}
@media #{$mq-mobile} {
width: 100%;
}
.ship-country{ .ship-country{
display: none; display: none;
@ -831,7 +855,7 @@
.ship-postalCode { .ship-postalCode {
width: auto; width: 62%;
label { label {
font-family: $font-family; font-family: $font-family;
@ -855,20 +879,11 @@
color: $color-black; color: $color-black;
font-size: 24px; font-size: 24px;
line-height: 33px; line-height: 33px;
height: 36px;
padding: 12px 8px; padding: 12px 8px;
width: 333.96px; width: 100%;
height: 55px; height: 55px;
@media #{$mq-desktop} { @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
width: 172px;
height: 36px;
font-size: 16px;
line-height: 18px;
}
@media #{$mq-tablet}, #{$mq-mobile} {
width: 215px;
height: 36px; height: 36px;
font-size: 16px; font-size: 16px;
line-height: 18px; line-height: 18px;
@ -891,22 +906,19 @@
text-align: center; text-align: center;
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
width: 194px; width: 34%;
height: 55px; height: 55px;
outline: none; outline: none;
margin-left: 8px;
transition: all 0.2s linear; transition: all 0.2s linear;
text-transform: uppercase;
@media #{$mq-desktop} { @media #{$mq-desktop} {
width: 100px;
height: 36px; height: 36px;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
} }
@media #{$mq-tablet}, #{$mq-mobile} { @media #{$mq-tablet}, #{$mq-mobile} {
width: 120px;
height: 32px; height: 32px;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
@ -922,27 +934,43 @@
} }
small a { small a {
font-family: $font-family; font-size: 0;
color: $color-black-1;
font-weight: 400;
font-size: 20px;
line-height: 23px;
text-decoration-line: underline;
white-space: nowrap;
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} { &::before {
font-size: 10px; content: 'Não sei meu código postal';
line-height: 12px; font-family: $font-family;
color: $color-black-1;
font-weight: 400;
font-size: 20px;
line-height: 23px;
text-decoration-line: underline;
white-space: nowrap;
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
font-size: 10px;
line-height: 12px;
}
} }
} }
span.help.error { span.help.error {
color: red; font-family: $font-family;
font-size: 12px; font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
display: flex;
align-items: center;
text-align: center;
position: absolute; position: absolute;
left: 60px; left: 60px;
width: 100%; width: 100%;
top: 30px; top: 30px;
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
font-size: 12px;
line-height: 16px;
}
} }
} }
} }
@ -1009,14 +1037,9 @@
&-totalizers { &-totalizers {
padding: 0; padding: 0;
width: 688px;
margin-top: 33px; margin-top: 33px;
@media #{$mq-desktop} { @media #{$mq-tablet} {
width: 354px;
}
@media #{$mq-tablet}, #{$mq-mobile} {
width: 100%; width: 100%;
} }
@ -1048,11 +1071,6 @@
} }
} }
@include mq(md, max) {
padding: 0 16px;
width: 100%;
}
.coupon-column { .coupon-column {
.coupon { .coupon {
margin: 0; margin: 0;
@ -1083,35 +1101,31 @@
.coupon-fields { .coupon-fields {
margin-bottom: 20px; margin-bottom: 20px;
span {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
i {
@include mq(lg, min) { display: none;
span {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
i {
display: none;
}
} }
} }
input { input {
border: 1px solid $color-gray3; border: 1px solid $color-gray3;
border-radius: 5px; border-radius: 5px;
box-shadow: none; box-shadow: none;
color: $color-gray5; color: $color-gray5;
font-family: 'Tenor Sans'; font-family: $font-family-secundary;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 24px; font-size: 24px;
line-height: 28px; line-height: 28px;
text-align: center; text-align: center;
height: 29px; height: 29px;
width: 398px; width: 57%;
max-width: 364px;
padding: 12px 16px; padding: 12px 16px;
margin-right: 30px; margin-right: 30px;
@ -1119,24 +1133,13 @@
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
margin-right: 15px; margin-right: 15px;
}
@media #{$mq-desktop} {
width: 170px;
height: 10px; height: 10px;
} }
@media #{$mq-tablet} { @media #{$mq-tablet} {
width: 86%; width: 86%;
} }
@media #{$mq-mobile} {
width: 50%;
}
@include mq(sm, max) {
max-width: 100%;
width: 100%;
}
&::-webkit-input-placeholder { &::-webkit-input-placeholder {
text-align: left; text-align: left;
@ -1153,7 +1156,7 @@
border-radius: 8px; border-radius: 8px;
border: none; border: none;
color: $color-black-1; color: $color-black-1;
font-family: 'Open Sans'; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 28px; font-size: 28px;
@ -1163,24 +1166,23 @@
height: 55px; height: 55px;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;
width: 260px; width: 37%;
cursor: pointer; cursor: pointer;
@media #{$mq-desktop} { @media #{$mq-desktop} {
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
width: 133px;
height: 36px; height: 36px;
} }
@media #{$mq-tablet} {
width: 10%;
}
@media #{$mq-tablet}, #{$mq-mobile}{ @media #{$mq-tablet}, #{$mq-mobile}{
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
height: 42px; height: 36px;
}
@include mq(md, max) {
width: 138px;
} }
&:hover { &:hover {
@ -1273,11 +1275,7 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 688.35px; width: 36%;
@media #{$mq-desktop} {
width: 354px;
}
@media #{$mq-tablet}, #{$mq-mobile} { @media #{$mq-tablet}, #{$mq-mobile} {
width: 100%; width: 100%;
@ -1326,7 +1324,8 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
width: 650px; width: 100%;
max-width: -webkit-fill-available;
height: 54.19px; height: 54.19px;
background: $color-blue-100; background: $color-blue-100;
border-radius: 8px; border-radius: 8px;
@ -1335,17 +1334,11 @@
transition: ease-in 0.22s all; transition: ease-in 0.22s all;
padding: 12px 19px; padding: 12px 19px;
@media #{$mq-desktop} { @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile}{
width: 316px;
height: 18px; height: 18px;
} }
@media #{$mq-tablet}, #{$mq-mobile} {
width: 95%;
height: 42px;
}
&:hover { &:hover {
background-color: darken($color-blue-100, 5); background-color: darken($color-blue-100, 5);
} }

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

@ -62,10 +62,18 @@ body {
} }
.container-order-form, .container-order-form,
.container-cart { .container-cart {
width: 80%; width: auto;
padding: 0 253px;
margin: 0;
@media #{$mq-mobile} { @media #{$mq-desktop} {
width: 90%; width: auto;
padding: 0 128px;
}
@media #{$mq-tablet},#{$mq-mobile} {
width: auto;
padding: 0 16px !important;
} }
} }
} }

4
checkout/src/arquivos/sass/lib/_slick.scss
View File

@ -127,7 +127,7 @@
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg") background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg")
no-repeat center center; no-repeat center center;
z-index: 4; z-index: 4;
right: 98%; left: 10px;
transform-origin: left; transform-origin: left;
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} { @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
@ -139,7 +139,7 @@
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg") background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg")
no-repeat center center; no-repeat center center;
z-index: 4; z-index: 4;
left: 97.5%; right: 10px;
transform-origin: right; transform-origin: right;
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} { @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {

1
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -132,7 +132,6 @@
align-items: center; align-items: center;
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
width: 33%;
gap: 11px; gap: 11px;
@media #{$mq-mobile}, #{$mq-tablet} { @media #{$mq-mobile}, #{$mq-tablet} {

2
checkout/src/arquivos/sass/partials/_header.scss
View File

@ -92,7 +92,7 @@
ul { ul {
display: flex; display: flex;
align-items: flex-start; align-items: center;
justify-content: space-between; justify-content: space-between;
height: 100%; height: 100%;
list-style: none; list-style: none;