Merge pull request #8 from rhamilto/login

Adding login
redhat-rcue · Dec 4, 2013 · 8ef6ee1 · 8ef6ee1
2 parents 4e45141 + 22a8316
commit 8ef6ee1
Show file tree

Hide file tree

Showing 15 changed files with 525 additions and 136 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "Red Hat Common User Experience (RCUE)",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "authors": "Red Hat",
   "license": "Apache-2.0",
   "homepage": "http://rcue-uxd.itos.redhat.com/",

diff --git a/dist/css/rcue.css b/dist/css/rcue.css
@@ -7354,6 +7354,8 @@ td.visible-print {
 /* RCUE overrides and new stuff */
 /* Red Hat Common User Experience (RCUE) */
 /* Bootstrap overrides and RCUE-specific variables */
+/* @img-brand-ie8, @img-brand-lg-ie8, and @img-path-alt should be overwritten in 
+a separate variables file to point to the correct images and path */
 /* Bootstrap overrides */
 /* RCUE-specific */
 /* Red Hat Common User Experience (RCUE) */
@@ -8223,3 +8225,110 @@ label {
 .breadcrumb > .active {
   font-weight: bold;
 }
+.login-rcue {
+  height: 100%;
+}
+.login-rcue #brand {
+  position: relative;
+  top: -70px;
+}
+.login-rcue #brand img {
+  display: block;
+  height: 18px;
+  margin: 0 auto;
+  max-width: 100%;
+}
+@media (min-width: 768px) {
+  .login-rcue #brand img {
+    margin: 0;
+    text-align: left;
+  }
+}
+.login-rcue body {
+  background: #1d2226 url("../img/bg-login.jpg") repeat-x 45% 0;
+  background-size: auto;
+  color: #fff;
+}
+@media (min-width: 768px) {
+  .login-rcue body {
+    background-size: 100% auto;
+  }
+}
+.login-rcue .container {
+  background-color: #252a2e;
+  background-color: rgba(0, 0, 0, 0.3);
+  clear: right;
+  padding-bottom: 40px;
+  padding-top: 20px;
+  width: auto;
+}
+@media (min-width: 768px) {
+  .login-rcue .container {
+    bottom: 13%;
+    padding-bottom: 10px;
+    padding-left: 80px;
+    position: absolute;
+    width: 100%;
+  }
+}
+.login-rcue .container .details p:first-child {
+  border-top: 1px solid #474747;
+  padding-top: 25px;
+}
+@media (min-width: 768px) {
+  .login-rcue .container .details {
+    border-left: 1px solid #474747;
+    padding-left: 40px;
+  }
+  .login-rcue .container .details p:first-child {
+    border-top: 0;
+    padding-top: 0;
+  }
+}
+.login-rcue .container .details p {
+  margin-bottom: 2px;
+}
+.login-rcue .container .form-horizontal .control-label {
+  font-size: 12px;
+  font-weight: 400;
+  text-align: left;
+}
+.login-rcue .container .help-block {
+  color: #fff;
+}
+@media (min-width: 768px) {
+  .login-rcue .container .login {
+    padding-right: 40px;
+  }
+}
+.login-rcue .container .submit {
+  text-align: right;
+}
+.login-rcue #redhat {
+  display: block;
+  margin: 20px auto 70px;
+  position: relative;
+  text-align: center;
+}
+@media (min-width: 768px) {
+  .login-rcue #redhat {
+    float: right;
+    margin-right: 64px;
+    margin-top: 50px;
+  }
+}
+.ie8.login-rcue #brand {
+  background: url('../img/brand-lg.png') no-repeat;
+  background-size: cover auto;
+}
+.ie8.login-rcue #brand img {
+  width: 0;
+}
+.ie8.login-rcue #redhat {
+  background: url('../img/logo.png') no-repeat;
+  height: 44px;
+  width: 137px;
+}
+.ie8.login-rcue #redhat img {
+  width: 0;
+}
diff --git a/dist/css/rcue.min.css b/dist/css/rcue.min.css
diff --git a/dist/img/bg-login.jpg b/dist/img/bg-login.jpg
diff --git a/dist/img/brand-lg.png b/dist/img/brand-lg.png
diff --git a/dist/img/brand.svg b/dist/img/brand.svg
diff --git a/dist/img/logo.png b/dist/img/logo.png
diff --git a/dist/img/logo.svg b/dist/img/logo.svg
diff --git a/examples/index.html b/examples/index.html
@@ -26,6 +26,7 @@
   <body>
     <h1>Red Hat&reg; Common User Experience</h1>
     <ul>
+      <li><a href="login.html">Login</a></li>
       <li><a href="buttons.html">Buttons</a></li>
       <li><a href="forms.html">Forms</a></li>
       <li><a href="navbar.html">Navbar</a></li>

diff --git a/examples/login.html b/examples/login.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<!--[if IE 8]><html class="ie8 login-rcue"><![endif]-->
+<!--[if gt IE 8]><!-->
+<html class="login-rcue">
+<!--<![endif]-->
+  <head>
+    <title>Login - Red Hat&reg; Common User Experience</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="../dist/css/rcue.css" rel="stylesheet" media="screen, print">
+    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!--[if lt IE 9]>
+    <script src="../components/html5shiv/dist/html5shiv.js"></script>
+    <script src="../components/respond/respond.min.js"></script>
+    <![endif]-->
+    <!-- IE8 requires jQuery and Bootstrap JS to load in head to prevent rendering bugs -->
+    <!-- IE8 requires jQuery v1.x -->
+    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="../components/bootstrap/dist/js/bootstrap.min.js"></script>
+  </head>
+  <body>
+    <a href="http://www.redhat.com/" id="redhat">
+      <img src="../dist/img/logo.svg" alt="Red Hat" />
+    </a>
+    <div class="container">
+      <div class="row">
+        <div class="col-sm-12">
+          <div id="brand">
+            <img src="../dist/img/brand.svg">
+          </div><!--/#brand-->
+        </div><!--/.row-->
+        <div class="col-sm-7 col-md-6 col-lg-5 login">
+          <form class="form-horizontal" role="form">
+            <div class="form-group">
+              <label for="inputUsername" class="col-sm-2 col-md-2 control-label">Username</label>
+              <div class="col-sm-10 col-md-10">
+                <input type="text" class="form-control" id="inputUsername" placeholder="" tabindex="1">
+              </div>
+            </div>
+            <div class="form-group">
+              <label for="inputPassword" class="col-sm-2 col-md-2 control-label">Password</label>
+              <div class="col-sm-10 col-md-10">
+                <input type="password" class="form-control" id="inputPassword" placeholder="" tabindex="2">
+              </div>
+            </div>
+            <div class="form-group">
+              <div class="col-xs-8 col-sm-offset-2 col-sm-6 col-md-offset-2 col-md-6">
+                <div class="checkbox">
+                  <label>
+                    <input type="checkbox" tabindex="3"> Remember Username
+                  </label>
+                </div>
+                <span class="help-block"> Forgot <a href="#" tabindex="5">Username</a> or <a href="#" tabindex="6">Password</a>?</span>
+              </div>
+              <div class="col-xs-4 col-sm-4 col-md-4 submit">
+                <button type="submit" class="btn btn-primary btn-lg" tabindex="4">Log In</button>
+              </div>
+            </div>
+          </form>
+        </div><!--/.col-*-->
+        <div class="col-sm-5 col-md-6 col-lg-7 details">
+          <p><strong>Domain:</strong> 10.0.0.1</p>
+          <p><strong>Zone:</strong> Live</p>
+          <p><strong>Appliance:</strong> Yep</p>
+        </div><!--/.col-*-->
+      </div><!--/.row-->
+    </div><!--/.container-->
+  </body>
+</html>