Merge pull request #11284 from alyf-de/fix_login_css

refactor: Login page css

frappe/public/scss/login.scss

@@ -0,0 +1,203 @@
+/* login-css */
+
+#page-login {
+	.hero-and-content {
+		/*background-color: #f5f7fa;*/
+		background-color: #fafbfc;
+	}
+
+	.page-sidebar,
+	#wrap-footer,
+	.page-header {
+		display: none;
+	}
+
+	.page-content {
+		right: 0%;
+		width: 100%;
+	}
+
+	.icon-twitter,
+	.icon-twitter-sign {
+		color: #00a0d1;
+	}
+
+	.icon-linkedin,
+	.icon-linkedin-sign {
+		color: #4875b4;
+	}
+
+	#wrap {
+		background-color: #7575ff;
+	}
+
+	.for-login {
+		display: none;
+	}
+
+	.for-forgot {
+		display: none;
+	}
+
+	.for-signup {
+		display: none;
+	}
+
+	.form-signin {
+		.form-signin-heading,
+		.checkbox {
+			margin-bottom: 10px;
+		}
+		.checkbox {
+			font-weight: normal;
+		}
+		.form-control {
+			position: relative;
+			height: auto;
+			-webkit-box-sizing: border-box;
+			-moz-box-sizing: border-box;
+			box-sizing: border-box;
+			padding: 6px;
+			font-size: 14px;
+			margin-bottom: 10px;
+		}
+		.form-control:focus {
+			z-index: 2;
+		}
+	}
+
+	.btn-social {
+		margin: 10px;
+	}
+
+	.social-logins .fa {
+		margin-right: 5px;
+		color: #8d99a6;
+	}
+
+	.form-footer {
+		margin-top: -45px;
+		text-align: center;
+		font-size: 12px;
+		color: #8d99a6;
+		font-weight: bold;
+
+		a {
+			font-size: 12px;
+			color: #8d99a6;
+			font-weight: bold;
+		}
+
+		h6 {
+			font-size: 12px;
+			color: #8d99a6;
+			font-weight: bold;
+		}
+
+		.btn-default {
+			color: #36414c;
+		}
+	}
+
+	h5 {
+		position: relative;
+		text-align: center;
+		margin-top: 20px;
+		margin-bottom: 20px;
+	}
+
+	p {
+		margin-bottom: 20px;
+	}
+
+	.login-content .btn {
+		font-size: 14px;
+		margin-top: 45px;
+	}
+
+	.page-card {
+		max-width: 360px;
+		padding: 15px;
+		margin: 70px auto;
+		border: 1px solid #d1d8dd;
+		border-radius: 4px;
+		background-color: #fff;
+		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
+
+		.page-card-head {
+			padding: 10px 15px;
+			margin: -15px;
+			margin-bottom: 15px;
+			border-bottom: 1px solid #d1d8dd;
+		}
+
+		.page-card-head .indicator {
+			color: #36414c;
+			font-size: 14px;
+		}
+
+		.page-card-head .indicator::before {
+			margin: 0 6px 0.5px 0px;
+		}
+
+		.btn {
+			margin-top: 30px;
+		}
+	}
+
+	.bordered {
+		border: 1px solid #d1d8dd;
+		padding: 10px;
+		border-radius: 4px;
+	}
+
+	.toggle-password {
+		right: 9px;
+		top: 9px;
+		position: absolute;
+		z-index: 2;
+		cursor: pointer;
+		font-size: 12px;
+	}
+
+	.invalid-login {
+		-webkit-animation: wiggle 0.5s linear;
+		animation: wiggle 0.5s linear;
+	}
+
+	@-webkit-keyframes wiggle {
+		8%, 41% {
+			-webkit-transform: translateX(-10px);
+		}
+		25%, 58% {
+			-webkit-transform: translateX(10px);
+		}
+		75% {
+			-webkit-transform: translateX(-5px);
+		}
+		92% {
+			-webkit-transform: translateX(5px);
+		}
+		0%, 100% {
+			-webkit-transform: translateX(0);
+		}
+	}
+
+	@keyframes wiggle {
+		8%, 41% {
+			transform: translate(-10px);
+		}
+		25%, 58% {
+			transform: translate(10px);
+		}
+		75% {
+			transform: translate(-5px);
+		}
+		92% {
+			transform: translate(5px);
+		}
+		0%, 100% {
+			transform: translate(0);
+		} 
+	}
+}

frappe/public/scss/website.scss

@@ -12,6 +12,7 @@
 @import 'portal';
 @import 'search';
 @import 'doc';
+@import 'login';
 
 .ql-editor.read-mode {
 	padding: 0;

frappe/templates/includes/login/login.css

@@ -1,167 +0,0 @@
-/* login-css */
-
-.hero-and-content {
-	/*background-color: #f5f7fa;*/
-	background-color: #fafbfc;
-}
-
-.page-sidebar, #wrap-footer, .page-header {
-	display: none;
-}
-
-.page-content {
-	right: 0%;
-	width: 100%;
-}
-
-.icon-twitter, .icon-twitter-sign{
-    color: #00a0d1;
-}
-
-.icon-linkedin, .icon-linkedin-sign{
-    color: #4875B4;
-}
-
-#wrap {
-	background-color: #7575ff;
-}
-
-.for-login {
-	display: none;
-}
-
-.for-forgot {
-	display: none;
-}
-
-.for-signup {
-	display: none;
-}
-
-.form-signin .form-signin-heading,
-.form-signin .checkbox {
-  margin-bottom: 10px;
-}
-.form-signin .checkbox {
-  font-weight: normal;
-}
-.form-signin .form-control {
-  position: relative;
-  height: auto;
-  -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
-  padding: 6px;
-  font-size: 14px;
-  margin-bottom: 10px;
-}
-.form-signin .form-control:focus {
-  z-index: 2;
-}
-
-.btn-social {
-	margin: 10px;
-}
-
-.social-logins .fa {
-	margin-right: 5px;
-	color: #8D99A6;
-}
-
-.form-footer {
-	margin-top: -45px;
-	text-align: center;
-}
-
-.form-footer, .form-footer a, .form-footer h6 {
-	font-size: 12px;
-	color: #8D99A6;
-	font-weight: bold;
-}
-
-.form-footer .btn-default {
-	color: #36414C;
-}
-
-h5 {
-  position: relative;
-  text-align: center;
-  margin-top:20px;
-  margin-bottom:20px;
-}
-
-p {
-	margin-bottom:20px;
-}
-
-.login-content .btn {
-	font-size: 14px;
-	margin-top: 45px;
-}
-
-.page-card {
-  max-width: 360px;
-  padding: 15px;
-  margin: 70px auto;
-  border: 1px solid #d1d8dd;
-  border-radius: 4px;
-  background-color: #fff;
-  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
-}
-.page-card .page-card-head {
-  padding: 10px 15px;
-  margin: -15px;
-  margin-bottom: 15px;
-  border-bottom: 1px solid #d1d8dd;
-}
-.page-card .page-card-head .indicator {
-  color: #36414C;
-  font-size: 14px;
-}
-.page-card .page-card-head .indicator::before {
-  margin: 0 6px 0.5px 0px;
-}
-.page-card .btn {
-  margin-top: 30px;
-}
-
-.bordered {
-	border: 1px solid  #d1d8dd;
-	padding: 10px;
-	border-radius: 4px;
-}
-
-.toggle-password {
-  right: 9px;
-  top: 9px;
-  position: absolute;
-  z-index: 2;
-  cursor: pointer;
-  font-size: 12px;
-}
-
-.invalid-login {
-   -webkit-animation: wiggle 0.5s linear;
-}
-
-@-webkit-keyframes wiggle {
-  8%,
-  41% {
-    -webkit-transform: translateX(-10px);
-  }
-  25%,
-  58% {
-    -webkit-transform: translateX(10px);
-  }
-  75% {
-    -webkit-transform: translateX(-5px);
-  }
-  92% {
-    -webkit-transform: translateX(5px);
-  }
-  0%,
-  100% {
-    -webkit-transform: translateX(0);
-  }
-}
-

frappe/tests/test_website.py

@@ -9,6 +9,7 @@ from frappe.utils import set_request
 
 
 class TestWebsite(unittest.TestCase):
+
 	def test_home_page_for_role(self):
 		frappe.delete_doc_if_exists('User', 'test-user-for-home-page@example.com')
 		frappe.delete_doc_if_exists('Role', 'home-page-test')
@@ -42,8 +43,6 @@ class TestWebsite(unittest.TestCase):
 		frappe.cache().hdel('home_page', frappe.session.user)
 		self.assertEqual(get_home_page(), 'test-portal-home')
 
-
-
 	def test_page_load(self):
 		frappe.set_user('Guest')
 		set_request(method='POST', path='login')
@@ -53,7 +52,6 @@ class TestWebsite(unittest.TestCase):
 
 		html = frappe.safe_decode(response.get_data())
 
-		self.assertTrue('/* login-css */' in html)
 		self.assertTrue('// login.js' in html)
 		self.assertTrue('<!-- login.html -->' in html)
 		frappe.set_user('Administrator')

frappe/www/login.html

@@ -1,11 +1,5 @@
 {% extends "templates/web.html" %}
 
-{% block style %}
-<style>
-	{% include "templates/includes/login/login.css" %}
-</style>
-{% endblock %}
-
 {% block page_content %}
 <!-- {{ for_test }} -->
 <div style='min-height: 360px'>