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

skin/new-options.css

Index: skin/new-options.css
===================================================================
--- a/skin/new-options.css
+++ b/skin/new-options.css
@@ -102,7 +102,6 @@
 
 button[role="checkbox"]
 {
-  vertical-align: top;
   width: 18px;
   height: 18px;
   margin-top: 0px;
@@ -359,9 +358,8 @@
 .table li
 {
   display: flex;
-  padding: 12px 0px;
-  -webkit-padding-start: 16px;
-  -moz-padding-start: 16px;
+  align-items: center;
+  padding: 12px 16px;
   border-radius: 3px;
 }
 
@@ -413,20 +411,17 @@
 .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
@@ -702,10 +697,9 @@
   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