Issue 4633 - Default form styles

scss/_forms.scss

Index: scss/_forms.scss
===================================================================
new file mode 100644
--- /dev/null
+++ b/scss/_forms.scss
@@ -0,0 +1,141 @@
+/*******************************************************************************

[juliandoucette, 2017/08/09 13:23:57]

Missing license header.

Note: I'm not sure that we need license headers in these files based on Kai's
feedback.

[ire, 2017/08/09 17:04:03]

Acknowledged. Will add it in the next patch.

+ * Forms
+ *******************************************************************************
+ * 1. Reset
+ ******************************************************************************/
+
+/* 1. Reset

[juliandoucette, 2017/08/09 13:23:57]

Where did you get these reset styles from?

[ire, 2017/08/09 17:04:03]

A combination of:

- Normalize.css
- Your last codereview
- My own research

[juliandoucette, 2017/08/09 20:00:11]

Acknowledged.

Thanks!

Note: We should probably credit normalize.css somewhere.

+ ******************************************************************************/
+
+button,
+input,
+optgroup,
+select,
+textarea
+{
+  box-sizing: border-box;
+  margin: 0px;
+  font: inherit;
+}
+
+/**
+ * Show the overflow in IE and Edge
+ */
+
+button,
+input
+{
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ */
+
+button,
+select
+{
+  text-transform: none;
+}
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+html [type="button"],
+[type="reset"],
+[type="submit"]
+{
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner
+{
+  padding: 0px;
+  border-style: none;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring
+{
+  outline: 1px dotted ButtonText;
+}
+
+fieldset,
+legend
+{
+  display: block;
+  margin: 0px;
+  padding: 0px;
+  border: 0px;
+}
+
+textarea
+{
+  overflow: auto;
+}
+
+[type="checkbox"],
+[type="radio"]
+{
+  padding: 0px;
+}
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button
+{
+  height: auto;
+}
+
+[type="date"],
+[type="time"],
+[type="datetime"],
+[type="datetime-local"],
+[type="month"],
+[type="week"]
+{
+  -webkit-appearance: none;
+}
+
+/**
+ * Use `-webkit-appearance: none` to reset search input in iOS Safari
+ */
+
+[type="search"]
+{
+  -webkit-appearance: none;
+  outline-offset: -2px;
+}
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration
+{
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button
+{
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+[hidden]

[juliandoucette, 2017/08/09 13:23:57]

I think this applies to non-forms too no?

[ire, 2017/08/09 17:04:03]

Yes you're right. I guess they may be more commonly used with forms, but can be
applied to every element. I will remove them from here and we can add it to a
different file in a separate commit.

+{
+  display: none;
+}