Skip to content

Commit 0b0fe21

Browse files
CITguyCITguy
authored
Merge pull request #76 from rackerlabs/surf-512-build-text-input-styles
feat(input): Build Text Input Styles
2 parents 196f1a2 + 3760cb2 commit 0b0fe21

File tree

5 files changed

+228
-0
lines changed

5 files changed

+228
-0
lines changed

‎source/_data/nav.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,6 @@ components:
1313
Reveal: reveal
1414
Table: table
1515
Tabset: tabset
16+
"Text Input": text-input
1617
Tooltip: tooltip
1718
Typography: typography

‎source/_less/vars.less‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,4 +72,8 @@
7272
@grid-break-desk: 75em; // ~1200px
7373
@grid-break-wall: 90em; // ~1440px
7474

75+
// ==== FOCUS STATE =====
76+
@focus-glow: 0 0 4px fade(@cyan-700, 50%);
77+
@focus-glow-invalid: 0 0 4px fade(@red-900, 50%);
78+
7579
@app-nav-width: 15rem;

‎source/components/text-input/index.html‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
---
2+
title: Text Input
3+
assets:
4+
- helix-ui.css
5+
---
6+
{% extends 'component.njk' %}
7+
{% block content %}
8+
9+
<section>
10+
<h2 class="hxSectionTitle" id="text">Text</h2>
11+
<div class="demo">
12+
<form>
13+
<div class="hxFormGroup">
14+
<label for="txt">Default</label>
15+
<input type="text" id="txt" placeholder="Text">
16+
</div>
17+
<div class="hxFormGroup">
18+
<label for="txtInvalid">Invalid</label>
19+
<input type="text" class="-hxInvalid" id="txtInvalid" placeholder="Text">
20+
</div>
21+
<div class="hxFormGroup">
22+
<label for="txtDisabled">Disabled</label>
23+
<input type="text" id="txtDisabled" placeholder="Text" disabled>
24+
</div>
25+
</form>
26+
</div>
27+
{% code 'html' %}
28+
<form>
29+
<div class="hxFormGroup">
30+
<label for="txt">Default</label>
31+
<input type="text" id="txt" placeholder="Text">
32+
</div>
33+
<div class="hxFormGroup">
34+
<label for="txtInvalid">Invalid</label>
35+
<input type="text" class="-hxInvalid" id="txtInvalid" placeholder="Text">
36+
</div>
37+
<div class="hxFormGroup">
38+
<label for="txtDisabled">Disabled</label>
39+
<input type="text" id="txtDisabled" placeholder="Text" disabled>
40+
</div>
41+
</form>
42+
{% endcode %}
43+
</section>
44+
45+
<section>
46+
<h2 class="hxSectionTitle" id="email">Email</h2>
47+
<div class="demo">
48+
<form>
49+
<div class="hxFormGroup">
50+
<label for="txtEmail">Default</label>
51+
<input type="email" id="txtEmail" placeholder="Email">
52+
</div>
53+
<div class="hxFormGroup">
54+
<label for="txtInvalidEmail">Invalid</label>
55+
<input type="email" class="-hxInvalid" id="txtInvalidEmail" placeholder="Email">
56+
</div>
57+
<div class="hxFormGroup">
58+
<label for="txtDisabledEmail">Disabled</label>
59+
<input type="email" id="txtDisabledEmail" placeholder="Email" disabled>
60+
</div>
61+
</form>
62+
</div>
63+
{% code 'html' %}
64+
<form>
65+
<div class="hxFormGroup">
66+
<label for="txtEmail">Default</label>
67+
<input type="email" id="txtEmail" placeholder="Email">
68+
</div>
69+
<div class="hxFormGroup">
70+
<label for="txtInvalidEmail">Invalid</label>
71+
<input type="email" class="-hxInvalid" id="txtInvalidEmail" placeholder="Email">
72+
</div>
73+
<div class="hxFormGroup">
74+
<label for="txtDisabledEmail">Disabled</label>
75+
<input type="email" id="txtDisabledEmail" placeholder="Email" disabled>
76+
</div>
77+
</form>
78+
{% endcode %}
79+
</section>
80+
81+
<section>
82+
<h2 class="hxSectionTitle" id="password">Password</h2>
83+
<div class="demo">
84+
<form>
85+
<div class="hxFormGroup">
86+
<label for="txtPassword">Password</label>
87+
<input type="password" id="txtPassword" placeholder="Password">
88+
</div>
89+
<div class="hxFormGroup">
90+
<label for="txtInvalidPassword">Invalid</label>
91+
<input type="password" class="-hxInvalid" id="txtInvalidPassword" placeholder="Password">
92+
</div>
93+
<div class="hxFormGroup">
94+
<label for="txtDisabledPassword">Disabled</label>
95+
<input type="password" id="txtDisabledPassword" placeholder="Password" disabled>
96+
</div>
97+
</form>
98+
</div>
99+
{% code 'html' %}
100+
<form>
101+
<div class="hxFormGroup">
102+
<label for="txtPassword">Password</label>
103+
<input type="password" id="txtPassword" placeholder="Password">
104+
</div>
105+
<div class="hxFormGroup">
106+
<label for="txtInvalidPassword">Invalid</label>
107+
<input type="password" class="-hxInvalid" id="txtInvalidPassword" placeholder="Password">
108+
</div>
109+
<div class="hxFormGroup">
110+
<label for="txtDisabledPassword">Disabled</label>
111+
<input type="password" id="txtDisabledPassword" placeholder="Password" disabled>
112+
</div>
113+
</form>
114+
{% endcode %}
115+
</section>
116+
117+
<section>
118+
<h2 class="hxSectionTitle" id="text-area">Text Area</h2>
119+
<div class="demo">
120+
<form>
121+
<div class="hxFormGroup">
122+
<label for="txtArea">Default</label>
123+
<textarea rows="3" id="txtArea" placeholder="Enter your comment here"></textarea>
124+
</div>
125+
<div class="hxFormGroup">
126+
<label for="txtAreaInvalid">Invalid</label>
127+
<textarea rows="3" class="-hxInvalid" id="txtAreaInvalid" placeholder="Enter your comment here"></textarea>
128+
</div>
129+
<div class="hxFormGroup">
130+
<label for="txtAreaDisabled">Disabled</label>
131+
<textarea rows="3" id="txtAreaDisabled" placeholder="Enter your comment here" disabled></textarea>
132+
</div>
133+
</form>
134+
</div>
135+
{% code 'html' %}
136+
<form>
137+
<div class="hxFormGroup">
138+
<label for="txtArea">Default</label>
139+
<textarea rows="3" id="txtArea" placeholder="Enter your comment here"></textarea>
140+
</div>
141+
<div class="hxFormGroup">
142+
<label for="txtAreaInvalid">Invalid</label>
143+
<textarea rows="3" class="-hxInvalid" id="txtAreaInvalid" placeholder="Enter your comment here"></textarea>
144+
</div>
145+
<div class="hxFormGroup">
146+
<label for="txtAreaDisabled">Disabled</label>
147+
<textarea rows="3" id="txtAreaDisabled" placeholder="Enter your comment here" disabled></textarea>
148+
</div>
149+
</form>
150+
{% endcode %}
151+
</section>
152+
153+
<section>
154+
<h2 class="hxSectionTitle" id="css-classes">CSS Classes</h2>
155+
156+
<dl>
157+
<dt><code>.-hxInvalid</code></dt>
158+
<dd>Add to form input to apply invalid styling</dd>
159+
</dl>
160+
</section>
161+
162+
{% endblock %}

‎source/components/text-input/text-input.less‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
html input,
2+
textarea {
3+
background-color: @gray-0;
4+
border: 1px solid @gray-500;
5+
border-radius: 2px;
6+
color: @gray-800;
7+
display: block;
8+
font-size: 1rem; // 16px
9+
padding: 8px;
10+
width: 100%;
11+
12+
/*
13+
https://css-tricks.com/snippets/css/style-placeholder-text/
14+
*/
15+
&::-webkit-input-placeholder { // Chrome
16+
color: @gray-600;
17+
}
18+
19+
&::-moz-placeholder { // Firefox 19+
20+
color: @gray-600;
21+
opacity: 1;
22+
}
23+
24+
&:-ms-input-placeholder { // IE 10+
25+
color: @gray-600;
26+
}
27+
28+
&::placeholder {
29+
color: @gray-600;
30+
}
31+
32+
&:focus {
33+
outline: 0;
34+
border-color: @cyan-700;
35+
box-shadow: @focus-glow;
36+
&.-hxInvalid {
37+
box-shadow: @focus-glow-invalid;
38+
}
39+
}
40+
41+
&.-hxInvalid {
42+
border: 2px solid @red-900;
43+
}
44+
45+
&[disabled] {
46+
background-color: @gray-50;
47+
border-color: @gray-300;
48+
color: @gray-400;
49+
cursor: not-allowed;
50+
}
51+
}
52+
53+
textarea[disabled] {
54+
resize: none;
55+
}
56+
57+
// TODO: move to appropriate file
58+
.hxFormGroup {
59+
margin-bottom: 1rem;
60+
}

‎source/helix-ui.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
@import 'reveal/reveal';
2424
@import 'table/table';
2525
@import 'tabset/tabset';
26+
@import 'text-input/text-input';
2627
@import 'typography/typography';
2728

2829
/* ===== Text Helpers ===== */

0 commit comments

Comments
 (0)