From 3dd71b38cc11abe5a5f0908da438487e11436ea0 Mon Sep 17 00:00:00 2001 From: Dominic Masters Date: Mon, 14 May 2018 07:14:19 +1000 Subject: [PATCH] Added some input styles and making button styles --- public/language/en-AU.jsx | 4 ++-- public/styles/elements/inputs.scss | 15 +++++++++++++++ public/styles/index.scss | 4 ++++ public/styles/objects/_button.scss | 12 ++++++++++-- public/styles/objects/_form.scss | 13 +++++++++++++ public/styles/objects/_input.scss | 22 ++++++++++++++++++++++ public/styles/objects/_navbar.scss | 4 ++-- public/styles/settings/responsive.scss | 2 +- public/styles/tools/_gradient.scss | 16 ++++++++++++++++ 9 files changed, 85 insertions(+), 7 deletions(-) create mode 100644 public/styles/elements/inputs.scss create mode 100644 public/styles/objects/_form.scss create mode 100644 public/styles/objects/_input.scss create mode 100644 public/styles/tools/_gradient.scss diff --git a/public/language/en-AU.jsx b/public/language/en-AU.jsx index c450066..17e7706 100644 --- a/public/language/en-AU.jsx +++ b/public/language/en-AU.jsx @@ -20,12 +20,12 @@ module.exports = { "email": { "label": "Email Address", - "placeholder": "Enter your email address." + "placeholder": "Email Address." }, "message": { "label": "Message", - "placeholder": "Enter your message." + "placeholder": "Message." }, "send": "Send" diff --git a/public/styles/elements/inputs.scss b/public/styles/elements/inputs.scss new file mode 100644 index 0000000..92cc06c --- /dev/null +++ b/public/styles/elements/inputs.scss @@ -0,0 +1,15 @@ +/* + * Inputs + * Provides initial styles for inputs and input related items + * + * Version: + * 1.0.0 - 2018/05/14 + */ +input,textarea { + background: none; + border: none; + display: inline-block; + font-family: inherit; + font-size: inherit; + font-weight: inherit; +} diff --git a/public/styles/index.scss b/public/styles/index.scss index 411e212..cc65479 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/_gradient.scss'; @import './tools/_transform.scss'; @import './tools/_responsive.scss'; @@ -47,6 +48,7 @@ @import './elements/all.scss'; @import './elements/button.scss'; @import './elements/html.scss'; +@import './elements/inputs.scss'; @import './elements/_a.scss'; @import './elements/_body.scss'; @@ -59,6 +61,8 @@ @import './objects/_app.scss'; @import './objects/_button.scss'; @import './objects/_floating-content-box.scss'; +@import './objects/_form.scss'; +@import './objects/_input.scss'; @import './objects/_loader.scss'; @import './objects/_navbar.scss'; @import './objects/_video.scss'; diff --git a/public/styles/objects/_button.scss b/public/styles/objects/_button.scss index 4dda6c5..6e470ab 100644 --- a/public/styles/objects/_button.scss +++ b/public/styles/objects/_button.scss @@ -3,13 +3,21 @@ * Clicky Tappy Touchy Buttons! * * Dependencies: + * styles/tools/_gradient.scss * * * Version: - * 1.0.0 - 2018/05/11 + * 1.0.1 - 2018/05/14 */ + + + .o-btn { - //Reset display: inline-block; cursor: pointer; + border: 1px solid #DDD; + border-radius: 4px; + padding: 0.5em 1.25em; + + @include t-vertical-gradient(#FFF, #FBFBFB); } diff --git a/public/styles/objects/_form.scss b/public/styles/objects/_form.scss new file mode 100644 index 0000000..f6fe99c --- /dev/null +++ b/public/styles/objects/_form.scss @@ -0,0 +1,13 @@ +/* + * Form + * Forms + * + * Dependencies: + * + * + * Version: + * 1.0.0 - 2018/05/13 + */ +.o-form { } + +.o-form__group { } diff --git a/public/styles/objects/_input.scss b/public/styles/objects/_input.scss new file mode 100644 index 0000000..4611481 --- /dev/null +++ b/public/styles/objects/_input.scss @@ -0,0 +1,22 @@ +/* + * Input + * Contains styles for input and input elements. + * + * Dependencies: + * + * + * Version: + * 1.0.0 - 2018/05/13 + */ + +.o-input { + display: block; + width: 100%; + padding: 0.25em; +} + + +.o-label { + display: block; + visibility: hidden; +} diff --git a/public/styles/objects/_navbar.scss b/public/styles/objects/_navbar.scss index 3850d62..973a5e5 100644 --- a/public/styles/objects/_navbar.scss +++ b/public/styles/objects/_navbar.scss @@ -81,7 +81,7 @@ $o-navbar--link-thickness: 5px; @include t-media-query($s-xsmall-up) { - padding: 1em; + //padding: 1em; &__logo-container { text-align: left; @@ -97,7 +97,7 @@ $o-navbar--link-thickness: 5px; } @include t-media-query($s-small-up) { - padding: 3em; + //padding: 3em; &__logo { width: 12em; diff --git a/public/styles/settings/responsive.scss b/public/styles/settings/responsive.scss index 3c240d5..c677575 100644 --- a/public/styles/settings/responsive.scss +++ b/public/styles/settings/responsive.scss @@ -15,7 +15,7 @@ $s-screen-medium: 1000px; $s-screen-large: 1250px; $s-screen-xlarge: 1500px; -$s-screen-boundary: $s-screen-xlarge; +$s-screen-boundary: $s-screen-large; //Size definitions $s-xsmall: 'xsmall'; diff --git a/public/styles/tools/_gradient.scss b/public/styles/tools/_gradient.scss new file mode 100644 index 0000000..096b7ce --- /dev/null +++ b/public/styles/tools/_gradient.scss @@ -0,0 +1,16 @@ +/* + * Gradient Tools + * Various Gradient Generators and tools. + * + * Dependencies: + * + * Version: + * 1.0.0 - 2018/05/14 + */ +@mixin t-vertical-gradient($colorTop, $colorBottom) { + background-color: $colorTop; /* Old browsers */ + background-image: -moz-linear-gradient(top, #{$colorTop} 0%, #{$colorBottom} 100%); /* FF3.6-15 */ + background-image: -webkit-linear-gradient(top, #{$colorTop} 0%,#{$colorBottom} 100%); /* Chrome10-25,Safari5.1-6 */ + background-image: linear-gradient(to bottom, #{$colorTop} 0%,#{$colorBottom} 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$colorTop}', endColorstr='#{$colorBottom}',GradientType=0 ); /* IE6-9 */ +}