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;