From 7500de1649a5fdc8f189b04d350c499045c64a03 Mon Sep 17 00:00:00 2001
From: Dominic Masters <dominic@domsplace.com>
Date: Tue, 15 May 2018 08:43:07 +1000
Subject: [PATCH] Styling inputs

---
 public/input/Input.jsx              |  8 ++++++--
 public/input/button/ButtonGroup.jsx |  2 +-
 public/page/contact/ContactPage.jsx |  2 +-
 public/styles/index.scss            |  1 +
 public/styles/objects/_button.scss  |  2 +-
 public/styles/objects/_input.scss   | 20 +++++++++++++++++++-
 public/styles/tools/input.scss      | 17 +++++++++++++++++
 7 files changed, 46 insertions(+), 6 deletions(-)
 create mode 100644 public/styles/tools/input.scss

diff --git a/public/input/Input.jsx b/public/input/Input.jsx
index 07529a3..f6f4751 100644
--- a/public/input/Input.jsx
+++ b/public/input/Input.jsx
@@ -60,14 +60,18 @@ export default class Input extends React.Component {
 
     //First we need to switch things like submit and reset
     if(type == "submit" || type == "reset" || type == "button") {
-      element = <Button {...this.props} />;
+      return <Button {...this.props} />;
     } else if(type == "textarea") {
       element = <textarea {...this.props} className={clazzes}>{ value }</textarea>
     } else {
       element = <ElementType {...this.props} type={type} className={clazzes} />
     }
 
-    return element;
+    return (
+      <div class="o-input-wrapper">
+        { element }
+      </div>
+    )
   }
 }
 
diff --git a/public/input/button/ButtonGroup.jsx b/public/input/button/ButtonGroup.jsx
index 7267282..6d55a66 100644
--- a/public/input/button/ButtonGroup.jsx
+++ b/public/input/button/ButtonGroup.jsx
@@ -25,7 +25,7 @@ import React from 'react';
 
 export default function(props) {
   return (
-    <div {...props} class={"o-btn-group" + (props.className ? " "+props.className : "")}>
+    <div {...props} className={"o-btn-group" + (props.className ? " "+props.className : "")}>
       {props.children}
     </div>
   );
diff --git a/public/page/contact/ContactPage.jsx b/public/page/contact/ContactPage.jsx
index 169451b..7980b03 100644
--- a/public/page/contact/ContactPage.jsx
+++ b/public/page/contact/ContactPage.jsx
@@ -78,7 +78,7 @@ class ContactPage extends React.Component {
               </InputGroup>
 
               <ButtonGroup>
-                <Input type="submit" value={ Language.get("pages.contact.send") } primary />
+                <Input type="submit" value={ Language.get("pages.contact.send") } primary="true" />
                 <Input type="reset" value={ Language.get("pages.contact.reset") } />
               </ButtonGroup>
             </Form>
diff --git a/public/styles/index.scss b/public/styles/index.scss
index e1bfc6a..125ef18 100644
--- a/public/styles/index.scss
+++ b/public/styles/index.scss
@@ -32,6 +32,7 @@
 
 //Tools
 @import './tools/flex.scss';
+@import './tools/input.scss';
 @import './tools/list.scss';
 @import './tools/prefix.scss';
 
diff --git a/public/styles/objects/_button.scss b/public/styles/objects/_button.scss
index dde7b74..cad45b6 100644
--- a/public/styles/objects/_button.scss
+++ b/public/styles/objects/_button.scss
@@ -18,7 +18,7 @@ $o-btn--padding: 1em;//Base Padding size.
   position: relative;
   display: inline-block;
   cursor: pointer;
-  padding-bottom: 0.5em;
+  padding-bottom: $o-btn--padding / 2;
   overflow: hidden;
 
   &::before {
diff --git a/public/styles/objects/_input.scss b/public/styles/objects/_input.scss
index 5253e7b..d2452fa 100644
--- a/public/styles/objects/_input.scss
+++ b/public/styles/objects/_input.scss
@@ -10,14 +10,32 @@
  */
 $o-input--padding: 1em;
 
+.o-input-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+
+  border: $s-color--input-default__border;
+  border-radius: $o-input--padding / 3;
+  padding-bottom: $o-input--padding / 2;
+}
+
 .o-input {
   display: block;
   width: 100%;
   padding: $o-input--padding / 2;
   margin: 0;//For some reason textareas have a 1px margin
 
-  border: $s-color--input-default__border;
+  border-bottom: $s-color--input-default__border;
   border-radius: $o-input--padding / 3;
+
+  //Textarea
+  max-width: 100%;
+  min-width: 100%;
+
+  //Placeholder
+  @include t-placeholder() {
+  }
 }
 
 
diff --git a/public/styles/tools/input.scss b/public/styles/tools/input.scss
new file mode 100644
index 0000000..20f56a6
--- /dev/null
+++ b/public/styles/tools/input.scss
@@ -0,0 +1,17 @@
+/*
+ *  Input
+ *    Tools for various input types
+ *
+ * Dependencies:
+ *    styles/settings/colors.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/02/07
+ */
+@mixin t-placeholder() {
+  &:moz-placeholder {@content;}
+  &:ms-input-placeholder {@content;}
+  &::placeholder {@content;}
+  &::moz-placeholder {@content;}
+  &::-webkit-input-placeholder {@content;}
+}