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

feat: add estilo pagamento completo

Browse Source
This commit is contained in:
Mateus Antonio Rodrigues Lopes 2022-12-16 18:31:38 -03:00
parent 826aedf58b
commit 6e584b6dfb
4 changed files with 248 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -178,17 +178,17 @@
.accordion-heading {
span {
color: #303030;
color: $color-black2;
padding: 0;
i::before {
fill: #303030;
fill: $color-black2;
}
}
a {
align-items: center;
background-color: #303030;
background-color: $color-black2;
border-radius: 8px;
border: none;
color: $color-white;
@ -273,14 +273,14 @@
/* Shipping configurations */
.ship-postalCode small a {
color: #303030;
color: $color-black2;
font-weight: 500;
text-decoration: underline;
}
.vtex-omnishipping-1-x-deliveryGroup {
p {
color: #303030;
color: $color-black2;
font-size: 14px;
font-weight: 500;
}
@ -292,7 +292,7 @@
label {
background-color: $color-white;
box-shadow: none;
color: #303030;
color: $color-black2;
padding: 8px 12px;
svg path {
@ -303,7 +303,7 @@
}
.delivery-address-title {
color: #303030;
color: $color-black2;
font-size: 14px;
font-weight: 500;
}
@ -316,7 +316,7 @@
background: none;
border-color: $color-gray4;
border-radius: 0;
color: #303030;
color: $color-black2;
padding: 12px;
@include mq(md, max) {
@ -324,7 +324,7 @@
}
a {
color: #303030;
color: $color-black2;
font-weight: 500;
text-decoration: underline;
}
@ -344,8 +344,8 @@
}
.vtex-omnishipping-1-x-summaryChange {
border-color: #303030;
color: #303030;
border-color: $color-black2;
color: $color-black2;
}
.vtex-omnishipping-1-x-deliveryChannelsToggle {
@ -373,6 +373,127 @@
}
}
.step.accordion-group {
&.client-profile-data.filled {
padding-bottom: 36px !important;
.accordion-heading {
font-family: $font-family-secondary;
margin-bottom: 25px !important;
}
}
&.shipping-data {
padding-bottom: 35px;
margin-bottom: 16px;
.accordion-heading {
margin-bottom: 25px !important;
}
.vtex-omnishipping-1-x-SummaryItemGroup {
padding: 0 !important;
.vtex-omnishipping-1-x-SummaryItemContent {
display: flex;
font-size: 12px;
align-items: flex-end;
padding-left: 3px;
.shp-summary-group-info {
padding-left: 0 !important;
border: none;
.shp-summary-group-address {
margin-bottom: 0;
.address-summary {
padding: 0 0 25px 0;
color: $color-gray2;
.street {
display: inline-block;
margin-bottom: 10px;
}
:nth-child(8) {
display: block;
margin-top: 10px;
}
.line3-delimiter {
display: none;
}
}
}
.shp-summary-package {
padding-left: 0;
}
.shp-summary-group-price {
padding: 0;
}
}
}
}
.link-change-shipping {
display: none;
}
}
}
.payment-data .accordion-group {
width: auto !important;
.accordion-heading span {
font-size: 16px;
font-weight: 400;
}
.payment-group-list-btn {
display: flex;
flex-direction: column;
gap: 12px;
}
.payment-group-item {
margin-left: 0;
padding: 0;
border: none;
background: none;
&-text {
border: solid 1px $color-gray12;
border-radius: 6px;
color: $color-gray13;
background: $color-gray14;
height: 50px;
width: 209px;
display: flex;
font-size: 14px;
margin: 0;
padding: 0;
align-items: center;
justify-content: center;
background-image: none !important;
}
&.active {
.payment-group-item-text {
border-color: $color-orange;
color: $color-orange;
background-color: $color-gray11;
}
}
}
.steps-view {
width: 363px;
}
}
.shipping-data.active {
#shipping-data .accordion-group {
padding-bottom: 44px;
@ -494,3 +615,27 @@
}
}
}
.box-info {
color: $color-gray2;
.client-profile-email,
span.name {
margin-bottom: 6px;
}
span.tel {
display: block;
margin-top: 6px;
}
}
.icon-user,
.icon-home,
.icon-credit-card {
display: none;
}
.accordion-heading {
font-family: $font-family-secondary;
}

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

@ -83,7 +83,7 @@
}
#go-to-cart-button a {
color: #303030;
color: $color-black2;
text-decoration: underline;
}
@ -161,6 +161,7 @@
.product-name {
padding-right: 0;
width: 300px !important;
@include mq(lg, max) {
width: 250px;
@ -203,8 +204,22 @@
}
}
th.shipping-date {
padding-right: 0;
padding-left: 0;
}
td.product-price {
bottom: -12px;
flex-direction: column;
width: 104px;
padding-right: 49px;
}
.product-price {
min-width: 100px;
text-align: left;
padding-left: 91px;
min-width: none;
@include mq(md, max) {
min-width: 78px;
}
@ -231,17 +246,23 @@
}
td.quantity {
display: flex;
margin-left: 0px;
margin-top: 16px;
padding-right: 0px;
height: 34px;
align-items: center;
border: 1px solid $color-gray3;
border-radius: 8px;
box-sizing: border-box;
display: flex;
justify-content: center;
margin: 6px auto 0;
max-height: 38px;
max-width: 118px;
width: 99px;
padding: 0;
width: max-content !important;
:before {
padding: 0 !important;
}
@media (max-width: 490px) {
margin-left: 84px !important;
@ -267,6 +288,18 @@
}
}
#item-quantity-change-decrement-2621 {
padding-right: 5px;
}
#item-quantity-change-increment-2621 {
padding-left: 5px;
}
#item-quantity-2621 {
padding: 0;
}
.icon-plus-sign,
.icon-minus-sign {
&::before {
@ -312,12 +345,24 @@
}
.quantity-price {
padding-left: 67px;
font-weight: 400;
@include mq(md, max) {
display: none;
}
}
th.quantity,
th.quantity-price,
td.quantity-price {
text-align: left;
}
td.quantity-price {
padding-right: 0px;
width: fit-content;
}
.item-remove {
@media (max-width: 490px) {
top: 0;
@ -545,13 +590,13 @@
.srp-result {
strong,
.srp-items {
color: #303030;
color: $color-black2;
font-weight: 400;
font-size: 14px;
}
#deliver-at-text a {
color: #303030;
color: $color-black2;
font-size: 16px;
font-weight: 500;
@ -563,7 +608,7 @@
.srp-shipping-current-single {
border: 1px solid $color-gray4;
border-radius: 0;
color: #303030;
color: $color-black2;
margin: 16px 0 0;
padding: 4px 12px;
@ -582,7 +627,7 @@
.srp-shipping-current-many {
&__name {
color: #303030;
color: $color-black2;
}
&__sla {
@ -604,7 +649,7 @@
&-totalizers {
padding: 0;
width: 346px;
width: 362px;
.coupon-data {
font-family: $font-family-secondary;
@ -638,16 +683,16 @@
}
.link-coupon-add {
color: #303030;
color: $color-black2;
font-size: 12px;
text-decoration: underline;
}
.coupon-label {
display: flex;
margin-left: 20px;
text-align: left;
label {
margin-top: 49px;
margin-bottom: 4px;
font-family: $font-family-secondary;
font-style: normal;
@ -660,6 +705,7 @@
}
.coupon-fields {
width: fit-content;
margin-bottom: 32px;
@include mq(sm, max) {
@ -676,15 +722,15 @@
}
input {
border: 2px solid $color-gray5;
border: 1px solid $color-gray5;
border-radius: 5px;
box-shadow: none;
color: $color-gray6;
font-size: 12px;
height: 34px;
width: 178px;
padding: 0 12px;
font-family: $font-family-secondary;
max-width: 160px;
@include mq(sm, max) {
max-width: 100%;
@ -694,8 +740,9 @@
button {
background: $color-blue2;
text-shadow: none !important;
border: none;
border-radius: 5px;
border-radius: 8px;
color: $color-black;
font-size: 14px;
font-weight: 400;
@ -771,7 +818,6 @@
.cart-links-bottom {
display: flex;
flex-direction: column;
width: 343px;
@include mq(md, max) {
padding: 0 16px;
@ -815,6 +861,7 @@
font-weight: 700;
transition: ease-in 0.22s all;
padding: 12px 19px;
width: 316px;
&:hover {
background-color: darken($color-green, 5);

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

@ -10,6 +10,10 @@ body .container-main.container-order-form .orderform-template.active {
border-radius: 8px;
padding: 24px 0 0 0;
.shipping-date.pull-left {
display: none;
}
.cart {
padding: 0 17px 19px 17px;
@ -94,6 +98,22 @@ body .container-main.container-order-form .orderform-template.active {
padding: 25px 0 25px 17px;
color: $color-gray2;
}
#payment-data-submit {
background-color: $color-green2;
border-radius: 8px;
.icon-lock {
display: none;
}
span {
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.05em;
font-size: 14px;
}
}
}
.orderform-template-holder {
width: 66.1132%;

7
checkout/src/arquivos/sass/utils/_variaveis.scss
View File

@ -20,13 +20,20 @@ $color-gray7: #989898;
$color-gray8: #ededed;
$color-gray9: #e0e0e0;
$color-gray10: #808080;
$color-gray11: #f4f5f7;
$color-gray12: #b3b3b3;
$color-gray13: #58595b;
$color-gray14: #fbfbfb;
$color-blue: #4267b2;
$color-blue2: #00c8ff;
$color-red: #ff0000;
$color-orange: #f15a31;
$color-green: #4caf50;
$color-green2: #298541;
/* Grid breakpoints */
$grid-breakpoints: (