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

feat(checkout): adiciona css em scss para mobile 1024px e 375px

Browse Source
This commit is contained in:
carloswinter 2022-12-18 23:05:40 -03:00
parent 956c39fc9d
commit b3e93c5618
5 changed files with 74 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -432,10 +432,10 @@
} }
.accordion-group { .accordion-group {
border-radius: 8px;
border: 1px solid $color-gray3;
font-family: $font-family; font-family: $font-family;
padding: 24px 17px 36px; padding: 24px 17px 36px;
border-radius: 8px;
border: 1px solid $color-gray3;
.accordion-heading { .accordion-heading {
.accordion-toggle { .accordion-toggle {
@ -482,15 +482,15 @@
} }
span { span {
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 19px; line-height: 19px;
color: $color-black2; color: $color-black2;
margin-top: 6px; margin-top: 6px;
margin-bottom: 36px; margin-bottom: 36px;
padding: 0; padding: 0;
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
@media (min-width: 2500px) { @media (min-width: 2500px) {
font-size: 32px; font-size: 32px;
@ -506,11 +506,11 @@
content: "Identificação"; content: "Identificação";
color: $color-black; color: $color-black;
@media (min-width: 2500px) { @media (min-width: 2500px) {
font-family: "Tenor Sans";
font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 32px; font-size: 32px;
line-height: 37px; line-height: 37px;
font-family: "Tenor Sans";
font-style: normal;
color: #292929; color: #292929;
} }

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

@ -25,21 +25,21 @@
display: none; display: none;
} }
.cart { .cart {
padding: 16px;
margin-bottom: 48px;
border: 1px solid $color-gray3; border: 1px solid $color-gray3;
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px; border-radius: 5px;
padding: 16px;
margin-bottom: 48px;
@include mq(l, max) { @include mq(l, max) {
padding: 0; padding: 0;
} }
@include mq(md, max) { @include mq(md, max) {
margin: 0px 0 25px 0;
border-left: none;
border-right: none; border-right: none;
border-radius: 0; border-radius: 0;
margin: 0px 0 25px 0;
border-left: none;
} }
} }
.cart-fixed.affix { .cart-fixed.affix {
@ -49,11 +49,11 @@
font-family: $font-family; font-family: $font-family;
width: 100%; width: 100%;
h2 { h2 {
background: $color-white;
border: none;
color: #303030; color: #303030;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
background: $color-white;
border: none;
} }
.item-unavailable { .item-unavailable {
@ -68,9 +68,10 @@
border: 1px solid $color-gray4; border: 1px solid $color-gray4;
ul li { ul li {
padding-top: 0;
border-top: none; border-top: none;
margin-top: 0; margin-top: 0;
padding-top: 0;
.description { .description {
.pull-left { .pull-left {
display: none; display: none;
@ -87,8 +88,8 @@
.price { .price {
color: #7d7d7d; color: #7d7d7d;
} }
.shipping-date { // .shipping-date {
} // }
.url { .url {
.photo { .photo {
@ -107,21 +108,22 @@
} }
#go-to-cart-button a { #go-to-cart-button a {
color: $color-black;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
text-align: right; text-align: right;
color: $color-black;
font-style: normal;
font-weight: 400;
font-family: "Open Sans";
text-decoration-line: underline; text-decoration-line: underline;
@media (max-width: 1024px) { @media (max-width: 1024px) {
float: right; float: right;
} }
@include mq(xxl, min) { @include mq(xxl, min) {
font-weight: 400;
font-size: 24px; font-size: 24px;
line-height: 33px; line-height: 33px;
font-weight: 400;
} }
} }
@ -132,17 +134,18 @@
} }
#payment-data-submit { #payment-data-submit {
background: #298541;
border-radius: 8px; border-radius: 8px;
color: $color-white; color: $color-white;
background: #298541;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;
span { span {
font-size: 14px;
line-height: 19px;
font-family: "Open Sans"; font-family: "Open Sans";
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
font-size: 14px;
line-height: 19px;
} }
i { i {
display: none; display: none;
@ -176,21 +179,21 @@
} }
@include mq(m, max) { @include mq(m, max) {
position: relative;
padding: 0 0 0 16px; padding: 0 0 0 16px;
margin: 16px 16px 15px 16px; margin: 16px 16px 15px 16px;
position: relative;
} }
} }
th { th {
text-align: start;
font-family: $font-family-secundary;
color: $color-black2;
padding: 0 0 17px;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
text-align: start;
font-family: $font-family-secundary;
color: $color-black2;
padding: 0 0 17px;
@include mq(l, max) { @include mq(l, max) {
display: none; display: none;
@ -233,9 +236,9 @@
} }
.product-name { .product-name {
width: 32.425%;
padding-right: 0; padding-right: 0;
padding-left: 0; padding-left: 0;
width: 32.425%;
@include mq(l, max) { @include mq(l, max) {
position: absolute; position: absolute;
@ -302,14 +305,14 @@
} }
td.shipping-date { td.shipping-date {
padding-left: 0;
font-weight: 400;
font-family: $font-family-secundary;
text-align: start; text-align: start;
color: $color-gray12; color: $color-gray12;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
width: 14.85%; width: 14.85%;
padding-left: 0;
font-weight: 400;
font-family: $font-family-secundary;
@include mq(l, max) { @include mq(l, max) {
display: none; display: none;
@ -403,6 +406,10 @@
} }
td.quantity { td.quantity {
padding: 0;
width: max-content !important;
border: 1px solid $color-gray3;
border-radius: 8px;
align-items: center; align-items: center;
border-radius: 0; border-radius: 0;
box-sizing: border-box; box-sizing: border-box;
@ -413,10 +420,6 @@
max-width: 99px; max-width: 99px;
min-height: 34px; min-height: 34px;
min-width: 99px; min-width: 99px;
padding: 0;
width: max-content !important;
border: 1px solid $color-gray3;
border-radius: 8px;
@include mq(f, max) { @include mq(f, max) {
max-width: 70px; max-width: 70px;
@ -679,6 +682,11 @@
} }
button.shp-open-options { button.shp-open-options {
letter-spacing: 0.05em;
color: $color-black;
outline: none;
padding: 12px 40px;
transition: all 0.2s linear;
width: 100%; width: 100%;
background-color: $color-gray11; background-color: $color-gray11;
border: none; border: none;
@ -686,11 +694,6 @@
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
letter-spacing: 0.05em;
color: $color-black;
outline: none;
padding: 12px 40px;
transition: all 0.2s linear;
@include mq(l, max) { @include mq(l, max) {
width: 157px; width: 157px;
@ -742,6 +745,11 @@
} }
.srp-pickup-my-location__button { .srp-pickup-my-location__button {
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
letter-spacing: 0.05em;
background-color: $color-blue2; background-color: $color-blue2;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
@ -751,11 +759,6 @@
margin-top: 7px; margin-top: 7px;
padding: 13px 0; padding: 13px 0;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
letter-spacing: 0.05em;
@include mq(xxl, min) { @include mq(xxl, min) {
height: 60.98px; height: 60.98px;
} }
@ -771,11 +774,12 @@
} }
span { span {
letter-spacing: 0.05em;
color: $color-white;
font-weight: 700; font-weight: 700;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
letter-spacing: 0.05em;
color: $color-white;
@include mq(xxl, min) { @include mq(xxl, min) {
font-weight: 700; font-weight: 700;
font-size: 28px; font-size: 28px;
@ -798,15 +802,15 @@
} }
&__wrapper { &__wrapper {
font-weight: normal;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
background-color: $color-white; background-color: $color-white;
border-radius: 100px; border-radius: 100px;
width: 100%; width: 100%;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
@include mq(l, max) { @include mq(l, max) {
width: 343px; width: 343px;
@ -827,12 +831,12 @@
} }
label { label {
width: 50%;
font-weight: 400;
font-size: 14px;
line-height: 19px; line-height: 19px;
background-color: $color-white; background-color: $color-white;
border-radius: 100px; border-radius: 100px;
width: 50%;
font-weight: 400;
font-size: 14px;
@include mq(xxl, min) { @include mq(xxl, min) {
font-weight: 400; font-weight: 400;
@ -840,8 +844,8 @@
line-height: 38px; line-height: 38px;
} }
&:active { // &:active {
} // }
} }
} }

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

@ -80,6 +80,7 @@ body .container-main.container-order-form .orderform-template.active {
} }
.summary-cart-template-holder { .summary-cart-template-holder {
height: auto !important; height: auto !important;
.summary-totalizers { .summary-totalizers {
margin: 0; margin: 0;
} }
@ -190,8 +191,8 @@ body .container-main.container-order-form .orderform-template.active {
margin-top: 12px; margin-top: 12px;
width: 100%; width: 100%;
} }
.payment-method { // .payment-method {
} // }
} }
.payment-group { .payment-group {
@ -206,6 +207,8 @@ body .container-main.container-order-form .orderform-template.active {
gap: 12px; gap: 12px;
width: 100%; width: 100%;
a { a {
width: 91.39%;
margin: 0;
display: none; display: none;
border: 1px solid rgb(0, 0, 0, 0.3); border: 1px solid rgb(0, 0, 0, 0.3);
border-radius: 6px; border-radius: 6px;
@ -213,16 +216,14 @@ body .container-main.container-order-form .orderform-template.active {
align-items: center; align-items: center;
text-align: center; text-align: center;
padding: 0 8px; padding: 0 8px;
width: 91.39%;
margin: 0;
@media (max-width: 1024px) { @media (max-width: 1024px) {
width: 100%; width: 100%;
} }
span { span {
font-size: 14px;
width: 100%; width: 100%;
padding: 11px 0; padding: 11px 0;
font-weight: 400; font-weight: 400;
font-size: 14px;
line-height: 24px; line-height: 24px;
letter-spacing: -0.01em; letter-spacing: -0.01em;
color: #58595b; color: #58595b;
@ -234,11 +235,12 @@ body .container-main.container-order-form .orderform-template.active {
span { span {
font-size: 0 !important; font-size: 0 !important;
&::after { &::after {
letter-spacing: -0.01em;
font-family: "Open Sans"; font-family: "Open Sans";
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
letter-spacing: -0.01em;
content: "Boleto Faturado"; content: "Boleto Faturado";
@media (min-width: 2500px) { @media (min-width: 2500px) {
font-style: normal; font-style: normal;

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

@ -41,6 +41,7 @@
&-links { &-links {
.link-choose-products { .link-choose-products {
font-size: 0px;
background: $white; background: $white;
transition: ease-in 0.22s all; transition: ease-in 0.22s all;
outline: none; outline: none;
@ -50,7 +51,6 @@
text-align: center; text-align: center;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: $black; color: $black;
font-size: 0px;
text-transform: uppercase; text-transform: uppercase;
border: 1px solid #000000; border: 1px solid #000000;
border-radius: 0%; border-radius: 0%;

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

@ -119,13 +119,13 @@ body {
&::before, &::before,
&::after { &::after {
height: 2px;
width: 8px;
margin-top: 8px;
content: ""; content: "";
background: $color-gray2; background: $color-gray2;
display: block; display: block;
float: right; float: right;
height: 2px;
width: 8px;
margin-top: 8px;
} }
&::before { &::before {