| @import "src/app/styles/colors"; |
| @import "src/app/styles/variables"; |
| @import "src/app/styles/font"; |
| |
| .auth-page { |
| width: 100%; |
| height: 100%; |
| display: flex; |
| |
| @media (max-width: $medium) { |
| flex-direction: column; |
| } |
| |
| &__content-block { |
| width: 40%; |
| height: 100%; |
| background-color: $white; |
| display: flex; |
| align-items: center; |
| flex-direction: column; |
| |
| @media (max-width: $medium) { |
| width: 100%; |
| } |
| } |
| |
| &__content-wrapper { |
| width: 45%; |
| height: 100%; |
| padding: 16px; |
| display: flex; |
| justify-content: space-between; |
| flex-direction: column; |
| |
| @media (max-width: $small) { |
| width: 70%; |
| } |
| |
| @media (min-width: $medium) and (max-width: $large) { |
| width: 45%; |
| } |
| } |
| |
| &__group { |
| margin-top: 28px; |
| } |
| |
| &__group-title { |
| font-size: 32px; |
| font-weight: $fw-normal; |
| margin-top: 37px; |
| letter-spacing: -0.7px; |
| text-align: center; |
| line-height: 37px; |
| color: $dark-grey; |
| } |
| |
| &__group-sub-title { |
| font-size: $fs-large; |
| font-weight: $fw-normal; |
| margin-bottom: 60px; |
| letter-spacing: -0.5px; |
| text-align: center; |
| line-height: 24px; |
| color: $dark-grey; |
| } |
| |
| &__google-button-wrapper { |
| margin-top: 32px; |
| margin-bottom: 10px; |
| width: 100%; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| } |
| |
| &__google-button { |
| width: 95%; |
| padding: 0; |
| box-shadow: 0 0 11px 0 $shadow-white, 0 0 0 -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey; |
| } |
| |
| &__google-button-icon { |
| width: 20px; |
| margin-right: 16px; |
| } |
| |
| &__border-wrapper { |
| align-items: center; |
| display: flex; |
| justify-content: center; |
| margin: 32px 0; |
| } |
| |
| &__border-line { |
| height: 1px; |
| width: 100%; |
| background-color: $light-grey; |
| opacity: 0.3; |
| } |
| |
| &__border-title { |
| font-size: $fs-xs; |
| padding: 0 16px; |
| margin: 0; |
| color: $dark-grey |
| } |
| |
| &__logo { |
| width: 63%; |
| height: 100%; |
| background-color: $blue; |
| display: flex; |
| align-items: center; |
| |
| @media (max-width: $medium) { |
| display: none; |
| } |
| } |
| |
| &__logo-wrapper { |
| width: 100%; |
| display: flex; |
| justify-content: center; |
| flex-direction: column; |
| align-items: center; |
| } |
| |
| &__logo-img { |
| margin-bottom: 50px; |
| } |
| |
| &__logo-title { |
| font-size: 62px; |
| color: $white; |
| font-weight: 500; |
| letter-spacing: -1.5px; |
| line-height: 62px; |
| } |
| |
| &__footer-title { |
| color: $blue; |
| font-size: 10px; |
| opacity: 0.7; |
| } |
| } |