Styling inputs

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