Issue 5706 - Finish custom filter list dialog

skin/new-options.css

Index: skin/new-options.css
===================================================================
--- a/skin/new-options.css
+++ b/skin/new-options.css
@@ -93,6 +93,7 @@
 }
 
 input[type="text"],
+input[type="url"],
 textarea,
 main
 {
@@ -277,6 +278,127 @@
   border-color: #099CD0;
 }
 
+.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: 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;
+  margin: 1.8rem 0rem 0.5rem 0rem;
+}
+
+.floating-input input
+{
+  border-color: #CDCDCD;
+  border-width: 0px 0px 1px 0px;
+  outline: none;
+  font-size: 1.3rem;
+  padding: 5px;
+  width: 100%;
+}
+
+.floating-input input:placeholder-shown ~ label,
+.floating-input input + label,
+.floating-input input:focus + label
+{
+  position: absolute;
+  top: 0.9rem;
+  left: 0.3rem;
+  font-size: 1.3rem;
+}
+
+.floating-input input + label,
+.floating-input input:focus + label
+{
+  top: -0.5rem;
+  font-size: 0.9rem;
+}
+
+html[dir="rtl"] .floating-input input:placeholder-shown ~ label,
+html[dir="rtl"] .floating-input input ~ label,
+html[dir="rtl"] .floating-input input:focus ~ label
+{
+  right: 0.3rem;
+  left: auto;
+}
+
+[data-validation] .floating-input input:focus:invalid
+{
+  border-color: #C11D27;
+}
+
+[data-validation] .floating-input input:focus:invalid ~ .attention::before,
+[data-validation] .floating-input input:focus:valid ~ .attention::before
+{
+  content: "";
+  position: absolute;
+  display: block;
+  margin: 0.5rem;
+  height: 1.5rem;
+  width: 1.5rem;
+  border: 0rem;
+  top: 0.5rem;
+  right: 0rem;
+}
+
+html[dir="rtl"] [data-validation] .floating-input input:focus:invalid ~ .attention::before,
+html[dir="rtl"] [data-validation] .floating-input input:focus:valid ~ .attention::before
+{
+  left: 0rem;
+  right: auto;
+}
+
+[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;
+}
+
+[data-validation] .floating-input input:focus:invalid ~ .error-msg
+{
+  visibility: visible;
+}
+
 /*
   Sidebar
  */
@@ -861,13 +983,6 @@
   margin-bottom: 1.5rem;
 }
 
-.side-controls button
-{
-   margin: 0.8rem 0rem;
-  -moz-margin-start: auto;
-  -webkit-margin-start: auto;
-}
-
 #custom-filters h3
 {
   margin: 0rem;
@@ -886,18 +1001,6 @@
   border: 2px solid #099CD0;
 }
 
-#custom-filters-raw-controls
-{
-  display: flex;
-  justify-content: flex-end;
-}
-
-#custom-filters-raw-controls button
-{
-  -moz-margin-start: 1rem;
-  -webkit-margin-start: 1rem;
-}
-
 #empty-custom-filters
 {
   padding: 1.5rem;
@@ -1224,12 +1327,6 @@
   margin: 1rem 1.8rem;
 }
 
-#dialog-body button
-{
-  -moz-margin-start: auto;
-  -webkit-margin-start: auto;
-}
-
 [data-dialog="language-change"] .dialog-content,
 [data-dialog="language-add"] .dialog-content
 {
@@ -1256,19 +1353,9 @@
   margin-bottom: 2rem;
 }
 
-#dialog label
+[data-dialog="import"] .side-controls
 {
-  font-size: 0.9rem;
-  margin: 0px;
-}
-
-#dialog input[type="text"]
-{
-  border-color: #CDCDCD;
-  border-width: 0px 0px 1px 0px;
-  font-size: 1.3rem;
-  padding: 5px;
-  width: 100%;
+  margin-top: 2.45rem;
 }
 
 #dialog .table
@@ -1302,8 +1389,8 @@
 
 body:not([data-dialog="about"]) #dialog-title-about,
 body:not([data-dialog="about"]) #dialog-content-about,
-body:not([data-dialog="custom"]) #dialog-title-custom,
-body:not([data-dialog="custom"]) #dialog-content-custom,
+body:not([data-dialog="import"]) #dialog-title-import,
+body:not([data-dialog="import"]) #dialog-content-import,
 body:not([data-dialog="language-add"]) #dialog-title-language-add,
 body:not([data-dialog="language-change"]) #dialog-title-language-change,
 body:not([data-dialog="language-add"]):not([data-dialog="language-change"]) #dialog-content-language-add,