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

feat(checkout): leayout desktop

Browse Source
This commit is contained in:
Gabriel Ferraz Nogueira 2022-12-18 21:47:01 -03:00
parent a8d3e1f344
commit fc9fc11788
3 changed files with 169 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -173,11 +173,28 @@
.shipping-data, .shipping-data,
.payment-data, .payment-data,
.client-profile-data { .client-profile-data {
.ship-country {
display: none;
}
.accordion-group { .accordion-group {
border-radius: 0; border-radius: 0;
border: 1px solid $gray-100; border: 1px solid $gray-100;
font-family: $font-family; font-family: $font-family;
.vtex-omnishipping-1-x-address {
div {
display: flex;
flex-direction: column;
P {
input {
width: 99%;
max-width: 100%;
}
}
}
}
.accordion-heading { .accordion-heading {
span { span {
margin-bottom: 8px; margin-bottom: 8px;
@ -192,7 +209,7 @@
i { i {
position: absolute; position: absolute;
right: 0; right: 8px;
width: 19.2px; width: 19.2px;
height: 18px; height: 18px;
cursor: pointer; cursor: pointer;
@ -212,6 +229,14 @@
display: none; display: none;
} }
.icon-home {
display: none;
}
// .icon-credit-card {
// display: none;
// }
span[data-i18n="clientProfileData.identification"] { span[data-i18n="clientProfileData.identification"] {
color: $white; color: $white;
margin: 0; margin: 0;
@ -232,7 +257,6 @@
content: ""; content: "";
height: 50px; height: 50px;
width: 50px; width: 50px;
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png;");
} }
} }
@ -249,7 +273,7 @@
} }
.accordion-inner { .accordion-inner {
margin: 15px 0 0 8px; // margin: 15px 0 0 8px;
/* General configurations */ /* General configurations */
@ -305,9 +329,9 @@
button.submit { button.submit {
width: 100%; width: 100%;
border: none; border: none;
margin-top: 42px;
border-radius: 8px; border-radius: 8px;
background: $blue; background: $blue;
margin-top: 42px;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;
cursor: pointer; cursor: pointer;
@ -320,12 +344,27 @@
} }
/* Shipping configurations */ /* Shipping configurations */
.ship-postalCode {
display: flex;
flex-direction: column;
.ship-postalCode small a { #ship-postalCode {
color: #303030; width: 95% !important;
max-width: 95% !important;
margin-bottom: 10px;
}
small a {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $gray-500;
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: underline;
} }
}
.vtex-omnishipping-1-x-deliveryGroup { .vtex-omnishipping-1-x-deliveryGroup {
p { p {
@ -343,6 +382,7 @@
box-shadow: none; box-shadow: none;
color: $gray-800; color: $gray-800;
padding: 8px 12px; padding: 8px 12px;
border-bottom: 1px solid $gray-25;
svg path { svg path {
fill: $blue; fill: $blue;
@ -362,20 +402,41 @@
} }
.address-summary { .address-summary {
position: relative;
background: none; background: none;
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
border-color: $gray-200; border-color: $gray-200;
border-radius: 0; border-radius: 8px;
color: #303030; color: $gray-600;
padding: 12px; padding: 12px 12px 12px 43px;
&::before {
content: "";
position: absolute;
left: 12.86px;
top: 35%;
width: 21px;
height: 23px;
background-size: 21px 23px;
background-image: url(https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png);
}
@include mq(md, max) { @include mq(md, max) {
background-position: 8px 9px; background-position: 8px 9px;
} }
a { a {
color: #303030; color: $blue;
font-weight: 500; font-family: $font-family;
text-decoration: underline; font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
margin-left: 84%;
} }
} }
@ -392,7 +453,30 @@
padding-left: 16px; padding-left: 16px;
} }
.vtex-omnishipping-1-x-SummaryItemContent {
display: block;
.vtex-omnishipping-1-x-SummaryItemInfo {
border: none;
.vtex-omnishipping-1-x-SummaryItemAddress {
.address-summary-BRA {
padding: 12px 12px 12px 12px;
}
.address-summary-BRA::before {
display: none;
}
}
}
}
.vtex-omnishipping-1-x-submitPaymentButton {
button.submit {
margin-top: 0;
}
}
.vtex-omnishipping-1-x-summaryChange { .vtex-omnishipping-1-x-summaryChange {
display: none;
border-color: #303030; border-color: #303030;
color: $black; color: $black;
} }
@ -405,7 +489,63 @@
.vtex-omnishipping-1-x-deliveryOptionActive { .vtex-omnishipping-1-x-deliveryOptionActive {
color: $black; color: $black;
// text-shadow: 1.3px 1px lighten($black, 50); }
.box-step-content {
width: 102%;
form {
.payment-group {
margin-top: 0;
}
.steps-view {
width: 64%;
padding: 0;
}
}
.link-gift-card {
display: none !important;
}
.payment-group-list-btn {
margin: 0;
a {
display: none;
padding: 13px 9px;
border: 1px solid $gray-600;
border-radius: 6px;
text-align: center;
margin: 12px 0 0 0;
span {
margin: 0 !important;
padding: 0 !important;
background-image: none !important;
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 24px;
color: $gray-900;
}
span:hover {
color: $orange;
}
}
a:hover {
border: 1px solid $orange;
}
a[data-name="American Express"] {
display: block;
}
a[data-name="Boleto Bancário"] {
display: block;
}
}
} }
} }
} }

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

@ -24,6 +24,10 @@
border-radius: 5px; border-radius: 5px;
padding: 30px 17px 0px 17px; padding: 30px 17px 0px 17px;
.clearfix::before {
display: none;
}
@include mq(md, max) { @include mq(md, max) {
margin: 0px 0 25px 0; margin: 0px 0 25px 0;
border-left: none; border-left: none;
@ -150,6 +154,11 @@
color: $white; color: $white;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;
.store-country-BRA {
margin: 0;
padding: 0;
}
} }
} }
@ -630,11 +639,12 @@
.srp-delivery-select { .srp-delivery-select {
border: 1px solid $gray-200; border: 1px solid $gray-200;
border-radius: 5px;
} }
.srp-delivery-select-container { .srp-delivery-select-container {
border: 1px solid $gray-200; border: 1px solid $gray-200;
border-radius: 0; border-radius: 5px;
.srp-shipping-current-many { .srp-shipping-current-many {
&__name { &__name {

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

@ -19,9 +19,12 @@ $gray-500: #292929;
$gray-600: #7d7d7d; $gray-600: #7d7d7d;
$gray-700: #bdbdbd; $gray-700: #bdbdbd;
$gray-800: #828282; $gray-800: #828282;
$gray-900: #58595b;
$blue: #00c8ff; $blue: #00c8ff;
$orange: #f15a31;
$color-gray: #6c6c6c; $color-gray: #6c6c6c;
$color-gray3: #f0f0f0; $color-gray3: #f0f0f0;