Issue 4633 - Default form styles

scss/_button-links.scss

Index: scss/_button-links.scss
===================================================================
new file mode 100644
--- /dev/null
+++ b/scss/_button-links.scss
@@ -0,0 +1,59 @@
+/*!
+ * This file is part of website-defaults
+ * Copyright (C) 2016 Eyeo GmbH
+ *
+ * website-defaults is free software: you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * website-defaults is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with website-defaults.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/*******************************************************************************
+ * Button links

[juliandoucette, 2017/01/10 13:40:26]

TODO:

- change to button.scss (move native button styles here)
- rename .button and .submit to .primary-button .secondary-button
  - name may change

+ ******************************************************************************/
+
+.button,
+.button:visited
+{
+  display: inline-block;
+  padding: 0em 0.5em;
+  border: 1px solid $primary;
+  color: $primary;
+  background-color: $primary-light;
+  line-height: 2em;

[saroyanm, 2016/12/06 18:26:53]

Detail: I think we decided to use line-heights without units.

[juliandoucette, 2016/12/07 17:31:07]

Acknowledged.

I will change this.

+  cursor: pointer;
+}
+
+.button:hover,
+.button:active,
+.button:focus
+{
+  border-color: $accent;
+  color: $accent;
+  text-decoration: none;
+}
+
+.submit,

[saroyanm, 2016/12/06 18:26:53]

Weak suggrestion: I think we can move this style to the forms.scss, or maybe
whole file.

[juliandoucette, 2016/12/07 17:31:07]

Acknowledged.

Some websites may have no forms or forms on only one page. Therefore, I think
it's better to separate forms and buttons so that we can optionally include them
in separate CSS files (EG: a separate forms.css on a website with only one
form).

+.submit:visited
+{
+  border-color: $primary;
+  color: $primary-light;
+  background-color: $primary;
+}
+
+.submit:hover,
+.submit:active,
+.submit:focus
+{
+  border-color: $accent;
+  color: $primary-light;
+  background-color: $accent;
+}