compass_formalize 0.0.4 → 0.0.5

checksums.yaml

@@ -0,0 +1,7 @@
+--- 
+SHA1: 
+  metadata.gz: b3af7cd8a6e1b7701c064900be2f133791be935b
+  data.tar.gz: 929b4a45b5268c729c60643a2e6128606302b2c9
+SHA512: 
+  metadata.gz: e8090c19aa14417aba4bfcd890eaed947db08396c081d893d884f978a164394048b0de63600fa8bf7ad8638acca70ead91cad149e3da2209818af4562190ca65
+  data.tar.gz: e9bce6c9c8f04613f5162080269f5458594a27262341ac9ce462dbe6a3c6d84ca577b939a03c4802557cc5b8340be77af2d9506a66d6c63202e434fd34fa0e6a

data/.gitignore

@@ -1,3 +1,4 @@
 pkg
 .sass-cache
 .DS_Store
+compass_formalize-*

data/CHANGELOG.md

@@ -1,11 +1,12 @@
 # Changelog
 
-[0.0.4 - July 7,
+* [0.0.5 - October 11, 2013 Updated JS to from Formalize 1.1 to 1.2](https://github.com/alienresident/compass_formalize/compare/v0.0.4...v0.0.5)
+* [0.0.4 - July 7,
 2011](https://github.com/pengwynn/compass_formalize/compare/v0.0.3...v0.0.4)
-[0.0.3 - June  25,
+* [0.0.3 - June  25,
 2011](https://github.com/pengwynn/compass_formalize/compare/v0.0.2...v0.0.3)
-0.0.2 - April 27, 2011 - Patch from @hoverlover for Compass includes.
-0.0.1 - April 19, 2011 - Initial release
+* 0.0.2 - April 27, 2011 - Patch from @hoverlover for Compass includes.
+* 0.0.1 - April 19, 2011 - Initial release
 
 
 

data/README.md

@@ -26,14 +26,45 @@ your JavaScript framework taste:
     compass install formalize/dojo
     compass install formalize/extjs
     compass install formalize/jquery
+    compass install formalize/jquery-legacy
     compass install formalize/mootools
     compass install formalize/prototype
     compass install formalize/yui
 
+Don't forget to add this to your sass files
+
+ If you're using SCSS syntax, in your stylesheet:
+
+    @import "formalize";
+
+ or if you're using indented (Sass) syntax
+
+    @import "formalize"
+
 After following the provided instructions, we need to tell Compass to use relative paths so that all our resources load correctly. In config.rb, we uncomment the following line:
 
     relative_assets = true
 
+__New__ in version 0.0.5 
+If you don't need or want to support IE6 and/or IE7 you can add the following to your file before your @import "formalize"
+
+If you're using SCSS syntax, in your stylesheet:
+
+    $legacy-support-for-ie6: false;
+    $legacy-support-for-ie7: false;
+    @import "formalize";
+
+ or if you're using indented (Sass) syntax 
+
+    $legacy-support-for-ie6: false
+    $legacy-support-for-ie7: false
+    @import "formalize"
+    
+This will not add the IE 6 and IE 7 css hacks and extra classes to the formalize css. You don't need the JS libraries either.
+
+To remove legacy webkit and firefox support and experimental opera and khtml css see: http://compass-style.org/reference/compass/support
+
+ 
 And we're all set!
 
 

data/compass_formalize.gemspec

@@ -2,11 +2,11 @@
 
 Gem::Specification.new do |s|
   s.name = %q{compass_formalize}
-  s.version = "0.0.4"
+  s.version = "0.0.5"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 1.3.5")
   s.authors = ["Wynn Netherland", "Nathan Smith"]
-  s.date = %q{2011-07-07}
+  s.date = %q{2013-10-09}
   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.files = `git ls-files`.split("\n")

data/stylesheets/_formalize.sass

@@ -2,10 +2,7 @@
 // Sass = http://sass-lang.com
 // Compass = http://compass-style.org
 
-@import compass/css3/box-sizing
-@import compass/css3/gradient
-@import compass/css3/border-radius
-@import compass/css3/background-clip
+@import compass/css3
 
 // `Widths
 //----------------------------------------------------------------------------------------------------
@@ -28,11 +25,13 @@
 .input_xxlarge
   width: 300px
 
-.input_full
-  width: 100%
+@if $legacy-support-for-ie7
+  .input_full
+    width: 100%
+
+  // Added via JS to <textarea> and class="input-full".
+  // Applies only to IE7. Other browsers don't need it. 
 
-// 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
@@ -40,48 +39,88 @@
 // `UI Consistency
 //----------------------------------------------------------------------------------------------------
 
-::-moz-focus-inner
-  border: 0
-  padding: 0
-
 input[type="search"]::-webkit-search-decoration
   display: none
 
 input,
 button,
+a.button,
 select,
 textarea
-  margin: 0
-  vertical-align: middle
+  // Suppress red glow that Firefox
+  // adds to form fields by default.
+  &:invalid
+    +box-shadow(none)
+
+  // Add blue glow.
+  &:focus
+    +box-shadow(#06f 0 0 5px 0)
+    // for Opera
+    z-index: 1
+
+input[type="file"],
+input[type="radio"],
+input[type="checkbox"]
+  &:focus,
+  &:active
+    +box-shadow(none)
 
 button,
+a.button,
 input[type="reset"],
 input[type="submit"],
 input[type="button"]
   -webkit-appearance: none
-  +border-radius(11px)
+  +border-radius(4px)
   +background-clip(padding-box)
-  background: #ddd image-url("button.png") repeat-x
-  +background-image(linear-gradient(color-stops(#fff, #ddd)))
+  // Base64 encoded "../images/button.png' with IE7 fallback
+  background: #ddd  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAAAAADhgtq/AAAAHElEQVQoz2P8z4ADsOCW+UeGnsFs2nDzz5AMHQA+JRlAyyOraAAAAABJRU5ErkJggg==) repeat-x
+  @if $legacy-support-for-ie7
+    background: #ddd image-url('button.png') repeat-x
+  +background-image(linear-gradient(#fff, #ddd))
   border: 1px solid
   border-color: #ddd #bbb #999
   cursor: pointer
   color: #333
-  font: bold 12px/1.2 Arial, sans-serif
+  display: inline-block
+  // Helvetica Neue present, because it works better
+  // for line-height on buttons than Arial, on OS X.
+  font: bold 12px/1.3 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif
   outline: 0
   overflow: visible
-  padding: 3px 10px 4px
+  margin: 0
+  padding: 3px 10px
   text-shadow: #fff 0 1px 1px
+  text-decoration: none
+  vertical-align: top
   width: auto
-
-  // IE7
-  *padding-top: 2px
-  *padding-bottom: 0px
-
-button
-  // IE7
-  *padding-top: 1px
-  *padding-bottom: 1px
+  &:hover
+    +background-image(linear-gradient(#fff, #eee 1px, #ccc))
+    text-decoration: none
+  &:active
+    +background-image(linear-gradient(#ddd, #eee))
+    +box-shadow(inset rgba(#000, 0.25) 0 1px 2px 0)
+    border-color: #999 #bbb #ddd
+  @if $legacy-support-for-ie7
+    // IE7
+    *padding-top: 2px
+    *padding-bottom: 0
+
+  // Kill phantom spacing and dotted
+  // border that appears in Firefox.
+  &::-moz-focus-inner
+    border: 0
+    padding: 0
+
+@if $legacy-support-for-ie7
+  a.button
+    // IE7
+    *padding-bottom: 3px
+
+  button
+    // IE7
+    *padding-top: 1px
+    *padding-bottom: 1px  
 
 textarea,
 select,
@@ -98,112 +137,112 @@ input[type="text"],
 input[type="time"],
 input[type="url"],
 input[type="week"]
-  -webkit-appearance: none
-  +border-radius(0)
   +box-sizing(border-box)
   +background-clip(padding-box)
+  +border-radius(0)
+  -webkit-appearance: none
   background-color: #fff
   border: 1px solid
   border-color: #848484 #c1c1c1 #e1e1e1
   color: #000
   outline: 0
+  margin: 0
   padding: 2px 3px
-  font:
-    size: 13px
-    family: Arial, sans-serif
+  text-align: left
+  font-size: 13px
+  // Leaving out Helvetica Neue, to not throw off size="..."
+  // on inputs. Arial is more reliable, on Windows and OS X.
+  font-family: Arial, 'Liberation Sans', FreeSans, 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
+  vertical-align: top
+  @if $legacy-support-for-ie7
+    // IE7
+    *padding-top: 2px
+    *padding-bottom: 1px
+    *height: auto
+  &[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
+textarea[disabled],
+a.button_disabled
+  +box-shadow(none)
+  -moz-user-select: -moz-none
   -webkit-user-select: none
-  -moz-user-select: none
+  -khtml-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
+// Separate rule for Firefox.
+// Separate rule for IE, too.
+// Cannot stack with WebKit's.
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder
+  color: #888
+
+input:-moz-placeholder,
+textarea:-moz-placeholder
+  color: #888
+
+input.placeholder_text,
+textarea.placeholder_text
+  color: #888
 
 textarea,
 select[size],
 select[multiple]
   height: auto
 
-.is_webkit select[size],
-.is_webkit select[multiple]
-  background-image: none
-  padding: 0
+// Set height back to normal,
+// for Opera, WebKit, and IE.
+select[size="0"],
+select[size="1"]
+  height: 1.8em
+  @if $legacy-support-for-ie7
+    // IE7
+    *height: auto  
+
+// Tweaks for Safari + Chrome.
+@media (-webkit-min-device-pixel-ratio: 0)
+  select[size],
+  select[multiple],
+  select[multiple][size]
+    background-image: none
+    padding-right: 3px
+
+  select,
+  select[size="0"],
+  select[size="1"]
+    // Base64 encoded "../images/select_arrow.gif"
+    background-image: url(data:image/png;base64,R0lGODlhDQAEAIAAAAAAAP8A/yH5BAEHAAEALAAAAAANAAQAAAILhA+hG5jMDpxvhgIAOw==)
+    background-repeat: no-repeat
+    background-position: right center
+    padding-right: 20px
+
+  ::-webkit-validation-bubble-message
+    -webkit-box-shadow: none
+    box-shadow: none
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(1, #000))
+    border: 0
+    color: #fff
+    font: 13px/17px 'Lucida Grande', Arial, 'Liberation Sans', FreeSans, sans-serif
+    overflow: hidden
+    padding: 15px 15px 17px
+    text-shadow: #000 0 0 1px
+    min-height: 16px
+
+  ::-webkit-validation-bubble-arrow,
+  ::-webkit-validation-bubble-top-outer-arrow,
+  ::-webkit-validation-bubble-top-inner-arrow
+    -webkit-box-shadow: none
+    box-shadow: none
+    background: #666
+    border-color: #666
 
 textarea
   min-height: 40px
@@ -215,65 +254,82 @@ 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
+  // Font family repeated, for Firefox.
+  font-family: Arial, 'Liberation Sans', FreeSans, sans-serif
+
+  // Kill phantom spacing and dotted
+  // border that appears in Firefox.
+  &::-moz-focus-inner
+    border: 0
+    padding: 0
+
+@if $legacy-support-for-ie6
+  // `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,
+  * html a.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 0
+    text-decoration: none
+    overflow: visible
+    vertical-align: top
+    width: auto
+
+  * html a.button
+    position: relative
+    top: 3px
+    padding-bottom: 2px
+
+  * 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