About to start work on buttons

public/input/Input.jsx

@@ -24,6 +24,7 @@
 import React from 'react';
 
 import Button from './button/Button';
+import ButtonGroup from './button/ButtonGroup';
 import Form from './form/Form';
 import InputGroup from './group/InputGroup';
 import Label from './label/Label';
@@ -76,6 +77,7 @@ const TextArea = props => {
 
 export {
   Button,
+  ButtonGroup,
   Form,
   InputGroup,
   TextArea,

public/input/button/Button.jsx

@@ -73,6 +73,8 @@ export default class Button extends React.Component {
       style = "secondary";
     } else if(this.props.danger) {
       style = "danger";
+    } else if(this.props.warning) {
+      style = "warning";
     } else if(this.props.style) {
       style = this.props.style;
     }

public/input/button/ButtonGroup.jsx

@@ -0,0 +1,32 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+import React from 'react';
+
+export default function(props) {
+  return (
+    <div {...props} class={"o-btn-group" + (props.className ? " "+props.className : "")}>
+      {props.children}
+    </div>
+  );
+}

public/language/en-AU.jsx

@@ -28,7 +28,8 @@ module.exports = {
         "placeholder": "Message."
       },
 
-      "send": "Send"
+      "send": "Send",
+      "reset": "Reset"
     }
   }
 }

public/page/contact/ContactPage.jsx

@@ -25,7 +25,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import Page, { PageBoundary } from './../Page';
 import Section, { BodySection } from './../../section/Section';
-import Input, { Form, InputGroup, TextArea, Label } from './../../input/input';
+import Input, { Form, InputGroup, TextArea, Label, ButtonGroup } from './../../input/input';
 import Language from './../../language/Language';
 
 class ContactPage extends React.Component {
@@ -77,14 +77,10 @@ class ContactPage extends React.Component {
                 />
               </InputGroup>
 
-              <InputGroup>
+              <ButtonGroup>
                 <Input type="submit" value={ Language.get("pages.contact.send") } primary />
-
-                <Input type="submit" value="Default" />
-                <Input type="button" value="Primary" primary />
-                <Input type="button" value="Secondary" secondary />
-                <Input type="button" value="Danger" danger />
-              </InputGroup>
+                <Input type="reset" value={ Language.get("pages.contact.reset") } />
+              </ButtonGroup>
             </Form>
           </BodySection>
         </PageBoundary>

public/styles/index.scss

@@ -36,6 +36,7 @@
 @import './tools/prefix.scss';
 
 @import './tools/_animation.scss';
+@import './tools/_box-shadow.scss';
 @import './tools/_gradient.scss';
 @import './tools/_transform.scss';
 @import './tools/_responsive.scss';

public/styles/objects/_button.scss

@@ -5,13 +5,13 @@
  *  Dependencies:
  *    styles/settings/animation.scss
  *    styles/settings/colors.scss
- *    styles/tools/_gradient.scss
+ *    styles/tools/_box-shadow.scss
  *
  *
  *  Version:
  *    1.0.1 - 2018/05/14
  */
-$o-btn--padding: 1.5em;//Base Padding size.
+$o-btn--padding: 1em;//Base Padding size.
 
 //Default Button (applies to all styles)
 .o-btn {
@@ -28,18 +28,20 @@ $o-btn--padding: 1.5em;//Base Padding size.
     left: 0;
     width: 100%;
     height: 50%;
-    border: $s-color--btn-default__border;
+    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);
   }
 
   &__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--btn-default__border;
+    border: $s-color--input-default__border;
     transition: all 0.1s $s-animation--ease-out;
   }
 
@@ -55,6 +57,13 @@ $o-btn--padding: 1.5em;//Base Padding size.
   }
 }
 
+//Button Group
+.o-btn-group {
+  .o-btn + .o-btn {
+    margin-left: 1em;
+  }
+}
+
 /*** Custom Button Styles ***/
 @mixin o-basic-button-design($top, $bottom) {
   &::before,
@@ -90,3 +99,11 @@ $o-btn--padding: 1.5em;//Base Padding size.
     $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
+  );
+}

public/styles/objects/_form.scss

@@ -10,4 +10,9 @@
  */
 .o-form { }
 
-.o-form__group { }
+.o-form__group {
+  + .o-btn-group,
+  + .o-form__group {
+    margin-top: 1em;
+  }
+}

public/styles/objects/_input.scss

@@ -8,15 +8,20 @@
  *  Version:
  *    1.0.0 - 2018/05/13
  */
+$o-input--padding: 1em;
 
 .o-input {
   display: block;
   width: 100%;
-  padding: 0.25em;
+  padding: $o-input--padding / 2;
+  margin: 0;//For some reason textareas have a 1px margin
+
+  border: $s-color--input-default__border;
+  border-radius: $o-input--padding / 3;
 }
 
 
 .o-label {
-  display: block;
+  display: none;
   visibility: hidden;
 }

public/styles/settings/colors.scss

@@ -44,10 +44,11 @@ $s-color--navbar__bar-active: $s-color--pastel-green;
 $s-color--loader: $s-color--swatch-blue;
 
 /*** Buttons and Inputs ***/
+$s-color--input-default__border: 1px solid #AAA;
+
 //Button Default
 $s-color--btn-default__top: #F7F7F7;
 $s-color--btn-default__bottom: #DADADA;
-$s-color--btn-default__border: 1px solid #AAA;
 
 $s-color--btn-default-hover__top: $s-color--btn-default__bottom;
 
@@ -62,3 +63,7 @@ $s-color--btn-secondary__bottom: darken($s-color--btn-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%);
+
+//Btn Warning
+$s-color--btn-warning__top: $s-color--swatch-orange;
+$s-color--btn-warning__bottom: darken($s-color--btn-warning__top, 8%);