From b4113e0eff3be4689e3f2679eaf1734227115fe1 Mon Sep 17 00:00:00 2001
From: amanda almeida <manda.fonsecaff@gmail.com>
Date: Sat, 17 Dec 2022 04:21:17 -0300
Subject: [PATCH] feat(css): Adiciona css da parte de dados de perfil

---
 .../sass/checkout/_checkout-autenticacao.scss | 242 ++++++++++++++++++
 .../src/arquivos/sass/utils/_variaveis.scss   |   4 +
 2 files changed, 246 insertions(+)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index 906dad0..18864d9 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -157,6 +157,10 @@
                 }
             }
 
+            .focus-visible {
+                box-shadow: none;
+            }
+
             button {
                 background: #00C8FF;
                 border-radius: 0px 8px 8px 0px;
@@ -298,5 +302,243 @@
 
             }
         }
+
+        .icon-spin {
+            display: none !important;
+        }
+    }
+
+    .client-profile-data {
+        .accordion-group {
+            padding: 24px 17px;
+            border: 1px solid $color-gray3;
+            border-radius: 8px;
+            width: 297px;
+        }
+
+        .accordion-inner {
+            padding: 0;
+        }
+
+
+        .icon-user,
+        .client-notice,
+        .corporate-hide-link {
+            display: none;
+        }
+
+        .accordion-toggle {
+            padding: 0;
+            margin-bottom: 36px;
+
+            span {
+                font-family: 'Tenor Sans';
+                font-size: 16px;
+                line-height: 19px;
+                color: $color-black-400;
+            }
+
+            i::before {
+                content: '';
+                background: url(https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png);
+                background-size: contain;
+                width: 20px;
+                height: 20px;
+                padding: 0;
+                border: 0;
+                border-radius: initial;
+            }
+        }
+
+
+
+        .accordion-body {
+            width: 297px;
+        }
+
+        .box-client-info-pf {
+            label {
+                font-family: 'Open Sans';
+                font-size: 14px;
+                line-height: 19px;
+                color: $color-gray2;
+            }
+
+            input {
+                border: 1px solid $color-gray10;
+                border-radius: 5px;
+                font-family: 'Open Sans';
+                font-size: 14px;
+                line-height: 19px;
+                padding: 0;
+                padding-left: 11px;
+
+            }
+
+            .client-email,
+            .client-first-name,
+            .client-last-name {
+                margin: 0;
+                margin-bottom: 16px;
+
+                input {
+                    height: 42px;
+                }
+
+            }
+
+            .client-email {
+                input {
+                    width: 96%;
+                }
+            }
+
+            .client-first-name {
+
+
+                input {
+                    margin-right: 14px;
+                    width: 128px;
+                }
+            }
+
+            .client-last-name,
+            .client-phone,
+            .client-document {
+                input {
+                    width: 128px;
+                }
+
+            }
+
+            .client-document,
+            .client-phone {
+                input {
+                    height: 44px;
+
+                    &::placeholder {
+                        padding: 12px 24px 12px 0;
+                        color: #BDBDBD;
+                    }
+                }
+
+                margin: 0;
+                margin-bottom: 13px;
+
+
+
+            }
+
+            .client-document {
+                input {
+                    width: 128px;
+                    margin-right: 14px;
+                }
+
+            }
+        }
+
+        .newsletter {
+            input {
+                border: 1px solid $calor-gray12;
+                border-radius: 3px;
+            }
+
+            span {
+                font-family: 'Open Sans';
+                font-style: normal;
+                font-weight: 400;
+                font-size: 12px;
+                line-height: 16px;
+                color: $color-gray11;
+            }
+
+            #opt-in-newsletter {
+
+                &:active {
+                    background-color: #00C8FF;
+                }
+
+            }
+
+            .optinNewsLetter {
+                background-color: #BDBDBD;
+            }
+        }
+
+        .submit {
+            margin-top: 44px;
+            margin-bottom: 10px;
+
+            button {
+                background: $color-blue2;
+                border-radius: 8px;
+                font-family: 'Open Sans';
+                font-weight: 700;
+                font-size: 14px;
+                line-height: 19px;
+                text-align: center;
+                letter-spacing: 0.05em;
+                text-transform: uppercase;
+                color: $color-white;
+                width: 100%;
+                height: 42px;
+
+
+            }
+
+        }
+    }
+
+    .payment-data,
+    .shipping-data {
+
+        border: 1px solid #F0F0F0;
+        border-radius: 8px;
+        width: 330px;
+        padding: 0;
+        margin: 0;
+        margin-bottom: 17px;
+
+        .accordion-toggle {
+            display: flex;
+            flex-direction: row-reverse;
+            justify-content: space-between;
+            font-family: 'Tenor Sans';
+            font-style: normal;
+            font-weight: 400;
+            font-size: 16px;
+            line-height: 19px;
+            color: #292929;
+            margin-top: 24px;
+            padding: 0;
+        }
+
+        .icon-home,
+        .icon-credit-card,
+        .icon-edit {
+            width: 20px;
+            height: 20px;
+
+            &::before {
+                content: '';
+                background: url(https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png);
+                background-size: contain;
+                width: 20px;
+                height: 20px;
+            }
+        }
+
+        .shipping-summary-info,
+        .notification {
+            margin-top: 15px;
+            margin-bottom: 28px;
+            font-family: 'Open Sans';
+            font-style: normal;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 19px;
+            color: #7D7D7D;
+        }
     }
 }
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index 54652ca..e9b90d5 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -19,6 +19,10 @@ $color-gray6: #C4C4C4;
 $color-gray7: #EEEEEE;
 $color-gray8: #989898;
 $color-gray9: #EDEDED;
+$color-gray10: #E0E0E0;
+$color-gray11: #808080;
+$calor-gray12: #828282;
+
 
 
 $color-blue: #4267b2;