From be0fd83ffb088676eb6e7bfce8f66683f2fbf20f Mon Sep 17 00:00:00 2001
From: Dominic Masters <dominic@domsplace.com>
Date: Tue, 15 May 2018 21:19:24 +1000
Subject: [PATCH] Added input styles, merged with button styles, created
 different style..styles

---
 public/input/Input.jsx              |  23 ++++-
 public/page/contact/ContactPage.jsx |   1 +
 public/styles/elements/inputs.scss  |   4 +
 public/styles/index.scss            |   2 +-
 public/styles/objects/_button.scss  |  71 +------------
 public/styles/objects/_input.scss   |  31 ++----
 public/styles/settings/colors.scss  |  28 +++---
 public/styles/tools/_input.scss     | 148 ++++++++++++++++++++++++++++
 public/styles/tools/input.scss      |  17 ----
 9 files changed, 198 insertions(+), 127 deletions(-)
 create mode 100644 public/styles/tools/_input.scss
 delete mode 100644 public/styles/tools/input.scss

diff --git a/public/input/Input.jsx b/public/input/Input.jsx
index f6f4751..720dba6 100644
--- a/public/input/Input.jsx
+++ b/public/input/Input.jsx
@@ -39,6 +39,8 @@ export default class Input extends React.Component {
     let type = "text";
     let value;
     let clazzes = "o-input";
+    let innerClazzes = "o-input__inner";
+    let style;
 
     //Determining
     if(this.props.type) type = this.props.type;
@@ -50,9 +52,24 @@ export default class Input extends React.Component {
       value = this.props.children;
     }
 
+    //Style
+    if(this.props.style) {
+      style = this.props.style;
+    } else if(this.props.error || this.props.danger) {
+      style = "danger";
+    } else if(this.props.warning) {
+      style = "warning";
+    } else if(this.props.primary) {
+      style = "primary";
+    }
+
     //Classes
     clazzes += " is-"+type;
 
+    if(style) {
+      clazzes += " o-input--style-"+style;
+      innerClazzes += " o-input--style-"+style+"__inner";
+    }
     if(this.props.className) clazzes += " " + this.props.className;
 
     //Now create the element
@@ -62,13 +79,13 @@ export default class Input extends React.Component {
     if(type == "submit" || type == "reset" || type == "button") {
       return <Button {...this.props} />;
     } else if(type == "textarea") {
-      element = <textarea {...this.props} className={clazzes}>{ value }</textarea>
+      element = <textarea {...this.props} className={innerClazzes}>{ value }</textarea>
     } else {
-      element = <ElementType {...this.props} type={type} className={clazzes} />
+      element = <ElementType {...this.props} type={type} className={innerClazzes} />
     }
 
     return (
-      <div class="o-input-wrapper">
+      <div className={clazzes}>
         { element }
       </div>
     )
diff --git a/public/page/contact/ContactPage.jsx b/public/page/contact/ContactPage.jsx
index 7980b03..b634340 100644
--- a/public/page/contact/ContactPage.jsx
+++ b/public/page/contact/ContactPage.jsx
@@ -74,6 +74,7 @@ class ContactPage extends React.Component {
                 <Label>{ Language.get("pages.contact.message.label") }</Label>
                 <TextArea
                   placeholder={ Language.get("pages.contact.message.placeholder") }
+                  rows="6"
                 />
               </InputGroup>
 
diff --git a/public/styles/elements/inputs.scss b/public/styles/elements/inputs.scss
index 92cc06c..df34aac 100644
--- a/public/styles/elements/inputs.scss
+++ b/public/styles/elements/inputs.scss
@@ -12,4 +12,8 @@ input,textarea {
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
+
+  @include t-placeholder() {
+    color: inherit;
+  }
 }
diff --git a/public/styles/index.scss b/public/styles/index.scss
index 125ef18..f3a1f27 100644
--- a/public/styles/index.scss
+++ b/public/styles/index.scss
@@ -32,7 +32,6 @@
 
 //Tools
 @import './tools/flex.scss';
-@import './tools/input.scss';
 @import './tools/list.scss';
 @import './tools/prefix.scss';
 
@@ -43,6 +42,7 @@
 @import './tools/_responsive.scss';
 
 @import './tools/_absolute-centering.scss';
+@import './tools/_input.scss';
 
 //Resets
 
diff --git a/public/styles/objects/_button.scss b/public/styles/objects/_button.scss
index cad45b6..7e45c39 100644
--- a/public/styles/objects/_button.scss
+++ b/public/styles/objects/_button.scss
@@ -11,49 +11,14 @@
  *  Version:
  *    1.0.1 - 2018/05/14
  */
-$o-btn--padding: 1em;//Base Padding size.
 
 //Default Button (applies to all styles)
 .o-btn {
-  position: relative;
-  display: inline-block;
   cursor: pointer;
-  padding-bottom: $o-btn--padding / 2;
-  overflow: hidden;
-
-  &::before {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 50%;
-    border: $s-color--input-default__border;
-    border-radius: $o-btn--padding / 3;
-    background: $s-color--btn-default__bottom;
-    @include t-box-shadow(0,-($o-btn--padding/16),$o-btn--padding / 8,0,rgba(0, 0, 0, 0.1),true);
-  }
+  @include t-input--style-dp();
 
   &__inner {
-    @include t-box-shadow(0,$o-btn--padding/8,$o-btn--padding/8,0,rgba(255,255,255, 0.4),true);
-    position: relative;
-    background: $s-color--btn-default__top;
-    display: block;
-    padding: ( $o-btn--padding / 2 ) $o-btn--padding;
-    border-radius: $o-btn--padding / 3;
-    border: $s-color--input-default__border;
-    transition: all 0.1s $s-animation--ease-out;
-  }
-
-  &:hover {
-    .o-btn__inner {
-      @include t-translate-y($o-btn--padding / 10);
-    }
-  }
-
-  &:active &__inner {
-    @include t-translate-y($o-btn--padding / 4);
-    background: $s-color--btn-default-hover__top;
+    padding: ( $t-input--style-dp__padding / 2 ) $t-input--style-dp__padding;
   }
 }
 
@@ -75,35 +40,3 @@ $o-btn--padding: 1em;//Base Padding size.
     background: $top;
   }
 }
-
-//Primary (Blue)
-.o-btn--style-primary {
-  @include o-basic-button-design(
-    $s-color--btn-primary__top,
-    $s-color--btn-primary__bottom
-  );
-}
-
-//Secondary (Light Blue)
-.o-btn--style-secondary {
-  @include o-basic-button-design(
-    $s-color--btn-secondary__top,
-    $s-color--btn-secondary__bottom
-  );
-}
-
-//Danger
-.o-btn--style-danger {
-  @include o-basic-button-design(
-    $s-color--btn-danger__top,
-    $s-color--btn-danger__bottom
-  );
-}
-
-//Warning
-.o-btn--style-warning {
-  @include o-basic-button-design(
-    $s-color--btn-warning__top,
-    $s-color--btn-warning__bottom
-  );
-}
diff --git a/public/styles/objects/_input.scss b/public/styles/objects/_input.scss
index d2452fa..c47619d 100644
--- a/public/styles/objects/_input.scss
+++ b/public/styles/objects/_input.scss
@@ -3,42 +3,25 @@
  *    Contains styles for input and input elements.
  *
  *  Dependencies:
+ *    styles/tools/_input.scss
  *
  *
  *  Version:
  *    1.0.0 - 2018/05/13
  */
-$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;
+  @include t-input--style-dp();
   width: 100%;
-  padding: $o-input--padding / 2;
-  margin: 0;//For some reason textareas have a 1px margin
 
-  border-bottom: $s-color--input-default__border;
-  border-radius: $o-input--padding / 3;
-
-  //Textarea
-  max-width: 100%;
-  min-width: 100%;
-
-  //Placeholder
-  @include t-placeholder() {
+  &__inner {
+    //Textarea
+    margin: 0;//For some reason textareas have a 1px margin
+    max-width: 100%;
+    min-width: 100%;
   }
 }
 
-
 .o-label {
   display: none;
   visibility: hidden;
diff --git a/public/styles/settings/colors.scss b/public/styles/settings/colors.scss
index d468a80..7b2beef 100644
--- a/public/styles/settings/colors.scss
+++ b/public/styles/settings/colors.scss
@@ -44,26 +44,28 @@ $s-color--navbar__bar-active: $s-color--pastel-green;
 $s-color--loader: $s-color--swatch-blue;
 
 /*** Buttons and Inputs ***/
+
+//Defaults
 $s-color--input-default__border: 1px solid #AAA;
+$s-color--input-default__top: #F7F7F7;
+$s-color--input-default__bottom: #DADADA;
+$s-color--input-default-hover__top: $s-color--input-default__bottom;
 
-//Button Default
-$s-color--btn-default__top: #F7F7F7;
-$s-color--btn-default__bottom: #DADADA;
-
-$s-color--btn-default-hover__top: $s-color--btn-default__bottom;
+//Input Styles
+$s-color--input-focus__outline: darken($s-color--swatch-blue, 20%);
 
 //Button Primary
-$s-color--btn-primary__top: $s-color--swatch-blue;
-$s-color--btn-primary__bottom: darken($s-color--btn-primary__top, 8%);
+$s-color--input-primary__top: $s-color--swatch-blue;
+$s-color--input-primary__bottom: darken($s-color--input-primary__top, 8%);
 
 //Btn Secondary
-$s-color--btn-secondary__top: $s-color--pastel-blue;
-$s-color--btn-secondary__bottom: darken($s-color--btn-secondary__top, 8%);
+$s-color--input-secondary__top: $s-color--pastel-blue;
+$s-color--input-secondary__bottom: darken($s-color--input-secondary__top, 8%);
 
 //Btn Danger
-$s-color--btn-danger__top: $s-color--swatch-red;
-$s-color--btn-danger__bottom: darken($s-color--btn-danger__top, 8%);
+$s-color--input-danger__top: $s-color--swatch-red;
+$s-color--input-danger__bottom: darken($s-color--input-danger__top, 8%);
 
 //Btn Warning
-$s-color--btn-warning__top: $s-color--swatch-orange;
-$s-color--btn-warning__bottom: darken($s-color--btn-warning__top, 8%);
+$s-color--input-warning__top: $s-color--swatch-orange;
+$s-color--input-warning__bottom: darken($s-color--input-warning__top, 8%);
diff --git a/public/styles/tools/_input.scss b/public/styles/tools/_input.scss
new file mode 100644
index 0000000..73c841d
--- /dev/null
+++ b/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
+    );
+  }
+}
diff --git a/public/styles/tools/input.scss b/public/styles/tools/input.scss
deleted file mode 100644
index 20f56a6..0000000
--- a/public/styles/tools/input.scss
+++ /dev/null
@@ -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;}
-}