There are no notes for this item.
<div class="login">
<form action="">
<div class="login__field">
<label for="username" class="login__label">Username</label>
<input type="text" name="username" class="login__input" />
</div>
<div class="login__field">
<label for="password" class="login__label">Password</label>
<input type="password" name="password" class="login__input" />
</div>
<div class="login__actions">
<div class="login__submit">
<button class="button" type="submit">Login</button>
</div>
<label class="login__rememberMe" for="remember_me">
<input type="hidden" name="remember_me" value="no" />
<input type="checkbox" name="remember_me" value="yes" id="remember_me" />
Remember me
</label>
<a class="login__forgotPasswordLink" href="#">Forgot Your Password?</a>
</div>
</form>
</div>
///
/// The LOGIN mixin is a basic implementation of a login module that includes
/// an email input, password input, submit button, forgot password link, and
/// remember me checkbox.
///
@mixin login($background: #EEE) {
background-color: $background;
margin-left: auto;
margin-right: auto;
max-width: 600px;
padding: 3rem;
&__field {
margin-bottom: 1.5rem;
}
&__input {
&:focus {
box-shadow: 0 0 5px rgba(114, 164, 0, 0.7);
}
}
&__submit {
text-align: center;
}
&__actions {
text-align: center;
}
@include breakpoint(md) {
&__actions {
align-items: center;
display: flex;
justify-content: space-between;
flex-flow: row wrap;
}
&__submit,
&__rememberMe,
&__forgotPasswordLink {
margin: 0;
padding: 0;
}
&__rememberMe {
margin-left: 1em;
}
&__forgotPasswordLink {
display: block;
margin-left: auto;
text-align: right;
}
}
}