Merge pull request #18735 from owncloud/checkbox-style

custom checkbox style

14 files changed, 68 insertions, 4 deletions

diff --git a/core/css/styles.css b/core/css/styles.css
index 9219068dc38..2ec5129a1c5 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -158,8 +158,42 @@ textarea:hover, textarea:focus, textarea:active {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 	opacity: 1;
 }
-input[type="checkbox"] { margin:0; padding:0; height:auto; width:auto; }
-input[type="checkbox"]:hover+label, input[type="checkbox"]:focus+label { color:#111 !important; }
+input[type="checkbox"] {
+	margin:0;
+	padding:0;
+	height:auto;
+	width:auto;
+	display: none;
+}
+
+input[type="checkbox"] + label:before {
+	content: "";
+	display: inline-block;
+
+	height: 20px;
+	width: 20px;
+	vertical-align: middle;
+
+	background: url('../img/actions/checkbox.svg') left center no-repeat;
+	opacity: 0.7;
+}
+
+input[type="checkbox"].white + label:before {
+	background-image: url('../img/actions/checkbox-white.svg');
+}
+
+input[type="checkbox"]:checked + label:before {
+	background-image: url('../img/actions/checkbox-checked.svg');
+}
+
+input[type="checkbox"].white:checked + label:before {
+	background-image: url('../img/actions/checkbox-checked-white.svg');
+}
+
+input[type="checkbox"]:hover+label:before, input[type="checkbox"]:focus+label:before {
+	color:#111 !important;
+}
+
 input[type="time"] {
 	width: initial;
 	height: 31px;
@@ -614,7 +648,6 @@ label.infield {
 	margin: 0;
 	padding: 14px;
 	padding-left: 28px;
-	margin-left: -28px;
 	vertical-align: middle;
 }
 #body-login form .errors { background:#fed7d7; border:1px solid #f00; list-style-indent:inside; margin:0 0 2em; padding:1em; }
@@ -673,6 +706,9 @@ label.infield {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
 	opacity: .3;
 }
+#show + label:before, #dbpassword + label:before, #personal-show + label:before {
+	display: none;
+}
 #pass2, input[name="personal-password-clone"] {
 	padding: .6em 2.5em .4em .4em;
 	width: 8em;
@@ -814,6 +850,7 @@ label.infield {
 	opacity: .7;
 }
 #body-login .remember-login-container {
+	margin-top: 10px;
 	text-align: center;
 }
 
diff --git a/core/img/actions/checkbox-checked-white.png b/core/img/actions/checkbox-checked-white.png
new file mode 100644
index 00000000000..ed8e3d3d557
--- /dev/null
+++ b/core/img/actions/checkbox-checked-white.png
diff --git a/core/img/actions/checkbox-checked-white.svg b/core/img/actions/checkbox-checked-white.svg
new file mode 100644
index 00000000000..17bfdfbe4a6
--- /dev/null
+++ b/core/img/actions/checkbox-checked-white.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16px" width="16px" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
+ <path d="m3 2c-0.554 0-1 0.446-1 1v10c0 0.554 0.446 1 1 1h10c0.554 0 1-0.446 1-1v-10c0-0.554-0.446-1-1-1h-10zm8.924 2.0664l1.433 1.4316-6.3648 6.365-4.2422-4.2439 1.4141-1.414 2.8281 2.8301 4.9318-4.9688z" fill="#fff"/>
+</svg>
diff --git a/core/img/actions/checkbox-checked.png b/core/img/actions/checkbox-checked.png
new file mode 100644
index 00000000000..a8a07193ab7
--- /dev/null
+++ b/core/img/actions/checkbox-checked.png
diff --git a/core/img/actions/checkbox-checked.svg b/core/img/actions/checkbox-checked.svg
new file mode 100644
index 00000000000..c5aa3cd73bb
--- /dev/null
+++ b/core/img/actions/checkbox-checked.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16px" width="16px" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
+ <path d="m2.5 2.5h11v11h-11z" fill="#fff"/>
+ <path fill="#55739a" d="m3 2c-0.554 0-1 0.446-1 1v10c0 0.554 0.446 1 1 1h10c0.554 0 1-0.446 1-1v-10c0-0.554-0.446-1-1-1h-10zm8.924 2.0664l1.433 1.4316-6.3648 6.365-4.2422-4.2439 1.4141-1.414 2.8281 2.8301 4.9318-4.9688z"/>
+</svg>
diff --git a/core/img/actions/checkbox-mixed-white.png b/core/img/actions/checkbox-mixed-white.png
new file mode 100644
index 00000000000..0b81f998fc5
--- /dev/null
+++ b/core/img/actions/checkbox-mixed-white.png
diff --git a/core/img/actions/checkbox-mixed-white.svg b/core/img/actions/checkbox-mixed-white.svg
new file mode 100644
index 00000000000..faae0820c8b
--- /dev/null
+++ b/core/img/actions/checkbox-mixed-white.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16px" width="16px" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
+ <path d="m3 2c-0.554 0-1 0.446-1 1v10c0 0.554 0.446 1 1 1h10c0.554 0 1-0.446 1-1v-10c0-0.554-0.446-1-1-1h-10zm1 5h8v2h-8v-2z" fill="#fff"/>
+</svg>
diff --git a/core/img/actions/checkbox-mixed.png b/core/img/actions/checkbox-mixed.png
new file mode 100644
index 00000000000..cc27ec651ea
--- /dev/null
+++ b/core/img/actions/checkbox-mixed.png
diff --git a/core/img/actions/checkbox-mixed.svg b/core/img/actions/checkbox-mixed.svg
new file mode 100644
index 00000000000..7f3642912da
--- /dev/null
+++ b/core/img/actions/checkbox-mixed.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16px" width="16px" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
+ <path d="m2.5 2.5h11v11h-11z" fill="#fff"/>
+ <path fill="#969696" d="m3 2c-0.554 0-1 0.446-1 1v10c0 0.554 0.446 1 1 1h10c0.554 0 1-0.446 1-1v-10c0-0.554-0.446-1-1-1h-10zm1 5h8v2h-8v-2z"/>
+</svg>
diff --git a/core/img/actions/checkbox-white.png b/core/img/actions/checkbox-white.png
new file mode 100644
index 00000000000..f0f903c77c6
--- /dev/null
+++ b/core/img/actions/checkbox-white.png
diff --git a/core/img/actions/checkbox-white.svg b/core/img/actions/checkbox-white.svg
new file mode 100644
index 00000000000..4325f9fb1e0
--- /dev/null
+++ b/core/img/actions/checkbox-white.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16px" width="16px" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
+ <path d="m3 2c-0.554 0-1 0.446-1 1v10c0 0.554 0.446 1 1 1h10c0.554 0 1-0.446 1-1v-10c0-0.554-0.446-1-1-1h-10zm0 1h10v10h-10v-10z" fill="#fff"/>
+</svg>
diff --git a/core/img/actions/checkbox.png b/core/img/actions/checkbox.png
new file mode 100644
index 00000000000..770b7ef8203
--- /dev/null
+++ b/core/img/actions/checkbox.png
diff --git a/core/img/actions/checkbox.svg b/core/img/actions/checkbox.svg
new file mode 100644
index 00000000000..fe8f727b899
--- /dev/null
+++ b/core/img/actions/checkbox.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16px" width="16px" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
+ <path d="m2.5 2.5h11v11h-11z" fill="#fff"/>
+ <path fill="#969696" d="m3 2c-0.554 0-1 0.446-1 1v10c0 0.554 0.446 1 1 1h10c0.554 0 1-0.446 1-1v-10c0-0.554-0.446-1-1-1h-10zm0 1h10v10h-10v-10z"/>
+</svg>
diff --git a/core/templates/login.php b/core/templates/login.php
index 513988876e1..08c7768a432 100644
--- a/core/templates/login.php
+++ b/core/templates/login.php
@@ -66,7 +66,7 @@ script('core', [
 		<?php endif; ?>
 		<?php if ($_['rememberLoginAllowed'] === true) : ?>
 		<div class="remember-login-container">
-			<input type="checkbox" name="remember_login" value="1" id="remember_login">
+			<input type="checkbox" name="remember_login" value="1" id="remember_login" class="white">
 			<label for="remember_login"><?php p($l->t('remember')); ?></label>
 		</div>
 		<?php endif; ?>