html5-boilerplate 0.1.5 → 0.1.6

Sign up to get free protection for your applications and to get access to all the features.
data/VERSION CHANGED
@@ -1 +1 @@
1
- 0.1.5
1
+ 0.1.6
@@ -2,6 +2,9 @@
2
2
  // Non-semantic helper classes
3
3
  //
4
4
 
5
+ @import "compass/utilities/text/replacement";
6
+ @import "compass/utilities/general/clearfix";
7
+
5
8
  @mixin html5-boilerplate-helpers {
6
9
  .ir { @include image-replacement; }
7
10
 
@@ -9,12 +12,25 @@
9
12
 
10
13
  .visuallyhidden { @include visually-hidden; }
11
14
 
12
- @include clearfix;
15
+ .clearfix { @include pie-clearfix; }
16
+ }
17
+
18
+ // Almost the same as compass replace-text
19
+ // but adding direction: ltr
20
+ @mixin image-replacement($img: none, $x: 50%, $y: 50%) {
21
+ @include hide-text;
22
+ direction: ltr;
23
+ background-repeat: no-repeat;
24
+ @if $img != none {
25
+ background-image: image-url($img);
26
+ background-position: $x $y;
27
+ }
13
28
  }
14
29
 
15
- // for image replacement
16
- @mixin image-replacement {
17
- display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr;
30
+ @mixin sized-image-replacement($img, $x: 50%, $y: 50%) {
31
+ @include image-replacement($img, $x, $y);
32
+ width: image-width($img);
33
+ height: image-height($img);
18
34
  }
19
35
 
20
36
  // Hide for both screenreaders and browsers
@@ -37,9 +53,5 @@
37
53
  @mixin invisible { visibility: hidden; }
38
54
 
39
55
  // The Magnificent CLEARFIX
40
- // Make any element or classname a
41
- // clearfix by passing in a selector
42
- @mixin clearfix($selector: '.clearfix') {
43
- #{$selector}:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
44
- #{$selector} { zoom: 1; }
45
- }
56
+ // Now using pie-clearfix from Compass
57
+ // since it's exactly the same
@@ -10,14 +10,20 @@ $link-visited-color: #607890 !default;
10
10
 
11
11
  $selected-font-color: #fff !default;
12
12
 
13
- $selected-background-color: #FF5E99 !default;
13
+ $selected-background-color: #ff5e99 !default;
14
14
 
15
- $selected-background-color: #FF5E99 !default;
15
+ $selected-background-color: #ff5e99 !default;
16
16
 
17
17
  $valid-input-background-color: #ddf0dd !default;
18
18
 
19
19
  $invalid-input-background-color: #f0dddd !default;
20
20
 
21
+ $invalid-input-shadow-color: red !default;
22
+
23
+
24
+ @import "compass/css3/border-radius";
25
+ @import "compass/css3/box-shadow";
26
+
21
27
 
22
28
  //
23
29
  // minimal base styles
@@ -29,7 +35,6 @@ $invalid-input-background-color: #f0dddd !default;
29
35
  h1, h2, h3, h4, h5, h6 { @include bold-font; }
30
36
 
31
37
  html {
32
- @include font-smoothing;
33
38
  @include force-scrollbar;
34
39
  }
35
40
 
@@ -47,6 +52,13 @@ $invalid-input-background-color: #f0dddd !default;
47
52
  sub { vertical-align: sub; font-size: smaller; }
48
53
  sup { vertical-align: super; font-size: smaller; }
49
54
 
55
+ input:valid {
56
+ @include valid-input;
57
+ }
58
+ input:invalid {
59
+ @include invalid-input;
60
+ }
61
+
50
62
  @include accessible-focus;
51
63
 
52
64
  @include quoted-pre;
@@ -54,8 +66,6 @@ $invalid-input-background-color: #f0dddd !default;
54
66
  @include align-input-labels;
55
67
 
56
68
  @include hand-cursor-inputs;
57
-
58
- @include input-validation;
59
69
 
60
70
  @include selected-text;
61
71
 
@@ -108,9 +118,11 @@ $invalid-input-background-color: #f0dddd !default;
108
118
  }
109
119
 
110
120
  // colors for form validity
111
- @mixin input-validation {
112
- input:invalid { background-color: $invalid-input-background-color; }
113
- input:valid { background-color: $valid-input-background-color; }
121
+ @mixin valid-input {
122
+ }
123
+ @mixin invalid-input {
124
+ @include border-radius(1px);
125
+ @include box-shadow($invalid-input-shadow-color, 0, 0, 5px, 0);
114
126
  }
115
127
 
116
128
  // These selection declarations have to be separate.
@@ -16,7 +16,7 @@
16
16
  -# Mobile viewport optimized: j.mp/bplateviewport
17
17
  %meta{:content => "width=device-width; initial-scale=1.0", :name => "viewport"}/
18
18
 
19
- -# Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references
19
+ -# Place favicon.ico and apple-touch-icon.png in the root of your domain and delete these references
20
20
  -# %link{:href => "/favicon.ico", :rel => "shortcut icon"}/
21
21
  -# %link{:href => "/apple-touch-icon.png", :rel => "apple-touch-icon"}/
22
22
 
@@ -31,6 +31,6 @@
31
31
  var g = d.createElement(t),
32
32
  s = d.getElementsByTagName(t)[0];
33
33
  g.async = true;
34
- g.src = '//www.google-analytics.com/ga.js';
34
+ g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
35
35
  s.parentNode.insertBefore(g, s);
36
36
  })(document, 'script');
@@ -1,4 +1,4 @@
1
- !!!
1
+ !!! 5
2
2
  %html.no-js{:lang => "en"}
3
3
  = render :partial => 'layouts/head'
4
4
 
@@ -5,6 +5,9 @@
5
5
  body { text-align: center;}
6
6
  h1 { font-size: 50px; }
7
7
  body { font: 20px Constantia, 'Hoefler Text', "Adobe Caslon Pro", Baskerville, Georgia, Times, serif; color: #999; text-shadow: 2px 2px 2px rgba(200, 200, 200, 0.5); }
8
+ ::-moz-selection{ background:#FF5E99; color:#fff; }
9
+ ::selection { background:#FF5E99; color:#fff; }
10
+ details { display:block; }
8
11
  a { color: rgb(36, 109, 56); text-decoration:none; }
9
12
  a:hover { color: rgb(96, 73, 141) ; text-shadow: 2px 2px 2px rgba(36, 109, 56, 0.5); }
10
13
  span[frown] { transform: rotate(90deg); display:inline-block; color: #bbb; }
@@ -1,8 +1,9 @@
1
1
  # Apache configuration file
2
2
  # httpd.apache.org/docs/2.2/mod/quickreference.html
3
3
 
4
- # Techniques in here adapted from all over,
5
- # including Kroc Camen: camendesign.com/.htaccess
4
+ # Techniques in here adapted from all over, including:
5
+ # Kroc Camen: camendesign.com/.htaccess
6
+ # perishablepress.com/press/2006/01/10/stupid-htaccess-tricks/
6
7
 
7
8
 
8
9
  # Force the latest IE version, in various cases when it may fall back to IE7 mode
@@ -43,13 +44,14 @@ AddType video/webm webm
43
44
 
44
45
  # Proper svg serving. Required for svg webfonts on iPad
45
46
  # twitter.com/FontSquirrel/status/14855840545
46
- AddType image/svg+xml svg svgz
47
+ AddType image/svg+xml svg svgz
48
+ AddEncoding gzip svgz
47
49
 
48
50
  # webfonts
49
51
  AddType application/vnd.ms-fontobject eot
50
52
  AddType font/ttf ttf
51
53
  AddType font/otf otf
52
- AddType font/x-woff woff
54
+ AddType font/woff woff
53
55
 
54
56
  AddType text/cache-manifest manifest
55
57
  AddType text/x-component htc
@@ -68,7 +70,7 @@ AddType text/x-component htc
68
70
  # Disabled by default.
69
71
 
70
72
  # <FilesMatch "\.combined\.(js|css)$">
71
- # Options +IncludesNOEXEC
73
+ # Options +Includes
72
74
  # SetOutputFilter INCLUDES
73
75
  # </FilesMatch>
74
76
 
@@ -90,7 +92,6 @@ AddType text/x-component htc
90
92
 
91
93
 
92
94
 
93
-
94
95
  # these are pretty far-future expires headers
95
96
  # they assume you control versioning with cachebusting query params like
96
97
  # <script src="application.js?20100608">
@@ -126,18 +127,21 @@ AddType text/x-component htc
126
127
  ExpiresByType image/vnd.microsoft.icon "access plus 1 week"
127
128
 
128
129
  # media: images, video, audio
130
+ ExpiresByType image/gif "access plus 1 month"
129
131
  ExpiresByType image/png "access plus 1 month"
130
132
  ExpiresByType image/jpg "access plus 1 month"
131
133
  ExpiresByType image/jpeg "access plus 1 month"
132
134
  ExpiresByType video/ogg "access plus 1 month"
133
135
  ExpiresByType audio/ogg "access plus 1 month"
134
136
  ExpiresByType video/mp4 "access plus 1 month"
137
+ ExpiresByType video/webm "access plus 1 month"
135
138
 
136
139
  # webfonts
137
140
  ExpiresByType font/ttf "access plus 1 month"
138
141
  ExpiresByType font/woff "access plus 1 month"
139
142
  ExpiresByType image/svg+xml "access plus 1 month"
140
-
143
+ ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
144
+
141
145
  # css and javascript
142
146
  ExpiresByType text/css "access plus 1 month"
143
147
  ExpiresByType application/javascript "access plus 1 month"
@@ -167,10 +171,12 @@ FileETag None
167
171
 
168
172
  # you probably want www.example.com to forward to example.com -- shorter URLs are sexier.
169
173
  # no-www.org/faq.php?q=class_b
170
- RewriteEngine On
171
- RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
172
- RewriteRule ^(.*)$ http://%1/$1 [R=301,L]
173
-
174
+ <IfModule mod_rewrite.c>
175
+ RewriteEngine On
176
+ RewriteCond %{HTTPS} !=on
177
+ RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
178
+ RewriteRule ^(.*)$ http://%1/$1 [R=301,L]
179
+ </IfModule>
174
180
 
175
181
  # without -MultiViews, Apache will give a 404 for a rewrite if a folder of the same name does not exist (e.g. “/blog/hello”)
176
182
  # webmasterworld.com/apache/3808792.htm
@@ -192,3 +198,8 @@ AddCharset utf-8 .html .css .js .xml .json .rss
192
198
 
193
199
 
194
200
 
201
+ # We don't need to tell everyone we're apache.
202
+ ServerSignature Off
203
+
204
+
205
+
@@ -1,4 +1,4 @@
1
- !!!
1
+ !!! 5
2
2
  %html.no-js{:lang => "en"}
3
3
  %head
4
4
  %meta{:charset => "utf-8"}/
@@ -14,17 +14,12 @@
14
14
  %meta{:content => "", :name => "description"}/
15
15
  %meta{:content => "", :name => "author"}/
16
16
 
17
- -#
18
- Mobile Viewport Fix
19
- j.mp/mobileviewport & davidbcalhoun.com/2010/viewport-metatag
20
- device-width : Occupy full width of the screen in its current orientation
21
- initial-scale = 1.0 retains dimensions instead of zooming out if page height > device height
22
- maximum-scale = 1.0 retains dimensions instead of zooming in if page width < device width
23
- %meta{:content => "width=device-width; initial-scale=1.0; maximum-scale=1.0;", :name => "viewport"}/
17
+ -# Mobile viewport optimized: j.mp/bplateviewport
18
+ %meta{:content => "width=device-width; initial-scale=1.0", :name => "viewport"}/
24
19
 
25
20
  -# Place favicon.ico and apple-touch-icon.png in the root of your domain and delete these references
26
- %link{:href => "/favicon.ico", :rel => "shortcut icon"}/
27
- %link{:href => "/apple-touch-icon.png", :rel => "apple-touch-icon"}/
21
+ -# %link{:href => "/favicon.ico", :rel => "shortcut icon"}/
22
+ -# %link{:href => "/apple-touch-icon.png", :rel => "apple-touch-icon"}/
28
23
 
29
24
  -# CSS : implied media="all"
30
25
  %link{:href => "css/style.css?v=1", :media => "all", :rel => "stylesheet"}/
@@ -73,7 +68,7 @@
73
68
  var g = d.createElement(t),
74
69
  s = d.getElementsByTagName(t)[0];
75
70
  g.async = true;
76
- g.src = '//www.google-analytics.com/ga.js';
71
+ g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
77
72
  s.parentNode.insertBefore(g, s);
78
73
  })(document, 'script');
79
-
74
+
@@ -10,319 +10,4 @@
10
10
  * DD_belatedPNG.fix('.png_bg'); // argument is a CSS selector
11
11
  * DD_belatedPNG.fixPng( someNode ); // argument is an HTMLDomElement
12
12
  **/
13
-
14
- /*
15
- PLEASE READ:
16
- Absolutely everything in this script is SILLY. I know this. IE's rendering of certain pixels doesn't make sense, so neither does this code!
17
- */
18
-
19
- var DD_belatedPNG = {
20
- ns: 'DD_belatedPNG',
21
- imgSize: {},
22
- delay: 10,
23
- nodesFixed: 0,
24
- createVmlNameSpace: function () { /* enable VML */
25
- if (document.namespaces && !document.namespaces[this.ns]) {
26
- document.namespaces.add(this.ns, 'urn:schemas-microsoft-com:vml');
27
- }
28
- },
29
- createVmlStyleSheet: function () { /* style VML, enable behaviors */
30
- /*
31
- Just in case lots of other developers have added
32
- lots of other stylesheets using document.createStyleSheet
33
- and hit the 31-limit mark, let's not use that method!
34
- further reading: http://msdn.microsoft.com/en-us/library/ms531194(VS.85).aspx
35
- */
36
- var screenStyleSheet, printStyleSheet;
37
- screenStyleSheet = document.createElement('style');
38
- screenStyleSheet.setAttribute('media', 'screen');
39
- document.documentElement.firstChild.insertBefore(screenStyleSheet, document.documentElement.firstChild.firstChild);
40
- if (screenStyleSheet.styleSheet) {
41
- screenStyleSheet = screenStyleSheet.styleSheet;
42
- screenStyleSheet.addRule(this.ns + '\\:*', '{behavior:url(#default#VML)}');
43
- screenStyleSheet.addRule(this.ns + '\\:shape', 'position:absolute;');
44
- screenStyleSheet.addRule('img.' + this.ns + '_sizeFinder', 'behavior:none; border:none; position:absolute; z-index:-1; top:-10000px; visibility:hidden;'); /* large negative top value for avoiding vertical scrollbars for large images, suggested by James O'Brien, http://www.thanatopsic.org/hendrik/ */
45
- this.screenStyleSheet = screenStyleSheet;
46
-
47
- /* Add a print-media stylesheet, for preventing VML artifacts from showing up in print (including preview). */
48
- /* Thanks to Rémi Prévost for automating this! */
49
- printStyleSheet = document.createElement('style');
50
- printStyleSheet.setAttribute('media', 'print');
51
- document.documentElement.firstChild.insertBefore(printStyleSheet, document.documentElement.firstChild.firstChild);
52
- printStyleSheet = printStyleSheet.styleSheet;
53
- printStyleSheet.addRule(this.ns + '\\:*', '{display: none !important;}');
54
- printStyleSheet.addRule('img.' + this.ns + '_sizeFinder', '{display: none !important;}');
55
- }
56
- },
57
- readPropertyChange: function () {
58
- var el, display, v;
59
- el = event.srcElement;
60
- if (!el.vmlInitiated) {
61
- return;
62
- }
63
- if (event.propertyName.search('background') != -1 || event.propertyName.search('border') != -1) {
64
- DD_belatedPNG.applyVML(el);
65
- }
66
- if (event.propertyName == 'style.display') {
67
- display = (el.currentStyle.display == 'none') ? 'none' : 'block';
68
- for (v in el.vml) {
69
- if (el.vml.hasOwnProperty(v)) {
70
- el.vml[v].shape.style.display = display;
71
- }
72
- }
73
- }
74
- if (event.propertyName.search('filter') != -1) {
75
- DD_belatedPNG.vmlOpacity(el);
76
- }
77
- },
78
- vmlOpacity: function (el) {
79
- if (el.currentStyle.filter.search('lpha') != -1) {
80
- var trans = el.currentStyle.filter;
81
- trans = parseInt(trans.substring(trans.lastIndexOf('=')+1, trans.lastIndexOf(')')), 10)/100;
82
- el.vml.color.shape.style.filter = el.currentStyle.filter; /* complete guesswork */
83
- el.vml.image.fill.opacity = trans; /* complete guesswork */
84
- }
85
- },
86
- handlePseudoHover: function (el) {
87
- setTimeout(function () { /* wouldn't work as intended without setTimeout */
88
- DD_belatedPNG.applyVML(el);
89
- }, 1);
90
- },
91
- /**
92
- * This is the method to use in a document.
93
- * @param {String} selector - REQUIRED - a CSS selector, such as '#doc .container'
94
- **/
95
- fix: function (selector) {
96
- if (this.screenStyleSheet) {
97
- var selectors, i;
98
- selectors = selector.split(','); /* multiple selectors supported, no need for multiple calls to this anymore */
99
- for (i=0; i<selectors.length; i++) {
100
- this.screenStyleSheet.addRule(selectors[i], 'behavior:expression(DD_belatedPNG.fixPng(this))'); /* seems to execute the function without adding it to the stylesheet - interesting... */
101
- }
102
- }
103
- },
104
- applyVML: function (el) {
105
- el.runtimeStyle.cssText = '';
106
- this.vmlFill(el);
107
- this.vmlOffsets(el);
108
- this.vmlOpacity(el);
109
- if (el.isImg) {
110
- this.copyImageBorders(el);
111
- }
112
- },
113
- attachHandlers: function (el) {
114
- var self, handlers, handler, moreForAs, a, h;
115
- self = this;
116
- handlers = {resize: 'vmlOffsets', move: 'vmlOffsets'};
117
- if (el.nodeName == 'A') {
118
- moreForAs = {mouseleave: 'handlePseudoHover', mouseenter: 'handlePseudoHover', focus: 'handlePseudoHover', blur: 'handlePseudoHover'};
119
- for (a in moreForAs) {
120
- if (moreForAs.hasOwnProperty(a)) {
121
- handlers[a] = moreForAs[a];
122
- }
123
- }
124
- }
125
- for (h in handlers) {
126
- if (handlers.hasOwnProperty(h)) {
127
- handler = function () {
128
- self[handlers[h]](el);
129
- };
130
- el.attachEvent('on' + h, handler);
131
- }
132
- }
133
- el.attachEvent('onpropertychange', this.readPropertyChange);
134
- },
135
- giveLayout: function (el) {
136
- el.style.zoom = 1;
137
- if (el.currentStyle.position == 'static') {
138
- el.style.position = 'relative';
139
- }
140
- },
141
- copyImageBorders: function (el) {
142
- var styles, s;
143
- styles = {'borderStyle':true, 'borderWidth':true, 'borderColor':true};
144
- for (s in styles) {
145
- if (styles.hasOwnProperty(s)) {
146
- el.vml.color.shape.style[s] = el.currentStyle[s];
147
- }
148
- }
149
- },
150
- vmlFill: function (el) {
151
- if (!el.currentStyle) {
152
- return;
153
- } else {
154
- var elStyle, noImg, lib, v, img, imgLoaded;
155
- elStyle = el.currentStyle;
156
- }
157
- for (v in el.vml) {
158
- if (el.vml.hasOwnProperty(v)) {
159
- el.vml[v].shape.style.zIndex = elStyle.zIndex;
160
- }
161
- }
162
- el.runtimeStyle.backgroundColor = '';
163
- el.runtimeStyle.backgroundImage = '';
164
- noImg = true;
165
- if (elStyle.backgroundImage != 'none' || el.isImg) {
166
- if (!el.isImg) {
167
- el.vmlBg = elStyle.backgroundImage;
168
- el.vmlBg = el.vmlBg.substr(5, el.vmlBg.lastIndexOf('")')-5);
169
- }
170
- else {
171
- el.vmlBg = el.src;
172
- }
173
- lib = this;
174
- if (!lib.imgSize[el.vmlBg]) { /* determine size of loaded image */
175
- img = document.createElement('img');
176
- lib.imgSize[el.vmlBg] = img;
177
- img.className = lib.ns + '_sizeFinder';
178
- img.runtimeStyle.cssText = 'behavior:none; position:absolute; left:-10000px; top:-10000px; border:none; margin:0; padding:0;'; /* make sure to set behavior to none to prevent accidental matching of the helper elements! */
179
- imgLoaded = function () {
180
- this.width = this.offsetWidth; /* weird cache-busting requirement! */
181
- this.height = this.offsetHeight;
182
- lib.vmlOffsets(el);
183
- };
184
- img.attachEvent('onload', imgLoaded);
185
- img.src = el.vmlBg;
186
- img.removeAttribute('width');
187
- img.removeAttribute('height');
188
- document.body.insertBefore(img, document.body.firstChild);
189
- }
190
- el.vml.image.fill.src = el.vmlBg;
191
- noImg = false;
192
- }
193
- el.vml.image.fill.on = !noImg;
194
- el.vml.image.fill.color = 'none';
195
- el.vml.color.shape.style.backgroundColor = elStyle.backgroundColor;
196
- el.runtimeStyle.backgroundImage = 'none';
197
- el.runtimeStyle.backgroundColor = 'transparent';
198
- },
199
- /* IE can't figure out what do when the offsetLeft and the clientLeft add up to 1, and the VML ends up getting fuzzy... so we have to push/enlarge things by 1 pixel and then clip off the excess */
200
- vmlOffsets: function (el) {
201
- var thisStyle, size, fudge, makeVisible, bg, bgR, dC, altC, b, c, v;
202
- thisStyle = el.currentStyle;
203
- size = {'W':el.clientWidth+1, 'H':el.clientHeight+1, 'w':this.imgSize[el.vmlBg].width, 'h':this.imgSize[el.vmlBg].height, 'L':el.offsetLeft, 'T':el.offsetTop, 'bLW':el.clientLeft, 'bTW':el.clientTop};
204
- fudge = (size.L + size.bLW == 1) ? 1 : 0;
205
- /* vml shape, left, top, width, height, origin */
206
- makeVisible = function (vml, l, t, w, h, o) {
207
- vml.coordsize = w+','+h;
208
- vml.coordorigin = o+','+o;
209
- vml.path = 'm0,0l'+w+',0l'+w+','+h+'l0,'+h+' xe';
210
- vml.style.width = w + 'px';
211
- vml.style.height = h + 'px';
212
- vml.style.left = l + 'px';
213
- vml.style.top = t + 'px';
214
- };
215
- makeVisible(el.vml.color.shape, (size.L + (el.isImg ? 0 : size.bLW)), (size.T + (el.isImg ? 0 : size.bTW)), (size.W-1), (size.H-1), 0);
216
- makeVisible(el.vml.image.shape, (size.L + size.bLW), (size.T + size.bTW), (size.W), (size.H), 1 );
217
- bg = {'X':0, 'Y':0};
218
- if (el.isImg) {
219
- bg.X = parseInt(thisStyle.paddingLeft, 10) + 1;
220
- bg.Y = parseInt(thisStyle.paddingTop, 10) + 1;
221
- }
222
- else {
223
- for (b in bg) {
224
- if (bg.hasOwnProperty(b)) {
225
- this.figurePercentage(bg, size, b, thisStyle['backgroundPosition'+b]);
226
- }
227
- }
228
- }
229
- el.vml.image.fill.position = (bg.X/size.W) + ',' + (bg.Y/size.H);
230
- bgR = thisStyle.backgroundRepeat;
231
- dC = {'T':1, 'R':size.W+fudge, 'B':size.H, 'L':1+fudge}; /* these are defaults for repeat of any kind */
232
- altC = { 'X': {'b1': 'L', 'b2': 'R', 'd': 'W'}, 'Y': {'b1': 'T', 'b2': 'B', 'd': 'H'} };
233
- if (bgR != 'repeat' || el.isImg) {
234
- c = {'T':(bg.Y), 'R':(bg.X+size.w), 'B':(bg.Y+size.h), 'L':(bg.X)}; /* these are defaults for no-repeat - clips down to the image location */
235
- if (bgR.search('repeat-') != -1) { /* now let's revert to dC for repeat-x or repeat-y */
236
- v = bgR.split('repeat-')[1].toUpperCase();
237
- c[altC[v].b1] = 1;
238
- c[altC[v].b2] = size[altC[v].d];
239
- }
240
- if (c.B > size.H) {
241
- c.B = size.H;
242
- }
243
- el.vml.image.shape.style.clip = 'rect('+c.T+'px '+(c.R+fudge)+'px '+c.B+'px '+(c.L+fudge)+'px)';
244
- }
245
- else {
246
- el.vml.image.shape.style.clip = 'rect('+dC.T+'px '+dC.R+'px '+dC.B+'px '+dC.L+'px)';
247
- }
248
- },
249
- figurePercentage: function (bg, size, axis, position) {
250
- var horizontal, fraction;
251
- fraction = true;
252
- horizontal = (axis == 'X');
253
- switch(position) {
254
- case 'left':
255
- case 'top':
256
- bg[axis] = 0;
257
- break;
258
- case 'center':
259
- bg[axis] = 0.5;
260
- break;
261
- case 'right':
262
- case 'bottom':
263
- bg[axis] = 1;
264
- break;
265
- default:
266
- if (position.search('%') != -1) {
267
- bg[axis] = parseInt(position, 10) / 100;
268
- }
269
- else {
270
- fraction = false;
271
- }
272
- }
273
- bg[axis] = Math.ceil( fraction ? ( (size[horizontal?'W': 'H'] * bg[axis]) - (size[horizontal?'w': 'h'] * bg[axis]) ) : parseInt(position, 10) );
274
- if (bg[axis] % 2 === 0) {
275
- bg[axis]++;
276
- }
277
- return bg[axis];
278
- },
279
- fixPng: function (el) {
280
- el.style.behavior = 'none';
281
- var lib, els, nodeStr, v, e;
282
- if (el.nodeName == 'BODY' || el.nodeName == 'TD' || el.nodeName == 'TR') { /* elements not supported yet */
283
- return;
284
- }
285
- el.isImg = false;
286
- if (el.nodeName == 'IMG') {
287
- if(el.src.toLowerCase().search(/\.png$/) != -1) {
288
- el.isImg = true;
289
- el.style.visibility = 'hidden';
290
- }
291
- else {
292
- return;
293
- }
294
- }
295
- else if (el.currentStyle.backgroundImage.toLowerCase().search('.png') == -1) {
296
- return;
297
- }
298
- lib = DD_belatedPNG;
299
- el.vml = {color: {}, image: {}};
300
- els = {shape: {}, fill: {}};
301
- for (v in el.vml) {
302
- if (el.vml.hasOwnProperty(v)) {
303
- for (e in els) {
304
- if (els.hasOwnProperty(e)) {
305
- nodeStr = lib.ns + ':' + e;
306
- el.vml[v][e] = document.createElement(nodeStr);
307
- }
308
- }
309
- el.vml[v].shape.stroked = false;
310
- el.vml[v].shape.appendChild(el.vml[v].fill);
311
- el.parentNode.insertBefore(el.vml[v].shape, el);
312
- }
313
- }
314
- el.vml.image.shape.fillcolor = 'none'; /* Don't show blank white shapeangle when waiting for image to load. */
315
- el.vml.image.fill.type = 'tile'; /* Makes image show up. */
316
- el.vml.color.fill.on = false; /* Actually going to apply vml element's style.backgroundColor, so hide the whiteness. */
317
- lib.attachHandlers(el);
318
- lib.giveLayout(el);
319
- lib.giveLayout(el.offsetParent);
320
- el.vmlInitiated = true;
321
- lib.applyVML(el); /* Render! */
322
- }
323
- };
324
- try {
325
- document.execCommand("BackgroundImageCache", false, true); /* TredoSoft Multiple IE doesn't like this, so try{} it */
326
- } catch(r) {}
327
- DD_belatedPNG.createVmlNameSpace();
328
- DD_belatedPNG.createVmlStyleSheet();
13
+ var DD_belatedPNG={ns:"DD_belatedPNG",imgSize:{},delay:10,nodesFixed:0,createVmlNameSpace:function(){if(document.namespaces&&!document.namespaces[this.ns]){document.namespaces.add(this.ns,"urn:schemas-microsoft-com:vml")}},createVmlStyleSheet:function(){var b,a;b=document.createElement("style");b.setAttribute("media","screen");document.documentElement.firstChild.insertBefore(b,document.documentElement.firstChild.firstChild);if(b.styleSheet){b=b.styleSheet;b.addRule(this.ns+"\\:*","{behavior:url(#default#VML)}");b.addRule(this.ns+"\\:shape","position:absolute;");b.addRule("img."+this.ns+"_sizeFinder","behavior:none; border:none; position:absolute; z-index:-1; top:-10000px; visibility:hidden;");this.screenStyleSheet=b;a=document.createElement("style");a.setAttribute("media","print");document.documentElement.firstChild.insertBefore(a,document.documentElement.firstChild.firstChild);a=a.styleSheet;a.addRule(this.ns+"\\:*","{display: none !important;}");a.addRule("img."+this.ns+"_sizeFinder","{display: none !important;}")}},readPropertyChange:function(){var b,c,a;b=event.srcElement;if(!b.vmlInitiated){return}if(event.propertyName.search("background")!=-1||event.propertyName.search("border")!=-1){DD_belatedPNG.applyVML(b)}if(event.propertyName=="style.display"){c=(b.currentStyle.display=="none")?"none":"block";for(a in b.vml){if(b.vml.hasOwnProperty(a)){b.vml[a].shape.style.display=c}}}if(event.propertyName.search("filter")!=-1){DD_belatedPNG.vmlOpacity(b)}},vmlOpacity:function(b){if(b.currentStyle.filter.search("lpha")!=-1){var a=b.currentStyle.filter;a=parseInt(a.substring(a.lastIndexOf("=")+1,a.lastIndexOf(")")),10)/100;b.vml.color.shape.style.filter=b.currentStyle.filter;b.vml.image.fill.opacity=a}},handlePseudoHover:function(a){setTimeout(function(){DD_belatedPNG.applyVML(a)},1)},fix:function(a){if(this.screenStyleSheet){var c,b;c=a.split(",");for(b=0;b<c.length;b++){this.screenStyleSheet.addRule(c[b],"behavior:expression(DD_belatedPNG.fixPng(this))")}}},applyVML:function(a){a.runtimeStyle.cssText="";this.vmlFill(a);this.vmlOffsets(a);this.vmlOpacity(a);if(a.isImg){this.copyImageBorders(a)}},attachHandlers:function(i){var d,c,g,e,b,f;d=this;c={resize:"vmlOffsets",move:"vmlOffsets"};if(i.nodeName=="A"){e={mouseleave:"handlePseudoHover",mouseenter:"handlePseudoHover",focus:"handlePseudoHover",blur:"handlePseudoHover"};for(b in e){if(e.hasOwnProperty(b)){c[b]=e[b]}}}for(f in c){if(c.hasOwnProperty(f)){g=function(){d[c[f]](i)};i.attachEvent("on"+f,g)}}i.attachEvent("onpropertychange",this.readPropertyChange)},giveLayout:function(a){a.style.zoom=1;if(a.currentStyle.position=="static"){a.style.position="relative"}},copyImageBorders:function(b){var c,a;c={borderStyle:true,borderWidth:true,borderColor:true};for(a in c){if(c.hasOwnProperty(a)){b.vml.color.shape.style[a]=b.currentStyle[a]}}},vmlFill:function(e){if(!e.currentStyle){return}else{var d,f,g,b,a,c;d=e.currentStyle}for(b in e.vml){if(e.vml.hasOwnProperty(b)){e.vml[b].shape.style.zIndex=d.zIndex}}e.runtimeStyle.backgroundColor="";e.runtimeStyle.backgroundImage="";f=true;if(d.backgroundImage!="none"||e.isImg){if(!e.isImg){e.vmlBg=d.backgroundImage;e.vmlBg=e.vmlBg.substr(5,e.vmlBg.lastIndexOf('")')-5)}else{e.vmlBg=e.src}g=this;if(!g.imgSize[e.vmlBg]){a=document.createElement("img");g.imgSize[e.vmlBg]=a;a.className=g.ns+"_sizeFinder";a.runtimeStyle.cssText="behavior:none; position:absolute; left:-10000px; top:-10000px; border:none; margin:0; padding:0;";c=function(){this.width=this.offsetWidth;this.height=this.offsetHeight;g.vmlOffsets(e)};a.attachEvent("onload",c);a.src=e.vmlBg;a.removeAttribute("width");a.removeAttribute("height");document.body.insertBefore(a,document.body.firstChild)}e.vml.image.fill.src=e.vmlBg;f=false}e.vml.image.fill.on=!f;e.vml.image.fill.color="none";e.vml.color.shape.style.backgroundColor=d.backgroundColor;e.runtimeStyle.backgroundImage="none";e.runtimeStyle.backgroundColor="transparent"},vmlOffsets:function(d){var h,n,a,e,g,m,f,l,j,i,k;h=d.currentStyle;n={W:d.clientWidth+1,H:d.clientHeight+1,w:this.imgSize[d.vmlBg].width,h:this.imgSize[d.vmlBg].height,L:d.offsetLeft,T:d.offsetTop,bLW:d.clientLeft,bTW:d.clientTop};a=(n.L+n.bLW==1)?1:0;e=function(b,p,q,c,s,u){b.coordsize=c+","+s;b.coordorigin=u+","+u;b.path="m0,0l"+c+",0l"+c+","+s+"l0,"+s+" xe";b.style.width=c+"px";b.style.height=s+"px";b.style.left=p+"px";b.style.top=q+"px"};e(d.vml.color.shape,(n.L+(d.isImg?0:n.bLW)),(n.T+(d.isImg?0:n.bTW)),(n.W-1),(n.H-1),0);e(d.vml.image.shape,(n.L+n.bLW),(n.T+n.bTW),(n.W),(n.H),1);g={X:0,Y:0};if(d.isImg){g.X=parseInt(h.paddingLeft,10)+1;g.Y=parseInt(h.paddingTop,10)+1}else{for(j in g){if(g.hasOwnProperty(j)){this.figurePercentage(g,n,j,h["backgroundPosition"+j])}}}d.vml.image.fill.position=(g.X/n.W)+","+(g.Y/n.H);m=h.backgroundRepeat;f={T:1,R:n.W+a,B:n.H,L:1+a};l={X:{b1:"L",b2:"R",d:"W"},Y:{b1:"T",b2:"B",d:"H"}};if(m!="repeat"||d.isImg){i={T:(g.Y),R:(g.X+n.w),B:(g.Y+n.h),L:(g.X)};if(m.search("repeat-")!=-1){k=m.split("repeat-")[1].toUpperCase();i[l[k].b1]=1;i[l[k].b2]=n[l[k].d]}if(i.B>n.H){i.B=n.H}d.vml.image.shape.style.clip="rect("+i.T+"px "+(i.R+a)+"px "+i.B+"px "+(i.L+a)+"px)"}else{d.vml.image.shape.style.clip="rect("+f.T+"px "+f.R+"px "+f.B+"px "+f.L+"px)"}},figurePercentage:function(d,c,f,a){var b,e;e=true;b=(f=="X");switch(a){case"left":case"top":d[f]=0;break;case"center":d[f]=0.5;break;case"right":case"bottom":d[f]=1;break;default:if(a.search("%")!=-1){d[f]=parseInt(a,10)/100}else{e=false}}d[f]=Math.ceil(e?((c[b?"W":"H"]*d[f])-(c[b?"w":"h"]*d[f])):parseInt(a,10));if(d[f]%2===0){d[f]++}return d[f]},fixPng:function(c){c.style.behavior="none";var g,b,f,a,d;if(c.nodeName=="BODY"||c.nodeName=="TD"||c.nodeName=="TR"){return}c.isImg=false;if(c.nodeName=="IMG"){if(c.src.toLowerCase().search(/\.png$/)!=-1){c.isImg=true;c.style.visibility="hidden"}else{return}}else{if(c.currentStyle.backgroundImage.toLowerCase().search(".png")==-1){return}}g=DD_belatedPNG;c.vml={color:{},image:{}};b={shape:{},fill:{}};for(a in c.vml){if(c.vml.hasOwnProperty(a)){for(d in b){if(b.hasOwnProperty(d)){f=g.ns+":"+d;c.vml[a][d]=document.createElement(f)}}c.vml[a].shape.stroked=false;c.vml[a].shape.appendChild(c.vml[a].fill);c.parentNode.insertBefore(c.vml[a].shape,c)}}c.vml.image.shape.fillcolor="none";c.vml.image.fill.type="tile";c.vml.color.fill.on=false;g.attachHandlers(c);g.giveLayout(c);g.giveLayout(c.offsetParent);c.vmlInitiated=true;g.applyVML(c)}};try{document.execCommand("BackgroundImageCache",false,true)}catch(r){}DD_belatedPNG.createVmlNameSpace();DD_belatedPNG.createVmlStyleSheet();
@@ -16,4 +16,6 @@ $selected-background-color: #FF5E99;
16
16
 
17
17
  $valid-input-background-color: #ddf0dd;
18
18
 
19
- $invalid-input-background-color: #f0dddd;
19
+ $invalid-input-background-color: #f0dddd;
20
+
21
+ $invalid-input-shadow-color: red;
@@ -18,7 +18,6 @@ body, select, input, textarea { color: $font-color; }
18
18
  h1, h2, h3, h4, h5, h6 { @include bold-font; }
19
19
 
20
20
  html {
21
- @include font-smoothing;
22
21
  @include force-scrollbar;
23
22
  }
24
23
 
@@ -36,6 +35,13 @@ td, td img { vertical-align: top; }
36
35
  sub { vertical-align: sub; font-size: smaller; }
37
36
  sup { vertical-align: super; font-size: smaller; }
38
37
 
38
+ input:valid {
39
+ @include valid-input;
40
+ }
41
+ input:invalid {
42
+ @include invalid-input;
43
+ }
44
+
39
45
  @include accessible-focus;
40
46
 
41
47
  @include quoted-pre;
@@ -44,8 +50,6 @@ sup { vertical-align: super; font-size: smaller; }
44
50
 
45
51
  @include hand-cursor-inputs;
46
52
 
47
- @include input-validation;
48
-
49
53
  @include selected-text;
50
54
 
51
55
  @include webkit-tap-highlight;
@@ -62,9 +66,9 @@ sup { vertical-align: super; font-size: smaller; }
62
66
 
63
67
  .visuallyhidden { @include visually-hidden; }
64
68
 
65
- // Make any element or classname behave as
66
- // clearfix by passing in a selector
67
- @include clearfix('.clearfix');
69
+ .clearfix {
70
+ @include pie-clearfix; // Already defined by compass
71
+ }
68
72
 
69
73
 
70
74
  //--------------------------------
metadata CHANGED
@@ -5,8 +5,8 @@ version: !ruby/object:Gem::Version
5
5
  segments:
6
6
  - 0
7
7
  - 1
8
- - 5
9
- version: 0.1.5
8
+ - 6
9
+ version: 0.1.6
10
10
  platform: ruby
11
11
  authors:
12
12
  - Peter Gumeson
@@ -14,7 +14,7 @@ autorequire:
14
14
  bindir: bin
15
15
  cert_chain: []
16
16
 
17
- date: 2010-08-24 00:00:00 -07:00
17
+ date: 2010-08-27 00:00:00 -07:00
18
18
  default_executable:
19
19
  dependencies:
20
20
  - !ruby/object:Gem::Dependency