zurb-foundation 3.0.9 → 3.1.0.rc1

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 (41) hide show
  1. data/lib/foundation/version.rb +1 -1
  2. data/scss/foundation/_settings.scss +40 -1
  3. data/scss/foundation/common/_forms.scss +15 -15
  4. data/scss/foundation/common/_globals.scss +6 -2
  5. data/scss/foundation/common/_typography.scss +7 -5
  6. data/scss/foundation/components/_grid.scss +20 -20
  7. data/scss/foundation/components/modules/_all.scss +1 -0
  8. data/scss/foundation/components/modules/_buttons.scss +33 -33
  9. data/scss/foundation/components/modules/_navbar.scss +26 -23
  10. data/scss/foundation/components/modules/_orbit.scss +24 -24
  11. data/scss/foundation/components/modules/_reveal.scss +10 -10
  12. data/scss/foundation/components/modules/_tabs.scss +16 -13
  13. data/scss/foundation/components/modules/_topbar.scss +246 -0
  14. data/scss/foundation/components/modules/_ui.scss +57 -29
  15. data/scss/foundation/mixins/_css-triangle.scss +1 -1
  16. data/templates/project/scss/_settings.scss +32 -2
  17. data/templates/project/scss/app.scss +1 -0
  18. data/test/buttons.html +18 -8
  19. data/test/elements.html +62 -18
  20. data/test/forms.html +25 -49
  21. data/test/index.html +1 -0
  22. data/test/navigation.html +1 -1
  23. data/test/reveal.html +24 -7
  24. data/test/scss/_settings.scss +142 -74
  25. data/test/tabs.html +1 -1
  26. data/test/topbar.html +188 -0
  27. data/vendor/assets/javascripts/foundation/app.js +33 -21
  28. data/vendor/assets/javascripts/foundation/jquery.foundation.accordion.js +6 -4
  29. data/vendor/assets/javascripts/foundation/jquery.foundation.alerts.js +6 -5
  30. data/vendor/assets/javascripts/foundation/jquery.foundation.buttons.js +13 -7
  31. data/vendor/assets/javascripts/foundation/jquery.foundation.forms.js +5 -4
  32. data/vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js +8 -6
  33. data/vendor/assets/javascripts/foundation/jquery.foundation.navigation.js +3 -2
  34. data/vendor/assets/javascripts/foundation/jquery.foundation.orbit.js +208 -6
  35. data/vendor/assets/javascripts/foundation/jquery.foundation.reveal.js +5 -6
  36. data/vendor/assets/javascripts/foundation/jquery.foundation.tabs.js +3 -2
  37. data/vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js +13 -7
  38. data/vendor/assets/javascripts/foundation/jquery.foundation.topbar.js +139 -0
  39. data/vendor/assets/javascripts/foundation/jquery.js +3416 -3519
  40. data/vendor/assets/javascripts/foundation/jquery.offcanvas.js +2 -2
  41. metadata +10 -9
data/test/forms.html CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  <!-- Included CSS Files -->
16
16
  <link rel="stylesheet" href="stylesheets/styles.css">
17
-
17
+
18
18
  <script src="../vendor/assets/javascripts/foundation/modernizr.foundation.js"></script>
19
19
 
20
20
  <!-- IE Fix for HTML5 Tags -->
@@ -23,7 +23,7 @@
23
23
  <![endif]-->
24
24
  </head>
25
25
  <body>
26
-
26
+
27
27
  <div class="row">
28
28
  <div class="twelve columns">
29
29
  <p><a href="index.html">&laquo; Back</a></p>
@@ -39,36 +39,10 @@
39
39
  </dl>
40
40
  </div>
41
41
  </div>
42
-
42
+
43
43
  <!-- Test Foundation Components Here -->
44
44
  <div class="row">
45
45
  <div class="twelve columns">
46
- <form class="custom">
47
- <div class="row collapse">
48
- <div class="eight mobile-three columns">
49
- <input type="text" />
50
- </div>
51
- <div class="four mobile-one columns">
52
- <a href="#" class="postfix button">Buscar</a>
53
- </div>
54
- </div>
55
- <div class="row">
56
- <div class="six columns">
57
- <label for="radio1">
58
- <input name="radio1" type="radio" id="radio1"
59
- checked="checked" style="display:none;">
60
- <span class="custom radio"></span> RB1
61
- </label>
62
- </div>
63
- <div class="six columns">
64
- <label for="radio2">
65
- <input name="radio1" type="radio" id="radio2"
66
- style="display:none;">
67
- <span class="custom radio"></span> RB2
68
- </label>
69
- </div>
70
- </div>
71
- </form>
72
46
  <a name="general"></a>
73
47
  <h3>Forms</h3>
74
48
  <h4 class="subheader">We set out in Foundation 3 to create an easy to handle, powerful, and versatile form layout system. A combination of form styles and the Foundation grid means you can do basically anything.</h4>
@@ -99,6 +73,7 @@ style="display:none;">
99
73
  <input type="text" placeholder="ZIP" />
100
74
  </div>
101
75
  </div>
76
+ <textarea placeholder="Message"></textarea>
102
77
  </form>
103
78
  <p>Sometimes you want a form with labels to the left of your inputs. Piece of cake. You can add a class of <code>.right</code> to a label to have it align to the right, and if your label is next to an input (in another column) adding a class of <code>.inline</code> will have it vertically center against an input.</p>
104
79
 
@@ -160,7 +135,7 @@ style="display:none;">
160
135
  </div>
161
136
 
162
137
  <br>
163
-
138
+
164
139
  <div class="row">
165
140
  <div class="four columns">
166
141
  <a name="collapsed"></a>
@@ -227,7 +202,7 @@ style="display:none;">
227
202
  <input type="text" class="error" />
228
203
  <small class="error">Invalid entry</small>
229
204
  </div>
230
-
205
+
231
206
  <div class="six columns end error">
232
207
  <label>Another Error</label>
233
208
  <input type="text" />
@@ -236,7 +211,7 @@ style="display:none;">
236
211
  </div>
237
212
  </div>
238
213
  </div>
239
-
214
+
240
215
  <div class="row">
241
216
  <div class="four columns">
242
217
  <h4>Large Form Example</h4>
@@ -246,16 +221,16 @@ style="display:none;">
246
221
  <form>
247
222
  <fieldset>
248
223
  <legend>Large Form Example</legend>
249
-
224
+
250
225
  <div class="row">
251
226
  <div class="five columns">
252
-
227
+
253
228
  <label>Name</label>
254
229
  <input type="text" />
255
-
230
+
256
231
  <label>Occupation</label>
257
232
  <input type="text" />
258
-
233
+
259
234
  <label>Twitter</label>
260
235
  <div class="row collapse">
261
236
  <div class="two mobile-one columns">
@@ -265,7 +240,7 @@ style="display:none;">
265
240
  <input type="text" placeholder="foundationzurb" />
266
241
  </div>
267
242
  </div>
268
-
243
+
269
244
  <label>URL</label>
270
245
  <div class="row collapse">
271
246
  <div class="nine mobile-three columns">
@@ -275,27 +250,27 @@ style="display:none;">
275
250
  <span class="postfix">.com</span>
276
251
  </div>
277
252
  </div>
278
-
253
+
279
254
  </div>
280
-
255
+
281
256
  <div class="five columns">
282
-
257
+
283
258
  <label class="error">Field with Error</label>
284
259
  <input type="text" class="error" />
285
260
  <small class="error">Invalid entry</small>
286
-
261
+
287
262
  <div class="error">
288
263
  <label>Another Error</label>
289
264
  <input type="text" />
290
265
  <small>Invalid entry</small>
291
266
  </div>
292
-
267
+
293
268
  </div>
294
269
  </div>
295
-
270
+
296
271
  <label>Address</label>
297
272
  <input type="text" placeholder="Street (e.g. 123 Awesome St.)" />
298
-
273
+
299
274
  <div class="row">
300
275
  <div class="six columns">
301
276
  <input type="text" placeholder="City" />
@@ -309,12 +284,13 @@ style="display:none;">
309
284
  <input type="text" placeholder="ZIP" />
310
285
  </div>
311
286
  </div>
312
-
287
+
288
+ <textarea placeholder="Type something here..."></textarea>
313
289
  </fieldset>
314
290
  </form>
315
291
  </div>
316
292
  </div>
317
-
293
+
318
294
  <br><br>
319
295
 
320
296
  <div class="row">
@@ -325,7 +301,7 @@ style="display:none;">
325
301
  </div>
326
302
  <div class="eight columns">
327
303
  <form class="custom">
328
-
304
+
329
305
  <h5>Radio Buttons and Checkboxes</h5>
330
306
  <div class="row">
331
307
  <div class="four columns">
@@ -379,7 +355,7 @@ style="display:none;">
379
355
 
380
356
  </div>
381
357
  </div>
382
-
358
+
383
359
  <!-- Included JS Files -->
384
360
  <script src="../vendor/assets/javascripts/foundation/jquery.js"></script>
385
361
  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
@@ -396,6 +372,6 @@ style="display:none;">
396
372
  <script src="../vendor/assets/javascripts/foundation/app.js"></script>
397
373
  <script type="text/javascript">
398
374
  // Page-Specific JavaScript Goes Here
399
- </script>
375
+ </script>
400
376
  </body>
401
377
  </html>
data/test/index.html CHANGED
@@ -44,6 +44,7 @@
44
44
  <li><a href="type.html">Typography</a></li>
45
45
  <li><a href="buttons.html">Buttons</a></li>
46
46
  <li><a href="forms.html">Forms</a></li>
47
+ <li><a href="topbar.html">Top Bar</a></li>
47
48
  <li><a href="navigation.html">Navigation</a></li>
48
49
  <li><a href="tabs.html">Tabs</a></li>
49
50
  <li><a href="elements.html">Elements</a></li>
data/test/navigation.html CHANGED
@@ -23,7 +23,7 @@
23
23
  <![endif]-->
24
24
  </head>
25
25
  <body>
26
-
26
+
27
27
  <div class="row">
28
28
  <div class="twelve columns">
29
29
  <p><a href="index.html">&laquo; Back</a></p>
data/test/reveal.html CHANGED
@@ -23,7 +23,7 @@
23
23
  <![endif]-->
24
24
  </head>
25
25
  <body>
26
-
26
+
27
27
  <div class="row">
28
28
  <div class="twelve columns">
29
29
  <p><a href="index.html">&laquo; Back</a></p>
@@ -31,7 +31,7 @@
31
31
  <hr />
32
32
  </div>
33
33
  </div>
34
-
34
+
35
35
  <!-- Test Foundation Components Here -->
36
36
  <div class="row">
37
37
  <div class="twelve columns">
@@ -42,12 +42,29 @@
42
42
 
43
43
  </div>
44
44
  </div>
45
-
45
+
46
46
  <div id="exampleModal" class="reveal-modal">
47
- <h2>This is a modal.</h2>
47
+ <!-- <h2>This is a modal.</h2>
48
48
  <p>Reveal makes these very easy to summon and dismiss. The close button is simple an anchor with a unicode character icon and a class of <code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p>
49
49
  <p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p>
50
- <p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal&hellip;</a></p>
50
+ <p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal&hellip;</a></p> -->
51
+ <div class="row">
52
+ <div class="two columns">
53
+ <label>Hello</label>
54
+ </div>
55
+ <div class="nine columns end">
56
+ <input type="text">
57
+ </div>
58
+ </div>
59
+
60
+ <div class="row">
61
+ <div class="two columns">
62
+ <label>Hello</label>
63
+ </div>
64
+ <div class="nine columns end">
65
+ <input type="text">
66
+ </div>
67
+ </div>
51
68
  <a class="close-reveal-modal">&#215;</a>
52
69
  </div>
53
70
 
@@ -56,7 +73,7 @@
56
73
  <p>See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
57
74
  <a class="close-reveal-modal">&#215;</a>
58
75
  </div>
59
-
76
+
60
77
  <!-- Included JS Files -->
61
78
  <script src="../vendor/assets/javascripts/foundation/jquery.js"></script>
62
79
  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
@@ -73,6 +90,6 @@
73
90
  <script src="../vendor/assets/javascripts/foundation/app.js"></script>
74
91
  <script type="text/javascript">
75
92
  // Page-Specific JavaScript Goes Here
76
- </script>
93
+ </script>
77
94
  </body>
78
95
  </html>
data/test/scss/_settings.scss CHANGED
@@ -1,74 +1,142 @@
1
- // Settings file containing Foundation defaults
2
-
3
- // Grid Settings
4
-
5
- // $rowWidth: 1000px;
6
- // $columnGutter: 30px;
7
- // $totalColumns: 12;
8
- // $mobileTotalColumns: 4;
9
-
10
- // Colors Settings
11
-
12
- // $mainColor: #2ba6cb;
13
- // $secondaryColor: #e9e9e9;
14
- // $alertColor: #c60f13;
15
- // $successColor: #5da423;
16
- // $txtColor: #222;
17
- // $highlightColor: #ffff99;
18
- // $black: #000;
19
- // $white: #fff;
20
- // $shinyEdge: rgba(#fff, .5);
21
- // $darkEdge: rgba(#000, .2);
22
-
23
- // Typography Settings
24
-
25
- // $headerFontFamily: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
26
- // $headerFontWeight: bold;
27
- // $headerFontColor: #222;
28
- // $bodyFontFamily: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
29
- // $bodyFontWeight: normal;
30
- // $bodyFontColor: #222;
31
-
32
- // Button Settings
33
-
34
- // $buttonRadius: 3px;
35
- // $btnBase: 10px;
36
-
37
- // $tinyBtnBase: $btnBase - 5;
38
- // $smallBtnBase: $btnBase - 3;
39
- // $largeBtnBase: $btnBase + 5;
40
-
41
- // Form Settings
42
-
43
- // $formSpacing: 12px;
44
-
45
- // Tab Settings
46
-
47
- // $tabHeight: 40px;
48
-
49
- // Nav Bar Settings
50
-
51
- // $navBarHeight: 40px;
52
- // $navFlyoutBaseWidth: 250px;
53
-
54
- // Modular Scale
55
- // $ratio: $golden;
56
- $baseFontSize: 14px;
57
- $importantModNum: 44px;
58
-
59
- // Tooltip Settings
60
- // $hasTipBorderBottom: dotted 1px #ccc;
61
- // $hasTipFontWeight: bold;
62
- // $hasTipFontColor: #333;
63
- // $hasTipBorderBottomHover: dotted 1px darken($mainColor, 20%);
64
- // $hasTipFontColorHover: $mainColor;
65
- // $tooltipBackgroundColor: #000;
66
- // $tooltipBackgroundOpacity: 0.85;
67
- // $tooltipFontSize: 12;
68
- // $tooltipFontWeight: bold;
69
- // $tooltipFontColor: #fff;
70
- // $tapToCloseFontSize: 10;
71
- // $tapToCloseFontWeight: normal;
72
- // $tapToCloseFontColor: #888;
73
- // $tooltipFontSizeScreenSmall: 14;
74
- // $tooltipBackgroundOpacityScreenSmall: 0.85;
1
+ // // Settings file containing Foundation defaults
2
+
3
+ // // Grid Settings
4
+
5
+ // $rowWidth: 1000px !default;
6
+ // $columnGutter: 30px !default;
7
+ // $totalColumns: 12 !default;
8
+ // $mobileTotalColumns: 4 !default;
9
+
10
+ // // Text Direction Settings
11
+
12
+ // $textDirection: ltr !default; // Controls default global text direction, 'rtl' or 'ltr'
13
+ // $defaultFloat: left !default; // Change this to 'right' for right-to-left languages
14
+ // $defaultOpposite: right !default; // Change this to 'left' for right-to-left languages
15
+
16
+ // @if $textDirection == ltr {
17
+ // $defaultFloat: left;
18
+ // $defaultOpposite: right;
19
+ // } @else {
20
+ // $defaultFloat: right;
21
+ // $defaultOpposite: left;
22
+ // }
23
+
24
+ // // Colors Settings
25
+
26
+ // $mainColor: #2ba6cb !default;
27
+ // $secondaryColor: #e9e9e9 !default;
28
+ // $alertColor: #c60f13 !default;
29
+ // $successColor: #5da423 !default;
30
+ // $txtColor: #222 !default;
31
+ // $highlightColor: #ffff99 !default;
32
+ // $black: #000 !default;
33
+ // $white: #fff !default;
34
+ // $shinyEdge: rgba(#fff, .5) !default;
35
+ // $darkEdge: rgba(#000, .2) !default;
36
+
37
+ // // Font Settings
38
+
39
+ // $headerFontFamily: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
40
+ // $headerFontWeight: bold !default;
41
+ // $headerFontColor: #222 !default;
42
+ // $bodyFontFamily: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
43
+ // $bodyFontWeight: normal !default;
44
+ // $bodyFontColor: $txtColor !default;
45
+
46
+ // // Button Settings
47
+
48
+ // $buttonRadius: 3px !default;
49
+ // $btnBase: 10px !default;
50
+
51
+ // $tinyBtnBase: $btnBase - 5 !default;
52
+ // $smallBtnBase: $btnBase - 3 !default;
53
+ // $largeBtnBase: $btnBase + 5 !default;
54
+
55
+ // // Form Settings
56
+
57
+ // $formSpacing: 12px !default;
58
+
59
+ // // Tab Settings
60
+
61
+ // $tabHeight: 40px !default;
62
+
63
+ // // Nav Bar Settings
64
+
65
+ // $navBarHeight: 40px !default;
66
+ // $navFlyoutBaseWidth: 250px !default;
67
+
68
+ // // UI Settings
69
+
70
+ // $thumbRadius: 3px !default;
71
+
72
+ // $progBarHeight: 25px !default;
73
+ // $progBarBorderColor: darken($white, 20%) !default;
74
+ // $progBarBorderSize: 1px !default;
75
+ // $progBarPad: 2px !default;
76
+
77
+ // // Off Canvas Width Settings
78
+
79
+ // $mainWidth: 80% !default;
80
+ // $complementaryWidth: 20% !default;
81
+
82
+ // // Modular Scale Settings
83
+
84
+ // // $ratio: $golden; // THIS IS DEFAULT IN MODULAR-SCALE
85
+ // $baseFontSize: 14px !default;
86
+ // $importantModNum: 44px !default;
87
+ // $base-size: $baseFontSize $importantModNum;
88
+ // // Produced the following list of values: 14, 17, 23, 27, 37, 44, 59, 71, 95, 115;
89
+ // // http://www.modularscale.com by Tim Brown
90
+ // // https://github.com/scottkellum/modular-scale by scottkellum
91
+
92
+ // // Tooltip Settings
93
+ // $hasTipBorderBottom: dotted 1px #ccc !default;
94
+ // $hasTipFontWeight: bold !default;
95
+ // $hasTipFontColor: #333 !default;
96
+ // $hasTipBorderBottomHover: dotted 1px darken($mainColor, 20%) !default;
97
+ // $hasTipFontColorHover: $mainColor !default;
98
+ // $tooltipBackgroundColor: #000 !default;
99
+ // $tooltipBackgroundOpacity: 0.85 !default;
100
+ // $tooltipFontSize: 12 !default;
101
+ // $tooltipFontWeight: bold !default;
102
+ // $tooltipFontColor: #fff !default;
103
+ // $tapToCloseFontSize: 10 !default;
104
+ // $tapToCloseFontWeight: normal !default;
105
+ // $tapToCloseFontColor: #888 !default;
106
+ // $tooltipFontSizeScreenSmall: 14 !default;
107
+ // $tooltipBackgroundOpacityScreenSmall: 0.85 !default;
108
+
109
+ // // Top Bar Settings
110
+
111
+ // $topBarBgColor: #222 !default;
112
+ // $topBarHeight: 45px !default;
113
+ // $topBarBtmMargin: 30px !default;
114
+ // $topBarTitleWeight: bold !default;
115
+ // $topBarTitleSize: ms(1) !default;
116
+ // $topBarLinkColor: #fff !default;
117
+ // $topBarLinkWeight: bold !default;
118
+ // $topBarLinkSize: ms(0) - 1 !default;
119
+ // $topBarDropToggleSize: 5px !default;
120
+ // $topBarSearchWidth: 200px !default;
121
+ // $topBarBreakPoint: 940px !default; // Change to 9999px for always mobile layout
122
+ // $topBarNavToggleSize: 8px !default;
123
+
124
+ // // Media Queries
125
+
126
+ // $screenSmall: 768px !default;
127
+ // $screenMedium: 1279px !default;
128
+ // $screenXlarge: 1441px !default;
129
+
130
+ // // Saving for better em-based testing
131
+ // // $screenSmall: 44em !default;
132
+ // // $screenMedium: 77em !default;
133
+ // // $screenXlarge: 104em !default;
134
+
135
+ // // Saving for Sass 3.2 stable release
136
+ // // $mediaSmall: "only screen and (max-width: 767px)" !default;
137
+ // // $mediaMedium: "only screen and (max-width: 1279px) and (min-width: 768px)" !default;
138
+ // // $mediaXlarge: "only screen and (min-width: 1441px)" !default;
139
+ // // $mediaLandscape: "screen and (orientation: landscape)" !default;
140
+ // // $mediaPortrait: "screen and (orientation: portrait)" !default;
141
+ // // $mediaAll: "only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px)" !default;
142
+