Merge pull request #5972 from nextcloud/replace-loading-icon-gif-with-pure-css-in-login-button

Replace loading icon GIF with pure CSS in login button

2 files changed, 45 insertions, 0 deletions

diff --git a/core/css/guest.css b/core/css/guest.css
index e65f0a5de01..56f8c728d00 100644
--- a/core/css/guest.css
+++ b/core/css/guest.css
@@ -131,6 +131,28 @@ form #datadirField legend {
 }
 
 /* Buttons and input */
+#submit-wrapper {
+	position: relative; /* Make the wrapper the containing block of its
+						   absolutely positioned descendant icons */
+}
+#submit-wrapper .icon-confirm-white {
+	position: absolute;
+	top: 23px;
+	right: 23px;
+}
+#submit-wrapper .icon-loading-small {
+	position: absolute;
+	top: 22px;
+	right: 24px;
+}
+
+#submit-wrapper #submit-icon {
+	pointer-events: none; /* The submit icon is positioned on the submit button.
+							 From the user point of view the icon is part of the
+							 button, so the clicks on the icon have to be
+							 applied to the button instead. */
+}
+
 input, textarea, select, button {
 	font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
 }
diff --git a/core/css/styles.scss b/core/css/styles.scss
index f2acca38e1e..667ca0dc2be 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -754,6 +754,29 @@ label.infield {
 
 /* Log in and install button */
 
+#body-login #submit-wrapper {
+	position: relative; /* Make the wrapper the containing block of its
+						   absolutely positioned descendant icons */
+
+	.icon-confirm-white {
+		position: absolute;
+		top: 23px;
+		right: 23px;
+	}
+	.icon-loading-small {
+		position: absolute;
+		top: 22px;
+		right: 24px;
+	}
+
+	#submit-icon {
+		pointer-events: none; /* The submit icon is positioned on the submit
+								 button. From the user point of view the icon is
+								 part of the button, so the clicks on the icon
+								 have to be applied to the button instead. */
+	}
+}
+
 #body-login input {
 	font-size: 20px;
 	margin: 5px;