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

Merge pull request 'feat(checkout): criado e modificado estilização.' (#7) from feature/checkout-autenticacao into development

Browse Source 
Reviewed-on: #7
This commit is contained in:
Luiz Felipe Silva 2022-12-27 00:01:25 +00:00
commit 8ec10356f0
1 changed files with 820 additions and 287 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,16 +1,144 @@
.checkout-container {
.client-pre-email {
border-color: $color-gray4;
font-family: $font-family;
padding-top: 8px;
.link-cart { .mini-cart {
a { .cart {
color: $color-black; @include mq(xl, min) {
max-height: initial;
}
}
}
.checkout-container {
.mini-cart {
.affix-top,
.affix {
height: 409px !important;
@include mq(xl, min) {
height: 630px !important;
}
.summary-cart-template-holder {
height: 36% !important;
@include mq(xl, min) {
height: auto !important;
}
}
.cart {
border: none;
ul li:not(:first-child) {
padding: 0;
margin: 0;
}
}
.summary-template-holder {
.accordion-group {
.accordion-inner {
tbody {
tr {
border: 1px solid $color-gray9;
border-left: 0;
border-right: 0;
td.info,
td.monetary {
padding: 20px 17px;
font-family: $font-family;
font-size: 14px; font-size: 14px;
font-weight: 400;
line-height: 19px;
color: $color-gray2;
@include mq(xl, min) {
font-size: 28px;
line-height: 38px;
}
}
td.info {
width: -webkit-fill-available;
@include mq(xl, min) {
width: max-content;
}
}
td.monetary {
width: 100%;
@include mq(xl, min) {
width: 20px;
}
}
}
}
tfoot {
td.info,
td.monetary {
padding: 25px 17px 0 17px;
}
td.info {
width: -webkit-fill-available;
@include mq(xl, min) {
width: max-content;
}
}
td.monetary {
width: 100%;
}
}
}
}
}
}
#go-to-cart-button {
a {
font-family: $font-family;
font-size: 12px;
font-weight: 400;
line-height: 16px;
color: $color-black2;
text-decoration: none;
margin: 10px 17px 5px 0;
@include mq(xl, min) {
font-size: 24px;
line-height: 33px;
}
&:hover { &:hover {
color: lighen($color-black, 10); text-decoration: underline;
}
}
}
}
.client-pre-email {
border-color: $color-black2;
font-family: $font-family;
.link-cart {
margin-top: 9px;
a {
font-family: $font-family-secundary;
font-size: 14px;
font-weight: 400;
line-height: 16px;
text-transform: uppercase;
color: $color-black2;
@include mq(xl, min) {
font-size: 28px;
line-height: 33px;
} }
} }
} }
@ -21,31 +149,52 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
h3 { span,
margin-bottom: 16px;
span {
color: #303030;
font-size: 24px;
}
small { small {
color: $color-gray4; font-family: $font-family-secundary;
font-size: 20px;
font-weight: 400;
line-height: 23px;
text-transform: uppercase;
color: $color-black2;
@include mq(xl, min) {
font-size: 40px;
line-height: 47px;
} }
} }
} }
.client-email { .client-email {
margin: 0 0 16px; margin: 6px 0 9px;
max-width: 562px;
@include mq(xl, min) {
max-width: 971px;
}
i {
right: 130px;
top: 6px;
}
input { input {
font-size: 12px;
font-weight: 400;
line-height: 16px;
height: 50px;
box-shadow: none; box-shadow: none;
color: $color-black; color: $color-black1;
font-family: $font-family; font-family: $font-family;
padding: 0 16px; padding: 0 15px;
border: 2px solid $color-gray3; border: 1px solid $color-black2;
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px; border-radius: 5px 10px 10px 5px;
@include mq(xl, min) {
font-size: 24px;
line-height: 33px;
}
@media (max-width: 490px) { @media (max-width: 490px) {
width: auto; width: auto;
@ -53,13 +202,24 @@
} }
button { button {
background-color: $color-black; height: 50px;
border-radius: 5px; width: 126px;
background-color: $color-blue2;
border-radius: 0px 8px 8px 0px;
border: none; border: none;
font-family: $font-family;
height: 54px;
right: 0; right: 0;
top: 0; top: 0;
outline: 0;
span {
font-family: $font-family;
font-size: 14px;
font-weight: 700;
line-height: 19px;
letter-spacing: 0.05em;
color: $color-black2;
text-transform: uppercase;
}
@media (max-width: 490px) { @media (max-width: 490px) {
height: 48px; height: 48px;
@ -69,19 +229,47 @@
} }
span.help.error { span.help.error {
font-family: $font-family;
font-size: 12px;
font-weight: 700;
line-height: 16px;
color: red; color: red;
text-transform: capitalize;
margin-top: 3px;
@include mq(xl, min) {
font-size: 24px;
line-height: 33px;
}
} }
} }
.emailInfo { .emailInfo {
margin: 11px auto 0 auto;
padding: 16px; padding: 16px;
background-color: $color-white; background-color: $color-white1;
border: 1px solid $color-gray4; border: 1px solid $color-black2;
border-radius: 0; color: $color-black2;
font-family: $font-family;
font-size: 12px;
font-weight: 700;
line-height: 16px;
max-width: 400px;
border-radius: 5px;
@include mq(xl, min) {
max-width: 776px;
font-size: 24px;
line-height: 33px;
}
h3 { h3 {
color: #303030;
margin: 0 0 8px 0; margin: 0 0 8px 0;
@include mq(xl, min) {
font-size: 24px;
line-height: 33px;
}
} }
ul { ul {
@ -89,42 +277,132 @@
li { li {
span { span {
color: $color-black; color: $color-black2;
} }
i::before { i::before {
color: $color-black; color: $color-blue2;
font-size: 1rem; font-size: 1rem;
opacity: 1; opacity: 1;
width: 17px;
height: 10px;
@include mq(xl, min) {
font-size: 25px;
width: 33px;
height: 23px;
}
} }
} }
} }
i::before { i::before {
color: $color-black; color: $color-black1;
font-size: 6rem; font-size: 7rem;
opacity: 0.5; opacity: 0.5;
@include mq(xl, min) {
font-size: 150px;
} }
} }
} }
label {
margin-top: 45px;
}
}
.client-profile-data.filled {
height: 106px;
}
.shipping-data, .shipping-data,
.payment-data, .payment-data,
.client-profile-data { .client-profile-data {
#client-email {
width: 96.4%;
@include mq(xl, min) {
height: 61px;
width: 97.7%;
}
}
.accordion-group { .accordion-group {
border-radius: 0; border-radius: 8px;
border: 1px solid $color-gray4; border: 1px solid $color-gray9;
font-family: $font-family; font-family: $font-family;
padding: 16px; padding: 20px 16px;
@include mq(xl, min) {
padding: 24px 34px;
}
&:nth-child(1) {
padding: 20px 16px 24px 16px;
@include mq(xl, min) {
padding: 24px 34px;
}
}
.accordion-heading { .accordion-heading {
span {
color: #303030;
margin-bottom: 8px; margin-bottom: 8px;
.accordion-toggle {
span {
@include mq(xl, min) {
margin: 0;
}
}
}
.collapsed {
a {
padding: 8px 8px 6px 0px;
}
}
span {
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: space-between;
padding: 0; padding: 0;
font-family: $font-family-secundary;
font-size: 16px;
font-weight: 400;
line-height: 19px;
color: $color-black2;
@include mq(xl, min) {
font-size: 32px;
line-height: 37px;
margin-bottom: 15px;
}
.link-box-edit {
background-color: transparent;
outline: 0;
opacity: 100%;
border: none;
box-shadow: none;
}
[class^="icon-"]:not(.icon-user:first-child) {
content: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
cursor: pointer;
width: 20px;
height: 20px;
@include mq(xl, min) {
width: 40px;
height: 40px;
}
}
i::before { i::before {
fill: #303030; display: none;
} }
} }
@ -133,44 +411,155 @@
background-color: #303030; background-color: #303030;
border-radius: 8px; border-radius: 8px;
border: none; border: none;
color: $color-white; color: $color-white1;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 6px 5px 6px 8px; padding: 6px 5px 6px 8px;
} }
} }
ul {
display: none;
}
.accordion-inner { .accordion-inner {
padding: 0; padding: 0;
margin-top: 8px;
@include mq(xl, min) {
font-size: 28px;
line-height: 38px;
}
.box-info {
font-family: $font-family;
font-size: 12px;
font-weight: 400;
line-height: 16px;
letter-spacing: 0em;
@include mq(xl, min) {
font-size: 28px;
line-height: 38px;
}
.client-profile-email {
margin: 15px 0 0;
}
.client-profile-summary {
.name {
display: flex;
flex-direction: column;
margin: 5px 0;
}
.tel {
margin-bottom: 20px;
}
}
br {
display: none;
}
}
/* General configurations */ /* General configurations */
.client-notice { .client-notice {
color: $color-black; display: none;
color: $color-black1;
}
.newsletter {
@include mq(xl, min) {
margin: 12px 0;
}
} }
p { p {
label { label {
color: $color-black; display: flex;
font-weight: 500; align-items: center;
font-family: $font-family;
font-size: 14px;
font-weight: 400;
line-height: 19px;
color: $color-gray2;
@include mq(xl, min) {
font-size: 28px;
line-height: 38px;
}
}
.newsletter-label {
height: 18px;
margin-top: -5px;
#opt-in-newsletter {
margin-right: 8px;
width: 18px;
height: 18px;
min-width: auto;
@include mq(xl, min) {
width: 35px;
height: 35px;
}
}
.newsletter-text {
font-family: $font-family;
font-size: 12px;
font-weight: 400;
line-height: 16px;
@include mq(xl, min) {
font-size: 24px;
line-height: 33px;
}
}
} }
select, select,
input { input {
border-radius: 0; border-radius: 5px;
border: 1px solid $color-gray4; border: 1px solid $color-gray9;
box-shadow: none; box-shadow: none;
height: 42px;
padding: 0 0 0 11px;
margin-bottom: 4px;
min-width: 143px;
@include mq(xl, min) {
min-width: 270px;
height: 61px;
font-size: 28px;
line-height: 38px;
}
} }
.help.error { .help.error {
color: red; color: red;
margin-top: 0;
@include mq(xl, min) {
font-size: 23px;
width: auto;
} }
} }
}
.client-first-name,
.client-document {
margin-right: 15px;
}
.box-client-info-pj { .box-client-info-pj {
.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-black1;
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: underline;
} }
@ -182,57 +571,134 @@
button.submit { button.submit {
border: none; border: none;
border-radius: 5px; border-radius: 8px;
background: $color-black; background: $color-blue2;
margin-top: 8px; margin: 44px 0 24px 0;
outline: none; outline: none;
transition: all 0.2s linear; display: block;
font-family: $font-family;
font-size: 14px;
font-weight: 700;
line-height: 19px;
letter-spacing: 0.05em;
text-transform: uppercase;
width: 100%;
&:hover { @include mq(xl, min) {
background: lighten($color-black, 5); font-size: 28px;
} line-height: 38px;
height: 61px;
&:active {
background: darken($color-black, 5);
} }
} }
/* Shipping configurations */ /* Shipping configurations */
.ship-postalCode small a { .ship-postalCode {
color: #303030; label {
font-weight: 500; font-family: $font-family;
text-decoration: underline; font-size: 12px;
font-weight: 700;
line-height: 16px;
color: $color-gray2;
} }
input {
min-width: 96%;
}
small {
margin: 1px 0 0 0;
a {
font-weight: 500;
text-decoration: underline;
font-family: $font-family;
font-size: 12px;
font-weight: 400;
line-height: 16px;
color: $color-black1;
}
}
}
.vtex-omnishipping-1-x-deliveryGroup { .vtex-omnishipping-1-x-deliveryGroup {
p { p {
color: #303030; font-family: $font-family;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 700;
line-height: 19px;
color: $color-gray2;
margin: -7px 0 7px 0;
} }
.shp-lean { .shp-lean {
border: 1px solid $color-gray4; border: 1px solid $color-gray9;
border-radius: 0; border-radius: 8px;
label { label {
background-color: $color-white; background-color: $color-white1;
box-shadow: none; box-shadow: none;
color: #303030; color: #303030;
padding: 8px 12px; padding: 8px 12px;
svg path {
fill: #d8c8ac;
} }
.vtex-omnishipping-1-x-leanShippingOption {
svg {
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-M3Academy.png");
width: 18px;
height: 18px;
border-radius: 3px;
path {
fill: transparent;
}
}
}
.vtex-omnishipping-1-x-leanShippingOptionActive {
background-color: $color-white2;
svg {
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png");
}
path {
fill: transparent;
}
}
.vtex-omnishipping-1-x-leanShippingText {
border-right: 1px solid $color-gray9;
.shp-option-text-label,
.shp-option-text-time {
font-family: $font-family;
font-size: 12px;
font-weight: 400;
line-height: 16px;
color: $color-gray2;
}
}
.vtex-omnishipping-1-x-optionPrice {
font-family: $font-family;
font-size: 12px;
font-weight: 400;
line-height: 16px;
color: $color-gray2;
padding-left: 6px;
} }
} }
} }
.delivery-address-title { .delivery-address-title {
color: #303030; font-family: $font-family;
font-size: 14px; font-size: 12px;
font-weight: 500; font-weight: 700;
line-height: 16px;
letter-spacing: 0.05em;
text-align: left;
color: $color-gray2;
margin: -12px 0 7px 0;
} }
.shp-summary-group-info { .shp-summary-group-info {
@ -240,20 +706,36 @@
} }
.address-summary { .address-summary {
background: none; background: $color-white1;
border-color: $color-gray4; border-color: $color-gray9;
border-radius: 0; border-radius: 8;
color: #303030; padding: 12px 12px 12px 44px;
padding: 12px;
@include mq(md, max) { @include mq(md, max) {
background-position: 8px 9px; background-position: 8px 9px;
} }
span {
font-family: $font-family;
font-size: 12px;
font-weight: 400;
line-height: 16px;
color: $color-gray2;
}
a { a {
color: #303030; font-family: $font-family;
font-weight: 500; text-transform: lowercase;
text-decoration: underline; font-size: 12px;
font-weight: 400;
line-height: 16px;
color: $color-blue2;
text-decoration: none;
margin-left: 56px;
}
:nth-child(6) {
display: none;
} }
} }
@ -270,18 +752,69 @@
padding-left: 16px; padding-left: 16px;
} }
.vtex-omnishipping-1-x-address {
input {
width: 314px;
height: 35px;
margin-bottom: 2px;
}
label {
display: inline-flex;
font-family: $font-family;
font-size: 12px;
font-weight: 700;
line-height: 16px;
letter-spacing: 0.05em;
}
#ship-state {
display: block;
width: 314px;
outline: none;
}
}
.vtex-omnishipping-1-x-submitPaymentButton {
button {
margin: -11px 0 20px 0;
}
}
.vtex-omnishipping-1-x-addressFormPart1 {
.ship-country {
display: none;
}
}
.vtex-omnishipping-1-x-addressSummaryActive {
.address-summary {
background: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png")
no-repeat;
background-size: 25px;
background-position: 10px 19px;
}
}
.vtex-omnishipping-1-x-deliveryChannelsWrapper {
margin: 22px 0 25px;
}
.vtex-omnishipping-1-x-summaryChange { .vtex-omnishipping-1-x-summaryChange {
border-color: #303030; color: $color-gray6;
color: #303030; }
.vtex-omnishipping-1-x-deliveryChannelsOption {
color: $color-gray6;
} }
.vtex-omnishipping-1-x-deliveryChannelsToggle { .vtex-omnishipping-1-x-deliveryChannelsToggle {
background-color: #d8c8ac; background-color: $color-white1;
border: 1px solid #d8c8ac; border: 1px solid $color-black2;
} }
.vtex-omnishipping-1-x-deliveryOptionActive { .vtex-omnishipping-1-x-deliveryOptionActive {
text-shadow: 1.3px 1px lighten($color-black, 50); color: $color-black2;
} }
} }
} }