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

Commit b894f62

Browse files
nashvailnashvail
committed
Inputs: removed unnecessary files + classes for states
1 parent 3a92889 commit b894f62

File tree

7 files changed

+113
-55
lines changed

7 files changed

+113
-55
lines changed

‎demos/inputs.html

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
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+
<h1>Inputs</h1>
13+
<label class="input-label">Disabled: </label>
14+
<input type="text" placeholder="Can't change this really" disabled>
15+
16+
<label class="input-label">Name: </label>
17+
<input type="text" placeholder="Enter your Name">
18+
19+
<label class="input-label">Email: </label>
20+
<input type="email" placeholder="Enter your Email">
21+
22+
<label class="input-label">Password: </label>
23+
<input type="password" placeholder="Choose a password">
24+
25+
<label class="input-label">Color: </label>
26+
<input type="color">
27+
28+
<label class="input-label">Email: </label>
29+
<input type="email" placeholder="[email protected]">
30+
31+
<label class="input-label">Month: </label>
32+
<input type="month">
33+
34+
<label class="input-label">Amount: </label>
35+
<input type="number" placeholder="XX">
36+
37+
</body>
38+
</html>

‎demos/inputs/inputs.css

Whitespace-only changes.

‎demos/inputs/inputs.html

-20
This file was deleted.

‎scss/atoms/inputs/_inputs.scss

+11-15
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,20 @@
88
"dist/chassis",
99
"mixins";
1010

11+
// Text inputs
1112
input[type=text],
1213
input[type=url],
13-
input[type=tel],
14-
input[type=number],
15-
input[type=color],
1614
input[type=email],
1715
input[type=search],
18-
input[type=password] {
19-
@include input-normal();
20-
&:focus {
21-
@include input-focus();
22-
}
23-
24-
&:active {
25-
// @include input-active();
26-
}
16+
input[type=password],
17+
// Other inputs
18+
input[type=number],
19+
input[type=color],
20+
input[type=tel],
21+
input[type=month] {
22+
@include input();
23+
}
2724

28-
&:disabled {
29-
@include input-disabled();
30-
}
25+
.input-label {
26+
@include input-label();
3127
}

‎scss/atoms/inputs/_mixins.scss

+38-4
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,61 @@
55
* ==========================================================================
66
*/
77

8-
@mixin input-normal() {
8+
$margin: em(map-get($inputs-single-line, margin));
9+
10+
@mixin input() {
911
padding: em(map-get($inputs-single-line, padding));
10-
margin: em(map-get($inputs-single-line, margin));
12+
margin: $margin 0;
1113
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);
1216
box-shadow: map-get($inputs-shadows, normal);
1317
border-radius: em(map-get($inputs-single-line, border-radius));
1418
transition: map-get($inputs-transitions, blur);
1519
font-size: em(map-get($inputs-single-line, font-size));
1620
width: map-get($inputs-single-line, width);
21+
22+
&:focus,
23+
&.focus {
24+
@include input-focus();
25+
}
26+
27+
&:disabled,
28+
&.disabled {
29+
@include input-disabled();
30+
}
31+
32+
&:active,
33+
&.active {
34+
@include input-active();
35+
}
1736
}
1837

1938
@mixin input-focus() {
2039
border: map-get($inputs-focus, border);
40+
border-color: map-deep-get($inputs-focus, border-color, light);
2141
transition: map-get($inputs-transitions, focus);
2242
outline: map-get($inputs-focus, outline);
2343
box-shadow: map-get($inputs-shadows, focus-base), map-get($inputs-shadows, focus-spread);
2444
}
2545

2646
@mixin input-disabled() {
27-
background: map-get($inputs-disabled, background);
47+
background: map-deep-get($inputs-disabled, background, base);
2848
box-shadow: map-get($inputs-shadows, disabled);
2949
border: map-get($inputs-disabled, border);
30-
color: map-get($inputs-disabled, color);
50+
border-color: map-deep-get($inputs-disabled, border-color, darker);
51+
color: map-deep-get($inputs-disabled, color, darker);
52+
cursor: map-get($inputs-disabled, cursor);
3153
}
54+
55+
@mixin input-active() {
56+
border-color: map-deep-get($inputs-active, border-color, light);
57+
}
58+
59+
@mixin input-label() {
60+
display: map-get($inputs-label, display);
61+
max-width: map-get($inputs-label, max-width);
62+
font-size: em(map-get($inputs-label, font-size));
63+
font-weight: map-get($inputs-label, font-weight);
64+
}
65+

‎scss/variables/colors.js

-8
Original file line numberDiff line numberDiff line change
@@ -75,14 +75,6 @@ chassis.colors = {
7575
value: {
7676
"base": "#fff"
7777
}
78-
},
79-
"grey": {
80-
name: "Shades of grey",
81-
value: {
82-
"lighter": "#FEF9F9",
83-
"light": "#D2CECE",
84-
"black": "#000000"
85-
}
8678
}
8779
};
8880
return chassis;

‎scss/variables/inputs.js

+26-8
Original file line numberDiff line numberDiff line change
@@ -25,33 +25,51 @@ chassis.inputs = {
2525
"blur": "all .1s"
2626
}
2727
},
28+
"label": {
29+
name: "Styles for input label",
30+
value: {
31+
"display": "inline-block",
32+
"max-width": "100%",
33+
"font-size": "18px",
34+
"font-weight": "600"
35+
}
36+
},
2837
"single-line": {
2938
name: "Generic styles for single line inputs",
3039
value: {
3140
"padding": "15px",
3241
"margin": "8px",
33-
"border": "1px solid " + chassis.colors.grey.value.black,
34-
"background": chassis.colors.background.value.base,
42+
"border": "1px solid",
43+
"border-color": () => "colors.text",
3544
"border-radius": "3px",
3645
"font-size": "18px",
37-
"width": "100%"
46+
"width": "100%",
47+
"background" : () => "colors.background"
3848
}
3949
},
4050
"disabled": {
4151
name: "Styles for disabled input",
4252
value: {
43-
"border": "1px solid " + chassis.colors.grey.value.light,
44-
"background": chassis.colors.grey.value.lighter,
45-
"color": chassis.colors.grey.value.light
53+
"border": "1px solid",
54+
"border-color": () => "colors.default",
55+
"background": () => "colors.default",
56+
"color": () => "colors.default",
57+
"cursor": "not-allowed"
4658
}
4759
},
4860
"focus": {
4961
name: "Styles for in focus inputs",
5062
value: {
51-
"border": "1px solid " + chassis.colors.info.value.light,
52-
"background": chassis.colors.background.value.base,
63+
"border": "1px solid",
64+
"border-color": () => "colors.info",
5365
"outline": "none"
5466
}
67+
},
68+
"active": {
69+
name: "Styles for active inputs" ,
70+
value: {
71+
"border-color": () => "colors.info"
72+
}
5573
}
5674
};
5775
return chassis;

0 commit comments

Comments
 (0)