Home Explore Help
Register Sign In
wilson.silva
/
AdminLte
mirror of https://github.com/almasaeed2010/AdminLTE
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

added login page

Daniel 3 years ago
parent
c40317a29c
commit
41d9d08c55
5 changed files with 191 additions and 1 deletions
Unified View Show Diff Stats
  1. 81 0
      src/pages/examples/login.html
  2. 1 1
      src/scss/_variables.scss
  3. 1 0
      src/scss/adminlte.scss
  4. 103 0
      src/scss/pages/_login_and_register.scss
  5. 5 0
      src/scss/parts/_pages.scss

+ 81 - 0
src/pages/examples/login.html
View File 

@@ -0,0 +1,81 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<!-- For RTL verison -->
 
+<!-- <html lang="en" dir="rtl"> -->
 
+  <head>
 
+    <!-- icheck bootstrap -->
 
+    @@include('./_head.html', {
 
+      "path": "../..",
 
+      "title": "AdminLTE 4 | General Form Elements"
 
+    })
 
+  </head>
 
+  <body class="login-page">
 
+    <div class="login-box">
 
+      <div class="login-logo">
 
+        <a href="../../index2.html"><b>Admin</b>LTE</a>
 
+      </div>
 
+      <!-- /.login-logo -->
 
+      <div class="card">
 
+        <div class="card-body login-card-body">
 
+          <p class="login-box-msg">Sign in to start your session</p>
 
+
 
+          <form action="../../index3.html" method="post">
 
+            <div class="input-group mb-3">
 
+              <input type="email" class="form-control" placeholder="Email">
 
+              <div class="input-group-text">
 
+                <span class="fas fa-envelope"></span>
 
+              </div>
 
+            </div>
 
+            <div class="input-group mb-3">
 
+              <input type="password" class="form-control" placeholder="Password">
 
+              <div class="input-group-text">
 
+                <span class="fas fa-lock"></span>
 
+              </div>
 
+            </div>
 
+            <div class="row">
 
+              <div class="col-8">
 
+                <div class="form-check">
 
+                  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
 
+                  <label class="form-check-label" for="flexCheckDefault">
 
+                    Remember Me
 
+                  </label>
 
+                </div>
 
+              </div>
 
+              <!-- /.col -->
 
+              <div class="col-4">
 
+                <div class="d-grid gap-2">
 
+                  <button type="submit" class="btn btn-primary">Sign In</button>
 
+                </div>
 
+              </div>
 
+              <!-- /.col -->
 
+            </div>
 
+          </form>
 
+
 
+          <div class="social-auth-links text-center mb-3 d-grid gap-2">
 
+            <p>- OR -</p>
 
+            <a href="#" class="btn btn-primary">
 
+              <i class="fab fa-facebook me-2"></i> Sign in using Facebook
 
+            </a>
 
+            <a href="#" class="btn btn-danger">
 
+              <i class="fab fa-google-plus me-2"></i> Sign in using Google+
 
+            </a>
 
+          </div>
 
+          <!-- /.social-auth-links -->
 
+
 
+          <p class="mb-1">
 
+            <a href="forgot-password.html">I forgot my password</a>
 
+          </p>
 
+          <p class="mb-0">
 
+            <a href="register.html" class="text-center">Register a new membership</a>
 
+          </p>
 
+        </div>
 
+        <!-- /.login-card-body -->
 
+      </div>
 
+    </div>
 
+    <!-- /.login-box -->
 
+
 
+    @@include('./_scripts.html', {
 
+      "path": "../.."
 
+    })
 
+  </body>
 
+</html>

+ 1 - 1
src/scss/_variables.scss
View File 

@@ -730,7 +730,7 @@ $input-transition:                      border-color .15s ease-in-out, box-shado
 
 // scss-docs-end form-input-variables
 
 // scss-docs-end form-input-variables
 
 
 
 // scss-docs-start form-check-variables
 
 // scss-docs-start form-check-variables
 
-$form-check-input-width:                  1em !default;
 
+$form-check-input-width:                  1.125em !default;
 
 $form-check-min-height:                   $font-size-base * $line-height-base !default;
 
 $form-check-min-height:                   $font-size-base * $line-height-base !default;
 
 $form-check-padding-start:                $form-check-input-width + .5em !default;
 
 $form-check-padding-start:                $form-check-input-width + .5em !default;
 
 $form-check-margin-bottom:                .125rem !default;
 
 $form-check-margin-bottom:                .125rem !default;

+ 1 - 0
src/scss/adminlte.scss
View File 

@@ -23,4 +23,5 @@
 
 @import "parts/core";
 
 @import "parts/core";
 
 @import "parts/components";
 
 @import "parts/components";
 
 @import "parts/extra-components";
 
 @import "parts/extra-components";
 
+@import "parts/pages";
 
 @import "parts/miscellaneous";
 
 @import "parts/miscellaneous";

+ 103 - 0
src/scss/pages/_login_and_register.scss
View File 

@@ -0,0 +1,103 @@
 
+//
 
+// Pages: Login & Register
 
+//
 
+
 
+.login-logo,
 
+.register-logo {
 
+  font-size: 2.1rem;
 
+  font-weight: 300;
 
+  margin-bottom: .9rem;
 
+  text-align: center;
 
+
 
+  a {
 
+    color: $gray-700;
 
+  }
 
+}
 
+
 
+.login-page,
 
+.register-page {
 
+  align-items: center;
 
+  background-color: $gray-200;
 
+  display: flex;
 
+  flex-direction: column;
 
+  height: 100vh;
 
+  justify-content: center;
 
+}
 
+
 
+.login-box,
 
+.register-box {
 
+  width: 360px;
 
+
 
+  @media (max-width: map-get($grid-breakpoints, sm)) {
 
+    margin-top: .5rem;
 
+    width: 90%;
 
+  }
 
+
 
+  .card {
 
+    margin-bottom: 0;
 
+  }
 
+}
 
+
 
+.login-card-body,
 
+.register-card-body {
 
+  background-color: $white;
 
+  border-top: 0;
 
+  color: #666;
 
+  padding: 20px;
 
+
 
+  .input-group {
 
+    .form-control {
 
+      border-right: 0;
 
+
 
+      &:focus {
 
+        box-shadow: none;
 
+
 
+        ~ .input-group-prepend .input-group-text,
 
+        ~ .input-group-append .input-group-text {
 
+          border-color: $input-focus-border-color;
 
+        }
 
+      }
 
+
 
+      &.is-valid {
 
+        &:focus {
 
+          box-shadow: none;
 
+        }
 
+
 
+        ~ .input-group-prepend .input-group-text,
 
+        ~ .input-group-append .input-group-text {
 
+          border-color: $success;
 
+        }
 
+      }
 
+
 
+      &.is-invalid {
 
+        &:focus {
 
+          box-shadow: none;
 
+        }
 
+
 
+        ~ .input-group-append .input-group-text {
 
+          border-color: $danger;
 
+        }
 
+      }
 
+    }
 
+
 
+    .input-group-text {
 
+      background-color: transparent;
 
+      border-bottom-right-radius: $border-radius;
 
+      border-left: 0;
 
+      border-top-right-radius: $border-radius;
 
+      color: #777;
 
+      transition: $input-transition;
 
+    }
 
+  }
 
+}
 
+
 
+.login-box-msg,
 
+.register-box-msg {
 
+  margin: 0;
 
+  padding: 0 20px 20px;
 
+  text-align: center;
 
+}
 
+
 
+.social-auth-links {
 
+  margin: 10px 0;
 
+}

+ 5 - 0
src/scss/parts/_pages.scss
View File 

@@ -0,0 +1,5 @@
 
+//
 
+// Part: Pages
 
+//
 
+
 
+@import "../pages/login_and_register";