version 1.2, add suport for native css variables

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+gulpfile.js
+package.json
+example

bower.json

@@ -2,8 +2,9 @@
   "name": "formhack",
   "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.",
   "main": [
-    "_formhack.sass",
-    "_formhack.scss"
+    "formhack.sass",
+    "formhack.scss",
+    "formhack.css"
   ],
   "keywords": [
     "sass",
@@ -12,11 +13,17 @@
     "form"
   ],
   "authors": [
-    "Ire Aderinokun <[email protected]> (http://bitsofco.de)"
+    "Ire Aderinokun <[email protected]> (http://ireaderinokun.com)"
   ],
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git://github.com/ireade/formhack.git"
-  }
+  },
+  "ignore": [
+    "example",
+    "gulpfile.js",
+    "package.json",
+    "node_modules"
+  ]
 }

formhack.css

@@ -0,0 +1,273 @@
+/* FormHack v1.2.0 (formhack.io) */
+
+/* Config ----------------------------- */
+:root {
+
+  /* Font */
+  --fh-font-family: 'Raleway', sans-serif;
+  --fh-font-size: 16px;
+  --fh-font-color: rgb(40, 40, 40);
+
+  /* Borders */
+  --fh-border-radius: 5px;
+  --fh-border-width: 1px;
+  --fh-border-style: solid;
+  --fh-border-color: rgb(200, 200, 200);
+
+  /* Inputs, Textareas, Select, Option */
+  --fh-input-height: 40px;
+  --fh-input-width: 100%;
+  --fh-input-max-width: 400px;
+  --fh-input-bg-color: #fff;
+  --fh-focus-bg-color: rgb(220, 220, 220);
+  --fh-focus-border-color: var(--fh-border-color);
+  --fh-focus-font-color: var(--fh-font-color);
+
+  /* Select Vendor Styling */
+  --fh-select-vendor-styling: none; /* comment this out to maintain vendor styling */
+
+
+  /* Buttons & Input Submits */
+  --fh-button-height: 40px;
+  --fh-button-width: 100%;
+  --fh-button-max-width: 200px;
+  --fh-button-font-color: var(--fh-font-color);
+  --fh-button-bg-color: var(--fh-focus-bg-color);
+  --fh-button-hover-bg-color: var(--fh-border-color);
+  --fh-button-hover-font-color: var(--fh-font-color);
+
+  /* Layout */
+  --fh-layout-display: block;
+  --fh-layout-margin: 10px 0; /* change to "10px auto" to center */
+  --fh-layout-text-align: left;
+}
+
+
+
+/* Global Reset Styles ------------------ */
+
+input,
+textarea,
+select,
+option,
+optgroup,
+button,
+legend,
+fieldset {
+  box-sizing: border-box;
+  outline: none;
+
+  font-family: var(--fh-font-family);
+  font-size: var(--fh-font-size);
+  color: var(--fh-font-color);
+  vertical-align: top;
+
+  display: var(--fh-layout-display);
+  margin: var(--fh-layout-margin);
+  text-align: var(--fh-layout-text-align);
+}
+
+
+datalist {
+  font-family: var(--fh-font-family);
+  font-size: var(--fh-font-size);
+}
+
+label {
+  display: var(--fh-layout-display);
+  margin: var(--fh-layout-margin);
+  text-align: var(--fh-layout-text-align);
+}
+
+
+
+/* Input & Textarea ------------------ */
+
+/* Fields with standard width */
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="search"],
+input[type="color"],
+input[type="date"],
+input[type="datetime-local"],
+input[type="month"],
+input[type="number"],
+input[type="tel"],
+input[type="time"],
+input[type="url"],
+input[type="week"],
+input[list],
+input[type="file"],
+select,
+textarea {
+  width: var(--fh-input-width);
+  max-width: var(--fh-input-max-width);
+  padding: calc( var(--fh-input-height) / 5 );
+  background-color: var(--fh-input-bg-color);
+
+  border-radius: var(--fh-border-radius);
+  border-width: var(--fh-border-width);
+  border-style: var(--fh-border-style);
+  border-color: var(--fh-border-color);
+}
+
+/* Fields with standard height */
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="search"],
+input[type="color"],
+input[type="date"],
+input[type="datetime-local"],
+input[type="month"],
+input[type="number"],
+input[type="tel"],
+input[type="time"],
+input[type="url"],
+input[type="week"],
+input[list] {
+  height: var(--fh-input-height);
+  -webkit-appearance: none;
+}
+
+/* Other */
+
+textarea {
+  -webkit-appearance: none;
+  overflow: auto;
+}
+
+input[type="range"] {
+  height: var(--fh-input-height);
+  width: var(--fh-input-width);
+  max-width: var(--fh-input-max-width);
+}
+
+input[type="file"] {
+  min-height: var(--fh-input-height);
+}
+
+input[type="search"] {
+  height: var(--fh-input-height);
+  -webkit-appearance: none;
+}
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+  display: inline-block;
+  vertical-align: middle;
+}
+/* For checkbox and radio to be centered, need to wrap the input and label in a span -
+/* .checkbox-container {
+/*  display: block;
+/*  text-align: center;
+/* }
+
+
+/* Select ------------------ */
+
+select {
+  height: var(--fh-input-height);
+
+  -webkit-appearance: var(--fh-select-vendor-styling, menulist);
+  -moz-appearance: var(--fh-select-vendor-styling, menulist);
+  -ms-appearance: var(--fh-select-vendor-styling, menulist);
+  -o-appearance: var(--fh-select-vendor-styling, menulist);
+
+
+}
+
+select[multiple] {
+  height: auto;
+  min-height: var(--fh-input-height);
+  padding: 0;
+}
+
+select[multiple] option {
+  margin: 0;
+  padding: calc( var(--fh-input-height) / 5 );
+}
+
+/* Fieldset ------------------ */
+
+fieldset {
+  padding: 0;
+  border: 0;
+}
+
+legend {
+  padding: 0;
+  font-weight: inherit;
+}
+
+/* Buttons, Input Type Submit/Reset ------------------ */
+
+button,
+input[type="button"],
+input[type="submit"],
+input[type="reset"],
+input[type="image"] {
+  height: var(--fh-button-height);
+  width: var(--fh-button-width);
+  max-width: var(--fh-button-max-width);
+  background-color: var(--fh-button-bg-color);
+  padding: calc( var(--fh-input-height) / 5 );
+  cursor: pointer;
+
+  color: var(--fh-button-font-color);
+  font-weight: 700;
+
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  border-radius: var(--fh-border-radius);
+  border-width: var(--fh-border-width);
+  border-style: var(--fh-border-style);
+  border-color: var(--fh-border-color);
+}
+
+input[type="image"] {
+  text-align: center;
+  padding: calc( var(--fh-input-height) / 5 );
+}
+
+/* States ------------------ */
+
+input[disabled],
+textarea[disabled],
+select[disabled],
+option[disabled],
+button[disabled] {
+  cursor: not-allowed;
+}
+
+input:focus,
+textarea:focus,
+select:focus,
+option:focus,
+button:focus  {
+  background-color: var(--fh-focus-bg-color);
+  border-color: var(--fh-focus-border-color);
+}
+
+input[type="checkbox"]:focus,
+input[type="radio"]:focus {
+  outline: var(--fh-focus-border-color) solid 2px;
+}
+
+button:hover,
+input[type="button"]:hover,
+input[type="submit"]:hover,
+input[type="reset"]:hover,
+button:focus,
+input[type="button"]:focus,
+input[type="submit"]:focus,
+input[type="reset"]:focus {
+  background-color: var(--fh-button-hover-bg-color);
+  color: var(--fh-button-hover-font-color);
+}

_formhack.sass → formhack.sass

@@ -1,4 +1,4 @@
-/* FormHack v1.1.0 (formhack.io) */
+/* FormHack v1.2.0 (formhack.io) */
 
 // Config -----------------------------
 
@@ -23,7 +23,7 @@ $fh-focus-border-color: $fh-border-color !default
 $fh-focus-font-color: $fh-font-color !default
 
 // Select Vendor Styling
-$fh-allow-vendor-styling: true !default
+$fh-allow-select-vendor-styling: true !default
 
 // Fieldset & Legend Styling
 $fh-fieldset-bare: false !default
@@ -105,8 +105,6 @@ textarea
 	padding: $fh-input-height / 5
 	background-color: $fh-input-bg-color
 
-	-webkit-border-radius: $fh-border-radius
-	-moz-border-radius: $fh-border-radius
 	border-radius: $fh-border-radius
 	border: $fh-border-width $fh-border-style $fh-border-color
 
@@ -172,7 +170,7 @@ input[type="radio"]
 select
 	height: $fh-input-height
 
-	@if $fh-allow-vendor-styling == false
+	@if $fh-allow-select-vendor-styling == false
 		-webkit-appearance: none
 		-moz-appearance: none
 		-ms-appearance: none
@@ -200,8 +198,6 @@ fieldset
 
 	@else
 		padding: 10px 25px
-		-webkit-border-radius: $fh-border-radius
-		-moz-border-radius: $fh-border-radius
 		border-radius: $fh-border-radius
 		border: $fh-border-width $fh-border-style $fh-border-color
 
@@ -237,8 +233,6 @@ input[type="image"]
 	-webkit-appearance: none
 	-moz-appearance: none
 
-	-webkit-border-radius: $fh-border-radius
-	-moz-border-radius: $fh-border-radius
 	border-radius: $fh-border-radius
 	border: $fh-border-width $fh-border-style $fh-border-color