Issue 5632 - Use checkboxes for toggling acceptable ads

skin/desktop-options.css

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-present eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ skipping 604 matching lines @@
 
 section.cols > *:last-child
 {
   flex: 3;
 }
 
 /*
   Acceptable ads
  */
 
-#acceptable-ads
+#acceptable-ads ul
 {
-  background-color: #F3F3F3;
+  position: relative;
+  padding-left: 2rem;
+  list-style: none;
 }
 
-#acceptable-ads > div
+#acceptable-ads ul li button

[ire, 2017/10/17 08:16:34]

NIT: This may not be to be so specific. `#acceptable-ads button` also works

[saroyanm, 2017/10/17 19:23:07]

Done.

[saroyanm, 2017/10/17 19:23:08]

Done.

 {
-  position: relative;
-  padding: 1.5rem;
-  padding-left: 3.3rem;
-  padding-right: 0.9rem;
-  border: 1px solid #CDCDCD;
-  border-width: 0px 1px 1px 1px;
+  position: absolute;
+  margin-top: 0.3rem;
+  left: 0rem;

[ire, 2017/10/17 08:16:34]

The checkbox is still on the left when direction is rtl

[saroyanm, 2017/10/17 19:23:07]

Done.

 }
 
-#acceptable-ads > div:first-of-type
-{
-  border-top: 1px solid #CDCDCD;
-}
-
-#acceptable-ads > div > p:last-of-type
-{
-  margin-bottom: 0rem; 
-}
-
-#acceptable-ads > div input
-{
-  position: absolute;
-  left: 0rem;
-  margin: 0.25rem 0.9rem;
-  width: 1.3rem;
-  height: 1.3rem;
-}
-
-#acceptable-ads > div label
+#acceptable-ads ul li label

[ire, 2017/10/17 08:16:34]

NIT: Same here.

Suggest: `#acceptable-ads label`

[saroyanm, 2017/10/17 19:23:07]

Done.

[saroyanm, 2017/10/17 19:23:07]

Done.

 {
   font-weight: 700;
   font-size: 1.375rem;
 }
 
 #dnt
 {
   padding: 0.8rem;
   border: 1px solid #099CD0;
 }
 
+.new

[ire, 2017/10/17 08:16:34]

In the spec, this text is uppercase. Also, it seems like there should be more
padding on the right and left

[saroyanm, 2017/10/17 19:23:07]

I used the styles that match the old design here ->
https://bitbucket.org/adblockplus/spec/src/32814c2fc398a48c0b55c1323bae5efe98...


Because seems like we will need to adjust a lot of other styles to make
consistent.Though I increased the padding a bit more.

+{
+  display: inline-block;
+  margin: 0rem 0.5rem;
+  padding: 0.3rem 0.5rem;
+  border-radius: 0.2rem;
+  background-color: #099CD0;
+  color: #FFF;
+  line-height: 100%;
+  font-size: 1rem;
+}
+
 /*
   Tables
  */
 
 ul.table,
 ul.list
 {
   list-style: none;
   margin: 0rem;
   padding: 0rem;
@@ skipping 772 matching lines @@
 
 #hide-notification::after
 {
   background-color: #099DD1;
 }
 
 #hide-notification:hover::after
 {
   background-color: #5CBCE1;
 }