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 75 matching lines @@
 {
   margin: 0rem;
 }
 
 [aria-hidden="true"]
 {
   display: none !important;
 }
 
 input[type="text"],
+input[type="url"],
 textarea,
 main
 {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 
 /*
   Buttons and links
@@ skipping 164 matching lines @@
   background-color: #E1F2FA;
   text-align: initial;
 }
 
 button.list:hover
 {
   box-shadow: inset 0 0 0 3px #099CD0;
   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
  */
 
 #sidebar,
 #sidebar .fixed,
 [role="tablist"]
 {
   width: 13.2rem;
 }
@@ skipping 564 matching lines @@
 #all-filter-lists-table button[role="checkbox"][aria-checked="false"] + .state #state-disabled
 {
   display: inline;
 }
 
 #all-filter-lists-table
 {
   margin-bottom: 1.5rem;
 }
 
-.side-controls button
-{
-   margin: 0.8rem 0rem;
-  -moz-margin-start: auto;
-  -webkit-margin-start: auto;
-}
-
 #custom-filters h3
 {
   margin: 0rem;
 }
 
 #custom-filters-raw
 {
   width: 100%;
   height: 23.6rem;
   padding: 0.8rem 1.3rem; 
 }
 
 #custom-filters-raw:focus
 {
   outline: none;
   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;
   border: 1px solid #CDCDCD;
 }
 
 /*
   Context menu
  */
 
@@ skipping 306 matching lines @@
 {
   max-height: 50vh;
   overflow: auto;
 }
 
 .dialog-content
 {
   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
 {
   margin: 0rem;
 }
 
 [data-dialog="about"] .dialog-content
 {
   text-align: center;
 }
 
 [data-dialog="about"] button
 {
   margin: 1.5rem auto 1.8rem auto;
 }
 
 [data-dialog="about"] p
 {
   margin: 0.5rem 0rem;
 }
 
 #abp-version
 {
   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
 {
   width: 100%;
 }
 
 #dialog .section:not(:first-child)
 {
   margin-top: 24px;
@@ skipping 13 matching lines @@
 
 #dialog .url
 {
   margin-top: 10px;
   margin-bottom: 20px;
   word-wrap: break-word;
 }
 
 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,
 body:not([data-dialog="language-add"]) #dialog-body button.add,
 body:not([data-dialog="language-change"]) #dialog-body button.change,
 body:not([data-dialog="predefined"]) #dialog-title-predefined,
 body:not([data-dialog="predefined"]) #dialog-content-predefined,
 body:not([data-dialog]) #dialog
 {
   display: none;
@@ skipping 31 matching lines @@
 
 #hide-notification::after
 {
   background-color: #099DD1;
 }
 
 #hide-notification:hover::after
 {
   background-color: #5CBCE1;
 }