Styling inputs

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>
+    )
   }
 }
 

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>
   );

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>

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';
 

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 {

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() {
+  }
 }
 
 

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;}
+}