Issue 5706 - Finish custom filter list dialog

skin/new-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 260 matching lines @@
   background-color: #E1F2FA;
   text-align: initial;
 }
 
 button.list:hover
 {
   box-shadow: inset 0 0 0 3px #099CD0;
   border-color: #099CD0;
 }
 
+.side-controls:not(.wrap)
+{
+  margin: 0.8rem 0rem;
+  display: flex;
+  justify-content: flex-end;
+}
+
 .side-controls button

[saroyanm, 2017/09/19 18:53:02]

Note: Now we have controls that are pushed to the end in multiple places, for
that reason I've created .side-controls class to push controls and nowrap to
make them being align on same line.

[ire, 2017/09/20 14:53:13]

Acknowledged.

+{
+  margin: 0rem;
+  -moz-margin-start: 1rem;
+  -webkit-margin-start: 1rem;
+}
+
+.side-controls.wrap button
 {
   margin: 0.8rem 0rem;
   -moz-margin-start: auto;
   -webkit-margin-start: auto;
-}
-
-.side-controls.nowrap
-{
-  margin: 0.8rem 0rem;
-  display: flex;
-  justify-content: flex-end;
-}
-
-.side-controls.nowrap button
-{
-  margin: 0rem;
-  -moz-margin-start: 1rem;
-  -webkit-margin-start: 1rem;
 }
 
 /*
   Forms
  */
 
 .floating-input
 {
   position: relative;
   padding-top: 0.7rem;
@@ skipping 64 matching lines @@
 [data-validation] .floating-input input:focus:invalid ~ .attention::before
 {
   background-color: #C11D27;
   -webkit-mask: url(icons/attention.svg);
   mask: url(icons/attention.svg);
 }
 
 [data-validation] .floating-input input:focus:valid ~ .attention::before
 {
   top: 0.8rem;
   background-color: green;

[saroyanm, 2017/09/19 18:53:02]

We don't have green color yet, see ->
https://bitbucket.org/adblockplus/spec/issues/79/valid-icon-is-missing

[ire, 2017/09/20 14:53:13]

Acknowledged.

   -webkit-mask: url(icons/checkmark.svg);
   mask: url(icons/checkmark.svg);
 }
 
 [data-validation] .floating-input input ~ .error-msg
 {
   margin-top: 0.5rem;
   color: #C11D27;
   display: block;
   visibility: hidden;
@@ skipping 1040 matching lines @@
 
 #hide-notification::after
 {
   background-color: #099DD1;
 }
 
 #hide-notification:hover::after
 {
   background-color: #5CBCE1;
 }