Skip to content
This repository has been archived by the owner on Dec 11, 2021. It is now read-only.

Commit

Permalink
Inputs: Added error state
Browse files Browse the repository at this point in the history
  • Loading branch information
@nashvail
nashvail committed Jun 7, 2016
1 parent b6af1c2 commit 3299360
Show file tree
Hide file tree
Showing 3 changed files with 81 additions and 18 deletions.
28 changes: 28 additions & 0 deletions demos/inputs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
<link rel="stylesheet" href="demos.css">
</head>
<body>

<h2>Inputs</h2>

<label class="input-label">Name: </label>
Expand Down Expand Up @@ -89,5 +90,32 @@ <h2>Inputs (Active) </h2>
<label class="input-label">Amount: </label>
<input class="input active" type="number" placeholder="XX">

<h2>Inputs (Error) </h2>

<label class="input-label">Name: </label>
<input class="input error" type="text" placeholder="Enter your Name">
<label class="input-label error">We were unable to process your input.</label>

<label class="input-label">Password: </label>
<input class="input error" type="password" placeholder="Choose a password">
<label class="input-label error">We were unable to process your input.</label>

<label class="input-label">Color: </label>
<input class="input error" type="color">
<label class="input-label error">We were unable to process your input.</label>

<label class="input-label">Email: </label>
<input class="input error" type="email" placeholder="[email protected]">
<label class="input-label error">We were unable to process your input.</label>

<label class="input-label">Date: </label>
<input class="input error" type="date">
<label class="input-label error">We were unable to process your input.</label>

<label class="input-label">Amount: </label>
<input class="input error" type="number" placeholder="XX">
<label class="input-label error">We were unable to process your input.</label>


</body>
</html>
40 changes: 29 additions & 11 deletions scss/atoms/inputs/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,20 @@
* ==========================================================================
*/

$margin: em(map-get($inputs-single-line, margin));
$margin: em(map-get($inputs-element, margin));
$margin-label: em(map-get($inputs-label, margin));

@mixin input() {
padding: em(map-get($inputs-single-line, padding));
margin: $margin 0;
border: map-get($inputs-single-line, border);
border-color: map-deep-get($inputs-single-line, border-color, base);
background: map-deep-get($inputs-single-line, background, base);
padding: em(map-get($inputs-element, padding));
margin: $margin;
border: map-get($inputs-element, border);
border-color: map-deep-get($inputs-element, border-color, base);
background: map-deep-get($inputs-element, background, base);
box-shadow: map-get($inputs-shadows, normal);
border-radius: em(map-get($inputs-single-line, border-radius));
border-radius: em(map-get($inputs-element, border-radius));
transition: map-get($inputs-transitions, blur);
font-size: em(map-get($inputs-single-line, font-size));
width: map-get($inputs-single-line, width);
font-size: em(map-get($inputs-element, font-size));
width: map-get($inputs-element, width);

&:focus,
&.focus {
Expand All @@ -33,10 +34,15 @@ $margin: em(map-get($inputs-single-line, margin));
&.active {
@include input-active();
}

&.error {
@include input-error();
}
}

// Input state mixins

@mixin input-focus() {
border: map-get($inputs-focus, border);
border-color: map-deep-get($inputs-focus, border-color, light);
transition: map-get($inputs-transitions, focus);
outline: map-get($inputs-focus, outline);
Expand All @@ -46,7 +52,6 @@ $margin: em(map-get($inputs-single-line, margin));
@mixin input-disabled() {
background: map-deep-get($inputs-disabled, background, base);
box-shadow: map-get($inputs-shadows, disabled);
border: map-get($inputs-disabled, border);
border-color: map-deep-get($inputs-disabled, border-color, darker);
color: map-deep-get($inputs-disabled, color, darker);
cursor: map-get($inputs-disabled, cursor);
Expand All @@ -56,9 +61,22 @@ $margin: em(map-get($inputs-single-line, margin));
border-color: map-deep-get($inputs-active, border-color, light);
}

@mixin input-error() {
border-color: map-deep-get($inputs-error, border-color, base);
box-shadow: map-get($inputs-shadows, error-base), map-get($inputs-shadows, error-spread);
background: rgba(map-deep-get($inputs-error, background, base), .08);
}

@mixin input-label() {
display: map-get($inputs-label, display);
max-width: map-get($inputs-label, max-width);
font-size: em(map-get($inputs-label, font-size));
font-weight: map-get($inputs-label, font-weight);
margin: $margin-label 0;

&.error {
font-size: em(map-get($inputs-label-error, font-size));
color: map-deep-get($inputs-label-error, color, base);
font-weight: map-get($inputs-label-error, font-weight);
}
}
31 changes: 24 additions & 7 deletions scss/variables/inputs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@ chassis.inputs = {
"disabled": "0px 0px 2px 0px rgba(0, 0, 0, 0.12)",
"normal": "0px 2px 2px 0px rgba(0, 0, 0, 0.12)",
"focus-base": "0px 0px 8px 0px rgba(0, 0, 0, 0.08)",
"focus-spread": "0px 8px 8px 0px rgba(0, 0, 0, 0.18)"
"focus-spread": "0px 8px 8px 0px rgba(0, 0, 0, 0.18)",
"error-base": "0px 0px 2px 0px rgba(198,62,54,0.24)",
"error-spread": "0px 2px 2px 0px rgba(198,62,54,0.48)"
}
},
"transitions": {
Expand All @@ -28,17 +30,26 @@ chassis.inputs = {
"label": {
name: "Styles for input label",
value: {
"display": "inline-block",
"display": "block",
"max-width": "100%",
"font-size": "18px",
"font-weight": "600"
"font-weight": "600",
"margin": "8px"
}
},
"single-line": {
"label-error": {
name: "Styles for error labels",
value: {
"font-size": "14px",
color: () => "colors.error",
"font-weight": "400"
}
},
"element": {
name: "Generic styles for single line inputs",
value: {
"padding": "15px",
"margin": "8px",
"margin": "0px",
"border": "1px solid",
"border-color": () => "colors.text",
"border-radius": "3px",
Expand All @@ -50,7 +61,6 @@ chassis.inputs = {
"disabled": {
name: "Styles for disabled input",
value: {
"border": "1px solid",
"border-color": () => "colors.default",
"background": () => "colors.default",
"color": () => "colors.default",
Expand All @@ -60,7 +70,6 @@ chassis.inputs = {
"focus": {
name: "Styles for in focus inputs",
value: {
"border": "1px solid",
"border-color": () => "colors.info",
"outline": "none"
}
Expand All @@ -70,7 +79,15 @@ chassis.inputs = {
value: {
"border-color": () => "colors.info"
}
},
"error": {
name: "Styles for error state of inputs",
value: {
"border-color": () => "colors.error",
"background": () => "colors.error"
}
}

};
return chassis;
} ) );

0 comments on commit 3299360

Please sign in to comment.