feat(checkout): melhora checkout #3
@ -161,22 +161,23 @@
|
|||||||
padding: 16px;
|
padding: 16px;
|
||||||
|
|
||||||
.accordion-heading {
|
.accordion-heading {
|
||||||
|
.accordion-toggle {
|
||||||
|
margin: 0;
|
||||||
|
.icon-home {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
span {
|
span {
|
||||||
color: #292929;
|
color: #292929;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
font-size: 0px;
|
font-size: 16px;
|
||||||
margin-top: 7px;
|
margin-top: 7px;
|
||||||
margin-bottom: 25px;
|
margin-bottom: 25px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: "Identificação";
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 19px;
|
|
||||||
}
|
|
||||||
i::before {
|
i::before {
|
||||||
fill: #303030;
|
fill: #303030;
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -195,22 +196,91 @@
|
|||||||
.accordion-inner {
|
.accordion-inner {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
|
.totalizers-list {
|
||||||
|
color: $color-gray2;
|
||||||
|
|
||||||
|
tr {
|
||||||
|
border: 1px solid $color-gray5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification {
|
||||||
|
margin-top: 14px;
|
||||||
|
color: $color-gray2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-step {
|
||||||
|
.vtex-omnishipping-1-x-addressForm {
|
||||||
|
.vtex-omnishipping-1-x-address {
|
||||||
|
.ship-number {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
#ship-number {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ship-complement {
|
||||||
|
#ship-complement {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.vtex-omnishipping-1-x-addressFormPart1 {
|
||||||
|
.ship-country {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ship-postalCode {
|
||||||
|
max-width: 100%;
|
||||||
|
#ship-postalCode {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
margin: 0 0 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.box-info {
|
||||||
|
padding-top: 25px;
|
||||||
|
}
|
||||||
|
.shipping-summary-info {
|
||||||
|
color: $color-gray2;
|
||||||
|
padding-top: 15px;
|
||||||
|
}
|
||||||
|
.box-edit {
|
||||||
|
.row-fluid {
|
||||||
|
.box-client-info-pf {
|
||||||
|
margin-top: 36px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-client-info {
|
||||||
|
.newsletter {
|
||||||
|
margin: 12px 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* General configurations */
|
/* General configurations */
|
||||||
|
|
||||||
.client-notice {
|
.client-notice {
|
||||||
color: $color-black;
|
color: $color-black;
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
label {
|
label {
|
||||||
color: $color-black;
|
color: #7d7d7d;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
select,
|
select,
|
||||||
input {
|
input {
|
||||||
border-radius: 0;
|
border-radius: 5px;
|
||||||
border: 1px solid $color-gray4;
|
border: 1px solid $color-gray5;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -220,11 +290,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.box-client-info-pj {
|
.box-client-info-pj {
|
||||||
|
display: none;
|
||||||
.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;
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -235,17 +307,24 @@
|
|||||||
button.submit {
|
button.submit {
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
background: $color-black;
|
background: $color-blue;
|
||||||
margin-top: 8px;
|
margin-top: 39px;
|
||||||
outline: none;
|
outline: none;
|
||||||
transition: all 0.2s linear;
|
transition: all 0.2s linear;
|
||||||
|
color: $color-white;
|
||||||
|
width: 100%;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19.07px;
|
||||||
|
cursor: pointer;
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: lighten($color-black, 5);
|
background: lighten($color-blue, 5);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background: darken($color-black, 5);
|
background: darken($color-blue, 5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -303,7 +382,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #303030;
|
color: $color-blue;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
@ -328,12 +407,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.vtex-omnishipping-1-x-deliveryChannelsToggle {
|
.vtex-omnishipping-1-x-deliveryChannelsToggle {
|
||||||
background-color: #d8c8ac;
|
background-color: $color-white;
|
||||||
border: 1px solid #d8c8ac;
|
border: 1px solid $color-black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vtex-omnishipping-1-x-deliveryOptionActive {
|
.vtex-omnishipping-1-x-deliveryOptionActive {
|
||||||
text-shadow: 1.3px 1px lighten($color-black, 50);
|
color: $color-black;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -16,7 +16,6 @@
|
|||||||
.cart {
|
.cart {
|
||||||
border: 3px solid $color-gray3;
|
border: 3px solid $color-gray3;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
margin-bottom: 48px !important;
|
margin-bottom: 48px !important;
|
||||||
|
|
||||||
@ -29,10 +28,21 @@
|
|||||||
}
|
}
|
||||||
.cart-fixed.affix {
|
.cart-fixed.affix {
|
||||||
position: relative !important;
|
position: relative !important;
|
||||||
|
z-index: none !important;
|
||||||
}
|
}
|
||||||
.cart-fixed {
|
.cart-fixed {
|
||||||
font-family: $font-family;
|
font-family: $font-family;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
z-index: none !important;
|
||||||
|
|
||||||
|
.summary-cart-template-holder {
|
||||||
|
z-index: none !important;
|
||||||
|
overflow: none;
|
||||||
|
|
||||||
|
.cart {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
h2 {
|
h2 {
|
||||||
background: $color-white;
|
background: $color-white;
|
||||||
border: none;
|
border: none;
|
||||||
@ -66,17 +76,6 @@
|
|||||||
.price {
|
.price {
|
||||||
color: #7d7d7d;
|
color: #7d7d7d;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shipping-date {
|
|
||||||
font-size: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: "Frete";
|
|
||||||
color: #7d7d7d;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 16.38px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -98,18 +97,18 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#payment-data-submit {
|
#payment-data-submit {
|
||||||
background: $color-black;
|
background: $color-green;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0;
|
border-radius: 8px;
|
||||||
color: $color-white;
|
color: $color-white;
|
||||||
outline: none;
|
outline: none;
|
||||||
transition: all 0.2s linear;
|
transition: all 0.2s linear;
|
||||||
&:hover {
|
&:hover {
|
||||||
background: lighten($color-black, 5);
|
background: lighten($color-green, 5);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background: darken($color-black, 5);
|
background: darken($color-green, 5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -4,6 +4,7 @@ body .container-main.container-order-form .orderform-template.active {
|
|||||||
margin-left: unset;
|
margin-left: unset;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
float: right;
|
float: right;
|
||||||
|
overflow: none !important;
|
||||||
}
|
}
|
||||||
.orderform-template-holder {
|
.orderform-template-holder {
|
||||||
width: 66.1132%;
|
width: 66.1132%;
|
||||||
|
@ -13,7 +13,7 @@ $color-gray: #6c6c6c;
|
|||||||
$color-gray2: #7d7d7d;
|
$color-gray2: #7d7d7d;
|
||||||
$color-gray3: #f0f0f0;
|
$color-gray3: #f0f0f0;
|
||||||
$color-gray4: #8d8d8d;
|
$color-gray4: #8d8d8d;
|
||||||
$color-gray5: #e5e5e5;
|
$color-gray5: #e0e0e0;
|
||||||
$color-blue: #00c8ff;
|
$color-blue: #00c8ff;
|
||||||
|
|
||||||
$color-green: #4caf50;
|
$color-green: #4caf50;
|
||||||
|
@ -34,13 +34,13 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.itens-inline {
|
.itens-inline {
|
||||||
>*{ display: inline-block;}
|
> * {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
%notificacao {
|
%notificacao {
|
||||||
|
|
||||||
padding: 7.5px 10px;
|
padding: 7.5px 10px;
|
||||||
min-height: 1em;
|
min-height: 1em;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
Loading…
Reference in New Issue
Block a user