ZURB-foundation 2.1.3b

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. data/README.mkdn +65 -0
  2. data/lib/ZURB-foundation.rb +9 -0
  3. data/stylesheets/ZURB/_forms.sass +192 -0
  4. data/stylesheets/ZURB/_foundation.sass +9 -0
  5. data/stylesheets/ZURB/_globals.sass +132 -0
  6. data/stylesheets/ZURB/_grid.sass +186 -0
  7. data/stylesheets/ZURB/_includes.sass +3 -0
  8. data/stylesheets/ZURB/_mobile.sass +292 -0
  9. data/stylesheets/ZURB/_orbit.sass +156 -0
  10. data/stylesheets/ZURB/_reveal.sass +88 -0
  11. data/stylesheets/ZURB/_typography.sass +129 -0
  12. data/stylesheets/ZURB/_ui.sass +447 -0
  13. data/stylesheets/ZURB/includes/_colors.sass +8 -0
  14. data/stylesheets/ZURB/includes/_mixins.sass +32 -0
  15. data/stylesheets/ZURB/includes/_settings.sass +5 -0
  16. data/templates/project/MIT-LICENSE.txt +20 -0
  17. data/templates/project/humans.txt +8 -0
  18. data/templates/project/images/misc/button-gloss.png +0 -0
  19. data/templates/project/images/misc/button-overlay.png +0 -0
  20. data/templates/project/images/misc/custom-form-sprites.png +0 -0
  21. data/templates/project/images/misc/input-bg.png +0 -0
  22. data/templates/project/images/misc/modal-gloss.png +0 -0
  23. data/templates/project/images/misc/table-sorter.png +0 -0
  24. data/templates/project/images/orbit/bullets.jpg +0 -0
  25. data/templates/project/images/orbit/left-arrow.png +0 -0
  26. data/templates/project/images/orbit/loading.gif +0 -0
  27. data/templates/project/images/orbit/mask-black.png +0 -0
  28. data/templates/project/images/orbit/pause-black.png +0 -0
  29. data/templates/project/images/orbit/right-arrow.png +0 -0
  30. data/templates/project/images/orbit/rotator-black.png +0 -0
  31. data/templates/project/images/orbit/timer-black.png +0 -0
  32. data/templates/project/index.html +151 -0
  33. data/templates/project/javascripts/app.js +94 -0
  34. data/templates/project/javascripts/forms.jquery.js +58 -0
  35. data/templates/project/javascripts/jquery.customforms.js +168 -0
  36. data/templates/project/javascripts/jquery.min.js +4 -0
  37. data/templates/project/javascripts/jquery.orbit-1.3.0.js +597 -0
  38. data/templates/project/javascripts/jquery.placeholder.min.js +2 -0
  39. data/templates/project/javascripts/jquery.reveal.js +126 -0
  40. data/templates/project/manifest.rb +49 -0
  41. data/templates/project/robots.txt +4 -0
  42. data/templates/project/sass/app.sass +26 -0
  43. data/templates/project/sass/ie.sass +14 -0
  44. metadata +98 -0
@@ -0,0 +1,88 @@
1
+ @import includes/settings
2
+ @import includes/mixins
3
+ @import includes/colors
4
+ /* Reveal Modals */
5
+ .reveal-modal-bg
6
+ position: fixed
7
+ height: 100%
8
+ width: 100%
9
+ background: #000
10
+ background: rgba(0,0,0,0.8)
11
+ z-index: 100
12
+ display: none
13
+ top: 0
14
+ left: 0
15
+
16
+ .reveal-modal
17
+ visibility: hidden
18
+ top: 100px
19
+ left: 50%
20
+ margin-left: -300px
21
+ width: 520px
22
+ background: #eee image-url('misc/modal-gloss.png') no-repeat -200 -80
23
+ position: absolute
24
+ z-index: 101
25
+ padding: 30 40 34px
26
+ +border-radius(5px)
27
+ +box-shadow(0 0 10 rgba(0,0,0,0.4))
28
+ &.small
29
+ width: 200px
30
+ margin-left: -140px
31
+ &.medium
32
+ width: 400px
33
+ margin-left: -240px
34
+ &.large
35
+ width: 600px
36
+ margin-left: -340px
37
+ &.xlarge
38
+ width: 800px
39
+ margin-left: -440px
40
+ .close-reveal-modal
41
+ +font-size(22)
42
+ line-height: .5
43
+ position: absolute
44
+ top: 8px
45
+ right: 11px
46
+ color: #aaa
47
+ text-shadow: 0 -1px 1px rgba(0,0,0,0.6)
48
+ font-weight: bold
49
+ cursor: pointer
50
+ .row
51
+ min-width: 0
52
+
53
+ /* Mobile */
54
+ @media only screen and (device-width: 768px), (device-width: 800)
55
+ .reveal-modal-bg
56
+ position: absolute
57
+ .reveal-modal
58
+ &.small, &.medium, &.large, &.xlarge
59
+ width: 60%
60
+ top: 30%
61
+ left: 15%
62
+ margin-left: 0
63
+ padding: 5%
64
+ height: auto
65
+ @media only screen and (max-width: 767px)
66
+ .reveal-modal-bg
67
+ position: absolute
68
+ .reveal-modal
69
+ &.small, &.medium, &.large, &.xlarge
70
+ width: 80%
71
+ top: 15%
72
+ left: 5%
73
+ margin-left: 0
74
+ padding: 5%
75
+ height: auto
76
+
77
+
78
+ /* NOTES */
79
+ /* Close button entity is × */
80
+
81
+ /* Example markup */
82
+ /* <div id="myModal" class="reveal-modal"> */
83
+ /* <h2>Awesome. I have it.</h2> */
84
+ /* <p class="lead">Your couch. I it's mine.</p> */
85
+ /* <p>Lorem ipsum dolor sit amet...</p> */
86
+ /* <a class="close-reveal-modal">&#215;</a> */
87
+ /* </div> */
88
+
@@ -0,0 +1,129 @@
1
+ @import includes
2
+
3
+ /* Typography */
4
+ h1,h2,h3,h4,h5,h6
5
+ color: #181818
6
+ font-weight: bold
7
+ line-height: 1.25
8
+ small
9
+ color: #777
10
+ a
11
+ font-weight: inherit
12
+ h1
13
+ +font-size(46)
14
+ margin-bottom: 12px
15
+ h2
16
+ +font-size(35)
17
+ margin-bottom: 9px
18
+ h3
19
+ +font-size(28)
20
+ margin-bottom: 9px
21
+ h4
22
+ +font-size(21)
23
+ margin-bottom: 3px
24
+ h5
25
+ +font-size(18)
26
+ margin-bottom: 3px
27
+ font-weight: normal
28
+ h6
29
+ +font-size(15)
30
+ font-weight: normal
31
+
32
+ .subhead
33
+ color: #777
34
+ font-weight: 300
35
+ margin-bottom: 24px
36
+
37
+ p
38
+ line-height: 17px
39
+ margin: 0 0 18px
40
+ img
41
+ margin: 0
42
+ &.lead
43
+ +font-size(18)
44
+ line-height: 24px
45
+
46
+ em, i
47
+ font-style: italic
48
+ line-height: inherit
49
+ strong, b
50
+ font-weight: bold
51
+ line-height: inherit
52
+ small
53
+ font-size: 60%
54
+ line-height: inherit
55
+
56
+ /* Blockquotes */
57
+ blockquote
58
+ line-height: 20px
59
+ color: #777
60
+ margin: 0 0 18px
61
+ padding: 9px 20px 0 19px
62
+ border-left: 1px solid #ddd
63
+ p
64
+ line-height: 20px
65
+ color: #777
66
+ cite
67
+ display: block
68
+ +font-size(12)
69
+ color: #555
70
+ &:before
71
+ content: "/2014 /0020"
72
+ a, a:visited
73
+ color: #555
74
+
75
+ hr
76
+ border: solid #ddd
77
+ border-width: 1px 0 0
78
+ clear: both
79
+ margin: 12px 0 18px
80
+ height: 0
81
+
82
+ abbr, acronym
83
+ text-transform: uppercase
84
+ font-size: 90%
85
+ color: #222
86
+ border-bottom: 1px solid #ddd
87
+ cursor: help
88
+ abbr
89
+ text-transform: none
90
+
91
+ /* Print styles. Inlined to avoid required HTTP connection: */ /* www.phpied.com/delay-loading-your-print-css/ */
92
+ /* Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com) */
93
+ .print-only
94
+ display: block !important
95
+ @media print
96
+ *
97
+ background: transparent !important
98
+ color: $black !important
99
+ text-shadow: none !important
100
+ filter: none !important
101
+ -ms-filter: none !important
102
+ p
103
+ a, a:visited
104
+ color: #444 !important
105
+ text-decoration: underline
106
+ a[href]:after
107
+ content: " (" attr(href) ")"
108
+ abbr[title]:after
109
+ content: " (" attr(href) ")"
110
+ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after
111
+ content: ""
112
+ pre, blockquote
113
+ border: solid 1px #999
114
+ page-break-inside: avoid
115
+ thead
116
+ display: table-header-group
117
+ tr, img
118
+ page-break-inside: avoid
119
+ @page
120
+ margin: 0.5cm
121
+ p, h2, h3
122
+ orphans: 3
123
+ widows: 3
124
+ h2, h3
125
+ page-break-after: avoid
126
+ .hide-on-print
127
+ display: none !important
128
+ .print-only
129
+ display: block !important
@@ -0,0 +1,447 @@
1
+ @import includes/settings
2
+ @import includes/mixins
3
+ @import includes/colors
4
+ /* Table of Content */
5
+ /* :: Buttons */
6
+ /* :: Notices/Alerts */
7
+ /* :: tabs */
8
+ /* :: Pagination */
9
+ /* :: Lists */
10
+ /* :: Panels */
11
+ /* :: Nav */
12
+ /* :: Video */
13
+ /* :: Microformats */
14
+
15
+ /* Buttons */
16
+ .button
17
+ background: $blue
18
+ display: inline-block
19
+ text-align: center
20
+ padding: 9px 34px 11px
21
+ color: $white
22
+ text-decoration: none
23
+ font-weight: bold
24
+ +HelveticaFontStack
25
+ line-height: 1
26
+ position: relative
27
+ cursor: pointer
28
+ border: none
29
+ &.nice
30
+ background-color: $blue
31
+ +background-image(linear-gradient(rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.2) 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 100%))
32
+ +box-shadow(0 1px 0 rgba(255,255,255,0.5) inset)
33
+ text-shadow: 0 -1px 1px rgba(0,0,0,0.28)
34
+ border: solid 1px darken($blue, 7%)
35
+ +transition-property(background-color)
36
+ +transition-duration(.15s)
37
+ +transition-timing-function(ease-in-out)
38
+ &.radius
39
+ +border-radius(3px)
40
+ &.round
41
+ +border-radius(1000)
42
+ &.full-width
43
+ width: 100%
44
+ padding-left: 0 !important
45
+ padding-right: 0 !important
46
+ text-align: center
47
+ &.left-align
48
+ text-align: left
49
+ text-indent: 12px
50
+
51
+ input[type=submit].button
52
+ -webkit-appearance: none
53
+
54
+ /* Sizes */
55
+ .button
56
+ &.small
57
+ +font-size(11)
58
+ padding: 8px 20px 10px
59
+ width: auto
60
+ &.medium
61
+ +font-size(13)
62
+ width: auto
63
+ &.large
64
+ +font-size(18)
65
+ padding: 11px 48px 13px
66
+ width: auto
67
+ /* Colors */
68
+ .button
69
+ &.blue
70
+ background-color: $blue
71
+ &.red
72
+ background-color: $red
73
+ &.white
74
+ background-color: #e9e9e9
75
+ color: #333
76
+ &.black
77
+ background-color: $black
78
+ /* Nice Colors */
79
+ .nice
80
+ &.button
81
+ &.blue
82
+ border: solid 1px darken($blue, 7%)
83
+ &.red
84
+ border: solid 1px darken($red, 7%)
85
+ &.white
86
+ border: solid 1px darken($white, 14%)
87
+ text-shadow: none !important
88
+ &.black
89
+ border: solid 1px darken($black, 7%)
90
+ /* Hovers */
91
+ .button
92
+ &:hover, &:focus
93
+ background-color: darken($blue, 5%)
94
+ color: #fff
95
+ &.blue
96
+ &:hover, &:focus
97
+ background-color: darken($blue, 5%)
98
+ &.red
99
+ &:hover, &:focus
100
+ background-color: darken($red, 5%)
101
+ &.white
102
+ &:hover, &:focus
103
+ background-color: darken($white, 12%)
104
+ color: #333
105
+ &.black
106
+ &:hover, &:focus
107
+ background-color: darken($black, 5%)
108
+
109
+ /* Disabled */
110
+ .button.disabled, .button[disabled]
111
+ +opacity(0.6)
112
+ cursor: default
113
+
114
+ /* Alerts */
115
+ div.alert-box
116
+ display: block
117
+ padding: 6px 7px
118
+ font-weight: bold
119
+ +font-size(13)
120
+ background: #eee
121
+ border: 1px solid rgba(0,0,0,0.1)
122
+ margin-bottom: 12px
123
+ +border-radius(3px)
124
+ text-shadow: 0 1px rgba(255,255,255,0.9)
125
+ position: relative
126
+ &.success
127
+ background-color: #7fae00
128
+ color: $white
129
+ text-shadow: 0 -1px rgba(0,0,0,0.3)
130
+ &.warning
131
+ background-color: #c08c00
132
+ color: $white
133
+ text-shadow: 0 -1px rgba(0,0,0,0.3)
134
+ &.error
135
+ background-color: #c00000
136
+ color: $white
137
+ text-shadow: 0 -1px rgba(0,0,0,0.3)
138
+ a.close
139
+ color: $black
140
+ position: absolute
141
+ right: 4px
142
+ top: 0
143
+ +font-size(18)
144
+ +opacity(0.2)
145
+ padding: 4px
146
+ &:hover, &:focus
147
+ +opacity(0.4)
148
+
149
+ /* Tabs */
150
+ dl.tabs
151
+ display: block
152
+ margin: 0 0 20px
153
+ padding: 0
154
+ height: 30px
155
+ border-bottom: solid 1px #ddd
156
+ dt
157
+ display: block
158
+ width: auto
159
+ height: 30px
160
+ padding: 0 9px 0 20px
161
+ line-height: 30px
162
+ float: left
163
+ color: #999
164
+ +font-size(11)
165
+ text-transform: uppercase
166
+ cursor: default
167
+ &:first-child
168
+ padding: 0 9px 0 0
169
+ dd
170
+ display: block
171
+ width: auto
172
+ height: 30px
173
+ padding: 0
174
+ float: left
175
+ a
176
+ display: block
177
+ width: auto
178
+ height: 29px
179
+ padding: 0 9px
180
+ line-height: 30
181
+ border: solid 1px #ddd
182
+ margin: 0 -1px 0 0
183
+ color: #555
184
+ background: #eee
185
+ &.active
186
+ background: #fff
187
+ border-width: 1px 1px 0 1px
188
+ height: 30px
189
+ .nice
190
+ &.tabs
191
+ border-bottom: solid 1px #eee
192
+ margin: 0 0 30px
193
+ height: 43px
194
+ dd
195
+ a
196
+ padding: 7px 18px 9px
197
+ +font-size(15)
198
+ color: #555
199
+ background: none
200
+ border: none
201
+ &.active
202
+ font-weight: bold
203
+ color: #333
204
+ background: #fff
205
+ border-left: 1px solid #eee
206
+ border-right: 1px solid #eee
207
+ border-top: 1px solid #00a6fc
208
+ margin: 0 10px
209
+ position: relative
210
+ top: -5px
211
+ &:first-child
212
+ a.active
213
+ margin-left: 0
214
+ dl.tabs.vertical
215
+ height: auto
216
+ dl.tabs.vertical dt, dl.tabs.vertical dd, dl.nice.tabs.vertical dt, dl.nice.tabs.vertical dd
217
+ float: none
218
+ height: auto
219
+ dl.tabs.vertical dd a
220
+ display: block
221
+ width: auto
222
+ height: auto
223
+ padding: 15px 20px
224
+ line-height: 1
225
+ border: solid 0 #ccc
226
+ border-width: 1px 1px 0
227
+ margin: 0
228
+ color: #555
229
+ background: #eee
230
+ +font-size(15)
231
+ &.active
232
+ height: auto
233
+ margin: 0
234
+ border-width: 1px 0 0
235
+ background: $white
236
+ .nice.tabs.vertical
237
+ border-bottom: solid 1px #eee
238
+ height: auto
239
+ dd
240
+ a
241
+ padding: 15px 20px
242
+ background: $white
243
+ border: none
244
+ border-left: 1px solid #eee
245
+ border-right: 1px solid #eee
246
+ border-top: 1px solid #eee
247
+ &.active
248
+ border: none
249
+ background: $blue
250
+ color: $white
251
+ margin: 0
252
+ position: static
253
+ top: 0
254
+ height: auto
255
+ &:first-child
256
+ margin-left: 0
257
+ dl.tabs.vertical
258
+ height: auto
259
+ dt,
260
+
261
+ ul.tabs-content
262
+ margin: 0
263
+ display: block
264
+ &>li
265
+ display: none
266
+ &.active
267
+ display: block
268
+
269
+ dl.contained, dl.nice.contained
270
+ margin-bottom: 0
271
+ dl.contained.tabs dd a
272
+ padding: 0 14px
273
+ dl.nice.contained.tabs dd a
274
+ padding: 7px 18px 9px
275
+
276
+ ul.contained.tabs-content
277
+ padding: 0
278
+ &>li
279
+ padding: 20px
280
+ border: solid 0 #ddd
281
+ border-width: 0 1px 1px 1px
282
+ ul.nice.contained.tabs-content
283
+ &>li
284
+ border-color: #eee
285
+
286
+ /* Pagination */
287
+ ul.pagination
288
+ display: block
289
+ height: 24px
290
+ margin-left: -5px
291
+ li
292
+ float: left
293
+ display: block
294
+ height: 24px
295
+ color: #999
296
+ +font-size(15)
297
+ margin-left: 5px
298
+ a
299
+ display: block
300
+ padding: 6px 7px 4px
301
+ color: #555
302
+ &.current, &:hover, &:focus
303
+ a
304
+ border-bottom: solid 2px #00a6fc
305
+ color: #141414
306
+ &.unavailable
307
+ a
308
+ cursor: default
309
+ color: #999
310
+ &:hover, &:focus
311
+ a
312
+ border-bottom: none
313
+
314
+ /* Lists */
315
+ ul.nice, ol.nice
316
+ list-style: none
317
+ margin: 0
318
+ li
319
+ padding-left: 13px
320
+ position: relative
321
+ ul.nice li span.bullet, ol.nice li span.number
322
+ position: absolute
323
+ left: 0
324
+ top: 0
325
+ color: #ccc
326
+
327
+ /* Panels */
328
+ div.panel
329
+ padding: 20px 20px 2px 20px
330
+ background-color: #efefef
331
+ +background-image(linear-gradient(#ffffff 0%, #f4f4f4 100%))
332
+ +box-shadow(0 2px 5px rgba(0,0,0,0.15))
333
+ margin: 0 0 20px 0
334
+
335
+ /* Nav Bar with Dropdowns */
336
+ .nav-bar
337
+ height: 45px
338
+ background: #fff
339
+ margin-top: 20px
340
+ border: 1px solid #ddd
341
+ &>li
342
+ float: left
343
+ display: block
344
+ position: relative
345
+ padding: 0
346
+ margin: 0
347
+ border-right: 1px solid #ddd
348
+ line-height: 45px
349
+ .flyout
350
+ display: none
351
+ &>a
352
+ position: relative
353
+ +font-size(15)
354
+ padding: 0 20px
355
+ display: block
356
+ text-decoration: none
357
+ border-right: 1px solid #ddd
358
+ &>input
359
+ margin: 0 16px
360
+ ul
361
+ margin-bottom: 0
362
+ li
363
+ line-height: 1.3
364
+ &:hover
365
+ .flyout
366
+ display: block
367
+ &>a
368
+ color: #141414
369
+ z-index: 2
370
+ &:after
371
+ border-top-color: #141414
372
+ &.has-flyout
373
+ &>a
374
+ padding-right: 36px
375
+ &:after
376
+ content: ""
377
+ width: 0
378
+ height: 0
379
+ border-left: 4px solid transparent
380
+ border-right: 4px solid transparent
381
+ border-top: 4px solid #2a85e8
382
+ display: block
383
+ position: absolute
384
+ right: 18px
385
+ bottom: 20px
386
+
387
+ .flyout
388
+ background: #fff
389
+ margin: 0
390
+ padding: 20px
391
+ border: 1px solid #ddd
392
+ position: absolute
393
+ top: 45px
394
+ left: -1px
395
+ width: 400px
396
+ z-index: 10
397
+ &.small
398
+ width: 200px
399
+ &.large
400
+ width: 600px
401
+ &.right
402
+ left: auto
403
+ right: 0
404
+ p:last-child
405
+ margin-bottom: 0
406
+
407
+ /* Video */
408
+ /* Mad props to http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ */
409
+ .video
410
+ position: relative
411
+ padding-top: 25px
412
+ padding-bottom: 67.5%
413
+ height: 0
414
+ margin-bottom: 16px
415
+ overflow: hidden
416
+ &.widescreen
417
+ padding-bottom: 57.25%
418
+ &.vimeo
419
+ padding-top: 0
420
+ iframe, object, embed
421
+ position: absolute
422
+ top: 0
423
+ left: 0
424
+ width: 100%
425
+ height: 100%
426
+
427
+ /* Microformats */
428
+ /* hcard */
429
+ ul.vcard
430
+ display: inline-block
431
+ margin: 0 0 12px 0
432
+ border: 1px solid #ddd
433
+ padding: 10px
434
+ li
435
+ margin: 0
436
+ display: block
437
+ &.fn
438
+ font-weight: bold
439
+ +font-size(15)
440
+ p.vevent span.summary
441
+ font-weight: bold
442
+ p.vevent abbr
443
+ cursor: default
444
+ text-decoration: none
445
+ font-weight: bold
446
+ border: none
447
+ padding: 0 1px