issue 3741 - Add "remove" option to list items in new options page

skin/new-options.css

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-2016 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 84 matching lines @@
 input[type="search"],
 textarea
 {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 
 button[role="checkbox"]
 {
-  vertical-align: top;
   width: 18px;
   height: 18px;
   margin-top: 0px;
   -moz-margin-end: 20px;
   -webkit-margin-end: 20px;
   padding: 0px;
   border: none;
   background-color: transparent;
   background-position: -51px 0px;
 }
@@ skipping 236 matching lines @@
 {
   list-style: none;
   margin: 0px;
   padding: 0px;
   position: relative;
 }
 
 .table li
 {
   display: flex;
-  padding: 12px 0px;
-  -webkit-padding-start: 16px;
-  -moz-padding-start: 16px;
+  align-items: center;
+  padding: 12px 16px;
   border-radius: 3px;
 }
 
 .table.list,
 #custom-wrapper
 {
   border-bottom: 1px solid #CDCDCD;
 }
 
 .table.list li .display
@@ skipping 31 matching lines @@
 
 button[disabled="true"]
 {
   border-radius: 2px;
   background-color: #ccc;
 }
 
 .table button.delete
 {
   background-color: transparent;
-  background-position: -10px -33px;
+  background-position: -50px -52px;
   border: 0px;
-  margin-top: 5px;
-  -moz-margin-end: 20px;
-  -webkit-margin-end: 20px;
+  height: 10px;

[Thomas Greiner, 2016/05/23 12:43:26]

These dimensions are being overridden by a rule below which causes the "x"
buttons to be 8x8 instead of 10x10 which is more accurate to how they're shown
in the design mockup.

Note that the icons in the sprite need to be adapted too.

[saroyanm, 2016/06/08 15:21:07]

Done.

   padding: 0px;
+  cursor: pointer;
+  width: 10px;
 }
 
-.table .popular
+.table button.delete:hover
 {
-  color: #1E8728;
-  font-size: 12px;
-  -moz-padding-end: 12px;
-  -webkit-padding-end: 12px;
+  background-position: -59px -52px;
 }
 
 .tabs.horizontal
 {
   display: flex;
   margin-top: 0px;
   margin-bottom: 0px;
   padding: 0px;
   border-bottom: 1px solid #CDCDCD;
 }
@@ skipping 255 matching lines @@
 
 body[data-tab="advanced-allFilterLists"] #content-advanced [data-tab="advanced-allFilterLists"],
 body[data-tab="advanced-customFilters"] #content-advanced [data-tab="advanced-customFilters"]
 {
   border-bottom: 2px solid #1E8728;
   padding-bottom: 10px;
   color: black;
   font-weight: 600;
 }
 
-#all-filter-lists .table li
+#all-filter-lists .table
 {
-  padding-left: 16px;
-  padding-right: 16px;
+  display: inline-block;
 }
 
 #all-filter-lists .table li > div
 {
   display: flex;
   width: 330px;
 }
 
 .table-header
 {
@@ skipping 606 matching lines @@
 #other-language .button-add::before
 {
   display: none;
 }
 
 #other-language .display
 {
   -webkit-margin-start: 10px;
   -moz-margin-start: 10px;
 }