Updated lockscreen style

build/less/lockscreen.less

@@ -9,7 +9,7 @@
 
 /* We will put the dynamically generated digital clock here */
 .lockscreen-logo {
-  font-size: 30px;
+  font-size: 35px;
   text-align: center;
   margin-bottom: 25px;
   a {
@@ -36,12 +36,11 @@
 
 /* Will contain the image and the sign in form */
 .lockscreen-item {
+  .border-radius(4px);
   padding: 0;
   background: #fff;
   position: relative;
-  .border-radius(4px);
+  margin: 10px auto 45px auto;
-  .clearfix();
-  margin: 10px auto;
   width: 290px;
 }
 

dist/css/AdminLTE.css

@@ -2560,7 +2560,7 @@ table.text-center th {
 }
 /* We will put the dynamically generated digital clock here */
 .lockscreen-logo {
-  font-size: 30px;
+  font-size: 35px;
   text-align: center;
   margin-bottom: 25px;
 }
@@ -2585,21 +2585,13 @@ table.text-center th {
 }
 /* Will contain the image and the sign in form */
 .lockscreen-item {
+  border-radius: 4px;
   padding: 0;
   background: #fff;
   position: relative;
-  border-radius: 4px;
+  margin: 10px auto 45px auto;
-  margin: 10px auto;
   width: 290px;
 }
-.lockscreen-item:before,
-.lockscreen-item:after {
-  content: " ";
-  display: table;
-}
-.lockscreen-item:after {
-  clear: both;
-}
 /* User image */
 .lockscreen-image {
   position: absolute;

documentation/index.html

@@ -11,6 +11,7 @@
     <link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" />
     <!-- Theme style -->
     <link href="../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
+    <link href="../dist/css/skins/skin-blue.min.css" rel="stylesheet" type="text/css" />
 
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
@@ -42,7 +43,7 @@
         font-size: 25px;
         border-bottom: 1px solid #dedede;
         color: #000;
-     }
+      }
       #components > h4 {
         font-size: 20px;
         color: #000;
@@ -197,6 +198,17 @@
 
         <!-- Main content -->
         <div class="content body">
+          <div class="callout callout-warning">
+            <h4>Warning!</h4>
+            This documentation is under development. Some information may change as the template
+            goes through different pre-releases.
+          </div>
+          <div class="callout callout-danger">
+            <h4>Heads Up!</h4>
+            The current AdminLTE 2.0 version is in its alpha stage and should not be used in
+            production. It's however available for testing and to get developers familiar with
+            the new syntax.
+          </div>
           <section id='introduction'>
             <h2 class='page-header'><span>Introduction</span></h2>
             <p class='lead'>
@@ -407,7 +419,9 @@ AdminLTE/
             <p><b>Note:</b> you cannot use both layout-boxed and fixed at the same time. Anything else can be mixed together.</p>
 
             <h3>Skins</h3>
-            <p class="lead">Add one of the following classes to the body tag to change the template's appearance.</p>
+            <p class="lead">Skins can be found in the dist/css/skins folder.
+              Choose and the skin file that you want then add the appropriate
+              class to the body tag to change the template's appearance. Here is the list of available skins:</p>
             <ul>
               <li><code>skin-blue</code></li>
               <li><code>skin-yellow</code></li>
@@ -425,7 +439,7 @@ AdminLTE/
             <div class='callout callout-info lead'>
               <h4>Reminder!</h4>
               <p>
-                AdminLTE makes use of all of Bootstrap 3 components. It's a good start to review
+                AdminLTE uses all of Bootstrap 3 components. It's a good start to review
                 the <a href="http://getbootstrap.com">Bootstrap documentation</a> to get an idea of the various components
                 that this documentation does not cover.
               </p>
@@ -452,7 +466,7 @@ AdminLTE/
                   <!-- Header Navbar: style can be found in header.less -->
                   <nav class="navbar" role="navigation" style="border: 0;">
                     <!-- Sidebar toggle button-->
-                    <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
+                    <a href="#" class="sidebar-toggle" role="button">
                       <span class="sr-only">Toggle navigation</span>
                     </a>
                     <!-- Navbar Right Menu -->
@@ -1060,7 +1074,7 @@ AdminLTE/
                 </div><!-- /.box -->
               </div>
             </div><!-- /.row -->
-                        <pre class="prettyprint">
+            <pre class="prettyprint">
 &LT;div class="box box-solid">...&LT;/div>
 &LT;div class="box box-solid box-primary">...&LT;/div>
 &LT;div class="box box-solid box-info">...&LT;/div>

pages/examples/lockscreen.html

@@ -34,18 +34,19 @@
         <!-- /.lockscreen-image -->
 
         <!-- lockscreen credentials (contains the form) -->
-        <div class="lockscreen-credentials">
+        <form class="lockscreen-credentials">
-
           <div class="input-group">
             <input type="password" class="form-control" placeholder="password" />
             <div class="input-group-btn">
               <button class="btn btn-flat"><i class="fa fa-arrow-right text-muted"></i></button>
             </div>
           </div>
-        </div><!-- /.lockscreen credentials -->
+        </form><!-- /.lockscreen credentials -->
 
       </div><!-- /.lockscreen-item -->
-
+      <div class="help-block text-center">
+        Enter your password to retrieve your session
+      </div>
       <div class="lockscreen-link">
         <a href="login.html">Or sign in as a different user</a>
       </div>
@@ -53,15 +54,5 @@
 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
-
-    <!-- page script -->
-    <script type="text/javascript">
-      $(function () {        
-        //$(".center").center();
-        $(window).resize(function () {
-          $(".center").center();
-        });
-      });
-    </script>
   </body>
 </html>