Added input styles, merged with button styles, created different style..styles

public/styles/tools/_input.scss

@@ -0,0 +1,148 @@
+/*
+ *  Input
+ *    Tools for various input types
+ *
+ * Dependencies:
+ *    styles/settings/colors.scss
+ *    styles/settings/animation.scss
+ *    styles/tools/_box-shadow.scss
+ *    styles/tools/_transform.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;}
+}
+
+
+$t-input--style-dp__padding: 1em;
+//Basic Design
+@mixin t-input--style($top, $bottom) {
+  &::before,
+  &:active &__inner {
+    background: $bottom;
+  }
+
+  &__inner {
+    background: $top;
+  }
+}
+
+//I really hate that this has to be a mixin...
+@mixin t-input--style-dp() {
+  //Custom DomsPlace Input & Button Styling
+  position: relative;
+  display: inline-block;
+  padding-bottom: $t-input--style-dp__padding / 2;
+
+  //"Bottom" (Background)
+  &::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 50%;
+    width: 100%;
+    display: block;
+    z-index: 0;
+
+    background: $s-color--input-default__bottom;
+    border: $s-color--input-default__border;
+    border-radius: $t-input--style-dp__padding / 3;
+
+    //Background Shadow (3D effect)
+    @include t-box-shadow(
+      0,
+      $t-input--style-dp__padding/16,
+      $t-input--style-dp__padding / 8,
+      0,
+      rgba(0, 0, 0, 0.1),
+      true
+    );
+  }
+
+  //Inner (either the text of the button or the input element itself)
+  &__inner {
+    position: relative;
+    display: block;
+    width: 100%;
+    padding: $t-input--style-dp__padding / 2;
+
+    background: $s-color--input-default__top;
+    border: $s-color--input-default__border;
+    transition: all 0.1s $s-animation--ease-out;
+    border-radius: $t-input--style-dp__padding / 3;
+
+    //Shine effect
+    @include t-box-shadow(
+      0,
+      $t-input--style-dp__padding/8,
+      $t-input--style-dp__padding/8,
+      0,
+      rgba(255,255,255, 0.4),
+      true
+    );
+  }
+
+  //Pseudo elements
+  &:hover &__inner {
+    @include t-translate-y($t-input--style-dp__padding / 8);
+  }
+
+  &:active &__inner {
+    @include t-translate-y($t-input--style-dp__padding / 4);
+  }
+
+  &:focus::before,
+  &__inner:focus {
+    @include t-box-shadow(
+      0,
+      0,
+      $t-input--style-dp__padding/8,
+      $t-input--style-dp__padding/8,
+      $s-color--input-focus__outline
+    );
+  }
+
+  &::-moz-focus-inner,
+  &__inner::-moz-focus-inner {
+    border: 0;
+  }
+
+  //Styles
+  &--style-primary {
+    @include t-input--style(
+      $s-color--input-primary__top,
+      $s-color--input-primary__bottom
+    );
+  }
+
+  //Secondary (Light Blue)
+  &--style-secondary {
+    @include t-input--style(
+      $s-color--input-secondary__top,
+      $s-color--input-secondary__bottom
+    );
+  }
+
+  //Danger
+  &--style-danger {
+    @include t-input--style(
+      $s-color--input-danger__top,
+      $s-color--input-danger__bottom
+    );
+  }
+
+  //Warning
+  &--style-warning {
+    @include t-input--style(
+      $s-color--input-warning__top,
+      $s-color--input-warning__bottom
+    );
+  }
+}

public/styles/tools/input.scss

@@ -1,17 +0,0 @@
-/*
- *  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;}
-}