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

feat(body):Adicionando estilos dos dados pessoais

Browse Source
This commit is contained in:
Savio Carvalho Moraes 2022-12-17 02:00:47 -03:00
parent 740408faef
commit a1d383bfc7
3 changed files with 274 additions and 243 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 { .checkout-container {
.client-pre-email { .client-pre-email {
border-color: $color-gray4; border-color: $color-gray4;
font-family: $font-family; font-family: $font-family;
padding-top: 8px; padding-top: 8px;
.link-cart { .link-cart {
a { a {
color: $color-black; font-family: $font-family-secundary;
font-size: 14px; font-weight: 400;
color: $color-black;
font-size: 14px;
text-transform: uppercase;
&:hover {
color: lighen($color-black, 10);
}
}
}
&:hover { .pre-email {
color: lighen($color-black, 10); flex-direction: column;
} display: flex;
} align-items: center;
} justify-content: center;
.pre-email { h3 {
flex-direction: column; margin-bottom: 16px;
display: flex;
align-items: center;
justify-content: center;
h3 { span {
margin-bottom: 16px; font-family: $font-family-secundary;
color: $color-black-100;
font-size: 24px;
font-weight: 400;
text-transform: uppercase;
}
span { small {
color: #303030; font-family: $font-family-secundary;
font-size: 24px; color: $color-black-100;
} font-size: 24px;
font-weight: 400;
text-transform: uppercase;
}
}
}
small { .client-email {
color: $color-gray4; margin: 0 0 16px;
}
}
}
.client-email { input {
margin: 0 0 16px; box-shadow: none;
color: $color-black-100;
font-family: $font-family;
padding: 0 16px;
font-size: 12px;
border: 1px solid $color-black-100;
border-radius: 5px 8px 8px 5px;
box-sizing: border-box;
input { &:placeholder {
box-shadow: none; color: $color-black-100;
color: $color-black; }
font-family: $font-family;
padding: 0 16px;
border: 2px solid $color-gray3;
box-sizing: border-box;
border-radius: 5px;
@media (max-width: 490px) { @media (max-width: 490px) {
width: auto; width: auto;
} }
} }
button { button {
background-color: $color-black; background-color: $color-blue-300;
border-radius: 5px; border-radius: 0px 8px 8px 0px;
border: none; border: none;
font-family: $font-family; color: $color-black-100;
height: 54px; font-weight: 700;
right: 0; font-family: $font-family;
top: 0; height: 54px;
right: 0;
top: 0;
text-transform: uppercase;
&:hover {
cursor: pointer;
}
@media (max-width: 490px) { @media (max-width: 490px) {
height: 48px; height: 48px;
margin: 0; margin: 0;
position: absolute; position: absolute;
} }
} }
span.help.error { span.help.error {
color: red; font-family: $font-family;
} color: $color-red;
} font-size: 12px;
font-weight: 700;
}
}
.emailInfo { .emailInfo {
padding: 16px; margin-top: 31px;
background-color: $color-white; padding: 16px;
border: 1px solid $color-gray4; background-color: $color-white;
border-radius: 0; border: 1px solid $color-black-100;
border-radius: 5px;
h3 { h3 {
color: #303030; color: $color-black-100;
margin: 0 0 8px 0; font-family: $font-family;
} font-weight: 700;
font-size: 12px;
line-height: 16px;
margin: 0 0 8px 0;
}
ul { ul {
margin: 0; margin: 0;
li { li {
span { span {
color: $color-black; color: $color-black;
} font-family: $font-family;
font-weight: 700;
font-size: 12px;
}
i::before { i::before {
color: $color-black; color: $color-blue-300;
font-size: 1rem; font-size: 1rem;
opacity: 1; opacity: 1;
} }
} }
} }
i::before { i::before {
color: $color-black; color: $color-black;
font-size: 6rem; font-size: 6rem;
opacity: 0.5; opacity: 0.5;
} }
} }
} }
.shipping-data, .shipping-data,
.payment-data, .payment-data,
.client-profile-data { .client-profile-data {
.accordion-group { .accordion-group {
border-radius: 0; border-radius: 0;
border: 1px solid $color-gray4; border: 1px solid $color-gray4;
font-family: $font-family; font-family: $font-family;
padding: 16px; padding: 16px;
.accordion-heading { .accordion-heading {
span { span {
color: #303030; color: #303030;
margin-bottom: 8px; margin-bottom: 8px;
padding: 0; padding: 0;
i::before { i::before {
fill: #303030; fill: #303030;
} }
} }
a { a {
align-items: center; align-items: center;
background-color: #303030; background-color: #303030;
border-radius: 8px; border-radius: 8px;
border: none; border: none;
color: $color-white; color: $color-white;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 6px 5px 6px 8px; padding: 6px 5px 6px 8px;
} }
} }
.accordion-inner { .accordion-inner {
padding: 0; padding: 0;
/* General configurations */ /* General configurations */
.client-notice { .client-notice {
color: $color-black; color: $color-black;
} }
p { p {
label { label {
color: $color-black; color: $color-black;
font-weight: 500; font-weight: 500;
} }
select, select,
input { input {
border-radius: 0; border-radius: 0;
border: 1px solid $color-gray4; border: 1px solid $color-gray4;
box-shadow: none; box-shadow: none;
} }
.help.error { .help.error {
color: red; color: red;
} }
} }
.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-black;
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: underline;
} }
} }
.state-inscription-box span { .state-inscription-box span {
font-weight: 500; font-weight: 500;
} }
button.submit { button.submit {
border: none; border: none;
border-radius: 5px; border-radius: 5px;
background: $color-black; background: $color-black;
margin-top: 8px; margin-top: 8px;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;
&:hover { &:hover {
background: lighten($color-black, 5); background: lighten($color-black, 5);
} }
&:active { &:active {
background: darken($color-black, 5); background: darken($color-black, 5);
} }
} }
/* Shipping configurations */ /* Shipping configurations */
.ship-postalCode small a { .ship-postalCode small a {
color: #303030; color: #303030;
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: underline;
} }
.vtex-omnishipping-1-x-deliveryGroup { .vtex-omnishipping-1-x-deliveryGroup {
p { p {
color: #303030; color: #303030;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
} }
.shp-lean { .shp-lean {
border: 1px solid $color-gray4; border: 1px solid $color-gray4;
border-radius: 0; border-radius: 0;
label { label {
background-color: $color-white; background-color: $color-white;
box-shadow: none; box-shadow: none;
color: #303030; color: #303030;
padding: 8px 12px; padding: 8px 12px;
svg path { svg path {
fill: #d8c8ac; fill: #d8c8ac;
} }
} }
} }
} }
.delivery-address-title { .delivery-address-title {
color: #303030; color: #303030;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
} }
.shp-summary-group-info { .shp-summary-group-info {
border-color: $color-gray4; border-color: $color-gray4;
} }
.address-summary { .address-summary {
background: none; background: none;
border-color: $color-gray4; border-color: $color-gray4;
border-radius: 0; border-radius: 0;
color: #303030; color: #303030;
padding: 12px; padding: 12px;
@include mq(md, max) { @include mq(md, max) {
background-position: 8px 9px; background-position: 8px 9px;
} }
a { a {
color: #303030; color: #303030;
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: underline;
} }
} }
.shp-summary-group-price, .shp-summary-group-price,
.shp-summary-package { .shp-summary-package {
color: $color-gray4; color: $color-gray4;
} }
.shp-summary-group-price { .shp-summary-group-price {
padding-right: 16px; padding-right: 16px;
} }
.shp-summary-package { .shp-summary-package {
padding-left: 16px; padding-left: 16px;
} }
.vtex-omnishipping-1-x-summaryChange { .vtex-omnishipping-1-x-summaryChange {
border-color: #303030; border-color: #303030;
color: #303030; color: #303030;
} }
.vtex-omnishipping-1-x-deliveryChannelsToggle { .vtex-omnishipping-1-x-deliveryChannelsToggle {
background-color: #d8c8ac; background-color: #d8c8ac;
border: 1px solid #d8c8ac; border: 1px solid #d8c8ac;
} }
.vtex-omnishipping-1-x-deliveryOptionActive { .vtex-omnishipping-1-x-deliveryOptionActive {
text-shadow: 1.3px 1px lighten($color-black, 50); text-shadow: 1.3px 1px lighten($color-black, 50);
} }
} }
} }
} }
} }

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

@ -68,13 +68,13 @@ body {
#cart-title, #cart-title,
#orderform-title { #orderform-title {
color: $color-gray2; color: $color-black-100;
font-family: $font-family; font-family: $font-family;
font-weight: 500; font-weight: 700;
font-size: 36px; font-size: 24px;
line-height: 42px; line-height: 33px;
margin: 40px 0 30px; margin: 40px 0 30px;
letter-spacing: 0.1em;
text-transform: uppercase; text-transform: uppercase;
@include mq(md, max) { @include mq(md, max) {

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

@ -14,7 +14,7 @@ $color-gray2: #7d7d7d;
$color-gray3: #f0f0f0; $color-gray3: #f0f0f0;
$color-gray4: #8d8d8d; $color-gray4: #8d8d8d;
$color-gray5: #e5e5e5; $color-gray5: #e5e5e5;
$color-red: #ff0000;
$color-blue: #4267b2; $color-blue: #4267b2;
$color-blue-300: #00c8ff; $color-blue-300: #00c8ff;