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

feat: Adiciona CSS responsivo mobile

Browse Source
This commit is contained in:
SamuelCondack 2022-12-17 14:32:39 -03:00
parent ffd2acf8a1
commit b6461af1ad
4 changed files with 206 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -65,7 +65,7 @@
color: $color-black; color: $color-black;
font-family: $font-family; font-family: $font-family;
padding: 0 16px; padding: 0 16px;
border: 2px solid $color-gray3; border: 1px solid #000000;
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px; border-radius: 5px;
@ -75,13 +75,26 @@
} }
button { button {
background-color: $color-black; background: #00C8FF;
border-radius: 5px; color: #000000;
border-radius: 8px;
border: none; border: none;
font-family: $font-family; font-family: $font-family;
height: 54px; height: 54px;
right: 0; right: 0;
top: 0; top: 0;
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
display: flex;
align-items: center;
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 12.56px 14.4px 12px 14.41px;
@media (max-width: 490px) { @media (max-width: 490px) {
height: 48px; height: 48px;
@ -98,8 +111,8 @@
.emailInfo { .emailInfo {
padding: 16px; padding: 16px;
background-color: $color-white; background-color: $color-white;
border: 1px solid $color-gray4; border: 1px solid #000000;
border-radius: 0; border-radius: 5px;
h3 { h3 {
color: #303030; color: #303030;
@ -115,13 +128,16 @@
} }
i::before { i::before {
color: $color-black; color: #00C8FF;
font-size: 1rem; font-size: 1rem;
opacity: 1; opacity: 1;
} }
} }
} }
.icon-lock{
display: none;
}
i::before { i::before {
color: $color-black; color: $color-black;
font-size: 6rem; font-size: 6rem;
@ -135,6 +151,20 @@
width: 100%; width: 100%;
} }
} }
}
#client-profile-data{
.active{
@media (max-width: 415px){
width: fit-content;
}
}
}
#shipping-data{
.active{
@media (max-width: 375px){
width: fit-content;
}
}
} }
.shipping-data, .shipping-data,
.payment-data, .payment-data,
@ -162,6 +192,14 @@
.icon-home{ .icon-home{
display: none; display: none;
} }
span[data-i18n="clientProfileData.identification"] {
color: #fff;
}
span[data-i18n="clientProfileData.identification"]::before {
content: "Identificação";
color: #000000;
}
} }
a { a {
@ -191,9 +229,86 @@
} }
} }
.accordion-inner { .accordion-inner {
.steps-view{
width: fit-content;
height: fit-content;
}
.payment-group-item{
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 24px;
color: #58595B;
background: #F0F0F0;
border: 1px solid hsl(0, 0%, 0%);
border-radius: 6px;
margin-bottom: 12px;
&:focus{
color: #F15A31 !important;
border: 1px solid #F15A31;
text-decoration: none;
}
&:hover{
color: #F15A31 !important;
border: 1px solid #F15A31;
}
}
a[data-i18n="paymentData.paymentGroup.giftCard.useGiftCard"]{
display: none;
}
a[data-name="Bancolombia Transfer"]{
display: none;
}
#payment-group-SPEIPaymentGroup{
display: none;
}
#payment-group-MercadoPagoPaymentGroup{
display: none;
}
#payment-group-custom201PaymentGroupPaymentGroup{
display: none;
}
#payment-group-customPrivate_502PaymentGroup{
display: none;
}
#payment-group-Bancolombia{
display: none;
}
#payment-group-PSEPaymentGroup{
display: none;
}
#payment-group-custom203PaymentGroupPaymentGroup{
display: none;
}
#payment-group-instantPaymentPaymentGroup{
display: none;
}
#payment-group-promissoryPaymentGroup{
display: none;
}
#payment-group-creditDirectSalePaymentGroup{
display: none;
}
#payment-group-creditControlPaymentGroup{
display: none;
}
.pg-transferencia-bancaria{
display: none;
}
.pg-deposito{
display: none;
}
padding: 0; padding: 0;
.link-change-shipping{ .link-change-shipping{
display: none; display: none;
}
.link-gift-card{
.box-step{
.box-step-content{
display: none;
}
}
} }
/* General configurations */ /* General configurations */
@ -266,6 +381,9 @@
} }
.vtex-omnishipping-1-x-deliveryGroup { .vtex-omnishipping-1-x-deliveryGroup {
.vtex-omnishipping-1-x-leanShippingGroupList{
width: fit-content;
}
p { p {
color: #7d7d7d; color: #7d7d7d;
font-size: 14px; font-size: 14px;
@ -393,6 +511,9 @@
} }
.vtex-omnishipping-1-x-address{ .vtex-omnishipping-1-x-address{
.ship-street{ .ship-street{
display: none !important;
}
.ship-neighborhood{
display: none; display: none;
} }
div{ div{
@ -413,6 +534,9 @@
padding-right: 17px; padding-right: 17px;
} }
.box-client-info-pf{ .box-client-info-pf{
@media (max-width: 815px){
margin-right: 15px;
}
label{ label{
font-family: 'Open Sans'; font-family: 'Open Sans';
font-style: normal; font-style: normal;
@ -427,9 +551,33 @@
} }
.client-last-name{ .client-last-name{
padding-left: 42px; padding-left: 42px;
@media (max-width: 870px){
padding-left: 30px;
}
@media (max-width: 835px){
padding-left: 25px;
}
@media (max-width: 820px){
padding-left: 20px;
}
@media (max-width: 815px){
padding-left: 0px;
}
} }
.client-phone{ .client-phone{
padding-left: 42px; padding-left: 42px;
@media (max-width: 870px){
padding-left: 30px;
}
@media (max-width: 835px){
padding-left: 25px;
}
@media (max-width: 820px){
padding-left: 20px;
}
@media (max-width: 815px){
padding-left: 0px;
}
} }
} }

25
checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
View File

@ -23,12 +23,35 @@
} }
&-links { &-links {
a {
color: transparent;
font-family: "Tenor Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05em;
}
a::after {
content: "Continuar \a" "comprando";
color: #000000;
position: absolute;
left: 0;
right: 0;
@media (max-width: 406px) {
white-space: pre;
bottom: 10px;
}
}
.link-choose-products { .link-choose-products {
border: 1px solid #000000; border: 1px solid #000000;
border-radius: 0; border-radius: 0;
width: 327px; width: 327px;
background-color: white; background-color: white;
color: black; color: transparent;
font-family: 'Tenor Sans'; font-family: 'Tenor Sans';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;

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

@ -63,6 +63,10 @@ footer .footerCheckout__wrapper {
gap: 5px; gap: 5px;
padding-bottom: 20px; padding-bottom: 20px;
width: 100%; width: 100%;
@media (max-width: 801px){
flex-direction: column;
height: 193px;
}
p{ p{
font-family: 'Open Sans'; font-family: 'Open Sans';
font-style: normal; font-style: normal;
@ -105,11 +109,31 @@ footer .footerCheckout__wrapper {
border: 0; border: 0;
color: #858585; color: #858585;
top: 30%; top: 30%;
@media(max-width: 801px){
top: 20%;
left: 10px;
}
@media(max-width: 600px){
top: 15%;
}
@media(max-width: 450px){
top: 10%;
}
} }
.slick-next{ .slick-next{
border: 0; border: 0;
color: #858585; color: #858585;
bottom: 65%; bottom: 65%;
@media(max-width: 801px){
bottom: 75%;
right: 10px;
}
@media(max-width: 600px){
bottom: 80%;
}
@media(max-width: 450px){
bottom: 85%;
}
} }
} }

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

@ -109,6 +109,9 @@
border: 0; border: 0;
color: #858585; color: #858585;
top: 30%; top: 30%;
@media (max-width: 550px){
left: 15px;
}
} }
.slick-next { .slick-next {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")