Skip to content

Commit

Permalink
Merge pull request #69 from Valik3201/feature/modalStyle
Browse files Browse the repository at this point in the history 
Feature/modal style
  • Loading branch information
@Valik3201
Valik3201 committed Jan 4, 2024
2 parents 639900b + 78607ee commit 0377ef3
Show file tree
Hide file tree
Showing 2 changed files with 144 additions and 29 deletions.
94 changes: 65 additions & 29 deletions src/partials/authorization/auth.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,24 +34,42 @@
<use href="/src/images/icons.svg#icon-close"></use>
</svg>
</button>
<div class="form-div">
<form name="signup-form" autocomplete="on" novalidate class="sign-up-form">
<label>
Name
<input type="text" name="name" />
</label>
<label>
Email
<input type="email" name="email" />
</label>
<label>
Password
<input type="password" name="password" />
</label>
<button type="submit" id="sign-up">SIGN UP</button>
<!-- Кнопка для переключения на форму SIGN IN -->
<button type="button" id="switch-to-sign-in">SWITCH TO SIGN IN</button>
<!-- Кнопка закрытия формы -->
<button type="button">X</button>
<div class="form-inputs">
<div class="input-position hf-style">
<label>
<span class="input-text hf-style">Name</span>
<input type="text" name="name" class="inputs hf-style"/>
</label>
</div>
<div class="input-position hf-style">
<label>
<span class="input-text hf-style">Email</span>
<input type="email" name="email" class="inputs hf-style"/>
<svg class="icon-mobile-position hf-style" width="21px" height="21px">
<use href="/src/images/icons.svg#icon-email"></use>
</svg>
</label >
</div>
<div class="input-position hf-style">
<label>
<span class="input-text hf-style">Password</span>
<input type="password" name="password" class="inputs hf-style"/>
<svg class="icon-mobile-position hf-style" width="21px" height="21px">
<use href="/src/images/icons.svg#icon-lock"></use>
</svg>
</label>
</div>
<button type="submit" id="sign-up" class="sign-button-form">SIGN UP</button>
</div>
<div class="modal-buttons">
<button type="button" id="switch-to-sign-up" class="buttons-style">SIGN UP</button>
<!-- Кнопка для переключения на форму SIGN IN -->
<button type="button" id="switch-to-sign-in" class="buttons-style">SIGN IN</button>
<!-- Кнопка закрытия формы -->
</div>
</div>
</form>
</div>
</div>
Expand All @@ -64,18 +82,36 @@
<use href="/src/images/icons.svg#icon-close"></use>
</svg>
</button>
<div class="form-div">
<form name="signin-form" autocomplete="on" novalidate class="sign-in-form">
<label>
Email
<input type="email" name="email" />
</label>
<label>
Password
<input type="password" name="password" />
</label>
<button type="submit" id="sign-in">SIGN IN</button>
<!-- Кнопка для переключения на форму SIGN UP -->
<button type="button" id="switch-to-sign-up">SWITCH TO SIGN UP</button>
<div class="form-inputs">
<div class="input-position hf-style">
<label>
<span class="input-text hf-style">Email</span>
<input type="email" name="email" class="inputs hf-style"/>
<svg class="icon-mobile-position hf-style" width="21px" height="21px">
<use href="/src/images/icons.svg#icon-email"></use>
</svg>
</label >
</div>
<div class="input-position hf-style">
<label>
<span class="input-text hf-style">Password</span>
<input type="password" name="password" class="inputs hf-style"/>
<svg class="icon-mobile-position hf-style" width="21px" height="21px">
<use href="/src/images/icons.svg#icon-lock"></use>
</svg>
</label>
</div>
<button type="submit" id="sign-in" class="sign-button-form">SIGN IN</button>
</div>
<div class="modal-buttons">
<!-- Кнопка для переключения на форму SIGN IN -->
<button type="button" id="switch-to-sign-up" class="buttons-style">SIGN UP</button>
<button type="button" id="switch-to-sign-in" class="buttons-style">SIGN IN</button>
<!-- Кнопка закрытия формы -->
</div>
</div>
</form>
</div>
</div>
</div>
79 changes: 79 additions & 0 deletions src/style/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -405,6 +405,85 @@ input:checked + .slider:before {
}
.signup-close-icon {
stroke: black;
fill: black;
}
.signup-close-icon:hover,
.signup-close-icon:focus {
stroke: #4f2ee8;
fill: #4f2ee8;
}
.modal-buttons {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
.buttons-style {
background-color: transparent;
border: none;
text-decoration: underline;
font-weight: 700;
font-size: 18px;
line-height: 24px;
color: #00000080;
}
.buttons-style:focus,
.buttons-style:hover {
color: #4f2ee8;
}
.form-div {
margin: 80px 40px 0px 40px;
}
.form-inputs {
display: flex;
flex-direction: column;
gap: 28px;
}
.input-position {
position: relative;
}
.inputs {
width: 499px;
height: 64px;
border: 2px solid black;
border-radius: 40px;
font-weight: 700;
font-size: 18px;
line-height: 24px;
padding-left: 160px;
}
.sign-button-form {
width: 499px;
height: 64px;
border: 2px solid black;
border-radius: 40px;
margin-top: 12px;
background-color: black;
color: white;
font-weight: 700;
font-size: 18px;
line-height: 24px;
}
.sign-button-form:hover,
.sign-button-form:focus {
background-color: #4f2ee8;
border-color: #4f2ee8;
}
.input-text {
font-weight: 700;
font-size: 18px;
line-height: 24px;
position: absolute;
top: 20px;
left: 40px;
text-transform: uppercase;
}
.icon-mobile-position {
fill: white;
stroke: black;
position: absolute;
top: 20px;
right: 40px;
}

/* End Sign Up modal */
Expand Down

0 comments on commit 0377ef3

Please sign in to comment.