feat: estilizacao da página de pagamento

checkout/src/arquivos/js/components/Header.js

@@ -23,6 +23,7 @@ export default class Header {
     }
 
     setProgressBarHTML() {
+        if(window.innerWidth > 1024) {
             this.container_progressBar.innerHTML = `
             <div class="content_myCart">
                 <span class="infoCart">Meu Carrinho</span>
@@ -39,6 +40,9 @@ export default class Header {
                 <span class=" circuleTree circule"></span>
             </div>
             `
+        } else {
+            this.container_progressBar.innerHTML = ""
+        }
     }
 
     setStateCart() {

checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss

@@ -124,8 +124,8 @@
     .payment-data,
     .client-profile-data {
         .accordion-group {
-			border-radius: 0;
+            border-radius: 0.5rem;
-			//border: 1px solid $color-gray4;
+            border: 1px solid $color-gray3;
             font-family: $font-family;
             padding: 16px;
 
@@ -142,13 +142,14 @@
 
                 a {
                     align-items: center;
-					background-color: #303030;
+                    background-color: $color-white;
                     border-radius: 8px;
                     border: none;
-					color: $color-white;
+                    color: $color-blue2;
-					display: flex;
+                    display: flex !important;
                     justify-content: center;
                     padding: 6px 5px 6px 8px;
+                    font-size: 1.197rem;
                 }
             }
 
@@ -163,14 +164,15 @@
 
                 p {
                     label {
-						color: $color-black;
+                        color: $color-gray2;
-						font-weight: 500;
+                        font-weight: 400;
                     }
 
                     select,
                     input {
-						border-radius: 0;
+                        border-radius: 5px;
-						border: 1px solid $color-gray4;
+                        height: 42px;
+                        border: 1px solid $color-gray5;
                         box-shadow: none;
                     }
 
@@ -194,14 +196,20 @@
 
                 button.submit {
                     border: none;
-					border-radius: 5px;
+                    border-radius: 0.5rem;
-					background: $color-black;
+                    background: $color-blue2;
                     margin-top: 8px;
                     outline: none;
                     transition: all 0.2s linear;
+                    text-transform: uppercase;
+                    padding: 0.75rem 0;
+                    color: $color-white;
+                    font-weight: 700;
+                    font-family: $font-family;
+                    width: 100%;
 
                     &:hover {
-						background: lighten($color-black, 5);
+                        opacity: 0.8;
                     }
 
                     &:active {
@@ -248,7 +256,7 @@
                 }
 
                 .shp-summary-group-info {
-					border-color: $color-gray4;
+                    width: 100%;
                 }
 
                 .address-summary {
@@ -299,3 +307,84 @@
         }
     }
 }
+
+.vtex-omnishipping-1-x-SummaryItemContent {
+    display: flex;
+    flex-direction: column;
+
+    span {
+        font-family: $font-family;
+        font-weight: 400;
+        color: $color-gray2;
+    }
+}
+
+.vtex-omnishipping-1-x-SummaryItemInfo {
+  border: none !important;
+}
+
+.link-change-shipping.vtex-omnishipping-1-x-summaryChange {
+    display: none;
+}
+
+/* .step.active,
+.cart.active,
+.totalizers.active {
+    //border: 1px solid $color-gray3;
+} */
+
+.summary-cart-template-holder {
+    border: none;
+}
+
+.accordion-group.shipping-data .accordion-toggle,
+#payments-title .accordion-toggle {
+    font-family: $font-family-secundary;
+    font-weight: 400;
+    font-size: 1rem;
+    color: $color-black;
+    .icon-home,
+    .icon-credit-card {
+        display: none;
+    }
+}
+
+.client-profile-data .accordion-heading .accordion-toggle {
+    .icon-user,
+    .icon-home span {
+        display: none;
+    }
+}
+
+.client-profile-data .accordion-heading .accordion-toggle a {
+    display: flex !important;
+}
+
+.client-notice.notice,
+span[data-i18n="clientProfileData.identification"] {
+    font-size: 0;
+    color: $color-black;
+}
+
+span[data-i18n="clientProfileData.identification"]::after {
+    content: "Identificação";
+    font-size: 1rem;
+    font-family: $font-family-secundary;
+    font-weight: 400;
+    color: $color-black;
+}
+
+.checkbox.newsletter-label {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+
+    label {
+        font-family: $font-family;
+        font-weight: 400;
+        font-size: 0.75rem;
+        color: $color-gray4;
+    }
+}
+
+

checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss

@@ -13,7 +13,7 @@
         display: none;
     }
     .cart {
-        border: 1px solid $color-gray3;
+        //border: 1px solid $color-gray3;
         box-sizing: border-box;
         border-radius: 5px;
         padding: 16px;
@@ -48,7 +48,7 @@
         }
 
         .cart {
-            border: 1px solid $color-gray4;
+            //border: 1px solid $color-gray4;
 
             ul li {
                 border-top: none;
@@ -58,7 +58,7 @@
                 &:not(:first-child) {
                     margin-top: 8px;
                     padding-top: 8px;
-                    border-top: 1px solid #e5e5e5;
+                    //border-top: 1px solid #e5e5e5;
                 }
 
                 .shipping-date,
@@ -677,8 +677,6 @@
                     }
                 }
 
-
-
                 .coupon-fields {
                     margin-bottom: 32px;
 
@@ -693,7 +691,6 @@
                         }
                     }
 
-
                     /* @include mq(sm, max) {
                         span {
                             display: flex;
@@ -770,7 +767,7 @@
                             font-size: 14px;
                             line-height: 16px;
                             color: $color-black;
-                            padding: 12px 0;
+                            padding: 20px 0;
                         }
 
                         &.info {
@@ -865,3 +862,260 @@
         }
     }
 }
+
+.checkout-container {
+    overflow: initial !important;
+}
+
+.cart-fixed.affix-top.cart-fixed-transition {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    height: auto !important;
+    border: 1px solid $color-gray5;
+    border-radius: 0.5rem;
+}
+
+#go-to-cart-button {
+    font-family: $font-family;
+    font-weight: 400;
+    color: $color-black;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    border-bottom: 1px solid $color-gray5;
+    padding: 0.625rem 1rem;
+}
+
+.cart-template.mini-cart.span4 .accordion-inner tr {
+    border-bottom: 1px solid $color-gray5;
+}
+
+.cart-template.mini-cart.span4 .accordion-inner tr td::before {
+    content: "oi";
+    color: $color-white;
+}
+
+.cart-template.mini-cart.span4 .accordion-inner tr td::after {
+    content: "oi";
+    color: $color-white;
+}
+
+li.hproduct.item.muted {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    a {
+        flex: 1;
+    }
+
+    span.fn.product-name {
+        display: flex;
+        flex: 2;
+        width: 100%;
+        white-space: initial;
+        color: black;
+    }
+
+    span.quantity.badge {
+        display: none;
+    }
+
+    .description {
+        flex: 2;
+    }
+}
+
+/* .step.accordion-group.shipping-data .accordion-heading span::after {
+    content: url(https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png);
+    font-size: 1.197rem;
+    display: flex;
+} */
+
+.shipping-method-toggle.vtex-omnishipping-1-x-deliveryChannelsToggle.shipping-method-toggle-delivery {
+    background: white !important;
+    border: 1px solid $color-black;
+}
+
+.vtex-omnishipping-1-x-deliveryOptionActive {
+    color: $color-black !important;
+    text-transform: uppercase;
+    font-family: $font-family;
+    font-weight: 400;
+}
+
+.vtex-omnishipping-1-x-deliveryChannelsToggle {
+    border: 1px solid $color-black !important;
+}
+
+#is-corporate-client {
+    display: none !important;
+}
+
+.payment-edit-link {
+    display: block !important;
+}
+
+h2[data-i18n="totalizers.summary"] {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding-top: 1.5rem;
+}
+
+p.input.ship-postalCode.required.text {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+p.input.ship-postalCode.required.text small {
+    text-decoration: none;
+    margin: initial;
+    margin-top: 10px;
+}
+
+p.input.ship-postalCode.required.text input {
+    max-width: initial;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    border: 1px solid $color-gray6;
+    border-radius: 0.5rem;
+    height: 45px;
+}
+
+p.input.ship-postalCode.required.text input::placeholder {
+    padding: 10px;
+}
+
+.shipping-method-toggle.vtex-omnishipping-1-x-deliveryChannelsToggle.shipping-method-toggle-pickup.vtex-omnishipping-1-x-deliveryChannelsTogglePickup {
+    background: white !important;
+}
+
+.vtex-omnishipping-1-x-deliveryOptionInactive {
+    color: $color-gray6 !important;
+}
+
+p.input.ship-country.text {
+    display: none !important;
+}
+
+p.vtex-omnishipping-1-x-shippingSectionTitle,
+p.vtex-omnishipping-1-x-shippingSectionTitle.delivery-address-title {
+    font-family: $font-family;
+    font-weight: 700 !important;
+    color: $color-gray2 !important;
+    margin-bottom: 0.688rem;
+}
+
+.vtex-omnishipping-1-x-addressSummary.vtex-omnishipping-1-x-addressSummaryActive {
+    border: 1px solid $color-gray6;
+    border-radius: 0.5rem;
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px;
+
+    &::before {
+        content: url(https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png)
+    }
+}
+
+.address-summary.address-summary-BRA {
+    border: none !important;
+}
+
+.vtex-omnishipping-1-x-address div {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: stretch;
+}
+
+.vtex-omnishipping-1-x-address div label {
+    font-family: $font-family;
+    font-weight: 700 !important;
+}
+
+.vtex-omnishipping-1-x-address div input {
+    all: unset;
+    width: 100%;
+}
+
+p.input.ship-number.required.text {
+    margin-right: 0 !important;
+}
+
+button#payment-data-submit {
+    background-color: $color-green2 !important;
+    color: $color-white !important;
+    font-weight: 700;
+    font-family: $font-family;
+    text-transform: uppercase;
+    border-radius: 0.5rem !important;
+}
+
+a#payment-group-custom204PaymentGroupPaymentGroup,
+a#payment-group-custom205PaymentGroupPaymentGroup,
+a#payment-group-creditControlPaymentGroup,
+a#payment-group-creditDirectSalePaymentGroup,
+a#payment-group-promissoryPaymentGroup,
+a#payment-group-custom203PaymentGroupPaymentGroup,
+a#payment-group-PSEPaymentGroup,
+a#payment-group-Bancolombia\ TransferPaymentGroup,
+a#payment-group-customPrivate_502PaymentGroup,
+a#payment-group-custom201PaymentGroupPaymentGroup,
+a#payment-group-MercadoPagoPaymentGroup,
+a#payment-group-SPEIPaymentGroup, a#show-gift-card-group {
+    display: none !important;
+}
+
+div#payments-title {
+    margin-bottom: 1rem;
+}
+
+div#payments-title::after {
+    content: "Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados";
+    font-weight: 400;
+    font-family: $font-family;
+    color: $color-gray2;
+}
+
+.payment-group {
+    margin-top: 0 !important;
+}
+
+.payment-group-item {
+    background-color: $color-gray3 !important;
+    border-color: $color-black;
+    border-radius: 0.375rem;
+    margin: 0 !important;
+    margin-bottom: 0.75rem !important;
+    border: 1px solid $color-black !important;
+
+    span {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 0.813rem 0;
+        color: $color-gray7;
+        background-image: unset !important;
+    }
+}
+
+.payment-group-item.active {
+    border-color: $color-orange !important;
+
+    span {
+        color: $color-orange;
+    }
+}
+
+.steps-view iframe {
+    height: 500px !important;
+}
+

checkout/src/arquivos/sass/utils/_variaveis.scss

@@ -15,12 +15,18 @@ $color-gray3: #f0f0f0;
 $color-gray4: #8d8d8d;
 $color-gray5: #e5e5e5;
 $color-gray6: #c4c4c4;
+$color-gray7: #58595B;
 
 $color-blue: #4267b2;
 $color-blue2: #00C8FF;
 
 
 $color-green: #4caf50;
+$color-green2: #298541;
+
+$color-orange: #F15A31;
+
+
 
 /* Grid breakpoints */
 $grid-breakpoints: (