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 = ;
+ return ;
} else if(type == "textarea") {
element =
} else {
element =
}
- return element;
+ return (
+
+
{props.children}
);
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 {
-
+
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;}
+}