From 955c2ee1a7d4936aa5fc4168cb1c8bff41f7ad8b Mon Sep 17 00:00:00 2001
From: "John Molakvoæ (skjnldsv)" <skjnldsv@protonmail.com>
Date: Mon, 5 Mar 2018 17:17:10 +0100
Subject: PoC inline icon-confirm with inputs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 apps/files/js/newfilemenu.js |  2 +-
 core/css/inputs.scss         | 35 +++++++++++++++++++++++++++++++++++
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/apps/files/js/newfilemenu.js b/apps/files/js/newfilemenu.js
index 09420328f29..0b28e158fe0 100644
--- a/apps/files/js/newfilemenu.js
+++ b/apps/files/js/newfilemenu.js
@@ -28,7 +28,7 @@
 		'<form class="filenameform">' +
 		'<label class="hidden-visually" for="{{cid}}-input-{{fileType}}">{{fileName}}</label>' +
 		'<input id="{{cid}}-input-{{fileType}}" type="text" value="{{fileName}}" autocomplete="off" autocapitalize="off">' +
-		'<input type="submit" value=" " class="primary icon-checkmark-white" />'
+		'<input type="submit" value=" " class="icon-confirm" />'
 		'</form>';
 
 	/**
diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index 7b74d645481..91f74fbf1fa 100644
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@@ -212,6 +212,41 @@ select {
 	padding-right: 24px !important;
 }
 
+/* Confirm inputs */
+input {
+	&[type='text'],
+	&[type='password'],
+	&[type='email'] {
+		+ .icon-confirm {
+			margin-left: -8px !important;
+			border-left-color: transparent !important;
+			border-radius: 0 $border-radius $border-radius 0 !important;
+			background-clip: padding-box; /* Avoid background under border */
+		}
+		/* only show confirm borders if input is not focused */
+		&:not(:active):not(:hover):not(:focus){
+			+ .icon-confirm {
+				&:active,
+				&:hover,
+				&:focus {
+					border-left-color: $color-primary-element !important;
+					border-radius: $border-radius !important;
+				}
+			}
+		}
+		&:active,
+		&:hover,
+		&:focus {
+			+ .icon-confirm {
+				border-color: $color-primary-element !important;
+				border-left-color: transparent !important;
+			}
+		}
+	}
+
+}
+
+
 /* Various Fixes */
 button img,
 .button img {
-- 
cgit v1.2.3