Merge pull request #3 from nadjak77/login-scss

Login scss
brianteeman · Feb 3, 2019 · a70605a · a70605a
2 parents 28a57c2 + 0cb13ab
commit a70605a
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 28 deletions.
diff --git a/administrator/templates/atum/login.php b/administrator/templates/atum/login.php
@@ -84,7 +84,7 @@
         <div id="sidebar-wrapper" class="sidebar-wrapper">
             <div id="main-brand" class="main-brand">
                 <h1><?php echo $sitename; ?></h1>
-                <a href="<?php echo Uri::root(); ?>"><span class="fa fa-external-link"></span> <?php echo Text::sprintf('TPL_ATUM_LOGIN_SIDEBAR_SITENAME_LINK', $sitename); ?></a>
+                <a href="<?php echo Uri::root(); ?>"> <?php echo Text::sprintf('TPL_ATUM_LOGIN_SIDEBAR_SITENAME_LINK', $sitename); ?></a>
             </div>
             <div id="sidebar">
                 <jdoc:include type="modules" name="sidebar" style="body"/>

diff --git a/administrator/templates/atum/scss/_mixin.scss b/administrator/templates/atum/scss/_mixin.scss
@@ -1,27 +1,27 @@
-@mixin prefix_fadeout{
+@mixin prefix-fadeout{
 	from { opacity: 1; }
     to   { opacity: 0; }
 }
 
-@mixin fadeout_page{
+@mixin fadeout-page{
 	/* Firefox < 16 */
 	@-moz-keyframes fadeout {
-		@include prefix_fadeout;
+		@include prefix-fadeout;
 	}
 	/* Safari, Chrome and Opera > 12.1 */
 	@-webkit-keyframes fadeout {
-		@include prefix_fadeout;
+		@include prefix-fadeout;
 	}
 	/* Internet Explorer */
 	@-ms-keyframes fadeout {
-		@include prefix_fadeout;
+		@include prefix-fadeout;
 	}
 	/* Opera < 12.1 */
 	@-o-keyframes fadeout {
-		@include prefix_fadeout;
+		@include prefix-fadeout;
 	}
 	@keyframes fadeout {
-		@include prefix_fadeout;
+		@include prefix-fadeout;
 	}
 
 	-webkit-animation: fadeout $fadetime; /* Safari, Chrome and Opera > 12.1 */
@@ -31,30 +31,30 @@
     animation: fadeout $fadetime;
 }
 
-@mixin prefix_fadein{
+@mixin prefix-fadein{
 	from { opacity: 0; }
     to   { opacity: 1; }
 }
 
-@mixin fadein_page{
+@mixin fadein-page{
 	/* Firefox < 16 */
 	@-moz-keyframes fadein {
-		@include prefix_fadein;
+		@include prefix-fadein;
 	}
 	/* Safari, Chrome and Opera > 12.1 */
 	@-webkit-keyframes fadein {
-		@include prefix_fadein;
+		@include prefix-fadein;
 	}
 	/* Internet Explorer */
 	@-ms-keyframes fadein {
-		@include prefix_fadein;
+		@include prefix-fadein;
 	}
 	/* Opera < 12.1 */
 	@-o-keyframes fadein {
-		@include prefix_fadein;
+		@include prefix-fadein;
 	}
 	@keyframes fadein {
-		@include prefix_fadein;
+		@include prefix-fadein;
 	}
 
 	-webkit-animation: fadein $fadetime; /* Safari, Chrome and Opera > 12.1 */

diff --git a/administrator/templates/atum/scss/blocks/_login.scss b/administrator/templates/atum/scss/blocks/_login.scss
@@ -9,6 +9,10 @@
 		*/
 		background-image: url("../images/joomla-pattern.svg");
 		background-size: 200px;
+
+		@include media-breakpoint-down(sm){
+			min-height: calc(100vh - 35vh);
+		}
 	}
 
   .login-bg-grad {
@@ -40,11 +44,15 @@
 	background:var(--white);
 	padding:15px;
 	color:var(--font-color-dark);
-	position: absolute;
-    top: 50%;
-    left: 50%;
-    margin-top: -206px;
-    margin-left: -205px;
+
+
+	 @include media-breakpoint-up(md) {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		margin-top: -206px;
+		margin-left: -205px;
+	}
 
     @include media-breakpoint-down(sm) {
       padding: 0 15px;
@@ -72,7 +80,7 @@
 
       span {
         font-size: .9rem;
-        color: #c6d2de;
+        color: theme-color("danger");
       }
     }
   }
@@ -113,6 +121,10 @@
         padding: .75rem 1.25rem;
       }
     }
+	 @include media-breakpoint-down(sm){
+		position:relative;
+		bottom:0;
+	 }
   }
 
   .container-main,
@@ -135,6 +147,9 @@
 	margin-top:100px;
 	color:var(--font-color-light);
 	text-align:center;
+	@include media-breakpoint-down(sm) {
+		margin-top:10px;
+	}
 }
 .com_login .sidebar-wrapper .main-brand h1,
 .com_login .sidebar-wrapper .main-brand a{

diff --git a/administrator/templates/atum/scss/blocks/_sidebar.scss b/administrator/templates/atum/scss/blocks/_sidebar.scss
@@ -1,9 +1,12 @@
+// Mixins
+@import "../mixin";
+
 // Sidebar
 
 .wrapper {
   transition: all .3s ease;
 
-  @include media-breakpoint-down(md) {
+  @include media-breakpoint-down(sm) {
     padding-left: 0;
   }
 }
@@ -27,19 +30,27 @@
   }
 
   .view-login & {
-    flex: 1 0 400px;
-    max-width: 400px;
+    flex: 1 0 300px;
+    max-width: 300px;
 
     &.transit-narrow {
       flex: 1 0 $sidebar-width;
       transition: flex 3s;
+
+	  @include media-breakpoint-down(sm){
+		@include fadeout-page;
+	  }
     }
   }
 
   &.transit-wider {
-    flex: 1 0 400px;
-    max-width: 400px;
+    flex: 1 0 300px;
+    max-width: 300px;
     transition: all 3s;
+
+	@include media-breakpoint-down(sm){
+		@include fadein-page;
+	  }
   }
 
 }

diff --git a/administrator/templates/atum/scss/template.scss b/administrator/templates/atum/scss/template.scss
@@ -121,9 +121,15 @@
 
 // Fadeeffect for login page
 .load-fadein{
-	@include fadein_page;
+	@include fadein-page;
 }
 
 .load-fadeout{
-	 @include fadeout_page;
+	 @include fadeout-page;
+}
+
+//extern links with icons
+a[href*="//"]:before{
+	font:normal normal normal 14px/1 FontAwesome;
+	content:"\f08e"; 
 }