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

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

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

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

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

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

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