Merge pull request #19329 from owncloud/checkbox-class

Add .checkbox class for new checkbox style

7 files changed, 21 insertions, 21 deletions

diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 4b1b38d783c..ad3dce19778 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -925,7 +925,7 @@
 			if (this._allowSelection) {
 				td.append(
 					'<input id="select-' + this.id + '-' + fileData.id +
-					'" type="checkbox" class="selectCheckBox"/><label for="select-' + this.id + '-' + fileData.id + '">' +
+					'" type="checkbox" class="selectCheckBox checkbox"/><label for="select-' + this.id + '-' + fileData.id + '">' +
 					'<div class="thumbnail" style="background-image:url(' + icon + '); background-size: 32px;"></div>' +
 					'<span class="hidden-visually">' + t('files', 'Select') + '</span>' +
 					'</label>'
diff --git a/apps/files/templates/fileexists.html b/apps/files/templates/fileexists.html
index c783f9a05c7..e3513237d2b 100644
--- a/apps/files/templates/fileexists.html
+++ b/apps/files/templates/fileexists.html
@@ -3,14 +3,14 @@
 	<span class="what">{what}<!-- If you select both versions, the copied file will have a number added to its name. --></span><br/>
 	<br/>
 	<table>
-		<th><input id="checkbox-allnewfiles" class="allnewfiles" type="checkbox" /><label for="checkbox-allnewfiles">{allnewfiles}<span class="count"></span></label></th>
-		<th><input id="checkbox-allexistingfiles" class="allexistingfiles" type="checkbox" /><label for="checkbox-allexistingfiles">{allexistingfiles}<span class="count"></span></label></th>
+		<th><input id="checkbox-allnewfiles" class="allnewfiles checkbox" type="checkbox" /><label for="checkbox-allnewfiles">{allnewfiles}<span class="count"></span></label></th>
+		<th><input id="checkbox-allexistingfiles" class="allexistingfiles checkbox" type="checkbox" /><label for="checkbox-allexistingfiles">{allexistingfiles}<span class="count"></span></label></th>
 	</table>
 	<div class="conflicts">
 		<div class="template">
 			<div class="filename"></div>
 			<div class="replacement">
-				<input type="checkbox" class="u-left"/>
+				<input type="checkbox" class="checkbox u-left"/>
 				<label>
 				<span class="svg icon"></span>
 				<div class="mtime"></div>
@@ -18,7 +18,7 @@
 				</label>
 			</div>
 			<div class="original">
-				<input type="checkbox" class="u-left" />
+				<input type="checkbox" class="checkbox u-left" />
 				<label>
 				<span class="svg icon"></span>
 				<div class="mtime"></div>
diff --git a/apps/files/templates/list.php b/apps/files/templates/list.php
index 15af1970dc3..bbbce8473de 100644
--- a/apps/files/templates/list.php
+++ b/apps/files/templates/list.php
@@ -56,7 +56,7 @@
 		<tr>
 			<th id='headerName' class="hidden column-name">
 				<div id="headerName-container">
-					<input type="checkbox" id="select_all_files" class="select-all"/>
+					<input type="checkbox" id="select_all_files" class="select-all checkbox"/>
 					<label for="select_all_files">
 						<span class="hidden-visually"><?php p($l->t('Select all'))?></span>
 					</label>
diff --git a/core/css/fixes.css b/core/css/fixes.css
index e5dbeb137ab..7ef44ba6909 100644
--- a/core/css/fixes.css
+++ b/core/css/fixes.css
@@ -115,8 +115,3 @@ select {
 	line-height: 38px;
 }
 
-.lte8 input[type="checkbox"] + label:before { background-image: url('../img/actions/checkbox.png'); }
-.lte8 input[type="checkbox"].white + label:before { background-image: url('../img/actions/checkbox-white.png'); }
-.lte8 input[type="checkbox"]:checked + label:before { background-image: url('../img/actions/checkbox-checked.png'); }
-.lte8 input[type="checkbox"].white:checked + label:before { background-image: url('../img/actions/checkbox-checked-white.png'); }
-
diff --git a/core/css/styles.css b/core/css/styles.css
index aefc0ff755a..d952a33c24a 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -158,7 +158,9 @@ textarea:hover, textarea:focus, textarea:active {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 	opacity: 1;
 }
-input[type="checkbox"] {
+
+/* ie8 doesn't support :checked */
+html:not(.ie8) input[type="checkbox"].checkbox {
 	margin:0;
 	padding:0;
 	height:auto;
@@ -166,7 +168,7 @@ input[type="checkbox"] {
 	display: none;
 }
 
-input[type="checkbox"] + label:before {
+html:not(.ie8) input[type="checkbox"].checkbox + label:before {
 	content: "";
 	display: inline-block;
 
@@ -174,27 +176,27 @@ input[type="checkbox"] + label:before {
 	width: 20px;
 	vertical-align: middle;
 
-	background: url('../img/actions/checkbox.svg') left center no-repeat;
+	background: url('../img/actions/checkbox.svg') left top no-repeat;
 	opacity: 0.7;
 }
 
-input[type="checkbox"]:disabled +label:before { opacity: .6; }
+html:not(.ie8) input[type="checkbox"].checkbox:disabled +label:before { opacity: .6; }
 
-input[type="checkbox"].u-left +label:before { float: left; }
+html:not(.ie8) input[type="checkbox"].checkbox.u-left +label:before { float: left; }
 
-input[type="checkbox"].white + label:before {
+html:not(.ie8) input[type="checkbox"].checkbox--white + label:before {
 	background-image: url('../img/actions/checkbox-white.svg');
 }
 
-input[type="checkbox"]:checked + label:before {
+html:not(.ie8) input[type="checkbox"].checkbox:checked + label:before {
 	background-image: url('../img/actions/checkbox-checked.svg');
 }
 
-input[type="checkbox"].white:checked + label:before {
+html:not(.ie8) input[type="checkbox"].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 {
+html:not(.ie8) input[type="checkbox"].checkbox:hover+label:before, input[type="checkbox"]:focus+label:before {
 	color:#111 !important;
 }
 
diff --git a/core/js/multiselect.js b/core/js/multiselect.js
index 41dc68ac051..6d5c54ac0f5 100644
--- a/core/js/multiselect.js
+++ b/core/js/multiselect.js
@@ -109,6 +109,9 @@
 				var id='ms'+multiSelectId+'-option-'+item;
 				var input=$('<input type="' + inputType + '"/>');
 				input.attr('id',id);
+				if(inputType === 'checkbox') {
+					input.addClass('checkbox');
+				}
 				if(settings.singleSelect) {
 					input.attr('name', 'ms'+multiSelectId+'-option');
 				}
diff --git a/core/templates/login.php b/core/templates/login.php
index 2057b1034d0..db77f63bbd0 100644
--- a/core/templates/login.php
+++ b/core/templates/login.php
@@ -65,7 +65,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" class="white">
+			<input type="checkbox" name="remember_login" value="1" id="remember_login" class="checkbox checkbox--white">
 			<label for="remember_login"><?php p($l->t('remember')); ?></label>
 		</div>
 		<?php endif; ?>