Issue 6210 - Implement Subscription (Double-opt-in) template for newsletter

scss/_form.scss

Index: scss/_form.scss
===================================================================
new file mode 100644
--- /dev/null
+++ b/scss/_form.scss
@@ -0,0 +1,57 @@
+/*******************************************************************************
+ * Form
+ ******************************************************************************/
+
+input,
+.button
+{
+  width: 100%;
+  height: 40px;

[juliandoucette, 2017/12/21 22:06:52]

NIT: I'd prefer an em value here

[ire, 2017/12/22 10:33:26]

Done.

+  border-radius: 4px;

[juliandoucette, 2017/12/21 22:06:52]

NIT: I think rounded edges is inconsistent with adblockplus.org

(Don't delay publishing as a result, but please do point this out to the product
team and ask them to be consistent.)

[ire, 2017/12/22 10:33:26]

Could you leave a comment in the Spec about this please?

[juliandoucette, 2017/12/22 13:32:23]

Yes.

+}
+
+/* Input field
+ ******************************************************************************/
+
+input
+{
+  margin-bottom: $small-space;
+  padding: 0 $x-small-space;
+  border: 1px solid #CDCDCD;

[juliandoucette, 2017/12/21 22:06:52]

NIT: These greys are not found in the adblockplus.org styleguide

(Don't delay publishing as a result, but please do point this out to the product
team and ask them to be consistent.)

[ire, 2017/12/22 10:33:26]

This is the same grey from the adblockplusui

[juliandoucette, 2017/12/22 13:32:23]

My comment stands. I commented in the spec.

+}
+
+/* Error state
+ ******************************************************************************/
+
+.input_round_error

[saroyanm, 2017/12/21 16:07:58]

Suggestion: What about calling the classname .invalid or error?
Doesn't look like that input_round_error inherit any style, until it's a
websites module naming convention you are following using underscores.

[juliandoucette, 2017/12/21 22:06:52]

We never use underscores. Perhaps this indicates that this class is added by the
platform in some way that is out of your control?

[ire, 2017/12/22 10:33:26]

I was using the class added by the default Backclick template. But I can change
that, and will change it to .invalid

[ire, 2017/12/22 10:33:26]

See my reply above. 

[juliandoucette, 2017/12/22 13:32:23]

Acknowledged.

+{
+  border-color: $error;
+}
+
+.error-message
+{
+  display: none;
+}
+
+.input_round_error + .error-message
+{
+  display: block;
+  margin-top: -$x-small-space;
+  margin-bottom: $small-space;
+  color: $error;
+}
+
+/* Buttons
+ ******************************************************************************/
+
+.button

[saroyanm, 2017/12/21 16:07:58]

Why are we introducing new button classes, for the buttons ?
I'll suggest to not introduce them, if there is no reason for that(ex: style not
button element to look like a button)

[ire, 2017/12/22 10:33:26]

You're right, this was unnecessary. 

Done.

+{
+  border: 0;
+  text-transform: uppercase;
+}
+
+.button.secondary
+{
+  color: #fff;
+  background-color: $secondary;
+}