zurb-foundation 3.0.9 → 3.1.0.rc1

Sign up to get free protection for your applications and to get access to all the features.
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
+