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(checkout): add estilizacao na tela email

Browse Source
This commit is contained in:
Mateus Antonio Rodrigues Lopes 2022-12-12 20:54:13 -03:00
parent bdf01a2c80
commit f1bbe9a0ad
3 changed files with 284 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,289 +1,320 @@
.checkout-container {
.client-pre-email {
border-color: $color-gray4;
font-family: $font-family;
padding-top: 8px;
.client-pre-email-h label {
margin-top: 0px;
}
.link-cart {
a {
color: $color-black2;
font-size: 14px;
.client-pre-email {
border-top: 1px solid $color-black;
font-family: $font-family;
padding-top: 14px;
&:hover {
color: lighen($color-black2, 10);
}
}
}
.link-cart {
a {
color: $color-black;
font-family: $font-family-secondary;
font-weight: 400;
font-size: 14px;
.pre-email {
flex-direction: column;
display: flex;
align-items: center;
justify-content: center;
&:hover {
color: lighen($color-black, 10);
}
}
}
h3 {
margin-bottom: 16px;
.pre-email {
flex-direction: column;
display: flex;
align-items: center;
justify-content: center;
span {
color: #303030;
font-size: 24px;
}
h3 {
margin: 65px 0 21px;
small {
color: $color-gray4;
}
}
}
span,
small {
font-family: $font-family-secondary;
font-size: 23px;
font-weight: 400;
color: $color-black;
text-transform: uppercase;
}
}
}
.client-email {
margin: 0 0 16px;
.client-email {
margin-bottom: 24px;
margin-left: 0;
input {
box-shadow: none;
color: $color-black2;
font-family: $font-family;
padding: 0 16px;
border: 2px solid $color-gray3;
box-sizing: border-box;
border-radius: 5px;
input {
border: solid 1px $color-black;
border-radius: 5px 8px 8px 5px;
color: $color-black;
font-size: 12px;
padding: 0 14px;
height: 50px;
box-shadow: none;
font-family: $font-family;
box-sizing: border-box;
@media (max-width: 490px) {
width: auto;
}
}
@media (max-width: 490px) {
width: auto;
}
}
button {
background-color: $color-black2;
border-radius: 5px;
border: none;
font-family: $font-family;
height: 54px;
right: 0;
top: 0;
button {
background: $color-blue2;
color: $color-black;
height: 52px;
width: 127px;
border-radius: 0 8px 8px 0;
font-size: 14px;
font-weight: 700;
font-family: $font-family;
text-transform: uppercase;
letter-spacing: 0.05em;
line-height: 19px;
border: none;
right: 0;
top: 0;
@media (max-width: 490px) {
height: 48px;
margin: 0;
position: absolute;
}
}
@media (max-width: 490px) {
height: 48px;
margin: 0;
position: absolute;
}
}
span.help.error {
color: red;
}
}
span.help.error {
margin-top: 3px;
font-size: 12px;
color: $color-red;
font-weight: 700;
text-transform: capitalize;
}
}
.emailInfo {
padding: 16px;
background-color: $color-white;
border: 1px solid $color-gray4;
border-radius: 0;
.emailInfo {
border: solid 1px $color-black;
padding: 16px 16px 26px;
border-radius: 5px;
margin-bottom: 0px;
background-color: $color-white;
h3 {
color: #303030;
margin: 0 0 8px 0;
}
h3 {
color: $color-black !important;
font-size: 12px;
font-weight: 700;
margin-bottom: 9px;
margin-top: 0;
}
ul {
margin: 0;
ul {
margin: 0;
li {
span {
color: $color-black2;
}
li {
span {
color: $color-black;
font-size: 12px;
font-weight: 700;
}
i::before {
color: $color-black2;
font-size: 1rem;
opacity: 1;
}
}
}
.icon-lock:before {
padding-bottom: 19px !important;
padding-right: 4px !important;
}
i::before {
color: $color-black2;
font-size: 6rem;
opacity: 0.5;
}
}
}
i::before {
color: $color-blue2;
font-size: 1rem;
opacity: 1;
}
}
}
.shipping-data,
.payment-data,
.client-profile-data {
.accordion-group {
border-radius: 0;
border: 1px solid $color-gray4;
font-family: $font-family;
padding: 16px;
i::before {
color: $color-black2;
font-size: 6rem;
opacity: 0.5;
}
}
}
.accordion-heading {
span {
color: #303030;
margin-bottom: 8px;
padding: 0;
.shipping-data,
.payment-data,
.client-profile-data {
.accordion-group {
border-radius: 0;
border: 1px solid $color-gray4;
font-family: $font-family;
padding: 16px;
i::before {
fill: #303030;
}
}
.accordion-heading {
span {
color: #303030;
margin-bottom: 8px;
padding: 0;
a {
align-items: center;
background-color: #303030;
border-radius: 8px;
border: none;
color: $color-white;
display: flex;
justify-content: center;
padding: 6px 5px 6px 8px;
}
}
i::before {
fill: #303030;
}
}
.accordion-inner {
padding: 0;
a {
align-items: center;
background-color: #303030;
border-radius: 8px;
border: none;
color: $color-white;
display: flex;
justify-content: center;
padding: 6px 5px 6px 8px;
}
}
/* General configurations */
.accordion-inner {
padding: 0;
.client-notice {
color: $color-black2;
}
/* General configurations */
p {
label {
color: $color-black2;
font-weight: 500;
}
.client-notice {
color: $color-black2;
}
select,
input {
border-radius: 0;
border: 1px solid $color-gray4;
box-shadow: none;
}
p {
label {
color: $color-black2;
font-weight: 500;
}
.help.error {
color: red;
}
}
select,
input {
border-radius: 0;
border: 1px solid $color-gray4;
box-shadow: none;
}
.box-client-info-pj {
.link a#is-corporate-client,
.link a#not-corporate-client {
color: $color-black2;
font-weight: 500;
text-decoration: underline;
}
}
.help.error {
color: red;
}
}
.state-inscription-box span {
font-weight: 500;
}
.box-client-info-pj {
.link a#is-corporate-client,
.link a#not-corporate-client {
color: $color-black2;
font-weight: 500;
text-decoration: underline;
}
}
button.submit {
border: none;
border-radius: 5px;
background: $color-black2;
margin-top: 8px;
outline: none;
transition: all 0.2s linear;
.state-inscription-box span {
font-weight: 500;
}
&:hover {
background: lighten($color-black2, 5);
}
button.submit {
border: none;
border-radius: 5px;
background: $color-black2;
margin-top: 8px;
outline: none;
transition: all 0.2s linear;
&:active {
background: darken($color-black2, 5);
}
}
&:hover {
background: lighten($color-black2, 5);
}
/* Shipping configurations */
&:active {
background: darken($color-black2, 5);
}
}
.ship-postalCode small a {
color: #303030;
font-weight: 500;
text-decoration: underline;
}
/* Shipping configurations */
.vtex-omnishipping-1-x-deliveryGroup {
p {
color: #303030;
font-size: 14px;
font-weight: 500;
}
.ship-postalCode small a {
color: #303030;
font-weight: 500;
text-decoration: underline;
}
.shp-lean {
border: 1px solid $color-gray4;
border-radius: 0;
.vtex-omnishipping-1-x-deliveryGroup {
p {
color: #303030;
font-size: 14px;
font-weight: 500;
}
label {
background-color: $color-white;
box-shadow: none;
color: #303030;
padding: 8px 12px;
.shp-lean {
border: 1px solid $color-gray4;
border-radius: 0;
svg path {
fill: #d8c8ac;
}
}
}
}
label {
background-color: $color-white;
box-shadow: none;
color: #303030;
padding: 8px 12px;
.delivery-address-title {
color: #303030;
font-size: 14px;
font-weight: 500;
}
svg path {
fill: #d8c8ac;
}
}
}
}
.shp-summary-group-info {
border-color: $color-gray4;
}
.delivery-address-title {
color: #303030;
font-size: 14px;
font-weight: 500;
}
.address-summary {
background: none;
border-color: $color-gray4;
border-radius: 0;
color: #303030;
padding: 12px;
.shp-summary-group-info {
border-color: $color-gray4;
}
@include mq(md, max) {
background-position: 8px 9px;
}
.address-summary {
background: none;
border-color: $color-gray4;
border-radius: 0;
color: #303030;
padding: 12px;
a {
color: #303030;
font-weight: 500;
text-decoration: underline;
}
}
@include mq(md, max) {
background-position: 8px 9px;
}
.shp-summary-group-price,
.shp-summary-package {
color: $color-gray4;
}
a {
color: #303030;
font-weight: 500;
text-decoration: underline;
}
}
.shp-summary-group-price {
padding-right: 16px;
}
.shp-summary-group-price,
.shp-summary-package {
color: $color-gray4;
}
.shp-summary-package {
padding-left: 16px;
}
.shp-summary-group-price {
padding-right: 16px;
}
.vtex-omnishipping-1-x-summaryChange {
border-color: #303030;
color: #303030;
}
.shp-summary-package {
padding-left: 16px;
}
.vtex-omnishipping-1-x-deliveryChannelsToggle {
background-color: #d8c8ac;
border: 1px solid #d8c8ac;
}
.vtex-omnishipping-1-x-summaryChange {
border-color: #303030;
color: #303030;
}
.vtex-omnishipping-1-x-deliveryOptionActive {
text-shadow: 1.3px 1px lighten($color-black2, 50);
}
}
}
}
.vtex-omnishipping-1-x-deliveryChannelsToggle {
background-color: #d8c8ac;
border: 1px solid #d8c8ac;
}
.vtex-omnishipping-1-x-deliveryOptionActive {
text-shadow: 1.3px 1px lighten($color-black2, 50);
}
}
}
}
}

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

@ -254,7 +254,7 @@
margin: 0 !important;
padding: 8px 0;
width: 38px;
color: $color-gray2;
color: $color-black;
box-shadow: none;
@include mq(lg, max) {
@ -293,6 +293,11 @@
.icon-question-sign {
display: none;
}
.total-selling-price {
font-weight: 700;
}
span {
font-style: normal;
font-size: 14px;
@ -302,7 +307,7 @@
}
.quantity-price {
font-weight: 700;
font-weight: 400;
@include mq(md, max) {
display: none;
}
@ -313,7 +318,7 @@
top: 0;
}
.icon::before {
color: $color-gray4;
color: $color-gray6;
font-size: 15px;
@include mq(md, max) {

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

@ -64,13 +64,9 @@ body {
#cart-title,
#orderform-title {
color: $color-gray2;
font-family: $font-family;
font-weight: 500;
font-size: 36px;
line-height: 42px;
margin: 40px 0 30px;
letter-spacing: 0.1em;
font-weight: 700;
font-size: 24px;
text-transform: uppercase;
@include mq(md, max) {
@ -82,11 +78,15 @@ body {
margin: 17px 0 16px 0;
color: $color-black2;
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
}
#orderform-title {
line-height: 32px;
color: $color-black;
margin: 17px 0 17px;
}
.dropdown {
&__content {
&--closed {