Skip to content

Commit bd3f6a3

Browse files
author
Ire Aderinokun
committed
version 1.2, add suport for native css variables
1 parent 5e9f11d commit bd3f6a3

5 files changed

Lines changed: 294 additions & 23 deletions

File tree

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules
2+
gulpfile.js
3+
package.json
4+
example

‎bower.json‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@
22
"name": "formhack",
33
"description": "FormHack is a hackable SASS-based form reset. In addition to being a css reset for form elements, it provides a few variables that allow you to easily change some common attributes.",
44
"main": [
5-
"_formhack.sass",
6-
"_formhack.scss"
5+
"formhack.sass",
6+
"formhack.scss",
7+
"formhack.css"
78
],
89
"keywords": [
910
"sass",
@@ -12,11 +13,17 @@
1213
"form"
1314
],
1415
"authors": [
15-
"Ire Aderinokun <ire@ireaderinokun.com> (http://bitsofco.de)"
16+
"Ire Aderinokun <ire@ireaderinokun.com> (http://ireaderinokun.com)"
1617
],
1718
"license": "MIT",
1819
"repository": {
1920
"type": "git",
2021
"url": "git://github.com/ireade/formhack.git"
21-
}
22+
},
23+
"ignore": [
24+
"example",
25+
"gulpfile.js",
26+
"package.json",
27+
"node_modules"
28+
]
2229
}

‎formhack.css‎

Lines changed: 273 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,273 @@
1+
/* FormHack v1.2.0 (formhack.io) */
2+
3+
/* Config ----------------------------- */
4+
:root {
5+
6+
/* Font */
7+
--fh-font-family: 'Raleway', sans-serif;
8+
--fh-font-size: 16px;
9+
--fh-font-color: rgb(40, 40, 40);
10+
11+
/* Borders */
12+
--fh-border-radius: 5px;
13+
--fh-border-width: 1px;
14+
--fh-border-style: solid;
15+
--fh-border-color: rgb(200, 200, 200);
16+
17+
/* Inputs, Textareas, Select, Option */
18+
--fh-input-height: 40px;
19+
--fh-input-width: 100%;
20+
--fh-input-max-width: 400px;
21+
--fh-input-bg-color: #fff;
22+
--fh-focus-bg-color: rgb(220, 220, 220);
23+
--fh-focus-border-color: var(--fh-border-color);
24+
--fh-focus-font-color: var(--fh-font-color);
25+
26+
/* Select Vendor Styling */
27+
--fh-select-vendor-styling: none; /* comment this out to maintain vendor styling */
28+
29+
30+
/* Buttons & Input Submits */
31+
--fh-button-height: 40px;
32+
--fh-button-width: 100%;
33+
--fh-button-max-width: 200px;
34+
--fh-button-font-color: var(--fh-font-color);
35+
--fh-button-bg-color: var(--fh-focus-bg-color);
36+
--fh-button-hover-bg-color: var(--fh-border-color);
37+
--fh-button-hover-font-color: var(--fh-font-color);
38+
39+
/* Layout */
40+
--fh-layout-display: block;
41+
--fh-layout-margin: 10px 0; /* change to "10px auto" to center */
42+
--fh-layout-text-align: left;
43+
}
44+
45+
46+
47+
/* Global Reset Styles ------------------ */
48+
49+
input,
50+
textarea,
51+
select,
52+
option,
53+
optgroup,
54+
button,
55+
legend,
56+
fieldset {
57+
box-sizing: border-box;
58+
outline: none;
59+
60+
font-family: var(--fh-font-family);
61+
font-size: var(--fh-font-size);
62+
color: var(--fh-font-color);
63+
vertical-align: top;
64+
65+
display: var(--fh-layout-display);
66+
margin: var(--fh-layout-margin);
67+
text-align: var(--fh-layout-text-align);
68+
}
69+
70+
71+
datalist {
72+
font-family: var(--fh-font-family);
73+
font-size: var(--fh-font-size);
74+
}
75+
76+
label {
77+
display: var(--fh-layout-display);
78+
margin: var(--fh-layout-margin);
79+
text-align: var(--fh-layout-text-align);
80+
}
81+
82+
83+
84+
/* Input & Textarea ------------------ */
85+
86+
/* Fields with standard width */
87+
input[type="text"],
88+
input[type="email"],
89+
input[type="password"],
90+
input[type="search"],
91+
input[type="color"],
92+
input[type="date"],
93+
input[type="datetime-local"],
94+
input[type="month"],
95+
input[type="number"],
96+
input[type="tel"],
97+
input[type="time"],
98+
input[type="url"],
99+
input[type="week"],
100+
input[list],
101+
input[type="file"],
102+
select,
103+
textarea {
104+
width: var(--fh-input-width);
105+
max-width: var(--fh-input-max-width);
106+
padding: calc( var(--fh-input-height) / 5 );
107+
background-color: var(--fh-input-bg-color);
108+
109+
border-radius: var(--fh-border-radius);
110+
border-width: var(--fh-border-width);
111+
border-style: var(--fh-border-style);
112+
border-color: var(--fh-border-color);
113+
}
114+
115+
/* Fields with standard height */
116+
input[type="text"],
117+
input[type="email"],
118+
input[type="password"],
119+
input[type="search"],
120+
input[type="color"],
121+
input[type="date"],
122+
input[type="datetime-local"],
123+
input[type="month"],
124+
input[type="number"],
125+
input[type="tel"],
126+
input[type="time"],
127+
input[type="url"],
128+
input[type="week"],
129+
input[list] {
130+
height: var(--fh-input-height);
131+
-webkit-appearance: none;
132+
}
133+
134+
/* Other */
135+
136+
textarea {
137+
-webkit-appearance: none;
138+
overflow: auto;
139+
}
140+
141+
input[type="range"] {
142+
height: var(--fh-input-height);
143+
width: var(--fh-input-width);
144+
max-width: var(--fh-input-max-width);
145+
}
146+
147+
input[type="file"] {
148+
min-height: var(--fh-input-height);
149+
}
150+
151+
input[type="search"] {
152+
height: var(--fh-input-height);
153+
-webkit-appearance: none;
154+
}
155+
input[type="search"]::-webkit-search-cancel-button,
156+
input[type="search"]::-webkit-search-decoration {
157+
-webkit-appearance: none;
158+
}
159+
160+
input[type="checkbox"],
161+
input[type="radio"] {
162+
display: inline-block;
163+
vertical-align: middle;
164+
}
165+
/* For checkbox and radio to be centered, need to wrap the input and label in a span -
166+
/* .checkbox-container {
167+
/* display: block;
168+
/* text-align: center;
169+
/* }
170+
171+
172+
/* Select ------------------ */
173+
174+
select {
175+
height: var(--fh-input-height);
176+
177+
-webkit-appearance: var(--fh-select-vendor-styling, menulist);
178+
-moz-appearance: var(--fh-select-vendor-styling, menulist);
179+
-ms-appearance: var(--fh-select-vendor-styling, menulist);
180+
-o-appearance: var(--fh-select-vendor-styling, menulist);
181+
182+
183+
}
184+
185+
select[multiple] {
186+
height: auto;
187+
min-height: var(--fh-input-height);
188+
padding: 0;
189+
}
190+
191+
select[multiple] option {
192+
margin: 0;
193+
padding: calc( var(--fh-input-height) / 5 );
194+
}
195+
196+
/* Fieldset ------------------ */
197+
198+
fieldset {
199+
padding: 0;
200+
border: 0;
201+
}
202+
203+
legend {
204+
padding: 0;
205+
font-weight: inherit;
206+
}
207+
208+
/* Buttons, Input Type Submit/Reset ------------------ */
209+
210+
button,
211+
input[type="button"],
212+
input[type="submit"],
213+
input[type="reset"],
214+
input[type="image"] {
215+
height: var(--fh-button-height);
216+
width: var(--fh-button-width);
217+
max-width: var(--fh-button-max-width);
218+
background-color: var(--fh-button-bg-color);
219+
padding: calc( var(--fh-input-height) / 5 );
220+
cursor: pointer;
221+
222+
color: var(--fh-button-font-color);
223+
font-weight: 700;
224+
225+
-webkit-appearance: none;
226+
-moz-appearance: none;
227+
228+
border-radius: var(--fh-border-radius);
229+
border-width: var(--fh-border-width);
230+
border-style: var(--fh-border-style);
231+
border-color: var(--fh-border-color);
232+
}
233+
234+
input[type="image"] {
235+
text-align: center;
236+
padding: calc( var(--fh-input-height) / 5 );
237+
}
238+
239+
/* States ------------------ */
240+
241+
input[disabled],
242+
textarea[disabled],
243+
select[disabled],
244+
option[disabled],
245+
button[disabled] {
246+
cursor: not-allowed;
247+
}
248+
249+
input:focus,
250+
textarea:focus,
251+
select:focus,
252+
option:focus,
253+
button:focus {
254+
background-color: var(--fh-focus-bg-color);
255+
border-color: var(--fh-focus-border-color);
256+
}
257+
258+
input[type="checkbox"]:focus,
259+
input[type="radio"]:focus {
260+
outline: var(--fh-focus-border-color) solid 2px;
261+
}
262+
263+
button:hover,
264+
input[type="button"]:hover,
265+
input[type="submit"]:hover,
266+
input[type="reset"]:hover,
267+
button:focus,
268+
input[type="button"]:focus,
269+
input[type="submit"]:focus,
270+
input[type="reset"]:focus {
271+
background-color: var(--fh-button-hover-bg-color);
272+
color: var(--fh-button-hover-font-color);
273+
}

_formhack.sass renamed to formhack.sass

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* FormHack v1.1.0 (formhack.io) */
1+
/* FormHack v1.2.0 (formhack.io) */
22

33
// Config -----------------------------
44
@@ -23,7 +23,7 @@ $fh-focus-border-color: $fh-border-color !default
2323
$fh-focus-font-color: $fh-font-color !default
2424

2525
// Select Vendor Styling
26-
$fh-allow-vendor-styling: true !default
26+
$fh-allow-select-vendor-styling: true !default
2727

2828
// Fieldset & Legend Styling
2929
$fh-fieldset-bare: false !default
@@ -105,8 +105,6 @@ textarea
105105
padding: $fh-input-height / 5
106106
background-color: $fh-input-bg-color
107107

108-
-webkit-border-radius: $fh-border-radius
109-
-moz-border-radius: $fh-border-radius
110108
border-radius: $fh-border-radius
111109
border: $fh-border-width $fh-border-style $fh-border-color
112110

@@ -172,7 +170,7 @@ input[type="radio"]
172170
select
173171
height: $fh-input-height
174172

175-
@if $fh-allow-vendor-styling == false
173+
@if $fh-allow-select-vendor-styling == false
176174
-webkit-appearance: none
177175
-moz-appearance: none
178176
-ms-appearance: none
@@ -200,8 +198,6 @@ fieldset
200198

201199
@else
202200
padding: 10px 25px
203-
-webkit-border-radius: $fh-border-radius
204-
-moz-border-radius: $fh-border-radius
205201
border-radius: $fh-border-radius
206202
border: $fh-border-width $fh-border-style $fh-border-color
207203

@@ -237,8 +233,6 @@ input[type="image"]
237233
-webkit-appearance: none
238234
-moz-appearance: none
239235

240-
-webkit-border-radius: $fh-border-radius
241-
-moz-border-radius: $fh-border-radius
242236
border-radius: $fh-border-radius
243237
border: $fh-border-width $fh-border-style $fh-border-color
244238

0 commit comments

Comments
 (0)