compass_formalize 0.0.1

data/.gitignore

@@ -0,0 +1,2 @@
+pkg
+.sass-cache

data/README.md

@@ -0,0 +1,6 @@
+# Compass Formalize
+
+This is an extension for [Compass](http://beta.compass-style.org) for
+[Formalize](http://formalize.me),
+[Nathan Smith](http://sonspring.com)'s excellent HTML Form stylesheet
+project.

data/Rakefile

@@ -0,0 +1,4 @@
+require 'bundler'
+Bundler::GemHelper.install_tasks
+
+

data/compass_formalize.gemspec

@@ -0,0 +1,20 @@
+# -*- encoding: utf-8 -*-
+
+Gem::Specification.new do |s|
+  s.name = %q{compass_formalize}
+  s.version = "0.0.1"
+
+  s.required_rubygems_version = Gem::Requirement.new(">= 1.3.5")
+  s.authors = ["Wynn Netherland", "Nathan Smith"]
+  s.date = %q{2011-04-19}
+  s.description = %q{Compass and Sass port of Nathan Smith's Formalize HTML form normalizer.}
+  s.email = %w{wynn.netherland@gmail.com nathan@sonspring.com}
+  s.has_rdoc = false
+  s.files = `git ls-files`.split("\n")
+  s.homepage = %q{http://github.com/pengwynn/compass_formalize}
+  s.require_paths = ["lib"]
+  s.rubyforge_project = %q{compass-960-plugin}
+  s.rubygems_version = %q{1.3.6}
+  s.summary = %q{Compass compatible Sass port of Formalize.}
+  s.add_dependency(%q<compass>, [">= 0.10.0"])
+end

data/lib/compass_formalize.rb

@@ -0,0 +1,2 @@
+require 'compass'
+Compass::Frameworks.register("formalize", :path => "#{File.dirname(__FILE__)}/..")

data/stylesheets/_formalize.sass

@@ -0,0 +1,271 @@
+// `Widths
+//----------------------------------------------------------------------------------------------------
+
+.input_tiny
+  width: 50px
+
+.input_small
+  width: 100px
+
+.input_medium
+  width: 150px
+
+.input_large
+  width: 200px
+
+.input_xlarge
+  width: 250px
+
+.input_xxlarge
+  width: 300px
+
+.input_full
+  width: 100%
+
+// Added via JS to <textarea> and class="input-full".
+// Applies only to IE7. Other browsers don't need it.
+.input_full_wrap
+  display: block
+  padding-right: 8px
+
+// `UI Consistency
+//----------------------------------------------------------------------------------------------------
+
+::-moz-focus-inner
+  border: 0
+  padding: 0
+
+input[type="search"]::-webkit-search-decoration
+  display: none
+
+input,
+button,
+select,
+textarea
+  -moz-background-clip: padding
+  -webkit-background-clip: padding
+  background-clip: padding-box
+  margin: 0
+  vertical-align: middle
+
+button,
+input[type="reset"],
+input[type="submit"],
+input[type="button"]
+  -webkit-appearance: none
+  +border-radius(11px)
+  background: #ddd image-url(button.png) repeat-x
+  +linear-gradient(color-stops(#fff, #ddd))
+  border: 1px solid
+  border-color: #ddd #bbb #999
+  cursor: pointer
+  color: #333
+  font: bold 12px/1.2 Arial, sans-serif
+  outline: 0
+  overflow: visible
+  padding: 3px 10px 4px
+  text-shadow: #fff 0 1px 1px
+  width: auto
+
+  // IE7
+  *padding-top: 2px
+  *padding-bottom: 0px
+
+button
+  // IE7
+  *padding-top: 1px
+  *padding-bottom: 1px
+
+textarea,
+select,
+input[type="date"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="email"],
+input[type="month"],
+input[type="number"],
+input[type="password"],
+input[type="search"],
+input[type="tel"],
+input[type="text"],
+input[type="time"],
+input[type="url"],
+input[type="week"]
+  -webkit-appearance: none
+  +border-radius(0)
+  +box-sizing(border-box)
+  background-color: #fff
+  border: 1px solid
+  border-color: #848484 #c1c1c1 #e1e1e1
+  color: #000
+  outline: 0
+  padding: 2px 3px
+  font:
+    size: 13px
+    family: Arial, sans-serif
+  height: 1.8em
+
+  // IE7
+  *padding-top: 2px
+  *padding-bottom: 1px
+  *height: auto
+
+// Separate rule for Firefox.
+// Cannot stack with WebKit's.
+
+input.placeholder-text,
+textarea.placeholder-text,
+input:-moz-placeholder,
+textarea:-moz-placeholder
+  color: #888
+
+::-webkit-input-placeholder
+  color: #888
+
+button:focus,
+button:active,
+input:focus,
+input:active,
+select:focus,
+select:active,
+textarea:focus,
+textarea:active
+  -moz-box-shadow: #06f 0 0 7px
+  -webkit-box-shadow: #06f 0 0 7px
+  box-shadow: #06f 0 0 7px
+
+  // for Opera
+  z-index: 1
+
+input[type="file"]:focus,
+input[type="file"]:active,
+input[type="radio"]:focus,
+input[type="radio"]:active,
+input[type="checkbox"]:focus,
+input[type="checkbox"]:active
+  -moz-box-shadow: none
+  -webkit-box-shadow: none
+  box-shadow: none
+
+select[disabled],
+textarea[disabled],
+input[type="date"][disabled],
+input[type="datetime"][disabled],
+input[type="datetime-local"][disabled],
+input[type="email"][disabled],
+input[type="month"][disabled],
+input[type="number"][disabled],
+input[type="password"][disabled],
+input[type="search"][disabled],
+input[type="tel"][disabled],
+input[type="text"][disabled],
+input[type="time"][disabled],
+input[type="url"][disabled],
+input[type="week"][disabled]
+  background-color: #eee
+
+button[disabled],
+input[disabled],
+select[disabled],
+select[disabled] option,
+select[disabled] optgroup,
+textarea[disabled]
+  -moz-box-shadow: none
+  -webkit-box-shadow: none
+  box-shadow: none
+  -webkit-user-select: none
+  -moz-user-select: none
+  user-select: none
+  color: #888
+  cursor: default
+
+.is_webkit select
+  // Tweaks for Safari + Chrome.
+  background:
+    image: image-url(select_arrow.gif)
+    repeat: no-repeat
+    position: right center
+  padding-right: 20px
+
+textarea,
+select[size],
+select[multiple]
+  height: auto
+
+.is_webkit select[size]
+.is_webkit select[multiple]
+  background-image: none
+  padding: 0
+
+textarea
+  min-height: 40px
+  overflow: auto
+  resize: vertical
+  width: 100%
+
+optgroup
+  color: #000
+  font-style: normal
+  font-weight: normal
+
+// `IE6
+//----------------------------------------------------------------------------------------------------
+
+// Everything below this line is for IE6.
+// Delete it if you don't support it! :)
+
+// Classes are added dynamically via JS,
+// because IE6 doesn't support attribute
+// selectors: .ie6_button, .ie6_input, etc.
+
+// Note: These style rules are somewhat
+// duplicated because IE6 bombs out when
+// it sees attribute selectors. Example:
+
+// .ie6_button {
+//   This works in IE6.
+// }
+
+// .ie6_button,
+// input[type=submit] {
+//   This doesn't work.
+// }
+
+.ie6_button,
+* html button
+  background: #ddd image-url(button.png) repeat-x
+  border: 1px solid
+  border-color: #ddd #bbb #999
+  cursor: pointer
+  color: #333
+  font: bold 12px/1.2 Arial, sans-serif
+  padding: 2px 10px 0px
+  overflow: visible
+  width: auto
+
+* html button
+  padding-top: 1px
+  padding-bottom: 1px
+
+.ie6_input,
+* html textarea,
+* html select
+  background: #fff
+  border: 1px solid
+  border-color: #848484 #c1c1c1 #e1e1e1
+  color: #000
+  padding: 2px 3px 1px
+  font-size: 13px
+  font-family: Arial, sans-serif
+  vertical-align: top
+
+* html select
+  margin-top: 1px
+
+.placeholder_text,
+.ie6_input_disabled,
+.ie6_button_disabled
+  color: #888
+
+.ie6_input_disabled
+  background: #eee

data/templates/dojo/dojo.formalize.js

@@ -0,0 +1,174 @@
+//
+// Note: This file depends on the Dojo library.
+//
+
+// Module pattern:
+// http://yuiblog.com/blog/2007/06/12/module-pattern/
+var FORMALIZE = (function(window, document, undefined) {
+  // Private constants.
+  var PLACEHOLDER_SUPPORTED = 'placeholder' in document.createElement('input');
+  var AUTOFOCUS_SUPPORTED = 'autofocus' in document.createElement('input');
+  var WEBKIT = 'webkitAppearance' in document.createElement('select').style;
+  var IE6 = parseInt(dojo.isIE, 10) === 6;
+  var IE7 = parseInt(dojo.isIE, 10) === 7;
+
+  // Expose innards of FORMALIZE.
+  return {
+    // FORMALIZE.go
+    go: function() {
+      for (var i in FORMALIZE.init) {
+        FORMALIZE.init[i]();
+      }
+    },
+    // FORMALIZE.init
+    init: {
+      // FORMALIZE.init.detect_webkit
+      detect_webkit: function() {
+        if (!WEBKIT) {
+          return;
+        }
+
+        // Tweaks for Safari + Chrome.
+        dojo.query('html').addClass('is_webkit');
+      },
+      // FORMALIZE.init.full_input_size
+      full_input_size: function() {
+        if (!IE7 || !dojo.query('textarea, input.input_full').length) {
+          return;
+        }
+
+        // This fixes width: 100% on <textarea> and class="input_full".
+        // It ensures that form elements don't go wider than container.
+        dojo.query('textarea, input.input_full').forEach(function(el) {
+          var new_el = el.cloneNode(false);
+          var span = document.createElement('span');
+
+          span.className = 'input_full_wrap';
+          span.appendChild(new_el);
+          el.parentNode.replaceChild(span, el);
+        });
+      },
+      // FORMALIZE.init.ie6_skin_inputs
+      ie6_skin_inputs: function() {
+        // Test for Internet Explorer 6.
+        if (!IE6 || !dojo.query('input, select, textarea').length) {
+          // Exit if the browser is not IE6,
+          // or if no form elements exist.
+          return;
+        }
+
+        // For <input type="submit" />, etc.
+        var button_regex = /button|submit|reset/;
+
+        // For <input type="text" />, etc.
+        var type_regex = /date|datetime|datetime-local|email|month|number|password|range|search|tel|text|time|url|week/;
+
+        dojo.query('input').forEach(function(el) {
+          // Is it a button?
+          if (el.getAttribute('type').match(button_regex)) {
+            dojo.addClass(el, 'ie6_button');
+
+            /* Is it disabled? */
+            if (el.disabled) {
+              dojo.addClass(el, 'ie6_button_disabled');
+            }
+          }
+          // Or is it a textual input?
+          else if (el.getAttribute('type').match(type_regex)) {
+            dojo.addClass(el, 'ie6_input');
+
+            /* Is it disabled? */
+            if (el.disabled) {
+              dojo.addClass(el, 'ie6_input_disabled');
+            }
+          }
+        });
+
+        dojo.query('textarea, select').forEach(function(el) {
+          /* Is it disabled? */
+          if (el.disabled) {
+            dojo.addClass(el, 'ie6_input_disabled');
+          }
+        });
+      },
+      // FORMALIZE.init.autofocus
+      autofocus: function() {
+        if (AUTOFOCUS_SUPPORTED || !dojo.query('[autofocus]').length) {
+          return;
+        }
+
+        dojo.query('[autofocus]')[0].focus();
+      },
+      // FORMALIZE.init.placeholder
+      placeholder: function() {
+        if (PLACEHOLDER_SUPPORTED || !dojo.query('[placeholder]').length) {
+          // Exit if placeholder is supported natively,
+          // or if page does not have any placeholder.
+          return;
+        }
+
+        FORMALIZE.misc.add_placeholder();
+
+        dojo.query('[placeholder]').forEach(function(el) {
+          dojo.connect(el, 'onfocus', function() {
+            var text = el.getAttribute('placeholder');
+
+            if (el.value === text) {
+              el.value = '';
+              dojo.removeClass(el, 'placeholder_text');
+            }
+          });
+
+          dojo.connect(el, 'onblur', function() {
+            FORMALIZE.misc.add_placeholder();
+          });
+        });
+
+        // Prevent <form> from accidentally
+        // submitting the placeholder text.
+        dojo.query('form').forEach(function(form) {
+          dojo.connect(form, 'onsubmit', function() {
+            dojo.query('[placeholder]', form).forEach(function(el) {
+              var text = el.getAttribute('placeholder');
+
+              if (el.value === text) {
+                el.value = '';
+                dojo.removeClass(el, 'placeholder_text');
+              }
+            });
+          });
+
+          dojo.connect(form, 'onreset', function() {
+            setTimeout(FORMALIZE.misc.add_placeholder, 50);
+          });
+        });
+      }
+    },
+    // FORMALIZE.misc
+    misc: {
+      // FORMALIZE.misc.add_placeholder
+      add_placeholder: function() {
+        if (PLACEHOLDER_SUPPORTED || !dojo.query('[placeholder]').length) {
+          // Exit if placeholder is supported natively,
+          // or if page does not have any placeholder.
+          return;
+        }
+
+        dojo.query('[placeholder]').forEach(function(el) {
+          var text = el.getAttribute('placeholder');
+
+          if (!el.value || el.value === text) {
+            el.value = text;
+            dojo.addClass(el, 'placeholder_text');
+          }
+        });
+      }
+    }
+  };
+// Alias window, document.
+})(this, this.document);
+
+// Automatically calls all functions in FORMALIZE.init
+dojo.addOnLoad(function() {
+  FORMALIZE.go();
+});