Skip to content

Instantly share code, notes, and snippets.

@tcannonfodder
Created May 28, 2020 17:11
Show Gist options
  • Save tcannonfodder/79ccc4fb89f18e6674edbd7fd228ff7f to your computer and use it in GitHub Desktop.
Save tcannonfodder/79ccc4fb89f18e6674edbd7fd228ff7f to your computer and use it in GitHub Desktop.
ZEbdKYB
<main>
<section id='login-sections'>
<section id="signin" class="login-section">
<h2>Sign in</h2>
<form>
<div>
<label for='email'>email</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<label for='password'>password</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">Log in to asoidjasodijasodijaoisdjassoidjasioddsasdasdasdasdasdasdj</button>
</form>
</section>
<section id="reset-password" class="login-section">
<h2>Reset my password</h2>
<form>
<div>
<label for='email'>email</label>
<input type="email" id="email" name="email" required>
</div>
<button type="submit">Recover my password</button>
</form>
</section>
</section>
<section class='third-party-logins'>
<ul>
<li>Google</li>
<li>Apple</li>
</ul>
</section>
<nav>
<ul>
<li><button type="button" name="login-section-switch" value="signin">Login</button></li>
<li><button type="button" name="login-section-switch" value="reset-password">Reset Password</button></li>
</ul>
</nav>
</main>
document.addEventListener('DOMContentLoaded', function(){
var loginSections = document.querySelectorAll(".login-section")
var loginSectionSwitchButtons = document.querySelectorAll("button[name=login-section-switch]")
var switchLoginSection = function(event){
loginSectionIDToShow = event.target.value
loginSectionSwitchButtons.forEach(function(button){
button.disabled = false
})
loginSections.forEach(function(section){
section.classList.add('inactive')
})
document.getElementById(loginSectionIDToShow).classList.remove("inactive")
event.target.disabled=true
}
loginSectionSwitchButtons.forEach(function(button) {
button.addEventListener('click', switchLoginSection)
});
document.querySelector('button[name=login-section-switch][value=signin]').click()
})
main{
background: rgba(200, 241, 245, 1.000);
width: 70vw;
position: absolute;
right: 0;
top: 20vh;
display: grid;
grid-template-areas:
"login-sections login-sections"
"third-party-logins navigation";
#login-sections{
grid-area: login-sections;
.login-section{
background: rgba(134, 172, 42, 1.000);
min-height: 40vh;
&.inactive{
display: none;
}
}
}
.third-party-logins{
grid-area: third-party-logins;
}
form{
display: grid;
min-height: 30vh;
label{
display: block;
}
button{
width: -moz-fit-content;
width: fit-content;
max-width: 70vw;
height: 3em;
position: relative;
left: -1.5em;
cursor: pointer;
font-weight: bold;
text-transform: uppercase;
text-overflow: ellipsis;
white-space: nowrap;
// overflow: hidden;
// margin-top: 1em;
background: rgba(227, 98, 149, 1.000);
border: none;
color: white;
//padding: 1em;
transition: 0.1s;
&:before{
position: absolute;
left: -0em;
top: -1em;
z-index: -1;
content: "";
width: 0;
height: 0;
border-bottom: 1em solid rgba(177, 70, 108, 1.000);
border-right: 2em solid transparent;
border-left: 2em solid transparent;
}
&:after{
position: absolute;
top: -0.4em;
right: -2em;
content: "";
width: 0;
height: 0;
border-top: 2em solid transparent;
border-bottom: 2em solid transparent;
border-left: 2em solid rgba(227, 98, 149, 1.000);
}
&:focus,
&:hover{
// transform: scale(1.075);
}
}
}
nav{
grid-area: navigation;
ul{
// position: absolute;
// right: 3vw;
background: grey;
margin: 0;
padding: 0;
li{
list-style: none;
display: inline-block;
button{
background: purple;
padding: 1em;
color: white;
&:disabled{
display: none;
}
}
}
}
}
}
@media(min-width: 600px){
#login-sections{
.login-section{
form{
&:invalid{
button{
background: rgba(227, 98, 149, 0.800);
&:before{
border-bottom-color: rgba(177, 70, 108, 0.800);
}
&:after{
border-left-color: rgba(227, 98, 149, 0.800);
}
}
}
}
}
}
}
@media(max-width: 600px){
body{
background: rgba(228, 58, 119, 1.000);
color: white;
padding: 0.1em;
}
main{
grid-template-areas:
"login-sections"
"navigation"
"third-party-logins";
width: initial;
background: rgba(200, 241, 245, 0.600);
position: initial;
// background: none;
margin: auto;
#login-sections{
.login-section{
background: none;
form{
&:invalid{
button{
opacity: 0.6;
}
}
input{
width: 100%;
box-sizing: border-box;
}
button{
position: initial;
background: white;
color: rgba(228, 58, 119, 1.000);
border-radius: 3px;
width: initial;
max-width: initial;
overflow: hidden;
margin-top: 1em;
&:after{
display: none;
}
&:focus,
&:hover{
transform: none;
}
}
}
}
}
nav{
margin-top: 1em;
ul{
position: initial;
li{
display: block;
button{
border: none;
border-radius: 3px;
width: 100%;
}
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment