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

feat(checkout): melhora checkout #3

Merged
ViniciusDeniz merged 1 commits from feature/checkout into main 2022-12-18 22:38:51 +00:00
Conversation 0 Commits 1 Files Changed 5 +134 -55
5 changed files with 134 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -161,22 +161,23 @@
padding: 16px; padding: 16px;
.accordion-heading { .accordion-heading {
.accordion-toggle {
margin: 0;
.icon-home {
display: none;
}
}
span { span {
color: #292929; color: #292929;
margin-bottom: 8px; margin-bottom: 8px;
font-size: 0px; font-size: 16px;
margin-top: 7px; margin-top: 7px;
margin-bottom: 25px; margin-bottom: 25px;
padding: 0; padding: 0;
&::after {
content: "Identificação";
font-size: 16px;
font-weight: 400;
line-height: 19px;
}
i::before { i::before {
fill: #303030; fill: #303030;
display: none;
} }
} }
@ -195,22 +196,91 @@
.accordion-inner { .accordion-inner {
padding: 0; padding: 0;
.totalizers-list {
color: $color-gray2;
tr {
border: 1px solid $color-gray5;
}
}
.notification {
margin-top: 14px;
color: $color-gray2;
}
.box-step {
.vtex-omnishipping-1-x-addressForm {
.vtex-omnishipping-1-x-address {
.ship-number {
display: block;
width: 100%;
#ship-number {
display: block;
width: 100%;
}
}
.ship-complement {
#ship-complement {
display: block;
width: 100%;
}
}
}
}
.vtex-omnishipping-1-x-addressFormPart1 {
.ship-country {
display: none;
}
.ship-postalCode {
max-width: 100%;
#ship-postalCode {
display: block;
width: 100%;
max-width: 100%;
margin: 0 0 10px;
}
}
}
.box-info {
padding-top: 25px;
}
.shipping-summary-info {
color: $color-gray2;
padding-top: 15px;
}
.box-edit {
.row-fluid {
.box-client-info-pf {
margin-top: 36px;
}
}
.box-client-info {
.newsletter {
margin: 12px 0 0;
}
}
}
}
/* General configurations */ /* General configurations */
.client-notice { .client-notice {
color: $color-black; color: $color-black;
display: none;
} }
p { p {
label { label {
color: $color-black; color: #7d7d7d;
font-weight: 500; font-weight: 500;
} }
select, select,
input { input {
border-radius: 0; border-radius: 5px;
border: 1px solid $color-gray4; border: 1px solid $color-gray5;
box-shadow: none; box-shadow: none;
} }
@ -220,11 +290,13 @@
} }
.box-client-info-pj { .box-client-info-pj {
display: none;
.link a#is-corporate-client, .link a#is-corporate-client,
.link a#not-corporate-client { .link a#not-corporate-client {
color: $color-black; color: $color-black;
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: underline;
display: none;
} }
} }
@ -235,17 +307,24 @@
button.submit { button.submit {
border: none; border: none;
border-radius: 5px; border-radius: 5px;
background: $color-black; background: $color-blue;
margin-top: 8px; margin-top: 39px;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;
color: $color-white;
width: 100%;
font-weight: 700;
font-size: 14px;
line-height: 19.07px;
cursor: pointer;
text-transform: uppercase;
&:hover { &:hover {
background: lighten($color-black, 5); background: lighten($color-blue, 5);
} }
&:active { &:active {
background: darken($color-black, 5); background: darken($color-blue, 5);
} }
} }
@ -303,7 +382,7 @@
} }
a { a {
color: #303030; color: $color-blue;
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: underline;
} }
@ -328,12 +407,12 @@
} }
.vtex-omnishipping-1-x-deliveryChannelsToggle { .vtex-omnishipping-1-x-deliveryChannelsToggle {
background-color: #d8c8ac; background-color: $color-white;
border: 1px solid #d8c8ac; border: 1px solid $color-black;
} }
.vtex-omnishipping-1-x-deliveryOptionActive { .vtex-omnishipping-1-x-deliveryOptionActive {
text-shadow: 1.3px 1px lighten($color-black, 50); color: $color-black;
} }
} }
} }

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

@ -16,7 +16,6 @@
.cart { .cart {
border: 3px solid $color-gray3; border: 3px solid $color-gray3;
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px; border-radius: 5px;
margin-bottom: 48px !important; margin-bottom: 48px !important;
@ -29,10 +28,21 @@
} }
.cart-fixed.affix { .cart-fixed.affix {
position: relative !important; position: relative !important;
z-index: none !important;
} }
.cart-fixed { .cart-fixed {
font-family: $font-family; font-family: $font-family;
width: 100%; width: 100%;
z-index: none !important;
.summary-cart-template-holder {
z-index: none !important;
overflow: none;
.cart {
border: none;
}
}
h2 { h2 {
background: $color-white; background: $color-white;
border: none; border: none;
@ -66,17 +76,6 @@
.price { .price {
color: #7d7d7d; color: #7d7d7d;
} }
.shipping-date {
font-size: 0 !important;
}
&::after {
content: "Frete";
color: #7d7d7d;
font-size: 14px;
line-height: 16.38px;
}
} }
} }
@ -98,18 +97,18 @@
} }
#payment-data-submit { #payment-data-submit {
background: $color-black; background: $color-green;
border: none; border: none;
border-radius: 0; border-radius: 8px;
color: $color-white; color: $color-white;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;
&:hover { &:hover {
background: lighten($color-black, 5); background: lighten($color-green, 5);
} }
&:active { &:active {
background: darken($color-black, 5); background: darken($color-green, 5);
} }
} }
} }

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

@ -4,6 +4,7 @@ body .container-main.container-order-form .orderform-template.active {
margin-left: unset; margin-left: unset;
margin-right: 0; margin-right: 0;
float: right; float: right;
overflow: none !important;
} }
.orderform-template-holder { .orderform-template-holder {
width: 66.1132%; width: 66.1132%;

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

@ -13,7 +13,7 @@ $color-gray: #6c6c6c;
$color-gray2: #7d7d7d; $color-gray2: #7d7d7d;
$color-gray3: #f0f0f0; $color-gray3: #f0f0f0;
$color-gray4: #8d8d8d; $color-gray4: #8d8d8d;
$color-gray5: #e5e5e5; $color-gray5: #e0e0e0;
$color-blue: #00c8ff; $color-blue: #00c8ff;
$color-green: #4caf50; $color-green: #4caf50;

38
checkout/src/arquivos/sass/utils/utils.scss
View File

@ -1,18 +1,18 @@
.sprite{ .sprite {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
.no-buttom { .no-buttom {
border: none; border: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
width: auto; width: auto;
overflow: visible; overflow: visible;
background: transparent; background: transparent;
outline: none; outline: none;
text-align: inherit; text-align: inherit;
/* inherit font & color from ancestor */ /* inherit font & color from ancestor */
color: inherit; color: inherit;
@ -26,24 +26,24 @@
-moz-osx-font-smoothing: inherit; -moz-osx-font-smoothing: inherit;
/* Corrects inability to style clickable `input` types in iOS */ /* Corrects inability to style clickable `input` types in iOS */
appearance: none; appearance: none;
&::-moz-focus-inner { &::-moz-focus-inner {
border: 0; border: 0;
padding: 0; padding: 0;
} }
} }
.itens-inline {
.itens-inline{ > * {
>*{ display: inline-block;} display: inline-block;
}
} }
%notificacao{ %notificacao {
padding: 7.5px 10px;
padding: 7.5px 10px ; min-height: 1em;
min-height: 1em; border-radius: 3px;
border-radius: 3px; border-right: solid 5px;
border-right: solid 5px; display: block;
display: block;
} }