YourWishes/domsPlace
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added input styles, merged with button styles, created different style..styles

Browse Source
This commit is contained in:
Dominic Masters
2018-05-15 21:19:24 +10:00
parent 7500de1649
commit be0fd83ffb
9 changed files with 198 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
public/input/Input.jsx
View File

@ -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>
)

1
public/page/contact/ContactPage.jsx
View File

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

4
public/styles/elements/inputs.scss
View File

@ -12,4 +12,8 @@ input,textarea {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
@include t-placeholder() {
color: inherit;
}
}

2
public/styles/index.scss
View File

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

71
public/styles/objects/_button.scss
View File

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

25
public/styles/objects/_input.scss
View File

@ -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;
&__inner {
//Textarea
margin: 0;//For some reason textareas have a 1px margin
max-width: 100%;
min-width: 100%;
//Placeholder
@include t-placeholder() {
}
}
.o-label {
display: none;
visibility: hidden;

28
public/styles/settings/colors.scss
View File

@ -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%);

148
public/styles/tools/_input.scss Normal file
View File

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

17
public/styles/tools/input.scss
View File

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