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

Commit b6af1c2

Browse files
nashvailnashvail
committed
Inputs: Switched to complete class based styling
1 parent b894f62 commit b6af1c2

File tree

4 files changed

+69
-25
lines changed

4 files changed

+69
-25
lines changed

‎demos/inputs.html‎

Lines changed: 66 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,30 +9,85 @@
99
<link rel="stylesheet" href="demos.css">
1010
</head>
1111
<body>
12-
<h1>Inputs</h1>
13-
<label class="input-label">Disabled: </label>
14-
<input type="text" placeholder="Can't change this really" disabled>
12+
<h2>Inputs</h2>
1513

1614
<label class="input-label">Name: </label>
17-
<input type="text" placeholder="Enter your Name">
15+
<input class="input" type="text" placeholder="Enter your Name">
16+
17+
<label class="input-label">Password: </label>
18+
<input class="input" type="password" placeholder="Choose a password">
19+
20+
<label class="input-label">Color: </label>
21+
<input class="input" type="color">
22+
23+
<label class="input-label">Email: </label>
24+
<input class="input" type="email" placeholder="name@example.com">
25+
26+
<label class="input-label">Date: </label>
27+
<input class="input" type="date">
28+
29+
<label class="input-label">Amount: </label>
30+
<input class="input" type="number" placeholder="XX">
31+
32+
<h2>Inputs (Disabled) </h2>
33+
34+
<label class="input-label">Name: </label>
35+
<input class="input disabled" type="text" placeholder="Enter your Name">
36+
37+
<label class="input-label">Password: </label>
38+
<input class="input disabled" type="password" placeholder="Choose a password">
39+
40+
<label class="input-label">Color: </label>
41+
<input class="input disabled" type="color">
42+
43+
<label class="input-label">Email: </label>
44+
<input class="input disabled" type="email" placeholder="name@example.com">
45+
46+
<label class="input-label">Date: </label>
47+
<input class="input disabled" type="date">
48+
49+
<label class="input-label">Amount: </label>
50+
<input class="input disabled" type="number" placeholder="XX">
51+
52+
<h2>Inputs (Focus) </h2>
53+
54+
<label class="input-label">Name: </label>
55+
<input class="input focus" type="text" placeholder="Enter your Name">
56+
57+
<label class="input-label">Password: </label>
58+
<input class="input focus" type="password" placeholder="Choose a password">
59+
60+
<label class="input-label">Color: </label>
61+
<input class="input focus" type="color">
1862

1963
<label class="input-label">Email: </label>
20-
<input type="email" placeholder="Enter your Email">
64+
<input class="input focus" type="email" placeholder="name@example.com">
65+
66+
<label class="input-label">Date: </label>
67+
<input class="input focus" type="date">
68+
69+
<label class="input-label">Amount: </label>
70+
<input class="input focus" type="number" placeholder="XX">
71+
72+
<h2>Inputs (Active) </h2>
73+
74+
<label class="input-label">Name: </label>
75+
<input class="input active" type="text" placeholder="Enter your Name">
2176

2277
<label class="input-label">Password: </label>
23-
<input type="password" placeholder="Choose a password">
78+
<input class="input active" type="password" placeholder="Choose a password">
2479

2580
<label class="input-label">Color: </label>
26-
<input type="color">
81+
<input class="input active" type="color">
2782

2883
<label class="input-label">Email: </label>
29-
<input type="email" placeholder="name@example.com">
84+
<input class="input active" type="email" placeholder="name@example.com">
3085

31-
<label class="input-label">Month: </label>
32-
<input type="month">
86+
<label class="input-label">Date: </label>
87+
<input class="input active" type="date">
3388

3489
<label class="input-label">Amount: </label>
35-
<input type="number" placeholder="XX">
90+
<input class="input active" type="number" placeholder="XX">
3691

3792
</body>
3893
</html>

‎scss/atoms/inputs/_inputs.scss‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,7 @@
88
"dist/chassis",
99
"mixins";
1010

11-
// Text inputs
12-
input[type=text],
13-
input[type=url],
14-
input[type=email],
15-
input[type=search],
16-
input[type=password],
17-
// Other inputs
18-
input[type=number],
19-
input[type=color],
20-
input[type=tel],
21-
input[type=month] {
11+
.input {
2212
@include input();
2313
}
2414

‎scss/atoms/inputs/_mixins.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,4 +62,3 @@ $margin: em(map-get($inputs-single-line, margin));
6262
font-size: em(map-get($inputs-label, font-size));
6363
font-weight: map-get($inputs-label, font-weight);
6464
}
65-

‎scss/variables/inputs.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ chassis.inputs = {
4444
"border-radius": "3px",
4545
"font-size": "18px",
4646
"width": "100%",
47-
"background" : () => "colors.background"
47+
"background": () => "colors.background"
4848
}
4949
},
5050
"disabled": {
@@ -66,7 +66,7 @@ chassis.inputs = {
6666
}
6767
},
6868
"active": {
69-
name: "Styles for active inputs" ,
69+
name: "Styles for active inputs",
7070
value: {
7171
"border-color": () => "colors.info"
7272
}

0 commit comments

Comments
 (0)