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

Commit 416f942

Browse files
nashvailnashvail
committed
Inputs: Added initial components with styles
1 parent 437f2a2 commit 416f942

File tree

4 files changed

+315
-0
lines changed

4 files changed

+315
-0
lines changed

‎demos/inputs.html‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Chassis - Inputs</title>
6+
<meta name="description" content="Button skeleton for styling">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="stylesheet" href="../dist/css/chassis.css">
9+
<link rel="stylesheet" href="demos.css">
10+
</head>
11+
<body>
12+
13+
<h2>Inputs</h2>
14+
15+
<label class="input-label">Name: </label>
16+
<input class="input" type="text" placeholder="Enter your Name">
17+
18+
<label class="input-label">Password: </label>
19+
<input class="input" type="password" placeholder="Choose a password">
20+
21+
<!-- <label class="input-label">Color: </label>
22+
<input class="input" type="color">
23+
-->
24+
<label class="input-label">Email: </label>
25+
<input class="input" type="email" placeholder="name@example.com">
26+
27+
<!-- <label class="input-label">Date: </label>
28+
<input class="input" type="date">
29+
-->
30+
<label class="input-label">Amount: </label>
31+
<input class="input" type="number" placeholder="XX">
32+
33+
<h2>Inputs (Disabled) </h2>
34+
35+
<label class="input-label">Name: </label>
36+
<input class="input disabled" type="text" placeholder="Enter your Name">
37+
38+
<label class="input-label">Password: </label>
39+
<input class="input disabled" type="password" placeholder="Choose a password">
40+
41+
<!-- <label class="input-label">Color: </label>
42+
<input class="input disabled" type="color">
43+
-->
44+
<label class="input-label">Email: </label>
45+
<input class="input disabled" type="email" placeholder="name@example.com">
46+
47+
<!-- <label class="input-label">Date: </label>
48+
<input class="input disabled" type="date">
49+
-->
50+
<label class="input-label">Amount: </label>
51+
<input class="input disabled" type="number" placeholder="XX">
52+
53+
<h2>Inputs (Focus) </h2>
54+
55+
<label class="input-label">Name: </label>
56+
<input class="input focus" type="text" placeholder="Enter your Name">
57+
58+
<label class="input-label">Password: </label>
59+
<input class="input focus" type="password" placeholder="Choose a password">
60+
61+
<!-- <label class="input-label">Color: </label>
62+
<input class="input focus" type="color">
63+
-->
64+
<label class="input-label">Email: </label>
65+
<input class="input focus" type="email" placeholder="name@example.com">
66+
67+
<!-- <label class="input-label">Date: </label>
68+
<input class="input focus" type="date">
69+
-->
70+
<label class="input-label">Amount: </label>
71+
<input class="input focus" type="number" placeholder="XX">
72+
73+
<h2>Inputs (Active) </h2>
74+
75+
<label class="input-label">Name: </label>
76+
<input class="input active" type="text" placeholder="Enter your Name">
77+
78+
<label class="input-label">Password: </label>
79+
<input class="input active" type="password" placeholder="Choose a password">
80+
81+
<!-- <label class="input-label">Color: </label>
82+
<input class="input active" type="color">
83+
-->
84+
<label class="input-label">Email: </label>
85+
<input class="input active" type="email" placeholder="name@example.com">
86+
87+
<!-- <label class="input-label">Date: </label>
88+
<input class="input active" type="date">
89+
-->
90+
<label class="input-label">Amount: </label>
91+
<input class="input active" type="number" placeholder="XX">
92+
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="name@example.com">
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+
120+
</body>
121+
</html>

‎scss/atoms/inputs/_inputs.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/*
2+
* ==========================================================================
3+
* Inputs
4+
* ==========================================================================
5+
*/
6+
7+
@import
8+
"dist/chassis",
9+
"mixins";
10+
11+
.input {
12+
@include input();
13+
}
14+
15+
.input-label {
16+
@include input-label();
17+
}

‎scss/atoms/inputs/_mixins.scss‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
/*
2+
* ==========================================================================
3+
* File : _mixins.scss
4+
* For : Inputs
5+
* ==========================================================================
6+
*/
7+
8+
$margin: em(map-get($inputs-element, margin));
9+
$margin-label: em(map-get($inputs-label, margin));
10+
11+
@mixin input() {
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);
17+
box-shadow: map-get($inputs-shadows, normal);
18+
border-radius: em(map-get($inputs-element, border-radius));
19+
transition: map-get($inputs-transitions, blur-shadow), map-get($inputs-transitions, blur-border-color);
20+
font-size: em(map-get($inputs-element, font-size));
21+
width: map-get($inputs-element, width);
22+
23+
&:focus,
24+
&.focus {
25+
@include input-focus();
26+
}
27+
28+
&:disabled,
29+
&.disabled {
30+
@include input-disabled();
31+
}
32+
33+
&:active,
34+
&.active {
35+
@include input-active();
36+
}
37+
38+
&.error {
39+
@include input-error();
40+
}
41+
}
42+
43+
// Input state mixins
44+
45+
@mixin input-focus() {
46+
border-color: map-deep-get($inputs-focus, border-color, light);
47+
transition: map-get($inputs-transitions, focus-shadow), map-get($inputs-transitions, focus-border-color);
48+
outline: map-get($inputs-focus, outline);
49+
box-shadow: map-get($inputs-shadows, focus-base), map-get($inputs-shadows, focus-spread);
50+
}
51+
52+
@mixin input-disabled() {
53+
background: map-deep-get($inputs-disabled, background, base);
54+
box-shadow: map-get($inputs-shadows, disabled);
55+
border-color: map-deep-get($inputs-disabled, border-color, darker);
56+
color: map-deep-get($inputs-disabled, color, darker);
57+
cursor: map-get($inputs-disabled, cursor);
58+
}
59+
60+
@mixin input-active() {
61+
border-color: map-deep-get($inputs-active, border-color, light);
62+
}
63+
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+
70+
@mixin input-label() {
71+
display: map-get($inputs-label, display);
72+
max-width: map-get($inputs-label, max-width);
73+
font-size: em(map-get($inputs-label, font-size));
74+
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+
}
82+
}

‎scss/variables/inputs.js‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
( function( root, factory ) {
2+
if ( typeof define === "function" && define.amd ) {
3+
define( [ "./chassis" ], factory );
4+
} else if ( typeof exports === "object" ) {
5+
module.exports = factory( require( "./chassis" ) );
6+
} else {
7+
root.chassis = factory( root.chassis );
8+
}
9+
}( this, function( chassis ) {
10+
11+
chassis.inputs = {
12+
"shadows": {
13+
name: "Styles for input shadows",
14+
value: {
15+
"disabled": "0 0 2px 0 rgba(0, 0, 0, 0.12)",
16+
"normal": "0 2px 2px 0 rgba(0, 0, 0, 0.12)",
17+
"focus-base": "0 0 8px 0 rgba(0, 0, 0, 0.08)",
18+
"focus-spread": "0 8px 8px 0 rgba(0, 0, 0, 0.18)",
19+
"error-base": "0 0 2px 0 rgba(198,62,54,0.24)",
20+
"error-spread": "0 2px 2px 0 rgba(198,62,54,0.48)"
21+
}
22+
},
23+
"transitions": {
24+
name: "Transition animations",
25+
value: {
26+
"focus-shadow": "box-shadow .25s",
27+
"focus-border-color": "border-color .25s",
28+
"blur-shadow": "box-shadow .1s",
29+
"blur-border-color": "border-color .1s"
30+
}
31+
},
32+
"label": {
33+
name: "Styles for input label",
34+
value: {
35+
"display": "block",
36+
"max-width": "100%",
37+
"font-size": "18px",
38+
"font-weight": "600",
39+
"margin": "8px"
40+
}
41+
},
42+
"label-error": {
43+
name: "Styles for error labels",
44+
value: {
45+
"font-size": "14px",
46+
color: () => "colors.error",
47+
"font-weight": "400"
48+
}
49+
},
50+
"element": {
51+
name: "Generic styles for single line inputs",
52+
value: {
53+
"padding": "15px",
54+
"margin": "0px",
55+
"border": "1px solid",
56+
"border-color": () => "colors.text",
57+
"border-radius": "3px",
58+
"font-size": "18px",
59+
"width": "100%",
60+
"background": () => "colors.background"
61+
}
62+
},
63+
"disabled": {
64+
name: "Styles for disabled input",
65+
value: {
66+
"border-color": () => "colors.default",
67+
"background": () => "colors.default",
68+
"color": () => "colors.default",
69+
"cursor": "not-allowed"
70+
}
71+
},
72+
"focus": {
73+
name: "Styles for in focus inputs",
74+
value: {
75+
"border-color": () => "colors.info",
76+
"outline": "none"
77+
}
78+
},
79+
"active": {
80+
name: "Styles for active inputs",
81+
value: {
82+
"border-color": () => "colors.info"
83+
}
84+
},
85+
"error": {
86+
name: "Styles for error state of inputs",
87+
value: {
88+
"border-color": () => "colors.error",
89+
"background": () => "colors.error"
90+
}
91+
}
92+
93+
};
94+
return chassis;
95+
} ) );

0 commit comments

Comments
 (0)