From b008d163e7832109de9c006f6ede16f7d798f9cb Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Tue, 18 Sep 2018 21:45:30 +0100
Subject: [PATCH] Add login and register styles.

---
 .../stylesheets/_ol_style_includes.less       |   1 +
 .../stylesheets/app/login-register.less       | 152 ++++++++++++++++++
 .../stylesheets/core/_common-variables.less   |   1 -
 .../public/stylesheets/core/ol-variables.less |   1 +
 4 files changed, 154 insertions(+), 1 deletion(-)
 create mode 100644 services/web/public/stylesheets/app/login-register.less

diff --git a/services/web/public/stylesheets/_ol_style_includes.less b/services/web/public/stylesheets/_ol_style_includes.less
index c55729976d..a96bc34d95 100644
--- a/services/web/public/stylesheets/_ol_style_includes.less
+++ b/services/web/public/stylesheets/_ol_style_includes.less
@@ -2,3 +2,4 @@
 @import "app/front-chat-widget.less";
 @import "app/ol-chat.less";
 @import "app/templates-v2.less";
+@import "app/login-register.less";
diff --git a/services/web/public/stylesheets/app/login-register.less b/services/web/public/stylesheets/app/login-register.less
new file mode 100644
index 0000000000..be37bf3724
--- /dev/null
+++ b/services/web/public/stylesheets/app/login-register.less
@@ -0,0 +1,152 @@
+@brand-ieee-color       : #00629B;
+@brand-google-color     : #4885ED;
+@brand-twitter-color    : #1DA1F2;
+@brand-orcid-color      : #A6CE39;
+@brand-sharelatex-color : #A93529;
+
+.make-login-register-brand-btn(@color) {
+	background-color: @color;
+	text-indent: -10px;
+	&:focus,
+	&:hover {
+		background-color: darken(@color, 8%);
+	}
+	&:active {
+		background-color: darken(@color, 16%);
+	} 
+}
+
+.login-register-container {
+	max-width: 400px;
+	margin: 0 auto;
+}
+	.login-register-header {
+		padding-top: @line-height-computed;
+		padding-bottom: @line-height-computed - 5;
+		border-bottom: solid 1px @hr-border;
+	}
+		.login-register-header-heading {
+			margin: 0;
+			color: @text-color;
+		}
+
+	.login-register-card {
+		padding-top: 0;
+		padding-bottom: 0;
+		text-align: center;
+	}
+
+		.login-register-form,
+		.login-register-sharelatex {
+			padding: @line-height-computed (@line-height-computed * 2);
+			border-bottom: solid 1px @hr-border;
+			&:last-child {
+				border-bottom-width: 0;
+			}
+		}
+		.login-register-other-links {
+			padding: @line-height-computed (@line-height-computed * 2);
+		}
+
+		.login-register-text,
+		.login-register-hr-text-container {
+			margin: 0;
+			line-height: 1;
+			font-size: 90%;
+		}
+
+		.login-register-text {
+			padding-bottom: 25px;
+			&:last-child {
+				padding-bottom: 0;
+			}
+		}
+
+		.login-register-hr-text-container {
+			position: relative;
+			padding: @line-height-computed 0;
+
+			&::before {
+				content: '';
+				position: absolute;
+				height: 1px;
+				background-color: @hr-border;
+				top: 50%;
+				left: 0;
+				right: 0;
+			}
+		}
+			.login-register-hr-text {
+				position: relative;
+				background-color: #FFF;
+				padding: 0 (@line-height-computed / 2);
+			}
+		.login-register-sharelatex-tooltip {
+			display: inline-block;
+			font-size: 135%;
+			position: relative;
+			top: 2px;
+			margin-left: 3px;
+			color: @link-color;
+			cursor: pointer;
+		}
+
+		.login-btn-ieee {
+			.make-login-register-brand-btn(@brand-ieee-color);
+		}
+
+		.login-btn-google {
+			.make-login-register-brand-btn(@brand-google-color);
+		} 
+
+		.login-btn-twitter {
+			.make-login-register-brand-btn(@brand-twitter-color);
+		} 
+
+		.login-btn-orcid {
+			.make-login-register-brand-btn(@brand-orcid-color);
+		} 
+
+		.login-btn-sharelatex {
+			.make-login-register-brand-btn(@brand-sharelatex-color);
+		} 
+			.login-btn-icon {
+				display: inline-block;
+				float: left;
+				margin-left: 5px;
+				background: url(/img/brand/lion.svg) center/contain no-repeat;
+				width: 24px;
+
+				&::before {
+					content: '\00a0'; // Non-breakable space. A non-breakable character here makes this icon work like font-awesome.
+				}
+			}
+			.login-btn-icon-ieee {
+				background-image: url(/img/other-brands/logo_ieee.svg);
+			}
+			.login-btn-icon-google {
+				background-image: url(/img/other-brands/logo_google.svg);
+			}
+			.login-btn-icon-twitter {
+				background-image: url(/img/other-brands/logo_twitter.svg);
+			}
+			.login-btn-icon-orcid {
+				background-image: url(/img/other-brands/logo_orcid.svg);
+			}
+			.login-btn-icon-sharelatex {
+				background-image: url(/img/other-brands/logo_sharelatex.svg);
+			}
+
+		.login-register-header-heading {
+			margin: 0;
+			color: @text-color;
+		}
+
+.registration-message-heading {
+	color: @text-color;	
+}
+
+.registration-message-details {
+	font-size: 90%;
+}
+
diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index 3a6c08516e..f33b62456f 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -17,7 +17,6 @@
 //** Link hover color set via `darken()` function.
 @link-hover-color:      darken(@link-color, 15%);
 
-
 //== Typography
 //
 //## Font, line-height, and color for body text, headings, and more.
diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index 2890c55976..6bf5284ad5 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -52,6 +52,7 @@
 @link-color-alt         : @ol-green;
 @link-active-color      : @ol-dark-green;
 @link-hover-color       : @ol-dark-blue;
+@hr-border              : @ol-blue-gray-1;
 
 // Button colors and sizing
 @btn-border-width        : 0;