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

Commit 6bcf58e

Browse files
nashvailnashvail
committed
Inputs: Added two new input sizes
1 parent 416f942 commit 6bcf58e

File tree

5 files changed

+248
-3
lines changed

5 files changed

+248
-3
lines changed

‎demos/inputs.html

Lines changed: 213 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
</head>
1111
<body>
1212

13-
<h2>Inputs</h2>
13+
<h2>Inputs - (Size: Default)</h2>
1414

1515
<label class="input-label">Name: </label>
1616
<input class="input" type="text" placeholder="Enter your Name">
@@ -116,6 +116,218 @@ <h2>Inputs (Error) </h2>
116116
<input class="input error" type="number" placeholder="XX">
117117
<label class="input-label error">We were unable to process your input.</label>
118118

119+
<h2>Inputs - (Size: Small)</h2>
120+
121+
<label class="input-label">Name: </label>
122+
<input class="input input-sm" type="text" placeholder="Enter your Name">
123+
124+
<label class="input-label">Password: </label>
125+
<input class="input input-sm" type="password" placeholder="Choose a password">
126+
127+
<!-- <label class="input-label">Color: </label>
128+
<input class="input" type="color">
129+
-->
130+
<label class="input-label">Email: </label>
131+
<input class="input input-sm" type="email" placeholder="[email protected]">
132+
133+
<!-- <label class="input-label">Date: </label>
134+
<input class="input input-sm" type="date">
135+
-->
136+
<label class="input-label">Amount: </label>
137+
<input class="input input-sm" type="number" placeholder="XX">
138+
139+
<h2>Inputs (Disabled) </h2>
140+
141+
<label class="input-label">Name: </label>
142+
<input class="input disabled input-sm" type="text" placeholder="Enter your Name">
143+
144+
<label class="input-label">Password: </label>
145+
<input class="input disabled input-sm" type="password" placeholder="Choose a password">
146+
147+
<!-- <label class="input-label">Color: </label>
148+
<input class="input disabled input-sm" type="color">
149+
-->
150+
<label class="input-label">Email: </label>
151+
<input class="input disabled input-sm" type="email" placeholder="[email protected]">
152+
153+
<!-- <label class="input-label">Date: </label>
154+
<input class="input disabled input-sm" type="date">
155+
-->
156+
<label class="input-label">Amount: </label>
157+
<input class="input disabled input-sm" type="number" placeholder="XX">
158+
159+
<h2>Inputs (Focus) </h2>
160+
161+
<label class="input-label">Name: </label>
162+
<input class="input focus input-sm" type="text" placeholder="Enter your Name">
163+
164+
<label class="input-label">Password: </label>
165+
<input class="input focus input-sm" type="password" placeholder="Choose a password">
166+
167+
<!-- <label class="input-label">Color: </label>
168+
<input class="input focus input-sm" type="color">
169+
-->
170+
<label class="input-label">Email: </label>
171+
<input class="input focus input-sm" type="email" placeholder="[email protected]">
172+
173+
<!-- <label class="input-label">Date: </label>
174+
<input class="input focus input-sm" type="date">
175+
-->
176+
<label class="input-label">Amount: </label>
177+
<input class="input focus input-sm" type="number" placeholder="XX">
178+
179+
<h2>Inputs (Active) </h2>
180+
181+
<label class="input-label">Name: </label>
182+
<input class="input active input-sm" type="text" placeholder="Enter your Name">
183+
184+
<label class="input-label">Password: </label>
185+
<input class="input active input-sm" type="password" placeholder="Choose a password">
186+
187+
<!-- <label class="input-label">Color: </label>
188+
<input class="input active input-sm" type="color">
189+
-->
190+
<label class="input-label">Email: </label>
191+
<input class="input active input-sm" type="email" placeholder="[email protected]">
192+
193+
<!-- <label class="input-label">Date: </label>
194+
<input class="input active input-sm" type="date">
195+
-->
196+
<label class="input-label">Amount: </label>
197+
<input class="input active input-sm" type="number" placeholder="XX">
198+
199+
<h2>Inputs (Error) </h2>
200+
201+
<label class="input-label">Name: </label>
202+
<input class="input error input-sm" type="text" placeholder="Enter your Name">
203+
<label class="input-label error">We were unable to process your input.</label>
204+
205+
<label class="input-label">Password: </label>
206+
<input class="input error input-sm" type="password" placeholder="Choose a password">
207+
<label class="input-label error">We were unable to process your input.</label>
208+
209+
<!-- <label class="input-label">Color: </label>
210+
<input class="input error input-sm" type="color">
211+
<label class="input-label error">We were unable to process your input.</label>
212+
-->
213+
<label class="input-label">Email: </label>
214+
<input class="input error input-sm" type="email" placeholder="[email protected]">
215+
<label class="input-label error">We were unable to process your input.</label>
216+
217+
<!-- <label class="input-label">Date: </label>
218+
<input class="input error input-sm" type="date">
219+
<label class="input-label error">We were unable to process your input.</label>
220+
-->
221+
<label class="input-label">Amount: </label>
222+
<input class="input error input-sm" type="number" placeholder="XX">
223+
<label class="input-label error">We were unable to process your input.</label>
224+
225+
<h2>Inputs - (Size: Large)</h2>
226+
227+
<label class="input-label">Name: </label>
228+
<input class="input input-lg" type="text" placeholder="Enter your Name">
229+
230+
<label class="input-label">Password: </label>
231+
<input class="input input-lg" type="password" placeholder="Choose a password">
232+
233+
<!-- <label class="input-label">Color: </label>
234+
<input class="input" type="color">
235+
-->
236+
<label class="input-label">Email: </label>
237+
<input class="input input-lg" type="email" placeholder="[email protected]">
238+
239+
<!-- <label class="input-label">Date: </label>
240+
<input class="input input-lg" type="date">
241+
-->
242+
<label class="input-label">Amount: </label>
243+
<input class="input input-lg" type="number" placeholder="XX">
244+
245+
<h2>Inputs (Disabled) </h2>
246+
247+
<label class="input-label">Name: </label>
248+
<input class="input disabled input-lg" type="text" placeholder="Enter your Name">
249+
250+
<label class="input-label">Password: </label>
251+
<input class="input disabled input-lg" type="password" placeholder="Choose a password">
252+
253+
<!-- <label class="input-label">Color: </label>
254+
<input class="input disabled input-lg" type="color">
255+
-->
256+
<label class="input-label">Email: </label>
257+
<input class="input disabled input-lg" type="email" placeholder="[email protected]">
258+
259+
<!-- <label class="input-label">Date: </label>
260+
<input class="input disabled input-lg" type="date">
261+
-->
262+
<label class="input-label">Amount: </label>
263+
<input class="input disabled input-lg" type="number" placeholder="XX">
264+
265+
<h2>Inputs (Focus) </h2>
266+
267+
<label class="input-label">Name: </label>
268+
<input class="input focus input-lg" type="text" placeholder="Enter your Name">
269+
270+
<label class="input-label">Password: </label>
271+
<input class="input focus input-lg" type="password" placeholder="Choose a password">
272+
273+
<!-- <label class="input-label">Color: </label>
274+
<input class="input focus input-lg" type="color">
275+
-->
276+
<label class="input-label">Email: </label>
277+
<input class="input focus input-lg" type="email" placeholder="[email protected]">
278+
279+
<!-- <label class="input-label">Date: </label>
280+
<input class="input focus input-lg" type="date">
281+
-->
282+
<label class="input-label">Amount: </label>
283+
<input class="input focus input-lg" type="number" placeholder="XX">
284+
285+
<h2>Inputs (Active) </h2>
286+
287+
<label class="input-label">Name: </label>
288+
<input class="input active input-lg" type="text" placeholder="Enter your Name">
289+
290+
<label class="input-label">Password: </label>
291+
<input class="input active input-lg" type="password" placeholder="Choose a password">
292+
293+
<!-- <label class="input-label">Color: </label>
294+
<input class="input active input-lg" type="color">
295+
-->
296+
<label class="input-label">Email: </label>
297+
<input class="input active input-lg" type="email" placeholder="[email protected]">
298+
299+
<!-- <label class="input-label">Date: </label>
300+
<input class="input active input-lg" type="date">
301+
-->
302+
<label class="input-label">Amount: </label>
303+
<input class="input active input-lg" type="number" placeholder="XX">
304+
305+
<h2>Inputs (Error) </h2>
306+
307+
<label class="input-label">Name: </label>
308+
<input class="input error input-lg" type="text" placeholder="Enter your Name">
309+
<label class="input-label error">We were unable to process your input.</label>
310+
311+
<label class="input-label">Password: </label>
312+
<input class="input error input-lg" type="password" placeholder="Choose a password">
313+
<label class="input-label error">We were unable to process your input.</label>
314+
315+
<!-- <label class="input-label">Color: </label>
316+
<input class="input error input-lg" type="color">
317+
<label class="input-label error">We were unable to process your input.</label>
318+
-->
319+
<label class="input-label">Email: </label>
320+
<input class="input error input-lg" type="email" placeholder="[email protected]">
321+
<label class="input-label error">We were unable to process your input.</label>
322+
323+
<!-- <label class="input-label">Date: </label>
324+
<input class="input error input-lg" type="date">
325+
<label class="input-label error">We were unable to process your input.</label>
326+
-->
327+
<label class="input-label">Amount: </label>
328+
<input class="input error input-lg" type="number" placeholder="XX">
329+
<label class="input-label error">We were unable to process your input.</label>
330+
119331

120332
</body>
121333
</html>

‎scss/atoms/inputs/_inputs.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,13 @@
1515
.input-label {
1616
@include input-label();
1717
}
18+
19+
/* Input Sizes */
20+
21+
.input-lg {
22+
@include input-lg();
23+
}
24+
25+
.input-sm {
26+
@include input-sm();
27+
}

‎scss/atoms/inputs/_mixins.scss

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ $margin-label: em(map-get($inputs-label, margin));
4040
}
4141
}
4242

43-
// Input state mixins
43+
/* Input States */
4444

4545
@mixin input-focus() {
4646
border-color: map-deep-get($inputs-focus, border-color, light);
@@ -80,3 +80,13 @@ $margin-label: em(map-get($inputs-label, margin));
8080
font-weight: map-get($inputs-label-error, font-weight);
8181
}
8282
}
83+
84+
/* Input Sizes */
85+
86+
@mixin input-lg() {
87+
font-size: em(map-get($inputs-lg, font-size));
88+
}
89+
90+
@mixin input-sm() {
91+
font-size: em(map-get($inputs-sm, font-size));
92+
}

‎scss/style.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
@import
1111
"atoms/icons/icons",
1212
"atoms/typography/typography",
13-
"atoms/buttons/buttons";
13+
"atoms/buttons/buttons",
14+
"atoms/inputs/inputs";
1415

1516
@import
1617
"views/main";

‎scss/variables/inputs.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,18 @@ chassis.inputs = {
8888
"border-color": () => "colors.error",
8989
"background": () => "colors.error"
9090
}
91+
},
92+
"lg": {
93+
name: "Styles for large sized inputs",
94+
value: {
95+
"font-size": "30px"
96+
}
97+
},
98+
"sm": {
99+
name: "Styles for small sized inputs",
100+
value: {
101+
"font-size": "14px"
102+
}
91103
}
92104

93105
};

0 commit comments

Comments
 (0)