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

Commit 3299360

Browse files
nashvailnashvail
committed
Inputs: Added error state
1 parent b6af1c2 commit 3299360

File tree

3 files changed

+81
-18
lines changed

3 files changed

+81
-18
lines changed

‎demos/inputs.html

+28
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
<link rel="stylesheet" href="demos.css">
1010
</head>
1111
<body>
12+
1213
<h2>Inputs</h2>
1314

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

93+
<h2>Inputs (Error) </h2>
94+
95+
<label class="input-label">Name: </label>
96+
<input class="input error" type="text" placeholder="Enter your Name">
97+
<label class="input-label error">We were unable to process your input.</label>
98+
99+
<label class="input-label">Password: </label>
100+
<input class="input error" type="password" placeholder="Choose a password">
101+
<label class="input-label error">We were unable to process your input.</label>
102+
103+
<label class="input-label">Color: </label>
104+
<input class="input error" type="color">
105+
<label class="input-label error">We were unable to process your input.</label>
106+
107+
<label class="input-label">Email: </label>
108+
<input class="input error" type="email" placeholder="[email protected]">
109+
<label class="input-label error">We were unable to process your input.</label>
110+
111+
<label class="input-label">Date: </label>
112+
<input class="input error" type="date">
113+
<label class="input-label error">We were unable to process your input.</label>
114+
115+
<label class="input-label">Amount: </label>
116+
<input class="input error" type="number" placeholder="XX">
117+
<label class="input-label error">We were unable to process your input.</label>
118+
119+
92120
</body>
93121
</html>

‎scss/atoms/inputs/_mixins.scss

+29-11
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,20 @@
55
* ==========================================================================
66
*/
77

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

1011
@mixin input() {
11-
padding: em(map-get($inputs-single-line, padding));
12-
margin: $margin 0;
13-
border: map-get($inputs-single-line, border);
14-
border-color: map-deep-get($inputs-single-line, border-color, base);
15-
background: map-deep-get($inputs-single-line, background, base);
12+
padding: em(map-get($inputs-element, padding));
13+
margin: $margin;
14+
border: map-get($inputs-element, border);
15+
border-color: map-deep-get($inputs-element, border-color, base);
16+
background: map-deep-get($inputs-element, background, base);
1617
box-shadow: map-get($inputs-shadows, normal);
17-
border-radius: em(map-get($inputs-single-line, border-radius));
18+
border-radius: em(map-get($inputs-element, border-radius));
1819
transition: map-get($inputs-transitions, blur);
19-
font-size: em(map-get($inputs-single-line, font-size));
20-
width: map-get($inputs-single-line, width);
20+
font-size: em(map-get($inputs-element, font-size));
21+
width: map-get($inputs-element, width);
2122

2223
&:focus,
2324
&.focus {
@@ -33,10 +34,15 @@ $margin: em(map-get($inputs-single-line, margin));
3334
&.active {
3435
@include input-active();
3536
}
37+
38+
&.error {
39+
@include input-error();
40+
}
3641
}
3742

43+
// Input state mixins
44+
3845
@mixin input-focus() {
39-
border: map-get($inputs-focus, border);
4046
border-color: map-deep-get($inputs-focus, border-color, light);
4147
transition: map-get($inputs-transitions, focus);
4248
outline: map-get($inputs-focus, outline);
@@ -46,7 +52,6 @@ $margin: em(map-get($inputs-single-line, margin));
4652
@mixin input-disabled() {
4753
background: map-deep-get($inputs-disabled, background, base);
4854
box-shadow: map-get($inputs-shadows, disabled);
49-
border: map-get($inputs-disabled, border);
5055
border-color: map-deep-get($inputs-disabled, border-color, darker);
5156
color: map-deep-get($inputs-disabled, color, darker);
5257
cursor: map-get($inputs-disabled, cursor);
@@ -56,9 +61,22 @@ $margin: em(map-get($inputs-single-line, margin));
5661
border-color: map-deep-get($inputs-active, border-color, light);
5762
}
5863

64+
@mixin input-error() {
65+
border-color: map-deep-get($inputs-error, border-color, base);
66+
box-shadow: map-get($inputs-shadows, error-base), map-get($inputs-shadows, error-spread);
67+
background: rgba(map-deep-get($inputs-error, background, base), .08);
68+
}
69+
5970
@mixin input-label() {
6071
display: map-get($inputs-label, display);
6172
max-width: map-get($inputs-label, max-width);
6273
font-size: em(map-get($inputs-label, font-size));
6374
font-weight: map-get($inputs-label, font-weight);
75+
margin: $margin-label 0;
76+
77+
&.error {
78+
font-size: em(map-get($inputs-label-error, font-size));
79+
color: map-deep-get($inputs-label-error, color, base);
80+
font-weight: map-get($inputs-label-error, font-weight);
81+
}
6482
}

‎scss/variables/inputs.js

+24-7
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@ chassis.inputs = {
1515
"disabled": "0px 0px 2px 0px rgba(0, 0, 0, 0.12)",
1616
"normal": "0px 2px 2px 0px rgba(0, 0, 0, 0.12)",
1717
"focus-base": "0px 0px 8px 0px rgba(0, 0, 0, 0.08)",
18-
"focus-spread": "0px 8px 8px 0px rgba(0, 0, 0, 0.18)"
18+
"focus-spread": "0px 8px 8px 0px rgba(0, 0, 0, 0.18)",
19+
"error-base": "0px 0px 2px 0px rgba(198,62,54,0.24)",
20+
"error-spread": "0px 2px 2px 0px rgba(198,62,54,0.48)"
1921
}
2022
},
2123
"transitions": {
@@ -28,17 +30,26 @@ chassis.inputs = {
2830
"label": {
2931
name: "Styles for input label",
3032
value: {
31-
"display": "inline-block",
33+
"display": "block",
3234
"max-width": "100%",
3335
"font-size": "18px",
34-
"font-weight": "600"
36+
"font-weight": "600",
37+
"margin": "8px"
3538
}
3639
},
37-
"single-line": {
40+
"label-error": {
41+
name: "Styles for error labels",
42+
value: {
43+
"font-size": "14px",
44+
color: () => "colors.error",
45+
"font-weight": "400"
46+
}
47+
},
48+
"element": {
3849
name: "Generic styles for single line inputs",
3950
value: {
4051
"padding": "15px",
41-
"margin": "8px",
52+
"margin": "0px",
4253
"border": "1px solid",
4354
"border-color": () => "colors.text",
4455
"border-radius": "3px",
@@ -50,7 +61,6 @@ chassis.inputs = {
5061
"disabled": {
5162
name: "Styles for disabled input",
5263
value: {
53-
"border": "1px solid",
5464
"border-color": () => "colors.default",
5565
"background": () => "colors.default",
5666
"color": () => "colors.default",
@@ -60,7 +70,6 @@ chassis.inputs = {
6070
"focus": {
6171
name: "Styles for in focus inputs",
6272
value: {
63-
"border": "1px solid",
6473
"border-color": () => "colors.info",
6574
"outline": "none"
6675
}
@@ -70,7 +79,15 @@ chassis.inputs = {
7079
value: {
7180
"border-color": () => "colors.info"
7281
}
82+
},
83+
"error": {
84+
name: "Styles for error state of inputs",
85+
value: {
86+
"border-color": () => "colors.error",
87+
"background": () => "colors.error"
88+
}
7389
}
90+
7491
};
7592
return chassis;
7693
} ) );

0 commit comments

Comments
 (0)