diff --git a/react/components/Menu/components/LoginMobile/index.tsx b/react/components/Menu/components/LoginMobile/index.tsx index 6419a44..6273af2 100644 --- a/react/components/Menu/components/LoginMobile/index.tsx +++ b/react/components/Menu/components/LoginMobile/index.tsx @@ -51,7 +51,7 @@ const LoginMobile = () => { {loggedIn ? ( Hello, {data?.profile?.firstName} ) : ( - Minha conta + Minha conta )} {loggedIn && ( diff --git a/store/blocks/partials/header/main.jsonc b/store/blocks/partials/header/main.jsonc index b762705..f840e74 100644 --- a/store/blocks/partials/header/main.jsonc +++ b/store/blocks/partials/header/main.jsonc @@ -3,7 +3,7 @@ "children": [ "sales-channel-trigger-condition#logo", "search-bar", - "login#desktop", + "login#desktop-roland", "link#wishlist", "minicart.v2#new" ], @@ -52,18 +52,18 @@ } } }, - "login#desktop": { + "login#desktop-roland": { "title": "Login Desktop", "props": { - "showIconProfile": true, + "showIconProfile": false, "iconLabel": "Minha conta", - "labelClasses": ["vtex-login-2-x-loginIcon"], + "hasGoogleOneTap": true, "providerPasswordButtonLabel": "Entrar com e-mail", "emailAndPasswordTitle": "Entrar com e-mail e senha", - "accessCodeTitle": "Receber código de acesso por e-mail", - "emailPraceholder": "EX:@MAIL.COM.BR", - "passwordPlaceholder": "adicionar sua senha", - "showPasswordVerificationIntoTooltip": true + "accessCodeTitle": "Receber código de acesso", + "emailPraceholder": "exemplo@email.com", + "passwordPlaceholder": "Digite sua senha", + "labelClasses": ["vtex-login-2-x-loginIcon"] } } } diff --git a/styles/css/vtex.login.css b/styles/css/vtex.login.css index 01e0443..fa66957 100644 --- a/styles/css/vtex.login.css +++ b/styles/css/vtex.login.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -14,7 +15,7 @@ background-color: transparent; } .container :global(.vtex-button):hover { - background-color: var(--Gray-Scale-White, #FFF); + background-color: var(--Gray-Scale-White, #fff); } .container :global(.vtex-button) :global(.vtex-button__label) { padding: 0 !important; @@ -70,4 +71,863 @@ height: 20px; background-repeat: no-repeat; display: block; +} + +.content { + padding: 1.5rem; +} + +.box { + right: unset !important; + left: -4.25rem; +} +.box .arrowUp { + left: calc(50% - 1rem); +} +.box .content--loginOptions .formTitle { + color: #18181b; + font-family: "Proxima Nova"; + font-size: 0; + font-style: normal; + font-weight: 500; + line-height: 28px; + letter-spacing: -0.18px; + margin: 0; + padding: 0; + text-align: left; + width: 88%; +} +.box .content--loginOptions .formTitle::before { + content: "Escolha uma opção para acessar sua conta."; + font-size: 18px; +} +.box .content--loginOptions .optionsList { + margin: 4rem 0; + display: flex; + flex-direction: column-reverse; + position: relative; +} +.box .content--loginOptions .optionsList::before { + content: "Entrar com e-email"; + color: #3f3f46; + font-family: "Proxima Nova"; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 24px; + letter-spacing: -0.16px; + position: absolute; + left: 0; + top: -2.5rem; +} +.box .content--loginOptions .optionsList .accessCodeOptionBtn :global(.vtex-button) { + border-radius: 2px; + border: 1.25px solid #18181b; + background: #fff; + height: 3rem; + margin-bottom: 2.5rem; + position: relative; + text-transform: inherit; + display: flex; + justify-content: center; + align-items: center; + column-gap: 4px; +} +.box .content--loginOptions .optionsList .accessCodeOptionBtn :global(.vtex-button):hover { + transition: all 0.3s ease-in-out; + border: 1.25px solid #ee8146; + background: #fdf2ec; +} +.box .content--loginOptions .optionsList .accessCodeOptionBtn :global(.vtex-button):hover :global(.vtex-button__label)::before { + color: #ff5a00; +} +.box .content--loginOptions .optionsList .accessCodeOptionBtn :global(.vtex-button) :global(.vtex-button__label) { + font-size: 0; + text-transform: inherit; + position: absolute; + width: 100%; +} +.box .content--loginOptions .optionsList .accessCodeOptionBtn :global(.vtex-button) :global(.vtex-button__label)::before { + content: "Receber código de acesso"; + display: block; + color: #3f3f46; + font-family: "Proxima Nova"; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 24px; + letter-spacing: -0.16px; +} +.box .content--loginOptions .optionsList .accessCodeOptionBtn :global(.vtex-button)::before { + content: "Não tem uma conta?"; + color: #5e5e5e; + font-weight: 500; + pointer-events: none; +} +.box .content--loginOptions .optionsList .accessCodeOptionBtn :global(.vtex-button)::after { + content: "Cadastre-se"; + color: #353535; + font-weight: 600; +} +.box .content--loginOptions .optionsList .accessCodeOptionBtn :global(.vtex-button)::before, .box .content--loginOptions .optionsList .accessCodeOptionBtn :global(.vtex-button)::after { + font-family: "Proxima Nova"; + font-size: 16px; + font-style: normal; + line-height: 24px; + letter-spacing: -0.16px; + transform: translateY(52px); +} +.box .content--loginOptions .optionsList .emailPasswordOptionBtn :global(.vtex-button) { + border-radius: 2px; + border: none; + background: #2b2b3a; + height: 3rem; + position: relative; + text-transform: inherit; + display: flex; + justify-content: center; + align-items: center; + column-gap: 4px; +} +.box .content--loginOptions .optionsList .emailPasswordOptionBtn :global(.vtex-button):hover { + transition: all 0.3s ease-in-out; + background: #424250; +} +.box .content--loginOptions .optionsList .emailPasswordOptionBtn :global(.vtex-button) :global(.vtex-button__label) { + font-size: 0; + text-transform: inherit; + position: absolute; + width: 100%; +} +.box .content--loginOptions .optionsList .emailPasswordOptionBtn :global(.vtex-button) :global(.vtex-button__label)::before { + content: "Entrar com e-mail e senha"; + display: block; + color: #fff; + font-family: "Proxima Nova"; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 24px; + letter-spacing: -0.16px; +} +.box .contentFormVisible { + padding: 0; +} +.box .contentFormVisible .emailAndPasswordForm .formTitle { + padding: 0; + margin: 0; + color: #18181b; + font-family: "Proxima Nova"; + font-size: 0; + font-style: normal; + font-weight: 500; + line-height: 28px; + letter-spacing: -0.2px; + margin: 1.5rem 0; + text-align: left; + position: relative; + font-size: 20px; +} +.box .contentFormVisible .emailAndPasswordForm .formTitle::before { + content: "E-mail e senha"; + position: absolute; + left: 0; + top: -1.5rem; + color: #5a5a66; + font-size: 12px; + font-weight: 600; + line-height: 16px; + letter-spacing: -0.12px; +} +.box .contentFormVisible .emailAndPasswordForm .inputContainerEmail :global(.vtex-input-prefix__group), +.box .contentFormVisible .emailAndPasswordForm .inputContainerPassword :global(.vtex-input-prefix__group) { + border-radius: 2px; + border: 1px solid #d4d4d8; + background: #fff; + padding: 0.75rem 1rem; + height: 3rem; +} +.box .contentFormVisible .emailAndPasswordForm .inputContainerEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input), +.box .contentFormVisible .emailAndPasswordForm .inputContainerPassword :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + padding: 0; + font-family: "Proxima Nova"; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; + letter-spacing: -0.16px; +} +.box .contentFormVisible .emailAndPasswordForm .inputContainerPassword::before { + content: "Senha"; + color: #3f3f46; + font-family: "Proxima Nova"; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 20px; + letter-spacing: -0.14px; + padding-bottom: 8px; + display: block; +} +.box .contentFormVisible .emailAndPasswordForm .inputContainerPassword :global(.vtex-input__suffix) { + padding: 0; +} +.box .contentFormVisible .emailAndPasswordForm .inputContainerPassword :global(.vtex-input__suffix) :global(.vtex-login-2-x-eyeIcon--visible) :global(.vtex-login-2-x-eyeSightIcon) { + display: none; +} +.box .contentFormVisible .emailAndPasswordForm .inputContainerPassword :global(.vtex-input__suffix) :global(.vtex-login-2-x-eyeIcon--visible)::after { + content: url('data:image/svg+xml,'); + display: block; + width: 1.25rem; + height: 1.25rem; +} +.box .contentFormVisible .emailAndPasswordForm .inputContainerPassword :global(.vtex-input__suffix) :global(.vtex-login-2-x-eyeIcon--invisible) :global(.vtex-login-2-x-eyeSightIcon) { + display: none; +} +.box .contentFormVisible .emailAndPasswordForm .inputContainerPassword :global(.vtex-input__suffix) :global(.vtex-login-2-x-eyeIcon--invisible)::after { + content: url('data:image/svg+xml,'); + display: block; + width: 1.25rem; + height: 1.25rem; +} +.box .contentFormVisible .emailAndPasswordForm .formLinkContainer:last-child { + display: none; +} +.box .contentFormVisible .emailAndPasswordForm .forgotPasswordLink { + color: #2b2b3a; + text-align: right; + font-family: "Proxima Nova"; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 20px; + letter-spacing: -0.14px; +} +.box .contentFormVisible .emailVerification .formTitle, +.box .contentFormVisible .codeConfirmation .formTitle { + padding: 0; + margin: 0; + width: 90%; + color: #18181b; + font-family: "Proxima Nova"; + font-size: 0; + font-style: normal; + font-weight: 500; + line-height: 28px; + letter-spacing: -0.2px; + margin: 1.5rem 0; + text-align: left; + position: relative; +} +.box .contentFormVisible .emailVerification .formTitle::before, +.box .contentFormVisible .codeConfirmation .formTitle::before { + content: "Código de acesso"; + position: absolute; + left: 0; + top: -1.5rem; + color: #5a5a66; + font-size: 12px; + font-weight: 600; + line-height: 16px; + letter-spacing: -0.12px; +} +.box .contentFormVisible .emailVerification .formTitle::after, +.box .contentFormVisible .codeConfirmation .formTitle::after { + content: "Receber código de acesso por e-mail"; + font-size: 20px; +} +.box .contentFormVisible .emailVerification .inputContainerEmail::before { + content: "E-mail"; + color: #3f3f46; + font-family: "Proxima Nova"; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 20px; + letter-spacing: -0.14px; + padding-bottom: 8px; + display: block; +} +.box .contentFormVisible .emailVerification .inputContainerEmail :global(.vtex-input-prefix__group) { + border-radius: 2px; + border: 1px solid #d4d4d8; + background: #fff; + padding: 0.75rem 1rem; + height: 3rem; +} +.box .contentFormVisible .emailVerification .inputContainerEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + padding: 0; + font-family: "Proxima Nova"; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; + letter-spacing: -0.16px; +} +.box .contentFormVisible .emailForm .formFooter .sendButton :global(.vtex-button) { + border-radius: 2px; + background: #2b2b3a; +} +.box .contentFormVisible .emailForm .formFooter .sendButton :global(.vtex-button) :global(.vtex-button__label) { + font-family: "Proxima Nova"; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 24px; + letter-spacing: -0.16px; + text-transform: initial; +} +.box .contentFormVisible .emailForm .formFooter .sendButton :global(.vtex-button) :global(.vtex-button__label)::before { + content: "Solicitar código"; +} +.box .contentFormVisible .emailForm .formFooter .sendButton :global(.vtex-button) :global(.vtex-button__label) :global(.t-small) { + font-size: 0; +} +.box .contentFormVisible .codeConfirmation .inputContainerAccessCode::before { + content: "Código"; + color: #3f3f46; + font-family: "Proxima Nova"; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 20px; + letter-spacing: -0.14px; + padding-bottom: 8px; + display: block; +} +.box .contentFormVisible .codeConfirmation .inputContainerAccessCode :global(.vtex-input-prefix__group) { + border-radius: 2px; + border: 1px solid #d4d4d8; + background: #fff; + padding: 0.75rem 1rem; + height: 3rem; +} +.box .contentFormVisible .codeConfirmation .inputContainerAccessCode :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + padding: 0; + font-family: "Proxima Nova"; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; + letter-spacing: -0.16px; +} +.box .contentFormVisible .codeConfirmation .formFooter .sendButton :global(.vtex-button) { + border-radius: 2px; + background: #2b2b3a; +} +.box .contentFormVisible .codeConfirmation .formFooter .sendButton :global(.vtex-button) :global(.vtex-button__label) { + font-family: "Proxima Nova"; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 24px; + letter-spacing: -0.16px; + text-transform: initial; +} +.box .contentFormVisible .codeConfirmation .formFooter .sendButton :global(.vtex-button) :global(.vtex-button__label)::before { + content: "Confirmar"; +} +.box .contentFormVisible .codeConfirmation .formFooter .sendButton :global(.vtex-button) :global(.vtex-button__label) :global(.t-small) { + font-size: 0; +} +.box .contentFormVisible .formFooter { + margin-top: 1rem; + padding-top: 1rem; +} +.box .contentFormVisible .formFooter :global(.vtex-button) { + height: 3rem; +} +.box .contentFormVisible .formFooter :global(.vtex-button) :global(.vtex-button__label) :global(.t-small) { + font-family: "Proxima Nova"; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 24px; + letter-spacing: -0.16px; +} +.box .contentFormVisible .backButton :global(.vtex-button__label) { + display: flex; + align-items: center; +} +.box .contentFormVisible .backButton :global(.vtex-button__label) :global(.t-small) { + color: #3f3f46; +} +.box .contentFormVisible .backButton :global(.vtex-button__label)::before { + content: url('data:image/svg+xml,'); + width: 1.25rem; + height: 1.25rem; +} +.box .contentFormVisible .backButton :global(.vtex-button__label) .arrowBackIcon { + display: none; +} +.box .contentFormVisible .backButton :global(.vtex-button):hover { + background-color: transparent; +} +.box .contentFormVisible .sendButton :global(.vtex-button) { + border-radius: 2px; + background: #2b2b3a; +} + +.content--emailAndPassword.contentAlwaysWithOptions, +.content--emailVerification, +.content--codeConfirmation { + display: flex; + flex-direction: column; + align-items: center; +} +.content--emailAndPassword.contentAlwaysWithOptions .loginOptionsContainer .formTitle, +.content--emailVerification .loginOptionsContainer .formTitle, +.content--codeConfirmation .loginOptionsContainer .formTitle { + color: #18181b; + font-family: "Proxima Nova"; + font-size: 0; + font-style: normal; + font-weight: 500; + line-height: 20px; + letter-spacing: -0.18px; + margin: 0; + padding: 0; + text-align: left; + width: 78%; +} +.content--emailAndPassword.contentAlwaysWithOptions .loginOptionsContainer .formTitle::before, +.content--emailVerification .loginOptionsContainer .formTitle::before, +.content--codeConfirmation .loginOptionsContainer .formTitle::before { + content: "Escolha uma opção para acessar sua conta."; + font-size: 18px; +} +.content--emailAndPassword.contentAlwaysWithOptions .loginOptionsContainer .optionsList, +.content--emailVerification .loginOptionsContainer .optionsList, +.content--codeConfirmation .loginOptionsContainer .optionsList { + margin: 1rem 0; + display: flex; + flex-direction: column; +} +.content--emailAndPassword.contentAlwaysWithOptions .loginOptionsContainer .optionsList .accessCodeOptionBtn :global(.vtex-button), +.content--emailVerification .loginOptionsContainer .optionsList .accessCodeOptionBtn :global(.vtex-button), +.content--codeConfirmation .loginOptionsContainer .optionsList .accessCodeOptionBtn :global(.vtex-button) { + border-radius: 2px; + border: 1.25px solid #18181b; + background: #fff; + height: 3rem; + margin-bottom: 2.5rem; + position: relative; + text-transform: inherit; + display: flex; + justify-content: center; + align-items: center; + column-gap: 4px; +} +.content--emailAndPassword.contentAlwaysWithOptions .loginOptionsContainer .optionsList .accessCodeOptionBtn :global(.vtex-button):hover, +.content--emailVerification .loginOptionsContainer .optionsList .accessCodeOptionBtn :global(.vtex-button):hover, +.content--codeConfirmation .loginOptionsContainer .optionsList .accessCodeOptionBtn :global(.vtex-button):hover { + transition: all 0.3s ease-in-out; + border: 1.25px solid #ee8146; + background: #fdf2ec; +} +.content--emailAndPassword.contentAlwaysWithOptions .loginOptionsContainer .optionsList .accessCodeOptionBtn :global(.vtex-button):hover :global(.vtex-button__label)::before, +.content--emailVerification .loginOptionsContainer .optionsList .accessCodeOptionBtn :global(.vtex-button):hover :global(.vtex-button__label)::before, +.content--codeConfirmation .loginOptionsContainer .optionsList .accessCodeOptionBtn :global(.vtex-button):hover :global(.vtex-button__label)::before { + color: #ff5a00; +} +.content--emailAndPassword.contentAlwaysWithOptions .loginOptionsContainer .optionsList .accessCodeOptionBtn :global(.vtex-button) :global(.vtex-button__label), +.content--emailVerification .loginOptionsContainer .optionsList .accessCodeOptionBtn :global(.vtex-button) :global(.vtex-button__label), +.content--codeConfirmation .loginOptionsContainer .optionsList .accessCodeOptionBtn :global(.vtex-button) :global(.vtex-button__label) { + font-size: 0; + text-transform: inherit; + width: 100%; +} +.content--emailAndPassword.contentAlwaysWithOptions .loginOptionsContainer .optionsList .accessCodeOptionBtn :global(.vtex-button) :global(.vtex-button__label)::before, +.content--emailVerification .loginOptionsContainer .optionsList .accessCodeOptionBtn :global(.vtex-button) :global(.vtex-button__label)::before, +.content--codeConfirmation .loginOptionsContainer .optionsList .accessCodeOptionBtn :global(.vtex-button) :global(.vtex-button__label)::before { + content: "Receber código de acesso por e-mail"; + display: block; + color: #3f3f46; + font-family: "Proxima Nova"; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 24px; + letter-spacing: -0.16px; +} +.content--emailAndPassword.contentAlwaysWithOptions .emailPasswordOptionBtn :global(.vtex-button), +.content--emailVerification .emailPasswordOptionBtn :global(.vtex-button), +.content--codeConfirmation .emailPasswordOptionBtn :global(.vtex-button) { + border-radius: 2px; + border: 1.25px solid #d4d4d8; + background: #fff; + height: 3rem; + position: relative; + text-transform: inherit; + display: flex; + justify-content: center; + align-items: center; + column-gap: 4px; +} +.content--emailAndPassword.contentAlwaysWithOptions .emailPasswordOptionBtn :global(.vtex-button) :global(.vtex-button__label), +.content--emailVerification .emailPasswordOptionBtn :global(.vtex-button) :global(.vtex-button__label), +.content--codeConfirmation .emailPasswordOptionBtn :global(.vtex-button) :global(.vtex-button__label) { + font-size: 0; + text-transform: inherit; + position: absolute; + width: 100%; +} +.content--emailAndPassword.contentAlwaysWithOptions .emailPasswordOptionBtn :global(.vtex-button) :global(.vtex-button__label)::before, +.content--emailVerification .emailPasswordOptionBtn :global(.vtex-button) :global(.vtex-button__label)::before, +.content--codeConfirmation .emailPasswordOptionBtn :global(.vtex-button) :global(.vtex-button__label)::before { + content: "Entrar com e-mail e senha"; + display: block; + color: #3f3f46; + font-family: "Proxima Nova"; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 24px; + letter-spacing: -0.16px; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible, +.content--emailVerification .contentFormVisible, +.content--codeConfirmation .contentFormVisible { + padding: 0; + width: 100%; + max-width: 22.5rem; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .emailAndPasswordForm .formTitle, +.content--emailVerification .contentFormVisible .emailAndPasswordForm .formTitle, +.content--codeConfirmation .contentFormVisible .emailAndPasswordForm .formTitle { + padding: 0; + color: #18181b; + font-family: "Proxima Nova"; + font-size: 0; + font-style: normal; + font-weight: 500; + line-height: 28px; + letter-spacing: -0.2px; + margin: 1.5rem 0; + text-align: left; + position: relative; + font-size: 20px; + margin: 0 0 1.5rem; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .emailAndPasswordForm .inputContainerEmail :global(.vtex-input-prefix__group), +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .emailAndPasswordForm .inputContainerPassword :global(.vtex-input-prefix__group), +.content--emailVerification .contentFormVisible .emailAndPasswordForm .inputContainerEmail :global(.vtex-input-prefix__group), +.content--emailVerification .contentFormVisible .emailAndPasswordForm .inputContainerPassword :global(.vtex-input-prefix__group), +.content--codeConfirmation .contentFormVisible .emailAndPasswordForm .inputContainerEmail :global(.vtex-input-prefix__group), +.content--codeConfirmation .contentFormVisible .emailAndPasswordForm .inputContainerPassword :global(.vtex-input-prefix__group) { + border-radius: 2px; + border: 1px solid #d4d4d8; + background: #fff; + padding: 0.75rem 1rem; + height: 3rem; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .emailAndPasswordForm .inputContainerEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input), +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .emailAndPasswordForm .inputContainerPassword :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input), +.content--emailVerification .contentFormVisible .emailAndPasswordForm .inputContainerEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input), +.content--emailVerification .contentFormVisible .emailAndPasswordForm .inputContainerPassword :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input), +.content--codeConfirmation .contentFormVisible .emailAndPasswordForm .inputContainerEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input), +.content--codeConfirmation .contentFormVisible .emailAndPasswordForm .inputContainerPassword :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + padding: 0; + font-family: "Proxima Nova"; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; + letter-spacing: -0.16px; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .emailAndPasswordForm .inputContainerPassword::before, +.content--emailVerification .contentFormVisible .emailAndPasswordForm .inputContainerPassword::before, +.content--codeConfirmation .contentFormVisible .emailAndPasswordForm .inputContainerPassword::before { + content: "Senha"; + color: #3f3f46; + font-family: "Proxima Nova"; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 20px; + letter-spacing: -0.14px; + padding-bottom: 8px; + display: block; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .emailAndPasswordForm .inputContainerPassword :global(.vtex-input__suffix), +.content--emailVerification .contentFormVisible .emailAndPasswordForm .inputContainerPassword :global(.vtex-input__suffix), +.content--codeConfirmation .contentFormVisible .emailAndPasswordForm .inputContainerPassword :global(.vtex-input__suffix) { + padding: 0; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .emailAndPasswordForm .inputContainerPassword :global(.vtex-input__suffix) :global(.vtex-login-2-x-eyeIcon--visible) :global(.vtex-login-2-x-eyeSightIcon), +.content--emailVerification .contentFormVisible .emailAndPasswordForm .inputContainerPassword :global(.vtex-input__suffix) :global(.vtex-login-2-x-eyeIcon--visible) :global(.vtex-login-2-x-eyeSightIcon), +.content--codeConfirmation .contentFormVisible .emailAndPasswordForm .inputContainerPassword :global(.vtex-input__suffix) :global(.vtex-login-2-x-eyeIcon--visible) :global(.vtex-login-2-x-eyeSightIcon) { + display: none; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .emailAndPasswordForm .inputContainerPassword :global(.vtex-input__suffix) :global(.vtex-login-2-x-eyeIcon--visible)::after, +.content--emailVerification .contentFormVisible .emailAndPasswordForm .inputContainerPassword :global(.vtex-input__suffix) :global(.vtex-login-2-x-eyeIcon--visible)::after, +.content--codeConfirmation .contentFormVisible .emailAndPasswordForm .inputContainerPassword :global(.vtex-input__suffix) :global(.vtex-login-2-x-eyeIcon--visible)::after { + content: url('data:image/svg+xml,'); + display: block; + width: 1.25rem; + height: 1.25rem; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .emailAndPasswordForm .inputContainerPassword :global(.vtex-input__suffix) :global(.vtex-login-2-x-eyeIcon--invisible) :global(.vtex-login-2-x-eyeSightIcon), +.content--emailVerification .contentFormVisible .emailAndPasswordForm .inputContainerPassword :global(.vtex-input__suffix) :global(.vtex-login-2-x-eyeIcon--invisible) :global(.vtex-login-2-x-eyeSightIcon), +.content--codeConfirmation .contentFormVisible .emailAndPasswordForm .inputContainerPassword :global(.vtex-input__suffix) :global(.vtex-login-2-x-eyeIcon--invisible) :global(.vtex-login-2-x-eyeSightIcon) { + display: none; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .emailAndPasswordForm .inputContainerPassword :global(.vtex-input__suffix) :global(.vtex-login-2-x-eyeIcon--invisible)::after, +.content--emailVerification .contentFormVisible .emailAndPasswordForm .inputContainerPassword :global(.vtex-input__suffix) :global(.vtex-login-2-x-eyeIcon--invisible)::after, +.content--codeConfirmation .contentFormVisible .emailAndPasswordForm .inputContainerPassword :global(.vtex-input__suffix) :global(.vtex-login-2-x-eyeIcon--invisible)::after { + content: url('data:image/svg+xml,'); + display: block; + width: 1.25rem; + height: 1.25rem; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .emailAndPasswordForm .forgotPasswordLink, +.content--emailVerification .contentFormVisible .emailAndPasswordForm .forgotPasswordLink, +.content--codeConfirmation .contentFormVisible .emailAndPasswordForm .forgotPasswordLink { + color: #2b2b3a; + text-align: right; + font-family: "Proxima Nova"; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 20px; + letter-spacing: -0.14px; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .emailAndPasswordForm .formFooter, +.content--emailVerification .contentFormVisible .emailAndPasswordForm .formFooter, +.content--codeConfirmation .contentFormVisible .emailAndPasswordForm .formFooter { + border: none; + margin-top: 1rem; + padding: 0; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .emailAndPasswordForm .formFooter .sendButton :global(.vtex-button), +.content--emailVerification .contentFormVisible .emailAndPasswordForm .formFooter .sendButton :global(.vtex-button), +.content--codeConfirmation .contentFormVisible .emailAndPasswordForm .formFooter .sendButton :global(.vtex-button) { + border-radius: 2px; + background: #2b2b3a; + height: 3rem; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .emailAndPasswordForm .formFooter .sendButton :global(.vtex-button) :global(.vtex-button__label) :global(.t-small), +.content--emailVerification .contentFormVisible .emailAndPasswordForm .formFooter .sendButton :global(.vtex-button) :global(.vtex-button__label) :global(.t-small), +.content--codeConfirmation .contentFormVisible .emailAndPasswordForm .formFooter .sendButton :global(.vtex-button) :global(.vtex-button__label) :global(.t-small) { + font-family: "Proxima Nova"; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 24px; + letter-spacing: -0.16px; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .emailAndPasswordForm .formLinkContainer, +.content--emailVerification .contentFormVisible .emailAndPasswordForm .formLinkContainer, +.content--codeConfirmation .contentFormVisible .emailAndPasswordForm .formLinkContainer { + margin-top: 1.5rem; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .emailAndPasswordForm .formLinkContainer .dontHaveAccount, +.content--emailVerification .contentFormVisible .emailAndPasswordForm .formLinkContainer .dontHaveAccount, +.content--codeConfirmation .contentFormVisible .emailAndPasswordForm .formLinkContainer .dontHaveAccount { + color: #5e5e5e; + font-family: "Proxima Nova"; + font-style: normal; + font-size: 0; + font-weight: 600; + line-height: 24px; + letter-spacing: -0.16px; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .emailAndPasswordForm .formLinkContainer .dontHaveAccount::before, +.content--emailVerification .contentFormVisible .emailAndPasswordForm .formLinkContainer .dontHaveAccount::before, +.content--codeConfirmation .contentFormVisible .emailAndPasswordForm .formLinkContainer .dontHaveAccount::before { + content: "Não tem uma conta? "; + font-size: 16px; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .emailAndPasswordForm .formLinkContainer .dontHaveAccount::after, +.content--emailVerification .contentFormVisible .emailAndPasswordForm .formLinkContainer .dontHaveAccount::after, +.content--codeConfirmation .contentFormVisible .emailAndPasswordForm .formLinkContainer .dontHaveAccount::after { + content: "Cadastre-se"; + color: #353535; + font-size: 16px; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .emailVerification .formTitle, +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .codeConfirmation .formTitle, +.content--emailVerification .contentFormVisible .emailVerification .formTitle, +.content--emailVerification .contentFormVisible .codeConfirmation .formTitle, +.content--codeConfirmation .contentFormVisible .emailVerification .formTitle, +.content--codeConfirmation .contentFormVisible .codeConfirmation .formTitle { + padding: 0; + margin: 0; + width: 90%; + color: #18181b; + font-family: "Proxima Nova"; + font-size: 0; + font-style: normal; + font-weight: 500; + line-height: 28px; + letter-spacing: -0.2px; + margin: 1.5rem 0; + text-align: left; + position: relative; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .emailVerification .formTitle::after, +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .codeConfirmation .formTitle::after, +.content--emailVerification .contentFormVisible .emailVerification .formTitle::after, +.content--emailVerification .contentFormVisible .codeConfirmation .formTitle::after, +.content--codeConfirmation .contentFormVisible .emailVerification .formTitle::after, +.content--codeConfirmation .contentFormVisible .codeConfirmation .formTitle::after { + content: "Receber código de acesso por e-mail"; + font-size: 20px; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .emailVerification .inputContainerEmail::before, +.content--emailVerification .contentFormVisible .emailVerification .inputContainerEmail::before, +.content--codeConfirmation .contentFormVisible .emailVerification .inputContainerEmail::before { + content: "E-mail"; + color: #3f3f46; + font-family: "Proxima Nova"; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 20px; + letter-spacing: -0.14px; + padding-bottom: 8px; + display: block; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .emailVerification .inputContainerEmail :global(.vtex-input-prefix__group), +.content--emailVerification .contentFormVisible .emailVerification .inputContainerEmail :global(.vtex-input-prefix__group), +.content--codeConfirmation .contentFormVisible .emailVerification .inputContainerEmail :global(.vtex-input-prefix__group) { + border-radius: 2px; + border: 1px solid #d4d4d8; + background: #fff; + padding: 0.75rem 1rem; + height: 3rem; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .emailVerification .inputContainerEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input), +.content--emailVerification .contentFormVisible .emailVerification .inputContainerEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input), +.content--codeConfirmation .contentFormVisible .emailVerification .inputContainerEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + padding: 0; + font-family: "Proxima Nova"; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; + letter-spacing: -0.16px; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .emailForm .formFooter .sendButton :global(.vtex-button), +.content--emailVerification .contentFormVisible .emailForm .formFooter .sendButton :global(.vtex-button), +.content--codeConfirmation .contentFormVisible .emailForm .formFooter .sendButton :global(.vtex-button) { + border-radius: 2px; + background: #2b2b3a; + height: 3rem; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .emailForm .formFooter .sendButton :global(.vtex-button) :global(.vtex-button__label), +.content--emailVerification .contentFormVisible .emailForm .formFooter .sendButton :global(.vtex-button) :global(.vtex-button__label), +.content--codeConfirmation .contentFormVisible .emailForm .formFooter .sendButton :global(.vtex-button) :global(.vtex-button__label) { + font-family: "Proxima Nova"; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 24px; + letter-spacing: -0.16px; + text-transform: initial; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .emailForm .formFooter .sendButton :global(.vtex-button) :global(.vtex-button__label)::before, +.content--emailVerification .contentFormVisible .emailForm .formFooter .sendButton :global(.vtex-button) :global(.vtex-button__label)::before, +.content--codeConfirmation .contentFormVisible .emailForm .formFooter .sendButton :global(.vtex-button) :global(.vtex-button__label)::before { + content: "Solicitar código"; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .emailForm .formFooter .sendButton :global(.vtex-button) :global(.vtex-button__label) :global(.t-small), +.content--emailVerification .contentFormVisible .emailForm .formFooter .sendButton :global(.vtex-button) :global(.vtex-button__label) :global(.t-small), +.content--codeConfirmation .contentFormVisible .emailForm .formFooter .sendButton :global(.vtex-button) :global(.vtex-button__label) :global(.t-small) { + font-size: 0; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .codeConfirmation .inputContainerAccessCode::before, +.content--emailVerification .contentFormVisible .codeConfirmation .inputContainerAccessCode::before, +.content--codeConfirmation .contentFormVisible .codeConfirmation .inputContainerAccessCode::before { + content: "Código"; + color: #3f3f46; + font-family: "Proxima Nova"; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 20px; + letter-spacing: -0.14px; + padding-bottom: 8px; + display: block; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .codeConfirmation .inputContainerAccessCode :global(.vtex-input-prefix__group), +.content--emailVerification .contentFormVisible .codeConfirmation .inputContainerAccessCode :global(.vtex-input-prefix__group), +.content--codeConfirmation .contentFormVisible .codeConfirmation .inputContainerAccessCode :global(.vtex-input-prefix__group) { + border-radius: 2px; + border: 1px solid #d4d4d8; + background: #fff; + padding: 0.75rem 1rem; + height: 3rem; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .codeConfirmation .inputContainerAccessCode :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input), +.content--emailVerification .contentFormVisible .codeConfirmation .inputContainerAccessCode :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input), +.content--codeConfirmation .contentFormVisible .codeConfirmation .inputContainerAccessCode :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + padding: 0; + font-family: "Proxima Nova"; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; + letter-spacing: -0.16px; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .codeConfirmation .formFooter, +.content--emailVerification .contentFormVisible .codeConfirmation .formFooter, +.content--codeConfirmation .contentFormVisible .codeConfirmation .formFooter { + border: none; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .codeConfirmation .formFooter .sendButton :global(.vtex-button), +.content--emailVerification .contentFormVisible .codeConfirmation .formFooter .sendButton :global(.vtex-button), +.content--codeConfirmation .contentFormVisible .codeConfirmation .formFooter .sendButton :global(.vtex-button) { + border-radius: 2px; + background: #2b2b3a; + height: 3rem; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .codeConfirmation .formFooter .sendButton :global(.vtex-button) :global(.vtex-button__label), +.content--emailVerification .contentFormVisible .codeConfirmation .formFooter .sendButton :global(.vtex-button) :global(.vtex-button__label), +.content--codeConfirmation .contentFormVisible .codeConfirmation .formFooter .sendButton :global(.vtex-button) :global(.vtex-button__label) { + font-family: "Proxima Nova"; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 24px; + letter-spacing: -0.16px; + text-transform: initial; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .codeConfirmation .formFooter .sendButton :global(.vtex-button) :global(.vtex-button__label)::before, +.content--emailVerification .contentFormVisible .codeConfirmation .formFooter .sendButton :global(.vtex-button) :global(.vtex-button__label)::before, +.content--codeConfirmation .contentFormVisible .codeConfirmation .formFooter .sendButton :global(.vtex-button) :global(.vtex-button__label)::before { + content: "Confirmar"; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .codeConfirmation .formFooter .sendButton :global(.vtex-button) :global(.vtex-button__label) :global(.t-small), +.content--emailVerification .contentFormVisible .codeConfirmation .formFooter .sendButton :global(.vtex-button) :global(.vtex-button__label) :global(.t-small), +.content--codeConfirmation .contentFormVisible .codeConfirmation .formFooter .sendButton :global(.vtex-button) :global(.vtex-button__label) :global(.t-small) { + font-size: 0; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .backButton :global(.vtex-button__label), +.content--emailVerification .contentFormVisible .backButton :global(.vtex-button__label), +.content--codeConfirmation .contentFormVisible .backButton :global(.vtex-button__label) { + display: flex; + align-items: center; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .backButton :global(.vtex-button__label) :global(.t-small), +.content--emailVerification .contentFormVisible .backButton :global(.vtex-button__label) :global(.t-small), +.content--codeConfirmation .contentFormVisible .backButton :global(.vtex-button__label) :global(.t-small) { + color: #3f3f46; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .backButton :global(.vtex-button__label)::before, +.content--emailVerification .contentFormVisible .backButton :global(.vtex-button__label)::before, +.content--codeConfirmation .contentFormVisible .backButton :global(.vtex-button__label)::before { + content: url('data:image/svg+xml,'); + width: 1.25rem; + height: 1.25rem; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .backButton :global(.vtex-button__label) .arrowBackIcon, +.content--emailVerification .contentFormVisible .backButton :global(.vtex-button__label) .arrowBackIcon, +.content--codeConfirmation .contentFormVisible .backButton :global(.vtex-button__label) .arrowBackIcon { + display: none; +} +.content--emailAndPassword.contentAlwaysWithOptions .contentFormVisible .backButton :global(.vtex-button):hover, +.content--emailVerification .contentFormVisible .backButton :global(.vtex-button):hover, +.content--codeConfirmation .contentFormVisible .backButton :global(.vtex-button):hover { + background-color: transparent; } \ No newline at end of file diff --git a/styles/sass/partials/header/vtex.login.scss b/styles/sass/partials/header/vtex.login.scss index 8082bb1..3b4586f 100644 --- a/styles/sass/partials/header/vtex.login.scss +++ b/styles/sass/partials/header/vtex.login.scss @@ -1,11 +1,41 @@ -.container { +@mixin button-label-shared { + font-family: 'Proxima Nova'; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 24px; + letter-spacing: -0.16px; + text-transform: initial; +} + +@mixin input-shared { + border-radius: 2px; + border: 1px solid #d4d4d8; + background: #fff; + padding: 0.75rem 1rem; + height: 3rem; +} + +@mixin form-title { + color: #18181b; + font-family: 'Proxima Nova'; + font-size: 0; + font-style: normal; + font-weight: 500; + line-height: 28px; + letter-spacing: -0.2px; + margin: 1.5rem 0; + text-align: left; + position: relative; +} +.container { :global(.vtex-button) { border: none; background-color: transparent; &:hover { - background-color: var(--Gray-Scale-White, #FFF); + background-color: var(--Gray-Scale-White, #fff); } :global(.vtex-button__label) { @@ -27,7 +57,7 @@ &::before { content: ''; - background-image: url("assets/svgs/login-icon.svg"); + background-image: url('assets/svgs/login-icon.svg'); width: 20px; height: 20px; background-repeat: no-repeat; @@ -35,11 +65,11 @@ } &::after { - content: "Minha conta"; + content: 'Minha conta'; color: var(--Gray-Scale-Black, #000); /* text-base/medium */ - font-family: "Proxima Nova"; + font-family: 'Proxima Nova'; font-size: 16px; font-style: normal; text-transform: math-auto; @@ -52,7 +82,7 @@ .label { color: var(--Gray-Scale-Black, #000); - font-family: "Proxima Nova"; + font-family: 'Proxima Nova'; font-size: 16px; font-style: normal; font-weight: 500; @@ -66,13 +96,762 @@ &::before { content: ''; - background-image: url("assets/svgs/login-icon.svg"); + background-image: url('assets/svgs/login-icon.svg'); width: 20px; height: 20px; background-repeat: no-repeat; display: block; } + } +} +.content { + padding: 1.5rem; +} +.box { + right: unset !important; + left: -4.25rem; + .arrowUp { + left: calc(50% - 1rem); + } + .content--loginOptions { + .formTitle { + color: #18181b; + font-family: 'Proxima Nova'; + font-size: 0; + font-style: normal; + font-weight: 500; + line-height: 28px; + letter-spacing: -0.18px; + margin: 0; + padding: 0; + text-align: left; + width: 88%; + &::before { + content: 'Escolha uma opção para acessar sua conta.'; + font-size: 18px; + } + } + .optionsList { + margin: 4rem 0; + display: flex; + flex-direction: column-reverse; + position: relative; + &::before { + content: 'Entrar com e-email'; + color: #3f3f46; + font-family: 'Proxima Nova'; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 24px; + letter-spacing: -0.16px; + position: absolute; + left: 0; + top: -2.5rem; + } + .accessCodeOptionBtn { + :global(.vtex-button) { + border-radius: 2px; + border: 1.25px solid #18181b; + background: #fff; + height: 3rem; + margin-bottom: 2.5rem; + position: relative; + text-transform: inherit; + display: flex; + justify-content: center; + align-items: center; + column-gap: 4px; + &:hover { + transition: all 0.3s ease-in-out; + border: 1.25px solid #ee8146; + background: #fdf2ec; + :global(.vtex-button__label) { + &::before { + color: #ff5a00; + } + } + } + :global(.vtex-button__label) { + font-size: 0; + text-transform: inherit; + position: absolute; + width: 100%; + &::before { + content: 'Receber código de acesso'; + display: block; + color: #3f3f46; + font-family: 'Proxima Nova'; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 24px; + letter-spacing: -0.16px; + } + } + &::before { + content: 'Não tem uma conta?'; + color: #5e5e5e; + font-weight: 500; + pointer-events: none; + } + &::after { + content: 'Cadastre-se'; + color: #353535; + font-weight: 600; + } + &::before, + &::after { + font-family: 'Proxima Nova'; + font-size: 16px; + font-style: normal; + line-height: 24px; + letter-spacing: -0.16px; + transform: translateY(52px); + } + } + } + .emailPasswordOptionBtn { + :global(.vtex-button) { + border-radius: 2px; + border: none; + background: #2b2b3a; + height: 3rem; + position: relative; + text-transform: inherit; + display: flex; + justify-content: center; + align-items: center; + column-gap: 4px; + &:hover { + transition: all 0.3s ease-in-out; + background: #424250; + } + :global(.vtex-button__label) { + font-size: 0; + text-transform: inherit; + position: absolute; + width: 100%; + &::before { + content: 'Entrar com e-mail e senha'; + display: block; + color: #fff; + font-family: 'Proxima Nova'; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 24px; + letter-spacing: -0.16px; + } + } + } + } + } + } + .contentFormVisible { + padding: 0; + .emailAndPasswordForm { + .formTitle { + padding: 0; + margin: 0; + @include form-title; + font-size: 20px; + &::before { + content: 'E-mail e senha'; + position: absolute; + left: 0; + top: -1.5rem; + color: #5a5a66; + font-size: 12px; + font-weight: 600; + line-height: 16px; + letter-spacing: -0.12px; + } + } + .inputContainerEmail, + .inputContainerPassword { + :global(.vtex-input-prefix__group) { + @include input-shared; + :global(.vtex-styleguide-9-x-input) { + padding: 0; + font-family: 'Proxima Nova'; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; + letter-spacing: -0.16px; + } + } + } + .inputContainerPassword { + &::before { + content: 'Senha'; + color: #3f3f46; + font-family: 'Proxima Nova'; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 20px; + letter-spacing: -0.14px; + padding-bottom: 8px; + display: block; + } + :global(.vtex-input__suffix) { + padding: 0; + :global(.vtex-login-2-x-eyeIcon--visible) { + :global(.vtex-login-2-x-eyeSightIcon) { + display: none; + } + &::after { + content: url('data:image/svg+xml,'); + display: block; + width: 1.25rem; + height: 1.25rem; + } + } + :global(.vtex-login-2-x-eyeIcon--invisible) { + :global(.vtex-login-2-x-eyeSightIcon) { + display: none; + } + &::after { + content: url('data:image/svg+xml,'); + display: block; + width: 1.25rem; + height: 1.25rem; + } + } + } + } + .formLinkContainer:last-child { + display: none; + } + .forgotPasswordLink { + color: #2b2b3a; + text-align: right; + font-family: 'Proxima Nova'; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 20px; + letter-spacing: -0.14px; + } + } + .emailVerification, + .codeConfirmation { + .formTitle { + padding: 0; + margin: 0; + width: 90%; + @include form-title; + &::before { + content: 'Código de acesso'; + position: absolute; + left: 0; + top: -1.5rem; + color: #5a5a66; + font-size: 12px; + font-weight: 600; + line-height: 16px; + letter-spacing: -0.12px; + } + &::after { + content: 'Receber código de acesso por e-mail'; + font-size: 20px; + } + } + } + .emailVerification { + .inputContainerEmail { + &::before { + content: 'E-mail'; + color: #3f3f46; + font-family: 'Proxima Nova'; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 20px; + letter-spacing: -0.14px; + padding-bottom: 8px; + display: block; + } + :global(.vtex-input-prefix__group) { + @include input-shared; + :global(.vtex-styleguide-9-x-input) { + padding: 0; + font-family: 'Proxima Nova'; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; + letter-spacing: -0.16px; + } + } + } + } + .emailForm { + .formFooter { + .sendButton { + :global(.vtex-button) { + border-radius: 2px; + background: #2b2b3a; + :global(.vtex-button__label) { + @include button-label-shared; + &::before { + content: 'Solicitar código'; + } + :global(.t-small) { + font-size: 0; + } + } + } + } + } + } + .codeConfirmation { + .inputContainerAccessCode { + &::before { + content: 'Código'; + color: #3f3f46; + font-family: 'Proxima Nova'; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 20px; + letter-spacing: -0.14px; + padding-bottom: 8px; + display: block; + } + :global(.vtex-input-prefix__group) { + @include input-shared; + :global(.vtex-styleguide-9-x-input) { + padding: 0; + font-family: 'Proxima Nova'; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; + letter-spacing: -0.16px; + } + } + } + .formFooter { + .sendButton { + :global(.vtex-button) { + border-radius: 2px; + background: #2b2b3a; + :global(.vtex-button__label) { + @include button-label-shared; + &::before { + content: 'Confirmar'; + } + :global(.t-small) { + font-size: 0; + } + } + } + } + } + } + + .formFooter { + margin-top: 1rem; + padding-top: 1rem; + :global(.vtex-button) { + height: 3rem; + :global(.vtex-button__label) { + :global(.t-small) { + font-family: 'Proxima Nova'; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 24px; + letter-spacing: -0.16px; + } + } + } + } + .backButton { + :global(.vtex-button__label) { + display: flex; + align-items: center; + :global(.t-small) { + color: #3f3f46; + } + &::before { + content: url('data:image/svg+xml,'); + width: 1.25rem; + height: 1.25rem; + } + .arrowBackIcon { + display: none; + } + } + :global(.vtex-button) { + &:hover { + background-color: transparent; + } + } + } + .sendButton { + :global(.vtex-button) { + border-radius: 2px; + background: #2b2b3a; + } + } + } +} +.content--emailAndPassword.contentAlwaysWithOptions, +.content--emailVerification, +.content--codeConfirmation { + display: flex; + flex-direction: column; + align-items: center; + .loginOptionsContainer { + .formTitle { + color: #18181b; + font-family: 'Proxima Nova'; + font-size: 0; + font-style: normal; + font-weight: 500; + line-height: 20px; + letter-spacing: -0.18px; + margin: 0; + padding: 0; + text-align: left; + width: 78%; + &::before { + content: 'Escolha uma opção para acessar sua conta.'; + font-size: 18px; + } + } + .optionsList { + margin: 1rem 0; + display: flex; + flex-direction: column; + .accessCodeOptionBtn { + :global(.vtex-button) { + border-radius: 2px; + border: 1.25px solid #18181b; + background: #fff; + height: 3rem; + margin-bottom: 2.5rem; + position: relative; + text-transform: inherit; + display: flex; + justify-content: center; + align-items: center; + column-gap: 4px; + &:hover { + transition: all 0.3s ease-in-out; + border: 1.25px solid #ee8146; + background: #fdf2ec; + :global(.vtex-button__label) { + &::before { + color: #ff5a00; + } + } + } + :global(.vtex-button__label) { + font-size: 0; + text-transform: inherit; + width: 100%; + &::before { + content: 'Receber código de acesso por e-mail'; + display: block; + color: #3f3f46; + font-family: 'Proxima Nova'; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 24px; + letter-spacing: -0.16px; + } + } + } + } + } + } + .emailPasswordOptionBtn { + :global(.vtex-button) { + border-radius: 2px; + border: 1.25px solid #d4d4d8; + background: #fff; + height: 3rem; + position: relative; + text-transform: inherit; + display: flex; + justify-content: center; + align-items: center; + column-gap: 4px; + :global(.vtex-button__label) { + font-size: 0; + text-transform: inherit; + position: absolute; + width: 100%; + &::before { + content: 'Entrar com e-mail e senha'; + display: block; + color: #3f3f46; + font-family: 'Proxima Nova'; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 24px; + letter-spacing: -0.16px; + } + } + } + } + .contentFormVisible { + padding: 0; + width: 100%; + max-width: 22.5rem; + .emailAndPasswordForm { + .formTitle { + padding: 0; + @include form-title; + font-size: 20px; + margin: 0 0 1.5rem; + } + .inputContainerEmail, + .inputContainerPassword { + :global(.vtex-input-prefix__group) { + @include input-shared; + :global(.vtex-styleguide-9-x-input) { + padding: 0; + font-family: 'Proxima Nova'; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; + letter-spacing: -0.16px; + } + } + } + .inputContainerPassword { + &::before { + content: 'Senha'; + color: #3f3f46; + font-family: 'Proxima Nova'; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 20px; + letter-spacing: -0.14px; + padding-bottom: 8px; + display: block; + } + :global(.vtex-input__suffix) { + padding: 0; + :global(.vtex-login-2-x-eyeIcon--visible) { + :global(.vtex-login-2-x-eyeSightIcon) { + display: none; + } + &::after { + content: url('data:image/svg+xml,'); + display: block; + width: 1.25rem; + height: 1.25rem; + } + } + :global(.vtex-login-2-x-eyeIcon--invisible) { + :global(.vtex-login-2-x-eyeSightIcon) { + display: none; + } + &::after { + content: url('data:image/svg+xml,'); + display: block; + width: 1.25rem; + height: 1.25rem; + } + } + } + } + .forgotPasswordLink { + color: #2b2b3a; + text-align: right; + font-family: 'Proxima Nova'; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 20px; + letter-spacing: -0.14px; + } + .formFooter { + border: none; + margin-top: 1rem; + padding: 0; + .sendButton { + :global(.vtex-button) { + border-radius: 2px; + background: #2b2b3a; + height: 3rem; + :global(.vtex-button__label) { + :global(.t-small) { + font-family: 'Proxima Nova'; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 24px; + letter-spacing: -0.16px; + } + } + } + } + } + .formLinkContainer { + margin-top: 1.5rem; + .dontHaveAccount { + color: #5e5e5e; + font-family: 'Proxima Nova'; + font-style: normal; + font-size: 0; + font-weight: 600; + line-height: 24px; + letter-spacing: -0.16px; + &::before { + content: 'Não tem uma conta? '; + font-size: 16px; + } + &::after { + content: 'Cadastre-se'; + color: #353535; + font-size: 16px; + } + } + } + } + .emailVerification, + .codeConfirmation { + .formTitle { + padding: 0; + margin: 0; + width: 90%; + @include form-title; + &::after { + content: 'Receber código de acesso por e-mail'; + font-size: 20px; + } + } + } + .emailVerification { + .inputContainerEmail { + &::before { + content: 'E-mail'; + color: #3f3f46; + font-family: 'Proxima Nova'; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 20px; + letter-spacing: -0.14px; + padding-bottom: 8px; + display: block; + } + :global(.vtex-input-prefix__group) { + @include input-shared; + :global(.vtex-styleguide-9-x-input) { + padding: 0; + font-family: 'Proxima Nova'; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; + letter-spacing: -0.16px; + } + } + } + } + .emailForm { + .formFooter { + .sendButton { + :global(.vtex-button) { + border-radius: 2px; + background: #2b2b3a; + height: 3rem; + :global(.vtex-button__label) { + @include button-label-shared; + &::before { + content: 'Solicitar código'; + } + :global(.t-small) { + font-size: 0; + } + } + } + } + } + } + .codeConfirmation { + .inputContainerAccessCode { + &::before { + content: 'Código'; + color: #3f3f46; + font-family: 'Proxima Nova'; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 20px; + letter-spacing: -0.14px; + padding-bottom: 8px; + display: block; + } + :global(.vtex-input-prefix__group) { + @include input-shared; + :global(.vtex-styleguide-9-x-input) { + padding: 0; + font-family: 'Proxima Nova'; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; + letter-spacing: -0.16px; + } + } + } + .formFooter { + border: none; + .sendButton { + :global(.vtex-button) { + border-radius: 2px; + background: #2b2b3a; + height: 3rem; + :global(.vtex-button__label) { + @include button-label-shared; + &::before { + content: 'Confirmar'; + } + :global(.t-small) { + font-size: 0; + } + } + } + } + } + } + .backButton { + :global(.vtex-button__label) { + display: flex; + align-items: center; + :global(.t-small) { + color: #3f3f46; + } + &::before { + content: url('data:image/svg+xml,'); + width: 1.25rem; + height: 1.25rem; + } + .arrowBackIcon { + display: none; + } + } + :global(.vtex-button) { + &:hover { + background-color: transparent; + } + } + } } -} \ No newline at end of file +}