Fix checkboxes

Author: Brawl345

manifest.json

@@ -4,7 +4,7 @@
 	"name": "__MSG_extensionName__",
 	"description": "__MSG_extensionDescription__",
 	"author": "Andreas Bielawski",
-	"version": "3.4.2",
+	"version": "3.4.3",
 	"icons": {
 		"16": "icons/16.png",
 		"32": "icons/32.png",

options/options.css

@@ -13,10 +13,6 @@ body {
 	margin-right: 0;
 }
 
-.custom-control-indicator {
-	background-color: #fff;
-}
-
 #searchProviderList > div {
 	margin-bottom: 0.4rem;
 }
@@ -61,3 +57,7 @@ body {
 #searchProviderList .sp-url:invalid + .sp-status .text-success {
 	display: none;
 }
+
+.input-group-text input[type="checkbox"], .input-group-text input[type="radio"] {
+	margin-top: revert;
+}

options/options.html

@@ -23,8 +23,7 @@
 			<label for="openInBackground" class="col-sm-3" id="openInBackgroundLabel">{{i18n.openInBackgroundLabel}}</label>
 			<div class="col-sm-9">
 				<label class="form-check-label custom-control custom-checkbox">
-					<input class="form-check-input custom-control-input" type="checkbox" id="openInBackground" />
-					<span class="custom-control-indicator"></span>
+					<input class="form-check-input" type="checkbox" id="openInBackground" />
 				</label>
 			</div>
 		</div>
@@ -34,8 +33,7 @@
 			<label for="openAllByDefault" class="col-sm-3" id="openAllByDefaultLabel">{{i18n.openAllByDefaultLabel}}</label>
 			<div class="col-sm-9">
 				<label class="form-check-label custom-control custom-checkbox">
-					<input class="form-check-input custom-control-input" type="checkbox" id="openAllByDefault" />
-					<span class="custom-control-indicator"></span>
+					<input class="form-check-input" type="checkbox" id="openAllByDefault" />
 				</label>
 			</div>
 		</div>

options/options.js

@@ -54,33 +54,46 @@ function validateSpUrl(url, index) {
 }
 
 function createSpRemoveElement() {
-	// <a class="sp-remove input-group-addon">
-	//   <i class="fa fa-trash" aria-hidden="true"></i>
+	// <a class="sp-remove input-group-append">
+	// 	<div class="input-group-text">
+	//  	<i class="fa fa-trash" aria-hidden="true"></i>
+	// 	</div>
 	// </a>
 	const a = $el('a');
-	a.classList.add('sp-remove', 'input-group-addon');
+	a.classList.add('sp-remove', 'input-group-append');
+	const div = $el('div');
+	div.classList.add('input-group-text');
+	a.appendChild(div);
+
     i = document.createElement('i');
     i.classList.add('fa', 'fa-trash');
     i.setAttribute('aria-hidden', 'true');
-    a.appendChild(i);
+    div.appendChild(i);
 	return a;
 }
 
 function createSpStatusElement() {
-	// <a class="sp-status input-group-addon">
+	// <a class="sp-status input-group-append">
+	// <div class="input-group-text">
 	//   <i class="fa fa-check text-success" aria-hidden="true"></i>
 	//   <i class="fa fa-times text-danger" aria-hidden="true"></i>
+	// </div>
 	// </a>
 	const a = $el('a');
 	a.classList.add('sp-status', 'input-group-addon');
+	const div = $el('div');
+	div.classList.add('input-group-text');
+
+	a.appendChild(div);
+
     i = document.createElement('i');
     i.classList.add('fa', 'fa-check', 'text-success');
     i.setAttribute('aria-hidden', 'true');
-    a.appendChild(i);
+		div.appendChild(i);
     i = document.createElement('i');
     i.classList.add('fa', 'fa-times', 'text-danger');
     i.setAttribute('aria-hidden', 'true');
-    a.appendChild(i);
+		div.appendChild(i);
 	return a;
 }
 
@@ -107,16 +120,22 @@ function createSpNameElement(text) {
 }
 
 function createSpIconElement(src) {
-	// <span class="sp-icon input-group-addon">
+	// <span class="sp-icon input-group-prepend">
+	// <div class="input-group-text">
 	//   <img src=""/>
+	// </div>
 	// </span>
 	const span = $el('span');
-	span.classList.add('sp-icon', 'input-group-addon');
+	span.classList.add('sp-icon', 'input-group-prepend');
+
+	const div = $el('div');
+	div.classList.add('input-group-text');
 
 	const iconImg = new Image();
 	iconImg.src = chrome.extension.getURL(src);
 
-	span.appendChild(iconImg);
+	div.appendChild(iconImg);
+	span.appendChild(div);
 
 	const msgIconUploadNotImage = chrome.i18n.getMessage('msgIconUploadNotImage');
 	const msgIconUploadNotSquareImage = chrome.i18n.getMessage('msgIconUploadNotSquareImage');
@@ -185,28 +204,30 @@ function createSpIconElement(src) {
 }
 
 function createSpCheckboxElement(selected) {
-	// <span class="sp-selected input-group-addon form-check">
-	//   <label class="form-check-label custom-control custom-checkbox">
-	//     <input class="form-check-input custom-control-input" type="checkbox" />
-	//     <span class="custom-control-indicator" />
+	// <span class="sp-selected input-group-prepend form-check">
+	// <div class="input-group-text">
+	//   <label class="form-check-label custom-control">
+	//     <input class="form-check-input" type="checkbox" />
 	//   </label>
+	// </div>
 	// </span>
 	const span = $el('span');
-    span.classList.add('sp-selected', 'input-group-addon', 'form-check');
+    span.classList.add('sp-selected', 'input-group-prepend', 'form-check');
+
+		const div = $el('div');
+		div.classList.add('input-group-text');
+
+		span.appendChild(div);
 
     label = document.createElement('label');
-    label.classList.add('form-check-label', 'custom-control', 'custom-checkbox');
-    span.appendChild(label);
+    label.classList.add('form-check-label', 'custom-control');
+    div.appendChild(label);
 
     input = document.createElement('input');
-    input.classList.add('form-check-input', 'custom-control-input');
+    input.classList.add('form-check-input');
     input.setAttribute('type', 'checkbox');
     if (selected) {input.checked = true;} else {input.checked = false;}
     label.appendChild(input);
-
-    spancci = document.createElement('span');
-    spancci.classList.add('custom-control-indicator');
-    label.appendChild(spancci);
 	return span;
 }