From 41d9d08c55bd4b41486ac16be6394879498ee0a0 Mon Sep 17 00:00:00 2001 From: Daniel <50356015+danny007in@users.noreply.github.com> Date: Sat, 22 May 2021 15:26:01 +0530 Subject: [PATCH] added login page --- src/pages/examples/login.html | 81 +++++++++++++++++++ src/scss/_variables.scss | 2 +- src/scss/adminlte.scss | 1 + src/scss/pages/_login_and_register.scss | 103 ++++++++++++++++++++++++ src/scss/parts/_pages.scss | 5 ++ 5 files changed, 191 insertions(+), 1 deletion(-) create mode 100644 src/pages/examples/login.html create mode 100644 src/scss/pages/_login_and_register.scss create mode 100644 src/scss/parts/_pages.scss diff --git a/src/pages/examples/login.html b/src/pages/examples/login.html new file mode 100644 index 000000000..c14ea895a --- /dev/null +++ b/src/pages/examples/login.html @@ -0,0 +1,81 @@ + + + + + + + @@include('./_head.html', { + "path": "../..", + "title": "AdminLTE 4 | General Form Elements" + }) + + +
+ + +
+ + +
+
+ + + @@include('./_scripts.html', { + "path": "../.." + }) + + diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index f64e71773..f00f71761 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -730,7 +730,7 @@ $input-transition: border-color .15s ease-in-out, box-shado // scss-docs-end form-input-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-padding-start: $form-check-input-width + .5em !default; $form-check-margin-bottom: .125rem !default; diff --git a/src/scss/adminlte.scss b/src/scss/adminlte.scss index 790f23e02..c496e7ef3 100644 --- a/src/scss/adminlte.scss +++ b/src/scss/adminlte.scss @@ -23,4 +23,5 @@ @import "parts/core"; @import "parts/components"; @import "parts/extra-components"; +@import "parts/pages"; @import "parts/miscellaneous"; diff --git a/src/scss/pages/_login_and_register.scss b/src/scss/pages/_login_and_register.scss new file mode 100644 index 000000000..653405158 --- /dev/null +++ b/src/scss/pages/_login_and_register.scss @@ -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; +} diff --git a/src/scss/parts/_pages.scss b/src/scss/parts/_pages.scss new file mode 100644 index 000000000..0dbe3a162 --- /dev/null +++ b/src/scss/parts/_pages.scss @@ -0,0 +1,5 @@ +// +// Part: Pages +// + +@import "../pages/login_and_register";