feat(checkout): criado e modificado estilização.

This commit is contained in:
Luiz Felipe Silva 2022-12-26 20:57:32 -03:00
parent a29c06500b
commit cc38398ef6

View File

@ -1,16 +1,144 @@
.checkout-container {
.client-pre-email {
border-color: $color-gray4;
font-family: $font-family;
padding-top: 8px;
.link-cart {
a {
color: $color-black;
.mini-cart {
.cart {
@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-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 {
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;
justify-content: center;
h3 {
margin-bottom: 16px;
span {
color: #303030;
font-size: 24px;
}
span,
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 {
margin: 0 0 16px;
margin: 6px 0 9px;
max-width: 562px;
@include mq(xl, min) {
max-width: 971px;
}
i {
right: 130px;
top: 6px;
}
input {
font-size: 12px;
font-weight: 400;
line-height: 16px;
height: 50px;
box-shadow: none;
color: $color-black;
color: $color-black1;
font-family: $font-family;
padding: 0 16px;
border: 2px solid $color-gray3;
padding: 0 15px;
border: 1px solid $color-black2;
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) {
width: auto;
@ -53,13 +202,24 @@
}
button {
background-color: $color-black;
border-radius: 5px;
height: 50px;
width: 126px;
background-color: $color-blue2;
border-radius: 0px 8px 8px 0px;
border: none;
font-family: $font-family;
height: 54px;
right: 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) {
height: 48px;
@ -69,19 +229,47 @@
}
span.help.error {
font-family: $font-family;
font-size: 12px;
font-weight: 700;
line-height: 16px;
color: red;
text-transform: capitalize;
margin-top: 3px;
@include mq(xl, min) {
font-size: 24px;
line-height: 33px;
}
}
}
.emailInfo {
margin: 11px auto 0 auto;
padding: 16px;
background-color: $color-white;
border: 1px solid $color-gray4;
border-radius: 0;
background-color: $color-white1;
border: 1px solid $color-black2;
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 {
color: #303030;
margin: 0 0 8px 0;
@include mq(xl, min) {
font-size: 24px;
line-height: 33px;
}
}
ul {
@ -89,42 +277,132 @@
li {
span {
color: $color-black;
color: $color-black2;
}
i::before {
color: $color-black;
color: $color-blue2;
font-size: 1rem;
opacity: 1;
width: 17px;
height: 10px;
@include mq(xl, min) {
font-size: 25px;
width: 33px;
height: 23px;
}
}
}
}
i::before {
color: $color-black;
font-size: 6rem;
color: $color-black1;
font-size: 7rem;
opacity: 0.5;
@include mq(xl, min) {
font-size: 150px;
}
}
}
label {
margin-top: 45px;
}
}
.client-profile-data.filled {
height: 106px;
}
.shipping-data,
.payment-data,
.client-profile-data {
#client-email {
width: 96.4%;
@include mq(xl, min) {
height: 61px;
width: 97.7%;
}
}
.accordion-group {
border-radius: 0;
border: 1px solid $color-gray4;
border-radius: 8px;
border: 1px solid $color-gray9;
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 {
span {
color: #303030;
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;
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 {
fill: #303030;
display: none;
}
}
@ -133,44 +411,155 @@
background-color: #303030;
border-radius: 8px;
border: none;
color: $color-white;
color: $color-white1;
display: flex;
justify-content: center;
padding: 6px 5px 6px 8px;
}
}
ul {
display: none;
}
.accordion-inner {
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 */
.client-notice {
color: $color-black;
display: none;
color: $color-black1;
}
.newsletter {
@include mq(xl, min) {
margin: 12px 0;
}
}
p {
label {
color: $color-black;
font-weight: 500;
display: flex;
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,
input {
border-radius: 0;
border: 1px solid $color-gray4;
border-radius: 5px;
border: 1px solid $color-gray9;
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 {
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 {
.link a#is-corporate-client,
.link a#not-corporate-client {
color: $color-black;
color: $color-black1;
font-weight: 500;
text-decoration: underline;
}
@ -182,57 +571,134 @@
button.submit {
border: none;
border-radius: 5px;
background: $color-black;
margin-top: 8px;
border-radius: 8px;
background: $color-blue2;
margin: 44px 0 24px 0;
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 {
background: lighten($color-black, 5);
}
&:active {
background: darken($color-black, 5);
@include mq(xl, min) {
font-size: 28px;
line-height: 38px;
height: 61px;
}
}
/* Shipping configurations */
.ship-postalCode small a {
color: #303030;
font-weight: 500;
text-decoration: underline;
.ship-postalCode {
label {
font-family: $font-family;
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 {
p {
color: #303030;
font-family: $font-family;
font-size: 14px;
font-weight: 500;
font-weight: 700;
line-height: 19px;
color: $color-gray2;
margin: -7px 0 7px 0;
}
.shp-lean {
border: 1px solid $color-gray4;
border-radius: 0;
border: 1px solid $color-gray9;
border-radius: 8px;
label {
background-color: $color-white;
background-color: $color-white1;
box-shadow: none;
color: #303030;
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 {
color: #303030;
font-size: 14px;
font-weight: 500;
font-family: $font-family;
font-size: 12px;
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 {
@ -240,20 +706,36 @@
}
.address-summary {
background: none;
border-color: $color-gray4;
border-radius: 0;
color: #303030;
padding: 12px;
background: $color-white1;
border-color: $color-gray9;
border-radius: 8;
padding: 12px 12px 12px 44px;
@include mq(md, max) {
background-position: 8px 9px;
}
span {
font-family: $font-family;
font-size: 12px;
font-weight: 400;
line-height: 16px;
color: $color-gray2;
}
a {
color: #303030;
font-weight: 500;
text-decoration: underline;
font-family: $font-family;
text-transform: lowercase;
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;
}
.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 {
border-color: #303030;
color: #303030;
color: $color-gray6;
}
.vtex-omnishipping-1-x-deliveryChannelsOption {
color: $color-gray6;
}
.vtex-omnishipping-1-x-deliveryChannelsToggle {
background-color: #d8c8ac;
border: 1px solid #d8c8ac;
background-color: $color-white1;
border: 1px solid $color-black2;
}
.vtex-omnishipping-1-x-deliveryOptionActive {
text-shadow: 1.3px 1px lighten($color-black, 50);
color: $color-black2;
}
}
}