diff --git a/assets/css/style.css b/assets/css/style.css index 7adec17..476fd80 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1939,6 +1939,9 @@ a.dropdown-item { --light: color(light); --dark: color(dark); } +body, html { + min-height: 100%; } + body { background-color: #f4f6f9; font-size: 14px; @@ -2032,6 +2035,9 @@ a.bb { color: #34395e; font-weight: 600; } +.text-muted-transparent { + color: rgba(255, 255, 255, 0.8); } + .img-shadow { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03); } @@ -2189,6 +2195,109 @@ pre { .icon-wrap { width: 100%; } } +.background-walk-y { + background-repeat: no-repeat; + background-position: 0 0%; + -webkit-animation-name: backgroundWalkY; + animation-name: backgroundWalkY; + -webkit-animation-duration: 70s; + animation-duration: 70s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-direction: alternate; + animation-direction: alternate; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + background-size: 100%; } + +@media (max-width: 1199.98px) { + .background-walk-y { + background-size: cover; } } + +.background-walk-x { + background-repeat: no-repeat; + background-position: 0 0%; + -webkit-animation-name: backgroundWalkX; + animation-name: backgroundWalkX; + -webkit-animation-duration: 70s; + animation-duration: 70s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-direction: alternate; + animation-direction: alternate; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; } + +@-webkit-keyframes backgroundWalkY { + 0% { + background-position: 0 0%; } + 100% { + background-position: 0 100%; } } + +@keyframes backgroundWalkY { + 0% { + background-position: 0 0%; } + 100% { + background-position: 0 100%; } } + +@-webkit-keyframes backgroundWalkX { + 0% { + background-position: 0 0%; } + 100% { + background-position: 100% 0; } } + +@keyframes backgroundWalkX { + 0% { + background-position: 0 0%; } + 100% { + background-position: 100% 0; } } + +.overlay-gradient-bottom:after { + content: ' '; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: false; + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.65) 100%); + z-index: 1; } + +.overlay-gradient-top:after { + content: ' '; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: false; + background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.65) 100%); + z-index: 1; } + +.index-1 { + z-index: 1 !important; } + +.index-2 { + z-index: 2 !important; } + +.index-3 { + z-index: 3 !important; } + +.index-4 { + z-index: 4 !important; } + +.index-5 { + z-index: 5 !important; } + +.absolute-bottom-left { + position: absolute; + left: 0; + bottom: 0; } + /* 4.2 Section */ .section { position: relative; diff --git a/assets/img/unsplash/login-bg.jpg b/assets/img/unsplash/login-bg.jpg new file mode 100644 index 0000000..00e870e Binary files /dev/null and b/assets/img/unsplash/login-bg.jpg differ diff --git a/gulpfile.js b/gulpfile.js index b79d28a..8710e6e 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -144,6 +144,9 @@ function compile_html() { } function watching() { + compile_scss(); + compile_html(); + /** * BrowserSync initialization * @type {Object} diff --git a/pages/auth-login-2.html b/pages/auth-login-2.html new file mode 100644 index 0000000..02457d2 --- /dev/null +++ b/pages/auth-login-2.html @@ -0,0 +1,110 @@ + + + + + + Login — Stisla + + + + + + + + + + + + + + +
+
+
+
+
+ logo +

Welcome to Stisla

+

Before you get started, you must login or register if you don't already have an account.

+
+
+ + +
+ Please fill in your email +
+
+ +
+
+ +
+ +
+ please fill in your password +
+
+ +
+
+ + +
+
+ +
+ + Forgot Password? + + +
+ +
+ Don't have an account? Create new one +
+
+ +
+ Copyright © Your Company. Made with 💙 by Stisla +
+ Privacy Policy +
+ Terms of Service +
+
+
+
+
+
+
+
+

Good Mornig

+
Bali, Indonesia
+
+ Photo by Justin Kauffman on Unsplash +
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + diff --git a/sources/pages/auth-login-2.html b/sources/pages/auth-login-2.html new file mode 100644 index 0000000..e807d5c --- /dev/null +++ b/sources/pages/auth-login-2.html @@ -0,0 +1,81 @@ +{% set title = 'Login' %} +{% set page = 'auth-login.html' %} +{% set body = false %} +{% extends 'layouts/master.html' %} + +{% block plugins_css %} + +{% endblock %} + +{% block content_2 %} +
+
+
+
+ logo +

Welcome to Stisla

+

Before you get started, you must login or register if you don't already have an account.

+
+
+ + +
+ Please fill in your email +
+
+ +
+
+ +
+ +
+ please fill in your password +
+
+ +
+
+ + +
+
+ +
+ + Forgot Password? + + +
+ +
+ Don't have an account? Create new one +
+
+ +
+ Copyright © Your Company. Made with 💙 by Stisla +
+ Privacy Policy +
+ Terms of Service +
+
+
+
+
+
+
+
+

Good Mornig

+
Bali, Indonesia
+
+ Photo by Justin Kauffman on Unsplash +
+
+
+
+
+{% endblock %} diff --git a/sources/scss/_mixin.scss b/sources/scss/_mixin.scss index c290109..7663ecd 100644 --- a/sources/scss/_mixin.scss +++ b/sources/scss/_mixin.scss @@ -11,6 +11,17 @@ margin-bottom: 30px; } +@mixin background_walk($animation-name: backgroundWalkY, $s: 70s) { + background-repeat: no-repeat; + background-position: 0 0%; + animation-name: $animation-name; + animation-duration: $s; + animation-iteration-count: infinite; + animation-direction: alternate; + animation-fill-mode: forwards; + animation-timing-function: linear; +} + @mixin background_spinner($size: 80px) { background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJsb2FkZXItMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQogd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDUwIDUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MCA1MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iIzAwMCIgZD0iTTQzLjkzNSwyNS4xNDVjMC0xMC4zMTgtOC4zNjQtMTguNjgzLTE4LjY4My0xOC42ODNjLTEwLjMxOCwwLTE4LjY4Myw4LjM2NS0xOC42ODMsMTguNjgzaDQuMDY4YzAtOC4wNzEsNi41NDMtMTQuNjE1LDE0LjYxNS0xNC42MTVjOC4wNzIsMCwxNC42MTUsNi41NDMsMTQuNjE1LDE0LjYxNUg0My45MzV6Ij4NCjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZVR5cGU9InhtbCINCiAgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIg0KICB0eXBlPSJyb3RhdGUiDQogIGZyb209IjAgMjUgMjUiDQogIHRvPSIzNjAgMjUgMjUiDQogIGR1cj0iMC42cyINCiAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4NCjwvcGF0aD4NCjwvc3ZnPg0K'); background-size: $size; @@ -18,7 +29,7 @@ background-position: center; } -@mixin overlay($z-index: 99, $background-color: rgba(255, 255, 255, 0.5)) { +@mixin overlay($z-index: 99, $background-color: rgba(255, 255, 255, 0.5), $background-image: false) { content: ' '; position: absolute; top: 0; @@ -26,6 +37,9 @@ width: 100%; height: 100%; background-color: $background-color; + @if $background-image != false { + background-image: $background-image; + } z-index: $z-index; } diff --git a/sources/scss/theme/_misc.scss b/sources/scss/theme/_misc.scss index 88024ff..7f34991 100644 --- a/sources/scss/theme/_misc.scss +++ b/sources/scss/theme/_misc.scss @@ -12,6 +12,10 @@ --dark: color(dark); } +body, html { + min-height: 100%; +} + body { background-color: color(body); font-size: $font_size; @@ -123,6 +127,10 @@ a.bb { font-weight: 600; } +.text-muted-transparent { + color: rgba(255,255,255,.8); +} + .img-shadow { @include shadow; } @@ -315,3 +323,60 @@ pre { width: 100%; } } + +.background-walk-y { + @include background_walk; + background-size: 100%; +} + +@include media-breakpoint-down(lg) { + .background-walk-y { + background-size: cover; + } +} + +.background-walk-x { + @include background_walk(backgroundWalkX); +} + +@keyframes backgroundWalkY { + 0% { + background-position: 0 0%; + } + 100% { + background-position: 0 100%; + } +} + +@keyframes backgroundWalkX { + 0% { + background-position: 0 0%; + } + 100% { + background-position: 100% 0; + } +} + +.overlay-gradient-bottom { + &:after { + @include overlay(1, false, linear-gradient(to bottom, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.65) 100%)); + } +} + +.overlay-gradient-top { + &:after { + @include overlay(1, false, linear-gradient(to top, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.65) 100%)); + } +} + +.index-1 { z-index: 1 !important; } +.index-2 { z-index: 2 !important; } +.index-3 { z-index: 3 !important; } +.index-4 { z-index: 4 !important; } +.index-5 { z-index: 5 !important; } + +.absolute-bottom-left { + position: absolute; + left: 0; + bottom: 0; +}