diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..9dfd596 --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +node_modules +gulpfile.js +package.json +example \ No newline at end of file diff --git a/bower.json b/bower.json index 8d7b7f7..7de123b 100644 --- a/bower.json +++ b/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 (http://bitsofco.de)" + "Ire Aderinokun (http://ireaderinokun.com)" ], "license": "MIT", "repository": { "type": "git", "url": "git://github.com/ireade/formhack.git" - } + }, + "ignore": [ + "example", + "gulpfile.js", + "package.json", + "node_modules" + ] } \ No newline at end of file diff --git a/formhack.css b/formhack.css new file mode 100644 index 0000000..55477e9 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/_formhack.sass b/formhack.sass similarity index 93% rename from _formhack.sass rename to formhack.sass index 15b81a9..4de56c7 100644 --- a/_formhack.sass +++ b/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 diff --git a/_formhack.scss b/formhack.scss similarity index 93% rename from _formhack.scss rename to formhack.scss index 5a0e532..fc7a163 100644 --- a/_formhack.scss +++ b/formhack.scss @@ -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; @@ -53,7 +53,6 @@ $fh-display: block !default; } } - /* Global Reset Styles ------------------ */ input, @@ -114,8 +113,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; } @@ -182,7 +179,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; @@ -210,8 +207,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; } @@ -248,8 +243,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; }