From d8b1c415388298f862852d6e7fd3bf55947fdbfd Mon Sep 17 00:00:00 2001 From: Dominic Masters Date: Tue, 15 May 2018 08:10:54 +1000 Subject: [PATCH] About to start work on buttons --- public/input/Input.jsx | 2 ++ public/input/button/Button.jsx | 2 ++ public/input/button/ButtonGroup.jsx | 32 +++++++++++++++++++++++++++++ public/language/en-AU.jsx | 3 ++- public/page/contact/ContactPage.jsx | 12 ++++------- public/styles/index.scss | 1 + public/styles/objects/_button.scss | 25 ++++++++++++++++++---- public/styles/objects/_form.scss | 7 ++++++- public/styles/objects/_input.scss | 9 ++++++-- public/styles/settings/colors.scss | 7 ++++++- 10 files changed, 83 insertions(+), 17 deletions(-) create mode 100644 public/input/button/ButtonGroup.jsx diff --git a/public/input/Input.jsx b/public/input/Input.jsx index cc259d4..07529a3 100644 --- a/public/input/Input.jsx +++ b/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, diff --git a/public/input/button/Button.jsx b/public/input/button/Button.jsx index 3232345..80d4536 100644 --- a/public/input/button/Button.jsx +++ b/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; } diff --git a/public/input/button/ButtonGroup.jsx b/public/input/button/ButtonGroup.jsx new file mode 100644 index 0000000..7267282 --- /dev/null +++ b/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 ( +
+ {props.children} +
+ ); +} diff --git a/public/language/en-AU.jsx b/public/language/en-AU.jsx index 17e7706..1c8e2d2 100644 --- a/public/language/en-AU.jsx +++ b/public/language/en-AU.jsx @@ -28,7 +28,8 @@ module.exports = { "placeholder": "Message." }, - "send": "Send" + "send": "Send", + "reset": "Reset" } } } diff --git a/public/page/contact/ContactPage.jsx b/public/page/contact/ContactPage.jsx index 31c16ec..169451b 100644 --- a/public/page/contact/ContactPage.jsx +++ b/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 { /> - + - - - - - - + + diff --git a/public/styles/index.scss b/public/styles/index.scss index cc65479..e1bfc6a 100644 --- a/public/styles/index.scss +++ b/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'; diff --git a/public/styles/objects/_button.scss b/public/styles/objects/_button.scss index 031a688..dde7b74 100644 --- a/public/styles/objects/_button.scss +++ b/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 + ); +} diff --git a/public/styles/objects/_form.scss b/public/styles/objects/_form.scss index f6fe99c..efa01aa 100644 --- a/public/styles/objects/_form.scss +++ b/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; + } +} diff --git a/public/styles/objects/_input.scss b/public/styles/objects/_input.scss index 4611481..5253e7b 100644 --- a/public/styles/objects/_input.scss +++ b/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; } diff --git a/public/styles/settings/colors.scss b/public/styles/settings/colors.scss index 8a4d9ff..d468a80 100644 --- a/public/styles/settings/colors.scss +++ b/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%);