web/satellite info button on create account screen fixed (tooltip created) (#2612)
This commit is contained in:
Vitalii Shpital
GitHub
parent
537d1cf09f
commit
499b5db83e
@ -179,7 +179,7 @@
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
right: 25px;
|
||||
bottom: 5px;
|
||||
transform: translateY(-50%);
|
||||
z-index: 20;
|
||||
|
||||
77
web/satellite/src/components/common/InfoComponent.vue
Normal file
77
web/satellite/src/components/common/InfoComponent.vue
Normal file
@ -0,0 +1,77 @@
|
||||
// Copyright (C) 2019 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div class="info" @mouseenter="toggleVisibility" @mouseleave="toggleVisibility">
|
||||
<slot></slot>
|
||||
<div class="info__message-box" v-if="isVisible">
|
||||
<div class="info__message-box__text">
|
||||
<p class="info__message-box__text__regular-text">{{text}}</p>
|
||||
<p class="info__message-box__text__bold-text">{{boldText}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
|
||||
@Component
|
||||
export default class InfoComponent extends Vue {
|
||||
private isVisible: boolean = false;
|
||||
|
||||
@Prop({default: ''})
|
||||
private readonly text: String;
|
||||
@Prop({default: ''})
|
||||
private readonly boldText: String;
|
||||
|
||||
public toggleVisibility(): void {
|
||||
this.isVisible = !this.isVisible;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.info {
|
||||
position: relative;
|
||||
|
||||
&__message-box {
|
||||
position: absolute;
|
||||
left: 40%;
|
||||
bottom: 110%;
|
||||
transform: translate(-50%);
|
||||
height: auto;
|
||||
width: auto;
|
||||
min-width: 180px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background-image: url('../../../static/images/Message.png');
|
||||
background-size:100% 100%;
|
||||
z-index: 101;
|
||||
padding: 11px 18px 20px 18px;
|
||||
|
||||
&__text {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
|
||||
&__bold-text {
|
||||
color: #586C86;
|
||||
font-family: 'font_bold';
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
&__regular-text {
|
||||
color: #5A6E87;
|
||||
font-family: 'font_regular';
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -107,9 +107,4 @@ export const EMPTY_STATE_IMAGES = {
|
||||
ARROW_LEFT: `<svg width="6" height="9" viewBox="0 0 6 9" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.80077e-07 4.26316L6 0L6 9L2.80077e-07 4.26316Z" fill="#354049"/>
|
||||
</svg>`,
|
||||
INFO: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" fill="#007AFF" stroke="#007AFF"/>
|
||||
<path d="M10.0004 11.7359C10.6112 11.7359 11.111 11.2035 11.111 10.5527V5.81169C11.111 5.75253 11.1073 5.68942 11.0999 5.63026C11.0185 5.06623 10.5557 4.62842 10.0004 4.62842C9.38964 4.62842 8.88989 5.16089 8.88989 5.81169V10.5487C8.88989 11.2035 9.38964 11.7359 10.0004 11.7359Z" fill="white"/>
|
||||
<path d="M9.99983 12.8904C9.13953 12.8904 8.44507 13.5848 8.44507 14.4452C8.44507 15.3055 9.13953 15.9999 9.99983 15.9999C10.8601 15.9999 11.5546 15.3055 11.5546 14.4452C11.5581 13.5848 10.8636 12.8904 9.99983 12.8904Z" fill="white"/>
|
||||
</svg>`,
|
||||
};
|
||||
|
||||
@ -2,301 +2,301 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
body {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.forgot-password-container {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background-size: contain;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 60px 0px 0px 104px;
|
||||
background-color: #F5F6FA;
|
||||
|
||||
.forgot-password-input {
|
||||
position: relative;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
top: 66px;
|
||||
right: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
min-width: 45%;
|
||||
height: 86vh;
|
||||
}
|
||||
|
||||
&__header {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background-size: contain;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 60px 0px 0px 104px;
|
||||
background-color: #F5F6FA;
|
||||
|
||||
&__logo {
|
||||
cursor: pointer;
|
||||
width: 139px;
|
||||
height: 62px;
|
||||
}
|
||||
.forgot-password-input {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&__login-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #AFB7C1;
|
||||
cursor: pointer;
|
||||
width: 160px;
|
||||
height: 48px;
|
||||
|
||||
p {
|
||||
font-family: 'font_bold';
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
color: #354049;
|
||||
span {
|
||||
position: absolute;
|
||||
top: 66px;
|
||||
right: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #2683FF;
|
||||
border: 1px solid #2683FF;
|
||||
|
||||
p {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.forgot-password-area-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.forgot-password-area {
|
||||
background-color: transparent;
|
||||
width: 477px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-top: 100px;
|
||||
|
||||
&__title-container {
|
||||
height: 48px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
flex-direction: row;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
|
||||
h1 {
|
||||
font-family: 'font_bold';
|
||||
font-size: 22px;
|
||||
color: #384B65;
|
||||
line-height: 27px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__info-text {
|
||||
font-family: 'font_regular';
|
||||
font-size: 14px;
|
||||
color: #384B65;
|
||||
line-height: 19px;
|
||||
opacity: 0.8;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
&__submit-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
|
||||
&__send-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #2683FF;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
box-shadow: none;
|
||||
|
||||
p {
|
||||
font-family: 'font_bold';
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 4px 20px rgba(35, 121, 236, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-wrap.full-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.image {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
z-index: 100;
|
||||
background-color: rgba(134, 134, 148, 0.7);
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.5s linear;
|
||||
-moz-transition: all 0.5s linear;
|
||||
-o-transition: all 0.5s linear;
|
||||
transition: all 0.5s linear;
|
||||
|
||||
img {
|
||||
z-index: 200;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-overlay.active {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
@media screen and (max-height: 840px) {
|
||||
.forgot-password-container {
|
||||
overflow: hidden;
|
||||
|
||||
&__wrapper {
|
||||
height: 770px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
-ms-overflow-style: none;
|
||||
overflow: -moz-scrollbars-none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-height: 810px) {
|
||||
.forgot-password-container {
|
||||
&__wrapper {
|
||||
height: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
.forgot-password-area__submit-container {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
.forgot-password-container {
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 650px) {
|
||||
.forgot-password-container {
|
||||
&__wrapper {
|
||||
width: 500px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 520px) {
|
||||
.forgot-password-container {
|
||||
&__wrapper {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 420px) {
|
||||
.forgot-password-container {
|
||||
&__wrapper {
|
||||
width: 350px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 320px) {
|
||||
.forgot-password-container {
|
||||
&__wrapper {
|
||||
width: 300px;
|
||||
min-width: 45%;
|
||||
height: 86vh;
|
||||
}
|
||||
|
||||
&__header {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
cursor: pointer;
|
||||
width: 139px;
|
||||
height: 62px;
|
||||
}
|
||||
|
||||
&__login-button {
|
||||
width: 120px;
|
||||
height: 42px;
|
||||
}
|
||||
}
|
||||
.forgot-password-area {
|
||||
&__title-container {
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
&__submit-container {
|
||||
&__terms-area {
|
||||
h2 {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
&__send-button {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #AFB7C1;
|
||||
cursor: pointer;
|
||||
width: 160px;
|
||||
height: 48px;
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
font-family: 'font_bold';
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
color: #354049;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #2683FF;
|
||||
border: 1px solid #2683FF;
|
||||
|
||||
p {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.forgot-password-area-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.forgot-password-area {
|
||||
background-color: transparent;
|
||||
width: 477px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-top: 100px;
|
||||
|
||||
&__title-container {
|
||||
height: 48px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
flex-direction: row;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
|
||||
h1 {
|
||||
font-family: 'font_bold';
|
||||
font-size: 22px;
|
||||
color: #384B65;
|
||||
line-height: 27px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__info-text {
|
||||
font-family: 'font_regular';
|
||||
font-size: 14px;
|
||||
color: #384B65;
|
||||
line-height: 19px;
|
||||
opacity: 0.8;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
&__submit-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
|
||||
&__send-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #2683FF;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
box-shadow: none;
|
||||
|
||||
p {
|
||||
font-family: 'font_bold';
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 4px 20px rgba(35, 121, 236, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-wrap.full-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.image {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
z-index: 100;
|
||||
background-color: rgba(134, 134, 148, 0.7);
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.5s linear;
|
||||
-moz-transition: all 0.5s linear;
|
||||
-o-transition: all 0.5s linear;
|
||||
transition: all 0.5s linear;
|
||||
|
||||
img {
|
||||
z-index: 200;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-overlay.active {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
@media screen and (max-height: 840px) {
|
||||
.forgot-password-container {
|
||||
overflow: hidden;
|
||||
|
||||
&__wrapper {
|
||||
height: 770px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
-ms-overflow-style: none;
|
||||
overflow: -moz-scrollbars-none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-height: 810px) {
|
||||
.forgot-password-container {
|
||||
&__wrapper {
|
||||
height: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
.forgot-password-area__submit-container {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
.forgot-password-container {
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 650px) {
|
||||
.forgot-password-container {
|
||||
&__wrapper {
|
||||
width: 500px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 520px) {
|
||||
.forgot-password-container {
|
||||
&__wrapper {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 420px) {
|
||||
.forgot-password-container {
|
||||
&__wrapper {
|
||||
width: 350px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 320px) {
|
||||
.forgot-password-container {
|
||||
&__wrapper {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
&__header {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
&__login-button {
|
||||
width: 120px;
|
||||
height: 42px;
|
||||
}
|
||||
}
|
||||
.forgot-password-area {
|
||||
&__title-container {
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
&__submit-container {
|
||||
&__terms-area {
|
||||
h2 {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
&__send-button {
|
||||
height: 40px;
|
||||
p {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,511 +2,511 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
.login-container {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background-size: contain;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 60px 0px 0px 104px;
|
||||
background-color: #F5F6FA;
|
||||
|
||||
&__wrapper {
|
||||
min-width: 50%;
|
||||
height: 86vh;
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
cursor: pointer;
|
||||
width: 139px;
|
||||
height: 62px;
|
||||
}
|
||||
|
||||
&__register-button {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background-size: contain;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #AFB7C1;
|
||||
cursor: pointer;
|
||||
width: 160px;
|
||||
height: 48px;
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 60px 0px 0px 104px;
|
||||
background-color: #F5F6FA;
|
||||
|
||||
p {
|
||||
font-family: 'font_bold';
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
color: #354049;
|
||||
&__wrapper {
|
||||
min-width: 50%;
|
||||
height: 86vh;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #2683FF;
|
||||
border: 1px solid #2683FF;
|
||||
|
||||
p {
|
||||
color: white;
|
||||
}
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
cursor: pointer;
|
||||
width: 139px;
|
||||
height: 62px;
|
||||
}
|
||||
|
||||
&__register-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #AFB7C1;
|
||||
cursor: pointer;
|
||||
width: 160px;
|
||||
height: 48px;
|
||||
|
||||
p {
|
||||
font-family: 'font_bold';
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
color: #354049;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #2683FF;
|
||||
border: 1px solid #2683FF;
|
||||
|
||||
p {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-area-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.login-area {
|
||||
background-color: transparent;
|
||||
width: 620px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding-bottom: 50px;
|
||||
|
||||
&__title-container {
|
||||
height: 48px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
flex-direction: row;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
|
||||
h1 {
|
||||
font-family: 'font_bold';
|
||||
font-size: 22px;
|
||||
color: #384B65;
|
||||
line-height: 27px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: 'font_regular';
|
||||
font-size: 16px;
|
||||
color: #384B65;
|
||||
line-height: 21px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
|
||||
b {
|
||||
font-family: 'font_bold';
|
||||
margin-left: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__password-input {
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
&__submit-area {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-top: 22px;
|
||||
|
||||
&__login-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #2683FF;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
width: 160px;
|
||||
height: 48px;
|
||||
box-shadow: none;
|
||||
|
||||
p {
|
||||
font-family: 'font_bold';
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 4px 20px rgba(35, 121, 236, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__info-area {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
margin-top: 250px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-start;
|
||||
flex-direction: row;
|
||||
|
||||
p {
|
||||
font-family: 'font_regular';
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: #AFB7C1;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
font-family: 'font_medium';
|
||||
font-size: 15px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
color: #2683FF;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&__signature {
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
&__terms {
|
||||
margin-right: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
&__login-button.container {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__navigation-area {
|
||||
margin-top: 24px;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background-color: transparent;
|
||||
width: 620px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding-bottom: 50px;
|
||||
|
||||
&__nav-link {
|
||||
font-family: 'font_regular';
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
height: 48px;
|
||||
text-align: center;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
min-width: 140px;
|
||||
color: #2683FF;
|
||||
&__title-container {
|
||||
height: 48px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
flex-direction: row;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
h1 {
|
||||
font-family: 'font_bold';
|
||||
font-size: 22px;
|
||||
color: #384B65;
|
||||
line-height: 27px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-family: 'font_medium';
|
||||
}
|
||||
p {
|
||||
font-family: 'font_regular';
|
||||
font-size: 16px;
|
||||
color: #384B65;
|
||||
line-height: 21px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
|
||||
b {
|
||||
font-family: 'font_bold';
|
||||
margin-left: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__password-input {
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
&__submit-area {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-top: 22px;
|
||||
|
||||
&__login-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #2683FF;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
width: 160px;
|
||||
height: 48px;
|
||||
box-shadow: none;
|
||||
|
||||
p {
|
||||
font-family: 'font_bold';
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 4px 20px rgba(35, 121, 236, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__info-area {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
margin-top: 250px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-start;
|
||||
flex-direction: row;
|
||||
|
||||
p {
|
||||
font-family: 'font_regular';
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: #AFB7C1;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
font-family: 'font_medium';
|
||||
font-size: 15px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
color: #2683FF;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&__signature {
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
&__terms {
|
||||
margin-right: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
&__login-button.container {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__navigation-area {
|
||||
margin-top: 24px;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
&__nav-link {
|
||||
font-family: 'font_regular';
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
height: 48px;
|
||||
text-align: center;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
min-width: 140px;
|
||||
color: #2683FF;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-family: 'font_medium';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
width: 0;
|
||||
z-index: 100;
|
||||
background-color: #2683FF;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.5s linear;
|
||||
-moz-transition: all 0.5s linear;
|
||||
-o-transition: all 0.5s linear;
|
||||
transition: all 0.5s linear;
|
||||
|
||||
&__logo {
|
||||
position: absolute;
|
||||
left: calc(50% - 104px);
|
||||
top: calc(50% - 60px);
|
||||
transform: translate(-50%);
|
||||
display: block;
|
||||
width: 240px;
|
||||
height: 110px;
|
||||
z-index: 200;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
width: 0;
|
||||
z-index: 100;
|
||||
background-color: #2683FF;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
-webkit-transition: visibility 0.5s linear, opacity 0.5s linear;
|
||||
-moz-transition: visibility 0.5s linear, opacity 0.5s linear;
|
||||
-o-transition: visibility 0.5s linear, opacity 0.5s linear;
|
||||
transition: visibility 0.5s linear, opacity 0.5s linear;
|
||||
}
|
||||
-webkit-transition: all 0.5s linear;
|
||||
-moz-transition: all 0.5s linear;
|
||||
-o-transition: all 0.5s linear;
|
||||
transition: all 0.5s linear;
|
||||
|
||||
&__logo {
|
||||
position: absolute;
|
||||
left: calc(50% - 104px);
|
||||
top: calc(50% - 60px);
|
||||
transform: translate(-50%);
|
||||
display: block;
|
||||
width: 240px;
|
||||
height: 110px;
|
||||
z-index: 200;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
-webkit-transition: visibility 0.5s linear, opacity 0.5s linear;
|
||||
-moz-transition: visibility 0.5s linear, opacity 0.5s linear;
|
||||
-o-transition: visibility 0.5s linear, opacity 0.5s linear;
|
||||
transition: visibility 0.5s linear, opacity 0.5s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-overlay.active {
|
||||
width: 100vw;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
width: 100vw;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.loading-overlay__logo.active {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1500px) {
|
||||
.login-container {
|
||||
&__wrapper {
|
||||
min-width: 45%;
|
||||
.login-container {
|
||||
&__wrapper {
|
||||
min-width: 45%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1300px) {
|
||||
.login-container {
|
||||
&__wrapper {
|
||||
min-width: 40%;
|
||||
.login-container {
|
||||
&__wrapper {
|
||||
min-width: 40%;
|
||||
}
|
||||
}
|
||||
.image {
|
||||
display: block;
|
||||
}
|
||||
.login-area {
|
||||
width: 516px;
|
||||
}
|
||||
}
|
||||
.image {
|
||||
display: block;
|
||||
}
|
||||
.login-area {
|
||||
width: 516px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1168px) {
|
||||
.login-container {
|
||||
&__wrapper {
|
||||
min-width: 64%;
|
||||
.login-container {
|
||||
&__wrapper {
|
||||
min-width: 64%;
|
||||
}
|
||||
}
|
||||
.image {
|
||||
display: none;
|
||||
}
|
||||
.login-area {
|
||||
width: 516px;
|
||||
}
|
||||
}
|
||||
.image {
|
||||
display: none;
|
||||
}
|
||||
.login-area {
|
||||
width: 516px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 750px) {
|
||||
.login-container {
|
||||
padding: 60px 20px 20px 20px;
|
||||
.login-container {
|
||||
padding: 60px 20px 20px 20px;
|
||||
|
||||
&__wrapper {
|
||||
min-width: 95%;
|
||||
&__wrapper {
|
||||
min-width: 95%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.login-area {
|
||||
width: 100%;
|
||||
.login-area {
|
||||
width: 100%;
|
||||
|
||||
&__info-area {
|
||||
&__signature {
|
||||
margin-right: 15px;
|
||||
}
|
||||
&__info-area {
|
||||
&__signature {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
&__terms {
|
||||
margin-right: 10px;
|
||||
}
|
||||
&__terms {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 420px) {
|
||||
.login-container {
|
||||
padding: 40px 15px 50px 15px;
|
||||
.login-container {
|
||||
padding: 40px 15px 50px 15px;
|
||||
|
||||
&__wrapper {
|
||||
width: 315px;
|
||||
&__wrapper {
|
||||
width: 315px;
|
||||
}
|
||||
|
||||
&__header {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
&__register-button {
|
||||
width: 130px;
|
||||
height: 40px;
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__header {
|
||||
width: 95%;
|
||||
.login-area-wrapper {
|
||||
justify-content: flex-start;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.login-area {
|
||||
width: 96%;
|
||||
|
||||
&__register-button {
|
||||
width: 130px;
|
||||
height: 40px;
|
||||
&__title-container {
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 13px;
|
||||
line-height: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
&__submit-area {
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
&__info-area {
|
||||
margin-top: 150px;
|
||||
font-size: 10px;
|
||||
|
||||
&__signature {
|
||||
margin-right: 30px;
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
&__terms {
|
||||
margin-right: 10px;
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
&__help {
|
||||
font-size: 10px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.login-area-wrapper {
|
||||
justify-content: flex-start;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.login-area {
|
||||
width: 96%;
|
||||
|
||||
&__title-container {
|
||||
|
||||
h1 {
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 13px;
|
||||
line-height: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
&__submit-area {
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
&__info-area {
|
||||
margin-top: 150px;
|
||||
font-size: 10px;
|
||||
|
||||
&__signature {
|
||||
margin-right: 30px;
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
&__terms {
|
||||
margin-right: 10px;
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
&__help {
|
||||
font-size: 10px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 340px) {
|
||||
.login-container {
|
||||
padding: 40px 15px 50px 15px;
|
||||
.login-container {
|
||||
padding: 40px 15px 50px 15px;
|
||||
|
||||
&__wrapper {
|
||||
width: 250px;
|
||||
&__wrapper {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
&__header {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
&__register-button {
|
||||
width: 100px;
|
||||
height: 35px;
|
||||
|
||||
p {
|
||||
font-size: 10px;
|
||||
line-height: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__header {
|
||||
width: 95%;
|
||||
.login-area-wrapper {
|
||||
padding-top: 20px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.login-area {
|
||||
width: 92%;
|
||||
|
||||
&__register-button {
|
||||
width: 100px;
|
||||
height: 35px;
|
||||
&__title-container {
|
||||
|
||||
p {
|
||||
font-size: 10px;
|
||||
line-height: 13px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 13px;
|
||||
line-height: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
&__submit-area {
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
&__info-area {
|
||||
margin-top: 100px;
|
||||
font-size: 10px;
|
||||
|
||||
&__signature {
|
||||
margin-right: 30px;
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
&__terms {
|
||||
margin-right: 10px;
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
&__help {
|
||||
font-size: 10px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.login-area-wrapper {
|
||||
padding-top: 20px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.login-area {
|
||||
width: 92%;
|
||||
|
||||
&__title-container {
|
||||
|
||||
h1 {
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 13px;
|
||||
line-height: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
&__submit-area {
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
&__info-area {
|
||||
margin-top: 100px;
|
||||
font-size: 10px;
|
||||
|
||||
&__signature {
|
||||
margin-right: 30px;
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
&__terms {
|
||||
margin-right: 10px;
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
&__help {
|
||||
font-size: 10px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 850px) {
|
||||
.login-area {
|
||||
&__info-area {
|
||||
margin-top: 150px;
|
||||
.login-area {
|
||||
&__info-area {
|
||||
margin-top: 150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 700px) {
|
||||
.login-area {
|
||||
&__info-area {
|
||||
margin-top: 100px;
|
||||
.login-area {
|
||||
&__info-area {
|
||||
margin-top: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 610px) {
|
||||
.login-area {
|
||||
&__info-area {
|
||||
margin-top: 50px;
|
||||
.login-area {
|
||||
&__info-area {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,7 +6,6 @@
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import HeaderlessInput from '../../components/common/HeaderlessInput.vue';
|
||||
import { EMPTY_STATE_IMAGES } from '../../utils/constants/emptyStatesImages';
|
||||
import RegistrationSuccessPopup from '../../components/common/RegistrationSuccessPopup.vue';
|
||||
import { validateEmail, validatePassword } from '../../utils/validation';
|
||||
import ROUTES from '../../utils/constants/routerConstants';
|
||||
@ -16,11 +15,13 @@
|
||||
import { createUserRequest } from '../../api/users';
|
||||
import { setUserId } from '@/utils/consoleLocalStorage';
|
||||
import { User } from '../../types/users';
|
||||
import InfoComponent from '../../components/common/InfoComponent.vue';
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
HeaderlessInput,
|
||||
RegistrationSuccessPopup
|
||||
RegistrationSuccessPopup,
|
||||
InfoComponent,
|
||||
},
|
||||
})
|
||||
export default class Register extends Vue {
|
||||
@ -52,10 +53,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
public get infoImage(): string {
|
||||
return EMPTY_STATE_IMAGES.INFO;
|
||||
}
|
||||
|
||||
public onCreateClick(): void {
|
||||
if (!this.validateFields()) {
|
||||
return;
|
||||
|
||||
@ -55,10 +55,13 @@
|
||||
height="46px"
|
||||
isPassword="true">
|
||||
</HeaderlessInput>
|
||||
<span
|
||||
v-html="infoImage"
|
||||
title="Use 6 or more characters">
|
||||
</span>
|
||||
<InfoComponent class="register-input__info-button" boldText="Use 6 or more characters with a mix of letters, numbers & symbols" >
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="18" height="18" rx="9" fill="#007AFF"/>
|
||||
<path d="M8.99928 8.00325C8.44956 8.00325 7.99979 8.48247 7.99979 9.06819L7.99979 13.3351C7.99979 13.3883 8.00312 13.4451 8.00978 13.4984C8.08308 14.006 8.49953 14.4 8.99928 14.4C9.54901 14.4 9.99878 13.9208 9.99878 13.3351L9.99878 9.07174C9.99878 8.48247 9.54901 8.00325 8.99928 8.00325Z" fill="white"/>
|
||||
<path d="M8.99988 6.96423C9.77415 6.96423 10.3992 6.33921 10.3992 5.56494C10.3992 4.79066 9.77415 4.16564 8.99988 4.16564C8.22561 4.16564 7.60059 4.79066 7.60059 5.56494C7.59748 6.33921 8.2225 6.96423 8.99988 6.96423Z" fill="white"/>
|
||||
</svg>
|
||||
</InfoComponent>
|
||||
</div>
|
||||
<div class="register-input">
|
||||
<HeaderlessInput
|
||||
@ -71,9 +74,13 @@
|
||||
height="46px"
|
||||
isPassword="true">
|
||||
</HeaderlessInput>
|
||||
<span v-html="infoImage"
|
||||
title="Use 6 or more characters">
|
||||
</span>
|
||||
<InfoComponent class="register-input__info-button" boldText="Use 6 or more characters with a mix of letters, numbers & symbols" isCustomPosition>
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="18" height="18" rx="9" fill="#007AFF"/>
|
||||
<path d="M8.99928 8.00325C8.44956 8.00325 7.99979 8.48247 7.99979 9.06819L7.99979 13.3351C7.99979 13.3883 8.00312 13.4451 8.00978 13.4984C8.08308 14.006 8.49953 14.4 8.99928 14.4C9.54901 14.4 9.99878 13.9208 9.99878 13.3351L9.99878 9.07174C9.99878 8.48247 9.54901 8.00325 8.99928 8.00325Z" fill="white"/>
|
||||
<path d="M8.99988 6.96423C9.77415 6.96423 10.3992 6.33921 10.3992 5.56494C10.3992 4.79066 9.77415 4.16564 8.99988 4.16564C8.22561 4.16564 7.60059 4.79066 7.60059 5.56494C7.59748 6.33921 8.2225 6.96423 8.99988 6.96423Z" fill="white"/>
|
||||
</svg>
|
||||
</InfoComponent>
|
||||
</div>
|
||||
<div class="register-area__submit-container">
|
||||
<div class="register-area__submit-container__terms-area">
|
||||
|
||||
@ -2,421 +2,421 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
body {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.register-container {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background-size: contain;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
align-items: flex-start; padding: 60px 0px 0px 104px;
|
||||
background-color: #F5F6FA;
|
||||
|
||||
.register-input {
|
||||
position: relative;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
top: 58px;
|
||||
right: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
min-width: 50%;
|
||||
height: 86vh;
|
||||
}
|
||||
|
||||
&__header {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background-size: contain;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
align-items: flex-start; padding: 60px 0px 0px 104px;
|
||||
background-color: #F5F6FA;
|
||||
|
||||
&__logo {
|
||||
cursor: pointer;
|
||||
width: 139px;
|
||||
height: 62px;
|
||||
}
|
||||
|
||||
&__register-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #AFB7C1;
|
||||
cursor: pointer;
|
||||
width: 160px;
|
||||
height: 48px;
|
||||
|
||||
p {
|
||||
font-family: 'font_bold';
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
color: #354049;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #2683FF;
|
||||
border: 1px solid #2683FF;
|
||||
|
||||
p {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.register-area-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.register-area {
|
||||
background-color: transparent;
|
||||
width: 620px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
&__title-container {
|
||||
height: 48px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
flex-direction: row;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
|
||||
h1 {
|
||||
font-family: 'font_bold';
|
||||
font-size: 22px;
|
||||
color: #384B65;
|
||||
line-height: 27px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: 'font_regular';
|
||||
font-size: 16px;
|
||||
color: #384B65;
|
||||
line-height: 21px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
|
||||
b {
|
||||
font-family: 'font_bold';
|
||||
margin-left: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__submit-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
|
||||
&__terms-area {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&__checkbox {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: 'font_regular';
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
margin-top: 14px;
|
||||
margin-left: 10px;
|
||||
color: #384B65;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #2683FF;
|
||||
font-family: 'font_bold';
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
display: block;
|
||||
.register-input {
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
height: 23px;
|
||||
width: 23px;
|
||||
cursor: pointer;
|
||||
font-size: 22px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
outline: none;
|
||||
}
|
||||
width: 100%;
|
||||
|
||||
.container input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
border: 2px solid #384B65;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.container:hover input ~ .checkmark {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.container input:checked ~ .checkmark {
|
||||
border: 2px solid #384B65;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.checkmark:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.checkmark.error {
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
.container input:checked ~ .checkmark:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.container .checkmark:after {
|
||||
left: 9px;
|
||||
top: 5px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid #384B65;
|
||||
border-width: 0 3px 3px 0;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
&__info-button {
|
||||
position: absolute;
|
||||
top: 58px;
|
||||
right: 53px;
|
||||
}
|
||||
}
|
||||
|
||||
&__create-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #2683FF;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
width: 160px;
|
||||
height: 48px;
|
||||
box-shadow: none;
|
||||
|
||||
p {
|
||||
font-family: 'font_bold';
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 4px 20px rgba(35, 121, 236, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-wrap.full-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
z-index: 100;
|
||||
background-color: rgba(134, 134, 148, 0.7);
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.5s linear;
|
||||
-moz-transition: all 0.5s linear;
|
||||
-o-transition: all 0.5s linear;
|
||||
transition: all 0.5s linear;
|
||||
|
||||
img {
|
||||
z-index: 200;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-overlay.active {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.image {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1500px) {
|
||||
.register-container {
|
||||
&__wrapper {
|
||||
min-width: 45%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1300px) {
|
||||
.register-container {
|
||||
&__wrapper {
|
||||
min-width: 75%;
|
||||
}
|
||||
}
|
||||
.image {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-height: 840px) {
|
||||
.register-container {
|
||||
overflow: hidden;
|
||||
|
||||
&__wrapper {
|
||||
height: 770px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
-ms-overflow-style: none;
|
||||
overflow: -moz-scrollbars-none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-height: 810px) {
|
||||
.register-container {
|
||||
&__wrapper {
|
||||
height: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
.register-area__submit-container {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
.register-container {
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 650px) {
|
||||
.register-container {
|
||||
&__wrapper {
|
||||
width: 500px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 520px) {
|
||||
.register-container {
|
||||
&__wrapper {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 420px) {
|
||||
.register-container {
|
||||
&__wrapper {
|
||||
width: 350px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 320px) {
|
||||
.register-container {
|
||||
&__wrapper {
|
||||
width: 300px;
|
||||
min-width: 50%;
|
||||
height: 86vh;
|
||||
}
|
||||
|
||||
&__header {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
cursor: pointer;
|
||||
width: 139px;
|
||||
height: 62px;
|
||||
}
|
||||
|
||||
&__register-button {
|
||||
width: 120px;
|
||||
height: 42px;
|
||||
}
|
||||
}
|
||||
.register-area {
|
||||
&__title-container {
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
line-height: 22px;
|
||||
}
|
||||
p {
|
||||
font-size: 13px;
|
||||
line-height: 17px;
|
||||
}
|
||||
}
|
||||
&__submit-container {
|
||||
&__terms-area {
|
||||
h2 {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
&__create-button {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #AFB7C1;
|
||||
cursor: pointer;
|
||||
width: 160px;
|
||||
height: 48px;
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
font-family: 'font_bold';
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
color: #354049;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #2683FF;
|
||||
border: 1px solid #2683FF;
|
||||
|
||||
p {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.register-area-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.register-area {
|
||||
background-color: transparent;
|
||||
width: 620px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
&__title-container {
|
||||
height: 48px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
flex-direction: row;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
|
||||
h1 {
|
||||
font-family: 'font_bold';
|
||||
font-size: 22px;
|
||||
color: #384B65;
|
||||
line-height: 27px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: 'font_regular';
|
||||
font-size: 16px;
|
||||
color: #384B65;
|
||||
line-height: 21px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
|
||||
b {
|
||||
font-family: 'font_bold';
|
||||
margin-left: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__submit-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
|
||||
&__terms-area {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&__checkbox {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: 'font_regular';
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
margin-top: 14px;
|
||||
margin-left: 10px;
|
||||
color: #384B65;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #2683FF;
|
||||
font-family: 'font_bold';
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
height: 23px;
|
||||
width: 23px;
|
||||
cursor: pointer;
|
||||
font-size: 22px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.container input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
border: 2px solid #384B65;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.container:hover input ~ .checkmark {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.container input:checked ~ .checkmark {
|
||||
border: 2px solid #384B65;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.checkmark:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.checkmark.error {
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
.container input:checked ~ .checkmark:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.container .checkmark:after {
|
||||
left: 9px;
|
||||
top: 5px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid #384B65;
|
||||
border-width: 0 3px 3px 0;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
&__create-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #2683FF;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
width: 160px;
|
||||
height: 48px;
|
||||
box-shadow: none;
|
||||
|
||||
p {
|
||||
font-family: 'font_bold';
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 4px 20px rgba(35, 121, 236, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-wrap.full-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
z-index: 100;
|
||||
background-color: rgba(134, 134, 148, 0.7);
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.5s linear;
|
||||
-moz-transition: all 0.5s linear;
|
||||
-o-transition: all 0.5s linear;
|
||||
transition: all 0.5s linear;
|
||||
|
||||
img {
|
||||
z-index: 200;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-overlay.active {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.image {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1500px) {
|
||||
.register-container {
|
||||
&__wrapper {
|
||||
min-width: 45%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1300px) {
|
||||
.register-container {
|
||||
&__wrapper {
|
||||
min-width: 75%;
|
||||
}
|
||||
}
|
||||
.image {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-height: 840px) {
|
||||
.register-container {
|
||||
overflow: hidden;
|
||||
|
||||
&__wrapper {
|
||||
height: 770px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
-ms-overflow-style: none;
|
||||
overflow: -moz-scrollbars-none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-height: 810px) {
|
||||
.register-container {
|
||||
&__wrapper {
|
||||
height: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
.register-area__submit-container {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
.register-container {
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 650px) {
|
||||
.register-container {
|
||||
&__wrapper {
|
||||
width: 500px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 520px) {
|
||||
.register-container {
|
||||
&__wrapper {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 420px) {
|
||||
.register-container {
|
||||
&__wrapper {
|
||||
width: 350px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 320px) {
|
||||
.register-container {
|
||||
&__wrapper {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
&__header {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
&__register-button {
|
||||
width: 120px;
|
||||
height: 42px;
|
||||
}
|
||||
}
|
||||
.register-area {
|
||||
&__title-container {
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
line-height: 22px;
|
||||
}
|
||||
p {
|
||||
font-size: 13px;
|
||||
line-height: 17px;
|
||||
}
|
||||
}
|
||||
&__submit-container {
|
||||
&__terms-area {
|
||||
h2 {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
&__create-button {
|
||||
height: 40px;
|
||||
p {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
BIN
web/satellite/static/images/Message.png
Normal file
BIN
web/satellite/static/images/Message.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Loading…
Reference in New Issue
Block a user