PR Template

by justjohn

HTML

<section class="login panel">
    <header>Login</header>
    <div class="pane logo"></div>
    <div class="pane login">
        <div class="field_title">Email</div>
        <div class="field_input">
            <input type="email" name="email" />
        </div>
        <div class="field_title">Password</div>
        <div class="field_input">
            <input type="password" name="password" />
        </div>
        <div class="button_container">
            <button name="login">Login</button>
            <button name="register">Register</button>
        </div>
    </div>
    <div class="pane terms">
        By loging in to PocketRoster you agree to our
        <a href="http://pocketroster.me/terms.html">Terms of Service</a> and 
        <a href="http://pocketroster.me/privacy.html">Privacy Policy</a>
    </div>
</section>

SCSS

@mixin css3-background-gradient($color1, $pos1, $color2, $pos2) {
    background-image: linear-gradient(bottom, $color1 $pos1%, $color2 $pos2%);
    background-image: -o-linear-gradient(bottom, $color1 $pos1%, $color2 $pos2%);
    background-image: -moz-linear-gradient(bottom, $color1 $pos1%, $color2 $pos2%);
    background-image: -webkit-linear-gradient(bottom, $color1 $pos1%, $color2 $pos2%);
    background-image: -ms-linear-gradient(bottom, $color1 $pos1%, $color2 $pos2%);
    
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop($pos1/100, $color1),
        color-stop($pos2/100, $color2)
    );
}


.panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    header {
        border-top: 1px solid #333;
        border-bottom: 1px solid #333;
        padding: 10px;
        text-align:center;
        font-family: helvetica;
        font-size: 20px;
        line-height: 20px;
        text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    
        @include css3-background-gradient(rgb(64, 86, 91), 0, rgb(108, 125, 130), 100);
    }
}
.login {
    .logo {
        position: relative;
        top:15px;
        display: block;
        height: 100px;
        background: rgb(230, 230, 230) url(http://pocketroster.me/rc/logo_device.png) no-repeat center;
        background-size: contain;
        margin-bottom: 30px;
    
        &:after, &:before {
            position: absolute;
            display: block;
            content: " ";
            line-height: 15px;
            height: 15px;
            left: 0;
            right: 0;
        }
        &:before {
            top: -15px;
            @include css3-background-gradient(rgb(230, 230, 230), 0, rgb(171, 171, 171), 100);
        }
        &:after {
            bottom: -15px;
            @include css3-background-gradient(rgb(171, 171, 171), 0, rgb(230, 230, 230), 100);
            border-bottom: 1px solid #555;
        }
    }
}