Merge pull request #3187 from nextcloud/inputs-scss-optimisation

Inputs.scss rewritting and optimisation

apps/files_sharing/css/authenticate.css

@@ -9,12 +9,8 @@ input[type='submit'] {
 	margin:	6px;
 }
 
-#body-login input[type='submit'] {
-	position: absolute;
-	top: 0;
-	border: none;
-}
-
 fieldset > p {
 	position: relative;
+	display: flex;
+	align-items: center;
 }

apps/files_sharing/css/public.css

@@ -107,29 +107,30 @@ thead {
 	max-width: 90%;
 }
 
+/* header buttons */
+#details {
+	display: inline-flex;
+}
+#details button,
+#details input,
+#details .button {
+	margin: 0 5px;
+	line-height: normal;
+}
+#details button:hover,
+#details input:hover,
+#details .button:hover {
+	/* No  */
+	border-color: rgba(0,0,0,0.3) !important;
+}
+
 /* within #save */
 #save .save-form {
 	position: relative;
 }
 
 #remote_address {
-	margin: 0;
-	width: 130px;
-	height: 14px;
-	padding: 6px;
-	padding-right: 24px;
-}
-
-.ie8 #remote_address {
-	padding-right: 30px;
-}
-
-#save #save-button,
-#save #save-button-confirm {
-	margin: 0 5px;
-	height: 28px;
-	padding-bottom: 4px;
-	line-height: 14px;
+	width: 200px;
 }
 
 #save-button-confirm {
@@ -137,31 +138,9 @@ thead {
 	background-color: transparent;
 	border: none;
 	margin: 2px 4px !important;
-	right: 0;
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-	filter: alpha(opacity=50);
-	opacity: .5;
-}
-
-.ie8 #save-button-confirm {
-	margin: 2px 0 !important;
-}
-
-#save-button-confirm:disabled,
-#save-button-confirm:disabled:hover,
-#save-button-confirm:disabled:focus {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
-	filter: alpha(opacity=20);
-	opacity: .2;
-	cursor: default;
-}
-
-#save-button-confirm:hover,
-#save-button-confirm:focus {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-	filter: alpha(opacity=100);
-	opacity: 1;
-	cursor: pointer;
+	right: 4px;
+	box-shadow: none;
+	height: 30px;
 }
 
 #public-upload .avatardiv {

apps/files_sharing/js/public.js

@@ -259,7 +259,7 @@ OCA.Sharing.PublicApp = {
 		$('.save-form').submit(function (event) {
 			event.preventDefault();
 
-			var remote = $(this).find('input[type="text"]').val();
+			var remote = $(this).find('input[type="email"]').val();
 			var token = $('#sharingToken').val();
 			var owner = $('#save').data('owner');
 			var ownerDisplayName = $('#save').data('owner-display-name');

apps/files_sharing/templates/public.php

@@ -58,13 +58,13 @@ $maxUploadFilesize = min($upload_max_filesize, $post_max_size);
 							  data-owner-display-name="<?php p($_['displayName']) ?>" data-owner="<?php p($_['owner']) ?>" data-name="<?php p($_['filename']) ?>">
 						<button id="save-button"><?php p($l->t('Add to your Nextcloud')) ?></button>
 						<form class="save-form hidden" action="#">
-							<input type="text" id="remote_address" placeholder="user@yourNextcloud.org"/>
+							<input type="email" id="remote_address" placeholder="user@yourNextcloud.org"/>
 							<button id="save-button-confirm" class="icon-confirm svg" disabled></button>
 						</form>
 					</span>
 					<?php } ?>
 					<a href="<?php p($_['downloadURL']); ?>" id="download" class="button">
-						<img class="svg" alt="" src="<?php print_unescaped(image_path("core", "actions/download.svg")); ?>"/>
+						<span class="icon icon-download"></span>
 						<span id="download-text"><?php p($l->t('Download'))?></span>
 					</a>
 				<?php } ?>
@@ -89,8 +89,8 @@ $maxUploadFilesize = min($upload_max_filesize, $post_max_size);
 					<div id="imgframe"></div>
 				<?php endif; ?>
 				<div class="directDownload">
-					<a href="<?php p($_['downloadURL']); ?>" id="downloadFile" class="button">
-						<img class="svg" alt="" src="<?php print_unescaped(image_path("core", "actions/download.svg")); ?>"/>
+					<a href="<?php p($_['downloadURL']); ?>" id="downloadFile" class="button primary">
+						<span class="icon icon-download"></span>
 						<?php p($l->t('Download %s', array($_['filename'])))?> (<?php p($_['fileSize']) ?>)
 					</a>
 				</div>

core/css/apps.scss

@@ -214,7 +214,8 @@ em {
 		top: 0;
 		bottom: 0;
 		font-size: 12px;
-		button, .counter {
+		button,
+		.counter {
 			width: 44px;
 			height: 44px;
 			padding-top: 12px;
@@ -258,6 +259,7 @@ em {
 		height: 100%;
 		width: 100%;
 		margin: 0;
+		box-shadow: none;
 	}
 	.app-navigation-entry-utils-menu-button {
 		button {
@@ -620,6 +622,7 @@ em {
 			height: auto;
 			margin: 0;
 			font-weight: inherit;
+			box-shadow: none;
 			/* prevent .action class to break the design */
 			&.action {
 				padding: inherit !important;

core/css/styles.scss

@@ -567,14 +567,13 @@ label.infield {
 }
 
 #pass2, input[name='personal-password-clone'] {
-	padding: .6em 2.5em .4em .4em;
-	width: 8em;
+	padding-right: 30px;
 }
 
 #personal-show + label {
 	height: 14px;
 	margin-top: -25px;
-	left: 295px;
+	left: 267px;
 	display: block;
 }
 
@@ -724,9 +723,9 @@ label.infield {
 #body-login input {
 	font-size: 20px;
 	margin: 5px;
-	padding: 11px 10px 9px;
+	padding: 10px 10px 8px;
 	&[type='text'], &[type='password'] {
-		width: 249px;
+		width: calc(100% - 10px); /* 5px margin */
 	}
 	&.login {
 		width: 269px;

core/img/actions/checkbox-checked-disabled.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M2.5 2.5h11v11h-11z" fill="#fff"/><path d="M3 2c-.554 0-1 .446-1 1v10c0 .554.446 1 1 1h10c.554 0 1-.446 1-1V3c0-.554-.446-1-1-1H3zm8.924 2.066l1.433 1.432-6.365 6.365L2.75 7.62l1.414-1.415 2.828 2.83 4.932-4.97z" fill="#969696"/></svg>

core/img/actions/checkbox-checked-white.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M3 2c-.554 0-1 .446-1 1v10c0 .554.446 1 1 1h10c.554 0 1-.446 1-1V3c0-.554-.446-1-1-1H3zm8.924 2.066l1.433 1.432-6.365 6.365L2.75 7.62l1.414-1.415 2.828 2.83 4.932-4.97z" fill="#fff"/></svg>

core/img/actions/checkbox-checked.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M2.5 2.5h11v11h-11z" fill="#fff"/><path d="M3 2c-.554 0-1 .446-1 1v10c0 .554.446 1 1 1h10c.554 0 1-.446 1-1V3c0-.554-.446-1-1-1H3zm8.924 2.066l1.433 1.432-6.365 6.365L2.75 7.62l1.414-1.415 2.828 2.83 4.932-4.97z" fill="#0082c9"/></svg>

core/img/actions/checkbox-disabled-white.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M2.5 2.5h11v11h-11z" fill="#dcdcdc"/><path d="M3 2c-.554 0-1 .446-1 1v10c0 .554.446 1 1 1h10c.554 0 1-.446 1-1V3c0-.554-.446-1-1-1H3zm0 1h10v10H3V3z" fill="#fff"/></svg>

core/img/actions/checkbox-disabled.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M2.5 2.5h11v11h-11z" fill="#dcdcdc"/><path d="M3 2c-.554 0-1 .446-1 1v10c0 .554.446 1 1 1h10c.554 0 1-.446 1-1V3c0-.554-.446-1-1-1H3zm0 1h10v10H3V3z" fill="#969696"/></svg>

core/img/actions/checkbox-mark-white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M11.924 4.066l-4.932 4.97-2.828-2.83L2.75 7.618l4.242 4.243 6.365-6.365-1.433-1.432z"/></svg>

core/img/actions/checkbox-mark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M11.924 4.066l-4.932 4.97-2.828-2.83L2.75 7.618l4.242 4.243 6.365-6.365-1.433-1.432z" fill="#fff"/></svg>

core/img/actions/checkbox-mixed-disabled.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M2.5 2.5h11v11h-11z" fill="#dcdcdc"/><path d="M3 2c-.554 0-1 .446-1 1v10c0 .554.446 1 1 1h10c.554 0 1-.446 1-1V3c0-.554-.446-1-1-1H3zm0 1h10v10H3V3z" fill="#969696"/><path d="M4 7h8v2H4z" fill="#fff"/></svg>

core/img/actions/checkbox-mixed-white.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M3 2c-.554 0-1 .446-1 1v10c0 .554.446 1 1 1h10c.554 0 1-.446 1-1V3c0-.554-.446-1-1-1H3zm1 5h8v2H4V7z" fill="#fff"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M4 7v2h8V7H4z"/></svg>

core/img/actions/checkbox-mixed.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M2.5 2.5h11v11h-11z" fill="#fff"/><path d="M3 2c-.554 0-1 .446-1 1v10c0 .554.446 1 1 1h10c.554 0 1-.446 1-1V3c0-.554-.446-1-1-1H3zm1 5h8v2H4V7z" fill="#969696"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M4 7v2h8V7H4z" fill="#fff"/></svg>

core/img/actions/checkbox-white.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M3 2c-.554 0-1 .446-1 1v10c0 .554.446 1 1 1h10c.554 0 1-.446 1-1V3c0-.554-.446-1-1-1H3zm0 1h10v10H3V3z" fill="#fff"/></svg>

core/img/actions/checkbox.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M2.5 2.5h11v11h-11z" fill="#fff"/><path d="M3 2c-.554 0-1 .446-1 1v10c0 .554.446 1 1 1h10c.554 0 1-.446 1-1V3c0-.554-.446-1-1-1H3zm0 1h10v10H3V3z" fill="#969696"/></svg>

core/img/actions/radio-checked-disabled.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13z" fill="#fff"/><path d="M8 1a7 7 0 0 0-7 7 7 7 0 0 0 7 7 7 7 0 0 0 7-7 7 7 0 0 0-7-7zm0 1a6 6 0 0 1 6 6 6 6 0 0 1-6 6 6 6 0 0 1-6-6 6 6 0 0 1 6-6zm0 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8z" fill="#969696"/></svg>

core/img/actions/radio-checked-white.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M8 1a7 7 0 0 0-7 7 7 7 0 0 0 7 7 7 7 0 0 0 7-7 7 7 0 0 0-7-7zm0 1a6 6 0 0 1 6 6 6 6 0 0 1-6 6 6 6 0 0 1-6-6 6 6 0 0 1 6-6zm0 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8z" fill="#fff"/></svg>

core/img/actions/radio-checked.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13z" fill="#fff"/><path d="M8 1a7 7 0 0 0-7 7 7 7 0 0 0 7 7 7 7 0 0 0 7-7 7 7 0 0 0-7-7zm0 1a6 6 0 0 1 6 6 6 6 0 0 1-6 6 6 6 0 0 1-6-6 6 6 0 0 1 6-6zm0 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8z" fill="#0082c9"/></svg>

core/img/actions/radio-disabled.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13z" fill="#dcdcdc"/><path d="M8 1a7 7 0 0 0-7 7 7 7 0 0 0 7 7 7 7 0 0 0 7-7 7 7 0 0 0-7-7zm0 1a6 6 0 0 1 6 6 6 6 0 0 1-6 6 6 6 0 0 1-6-6 6 6 0 0 1 6-6z" fill="#969696"/></svg>

core/img/actions/radio-white.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M8 1a7 7 0 0 0-7 7 7 7 0 0 0 7 7 7 7 0 0 0 7-7 7 7 0 0 0-7-7zm0 1a6 6 0 0 1 6 6 6 6 0 0 1-6 6 6 6 0 0 1-6-6 6 6 0 0 1 6-6z" fill="#fff"/></svg>

core/img/actions/radio.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13z" fill="#fff"/><path d="M8 1a7 7 0 0 0-7 7 7 7 0 0 0 7 7 7 7 0 0 0 7-7 7 7 0 0 0-7-7zm0 1a6 6 0 0 1 6 6 6 6 0 0 1-6 6 6 6 0 0 1-6-6 6 6 0 0 1 6-6z" fill="#969696"/></svg>

settings/css/settings.css

@@ -399,7 +399,7 @@ table.grid th, table.grid td {
 	font-weight: normal;
 }
 td.name, td.password { padding-left:.8em; }
-td.password>img,td.displayName>img, td.remove>a, td.quota>img { visibility:hidden; }
+td.password>img,td.displayName>img, td.remove>a, td.quota>img { visibility:hidden; vertical-align: middle;}
 td.password, td.quota, td.displayName { width:12em; cursor:pointer; }
 td.password>span, td.quota>span, rd.displayName>span { margin-right: 1.2em; color: #C7C7C7; }
 span.usersLastLoginTooltip { white-space: nowrap; }
@@ -804,9 +804,9 @@ span.indeterminate {
 /* PASSWORD */
 #passwordform .strengthify-wrapper {
 	position: absolute;
-	left: 186px;
-	width: 131px;
-	margin-top: -7px;
+	left: 166px;
+	width: 130px;
+	margin-top: -6px;
 }
 
 /* OPERA hack for strengthify*/