Added some input styles and making button styles

This commit is contained in:
2018-05-14 07:14:19 +10:00
parent 466bdee08c
commit 3dd71b38cc
9 changed files with 85 additions and 7 deletions

View File

@ -20,12 +20,12 @@ module.exports = {
"email": { "email": {
"label": "Email Address", "label": "Email Address",
"placeholder": "Enter your email address." "placeholder": "Email Address."
}, },
"message": { "message": {
"label": "Message", "label": "Message",
"placeholder": "Enter your message." "placeholder": "Message."
}, },
"send": "Send" "send": "Send"

View File

@ -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;
}

View File

@ -36,6 +36,7 @@
@import './tools/prefix.scss'; @import './tools/prefix.scss';
@import './tools/_animation.scss'; @import './tools/_animation.scss';
@import './tools/_gradient.scss';
@import './tools/_transform.scss'; @import './tools/_transform.scss';
@import './tools/_responsive.scss'; @import './tools/_responsive.scss';
@ -47,6 +48,7 @@
@import './elements/all.scss'; @import './elements/all.scss';
@import './elements/button.scss'; @import './elements/button.scss';
@import './elements/html.scss'; @import './elements/html.scss';
@import './elements/inputs.scss';
@import './elements/_a.scss'; @import './elements/_a.scss';
@import './elements/_body.scss'; @import './elements/_body.scss';
@ -59,6 +61,8 @@
@import './objects/_app.scss'; @import './objects/_app.scss';
@import './objects/_button.scss'; @import './objects/_button.scss';
@import './objects/_floating-content-box.scss'; @import './objects/_floating-content-box.scss';
@import './objects/_form.scss';
@import './objects/_input.scss';
@import './objects/_loader.scss'; @import './objects/_loader.scss';
@import './objects/_navbar.scss'; @import './objects/_navbar.scss';
@import './objects/_video.scss'; @import './objects/_video.scss';

View File

@ -3,13 +3,21 @@
* Clicky Tappy Touchy Buttons! * Clicky Tappy Touchy Buttons!
* *
* Dependencies: * Dependencies:
* styles/tools/_gradient.scss
* *
* *
* Version: * Version:
* 1.0.0 - 2018/05/11 * 1.0.1 - 2018/05/14
*/ */
.o-btn { .o-btn {
//Reset
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
border: 1px solid #DDD;
border-radius: 4px;
padding: 0.5em 1.25em;
@include t-vertical-gradient(#FFF, #FBFBFB);
} }

View File

@ -0,0 +1,13 @@
/*
* Form
* Forms
*
* Dependencies:
*
*
* Version:
* 1.0.0 - 2018/05/13
*/
.o-form { }
.o-form__group { }

View File

@ -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;
}

View File

@ -81,7 +81,7 @@ $o-navbar--link-thickness: 5px;
@include t-media-query($s-xsmall-up) { @include t-media-query($s-xsmall-up) {
padding: 1em; //padding: 1em;
&__logo-container { &__logo-container {
text-align: left; text-align: left;
@ -97,7 +97,7 @@ $o-navbar--link-thickness: 5px;
} }
@include t-media-query($s-small-up) { @include t-media-query($s-small-up) {
padding: 3em; //padding: 3em;
&__logo { &__logo {
width: 12em; width: 12em;

View File

@ -15,7 +15,7 @@ $s-screen-medium: 1000px;
$s-screen-large: 1250px; $s-screen-large: 1250px;
$s-screen-xlarge: 1500px; $s-screen-xlarge: 1500px;
$s-screen-boundary: $s-screen-xlarge; $s-screen-boundary: $s-screen-large;
//Size definitions //Size definitions
$s-xsmall: 'xsmall'; $s-xsmall: 'xsmall';

View File

@ -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 */
}